spongy/app/style.css

485 lines
8.1 KiB
CSS
Raw Normal View History

2014-10-24 15:51:53 -06:00
html, body {
margin: 0;
padding: 0
}
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
color: #505053;
font-family: sans-serif;
font-size: 14px;
}
.hidden {
display: none;
}
#templates {
display: none;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
.footer {
display: none;
font-style: italic;
color: #9493A2;
}
.help-command {
display: inline-block;
width: 7em;
}
.content-item {
white-space: nowrap;
overflow-x: hidden;
text-overflow: ellipsis;
}
#main {
display: -webkit-box;
-webkit-box-orient: horizontal;
width: 100%;
height: 100%;
position: absolute;
border-top: 1px solid rgba(0,0,0,0.15);
}
#main-top-border {
position: absolute;
top: 0;
z-index: 100;
width: 100%;
height: 1px;
background-color: rgba(0,0,0,0.05);
pointer-events: none;
}
#rooms-and-nicks {
background-color: #F7F5E4;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-box-flex: 0;
width: 150px;
height: inherit;
padding: 4px 0px;
border-right: 1px solid rgba(0, 0, 0, .15);
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
#rooms-and-nicks h1 {
color: #406698;
text-transform: uppercase;
font-size: 12px;
padding: 8px 0px 2px 8px;
margin: 0px;
}
#rooms-and-nicks .nick,
#rooms-and-nicks .room {
padding: 0 8px;
line-height: 26px;
}
#rooms-and-nicks .room {
cursor: pointer;
}
#rooms-and-nicks .server.footer {
display: block;
}
.dragbar:hover {
width: 6px;
transition: width .1s;
}
.dragbar {
height: 100%;
width: 1px;
cursor: col-resize;
}
#ghostbar{
width:3px;
background-color:#000;
opacity:0.8;
position:absolute;
cursor: col-resize;
z-index:999
}
#rooms-container {
-webkit-box-flex: 0;
border-bottom: 1px solid #CCC;
padding-bottom: 10px;
}
.no-nicks #rooms-container {
border-bottom-style: none;
padding-bottom: 0px;
}
#rooms-and-nicks.hidden {
display: none;
}
#rooms-and-nicks .room.server {
background-color: #F2EFD3;
position: relative;
}
#rooms-and-nicks:hover .room.server .content-item {
width: 130px;
}
#rooms-and-nicks .add-channel {
position: absolute;
right: 2px;
top: -1px;
cursor: pointer;
font-size: 18px;
display: none;
}
#rooms-and-nicks:hover .add-channel {
display: block;
}
#rooms-and-nicks .add-channel:hover {
color: #888;
}
#rooms-and-nicks .room.channel:first-child {
padding-top: 3px;
}
#rooms-and-nicks .room.channel:first-child .content-item {
padding-bottom: 3px;
line-height: 20px;
}
#rooms-and-nicks not(.current-server) + .channels .room.channel:nth-last-child(2) {
padding-bottom: 3px;
}
#rooms-and-nicks .room.channel:last-child {
padding-bottom: 3px;
}
#rooms-and-nicks not(.current-server) + .channels .room.channel:nth-last-child(2) .content-item {
padding-top: 3px;
line-height: 20px;
}
#rooms-and-nicks .room.channel:last-child .content-item {
padding-top: 3px;
line-height: 20px;
}
#rooms-and-nicks not(.current-server) + .channels .room.channel:nth-last-child(2):first-child .content-item {
line-height: 14px;
}
#rooms-and-nicks .room.channel:last-child:first-child .content-item {
line-height: 14px;
}
#rooms-and-nicks .current-server:not(.always-empty) + .channels .footer {
display: block;
}
#rooms-and-nicks .room.channel .content-item {
border-left: 1px solid rgba(0, 0, 0, .5);
padding-left: 7px;
}
#rooms-and-nicks .room.activity {
font-weight: bold;
}
#rooms-and-nicks .room.mention {
color: darkred;
}
#rooms-and-nicks .room.disconnected .content-item {
color: #9493A2;
font-style: italic;
}
#rooms-and-nicks .room.channel.disconnected .content-item {
border-left: 1px solid #9493A2;
}
#rooms-and-nicks .room.selected {
background-color: #F0E798;
}
#rooms-and-nicks .room {
position: relative;
}
#rooms-and-nicks .room .remove-button {
position: absolute;
right: 6px;
top: -1px;
cursor: pointer;
font-size: 30px;
color: rgba(0, 0, 0, .25);
display: none;
}
#rooms-and-nicks .room .remove-button:hover {
color: rgba(0, 0, 0, .5);
}
#rooms-and-nicks .room.selected:not(.footer):not(.always-empty) .content-item {
width: 123px;
}
#rooms-and-nicks .room:hover:not(.footer):not(.always-empty) .content-item {
width: 123px;
}
#rooms-and-nicks .room.selected:not(.footer):not(.always-empty) .remove-button {
display: inline-block;
}
#rooms-and-nicks .room:hover:not(.footer):not(.always-empty) .remove-button {
display: inline-block;
}
#nicks-container {
border-top: 1px solid #FFF;
-webkit-box-flex: 1;
}
.no-nicks #nicks-container {
display: none;
}
.rooms,
.nicks {
padding-top: 5px;
}
.nicks li:nth-child(odd) {
background-color: #F2EFD3;
}
#notice {
background-color: #406698;
box-shadow: 0px 1px 4px #888;
color: #FFF;
position: absolute;
width: 100%;
-webkit-transition: 150ms;
top: 0;
padding: 2px 0;
}
#notice.hide {
top: -38px;
}
#notice .content {
display: inline;
padding-left: 14px;
text-overflow: ellipsis;
white-space: nowrap;
overflow-x: hidden;
position: absolute;
top: 50%;
margin-top: -.5em;
}
#notice button {
float: right;
height: 22px;
font-size: 14px;
padding: 0px 4px;
margin: 4px;
border: none;
background-color: #ECECEC;
color: #505053;
cursor: pointer;
outline: none;
}
#notice button.close {
margin-right: 8px;
font-size: 12px;
border-radius: 42px;
width: 21px;
height: 21px;
}
#messages-and-input {
-webkit-box-flex: 1;
display: -webkit-box;
-webkit-box-orient: vertical;
box-shadow: 0px 0px 8px #CCC;
position: relative;
}
#messages-container {
overflow-y: auto;
-webkit-overflow-scrolling: touch;
-webkit-box-flex: 1;
border-bottom: 1px solid #CCC;
}
.messages {
display: table;
}
.message {
display: table-row;
-webkit-user-select: initial;
}
.message.activity-marker .source-content-container {
border-top: 1px solid rgb(224, 179, 179);
}
.message .timestamp {
color: #6060C0;
font-style: italic;
font-size: smaller;
white-space: nowrap;
display: table-cell;
text-align: right;
padding: 0px 10px 0px 10px;
border-right: 1px solid rgba(0,0,0,0.15);
cursor: text;
}
.source-content-container {
display: table-cell;
2014-10-31 16:09:52 -06:00
padding: 1px 10px 1px 15px;
2014-10-24 15:51:53 -06:00
width: 100%;
}
2014-10-27 10:23:50 -06:00
.message .source {
2014-10-24 15:51:53 -06:00
font-weight: bold;
padding-right: 5px;
margin-left: -5px;
white-space: nowrap;
display: inline;
text-align: right;
cursor: text;
}
2014-10-27 10:23:50 -06:00
.message .source.empty {
2014-10-24 15:51:53 -06:00
padding-right: 0;
}
2014-10-27 10:23:50 -06:00
.message .content {
2014-10-24 15:51:53 -06:00
display: inline;
white-space: pre-wrap;
cursor: text;
2014-10-31 16:09:52 -06:00
word-break: break-word;
2014-10-24 15:51:53 -06:00
}
#messages-container .messages .message:first-child .source-content-container {
padding-top: 10px;
}
#messages-container .messages .message:last-child .source-content-container {
padding-bottom: 8px;
}
.message.list {
/* empty style for now */
}
.longword { word-break: break-all; }
#nick-and-input {
border-top: 1px solid #F9F9F9;
-webkit-box-flex: 0;
display: -webkit-box;
background-color: #ECECEC;
padding: 5px 10px 5px 10px;
}
#nick {
padding-top: 5px;
}
#nick > span {
padding-right: 10px;
}
#nick > .name:before {
font-weight: bold;
content: "[ "
}
#nick > .name:after {
font-weight: bold;
content: " ]"
}
#nick .away:before {
content: "("
}
#nick .away:after {
content: ")"
}
#input-bar {
-webkit-box-flex: 1;
display: -webkit-box;
}
#input {
background-color: #F9F9F9;
display: block;
-webkit-box-flex: 1;
width: 100%;
height: 30px;
border: 1px;
border-radius: 5px;
-webkit-box-shadow: 0px 0px 3px #888;
color: #505053;
font-size: 14px;
padding: 0px 8px;
outline: 0;
}
#input.blink {
-webkit-box-shadow: 0px 0px 6px #406698;
}
::-webkit-scrollbar {
width: 9px;
height: 9px;
}
::-webkit-scrollbar-button:start:decrement,
::-webkit-scrollbar-button:end:increment {
display: block;
height: 0;
}
::-webkit-scrollbar-track-piece {
background-color: rgba(0,0,0,0.1);
}
::-webkit-scrollbar-thumb:vertical {
height: 50px;
background-color: #999;
border-radius: 8px;
}
::-webkit-scrollbar-thumb:vertical:hover {
background-color: #888;
}
::-webkit-scrollbar-thumb:horizontal {
width: 50px;
background-color: #999;
border-radius: 8px;
}