synapse-product/syweb/webclient/app.css
2014-11-13 14:45:29 +00:00

892 lines
13 KiB
CSS
Executable File

/** Common layout **/
html {
height: 100%;
}
body {
height: 100%;
font-family: "Myriad Pro", "Myriad", Helvetica, Arial, sans-serif;
font-size: 12pt;
margin: 0px;
}
h1 {
font-size: 20pt;
}
a:link { color: #666; }
a:visited { color: #666; }
a:hover { color: #000; }
a:active { color: #000; }
textarea, input {
font-family: inherit;
font-size: inherit;
}
.page {
min-height: 100%;
margin-bottom: -32px; /* to make room for the footer */
}
#wrapper {
margin: auto;
max-width: 1280px;
padding-top: 40px;
padding-bottom: 40px;
padding-left: 20px;
padding-right: 20px;
}
#unsupportedBrowser {
padding-top: 240px;
text-align: center;
}
#header
{
position: absolute;
z-index: 2;
top: 0px;
width: 100%;
background-color: #333;
height: 32px;
}
#callBar {
float: left;
height: 32px;
margin: auto;
text-align: right;
line-height: 16px;
}
.callIcon {
margin-left: 4px;
margin-right: 4px;
margin-top: 8px;
transition: transform linear 0.5s;
transition: -webkit-transform linear 0.5s;
}
.callIcon.ended {
transform: rotateZ(45deg);
-webkit-transform: rotateZ(45deg);
filter: hue-rotate(-90deg);
-webkit-filter: hue-rotate(-90deg);
}
#callPeerImage {
width: 32px;
height: 32px;
border: none;
float: left;
}
#callPeerNameAndState {
float: left;
margin-left: 4px;
}
#callState {
font-size: 60%;
}
#callPeerName {
font-size: 80%;
}
#videoBackground {
position: absolute;
height: 100%;
width: 100%;
top: 0px;
left: 0px;
z-index: 1;
background-color: rgba(0,0,0,0.0);
pointer-events: none;
transition: background-color linear 500ms;
}
#videoBackground.large {
background-color: rgba(0,0,0,0.85);
pointer-events: auto;
}
#videoContainer {
position: relative;
top: 32px;
max-width: 1280px;
margin: auto;
}
#videoContainerPadding {
width: 1280px;
}
#localVideo {
position: absolute;
width: 128px;
height: 72px;
z-index: 1;
transition: left linear 500ms, top linear 500ms, width linear 500ms, height linear 500ms;
}
.mini #localVideo {
top: 0px;
left: 130px;
}
.large #localVideo {
top: 70px;
left: 20px;
}
.ended #localVideo {
-webkit-filter: grayscale(1);
filter: grayscale(1);
}
#remoteVideo {
position: relative;
height: auto;
transition: left linear 500ms, top linear 500ms, width linear 500ms, height linear 500ms;
}
.mini #remoteVideo {
left: 260px;
top: 0px;
width: 128px;
}
.large #remoteVideo {
left: 0px;
top: 50px;
width: 100%;
}
.ended #remoteVideo {
-webkit-filter: grayscale(1);
filter: grayscale(1);
}
#headerContent {
color: #ccc;
max-width: 1280px;
margin: auto;
text-align: right;
height: 32px;
line-height: 32px;
position: relative;
}
#headerContent a:link,
#headerContent a:visited,
#headerContent a:hover,
#headerContent a:active {
color: #fff;
}
#footer
{
width: 100%;
border-top: #666 1px solid;
background-color: #aaa;
height: 32px;
}
#footerContent
{
font-size: 8pt;
color: #fff;
max-width: 1280px;
margin: auto;
text-align: center;
height: 32px;
line-height: 32px;
}
#genericHeading
{
margin-top: 13px;
}
#feedback {
color: #800;
}
.mouse-pointer {
cursor: pointer;
}
.invited {
opacity: 0.2;
}
/*** Login Pages ***/
.loginWrapper {
text-align: center;
}
#recaptcha_area {
margin: auto
}
#loginForm {
text-align: left;
padding: 1em;
margin-bottom: 40px;
display: inline-block;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.15);
-moz-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.15);
box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.15);
background-color: #f8f8f8;
border: 1px #ccc solid;
}
#loginForm input[type='radio'] {
margin-right: 1em;
}
#serverConfig {
text-align: center;
}
#serverConfig,
#serverConfig input,
#serverConfig button
{
font-size: 10pt ! important;
}
.smallPrint {
color: #888;
font-size: 9pt ! important;
font-style: italic ! important;
}
#serverConfig label {
display: inline-block;
text-align: right;
margin-right: 0.5em;
width: 7em;
}
#loginForm,
#loginForm input,
#loginForm button,
#loginForm select {
font-size: 18px;
}
/*** Room page ***/
#roomPage {
position: absolute;
top: 120px;
bottom: 120px;
left: 20px;
right: 20px;
}
#roomWrapper {
margin: auto;
max-width: 1280px;
height: 100%;
}
#roomHeader {
margin: auto;
padding-left: 20px;
padding-right: 20px;
padding-top: 53px;
max-width: 1280px;
}
#controlPanel {
position: absolute;
bottom: 0px;
width: 100%;
height: 70px;
background-color: #f8f8f8;
border-top: #aaa 1px solid;
}
#controls {
max-width: 1280px;
padding: 12px;
padding-right: 42px;
margin: auto;
position: relative;
}
#buttonsCell {
width: 150px;
}
#inputBarTable {
width: 100%;
}
#inputBarTable tr td {
padding: 1px 4px;
}
#mainInput {
width: 100%;
padding: 5px;
resize: vertical;
}
#attachButton {
position: absolute;
cursor: pointer;
margin-top: 3px;
right: 0px;
background: url('img/attach.png');
width: 25px;
height: 25px;
border: 0px;
}
.blink {
background-color: #faa;
}
.roomHighlight {
font-weight: bold;
}
.publicTable {
max-width: 480px;
width: 100%;
border-collapse: collapse;
}
.publicTable tr {
width: 100%;
}
.publicTable td {
vertical-align: text-top;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.publicRoomEntry {
max-width: 430px;
}
.publicRoomJoinedUsers {
width: 5em;
text-align: right;
font-size: 12px;
color: #888;
}
.publicRoomTopic {
color: #888;
font-size: 12px;
overflow: hidden;
padding-bottom: 5px;
border-bottom: 1px #ddd solid;
}
#roomName {
font-size: 16px;
text-align: right;
}
#roomTopic {
font-size: 13px;
text-align: right;
}
.roomNameInput, .roomTopicInput {
width: 100%;
}
.roomNameSection, .roomTopicSection {
text-align: right;
float: right;
width: 100%;
}
.roomNameSetNew, .roomTopicSetNew {
float: right;
}
.roomHeaderInfo {
text-align: right;
float: right;
margin-top: 0px;
margin-right: 30px;
}
/*** Room Info Dialog ***/
.room-info {
border-collapse: collapse;
width: 100%;
}
.room-info-event {
border-bottom: 1pt solid black;
}
.room-info-event-meta {
padding-top: 1em;
padding-bottom: 1em;
}
.room-info-event-content {
padding-top: 1em;
padding-bottom: 1em;
}
.monospace {
font-family: monospace;
}
.redact-button {
float: left
}
.room-info-textarea-content {
height: auto;
width: 100%;
resize: vertical;
}
/*** Control Buttons ***/
#controlButtons {
float: right;
margin-right: -4px;
padding-bottom: 6px;
}
.controlButton {
cursor: pointer;
border: 0px;
width: 30px;
height: 30px;
margin-left: 3px;
margin-right: 3px;
}
/*** Participant list ***/
#usersTableWrapper {
float: right;
clear: right;
width: 101px;
height: 100%;
overflow-y: auto;
}
/*
#usersTable {
width: 100%;
border-collapse: collapse;
}
#usersTable td {
padding: 0px;
}
.userAvatar {
width: 80px;
height: 100px;
position: relative;
background-color: #000;
}
*/
.userAvatar {
}
.userAvatarFrame {
border-radius: 46px;
width: 80px;
margin: auto;
position: relative;
border: 3px solid #aaa;
background-color: #aaa;
}
.userAvatarImage {
border-radius: 40px;
text-align: center;
object-fit: cover;
display: block;
}
/*
.userAvatar .userAvatarGradient {
position: absolute;
bottom: 20px;
width: 100%;
}
*/
.userName {
margin-top: 3px;
margin-bottom: 6px;
text-align: center;
font-size: 12px;
word-wrap: break-word;
}
.userPowerLevel {
position: absolute;
bottom: -1px;
height: 1px;
background-color: #f00;
}
.userPowerLevelBar {
display: inline;
position: absolute;
width: 2px;
height: 10px;
/* border: 1px solid #000;
*/ background-color: #aaa;
}
.userPowerLevelMeter {
position: relative;
bottom: 0px;
background-color: #f00;
}
/*
.userPresence {
text-align: center;
font-size: 12px;
color: #fff;
background-color: #aaa;
border-bottom: 1px #ddd solid;
}
*/
.online {
border-color: #38AF00;
background-color: #38AF00;
}
.unavailable {
border-color: #FFCC00;
background-color: #FFCC00;
}
/*** Message table ***/
#messageTableWrapper {
height: 100%;
margin-right: 140px;
overflow-y: auto;
width: auto;
}
#messageTable {
margin: auto;
max-width: 1280px;
width: 100%;
border-collapse: collapse;
table-layout: fixed;
}
#messageTable td {
padding: 0px;
/* border: 1px solid #888; */
}
.leftBlock {
width: 7em;
word-wrap: break-word;
vertical-align: top;
background-color: #fff;
color: #aaa;
font-weight: medium;
font-size: 12px;
text-align: right;
/*
border-top: 1px #ddd solid;
*/
}
.rightBlock {
width: 32px;
color: #888;
line-height: 0;
vertical-align: top;
}
.sender, .timestamp {
/* padding-top: 3px;
*/}
.timestamp {
font-size: 10px;
color: #ccc;
height: 13px;
margin-top: 4px;
transition-property: opacity;
transition-duration: 0.3s;
}
.sender {
font-size: 12px;
/*
margin-top: 5px;
margin-bottom: -9px;
*/
}
.avatar {
width: 48px;
text-align: right;
vertical-align: top;
line-height: 0;
}
.avatarImage {
position: relative;
top: 5px;
object-fit: cover;
border-radius: 32px;
margin-top: 4px;
}
.emote {
background-color: transparent ! important;
border: 0px ! important;
}
.membership {
background-color: transparent ! important;
border: 0px ! important;
}
.image {
border: 1px solid #888;
display: block;
max-width:320px;
max-height:320px;
width: auto;
height: auto;
}
.text {
vertical-align: top;
}
.bubble {
/*
background-color: #eee;
border: 1px solid #d8d8d8;
margin-bottom: -1px;
padding-top: 7px;
padding-bottom: 5px;
-webkit-text-size-adjust:100%
vertical-align: middle;
*/
display: inline-block;
max-width: 90%;
padding-left: 1em;
padding-right: 1em;
padding-top: 2px;
padding-bottom: 2px;
font-size: 14px;
word-wrap: break-word;
}
.bubble img {
max-width: 100%;
max-height: auto;
}
.differentUser .msg {
padding-top: 14px ! important;
}
.mine {
text-align: right;
}
.text.emote .bubble,
.text.membership .bubble,
.mine .text.emote .bubble,
.mine .text.membership .bubble
{
background-color: transparent ! important;
border: 0px ! important;
}
.mine .text .bubble {
/*
background-color: #f8f8ff ! important;
*/
text-align: left ! important;
}
.bubble .message {
/* Wrap words and break lines on CR+LF */
white-space: pre-wrap;
}
.bubble .messagePending {
opacity: 0.3
}
.messageUnSent {
color: #F00;
}
.messageBing {
color: #00F;
}
#room-fullscreen-image {
position: absolute;
top: 0px;
height: 0px;
width: 100%;
height: 100%;
}
#room-fullscreen-image img {
max-width: 90%;
max-height: 90%;
bottom: 0;
left: 0;
margin: auto;
overflow: auto;
position: fixed;
right: 0;
top: 0;
-webkit-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.75);
box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.75);
}
/*** Recents ***/
.recentsTable {
max-width: 480px;
width: 100%;
border-collapse: collapse;
table-layout: fixed;
}
.recentsTable tr {
width: 100%;
}
.recentsTable td {
vertical-align: text-top;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
padding-left: 0.5em;
padding-right: 0.5em;
}
.recentsRoom {
cursor: pointer;
}
.recentsRoom:hover {
background-color: #f8f8ff;
}
.recentsRoomSelected {
background-color: #eee;
}
.recentsRoomUnread {
background-color: #fee;
}
.recentsRoomBing {
background-color: #eef;
}
.recentsRoomName {
font-size: 16px;
padding-top: 7px;
width: auto;
}
.recentsPublicRoom {
font-weight: bold;
}
.recentsRoomSummaryUsersCount, .recentsRoomSummaryTS {
color: #888;
font-size: 12px;
width: 7em;
text-align: right;
}
.recentsRoomSummary {
color: #888;
font-size: 12px;
padding-bottom: 5px;
}
/* Do not show users count in the recents fragment displayed on the room page */
#roomPage .recentsRoomSummaryUsersCount {
width: 0em;
}
/*** Recents in the room page ***/
#roomRecentsTableWrapper {
float: left;
max-width: 320px;
padding-right: 10px;
margin-right: 10px;
height: 100%;
/* border-right: 1px solid #ddd; */
overflow-y: auto;
}
/*** Profile ***/
.profile-avatar {
width: 160px;
height: 160px;
display: table-cell;
vertical-align: middle;
text-align: center;
}
.profile-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
/*** User profile page ***/
#user-displayname {
font-size: 24px;
}
#user-displayname-input {
width: 160px;
max-width: 155px;
}
#user-save-button {
width: 160px;
font-size: 14px;
}