snuffster/szurubooru
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

client/css: implement dark theme option

Browse source
This commit is contained in:
Shyam Sunder 2020-08-22 16:59:13 -04:00
parent 1bbcaf11f7
commit c004eb36c2
18 changed files with 251 additions and 42 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
client/css/colors.styl
View file

@ -1,13 +1,17 @@
$main-color = #24AADD
$window-color = white
$window-color-darktheme = #1a1a1a
$top-navigation-color = #F5F5F5
$top-navigation-color-darktheme = #333333
$text-color = #111
$text-color-darktheme = #e6e6e6
$inactive-link-color = #888
$inactive-link-color-darktheme = #cccccc
$line-color = #DDD
$inactive-tab-text-color = $inactive-link-color
$active-tab-text-color = $text-color
$active-tab-background-color = rgba(0, 0, 0, 0.06)
$focused-tab-background-color = rgba(0, 0, 0, 0.03)
$active-tab-background-color-darktheme = rgba(255, 255, 255, 0.06)
$focused-tab-background-color-darktheme = rgba(255, 255, 255, 0.03)
$message-info-border-color = #BDF
$message-info-background-color = #E3EFF9
$message-error-border-color = #FCC
@ -21,6 +25,7 @@ $input-good-background-color = #F5FFF5
$input-enabled-background-color = #FAFAFA
$input-enabled-border-color = #EEE
$input-enabled-text-color = $text-color
$input-enabled-text-color-darktheme = $text-color-darktheme
$input-disabled-background-color = #FAFAFA
$input-disabled-border-color = #EEE
$input-disabled-text-color = #888
@ -35,7 +40,6 @@ $new-tag-background-color = #DFC
$new-tag-text-color = black
$implied-tag-background-color = #FFC
$implied-tag-text-color = black
$tag-suggestions-background-color = $window-color
$tag-suggestions-header-color = #EEE
$tag-suggestions-border-color = #AAA
$duplicate-tag-background-color = #FDC

15
client/css/comment-control.styl
View file

@ -1,5 +1,7 @@
@import colors
$comment-header-background-color = $top-navigation-color
$comment-header-background-color-darktheme = $top-navigation-color-darktheme
$comment-border-color = #DDD
.comment-container
@ -81,7 +83,7 @@ $comment-border-color = #DDD
.edit, .delete, .score-container a, .nickname a
&:not(.inactive)
color: mix($main-color, $inactive-tab-text-color)
color: mix($main-color, $inactive-link-color)
i
margin-right: 0.3em
@ -112,6 +114,17 @@ $comment-border-color = #DDD
.messages
margin: 1em 0
.darktheme .comment-container .comment header
background: $comment-header-background-color-darktheme
nav.edit
ul
li
&.active
background: $window-color-darktheme
border-bottom: 1px solid $window-color-darktheme
.edit, .delete, .score-container a, .nickname a
&:not(.inactive)
color: mix($main-color, $inactive-link-color-darktheme)
.comment-content
ul, ol

6
client/css/comment-list-view.styl
View file

@ -1,5 +1,6 @@
@import colors
$comment-border-color = $top-navigation-color
$comment-border-color-darktheme = $top-navigation-color-darktheme
.global-comment-list
text-align: left
@ -46,3 +47,8 @@ $comment-border-color = $top-navigation-color
.comments-container
width: 100%
.darktheme .global-comment-list
&>ul
&>li
border-top: 3px solid $comment-border-color-darktheme

44
client/css/core-forms.styl
View file

