VDMDI/CT
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

improve highlight style, improve filter button marker

Browse Source
This commit is contained in:
marlon-erler
2026-04-12 12:39:29 +00:00
parent 8d44cef429
commit 4ad92f8dc7
9 changed files with 113 additions and 136 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dist/styles.css
Vendored
+70 -53
View File
@@ -28,7 +28,7 @@ body {
--animation-duration: 0.4s;
}
.modal > div,
.modal>div,
.slide-up {
animation: slide-up var(--animation-duration);
}
@@ -62,6 +62,9 @@ body {
--text-error: #da1e28;
--text-info: #0043ce;
--highlight-background: linear-gradient(45deg, hsl(30, 100%, 50%), hsl(40, 100%, 50%));
--highlight-color: black;
--link: #0f62fe;
--link-hover: #0043ce;
@@ -116,7 +119,7 @@ body {
color: var(--text-placeholder);
}
.modal > div {
.modal>div {
background: var(--background-glass);
}
@@ -164,6 +167,7 @@ select:not(.tile *),
}
@media (hover: hover) {
button:hover,
select:hover,
button.tile.ghost:hover {
@@ -336,7 +340,7 @@ select {
/* backdrop-filter */
header,
menu,
.modal > div {
.modal>div {
backdrop-filter: blur(70px);
-webkit-backdrop-filter: blur(70px);
}
@@ -353,9 +357,7 @@ footer {
border-top: 1px solid var(--surface-border);
}
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not(
label.tile *
),
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not(label.tile *),
label.tile,
select:not(label.tile *),
textarea:not(label.tile *) {
@@ -370,9 +372,7 @@ hr {
border-bottom: 1px solid var(--border) !important;
}
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):focus:not(
label.tile *
):not(.no-outline),
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):focus:not(label.tile *):not(.no-outline),
label.tile:has(input:focus),
label.tile:has(textarea:focus),
textarea:focus:not(label.tile *),
@@ -437,13 +437,13 @@ input[type="radio"],
label.inline,
main,
.modal[open],
.modal > div,
.modal>div,
.tile,
.tile > div {
.tile>div {
display: flex;
}
header > span,
header>span,
.flex-column,
.flex-row {
display: flex;
@@ -470,7 +470,7 @@ textarea {
main,
.tile,
.tile > div {
.tile>div {
flex: 1;
}
@@ -482,9 +482,9 @@ main,
flex: 0 !important;
}
.modal > div,
.modal>div,
.modal main,
.tile > div {
.tile>div {
flex-direction: column;
}
@@ -507,7 +507,7 @@ label.inline,
gap: var(--gap-in-controls);
}
header > span,
header>span,
.gap {
gap: var(--gap-between-tiles) !important;
}
@@ -619,7 +619,7 @@ input[type="radio"] {
padding: 0 !important;
}
article > div {
article>div {
padding: var(--content-padding);
}
@@ -643,7 +643,7 @@ textarea,
padding: var(--control-padding) !important;
}
header > span {
header>span {
padding: var(--gap-between-tiles);
}
@@ -659,7 +659,7 @@ header > span {
padding-top: var(--control-padding) !important;
}
article > div {
article>div {
padding-top: calc(var(--header-height) + var(--content-margin));
}
@@ -691,11 +691,8 @@ select {
padding-bottom: var(--control-padding) !important;
}
article > div {
padding-bottom: calc(
var(--menu-height-mobile) + var(--control-height) +
var(--content-padding)
);
article>div {
padding-bottom: calc(var(--menu-height-mobile) + var(--control-height) + var(--content-padding));
}
label:not(.inline) {
@@ -712,10 +709,10 @@ label.tile:has(> span.icon) {
}
/* position etc */
article > div,
article>div,
footer,
header,
select + .icon {
select+.icon {
position: absolute;
}
@@ -746,7 +743,7 @@ label {
position: sticky !important;
}
article > div,
article>div,
header,
.modal {
top: 0;
@@ -756,7 +753,7 @@ header,
top: 0 !important;
}
article > div,
article>div,
footer,
header,
.modal {
@@ -767,7 +764,7 @@ header,
left: 0px !important;
}
article > div,
article>div,
footer,
header,
.modal {
@@ -778,7 +775,7 @@ header,
right: 0px !important;
}
select + .icon {
select+.icon {
right: var(--control-marker-padding);
}
@@ -790,8 +787,8 @@ body:has(> menu) footer {
bottom: var(--menu-height-mobile);
}
article > div,
select + .icon,
article>div,
select+.icon,
.modal {
bottom: 0px;
}
@@ -803,8 +800,8 @@ select + .icon,
/* size */
article,
main,
select + .icon,
.modal > div,
select+.icon,
.modal>div,
.modal main {
height: 100%;
}
@@ -821,7 +818,7 @@ button:not(.tile):not(header *),
footer,
input:not([type="checkbox"]):not([type="radio"]),
select,
select + .icon {
select+.icon {
height: var(--control-height);
}
@@ -841,7 +838,7 @@ button:not(.tile):not(header *),
footer,
input:not([type="checkbox"]):not([type="radio"]),
select,
.modal > div > :is(button, div.flex-row) {
.modal>div> :is(button, div.flex-row) {
min-height: var(--control-height);
}
@@ -864,9 +861,9 @@ header,
main,
select,
textarea,
.modal > div,
.modal>div,
.tile,
.tile > div {
.tile>div {
width: 100%;
}
@@ -920,7 +917,7 @@ code {
.error,
.warning,
.success,
label.tile > div > span:not(.icon) {
label.tile>div>span:not(.icon) {
font-size: 0.9rem;
}
@@ -940,7 +937,7 @@ menu {
z-index: 2;
}
.modal > div {
.modal>div {
z-index: 2;
}
@@ -1036,11 +1033,8 @@ menu {
font-size: 0.5rem;
}
article > div {
padding-bottom: calc(
var(--menu-height-mobile) + var(--header-height) +
var(--content-padding)
);
article>div {
padding-bottom: calc(var(--menu-height-mobile) + var(--header-height) + var(--content-padding));
}
/* overflow */
@@ -1060,7 +1054,7 @@ main,
overflow: hidden !important;
}
article > div,
article>div,
.modal main {
overflow: auto;
}
@@ -1112,7 +1106,7 @@ main::-webkit-scrollbar {
}
main,
article > div {
article>div {
scroll-behavior: smooth;
}
@@ -1126,29 +1120,30 @@ main {
/* tablet & up */
@media (min-width: 640px) {
/* basic */
.mobile-only {
display: none !important;
}
/* border, outline, etc */
.modal > div {
.modal>div {
border: 1px solid var(--surface-border);
}
menu,
main.split > article:first-of-type {
main.split>article:first-of-type {
border-right: 1px solid var(--border);
}
/* size */
.modal > div {
.modal>div {
height: auto;
max-height: 100%;
}
p,
.modal > div {
.modal>div {
max-width: var(--max-content-width);
}
@@ -1177,7 +1172,7 @@ main {
grid-template-columns: var(--split-pane-width-desktop) 1fr;
}
article > div {
article>div {
padding-bottom: calc(var(--content-padding) + var(--control-height));
}
@@ -1210,6 +1205,28 @@ main {
}
}
/*
STATE
*/
[highlight]:not(:hover):not(:active) {
color: var(--highlight-color) !important;
background: var(--highlight-background) !important;
}
[highlight].animate-highlight {
animation: 3s infinite highlight;
}
@keyframes highlight {
30%, 60% {
opacity: 1;
}
0%, 100% {
opacity: .1;
}
}
/*
ICONS
*/
@@ -1238,4 +1255,4 @@ input[type="checkbox"],
font-style: normal;
font-weight: 300;
src: url("Icons/material-icons.woff") format("woff");
}
}