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

fix stylesheet for simplified UI

Browse source 
adjust Settings interface to match new UI
This commit is contained in:
buzz-lightsnack-2007 2024-04-23 15:28:28 +08:00
parent 48e3a19881
commit 6aef461d0d
5 changed files with 70 additions and 62 deletions
Download patch file Download diff file Expand all files Collapse all files

50
pages/settings.htm
View file

@ -6,7 +6,7 @@
<title for="term_preferences"></title> <title for="term_preferences"></title>
</head> </head>
<body class="background"> <body>
<main class="container"> <main class="container">
<ul class="collapsible" data-collapsible="accordion"> <ul class="collapsible" data-collapsible="accordion">
<li> <li>
@ -25,22 +25,13 @@
class="filled-in" class="filled-in"
data-store-location="1" data-store-location="1"
/> />
<span <span for="settings_general_showApplicable"></span>
for="settings_general_showApplicable"
></span>
</label> </label>
</li> </li>
<li> <li>
<label> <label>
<input <input type="checkbox" data-store="settings,general,injectToPage" class="filled-in" data-store-location="1" />
type="checkbox" <span for="settings_general_injectToPage"></span>
data-store="settings,general,injectToPage"
class="filled-in"
data-store-location="1"
/>
<span
for="settings_general_injectToPage"
></span>
</label> </label>
</li> </li>
</ul> </ul>
@ -50,15 +41,8 @@
<ul class="input-field"> <ul class="input-field">
<li> <li>
<label> <label>
<input <input type="checkbox" data-store="settings,behavior,autoRun" class="filled-in" data-store-location="1" />
type="checkbox" <span for="settings_behavior_autoRun"></span>
data-store="settings,behavior,autoRun"
class="filled-in"
data-store-location="1"
/>
<span
for="settings_behavior_autoRun"
></span>
</label> </label>
</li> </li>
</ul> </ul>
@ -66,12 +50,7 @@
</section> </section>
</li> </li>
<li> <li>
<header <header class="collapsible-header waves-effect flow-text" for="filters" accesskey="2" data-icon="filter"></header>
class="collapsible-header waves-effect flow-text"
for="filters"
accesskey="2"
data-icon="filter"
></header>
<section class="collapsible-body"> <section class="collapsible-body">
<section class="input-group row"> <section class="input-group row">
<label class="input-description"> <label class="input-description">
@ -84,19 +63,8 @@
></label> ></label>
</label> </label>
<side class="input-field"> <side class="input-field">
<button <button data-action="filters,update" title-for="settings_filters_update" data-enable="settings,filters" data-icon="refresh"></button>
data-action="filters,update" <button href="settings/filters.htm" tab-height="607.5" tab-width="1080" data-icon="pencil" title-for="settings_filters_open" role="primary"></button>
title-for="settings_filters_update"
data-enable="settings,filters"
data-icon="refresh"
></button>
<button
href="settings/filters.htm"
tab-height="607.5"
tab-width="1080"
data-icon="pencil"
title-for="settings_filters_open"
></button>
</side> </side>
</section> </section>
<section class="input-group"> <section class="input-group">

22
styles/colors/all.backgrounds.collapsible.css Normal file
View 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;
}

4
styles/colors/all.css
View file

@ -1,4 +1,6 @@
@import url("/styles/colors/defaults.css"); @import url("/styles/colors/defaults.css");
@import url("/styles/colors/all.forms.css");
@import url("/styles/colors/all.backgrounds.collapsible.css");
body { body {
color: var(--font-color-main); color: var(--font-color-main);
@ -14,7 +16,7 @@ body {
); );
} }
main.container { main.container:not(:has(.collapsible)) {
background-color: var(--background-color); background-color: var(--background-color);
} }

11
styles/colors/all.forms.css Normal file
View 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;
}

45
styles/colors/defaults.css
View file

@ -1,4 +1,6 @@
:root { :root {
--surface-color: rgba(252, 162, 133) !important;
--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;
@ -23,11 +25,11 @@
@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: #391400 !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(180, 180, 180) !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;
@ -35,33 +37,36 @@
--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;
--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: 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(190, 80, 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(159, 55, 0) !important;
--font-on-secondary-container-color: rgba(255, 255, 255) !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; --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;