buzzcode2007/ShopAI-Extension
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

adjust settings page interface to support OLED

Browse source 
add navbar and remove FAB
This commit is contained in:
buzz-lightsnack-2007 2024-04-23 16:27:59 +08:00
parent 6aef461d0d
commit 1627cbbf3b
10 changed files with 88 additions and 50 deletions
Download patch file Download diff file Expand all files Collapse all files

25
styles/colors/all.backgrounds.collapsible.css
View file

@ -1,22 +1,25 @@
.collapsible {
border: none;
}
.collapsible .collapsible-header, .collapsible .collapsible-body {
background-color: var(--background-color-card);
};
.collapsible > li {
border-color: var(--separator-color) !important;
};
/* Active events */
.collapsible .collapsible-header:focus, .collapsible .collapsible-header:active {
background-color: var(--surface-color);
}
.collapsible .collapsible-header:hover {
background-color: var(--hover-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;
background: var(--primary-color-gradient) !important;
}
.collapsible > li:has(.collapsible-header:hover) {
border: 1px solid var(--hover-color);
}

11
styles/colors/all.forms.css
View file

@ -1,11 +1,16 @@
.input-field input, .input-field textarea {
background-color: var(--input-color);
background-color: var(--input-color) !important;
}
.btn {
.btn:not([disabled]) {
background-color: var(--secondary-color) !important;
}
.btn[role="primary"], .btn-floating {
.btn[role="primary"]:not([disabled]), .btn-floating:not([disabled]) {
background-color: var(--primary-color) !important;
}
nav ul:not(.dropdown-content) > li > a:hover:not(.active) {
background-color: var(--hover-color) !important;
}

13
styles/colors/defaults.css
View file

@ -42,15 +42,24 @@
--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;
--primary-color-gradient: linear-gradient(
43deg,
var(--primary-color-dark) 0%,
var(--primary-color) 62%,
var(--primary-color-raised-hover-solid) 100%
) !important;
--secondary-color-lighter: rgba(221, 106, 59) !important;
--secondary-color: rgba(190, 80, 1) !important;
--secondary-color-dark: rgba(159, 55, 0) !important;
--secondary-color-hover-solid: rgba(252, 162, 133) !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;
--hover-color: rgba(255, 255, 255, 0.3) !important;
--focus-color: rgba(255, 134, 57,.4) !important;
--focus-color-solid: #424242 !important;
--active-color: rgba(255, 134, 57,.7) !important;
--background-color-disabled: rgba(255, 255, 255, 0.12) !important;
--background-color-level-4dp: rgba(255, 255, 255, 0.09) !important;
@ -65,8 +74,6 @@
--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;

1
styles/fonts/all.css
View file

@ -1,4 +1,5 @@
@import url("/styles/fonts/all.article.css");
@import url("/styles/fonts/all.navbar.css");
.collapsible > li > header {
font-weight: bold;

4
styles/fonts/all.navbar.css Normal file
View file

@ -0,0 +1,4 @@
nav .brand-logo {
font-size: 1.25rem !important;
font-weight: bold;
}

13
styles/layouts/all.collapsible.css Normal file
View file

@ -0,0 +1,13 @@
.collapsible {
border: none !important;
}
.collapsible > li {
border: 1px solid var(--separator-color);
border-bottom-width: 0px;
}
.collapsible > li:last-child {
border-bottom-width: 1px;
}

2
styles/layouts/all.css
View file

@ -1,4 +1,6 @@
@import url("/styles/layouts/all.inputs.css");
@import url("/styles/layouts/all.collapsible.css");
@import url("/styles/layouts/all.navbar.css");
fieldset {
padding: 2em !important;

24
styles/layouts/all.navbar.css Normal file
View file

@ -0,0 +1,24 @@
nav .brand-logo {
position: relative !important;
margin-top: auto !important;
margin-bottom: auto !important;
display: flex;
align-items: center;
flex-direction: row;
justify-content: space-between;
}
nav .brand-logo > * {
margin-top: auto !important;
margin-bottom: auto !important;
}
nav .brand-logo > * {
margin-left: .5em !important;
}
nav .brand-logo img {
--dimension: 1.5rem;
height: var(--dimension) !important;
width: var(--dimension) !important;
}