@ -26,6 +26,10 @@ form:not(.horizontal)
font-size: 80%
line-height: 120%
.darktheme form:not(.horizontal)
.hint
color: $inactive-link-color-darktheme
form.horizontal
display: inline-block
margin-bottom: 1em
@ -167,6 +171,16 @@ input[type=time]
background: $input-disabled-background-color
color: $input-disabled-text-color
.darktheme
input[type=date],
input[type=time]
border: 2px solid darken($input-enabled-border-color, 75%)
background: darken($input-enabled-background-color, 75%)
color: $input-enabled-text-color-darktheme
&:disabled
background: darken($input-disabled-background-color, 75%)
&[readonly]
background: darken($input-disabled-background-color, 75%)
/*
@ -204,6 +218,21 @@ input[type=number]
background: $input-disabled-background-color
color: $input-disabled-text-color
.darktheme
select,
textarea,
input[type=text],
input[type=email],
input[type=password],
input[type=number]
border: 2px solid darken($input-enabled-border-color, 75%)
background: darken($input-enabled-background-color, 75%)
color: $input-enabled-text-color-darktheme
&:disabled
background: darken($input-disabled-background-color, 75%)
&[readonly]
background: darken($input-disabled-background-color, 75%)
input[readonly],
input[readonly]+.radio,
input[readonly]+.checkbox,
@ -242,8 +271,9 @@ form.show-validation .input
outline: 0
border: 2px solid $input-good-border-color
background: $input-good-background-color
.darktheme form.show-validation .input
input:valid
background: darken($input-good-background-color, 75%)
/*
* Buttons
@ -310,6 +340,10 @@ input::-moz-focus-inner
button
margin-left: 0.5em
.darktheme .file-dropper-holder
.file-dropper
background: $window-color-darktheme
input[type=file]:disabled+.file-dropper
cursor: default
opacity: .5
@ -319,8 +353,6 @@ input[type=file]:focus+.file-dropper,
.file-dropper.active
border-color: $main-color
.autocomplete
position: absolute
z-index: 10
@ -345,6 +377,10 @@ input[type=file]:focus+.file-dropper,
.disabled
color: $inactive-link-color
.darktheme .autocomplete
background: $window-color-darktheme
ul li .disabled
color: $inactive-link-color-darktheme
.anticomplete
display: none

48
client/css/core-general.styl
View file

@ -1,6 +1,11 @@
@import colors
@import mixins
$active-tab-text-color = $text-color
$active-tab-text-color-darktheme = $text-color-darktheme
$inactive-tab-text-color = $inactive-link-color
$inactive-tab-text-color-darktheme = $inactive-link-color-darktheme
/* latin */
@font-face
font-family: 'Open Sans';
@ -28,6 +33,10 @@ body
@media (max-width: 1200px)
font-size: 0.95em
body.darktheme
color: $text-color-darktheme
background: $window-color-darktheme
h1, h2, h3
font-weight: normal
margin-bottom: 1em
@ -62,6 +71,11 @@ a
.vim-nav-hint
position: absolute
visibility: hidden
.darktheme a
&.inactive
color: $inactive-link-color-darktheme
&.icon
color: $inactive-link-color-darktheme
a.append, span.append
margin-left: 1em
@ -102,12 +116,19 @@ form .fa-question-circle-o
>*:last-child
margin-bottom: 0
.darktheme #content-holder
>.content-wrapper:not(.transparent)
background: $top-navigation-color-darktheme
hr
border: 0
border-top: 1px solid $line-color
margin: 1em 0
padding: 0
.darktheme hr
border-top: 1px solid darken($line-color, 25%)
nav
ul
list-style-type: none
@ -205,6 +226,21 @@ nav
@media (max-width: 1000px)
display: none
.darktheme nav
&.buttons
ul
li:not(.active) a
color: $inactive-tab-text-color-darktheme
li:hover:not(.active) a
color: $active-tab-text-color-darktheme
li.active a
background: $active-tab-background-color-darktheme
color: $active-tab-text-color-darktheme
:focus
background: $focused-tab-background-color-darktheme
&#top-navigation
background: $top-navigation-color-darktheme
a .access-key
text-decoration: underline
@ -229,6 +265,18 @@ a .access-key
border: 1px solid $message-success-border-color
background: $message-success-background-color
.darktheme .messages
.message
&.info
border: 1px solid darken($message-info-border-color, 30%)
background: darken($message-info-background-color, 60%)
&.error
border: 1px solid darken($message-error-border-color, 30%)
background: darken($message-error-background-color, 60%)
&.success
border: 1px solid darken($message-success-border-color, 30%)
background: darken($message-success-background-color, 60%)
.thumbnail
/*background-image: attr(data-src url)*/ /* not available yet */
vertical-align: middle

8
client/css/expander-control.styl
View file

@ -22,3 +22,11 @@
line-height: 2em
.expander-content
padding: 0.5em 0.5em 2em 0.5em
.darktheme .expander
header
background: $active-tab-background-color-darktheme
a
color: mix($text-color-darktheme, $inactive-link-color-darktheme)
i
color: $inactive-link-color-darktheme

