diff options
Diffstat (limited to 'data')
| -rw-r--r-- | data/style.scss | 274 | ||||
| -rw-r--r-- | data/themes/archlinux.scss | 54 | ||||
| -rw-r--r-- | data/themes/monokai.scss | 54 | ||||
| -rw-r--r-- | data/themes/squirrel.scss | 54 | ||||
| -rw-r--r-- | data/themes/zenburn.scss | 54 |
5 files changed, 237 insertions, 253 deletions
diff --git a/data/style.scss b/data/style.scss index 10c258d..6c0d284 100644 --- a/data/style.scss +++ b/data/style.scss @@ -1,22 +1,11 @@ -@use "sass:selector"; +@use "themes/archlinux" with ($generate_default: false); +@use "themes/monokai" with ($generate_default: false); +@use "themes/squirrel" with ($generate_default: false); +@use "themes/zenburn" with ($generate_default: false); // theme colors can be found at the bottom $themes: squirrel, archlinux, monokai, zenburn; -// This returns a selector that matches body when no theme class is set, -// in which case the default light/dark mode themes should be used. -// The result of this function can be used with #{...} interpolation -// in a selector list. -@function body_not_themed() { - $s: unquote("body"); - - @each $t in $themes { - $s: selector.append($s, unquote(":not(.theme_#{$t})")); - } - - @return $s; -} - html { font-smoothing: antialiased; text-rendering: optimizeLegibility; @@ -210,21 +199,6 @@ nav .theme li a:hover { color: var(--change_theme_link_color_hover); } -%active_theme_link { - font-weight: bold; - color: var(--switch_theme_active); -} - -@each $theme in $themes { - body.theme_#{$theme} nav .theme li.theme_#{$theme} a { - @extend %active_theme_link; - } -} - -#{body_not_themed()} nav .theme li.theme_default a { - @extend %active_theme_link; -} - p { margin: 0; padding: 0; @@ -567,211 +541,21 @@ th span.active span { } } - - -@mixin theme_squirrel { - --background: #ffffff; - --text_color: #323232; - --directory_link_color: #d02474; - --directory_link_color_visited: #9b1985; - --file_link_color: #0086b3; - --file_link_color_visited: #974ec2; - --symlink_color: #ADD8E6; - --table_background: #ffffff; - --table_text_color: #323232; - --table_header_background: #323232; - --table_header_text_color: #f5f5f5; - --table_header_active_color: #ffffff; - --active_row_color: #f6f8fa; - --odd_row_background: #fbfbfb; - --even_row_background: #f2f2f2; - --root_link_color: #323232; - --download_button_background: #d02474; - --download_button_background_hover: #f52d8a; - --download_button_link_color: #ffffff; - --download_button_link_color_hover: #ffffff; - --back_button_background: #d02474; - --back_button_background_hover: #d02474; - --back_button_link_color: #ffffff; - --back_button_link_color_hover: #ffffff; - --date_text_color: #797979; - --at_color: #797979; - --switch_theme_background: #323232; - --switch_theme_link_color: #f5f5f5; - --switch_theme_active: #d02474; - --switch_theme_border: #49483e; - --change_theme_link_color: #f5f5f5; - --change_theme_link_color_hover: #f5f5f5; - --upload_text_color: #323232; - --upload_form_border_color: #d2d2d2; - --upload_form_background: #f2f2f2; - --upload_button_background: #d02474; - --upload_button_text_color: #ffffff; - --drag_background: #3333338f; - --drag_border_color: #ffffff; - --drag_text_color: #ffffff; - --size_background_color: #323232; - --size_text_color: #ffffff; - --error_color: #d02424; - --footer_color: #898989; -} - -@mixin theme_archlinux { - --background: #383c4a; - --text_color: #fefefe; - --directory_link_color: #03a9f4; - --directory_link_color_visited: #0388f4; - --file_link_color: #ea95ff; - --file_link_color_visited: #a595ff; - --symlink_color: #66d9ef; - --table_background: #353946; - --table_text_color: #eeeeee; - --table_header_background: #5294e2; - --table_header_text_color: #eeeeee; - --table_header_active_color: #ffffff; - --active_row_color: #5194e259; - --odd_row_background: #404552; - --even_row_background: #4b5162; - --root_link_color: #abb2bb; - --download_button_background: #ea95ff; - --download_button_background_hover: #eea7ff; - --download_button_link_color: #ffffff; - --download_button_link_color_hover: #ffffff; - --back_button_background: #ea95ff; - --back_button_background_hover: #ea95ff; - --back_button_link_color: #ffffff; - --back_button_link_color_hover: #ffffff; - --date_text_color: #9ebbdc; - --at_color: #9ebbdc; - --switch_theme_background: #4b5162; - --switch_theme_link_color: #fefefe; - --switch_theme_active: #ea95ff; - --switch_theme_border: #6a728a; - --change_theme_link_color: #fefefe; - --change_theme_link_color_hover: #fefefe; - --upload_text_color: #fefefe; - --upload_form_border_color: #353946; - --upload_form_background: #4b5162; - --upload_button_background: #ea95ff; - --upload_button_text_color: #ffffff; - --drag_background: #3333338f; - --drag_border_color: #fefefe; - --drag_text_color: #fefefe; - --size_background_color: #5294e2; - --size_text_color: #fefefe; - --error_color: #e44b4b; - --footer_color: #8eabcc; -} - -@mixin theme_zenburn { - --background: #3f3f3f; - --text_color: #efefef; - --directory_link_color: #f0dfaf; - --directory_link_color_visited: #ebc390; - --file_link_color: #87d6d5; - --file_link_color_visited: #a7b9ec; - --symlink_color: #11a8cd; - --table_background: #4a4949; - --table_text_color: #efefef; - --table_header_background: #7f9f7f; - --table_header_text_color: #efefef; - --table_header_active_color: #efef8f; - --active_row_color: #7e9f7f9c; - --odd_row_background: #777777; - --even_row_background: #5a5a5a; - --root_link_color: #dca3a3; - --download_button_background: #cc9393; - --download_button_background_hover: #dca3a3; - --download_button_link_color: #efefef; - --download_button_link_color_hover: #efefef; - --back_button_background: #cc9393; - --back_button_background_hover: #cc9393; - --back_button_link_color: #efefef; - --back_button_link_color_hover: #efefef; - --date_text_color: #cfbfaf; - --at_color: #cfbfaf; - --switch_theme_background: #4a4949; - --switch_theme_link_color: #efefef; - --switch_theme_active: #efef8f; - --switch_theme_border: #5a5a5a; - --change_theme_link_color: #efefef; - --change_theme_link_color_hover: #efefef; - --upload_text_color: #efefef; - --upload_form_border_color: #4a4949; - --upload_form_background: #777777; - --upload_button_background: #cc9393; - --upload_button_text_color: #efefef; - --drag_background: #3333338f; - --drag_border_color: #efefef; - --drag_text_color: #efefef; - --size_background_color: #7f9f7f; - --size_text_color: #efefef; - --error_color: #d06565; - --footer_color: #bfaf9f; -} - -@mixin theme_monokai { - --background: #272822; - --text_color: #f8f8f2; - --directory_link_color: #f92672; - --directory_link_color_visited: #bc39a7; - --file_link_color: #a6e22e; - --file_link_color_visited: #4cb936; - --symlink_color: #29b8db; - --table_background: #3b3a32; - --table_text_color: #f8f8f0; - --table_header_background: #75715e; - --table_header_text_color: #f8f8f2; - --table_header_active_color: #e6db74; - --active_row_color: #ae81fe3d; - --odd_row_background: #3e3d32; - --even_row_background: #49483e; - --root_link_color: #66d9ef; - --download_button_background: #ae81ff; - --download_button_background_hover: #c6a6ff; - --download_button_link_color: #f8f8f0; - --download_button_link_color_hover: #f8f8f0; - --back_button_background: #ae81ff; - --back_button_background_hover: #ae81ff; - --back_button_link_color: #f8f8f0; - --back_button_link_color_hover: #f8f8f0; - --date_text_color: #66d9ef; - --at_color: #66d9ef; - --switch_theme_background: #3b3a32; - --switch_theme_link_color: #f8f8f2; - --switch_theme_active: #a6e22e; - --switch_theme_border: #49483e; - --change_theme_link_color: #f8f8f2; - --change_theme_link_color_hover: #f8f8f2; - --upload_text_color: #f8f8f2; - --upload_form_border_color: #3b3a32; - --upload_form_background: #49483e; - --upload_button_background: #ae81ff; - --upload_button_text_color: #f8f8f0; - --drag_background: #3333338f; - --drag_border_color: #f8f8f2; - --drag_text_color: #f8f8f2; - --size_background_color: #75715e; - --size_text_color: #f8f8f2; - --error_color: #d02929; - --footer_color: #56c9df; -} - @mixin theme($name) { @if $name == squirrel { - @include theme_squirrel(); + @include squirrel.theme(); } @else if $name == archlinux { - @include theme_archlinux(); + @include archlinux.theme(); } @else if $name == monokai { - @include theme_monokai(); + @include monokai.theme(); } @else if $name == zenburn { - @include theme_zenburn(); + @include zenburn.theme(); } @else { @@ -779,39 +563,23 @@ th span.active span { } } -// For each of the themes, define a placeholder selector containing -// the themes variables. Then add selectors for body when the theme: -// - has explicitly been activated by .theme_* -// - is set as default theme by .default_theme_* and no other theme is active -// to the placeholder selector list by means of @extend. -@each $theme in $themes { - %theme_#{$theme} { - @include theme($theme); - } - - body.theme_#{$theme} { - @extend %theme_#{$theme}; - } +%active_theme_link { + font-weight: bold; + color: var(--switch_theme_active); +} - #{body_not_themed()}.default_theme_#{$theme} { - @extend %theme_#{$theme}; - } +// when no specific theme is applied, highlight the `default` theme button in +// the theme menu +body:not([data-theme]) nav .theme li[data-theme="default"] a { + @extend %active_theme_link; } -// Do the same thing again for the dark mode default. -// Since the media query doesn't affect specificity, all dark mode -// defaults need to come after all light mode defaults to override -// them when dark mode is enabled. @each $theme in $themes { - @media (prefers-color-scheme: dark) { - %theme_dark_#{$theme} { - @include theme($theme); + body[data-theme="#{$theme}"] { + @include theme($theme); + // highlight the currently active theme in the theme selection menu + nav .theme li[data-theme="#{$theme}"] a { + @extend %active_theme_link; } } - - // this extension will still end up inside the media query, - // because that is where %theme_dark_* was defined - #{body_not_themed()}.default_theme_dark_#{$theme} { - @extend %theme_dark_#{$theme}; - } } diff --git a/data/themes/archlinux.scss b/data/themes/archlinux.scss new file mode 100644 index 0000000..f95b8bb --- /dev/null +++ b/data/themes/archlinux.scss @@ -0,0 +1,54 @@ +$generate_default: true !default; + +@mixin theme { + --background: #383c4a; + --text_color: #fefefe; + --directory_link_color: #03a9f4; + --directory_link_color_visited: #0388f4; + --file_link_color: #ea95ff; + --file_link_color_visited: #a595ff; + --symlink_color: #66d9ef; + --table_background: #353946; + --table_text_color: #eeeeee; + --table_header_background: #5294e2; + --table_header_text_color: #eeeeee; + --table_header_active_color: #ffffff; + --active_row_color: #5194e259; + --odd_row_background: #404552; + --even_row_background: #4b5162; + --root_link_color: #abb2bb; + --download_button_background: #ea95ff; + --download_button_background_hover: #eea7ff; + --download_button_link_color: #ffffff; + --download_button_link_color_hover: #ffffff; + --back_button_background: #ea95ff; + --back_button_background_hover: #ea95ff; + --back_button_link_color: #ffffff; + --back_button_link_color_hover: #ffffff; + --date_text_color: #9ebbdc; + --at_color: #9ebbdc; + --switch_theme_background: #4b5162; + --switch_theme_link_color: #fefefe; + --switch_theme_active: #ea95ff; + --switch_theme_border: #6a728a; + --change_theme_link_color: #fefefe; + --change_theme_link_color_hover: #fefefe; + --upload_text_color: #fefefe; + --upload_form_border_color: #353946; + --upload_form_background: #4b5162; + --upload_button_background: #ea95ff; + --upload_button_text_color: #ffffff; + --drag_background: #3333338f; + --drag_border_color: #fefefe; + --drag_text_color: #fefefe; + --size_background_color: #5294e2; + --size_text_color: #fefefe; + --error_color: #e44b4b; + --footer_color: #8eabcc; +}; + +@if $generate_default { + body { + @include theme; + } +} diff --git a/data/themes/monokai.scss b/data/themes/monokai.scss new file mode 100644 index 0000000..4a47794 --- /dev/null +++ b/data/themes/monokai.scss @@ -0,0 +1,54 @@ +$generate_default: true !default; + +@mixin theme { + --background: #272822; + --text_color: #f8f8f2; + --directory_link_color: #f92672; + --directory_link_color_visited: #bc39a7; + --file_link_color: #a6e22e; + --file_link_color_visited: #4cb936; + --symlink_color: #29b8db; + --table_background: #3b3a32; + --table_text_color: #f8f8f0; + --table_header_background: #75715e; + --table_header_text_color: #f8f8f2; + --table_header_active_color: #e6db74; + --active_row_color: #ae81fe3d; + --odd_row_background: #3e3d32; + --even_row_background: #49483e; + --root_link_color: #66d9ef; + --download_button_background: #ae81ff; + --download_button_background_hover: #c6a6ff; + --download_button_link_color: #f8f8f0; + --download_button_link_color_hover: #f8f8f0; + --back_button_background: #ae81ff; + --back_button_background_hover: #ae81ff; + --back_button_link_color: #f8f8f0; + --back_button_link_color_hover: #f8f8f0; + --date_text_color: #66d9ef; + --at_color: #66d9ef; + --switch_theme_background: #3b3a32; + --switch_theme_link_color: #f8f8f2; + --switch_theme_active: #a6e22e; + --switch_theme_border: #49483e; + --change_theme_link_color: #f8f8f2; + --change_theme_link_color_hover: #f8f8f2; + --upload_text_color: #f8f8f2; + --upload_form_border_color: #3b3a32; + --upload_form_background: #49483e; + --upload_button_background: #ae81ff; + --upload_button_text_color: #f8f8f0; + --drag_background: #3333338f; + --drag_border_color: #f8f8f2; + --drag_text_color: #f8f8f2; + --size_background_color: #75715e; + --size_text_color: #f8f8f2; + --error_color: #d02929; + --footer_color: #56c9df; +}; + +@if $generate_default { + body { + @include theme; + } +} diff --git a/data/themes/squirrel.scss b/data/themes/squirrel.scss new file mode 100644 index 0000000..9eb572e --- /dev/null +++ b/data/themes/squirrel.scss @@ -0,0 +1,54 @@ +$generate_default: true !default; + +@mixin theme { + --background: #ffffff; + --text_color: #323232; + --directory_link_color: #d02474; + --directory_link_color_visited: #9b1985; + --file_link_color: #0086b3; + --file_link_color_visited: #974ec2; + --symlink_color: #ADD8E6; + --table_background: #ffffff; + --table_text_color: #323232; + --table_header_background: #323232; + --table_header_text_color: #f5f5f5; + --table_header_active_color: #ffffff; + --active_row_color: #f6f8fa; + --odd_row_background: #fbfbfb; + --even_row_background: #f2f2f2; + --root_link_color: #323232; + --download_button_background: #d02474; + --download_button_background_hover: #f52d8a; + --download_button_link_color: #ffffff; + --download_button_link_color_hover: #ffffff; + --back_button_background: #d02474; + --back_button_background_hover: #d02474; + --back_button_link_color: #ffffff; + --back_button_link_color_hover: #ffffff; + --date_text_color: #797979; + --at_color: #797979; + --switch_theme_background: #323232; + --switch_theme_link_color: #f5f5f5; + --switch_theme_active: #d02474; + --switch_theme_border: #49483e; + --change_theme_link_color: #f5f5f5; + --change_theme_link_color_hover: #f5f5f5; + --upload_text_color: #323232; + --upload_form_border_color: #d2d2d2; + --upload_form_background: #f2f2f2; + --upload_button_background: #d02474; + --upload_button_text_color: #ffffff; + --drag_background: #3333338f; + --drag_border_color: #ffffff; + --drag_text_color: #ffffff; + --size_background_color: #323232; + --size_text_color: #ffffff; + --error_color: #d02424; + --footer_color: #898989; +}; + +@if $generate_default { + body { + @include theme; + } +} diff --git a/data/themes/zenburn.scss b/data/themes/zenburn.scss new file mode 100644 index 0000000..9eb4d11 --- /dev/null +++ b/data/themes/zenburn.scss @@ -0,0 +1,54 @@ +$generate_default: true !default; + +@mixin theme { + --background: #3f3f3f; + --text_color: #efefef; + --directory_link_color: #f0dfaf; + --directory_link_color_visited: #ebc390; + --file_link_color: #87d6d5; + --file_link_color_visited: #a7b9ec; + --symlink_color: #11a8cd; + --table_background: #4a4949; + --table_text_color: #efefef; + --table_header_background: #7f9f7f; + --table_header_text_color: #efefef; + --table_header_active_color: #efef8f; + --active_row_color: #7e9f7f9c; + --odd_row_background: #777777; + --even_row_background: #5a5a5a; + --root_link_color: #dca3a3; + --download_button_background: #cc9393; + --download_button_background_hover: #dca3a3; + --download_button_link_color: #efefef; + --download_button_link_color_hover: #efefef; + --back_button_background: #cc9393; + --back_button_background_hover: #cc9393; + --back_button_link_color: #efefef; + --back_button_link_color_hover: #efefef; + --date_text_color: #cfbfaf; + --at_color: #cfbfaf; + --switch_theme_background: #4a4949; + --switch_theme_link_color: #efefef; + --switch_theme_active: #efef8f; + --switch_theme_border: #5a5a5a; + --change_theme_link_color: #efefef; + --change_theme_link_color_hover: #efefef; + --upload_text_color: #efefef; + --upload_form_border_color: #4a4949; + --upload_form_background: #777777; + --upload_button_background: #cc9393; + --upload_button_text_color: #efefef; + --drag_background: #3333338f; + --drag_border_color: #efefef; + --drag_text_color: #efefef; + --size_background_color: #7f9f7f; + --size_text_color: #efefef; + --error_color: #d06565; + --footer_color: #bfaf9f; +}; + +@if $generate_default { + body { + @include theme; + } +} |