make the filters menu titlebar themed
This commit is contained in:
buzz-lightsnack-2007
parent
4146e9f337
commit
db36adebe8
2 changed files with 120 additions and 117 deletions
|
|
@ -21,18 +21,18 @@
|
|||
</li>
|
||||
<div data-results-list="filters"></div>
|
||||
</ul>
|
||||
<section>
|
||||
<nav class="nav-wrapper" data-result-linked="filters">
|
||||
<ul class="left">
|
||||
<li><a data-icon="menu" works-sidebar="control"></a></li>
|
||||
</ul>
|
||||
<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="sync" data-result-enable="filters" data-action="filters,update,one"></a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<section class="container">
|
||||
<article data-result-linked="filters" class="">
|
||||
<section>
|
||||
<nav id="header" class="nav-wrapper" data-result-linked="filters">
|
||||
<ul class="left">
|
||||
<li><a data-icon="menu" works-sidebar="control"></a></li>
|
||||
</ul>
|
||||
<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="sync" data-result-enable="filters" data-action="filters,update,one"></a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<section class="container">
|
||||
<article data-result-linked="filters" class="">
|
||||
<h2 class="flow-text" data-result-content="*"></h2>
|
||||
<div class="input-field">
|
||||
<input type="text" class="validate" placeholder=" " data-result-store="name">
|
||||
|
|
@ -72,8 +72,8 @@
|
|||
<label for="settings_filters_target"></label>
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
</section>
|
||||
</section>
|
||||
</section>
|
||||
</main>
|
||||
<footer class="fixed-action-btn">
|
||||
<button class="btn-floating btn-large" data-icon="plus" accesskey="+" data-action="filters,add,one"></button>
|
||||
|
|
|
|||
209
styles/ui.css
209
styles/ui.css
|
|
@ -1,165 +1,168 @@
|
|||
:root {
|
||||
--font-color-main: rgba(0, 0, 0) !important;
|
||||
--font-color-medium: rgba(25, 25, 25) !important;
|
||||
--font-color-disabled: rgba(63, 63, 63) !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;
|
||||
|
||||
--error-color: #cf6679 !important;
|
||||
--error-color: #cf6679 !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;
|
||||
--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;
|
||||
|
||||
--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-hover-solid: rgba(252, 162, 133) !important;
|
||||
--secondary-color-focus-solid: rgba(221, 106, 59) !important;
|
||||
--secondary-color: rgba(221, 106, 59, 1) !important;
|
||||
--secondary-color-hover-solid: rgba(252, 162, 133) !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) {
|
||||
:root {
|
||||
--background-color: #000 !important;
|
||||
--surface-color: #000000 !important;
|
||||
:root {
|
||||
--background-color: #000 !important;
|
||||
--surface-color: #000000 !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-main: rgba(255, 255, 255) !important;
|
||||
--font-color-medium: rgba(200, 200, 200) !important;
|
||||
--font-color-disabled: 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-medium: rgba(255, 255, 255) !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-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-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;
|
||||
--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;
|
||||
--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;
|
||||
--separator-color: #424242 !important;
|
||||
--error-color: #cf6679 !important;
|
||||
|
||||
--slider-track-color: rgba(255, 255, 255, 0.26) !important;
|
||||
--switch-thumb-off-color: #bababa !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;
|
||||
--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-hover-solid: rgba(252, 162, 133) !important;
|
||||
--secondary-color-focus-solid: rgba(221, 106, 59) !important;
|
||||
--font-on-secondary-container-color: rgba(255, 255, 255) !important;
|
||||
--secondary-color: rgba(221, 106, 59) !important;
|
||||
--secondary-color-hover-solid: rgba(252, 162, 133) !important;
|
||||
--secondary-color-focus-solid: rgba(221, 106, 59) !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 {
|
||||
color: var(--font-color-main);
|
||||
background-color: var(--background-color);
|
||||
color: var(--font-color-main);
|
||||
background-color: var(--background-color);
|
||||
}
|
||||
|
||||
body:has(main.container),
|
||||
.background {
|
||||
background: linear-gradient(
|
||||
25deg,
|
||||
var(--primary-color-dark) 0%,
|
||||
var(--primary-color) 62%,
|
||||
var(--primary-color-raised-hover-solid) 100%
|
||||
);
|
||||
background: linear-gradient(
|
||||
25deg,
|
||||
var(--primary-color-dark) 0%,
|
||||
var(--primary-color) 62%,
|
||||
var(--primary-color-raised-hover-solid) 100%
|
||||
);
|
||||
}
|
||||
|
||||
main.container {
|
||||
background-color: var(--background-color);
|
||||
background-color: var(--background-color);
|
||||
}
|
||||
|
||||
nav {
|
||||
background-color: none;
|
||||
background: linear-gradient(
|
||||
335deg,
|
||||
var(--primary-color-dark) 0%,
|
||||
var(--primary-color) 62%,
|
||||
var(--primary-color-raised-hover-solid) 100%
|
||||
);
|
||||
background-color: var(--background-color) !important;
|
||||
}
|
||||
|
||||
nav#header {
|
||||
background: linear-gradient(
|
||||
335deg,
|
||||
var(--primary-color-dark) 0%,
|
||||
var(--primary-color) 62%,
|
||||
var(--primary-color-raised-hover-solid) 100%
|
||||
);
|
||||
}
|
||||
|
||||
nav .input-field input[type="search"] {
|
||||
color: var(--font-color-main) !important;
|
||||
color: var(--font-color-main) !important;
|
||||
}
|
||||
|
||||
ul.sidenav-fixed + * {
|
||||
padding-left: 300px;
|
||||
padding-left: 300px;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 992px) {
|
||||
ul.sidenav-fixed + * {
|
||||
padding-left: 0;
|
||||
}
|
||||
ul.sidenav-fixed + * {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.collapsible > li > header {
|
||||
font-weight: bold;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
form ul > li:has(input[type="checkbox"]),
|
||||
ul.input-field > li {
|
||||
list-style-type: none;
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
form ul:has(li input[type="checkbox"]),
|
||||
ul.input-field {
|
||||
padding-left: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.input-group {
|
||||
margin-block-start: 1em !important;
|
||||
margin-block-end: 1em !important;
|
||||
margin-block-start: 1em !important;
|
||||
margin-block-end: 1em !important;
|
||||
}
|
||||
|
||||
.input-group:not(:has(input)) {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.input-group side:not(:has(input)) {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: end;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: end;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.field-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.dual > * > *:not(nav) {
|
||||
margin: 1em;
|
||||
margin: 1em;
|
||||
}
|
||||
|
||||
.dual .container {
|
||||
width: 90% !important;
|
||||
width: 90% !important;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
|
@ -171,16 +174,16 @@ ul.input-field {
|
|||
}
|
||||
|
||||
nav .input-field label {
|
||||
left: auto !important;
|
||||
left: auto !important;
|
||||
}
|
||||
|
||||
.input-field > button:not(:last-child) {
|
||||
margin-right: 0.5em;
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
|
||||
.nav-wrapper {
|
||||
position: sticky;
|
||||
z-index: 10;
|
||||
position: sticky;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 992px) {
|
||||
|
|
@ -193,7 +196,7 @@ nav .input-field label {
|
|||
font-weight: bold;
|
||||
}
|
||||
#author {
|
||||
font-style: italic;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
nav ul:not(.dropdown-content) > li > a {
|
||||
|
|
@ -215,20 +218,20 @@ textarea[type="code"] {
|
|||
}
|
||||
|
||||
fieldset {
|
||||
padding: 2em !important;
|
||||
border-radius: 4px;
|
||||
padding: 2em !important;
|
||||
border-radius: 4px;
|
||||
}
|
||||
fieldset > legend {
|
||||
padding: 0.5em !important;
|
||||
padding: 0.5em !important;
|
||||
}
|
||||
fieldset > ul {
|
||||
margin-top: 0em !important;
|
||||
margin-top: 0em !important;
|
||||
}
|
||||
|
||||
fieldset > ul li {
|
||||
padding-top: 0em !important;
|
||||
padding-top: 0em !important;
|
||||
}
|
||||
|
||||
.input-field {
|
||||
margin-bottom: .25em;
|
||||
margin-bottom: .25em;
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue