From 7fa1b7cc9d7db591aa8638b6b06f1bbf2a2bf5a5 Mon Sep 17 00:00:00 2001 From: David Cormier Date: Sat, 30 Aug 2014 11:21:32 -0400 Subject: [PATCH 1/7] Create dark theme by extracting theme settings from glowingbear.css * Remove style.css as those values should be themable as well. * Update urls in index.html to link to dark theme by default --- css/glowingbear.css | 103 +++---------------- css/{style.css => themes/dark.css} | 157 +++++++++++++++++++++++++++++ index.html | 15 ++- js/glowingbear.js | 3 + 4 files changed, 188 insertions(+), 90 deletions(-) rename css/{style.css => themes/dark.css} (91%) diff --git a/css/glowingbear.css b/css/glowingbear.css index 90d3a5a..7eed294 100644 --- a/css/glowingbear.css +++ b/css/glowingbear.css @@ -2,52 +2,15 @@ html, body { height: 100%; /* The html and body elements cannot have any padding or margin. */ - color: #ddd; - background-color: #181818; } - .no-overflow { overflow: hidden; } -.horizontal-line { - -webkit-box-shadow: rgba(255, 255, 255, 0.07) 0 1px 0; - -moz-box-shadow: rgba(255, 255, 255, 0.07) 0 1px 0; - box-shadow: rgba(255, 255, 255, 0.07) 0 1px 0; - border-bottom: 1px solid #121212; -} -.vertical-line { - -webkit-box-shadow: rgba(255, 255, 255, 0.07) 1px 0 0; - -moz-box-shadow: rgba(255, 255, 255, 0.07) 1px 0 0; - box-shadow: rgba(255, 255, 255, 0.07) 1px 0 0; - border-right: 1px solid #121212; -} -.vertical-line-left { - -webkit-box-shadow: rgba(255, 255, 255, 0.07) -1px 0 0; - -moz-box-shadow: rgba(255, 255, 255, 0.07) -1px 0 0; - box-shadow: rgba(255, 255, 255, 0.07) -1px 0 0; - border-left: 1px solid #121212; -} -.panel-group .panel-heading + .panel-collapse .panel-body, .modal-body, .modal-header, .modal-footer { - -webkit-box-shadow: rgba(255, 255, 255, 0.07) 0 -1px 0; - -moz-box-shadow: rgba(255, 255, 255, 0.07) 0 -1px 0; - box-shadow: rgba(255, 255, 255, 0.07) 0 -1px 0; - border-top: 1px solid #121212; -} a { cursor: pointer; } -.repeated-time { -} -.repeated-time .cof-chat_time, -.repeated-time .cof-chat_time_delimiters { - color: #333; -} -.repeated-time .cob-chat_time, -.repeated-time .cob-chat_time_delimiters { - background-color: transparent; -} td.prefix { text-align: right; vertical-align: top; @@ -72,13 +35,15 @@ td.message { hyphens: auto; } + #readmarker { margin-top: 5px; margin-bottom: 5px; - border-top: 1px solid rgba(255, 255, 255, 0.3); - border-bottom: 1px solid #121212; + border-top: 1px solid; + border-bottom: 1px solid; height: 2px; } + .text { white-space: pre-wrap; } @@ -97,11 +62,9 @@ td.message { input[type=text], input[type=password], #sendMessage, .badge { border: 0; border-radius: 0; - color: #ccc; - box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.1), 0px 1px 7px 0px rgba(0, 0, 0, 0.8) inset; - background: none repeat scroll 0% 0% rgba(0, 0, 0, 0.3); margin-bottom: 5px !important; } + .input-group { width: 100%; } @@ -162,8 +125,8 @@ input[type=text], input[type=password], #sendMessage, .badge { font-size: 30px; position: fixed; right: 0; - background: #282828; } + #topbar .actions > * { padding-left: 5px; } @@ -172,9 +135,6 @@ input[type=text], input[type=password], #sendMessage, .badge { padding-right: 6px; } -#topbar, #sidebar, .panel, .dropdown-menu, .modal-content { - background: #282828; -} #sidebar { position: fixed; width: 140px; @@ -240,16 +200,12 @@ input[type=text], input[type=password], #sendMessage, .badge { #nicklist a { text-decoration: none; } -#nicklist a:hover { - background: #3b3b3b; -} #connection-infos { float: left; max-width: 10%; padding-left: 5px; font-size: 12px; - color: #aaa; overflow: hidden; } @@ -267,6 +223,7 @@ input[type=text], input[type=password], #sendMessage, .badge { background-color: #eee; color: #222; } + .content { height: 100%; min-height: 100%; @@ -289,9 +246,7 @@ input[type=text], input[type=password], #sendMessage, .badge { tr.bufferline { line-height: 100%; } -tr.bufferline:hover { - background-color: #222222; -} + td.time { padding: 1px 5px 1px 1px; vertical-align: top; @@ -324,25 +279,9 @@ td.time { padding-right: 100px; } -.color-light-green { - color: chartreuse; -} - -.color-27 { - color: deepskyblue; -} - -.danger, .alert-danger, .badge .alert-danger { - background-color: rgb(217, 83, 79); - color: #ddd; -} -.alert-danger { - border-color: #121212; - color: black; -} - -li.notification { - color: green; +/* fix for mobile firefox which ignores :hover */ +.nav-pills > li > a:active, .nav-pills > li > a:active span { + text-decoration: none; } [ng-click], @@ -354,12 +293,9 @@ li.notification { width: 10px; height: 10px; } -::-webkit-scrollbar-track-piece { - background-color: black; -} + ::-webkit-scrollbar-thumb:vertical { height: 15px; - background: rgba(255,255,255,0.5); } div.embed * { @@ -428,8 +364,8 @@ table.notimestampseconds td.time span.seconds { height: 100%; width: 100%; overflow: none; - background-color:rgba(0, 0, 0, 0.5) } + .gb-modal .modal-dialog { z-index: 1001; position: absolute; @@ -459,11 +395,12 @@ table.notimestampseconds td.time span.seconds { border-bottom: 0; } -#fontchoice label { +.standard-labels label { font-weight: normal; text-align: left; } + h2 { padding-bottom: 5px; height: 72px; @@ -599,11 +536,8 @@ li.buffer.indent.private a { height: auto; padding: 35px 7px 35px 10px; text-align: center; - -webkit-box-shadow: 0px 0px 120px #000; - box-shadow: 0px 0px 120px #000; position: fixed; margin-top: 10px; - background: #282828; bottom: 0px; } @@ -648,17 +582,10 @@ li.buffer.indent.private a { width: 96%; } - /* a different colour is too irregular on mobile */ - .repeated-time .cof-chat_time, - .repeated-time .cof-chat_time_delimiters { - color: #999; - } - .footer { padding-left: 0px !important; padding-right: 0px !important; width: 100% !important; - background: rgb(24,24,24); } .footer.withnicklist { diff --git a/css/style.css b/css/themes/dark.css similarity index 91% rename from css/style.css rename to css/themes/dark.css index 179587a..6bd53c8 100644 --- a/css/style.css +++ b/css/themes/dark.css @@ -1,3 +1,131 @@ +body { + background-color: #181818; + color: #ddd; +} + +.form-control { + color: #ccc; + box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.1), 0px 1px 7px 0px rgba(0, 0, 0, 0.8) inset; + background: none repeat scroll 0% 0% rgba(0, 0, 0, 0.3); + border: 0px none; +} + +html { + background-color: inherit; +} + +.repeated-time .cob-chat_time, +.repeated-time .cob-chat_time_delimiters { + background-color: transparent; + color: #333; +} + +/* fix for mobile firefox which ignores :hover */ +.nav-pills > li > a:active, .nav-pills > li > a:active span { + background-color: #eee; + color: #222; +} + +tr.bufferline:hover { + background-color: #222222; +} + +.danger, .alert-danger, .badge .alert-danger { + background-color: rgb(217, 83, 79); + color: #ddd; +} +.alert-danger { + border-color: #121212; + color: black; +} + +li.notification { + color: green; +} + +::-webkit-scrollbar-track-piece { + background-color: black; +} +::-webkit-scrollbar-thumb:vertical { + height: 15px; + background: rgba(255,255,255,0.5); +} + +.gb-modal .backdrop { + background-color:rgba(0, 0, 0, 0.5) +} + +input[type=text], input[type=password], #sendMessage, .badge { + color: #ccc; + box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.1), 0px 1px 7px 0px rgba(0, 0, 0, 0.8) inset; + background: none repeat scroll 0% 0% rgba(0, 0, 0, 0.3); +} + +#connection-infos { + color: #aaa; +} + +.nav-pills > li > a { + color: #ddd; +} + +.nav-pills > li > a:hover, .nav-pills > li > a:hover span { + color: #222; +} + +.color-light-green { + color: chartreuse; +} + +.color-27 { + color: deepskyblue; +} + +#topbar .actions { + background: #282828; +} + +#topbar, #sidebar, .panel, .dropdown-menu, .modal-content { + background: #282828; +} + +#nicklist a:hover { + background: #3b3b3b; +} + +.horizontal-line { + -webkit-box-shadow: rgba(255, 255, 255, 0.07) 0 1px 0; + -moz-box-shadow: rgba(255, 255, 255, 0.07) 0 1px 0; + box-shadow: rgba(255, 255, 255, 0.07) 0 1px 0; + border-bottom: 1px solid #121212; +} +.vertical-line { + -webkit-box-shadow: rgba(255, 255, 255, 0.07) 1px 0 0; + -moz-box-shadow: rgba(255, 255, 255, 0.07) 1px 0 0; + box-shadow: rgba(255, 255, 255, 0.07) 1px 0 0; + border-right: 1px solid #121212; +} +.vertical-line-left { + -webkit-box-shadow: rgba(255, 255, 255, 0.07) -1px 0 0; + -moz-box-shadow: rgba(255, 255, 255, 0.07) -1px 0 0; + box-shadow: rgba(255, 255, 255, 0.07) -1px 0 0; + border-left: 1px solid #121212; +} +.panel-group .panel-heading + .panel-collapse .panel-body, .modal-body, .modal-header, .modal-footer { + -webkit-box-shadow: rgba(255, 255, 255, 0.07) 0 -1px 0; + -moz-box-shadow: rgba(255, 255, 255, 0.07) 0 -1px 0; + box-shadow: rgba(255, 255, 255, 0.07) 0 -1px 0; + border-top: 1px solid #121212; +} + +#readmarker { + border-top-color: rgba(255, 255, 255, 0.3); + border-bottom-color: #121212; +} + +/****************************/ +/* Weechat colors and style */ +/****************************/ /* style options, foreground */ .cof-separator { color: #68b5d4; @@ -263,6 +391,9 @@ .cwf-default { color: #d9d9d9; } +.light-theme .cwf-default { + color: #282828; +} .cwf-black { color: #000000; } @@ -1935,3 +2066,29 @@ color: yellow; font-weight: bold; } + +/* */ +/* Mobile layout */ +/* */ +@media (max-width: 968px) { + /* a different colour is too irregular on mobile */ + .repeated-time .cof-chat_time, + .repeated-time .cof-chat_time_delimiters { + color: #999; + } + + #nicklist { + -webkit-box-shadow: 0px 0px 120px #000; + box-shadow: 0px 0px 120px #000; + background: #282828; + } + + .footer { + background: rgb(24,24,24); + } + +} + + + + diff --git a/index.html b/index.html index f50e093..62b3ef3 100644 --- a/index.html +++ b/index.html @@ -12,7 +12,6 @@ - @@ -37,6 +36,7 @@ +

logo @@ -296,7 +296,7 @@ $ openssl req -nodes -newkey rsa:4096 -keyout relay.pem -x509 -days 365 -out rel