cadey
/
Shuo
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

More design changes

This commit is contained in:
Mattias Erming 2014-08-12 17:15:40 -07:00
parent dfe9ec3b82
commit 6a67e310dd
1 changed files with 39 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
client/css/style.css
View File

@ -10,11 +10,11 @@ body {
height: 100%; height: 100%;
} }
body { body {
background: #fff;
background: #505d70; background: #505d70;
color: #222; color: #222;
font: 16px Lato, sans-serif; font: 16px Lato, sans-serif;
margin: 0; margin: 0;
min-width: 780px;
} }
a { a {
transition: opacity .2s; transition: opacity .2s;
@ -49,9 +49,10 @@ button {
} }
.btn { .btn {
border: 2px solid #84d1ff; border: 2px solid #84d1ff;
border: 2px solid #84ce88;
border-radius: 3px; border-radius: 3px;
color: #95a5a6;
color: #84d1ff; color: #84d1ff;
color: #84ce88;
display: inline-block; display: inline-block;
font: bold 12px Lato, sans-serif; font: bold 12px Lato, sans-serif;
letter-spacing: 1px; letter-spacing: 1px;
@ -61,12 +62,10 @@ button {
transition: background .2s, border-color .2s, color .2s; transition: background .2s, border-color .2s, color .2s;
word-spacing: 3px; word-spacing: 3px;
} }
.btn:focus {
background: #f2fbff;
}
.btn:disabled, .btn:disabled,
.btn:hover { .btn:hover {
background: #84d1ff; background: #84d1ff;
background: #84ce88;
color: #fff; color: #fff;
} }
.btn:active { .btn:active {
@ -329,6 +328,17 @@ button {
#windows .input:focus { #windows .input:focus {
border-color: #79838c; border-color: #79838c;
} }
#windows .window:before,
#windows .chan:before {
background: #f4f4f4;
background-image: linear-gradient(#f4f4f4, #ececec);
border-bottom: 1px solid #ddd;
content: " ";
display: block;
height: 10px;
position: relative;
z-index: 10;
}
#windows .chan, #windows .chan,
#windows .window { #windows .window {
background: #fff; background: #fff;
@ -367,22 +377,20 @@ button {
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
position: absolute; position: absolute;
right: 180px; right: 180px;
top: 0; top: 10px;
} }
#chat .sidebar { #chat .sidebar {
background: #fff; background: #fff;
border-left: 1px solid #e9ecef; border-left: 1px solid #e9ecef;
border-left: 1px solid #e4eaee;
bottom: 0; bottom: 0;
position: absolute; position: absolute;
right: 0; right: 0;
top: 0; top: 10px;
width: 180px; width: 180px;
} }
#chat .sidebar button {
color: #33b0f7;
}
#chat .show-more { #chat .show-more {
color: #33b0f7; color: #b1c3ce;
position: absolute; position: absolute;
width: 100%; width: 100%;
border-bottom: 1px solid #ddd; border-bottom: 1px solid #ddd;
@ -401,41 +409,46 @@ button {
display: table-row; display: table-row;
word-wrap: break-word; word-wrap: break-word;
} }
#chat .msg:first-child > span {
padding-top: 10px;
}
#chat .msg:last-child { #chat .msg:last-child {
height: 100%; height: 100%;
} }
#chat .msg:last-child .text { #chat .msg:last-child .text {
padding-bottom: 5px; padding-bottom: 10px;
} }
#chat .msg .type { #chat .msg .type {
color: #ccc; color: #ccc;
color: #d0dbe2;
display: none; display: none;
} }
#chat .time, #chat .time,
#chat .from, #chat .from,
#chat .text { #chat .text {
display: table-cell; display: table-cell;
padding: 5px 0 0; padding: 4px 0;
} }
#chat .time { #chat .time {
background: #f9f9f9; background: #fcfdfd;
color: #ddd; color: #e4eaee;
text-align: right; text-align: right;
width: 46px; width: 46px;
min-width: 46px; min-width: 46px;
} }
#chat .from { #chat .from {
background: #f9f9f9; background: #fcfdfd;
border-right: 1px solid #f4f4f4; border-right: 1px solid #f6f8f9;
color: #ddd; color: #b1c3ce;
padding-right: 10px; padding-right: 10px;
text-align: right; text-align: right;
width: 134px; width: 134px;
min-width: 134px; min-width: 134px;
} }
#chat a, #chat a,
#chat .from button { #chat .message .from button,
color: #33b0f7; #chat .sidebar button {
color: #84ce88;
} }
#chat .text { #chat .text {
padding-left: 10px; padding-left: 10px;
@ -488,13 +501,13 @@ button {
} }
#chat .meta .type { #chat .meta .type {
color: #ccc; color: #ccc;
color: #b1c3ce;
font-size: 12px; font-size: 12px;
text-transform: capitalize; text-transform: capitalize;
} }
#chat .count { #chat .count {
background: #f9f9f9; border-top: 1px dashed #e4eaee;
border-top: 1px dashed #e9ecef; border-bottom: 1px solid #e4eaee;
border-bottom: 1px solid #e9ecef;
height: 40px; height: 40px;
left: 0; left: 0;
position: absolute; position: absolute;
@ -533,7 +546,7 @@ button {
} }
#chat .names button { #chat .names button {
display: block; display: block;
line-height: 1.6em; line-height: 1.8em;
} }
#sign-in label { #sign-in label {
display: block; display: block;
@ -633,6 +646,7 @@ button {
width: 0; width: 0;
} }
/*
@media (max-width: 768px) { @media (max-width: 768px) {
#viewport.rt { #viewport.rt {
-webkit-transform: translate3d(-180px, 0, 0); -webkit-transform: translate3d(-180px, 0, 0);
@ -702,3 +716,4 @@ button {
display: none; display: none;
} }
} }
*/