From 40319302b76f0f542ec15494c191c4465a625714 Mon Sep 17 00:00:00 2001 From: Vivianne Langdon Date: Sun, 27 Feb 2022 05:20:29 -0800 Subject: [PATCH 1/6] Initial theme --- bookwyrm/static/css/bookwyrm/_all.scss | 2 +- .../css/bookwyrm/components/_details.scss | 2 +- .../css/bookwyrm/components/_toggle.scss | 2 +- bookwyrm/static/css/themes/dark.scss | 51 ++++++++++++++----- bookwyrm/static/css/themes/light.scss | 3 ++ 5 files changed, 43 insertions(+), 17 deletions(-) diff --git a/bookwyrm/static/css/bookwyrm/_all.scss b/bookwyrm/static/css/bookwyrm/_all.scss index 11d7e403d..f01cec606 100644 --- a/bookwyrm/static/css/bookwyrm/_all.scss +++ b/bookwyrm/static/css/bookwyrm/_all.scss @@ -115,7 +115,7 @@ button .button-invisible-overlay { align-items: center; flex-direction: column; justify-content: center; - background: rgba($scheme-invert, 0.66); + background: $invisible-overlay-background-color; color: white; opacity: 0; transition: opacity 0.2s ease; diff --git a/bookwyrm/static/css/bookwyrm/components/_details.scss b/bookwyrm/static/css/bookwyrm/components/_details.scss index 645de4a1d..5708c9461 100644 --- a/bookwyrm/static/css/bookwyrm/components/_details.scss +++ b/bookwyrm/static/css/bookwyrm/components/_details.scss @@ -53,7 +53,7 @@ details.dropdown .dropdown-menu a:focus-visible { @media only screen and (max-width: 768px) { details.dropdown[open] summary.dropdown-trigger::before { - background-color: rgba($scheme-invert, 0.5); + background-color: $modal-background-background-color; z-index: 30; } diff --git a/bookwyrm/static/css/bookwyrm/components/_toggle.scss b/bookwyrm/static/css/bookwyrm/components/_toggle.scss index c2c07dfb8..74d7f0d92 100644 --- a/bookwyrm/static/css/bookwyrm/components/_toggle.scss +++ b/bookwyrm/static/css/bookwyrm/components/_toggle.scss @@ -3,7 +3,7 @@ .toggle-button[aria-pressed="true"], .toggle-button[aria-pressed="true"]:hover { - background-color: hsl(171deg, 100%, 41%); + background-color: $primary; color: white; } diff --git a/bookwyrm/static/css/themes/dark.scss b/bookwyrm/static/css/themes/dark.scss index 8df4ce500..30ca12b13 100644 --- a/bookwyrm/static/css/themes/dark.scss +++ b/bookwyrm/static/css/themes/dark.scss @@ -1,24 +1,30 @@ -@import "../vendor/bulma/sass/utilities/derived-variables.sass"; +@import "../vendor/bulma/sass/utilities/initial-variables.sass"; /* Colors ******************************************************************************/ /* states */ -$primary: #016a5b; +$primary: #005e50; +$primary-light: #1d2b28; $info: #1f4666; $success: #246447; $warning: #8b6c15; $danger: #872538; +$danger-light: #481922; +$light: #393939; /* book cover standins */ $no-cover-color: #002549; /* background colors */ -$scheme-main: $grey-darker; -$scheme-main-bis: $black-ter; -$background-body: $grey-darker; -$background-secondary: $grey-dark; -$background-tertiary: #555; +$scheme-main: rgb(24, 27, 28); +$scheme-invert: #fff; +$scheme-main-bis: rgb(28, 30, 32); +$scheme-main-ter: rgb(32, 34, 36); +$background-body: rgb(24, 27, 28); +$background-secondary: rgb(28, 30, 32); +$background-tertiary: rgb(32, 34, 36); +$modal-background-background-color: rgba($black, 0.8); /* highlight colors */ $primary-highlight: $primary; @@ -26,10 +32,9 @@ $info-highlight: $info; $success-highlight: $success; /* borders */ -$border: $grey; -$border-hover: $grey-light; -$border-light: $grey; -$border-light-hover: $grey-light; +$border: #2b3031; +$border-light: #444; +$border-hover: #51595d; /* text */ $text: $grey-lightest; @@ -37,17 +42,35 @@ $text-light: $grey-lighter; $text-strong: $white-ter; /* links */ -$link: $white; +$link: #2e7eb9; $link-background: $background-tertiary; $link-hover: $white-bis; +$link-hover-border: #51595d; $link-focus: $white-bis; $link-active: $white-bis; -/* misc */ - /* bulma overrides */ $background: $background-secondary; $menu-item-active-background-color: $link-background; +$navbar-dropdown-item-hover-color: $white; + +/* These element's colors are hardcoded, probably a bug in bulma? */ +@media screen and (min-width: 769px) { + .navbar-dropdown { + box-shadow: 0 8px 8px rgba($black, 0.2) !important; + } +} + +@media screen and (max-width: 768px) { + .navbar-menu { + box-shadow: 0 8px 8px rgba($black, 0.2) !important; + } +} + +/* misc */ +$shadow: 0 0.5em 1em -0.125em rgba($black, 0.2), 0 0px 0 1px rgba($black, 0.02); +$card-header-shadow: 0 0.125em 0.25em rgba($black, 0.1); +$invisible-overlay-background-color: rgba($black, 0.66); /* Fonts ******************************************************************************/ diff --git a/bookwyrm/static/css/themes/light.scss b/bookwyrm/static/css/themes/light.scss index 339fc2c36..60781ff58 100644 --- a/bookwyrm/static/css/themes/light.scss +++ b/bookwyrm/static/css/themes/light.scss @@ -47,6 +47,9 @@ $link-active: $grey-darker; $background: $background-secondary; $menu-item-active-background-color: $link-background; +/* misc */ +$invisible-overlay-background-color: rgba($scheme-invert, 0.66); + /* Fonts ******************************************************************************/ $family-primary: $family-sans-serif; From e4d7dd7ee4c21af9d78eb806a5b5a7dd61849077 Mon Sep 17 00:00:00 2001 From: Vivianne Langdon Date: Sun, 27 Feb 2022 05:29:33 -0800 Subject: [PATCH 2/6] Fix progress bar --- bookwyrm/static/css/themes/dark.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/bookwyrm/static/css/themes/dark.scss b/bookwyrm/static/css/themes/dark.scss index 30ca12b13..c24e153e6 100644 --- a/bookwyrm/static/css/themes/dark.scss +++ b/bookwyrm/static/css/themes/dark.scss @@ -71,6 +71,7 @@ $navbar-dropdown-item-hover-color: $white; $shadow: 0 0.5em 1em -0.125em rgba($black, 0.2), 0 0px 0 1px rgba($black, 0.02); $card-header-shadow: 0 0.125em 0.25em rgba($black, 0.1); $invisible-overlay-background-color: rgba($black, 0.66); +$progress-value-background-color: $border-light; /* Fonts ******************************************************************************/ From fd0f7394182c864bd96244d92b81a1fa44cb3422 Mon Sep 17 00:00:00 2001 From: Mouse Reeve Date: Sun, 27 Feb 2022 10:51:49 -0800 Subject: [PATCH 3/6] Rename light.scss to bookwyrm-light.scss --- bookwyrm/static/css/themes/{light.scss => bookwyrm-light.scss} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename bookwyrm/static/css/themes/{light.scss => bookwyrm-light.scss} (100%) diff --git a/bookwyrm/static/css/themes/light.scss b/bookwyrm/static/css/themes/bookwyrm-light.scss similarity index 100% rename from bookwyrm/static/css/themes/light.scss rename to bookwyrm/static/css/themes/bookwyrm-light.scss From c8d3222c33ffc918c71dcf5d74f6129d0981dc3b Mon Sep 17 00:00:00 2001 From: Mouse Reeve Date: Sun, 27 Feb 2022 10:52:07 -0800 Subject: [PATCH 4/6] Rename dark.scss to bookwyrm-dark.scss --- bookwyrm/static/css/themes/{dark.scss => bookwyrm-dark.scss} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename bookwyrm/static/css/themes/{dark.scss => bookwyrm-dark.scss} (100%) diff --git a/bookwyrm/static/css/themes/dark.scss b/bookwyrm/static/css/themes/bookwyrm-dark.scss similarity index 100% rename from bookwyrm/static/css/themes/dark.scss rename to bookwyrm/static/css/themes/bookwyrm-dark.scss From 4d3e709b2a425f0ac078ddaf39b70c72eb837a7f Mon Sep 17 00:00:00 2001 From: Mouse Reeve Date: Mon, 28 Feb 2022 09:23:03 -0800 Subject: [PATCH 5/6] Update layout.html --- bookwyrm/templates/layout.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/bookwyrm/templates/layout.html b/bookwyrm/templates/layout.html index aaf21717c..444241e5b 100644 --- a/bookwyrm/templates/layout.html +++ b/bookwyrm/templates/layout.html @@ -9,7 +9,7 @@ {% block title %}BookWyrm{% endblock %} - {{ site.name }} {% with theme_path=user.get_theme %} - + {% endwith %} From 8e9bacc527f7d5e906c1b30bb071e0a9d68d6eb2 Mon Sep 17 00:00:00 2001 From: Vivianne Langdon Date: Mon, 28 Feb 2022 23:31:57 -0800 Subject: [PATCH 6/6] Fix red for being too harsh --- bookwyrm/static/css/themes/bookwyrm-dark.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/bookwyrm/static/css/themes/bookwyrm-dark.scss b/bookwyrm/static/css/themes/bookwyrm-dark.scss index 216fa1e8c..e363572d5 100644 --- a/bookwyrm/static/css/themes/bookwyrm-dark.scss +++ b/bookwyrm/static/css/themes/bookwyrm-dark.scss @@ -13,6 +13,7 @@ $warning: #8b6c15; $danger: #872538; $danger-light: #481922; $light: #393939; +$red: #ffa1b4; /* book cover standins */ $no-cover-color: #002549;