anonymousland-synapse/webclient/app.css

344 lines
5.0 KiB
CSS
Raw Normal View History

2014-08-12 10:10:52 -04:00
body {
font-family: "Myriad Pro", "Myriad", Helvetica, Arial, sans-serif;
font-size: 12pt;
margin: 0px;
}
h1 {
font-family: Helvetica, Arial, sans-serif;
}
/*** Overall page layout ***/
#page {
position: absolute;
top: 80px;
bottom: 100px;
left: 0px;
right: 0px;
margin: 20px;
margin: 20px;
}
#wrapper {
2014-08-12 10:10:52 -04:00
margin: auto;
max-width: 1280px;
height: 100%;
2014-08-12 10:10:52 -04:00
}
#roomName {
max-width: 1280px;
width: 100%;
2014-08-12 10:10:52 -04:00
text-align: right;
top: -40px;
position: absolute;
2014-08-12 10:10:52 -04:00
font-size: 16pt;
margin-bottom: 10px;
}
#controlPanel {
position: absolute;
2014-08-12 10:10:52 -04:00
bottom: 0px;
width: 100%;
background-color: #f8f8f8;
border-top: #aaa 1px solid;
}
#controls {
2014-08-12 10:10:52 -04:00
max-width: 1280px;
padding: 12px;
margin: auto;
}
#inputBarTable {
2014-08-12 10:10:52 -04:00
width: 100%;
}
#inputBarTable tr td {
padding: 1px 4px;
2014-08-12 10:10:52 -04:00
}
#mainInput {
2014-08-12 10:10:52 -04:00
width: 100%;
}
.blink {
background-color: #faa;
}
.mouse-pointer {
cursor: pointer;
}
2014-08-12 10:10:52 -04:00
/*** Participant list ***/
#usersTableWrapper {
2014-08-12 10:10:52 -04:00
float: right;
width: 120px;
height: 100%;
overflow-y: auto;
}
#usersTable {
width: 100%;
2014-08-12 10:10:52 -04:00
border-collapse: collapse;
}
#usersTable td {
2014-08-12 10:10:52 -04:00
padding: 0px;
}
.userAvatar {
width: 80px;
height: 100px;
2014-08-12 10:10:52 -04:00
position: relative;
background-color: #000;
2014-08-12 10:10:52 -04:00
}
.userAvatar .userAvatarImage {
position: absolute;
top: 0px;
object-fit: cover;
2014-08-12 10:10:52 -04:00
}
.userAvatar .userAvatarGradient {
position: absolute;
bottom: 20px;
2014-08-12 10:10:52 -04:00
}
.userAvatar .userName {
position: absolute;
color: #fff;
margin: 2px;
bottom: 0px;
font-size: 8pt;
word-break: break-all;
2014-08-12 10:10:52 -04:00
}
.userPresence {
text-align: center;
font-size: 8pt;
color: #fff;
background-color: #aaa;
border-bottom: 1px #ddd solid;
}
.online {
background-color: #38AF00;
}
.unavailable {
2014-08-12 10:10:52 -04:00
background-color: #FFCC00;
}
/*** Message table ***/
#messageTableWrapper {
height: 100%;
2014-08-12 10:10:52 -04:00
margin-right: 140px;
overflow-y: auto;
width: auto;
2014-08-12 10:10:52 -04:00
}
#messageTable {
margin: auto;
max-width: 1280px;
2014-08-12 10:10:52 -04:00
width: 100%;
border-collapse: collapse;
table-layout: fixed;
2014-08-12 10:10:52 -04:00
}
#messageTable td {
2014-08-12 10:10:52 -04:00
padding: 0px;
}
.leftBlock {
2014-08-21 21:11:33 -04:00
width: 14em;
word-wrap: break-word;
2014-08-12 10:10:52 -04:00
vertical-align: top;
background-color: #fff;
color: #888;
font-weight: medium;
font-size: 8pt;
text-align: right;
border-top: 1px #ddd solid;
}
.rightBlock {
width: 32px;
color: #888;
line-height: 0;
vertical-align: top;
}
.sender, .timestamp {
padding-right: 1em;
padding-left: 1em;
padding-top: 3px;
}
.sender {
margin-bottom: -3px;
}
.avatar {
width: 48px;
text-align: right;
vertical-align: top;
line-height: 0;
}
.avatarImage {
object-fit: cover;
}
2014-08-12 10:10:52 -04:00
.emote {
background-color: transparent ! important;
2014-08-12 10:10:52 -04:00
border: 0px ! important;
}
.membership {
background-color: transparent ! important;
border: 0px ! important;
}
2014-08-13 05:09:30 -04:00
.image {
display: block;
max-width:320px;
max-height:320px;
width: auto;
height: auto;
}
2014-08-21 21:11:33 -04:00
.text {
vertical-align: top;
}
2014-08-12 10:10:52 -04:00
.bubble {
background-color: #eee;
border: 1px solid #d8d8d8;
display: inline-block;
margin-bottom: -1px;
max-width: 90%;
font-size: 16px;
word-wrap: break-word;
padding-top: 7px;
padding-bottom: 5px;
2014-08-12 10:10:52 -04:00
padding-left: 1em;
padding-right: 1em;
vertical-align: middle;
2014-08-21 20:41:38 -04:00
-webkit-text-size-adjust:100%
}
.differentUser td {
padding-bottom: 5px ! important;
2014-08-12 10:10:52 -04:00
}
.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;
2014-08-12 10:10:52 -04:00
}
#room-fullscreen-image {
position: absolute;
top: 0px;
height: 0px;
width: 100%;
height: 100%;
}
#room-fullscreen-image img {
max-width: 100%;
max-height: 100%;
bottom: 0;
left: 0;
margin: auto;
overflow: auto;
position: fixed;
right: 0;
top: 0;
}
/*** Profile ***/
.profile-avatar {
width: 160px;
height: 160px;
display:table-cell;
vertical-align: middle;
2014-08-19 03:24:35 -04:00
text-align: center;
}
.profile-avatar img {
max-width: 100%;
max-height: 100%;
}
/*** User profile page ***/
#user-ids {
padding-left: 1em;
}
#user-displayname {
font-size: 16pt;
}
2014-08-12 10:10:52 -04:00
/******************************/
#header {
2014-08-12 10:10:52 -04:00
padding-left: 20px;
padding-right: 20px;
max-width: 1280px;
margin: auto;
}
#header-buttons {
2014-08-12 10:10:52 -04:00
float: right;
}
#config {
2014-08-13 21:21:49 -04:00
position: absolute;
z-index: 100;
top: 100px;
left: 50%;
width: 500px;
margin-left: -250px;
2014-08-13 21:21:49 -04:00
text-align: center;
padding: 20px;
background-color: #aaa;
}
2014-08-12 10:10:52 -04:00
.text_entry_section {
position: fixed;
bottom: 0;
z-index: 100;
left: 0;
right: 10em;
width: 100%;
background: #e0e0e0;
}
.member_invited {
color: blue;
}
.member_joined {
}
.member_left {
color: gray;
}