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

make the filters menu titlebar themed

Browse source
This commit is contained in:
buzz-lightsnack-2007 2024-04-22 23:09:24 +08:00
parent 4146e9f337
commit db36adebe8
2 changed files with 120 additions and 117 deletions
Download patch file Download diff file Expand all files Collapse all files

28
pages/settings/filters.htm
View file

@ -21,18 +21,18 @@
</li> </li>
<div data-results-list="filters"></div> <div data-results-list="filters"></div>
</ul> </ul>
<section> <section>
<nav class="nav-wrapper" data-result-linked="filters"> <nav id="header" class="nav-wrapper" data-result-linked="filters">
<ul class="left"> <ul class="left">
<li><a data-icon="menu" works-sidebar="control"></a></li> <li><a data-icon="menu" works-sidebar="control"></a></li>
</ul> </ul>
<ul class="right"> <ul class="right">
<li><a data-icon="trash-can" data-result-enable="filters" data-action="filters,delete,one" accesskey="-"></a></li> <li><a data-icon="trash-can" data-result-enable="filters" data-action="filters,delete,one" accesskey="-"></a></li>
<li><a data-icon="sync" data-result-enable="filters" data-action="filters,update,one"></a></li> <li><a data-icon="sync" data-result-enable="filters" data-action="filters,update,one"></a></li>
</ul> </ul>
</nav> </nav>
<section class="container"> <section class="container">
<article data-result-linked="filters" class=""> <article data-result-linked="filters" class="">
<h2 class="flow-text" data-result-content="*"></h2> <h2 class="flow-text" data-result-content="*"></h2>
<div class="input-field"> <div class="input-field">
<input type="text" class="validate" placeholder=" " data-result-store="name"> <input type="text" class="validate" placeholder=" " data-result-store="name">
@ -72,8 +72,8 @@
<label for="settings_filters_target"></label> <label for="settings_filters_target"></label>
</div> </div>
</article> </article>
</section> </section>
</section> </section>
</main> </main>
<footer class="fixed-action-btn"> <footer class="fixed-action-btn">
<button class="btn-floating btn-large" data-icon="plus" accesskey="+" data-action="filters,add,one"></button> <button class="btn-floating btn-large" data-icon="plus" accesskey="+" data-action="filters,add,one"></button>

209
styles/ui.css
View file

