From 6aef461d0d21fe5e604932673155ff8674fe3c7b Mon Sep 17 00:00:00 2001 From: buzz-lightsnack-2007 <73412182+buzz-lightsnack-2007@users.noreply.github.com> Date: Tue, 23 Apr 2024 15:28:28 +0800 Subject: [PATCH] fix stylesheet for simplified UI adjust Settings interface to match new UI --- pages/settings.htm | 50 ++++--------------- styles/colors/all.backgrounds.collapsible.css | 22 ++++++++ styles/colors/all.css | 4 +- styles/colors/all.forms.css | 11 ++++ styles/colors/defaults.css | 45 +++++++++-------- 5 files changed, 70 insertions(+), 62 deletions(-) create mode 100644 styles/colors/all.backgrounds.collapsible.css create mode 100644 styles/colors/all.forms.css diff --git a/pages/settings.htm b/pages/settings.htm index 5baab5b..5acd5c0 100644 --- a/pages/settings.htm +++ b/pages/settings.htm @@ -6,7 +6,7 @@ - +
@@ -50,15 +41,8 @@ @@ -66,12 +50,7 @@
  • -
    +
    - - + +
    diff --git a/styles/colors/all.backgrounds.collapsible.css b/styles/colors/all.backgrounds.collapsible.css new file mode 100644 index 0000000..5f096b7 --- /dev/null +++ b/styles/colors/all.backgrounds.collapsible.css @@ -0,0 +1,22 @@ +.collapsible { + border: none; +} + +.collapsible .collapsible-header, .collapsible .collapsible-body { + background-color: var(--background-color-card); +}; + +/* Active events */ +.collapsible .collapsible-header:focus, .collapsible .collapsible-header:active { + background-color: var(--surface-color); +} + +.collapsible .active .collapsible-header { + background-color: none; + background: linear-gradient( + 25deg, + var(--primary-color-dark) 0%, + var(--primary-color) 62%, + var(--primary-color-raised-hover-solid) 100% + ) !important; +} \ No newline at end of file diff --git a/styles/colors/all.css b/styles/colors/all.css index 1593185..af3674b 100644 --- a/styles/colors/all.css +++ b/styles/colors/all.css @@ -1,4 +1,6 @@ @import url("/styles/colors/defaults.css"); +@import url("/styles/colors/all.forms.css"); +@import url("/styles/colors/all.backgrounds.collapsible.css"); body { color: var(--font-color-main); @@ -14,7 +16,7 @@ body { ); } -main.container { +main.container:not(:has(.collapsible)) { background-color: var(--background-color); } diff --git a/styles/colors/all.forms.css b/styles/colors/all.forms.css new file mode 100644 index 0000000..b777d88 --- /dev/null +++ b/styles/colors/all.forms.css @@ -0,0 +1,11 @@ +.input-field input, .input-field textarea { + background-color: var(--input-color); +} + +.btn { + background-color: var(--secondary-color) !important; +} + +.btn[role="primary"], .btn-floating { + background-color: var(--primary-color) !important; +} diff --git a/styles/colors/defaults.css b/styles/colors/defaults.css index ae13c90..ee0bf52 100644 --- a/styles/colors/defaults.css +++ b/styles/colors/defaults.css @@ -1,4 +1,6 @@ :root { + --surface-color: rgba(252, 162, 133) !important; + --font-color-main: rgba(0, 0, 0) !important; --font-color-medium: rgba(25, 25, 25) !important; --font-color-disabled: rgba(63, 63, 63) !important; @@ -23,11 +25,11 @@ @media (prefers-color-scheme: dark) { :root { --background-color: #000 !important; - --surface-color: #000000 !important; + --surface-color: #391400 !important; --font-color-main: rgba(255, 255, 255) !important; --font-color-medium: rgba(200, 200, 200) !important; - --font-color-disabled: rgba(255, 255, 255) !important; + --font-color-disabled: rgba(180, 180, 180) !important; --font-on-primary-color-main: rgba(255, 255, 255) !important; --font-on-primary-color-dark-main: rgba(255, 255, 255) !important; @@ -35,33 +37,36 @@ --font-on-primary-color-medium: rgba(0, 0, 0, 0.56) !important; --font-on-primary-color-disabled: rgba(0, 0, 0, 0.38) !important; - --hover-color: rgba(255, 255, 255, 0.04) !important; - --focus-color: rgba(255, 255, 255, 0.12) !important; - --focus-color-solid: #424242 !important; - - --background-color-disabled: rgba(255, 255, 255, 0.12) !important; - --background-color-level-4dp: rgba(255, 255, 255, 0.09) !important; - --background-color-level-16dp-solid: #262626 !important; - --background-color-card: var(--surface-color) !important; - --background-color-slight-emphasis: rgba(255, 255, 255, 0.05) !important; - - --separator-color: #424242 !important; - --error-color: #cf6679 !important; - - --slider-track-color: rgba(255, 255, 255, 0.26) !important; - --switch-thumb-off-color: #bababa !important; - --primary-color: rgba(255, 134, 57) !important; --primary-color-dark: rgba(221, 106, 59) !important; --primary-color-numeric: 255, 134, 57 !important; --primary-color-raised-hover-solid: rgba(252, 162, 133) !important; --primary-color-raised-focus-solid: rgba(221, 106, 59) !important; - --secondary-color: rgba(221, 106, 59) !important; + --secondary-color: rgba(190, 80, 1) !important; --secondary-color-hover-solid: rgba(252, 162, 133) !important; - --secondary-color-focus-solid: rgba(221, 106, 59) !important; + --secondary-color-focus-solid: rgba(159, 55, 0) !important; --font-on-secondary-container-color: rgba(255, 255, 255) !important; + --hover-color: rgba(255, 255, 255, 0.04) !important; + --focus-color: rgba(255, 134, 57,.4) !important; + --focus-color-solid: #424242 !important; + + --background-color-disabled: rgba(255, 255, 255, 0.12) !important; + --background-color-level-4dp: rgba(255, 255, 255, 0.09) !important; + --background-color-level-16dp-solid: #262626 !important; + --background-color-card: rgba(255, 255, 255, 0.1) !important; + --background-color-slight-emphasis: #9f3700 !important; + + --separator-color: #424242 !important; + --error-color: #cf6679 !important; + + --input-color: rgba(255, 255, 255, 0.12) !important; + --slider-track-color: rgba(255, 255, 255, 0.26) !important; + --switch-thumb-off-color: #bababa !important; + + + --secondary-container-color: rgba(221, 106, 59) !important; --md_sys_color_on-surface: 230, 225, 229 !important;