diff --git a/nullboard.html b/nullboard.html index 07cd4a3..2968568 100644 --- a/nullboard.html +++ b/nullboard.html @@ -95,7 +95,7 @@ a { text-decoration: none; - transition: color 400ms; + transition: color 200ms; } a, a:active, a:focus, textarea, input { @@ -346,9 +346,9 @@ .board .list .note.dragging.raw { background: #CED4DA; box-shadow: 0 +1px 0 #00000010 inset, - 0 -1px 0 #00000010 inset, - +1px 0 0 #00000010 inset, - -1px 0 0 #00000010 inset; + 0 -1px 0 #00000010 inset, + +1px 0 0 #00000010 inset, + -1px 0 0 #00000010 inset; } .board .list .note.dragging * { @@ -746,68 +746,145 @@ } /* - Dark Mode Styles - ================ */ + * Dark mode + */ body.dark { - background-color: #252525; - color: #ddd; + background-color: #15171A; + color: #d6d6d6; } - /* Board menu / upper-right menu */ - body.dark .head, body.dark .config { - background: #454545; + .dark .board .head { + background: #202224; } - body.dark .config a { - color: #ddd; + /***/ + .dark .board .menu { + background: linear-gradient(to right, #20222400, #202224 10px); } - body.dark .config a:hover { - color: #fc5555; + .dark .board .menu a { + color: #aaa; } - body.dark .config .bulk div a.active { - color: #fcd62d; + .dark .board .menu a:hover { + color: #fc4; } - /* Lists and Notes */ - body.dark .list, body.dark .menu { - background: #454545; + .dark .board .menu a.warn:hover, + .dark .board .ops a.warn:hover { + color: #fc5555 !important; } - body.dark .menu a { - color: #ddd; + .dark .board .head { + color: #eee; } - body.dark .menu a:hover { - color: #959595; + /***/ + .dark .board .list { + background: #202224; } - body.dark .board .list .note { - background: #656565; - box-shadow: 0 1px 2px #656565, 0 0 1px #959595; + .dark .board .list .note { + background: #2B2C2F; + background: linear-gradient(#2B2C2F, #27282B); + box-shadow: 0 1px 3px #0005; + text-shadow: 0 0 4px #0008; } - body.dark .board .list .note.raw { - background: #454545; + .dark .board .list .note.raw { + background: transparent; box-shadow: none; } - body.dark textarea, body.dark input { - background: #959595; + .dark .board .list .note.raw .text { + color: #eee; + text-shadow: 0 0 4px #0008; } - /* Misc */ - body.dark .teaser, body.dark .logo a { + .dark .board .list .note .ops .teaser { + color: #ccc; + } + + .dark .board .list .note .ops .bulk { + background: #202224; + border-left: 1px solid #111; + border-bottom: 1px solid #111; + } + + .dark .board .list .note.raw .ops .bulk { + border: none; + } + + .dark .board .list .note .ops .bulk a { + color: #ccc; + } + + .dark .board .list .note .ops .bulk a:hover { + color: #fc2; + } + + .dark .board .list .note.dragging, + .dark .board .list .note.dragging.raw { + background: #15171A; + box-shadow: 0 +1px 0 #000 inset, + 0 -1px 0 #000 inset, + +1px 0 0 #000 inset, + -1px 0 0 #000 inset; + } + + .dark .dragster { + box-shadow: 0px 1px 4px #000000; + background: #2e3032; + } + + /***/ + .dark textarea, + .dark input { + background: #111315; + color: #eee; + } + + .dark .board .head.editing .edit { + outline: 1px solid #bc9908; + } + + .dark .board .list .note.editing { + background: #111315; + outline: 1px solid #bc9908; + } + + /***/ + .dark .config { + background-color: #15171A; + } + + .dark .config a { color: #ddd; } - body.dark .logo { - background: #454545; + .dark .config a:hover { + color: #fc2; } - body.dark .logo a:hover { - color: #fc5555; + .dark .config .bulk div a.active { + color: #fc2; + } + + /***/ + .dark .logo a { + color: #ccc; + } + + .dark .logo { + background: #15171A; + } + + .dark .logo a:hover { + color: #fc2; + } + + .dark .logo > a:hover { + color: #fff; } @@ -834,7 +911,7 @@ Import board... Export board... - Swap theme mode + Switch theme... @@ -2293,6 +2370,13 @@ return true; }); + $('.config .switch-theme').click(function() { + var $body = $('body'); + $body.toggleClass('dark'); + localStorage.setItem('nullboard.theme', $body.hasClass('dark') ? 'dark' : ''); + return false; + }); + // var $overlay = $('.overlay'); @@ -2415,6 +2499,12 @@ adjustLayout(); } + // + var theme_id = localStorage.getItem('nullboard.theme'); + + if (theme_id == 'dark') + $('body').addClass('dark'); + // var board_id = localStorage.getItem('nullboard.last_board'); @@ -2440,12 +2530,6 @@ setupListScrolling(); - //Toggle board theme - $('.theme-swap').click(function() { - $('body').toggleClass('dark'); - return false; - }); -