fix stylesheet for simplified UI
adjust Settings interface to match new UI
This commit is contained in:
parent
48e3a19881
commit
6aef461d0d
5 changed files with 70 additions and 62 deletions
22
styles/colors/all.backgrounds.collapsible.css
Normal file
22
styles/colors/all.backgrounds.collapsible.css
Normal file
|
@ -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;
|
||||
}
|
|
@ -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);
|
||||
}
|
||||
|
||||
|
|
11
styles/colors/all.forms.css
Normal file
11
styles/colors/all.forms.css
Normal file
|
@ -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;
|
||||
}
|
|
@ -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;
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue