From 2e3db91b30a76a516cb52c2409f502ac2913d39c Mon Sep 17 00:00:00 2001 From: lilia Date: Tue, 30 Aug 2016 16:54:16 -0700 Subject: [PATCH] Theme-ify header colors and styles Remove the Signal banner and restyle the search field for ios theme. // FREEBIE --- stylesheets/_global.scss | 9 ----- stylesheets/_themes.scss | 38 +++++++++++++++++- stylesheets/manifest.css | 87 ++++++++++++++++++++++++++-------------- 3 files changed, 94 insertions(+), 40 deletions(-) diff --git a/stylesheets/_global.scss b/stylesheets/_global.scss index 94702945..5d56ac3f 100644 --- a/stylesheets/_global.scss +++ b/stylesheets/_global.scss @@ -29,15 +29,6 @@ body { } #header { - background-color: $blue; - color: white; - transition: background-color 0.5s; - - &.inactive { - background-color: $grey_l; - color: $grey_d; - } - h1 { margin: 0; line-height: $header-height; diff --git a/stylesheets/_themes.scss b/stylesheets/_themes.scss index d177ec89..a028507d 100644 --- a/stylesheets/_themes.scss +++ b/stylesheets/_themes.scss @@ -23,6 +23,32 @@ } .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 { padding: 10px; } @@ -66,6 +92,16 @@ } .android { + #header { + background-color: $blue; + color: white; + transition: background-color 0.5s; + + &.inactive { + background-color: $grey_l; + color: $grey_d; + } + } .bubble { padding: 9px 12px; border-radius: $border-radius; @@ -80,7 +116,7 @@ } } -.avatar, .conversation-header, .android .bubble { +.avatar, .android .conversation-header, .android .bubble { &.red { background-color: $material_red ; } &.pink { background-color: $material_pink ; } &.purple { background-color: $material_purple ; } diff --git a/stylesheets/manifest.css b/stylesheets/manifest.css index 40710d37..412c7fd4 100644 --- a/stylesheets/manifest.css +++ b/stylesheets/manifest.css @@ -37,19 +37,12 @@ body { .hide { display: none; } -#header { - background-color: #2090ea; - color: white; - transition: background-color 0.5s; } - #header.inactive { - background-color: #f3f3f3; - color: #454545; } - #header h1 { - margin: 0; - line-height: 64px; - padding-left: 20px; - font-size: 22px; - font-weight: normal; } +#header h1 { + margin: 0; + line-height: 64px; + padding-left: 20px; + font-size: 22px; + font-weight: normal; } .conversation-header button, .title-bar button { @@ -1274,6 +1267,33 @@ li.entry .error-icon-container { background-color: #d9d9d9; 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 { padding: 10px; } .ios .bubble .content .body { @@ -1310,6 +1330,13 @@ li.entry .error-icon-container { .ios .attachment a { 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 { padding: 9px 12px; 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 { color: #f3f3f3; } -.avatar.red, .conversation-header.red, .android .bubble.red { +.avatar.red, .android .conversation-header.red, .android .bubble.red { background-color: #EF5350; } -.avatar.pink, .conversation-header.pink, .android .bubble.pink { +.avatar.pink, .android .conversation-header.pink, .android .bubble.pink { background-color: #EC407A; } -.avatar.purple, .conversation-header.purple, .android .bubble.purple { +.avatar.purple, .android .conversation-header.purple, .android .bubble.purple { 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; } -.avatar.indigo, .conversation-header.indigo, .android .bubble.indigo { +.avatar.indigo, .android .conversation-header.indigo, .android .bubble.indigo { background-color: #5C6BC0; } -.avatar.blue, .conversation-header.blue, .android .bubble.blue { +.avatar.blue, .android .conversation-header.blue, .android .bubble.blue { 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; } -.avatar.cyan, .conversation-header.cyan, .android .bubble.cyan { +.avatar.cyan, .android .conversation-header.cyan, .android .bubble.cyan { background-color: #00BCD4; } -.avatar.teal, .conversation-header.teal, .android .bubble.teal { +.avatar.teal, .android .conversation-header.teal, .android .bubble.teal { background-color: #009688; } -.avatar.green, .conversation-header.green, .android .bubble.green { +.avatar.green, .android .conversation-header.green, .android .bubble.green { 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; } -.avatar.orange, .conversation-header.orange, .android .bubble.orange { +.avatar.orange, .android .conversation-header.orange, .android .bubble.orange { 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; } -.avatar.amber, .conversation-header.amber, .android .bubble.amber { +.avatar.amber, .android .conversation-header.amber, .android .bubble.amber { 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; } -.avatar.grey, .conversation-header.grey, .android .bubble.grey { +.avatar.grey, .android .conversation-header.grey, .android .bubble.grey { background-color: #999999; } -.avatar.default, .conversation-header.default, .android .bubble.default { +.avatar.default, .android .conversation-header.default, .android .bubble.default { background-color: #2090ea; } /*# sourceMappingURL=manifest.css.map */