6
client/css/pager.styl
View file

@ -25,3 +25,9 @@
background: white
padding: 0 1em
z-index: 2
.darktheme .pager
.page
.page-header
&:before
background: $top-navigation-color-darktheme

5
client/css/pool-input-control.styl
View file

@ -51,3 +51,8 @@ div.pool-input, ul.compact-pools
margin-left: 0.7em
.remove-pool
margin-right: 0.5em
.darktheme
div.pool-input, ul.compact-pools
.pool-usages, .pool-weight, .remove-pool
color: $inactive-link-color-darktheme

11
client/css/pool-list-view.styl
View file

@ -36,6 +36,13 @@
.posts
display: none
.darktheme .pool-list
table
tr:hover td
background: $top-navigation-color-darktheme
th
background: $top-navigation-color-darktheme
.pool-list-header
label
display: none !important
@ -50,3 +57,7 @@
vertical-align: middle
font-size: 0.95em
color: $inactive-link-color
.darktheme .pool-list-header
.append
color: $inactive-link-color-darktheme

13
client/css/post-upload.styl
View file

@ -1,5 +1,6 @@
@import colors
$upload-header-background-color = $top-navigation-color
$upload-header-background-color-darktheme = $top-navigation-color-darktheme
$upload-border-color = #DDD
$cancel-button-color = tomato
@ -149,3 +150,15 @@ $cancel-button-color = tomato
color: $inactive-link-color
&:last-child .move-down
color: $inactive-link-color
.darktheme &:first-child .move-up
color: $inactive-link-color-darktheme
.darktheme &:last-child .move-down
color: $inactive-link-color-darktheme
.darktheme #post-upload .uploadables-container .uploadable-container
.uploadable header
background: $upload-header-background-color-darktheme
&:first-child .move-up
color: $inactive-link-color-darktheme
&:last-child .move-down
color: $inactive-link-color-darktheme

35
client/css/snapshots-list-view.styl
View file

@ -1,17 +1,8 @@
@import colors
$snapshot-created-background-color = #E0F5E0
$snapshot-modified-background-color = #E0F5FF
$snapshot-deleted-background-color = #FDE5E5
$snapshot-merged-background-color = #FEC
$is-dark = dark($window-color)
if $is-dark
$snapshot-created-background-color = darken($snapshot-created-background-color, 80%)
$snapshot-modified-background-color = darken($snapshot-modified-background-color, 80%)
$snapshot-deleted-background-color = darken($snapshot-deleted-background-color, 80%)
$snapshot-merged-background-color = darken($snapshot-merged-background-color, 80%)
.snapshot-list
text-align: left
@ -40,16 +31,34 @@ if $is-dark
div.operation-created
background: $snapshot-created-background-color
&+.details
background: alpha($snapshot-created-background-color, 50%)
background: alpha(@background, 50%)
div.operation-modified
background: $snapshot-modified-background-color
&+.details
background: alpha($snapshot-modified-background-color, 50%)
background: alpha(@background, 50%)
div.operation-deleted
background: $snapshot-deleted-background-color
&+.details
background: alpha($snapshot-deleted-background-color, 50%)
background: alpha(@background, 50%)
div.operation-merged
background: $snapshot-merged-background-color
&+.details
background: alpha($snapshot-merged-background-color, 50%)
background: alpha(@background, 50%)
.darktheme .snapshot-list ul li
div.operation-created
background: darken($snapshot-created-background-color, 80%)
&+.details
background: alpha(@background, 50%)
div.operation-modified
background: darken($snapshot-modified-background-color, 80%)
&+.details
background: alpha(@background, 50%)
div.operation-deleted
background: darken($snapshot-deleted-background-color, 80%)
&+.details
background: alpha(@background, 50%)
div.operation-merged
background: darken($snapshot-merged-background-color, 80%)
&+.details
background: alpha(@background, 50%)

18
client/css/tag-input-control.styl
View file

