thegamer/Cable-Desktop
2
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Theme-ify header colors and styles

Browse source 
Remove the Signal banner and restyle the search field for ios theme.

// FREEBIE
This commit is contained in:
lilia 2016-08-30 16:54:16 -07:00
parent 6e2ca331a3
commit 2e3db91b30
3 changed files with 94 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
stylesheets/_global.scss
View file

@ -29,15 +29,6 @@ body {
} }
#header { #header {
background-color: $blue;
color: white;
transition: background-color 0.5s;
&.inactive {
background-color: $grey_l;
color: $grey_d;
}
h1 { h1 {
margin: 0; margin: 0;
line-height: $header-height; line-height: $header-height;

38
stylesheets/_themes.scss
View file

@ -23,6 +23,32 @@
} }
.ios { .ios {
#header {
height: 64px;
border-bottom: 1px solid rgba(0,0,0,0.05);
background-color: $grey_l;
color: $grey_d;
h1 { display: none; }
}
.tool-bar {
float: left;
padding: 15px;
}
textarea.send-message,
input.search {
border-radius: 5px;
height: 34px;
line-height: 34px;
}
.conversation-header {
background-color: $grey_l;
color: $grey_d;
border-color: rgba(0,0,0,0.05);
}
.menu .hamburger {
@include header-icon-black('/images/menu.svg');
}
.control .content { .control .content {
padding: 10px; padding: 10px;
} }
@ -66,6 +92,16 @@
} }
.android { .android {
#header {
background-color: $blue;
color: white;
transition: background-color 0.5s;
&.inactive {
background-color: $grey_l;
color: $grey_d;
}
}
.bubble { .bubble {
padding: 9px 12px; padding: 9px 12px;
border-radius: $border-radius; border-radius: $border-radius;
@ -80,7 +116,7 @@
} }
} }
.avatar, .conversation-header, .android .bubble { .avatar, .android .conversation-header, .android .bubble {
&.red { background-color: $material_red ; } &.red { background-color: $material_red ; }
&.pink { background-color: $material_pink ; } &.pink { background-color: $material_pink ; }
&.purple { background-color: $material_purple ; } &.purple { background-color: $material_purple ; }

87
stylesheets/manifest.css
View file

@ -37,19 +37,12 @@ body {
.hide { .hide {
display: none; } display: none; }
#header { #header h1 {
background-color: #2090ea; margin: 0;
color: white; line-height: 64px;
transition: background-color 0.5s; } padding-left: 20px;
#header.inactive { font-size: 22px;
background-color: #f3f3f3; font-weight: normal; }
color: #454545; }
#header h1 {
margin: 0;
line-height: 64px;
padding-left: 20px;
font-size: 22px;
font-weight: normal; }
.conversation-header button, .conversation-header button,
.title-bar button { .title-bar button {
@ -1274,6 +1267,33 @@ li.entry .error-icon-container {
background-color: #d9d9d9; background-color: #d9d9d9;
border-color: silver; } border-color: silver; }
.ios #header {
height: 64px;
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
background-color: #f3f3f3;
color: #454545; }
.ios #header h1 {
display: none; }
.ios .tool-bar {
float: left;
padding: 15px; }
.ios textarea.send-message,
.ios input.search {
border-radius: 5px;
height: 34px;
line-height: 34px; }
.ios .conversation-header {
background-color: #f3f3f3;
color: #454545;
border-color: rgba(0, 0, 0, 0.05); }
.ios .menu .hamburger {
-webkit-mask: url("/images/menu.svg") no-repeat center;
-webkit-mask-size: 100%;
background-color: rgba(0, 0, 0, 0.5); }
.ios .menu .hamburger:focus, .ios .menu .hamburger:hover {
-webkit-mask: url("/images/menu.svg") no-repeat center;
-webkit-mask-size: 100%;
background-color: black; }
.ios .control .content { .ios .control .content {
padding: 10px; } padding: 10px; }
.ios .bubble .content .body { .ios .bubble .content .body {
@ -1310,6 +1330,13 @@ li.entry .error-icon-container {
.ios .attachment a { .ios .attachment a {
border-radius: 15px; } border-radius: 15px; }
.android #header {
background-color: #2090ea;
color: white;
transition: background-color 0.5s; }
.android #header.inactive {
background-color: #f3f3f3;
color: #454545; }
.android .bubble { .android .bubble {
padding: 9px 12px; padding: 9px 12px;
border-radius: 5px; border-radius: 5px;
@ -1327,39 +1354,39 @@ li.entry .error-icon-container {
.android .incoming .bubble a, .android .incoming .bubble .attachments a, .android .incoming .bubble .content a { .android .incoming .bubble a, .android .incoming .bubble .attachments a, .android .incoming .bubble .content a {
color: #f3f3f3; } color: #f3f3f3; }
.avatar.red, .conversation-header.red, .android .bubble.red { .avatar.red, .android .conversation-header.red, .android .bubble.red {
background-color: #EF5350; } background-color: #EF5350; }
.avatar.pink, .conversation-header.pink, .android .bubble.pink { .avatar.pink, .android .conversation-header.pink, .android .bubble.pink {
background-color: #EC407A; } background-color: #EC407A; }
.avatar.purple, .conversation-header.purple, .android .bubble.purple { .avatar.purple, .android .conversation-header.purple, .android .bubble.purple {
background-color: #AB47BC; } background-color: #AB47BC; }
.avatar.deep_purple, .conversation-header.deep_purple, .android .bubble.deep_purple { .avatar.deep_purple, .android .conversation-header.deep_purple, .android .bubble.deep_purple {
background-color: #7E57C2; } background-color: #7E57C2; }
.avatar.indigo, .conversation-header.indigo, .android .bubble.indigo { .avatar.indigo, .android .conversation-header.indigo, .android .bubble.indigo {
background-color: #5C6BC0; } background-color: #5C6BC0; }
.avatar.blue, .conversation-header.blue, .android .bubble.blue { .avatar.blue, .android .conversation-header.blue, .android .bubble.blue {
background-color: #2196F3; } background-color: #2196F3; }
.avatar.light_blue, .conversation-header.light_blue, .android .bubble.light_blue { .avatar.light_blue, .android .conversation-header.light_blue, .android .bubble.light_blue {
background-color: #03A9F4; } background-color: #03A9F4; }
.avatar.cyan, .conversation-header.cyan, .android .bubble.cyan { .avatar.cyan, .android .conversation-header.cyan, .android .bubble.cyan {
background-color: #00BCD4; } background-color: #00BCD4; }
.avatar.teal, .conversation-header.teal, .android .bubble.teal { .avatar.teal, .android .conversation-header.teal, .android .bubble.teal {
background-color: #009688; } background-color: #009688; }
.avatar.green, .conversation-header.green, .android .bubble.green { .avatar.green, .android .conversation-header.green, .android .bubble.green {
background-color: #4CAF50; } background-color: #4CAF50; }
.avatar.light_green, .conversation-header.light_green, .android .bubble.light_green { .avatar.light_green, .android .conversation-header.light_green, .android .bubble.light_green {
background-color: #7CB342; } background-color: #7CB342; }
.avatar.orange, .conversation-header.orange, .android .bubble.orange { .avatar.orange, .android .conversation-header.orange, .android .bubble.orange {
background-color: #FF9800; } background-color: #FF9800; }
.avatar.deep_orange, .conversation-header.deep_orange, .android .bubble.deep_orange { .avatar.deep_orange, .android .conversation-header.deep_orange, .android .bubble.deep_orange {
background-color: #FF5722; } background-color: #FF5722; }
.avatar.amber, .conversation-header.amber, .android .bubble.amber { .avatar.amber, .android .conversation-header.amber, .android .bubble.amber {
background-color: #FFB300; } background-color: #FFB300; }
.avatar.blue_grey, .conversation-header.blue_grey, .android .bubble.blue_grey { .avatar.blue_grey, .android .conversation-header.blue_grey, .android .bubble.blue_grey {
background-color: #607D8B; } background-color: #607D8B; }
.avatar.grey, .conversation-header.grey, .android .bubble.grey { .avatar.grey, .android .conversation-header.grey, .android .bubble.grey {
background-color: #999999; } background-color: #999999; }
.avatar.default, .conversation-header.default, .android .bubble.default { .avatar.default, .android .conversation-header.default, .android .bubble.default {
background-color: #2090ea; } background-color: #2090ea; }
/*# sourceMappingURL=manifest.css.map */ /*# sourceMappingURL=manifest.css.map */