@ -1,165 +1,168 @@
:root { :root {
--font-color-main: rgba(0, 0, 0) !important; --font-color-main: rgba(0, 0, 0) !important;
--font-color-medium: rgba(25, 25, 25) !important; --font-color-medium: rgba(25, 25, 25) !important;
--font-color-disabled: rgba(63, 63, 63) !important; --font-color-disabled: rgba(63, 63, 63) !important;
--error-color: #cf6679 !important; --error-color: #cf6679 !important;
--primary-color: rgba(255, 134, 57) !important; --primary-color: rgba(255, 134, 57) !important;
--primary-color-dark: rgba(221, 106, 59) !important; --primary-color-dark: rgba(221, 106, 59) !important;
--primary-color-numeric: 255, 134, 57 !important; --primary-color-numeric: 255, 134, 57 !important;
--primary-color-raised-hover-solid: rgba(252, 162, 133) !important; --primary-color-raised-hover-solid: rgba(252, 162, 133) !important;
--primary-color-raised-focus-solid: rgba(221, 106, 59) !important; --primary-color-raised-focus-solid: rgba(221, 106, 59) !important;
--background-color-level-16dp-solid: rgba(255, 238, 235) !important; --background-color-level-16dp-solid: rgba(255, 238, 235) !important;
--secondary-color: rgba(221, 106, 59, 1) !important; --secondary-color: rgba(221, 106, 59, 1) !important;
--secondary-color-hover-solid: rgba(252, 162, 133) !important; --secondary-color-hover-solid: rgba(252, 162, 133) !important;
--secondary-color-focus-solid: rgba(221, 106, 59) !important; --secondary-color-focus-solid: rgba(221, 106, 59) !important;
--secondary-container-color: rgba(252, 162, 133) !important; --secondary-container-color: rgba(252, 162, 133) !important;
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
:root { :root {
--background-color: #000 !important; --background-color: #000 !important;
--surface-color: #000000 !important; --surface-color: #000000 !important;
--font-color-main: rgba(255, 255, 255) !important; --font-color-main: rgba(255, 255, 255) !important;
--font-color-medium: rgba(200, 200, 200) !important; --font-color-medium: rgba(200, 200, 200) !important;
--font-color-disabled: rgba(255, 255, 255) !important; --font-color-disabled: rgba(255, 255, 255) !important;
--font-on-primary-color-main: rgba(255, 255, 255) !important; --font-on-primary-color-main: rgba(255, 255, 255) !important;
--font-on-primary-color-dark-main: rgba(255, 255, 255) !important; --font-on-primary-color-dark-main: rgba(255, 255, 255) !important;
--font-on-primary-color-dark-medium: rgba(255, 255, 255) !important; --font-on-primary-color-dark-medium: rgba(255, 255, 255) !important;
--font-on-primary-color-medium: rgba(0, 0, 0, 0.56) !important; --font-on-primary-color-medium: rgba(0, 0, 0, 0.56) !important;
--font-on-primary-color-disabled: rgba(0, 0, 0, 0.38) !important; --font-on-primary-color-disabled: rgba(0, 0, 0, 0.38) !important;
--hover-color: rgba(255, 255, 255, 0.04) !important; --hover-color: rgba(255, 255, 255, 0.04) !important;
--focus-color: rgba(255, 255, 255, 0.12) !important; --focus-color: rgba(255, 255, 255, 0.12) !important;
--focus-color-solid: #424242 !important; --focus-color-solid: #424242 !important;
--background-color-disabled: rgba(255, 255, 255, 0.12) !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-4dp: rgba(255, 255, 255, 0.09) !important;
--background-color-level-16dp-solid: #262626 !important; --background-color-level-16dp-solid: #262626 !important;
--background-color-card: var(--surface-color) !important; --background-color-card: var(--surface-color) !important;
--background-color-slight-emphasis: rgba( --background-color-slight-emphasis: rgba(
255, 255,
255, 255,
255, 255,
0.05 0.05
) !important; ) !important;
--separator-color: #424242 !important; --separator-color: #424242 !important;
--error-color: #cf6679 !important; --error-color: #cf6679 !important;
--slider-track-color: rgba(255, 255, 255, 0.26) !important; --slider-track-color: rgba(255, 255, 255, 0.26) !important;
--switch-thumb-off-color: #bababa !important; --switch-thumb-off-color: #bababa !important;
--primary-color: rgba(255, 134, 57) !important; --primary-color: rgba(255, 134, 57) !important;
--primary-color-dark: rgba(221, 106, 59) !important; --primary-color-dark: rgba(221, 106, 59) !important;
--primary-color-numeric: 255, 134, 57 !important; --primary-color-numeric: 255, 134, 57 !important;
--primary-color-raised-hover-solid: rgba(252, 162, 133) !important; --primary-color-raised-hover-solid: rgba(252, 162, 133) !important;
--primary-color-raised-focus-solid: rgba(221, 106, 59) !important; --primary-color-raised-focus-solid: rgba(221, 106, 59) !important;
--secondary-color: rgba(221, 106, 59) !important; --secondary-color: rgba(221, 106, 59) !important;
--secondary-color-hover-solid: rgba(252, 162, 133) !important; --secondary-color-hover-solid: rgba(252, 162, 133) !important;
--secondary-color-focus-solid: rgba(221, 106, 59) !important; --secondary-color-focus-solid: rgba(221, 106, 59) !important;
--font-on-secondary-container-color: rgba(255, 255, 255) !important; --font-on-secondary-container-color: rgba(255, 255, 255) !important;
--secondary-container-color: rgba(221, 106, 59) !important; --secondary-container-color: rgba(221, 106, 59) !important;
--md_sys_color_on-surface: 230, 225, 229 !important; --md_sys_color_on-surface: 230, 225, 229 !important;
} }
} }
body { body {
color: var(--font-color-main); color: var(--font-color-main);
background-color: var(--background-color); background-color: var(--background-color);
} }
body:has(main.container), body:has(main.container),
.background { .background {
background: linear-gradient( background: linear-gradient(
25deg, 25deg,
var(--primary-color-dark) 0%, var(--primary-color-dark) 0%,
var(--primary-color) 62%, var(--primary-color) 62%,
var(--primary-color-raised-hover-solid) 100% var(--primary-color-raised-hover-solid) 100%
); );
} }
main.container { main.container {
background-color: var(--background-color); background-color: var(--background-color);
} }
nav { nav {
background-color: none; background-color: var(--background-color) !important;
background: linear-gradient( }
335deg,
var(--primary-color-dark) 0%, nav#header {
var(--primary-color) 62%, background: linear-gradient(
var(--primary-color-raised-hover-solid) 100% 335deg,
); var(--primary-color-dark) 0%,
var(--primary-color) 62%,
var(--primary-color-raised-hover-solid) 100%
);
} }
nav .input-field input[type="search"] { nav .input-field input[type="search"] {
color: var(--font-color-main) !important; color: var(--font-color-main) !important;
} }
ul.sidenav-fixed + * { ul.sidenav-fixed + * {
padding-left: 300px; padding-left: 300px;
} }
@media only screen and (max-width: 992px) { @media only screen and (max-width: 992px) {
ul.sidenav-fixed + * { ul.sidenav-fixed + * {
padding-left: 0; padding-left: 0;
} }
} }
.collapsible > li > header { .collapsible > li > header {
font-weight: bold; font-weight: bold;
} }
form ul > li:has(input[type="checkbox"]), form ul > li:has(input[type="checkbox"]),
ul.input-field > li { ul.input-field > li {
list-style-type: none; list-style-type: none;
} }
form ul:has(li input[type="checkbox"]), form ul:has(li input[type="checkbox"]),
ul.input-field { ul.input-field {
padding-left: 0; padding-left: 0;
} }
.input-group { .input-group {
margin-block-start: 1em !important; margin-block-start: 1em !important;
margin-block-end: 1em !important; margin-block-end: 1em !important;
} }
.input-group:not(:has(input)) { .input-group:not(:has(input)) {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
} }
.input-group side:not(:has(input)) { .input-group side:not(:has(input)) {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: end; justify-content: end;
align-items: center; align-items: center;
} }
.field-row { .field-row {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
} }
.dual > * > *:not(nav) { .dual > * > *:not(nav) {
margin: 1em; margin: 1em;
} }
.dual .container { .dual .container {
width: 90% !important; width: 90% !important;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
} }
@ -171,16 +174,16 @@ ul.input-field {
} }
nav .input-field label { nav .input-field label {
left: auto !important; left: auto !important;
} }
.input-field > button:not(:last-child) { .input-field > button:not(:last-child) {
margin-right: 0.5em; margin-right: 0.5em;
} }
.nav-wrapper { .nav-wrapper {
position: sticky; position: sticky;
z-index: 10; z-index: 10;
} }
@media only screen and (min-width: 992px) { @media only screen and (min-width: 992px) {
@ -193,7 +196,7 @@ nav .input-field label {
font-weight: bold; font-weight: bold;
} }
#author { #author {
font-style: italic; font-style: italic;
} }
nav ul:not(.dropdown-content) > li > a { nav ul:not(.dropdown-content) > li > a {
@ -215,20 +218,20 @@ textarea[type="code"] {
} }
fieldset { fieldset {
padding: 2em !important; padding: 2em !important;
border-radius: 4px; border-radius: 4px;
} }
fieldset > legend { fieldset > legend {
padding: 0.5em !important; padding: 0.5em !important;
} }
fieldset > ul { fieldset > ul {
margin-top: 0em !important; margin-top: 0em !important;
} }
fieldset > ul li { fieldset > ul li {
padding-top: 0em !important; padding-top: 0em !important;
} }
.input-field { .input-field {
margin-bottom: .25em; margin-bottom: .25em;
} }