@ -46,7 +46,7 @@ div.tag-input
.wrapper
margin-left: 0.5em
background: $tag-suggestions-background-color
background: $window-color
border: 1px solid $tag-suggestions-border-color
width: 15em
word-break: break-all
@ -62,7 +62,7 @@ div.tag-input
max-height: 20em
padding: 0.5em 1em 0 1em
li:last-child
border-bottom: 0.5em solid alpha($tag-suggestions-background-color, 0)
border-bottom: 0.5em solid alpha($window-color, 0)
li
margin: 0
font-size: 90%
@ -125,3 +125,17 @@ div.tag-input, ul.compact-tags
margin-left: 0.7em
.remove-tag
margin-right: 0.5em
.darktheme
div.tag-input .tag-suggestions
.buttons a
color: $inactive-link-color-darktheme
.wrapper
background: $window-color-darktheme
ul li:last-child
border-bottom: 0.5em solid alpha($window-color-darktheme, 0)
.append
color: $inactive-link-color-darktheme
div.tag-input, ul.compact-tags
.tag-usages, .tag-weight, .remove-tag
color: $inactive-link-color-darktheme

11
client/css/tag-list-view.styl
View file

@ -40,6 +40,13 @@
.implications, .suggestions
display: none
.darktheme .tag-list
table
tr:hover td
background: $top-navigation-color-darktheme
th
background: $top-navigation-color-darktheme
.tag-list-header
label
display: none !important
@ -54,3 +61,7 @@
vertical-align: middle
font-size: 0.95em
color: $inactive-link-color
.darktheme .tag-list-header
.append
color: $inactive-link-color-darktheme

8
client/css/user-list-view.styl
View file

@ -26,6 +26,10 @@
height: 3em
margin: 0.25em 0.6em 0 0
.darktheme .user-list
ul li
background: $top-navigation-color-darktheme
.user-list-header
label
display: none !important
@ -40,3 +44,7 @@
vertical-align: middle
font-size: 0.95em
color: $inactive-link-color
.darktheme .user-list-header
.append
color: $inactive-link-color-darktheme

9
client/html/settings.tpl
View file

@ -22,6 +22,15 @@
}) %>
</li>
<li>
<%= ctx.makeCheckbox({
text: 'Use dark theme',
name: 'dark-theme',
checked: ctx.browsingSettings.darkTheme,
}) %>
<p class='hint'>Changing this setting will require you to refresh the page for it to apply.</p>
</li>
<li>
<%= ctx.makeCheckbox({
text: 'Upscale small posts',

44
client/js/main.js
View file

@ -25,8 +25,10 @@ router.enter(null, (ctx, next) => {
const tags = require("./tags.js");
const pools = require("./pools.js");
const api = require("./api.js");
const settings = require("./models/settings.js");
api.fetchConfig()
Promise.resolve()
.then(() => api.fetchConfig())
.then(
() => {
// register controller routes
@ -79,23 +81,27 @@ api.fetchConfig()
}
)
.then(() => {
api.loginFromCookies().then(
() => {
tags.refreshCategoryColorMap();
pools.refreshCategoryColorMap();
if (settings.get().darkTheme) {
document.body.classList.add("darktheme");
}
})
.then(() => api.loginFromCookies())
.then(
() => {
tags.refreshCategoryColorMap();
pools.refreshCategoryColorMap();
router.start();
},
(error) => {
if (window.location.href.indexOf("login") !== -1) {
api.forget();
router.start();
},
(error) => {
if (window.location.href.indexOf("login") !== -1) {
api.forget();
router.start();
} else {
const ctx = router.start("/");
ctx.controller.showError(
"An error happened while trying to log you in: " +
error.message
);
}
} else {
const ctx = router.start("/");
ctx.controller.showError(
"An error happened while trying to log you in: " +
error.message
);
}
);
});
}
);

1
client/js/models/settings.js
View file

@ -17,6 +17,7 @@ const defaultSettings = {
autoplayVideos: false,
postsPerPage: 42,
tagUnderscoresAsSpaces: false,
darkTheme: false,
};
class Settings extends events.EventTarget {

1
client/js/views/settings_view.js
View file

@ -44,6 +44,7 @@ class SettingsView extends events.EventTarget {
postsPerPage: this._find("posts-per-page").value,
tagUnderscoresAsSpaces: this._find("underscores-as-spaces")
.checked,
darkTheme: this._find("dark-theme").checked,
},
})
);