Permalink
Browse files

Add light/dark themes.

  • Loading branch information...
1 parent c561620 commit 620c9e1354626fd82f18bf9e3dcb192d3a25cf01 @whitequark committed Oct 27, 2013
View
@@ -34,8 +34,12 @@ class Viewer < Sinatra::Base
haml :'help/search'
end
- get '/style.css' do
- sass :style
+ get '/style-dark.css' do
+ sass :'style-dark'
+ end
+
+ get '/style-light.css' do
+ sass :'style-light'
end
get '/:channel' do
View
@@ -269,6 +269,14 @@ $(window).hashchange(function() {
hashUpdated(false);
});
+function setTheme() {
+ if(docCookies.getItem('theme') == "dark") {
+ $('#stylesheet').attr('href', '/style-dark.css');
+ } else {
+ $('#stylesheet').attr('href', '/style-light.css');
+ }
+}
+
$(document).ready(function() {
var shift = false;
@@ -280,6 +288,18 @@ $(document).ready(function() {
if(e.keyCode == 16) shift = false;
});
+ $('#light_dark').click(function(event) {
+ if(docCookies.getItem('theme') == "dark") {
+ docCookies.setItem('theme', 'light');
+ } else {
+ docCookies.setItem('theme', 'dark');
+ }
+
+ setTheme();
+ });
+
+ setTheme();
+
$("#clear_selection").click(function(event) {
setHash("");
View

Some generated files are not rendered by default. Learn more.

Oops, something went wrong.
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
@@ -1,5 +1,6 @@
%section#log{class: 'without-noise', data: { channel: @channel }}
%aside#log-panel
+ %a#light_dark{href: '#'}
%label{for: 'filter'}
Filter:
%input#filter
View
@@ -25,4 +25,8 @@
.talk
%a.timestamp= now
- If you want for this logger to be present on a particular <a href="http://freenode.net">freenode.net</a> channel, drop a letter to <a href="mailto:whitequark@whitequark.org">whitequark</a>.
+ To switch between light and dark themes, use <a href="#" id="light_dark"></a>
+
+ .talk
+ %a.timestamp= now
+ If you want for this logger to be present on a particular <a href="http://freenode.net">freenode.net</a> channel, drop a letter to <a href="mailto:whitequark@whitequark.org">whitequark</a>.
View
@@ -10,7 +10,7 @@
irc logs at whitequark.org
%meta{charset: "utf-8"}
- %link{rel: "stylesheet", href: "/style.css"}
+ %link{rel: "stylesheet", href: "/style-light.css", id: "stylesheet"}
%link{rel: "shortcut icon", href: "/favicon.png"}
- if @channel
@@ -20,6 +20,7 @@
%script{src: "/jquery.min.js"}
%script{src: "/jquery.ba-hashchange.min.js"}
+ %script{src: "/cookies.min.js"}
%script{src: "/application.js"}
%body
@@ -3,52 +3,11 @@
$header_height: 0
$channels_width: 165px
-$active_color: #fff
-$passive_color: #888
-$inactive_color: #444
-$border_color: #444
-$link_color: #f6f840
-$nick_color: #fb1263
-
-@mixin nick-colors
- .nick-1
- color: #F68E55
- .nick-2
- color: #F26C4F
- .nick-3
- color: #FBAF5C
- .nick-4
- color: #FFF467
- .nick-5
- color: #ACD372
- .nick-6
- color: #7CC576
- .nick-7
- color: #3BB878
- .nick-8
- color: #1ABBB4
- .nick-9
- color: #00BFF3
- .nick-10
- color: #438CCA
- .nick-11
- color: #5574B9
- .nick-12
- color: #605CA8
- .nick-13
- color: #855FA8
- .nick-14
- color: #A763A8
- .nick-15
- color: #F06EA9
- .nick-16
- color: #F26D7D
-
body
- background-color: #000
+ background-color: $background
font-size: 12px
line-height: 16px
- color: #fff
+ color: $color0
margin: 0
padding: 0
@@ -60,12 +19,12 @@ body, pre, input
font-family: "Menlo", "Monaco", monospace
a
- color: #fff
+ color: $color0
input
- border: 1px solid $border_color
- background-color: #111
- color: #fff
+ border: 1px solid $color3
+ background-color: $input_color
+ color: $color0
outline: none
height: 13px
font-size: 12px
@@ -90,100 +49,110 @@ input
background-position: -12px 0
header
- background-color: #000
+ background-color: $background
height: $header_height
line-height: $header_height
position: fixed
top: 0
left: 0
width: 100%
text-align: center
- border-bottom: 1px solid $inactive_color
+ border-bottom: 1px solid $color3
a
text-decoration: none
- color: #555
+ color: $color2
span
position: absolute
left: 10px
top: 0
font-size: 18px
+$button_size: 14px
+
+#light_dark
+ background: url(/yin_yang.png)
+ background-size: $button_size
+ display: inline-block
+ width: $button_size
+ height: $button_size
+ vertical-align: text-top
+
#channels
position: fixed
width: $channels_width
top: $header_height
height: 100%
- border-right: 1px solid $border_color
+ border-right: 1px solid $color3
ul
list-style-type: none
margin: 0
padding: 10px
- border-top: 1px solid $border_color
+ border-top: 1px solid $color3
a
- color: $passive_color
+ color: $color1
text-decoration: none
li.current
a
- color: $active_color
+ color: $color0
+ padding-left: 1ex
#clear_selection, #live_logging
- color: $inactive_color
+ color: $color1
&.active
- color: $active_color
+ color: $color0
#options
- border-top: 1px solid $inactive_color
+ border-top: 1px solid $color3
padding: 10px
#search-box
margin-top: 10px
width: $channels_width - 20px
#calendar
- color: #555
+ color: $color2
padding: 10px
.header
- color: #FF4500
+ color: $header_color
.clock
text-align: center
- color: $active_color
+ color: $color0
padding-bottom: 5px
a
text-decoration: none
- color: $active_color
+ color: $color0
&.current
text-decoration: underline
#info
padding: 10px
margin: $header_height 0 0 ($channels_width + 1px)
- color: $active_color
+ color: $color0
#log-panel
- color: $passive_color
- border-bottom: 1px solid $border_color
+ border-bottom: 1px solid $color3
margin: 0 0 5px 0
padding: 0 0 5px 0
#log
padding: 10px
margin: $header_height 0 0 ($channels_width + 1px)
- color: $passive_color
+ color: $color1
a.link
- color: $passive_color
+ color: $color1
a.timestamp, a.timeref
- color: $inactive_color !important
+ color: $color2 !important
text-decoration: none
&:hover
@@ -202,10 +171,10 @@ header
#log:not(.highlight) div, div.highlight
&.talk
- color: $active_color
+ color: $color0
&.me-tell
- color: #FFA500
+ color: $me_tell_color
a.link
color: $link_color !important
@@ -225,9 +194,9 @@ header
.pagination
.current
- color: $active_color
+ color: $color0
a
- color: $passive_color
+ color: $color2
div.highlight
- color: $active_color
+ color: $color0
View
@@ -0,0 +1,46 @@
+$background: #000
+$input_color: #111
+$color0: #fff
+$color1: #888
+$color2: #555
+$color3: #444
+
+$header_color: #ff4500
+$link_color: #f6f840
+$me_tell_color: #ffa500
+
+@mixin nick-colors
+ .nick-1
+ color: #F68E55
+ .nick-2
+ color: #F26C4F
+ .nick-3
+ color: #FBAF5C
+ .nick-4
+ color: #FFF467
+ .nick-5
+ color: #ACD372
+ .nick-6
+ color: #7CC576
+ .nick-7
+ color: #3BB878
+ .nick-8
+ color: #1ABBB4
+ .nick-9
+ color: #00BFF3
+ .nick-10
+ color: #438CCA
+ .nick-11
+ color: #5574B9
+ .nick-12
+ color: #605CA8
+ .nick-13
+ color: #855FA8
+ .nick-14
+ color: #A763A8
+ .nick-15
+ color: #F06EA9
+ .nick-16
+ color: #F26D7D
+
+@import "style-common"
Oops, something went wrong.

0 comments on commit 620c9e1

Please sign in to comment.