summaryrefslogtreecommitdiff
path: root/client/css
diff options
context:
space:
mode:
Diffstat (limited to 'client/css')
-rw-r--r--client/css/colors.styl10
-rw-r--r--client/css/comment-control.styl15
-rw-r--r--client/css/comment-list-view.styl6
-rw-r--r--client/css/core-forms.styl44
-rw-r--r--client/css/core-general.styl48
-rw-r--r--client/css/expander-control.styl8
-rw-r--r--client/css/pager.styl6
-rw-r--r--client/css/pool-input-control.styl5
-rw-r--r--client/css/pool-list-view.styl11
-rw-r--r--client/css/post-upload.styl13
-rw-r--r--client/css/snapshots-list-view.styl35
-rw-r--r--client/css/tag-input-control.styl18
-rw-r--r--client/css/tag-list-view.styl11
-rw-r--r--client/css/user-list-view.styl8
14 files changed, 215 insertions, 23 deletions
diff --git a/client/css/colors.styl b/client/css/colors.styl
index 3be05fe..a3a6fb4 100644
--- a/client/css/colors.styl
+++ b/client/css/colors.styl
@@ -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
diff --git a/client/css/comment-control.styl b/client/css/comment-control.styl
index 7e98171..0d5959b 100644
--- a/client/css/comment-control.styl
+++ b/client/css/comment-control.styl
@@ -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
diff --git a/client/css/comment-list-view.styl b/client/css/comment-list-view.styl
index bd50beb..642ba1c 100644
--- a/client/css/comment-list-view.styl
+++ b/client/css/comment-list-view.styl
@@ -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
diff --git a/client/css/core-forms.styl b/client/css/core-forms.styl
index bed63e3..ee21ed1 100644
--- a/client/css/core-forms.styl
+++ b/client/css/core-forms.styl
@@ -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
diff --git a/client/css/core-general.styl b/client/css/core-general.styl
index b36822a..70ef293 100644
--- a/client/css/core-general.styl
+++ b/client/css/core-general.styl
@@ -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
diff --git a/client/css/expander-control.styl b/client/css/expander-control.styl
index 620ec25..8f68957 100644
--- a/client/css/expander-control.styl
+++ b/client/css/expander-control.styl
@@ -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
diff --git a/client/css/pager.styl b/client/css/pager.styl
index 3976404..547b719 100644
--- a/client/css/pager.styl
+++ b/client/css/pager.styl
@@ -25,3 +25,9 @@
background: white
padding: 0 1em
z-index: 2
+
+.darktheme .pager
+ .page
+ .page-header
+ &:before
+ background: $top-navigation-color-darktheme
diff --git a/client/css/pool-input-control.styl b/client/css/pool-input-control.styl
index 3f71abe..ef28e72 100644
--- a/client/css/pool-input-control.styl
+++ b/client/css/pool-input-control.styl
@@ -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
diff --git a/client/css/pool-list-view.styl b/client/css/pool-list-view.styl
index 0f57649..b7ac15e 100644
--- a/client/css/pool-list-view.styl
+++ b/client/css/pool-list-view.styl
@@ -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
diff --git a/client/css/post-upload.styl b/client/css/post-upload.styl
index 147df6b..aa36e0a 100644
--- a/client/css/post-upload.styl
+++ b/client/css/post-upload.styl
@@ -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
diff --git a/client/css/snapshots-list-view.styl b/client/css/snapshots-list-view.styl
index 3a60237..153631d 100644
--- a/client/css/snapshots-list-view.styl
+++ b/client/css/snapshots-list-view.styl
@@ -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%)
diff --git a/client/css/tag-input-control.styl b/client/css/tag-input-control.styl
index e14e596..bc34cb9 100644
--- a/client/css/tag-input-control.styl
+++ b/client/css/tag-input-control.styl
@@ -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
diff --git a/client/css/tag-list-view.styl b/client/css/tag-list-view.styl
index 4fd167f..465773d 100644
--- a/client/css/tag-list-view.styl
+++ b/client/css/tag-list-view.styl
@@ -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
diff --git a/client/css/user-list-view.styl b/client/css/user-list-view.styl
index 1fba50b..f1569f8 100644
--- a/client/css/user-list-view.styl
+++ b/client/css/user-list-view.styl
@@ -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
generated by cgit v1.3 (git 2.53.0) at 2026-08-29 17:47:46 +0000