xt/estim_control
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

adjust button styles.

Browse Source
This commit is contained in:
Vixalie 2025-03-07 17:09:45 +08:00
parent e35788fa31
commit 4ef71d4678
1 changed files with 55 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

94
src/components.css
View File

@ -108,18 +108,16 @@
font-size: calc(var(--font-size) * 1.6); font-size: calc(var(--font-size) * 1.6);
} }
&:hover:not(:disabled) { &:hover:not(:disabled) {
color: var(--button-text); --button-surface: color-mix(in oklch, var(--button-text) 8%, transparent);
background-color: color-mix(in oklch, var(--button-surface) 8%, transparent);
box-shadow: var(--elevation-dark-1-ambient), var(--elevation-dark-1-umbra); box-shadow: var(--elevation-dark-1-ambient), var(--elevation-dark-1-umbra);
} }
&:active:not(:disabled) { &:active:not(:disabled) {
color: var(--button-text); --button-surface: color-mix(in oklch, var(--button-text) 18%, transparent);
background: color-mix(in oklch, var(--button-surface) 10%, transparent);
box-shadow: var(--elevation-dark-0); box-shadow: var(--elevation-dark-0);
} }
&:disabled { &:disabled {
color: color-mix(in oklch, var(--color-dark-on-surface) 38%, transparent); --button-text: color-mix(in oklch, var(--color-dark-on-surface) 38%, transparent);
background-color: color-mix(in oklch, var(--color-dark-on-surface) 12%, transparent); --button-surface: color-mix(in oklch, var(--color-dark-on-surface) 12%, transparent);
cursor: not-allowed; cursor: not-allowed;
} }
&.filled:not(:disabled) { &.filled:not(:disabled) {
@ -149,6 +147,15 @@
--button-text: var(--color-dark-on-info); --button-text: var(--color-dark-on-info);
--button-surface: var(--color-dark-info); --button-surface: var(--color-dark-info);
} }
&:hover {
color: var(--button-surface);
background-color: color-mix(in oklch, var(--button-surface) 8%, transparent);
box-shadow: var(--elevation-dark-1-ambient), var(--elevation-dark-1-umbra);
}
&:active {
color: var(--button-surface);
background-color: color-mix(in oklch, var(--button-surface) 18%, transparent);
}
} }
&.filled:disabled { &.filled:disabled {
--button-text: color-mix(in oklch, var(--color-dark-on-surface) 38%, transparent); --button-text: color-mix(in oklch, var(--color-dark-on-surface) 38%, transparent);
@ -181,6 +188,15 @@
--button-text: var(--color-dark-on-info-container); --button-text: var(--color-dark-on-info-container);
--button-surface: var(--color-dark-info-container); --button-surface: var(--color-dark-info-container);
} }
&:hover {
color: var(--button-surface);
background-color: color-mix(in oklch, var(--button-surface) 8%, transparent);
box-shadow: var(--elevation-dark-1-ambient), var(--elevation-dark-1-umbra);
}
&:active {
color: var(--button-surface);
background-color: color-mix(in oklch, var(--button-text) 18%, transparent);
}
} }
&.tonal:disabled { &.tonal:disabled {
--button-text: color-mix(in oklch, var(--color-dark-on-surface) 38%, transparent); --button-text: color-mix(in oklch, var(--color-dark-on-surface) 38%, transparent);
@ -190,13 +206,6 @@
border: 1px solid var(--button-outline); border: 1px solid var(--button-outline);
--button-text: var(--color-dark-primary); --button-text: var(--color-dark-primary);
--button-surface: transparent; --button-surface: transparent;
&:hover {
background-color: color-mix(in oklch, var(--button-text) 8%, transparent);
box-shadow: var(--elevation-dark-0);
}
&:active {
background-color: color-mix(in oklch, var(--button-text) 10%, transparent);
}
&.secondary { &.secondary {
--button-text: var(--color-dark-secondary); --button-text: var(--color-dark-secondary);
} }
@ -215,6 +224,13 @@
&.info { &.info {
--button-text: var(--color-dark-info); --button-text: var(--color-dark-info);
} }
&:hover {
background-color: color-mix(in oklch, var(--button-text) 8%, transparent);
box-shadow: var(--elevation-dark-0);
}
&:active {
background-color: color-mix(in oklch, var(--button-text) 18%, transparent);
}
} }
&.outlined:disabled { &.outlined:disabled {
border: 1px solid color-mix(in oklch, var(--color-dark-on-surface) 12%, transparent); border: 1px solid color-mix(in oklch, var(--color-dark-on-surface) 12%, transparent);
@ -223,13 +239,6 @@
&.text:not(:disabled) { &.text:not(:disabled) {
--button-text: var(--color-dark-primary); --button-text: var(--color-dark-primary);
--button-surface: transparent; --button-surface: transparent;
&:hover {
--button-surface: color-mix(in oklch, var(--button-text) 8%, transparent);
box-shadow: var(--elevation-dark-0);
}
&:active {
--button-surface: color-mix(in oklch, var(--button-text) 10%, transparent);
}
&.secondary { &.secondary {
--button-text: var(--color-dark-secondary); --button-text: var(--color-dark-secondary);
} }
@ -248,6 +257,13 @@
&.info { &.info {
--button-text: var(--color-dark-info); --button-text: var(--color-dark-info);
} }
&:hover {
--button-surface: color-mix(in oklch, var(--button-text) 8%, transparent);
box-shadow: var(--elevation-dark-0);
}
&:active {
--button-surface: color-mix(in oklch, var(--button-text) 18%, transparent);
}
} }
&.text:disabled { &.text:disabled {
--button-text: color-mix(in oklch, var(--color-dark-on-surface) 38%, transparent); --button-text: color-mix(in oklch, var(--color-dark-on-surface) 38%, transparent);
@ -256,13 +272,6 @@
&.icon:not(:disabled) { &.icon:not(:disabled) {
--button-text: var(--color-dark-on-surface-variant); --button-text: var(--color-dark-on-surface-variant);
--button-surface: transparent; --button-surface: transparent;
&:hover {
--button-surface: color-mix(in oklch, var(--button-text) 8%, transparent);
box-shadow: var(--elevation-dark-0);
}
&:active {
--button-surface: color-mix(in oklch, var(--button-text) 10%, transparent);
}
&.selected { &.selected {
--button-text: var(--color-dark-primary); --button-text: var(--color-dark-primary);
&.secondary { &.secondary {
@ -284,6 +293,13 @@
--button-text: var(--color-dark-info); --button-text: var(--color-dark-info);
} }
} }
&:hover {
--button-surface: color-mix(in oklch, var(--button-text) 8%, transparent);
box-shadow: var(--elevation-dark-0);
}
&:active {
--button-surface: color-mix(in oklch, var(--button-text) 18%, transparent);
}
} }
&.icon:disabled { &.icon:disabled {
--button-text: color-mix(in oklch, var(--color-dark-on-surface) 38%, transparent); --button-text: color-mix(in oklch, var(--color-dark-on-surface) 38%, transparent);
@ -328,13 +344,6 @@
&.tonal_icon:not(:disabled) { &.tonal_icon:not(:disabled) {
--button-text: var(--color-dark-on-primary-container); --button-text: var(--color-dark-on-primary-container);
--button-surface: var(--color-dark-primary-container); --button-surface: var(--color-dark-primary-container);
&:hover {
--button-surface: color-mix(in oklch, var(--button-text) 8%, transparent);
box-shadow: var(--elevation-dark-0);
}
&:active {
--button-surface: color-mix(in oklch, var(--button-text) 10%, transparent);
}
&.secondary { &.secondary {
--button-text: var(--color-dark-on-secondary-container); --button-text: var(--color-dark-on-secondary-container);
--button-surface: var(--color-dark-secondary-container); --button-surface: var(--color-dark-secondary-container);
@ -363,6 +372,13 @@
--button-text: var(--color-dark-on-surface-variant); --button-text: var(--color-dark-on-surface-variant);
--button-surface: var(--color-dark-surface-container-highest); --button-surface: var(--color-dark-surface-container-highest);
} }
&:hover {
--button-surface: color-mix(in oklch, var(--button-text) 8%, transparent);
box-shadow: var(--elevation-dark-0);
}
&:active {
--button-surface: color-mix(in oklch, var(--button-text) 18%, transparent);
}
} }
&.tonal_icon:disabled { &.tonal_icon:disabled {
--button-text: color-mix(in oklch, var(--color-dark-on-surface) 38%, transparent); --button-text: color-mix(in oklch, var(--color-dark-on-surface) 38%, transparent);
@ -372,16 +388,16 @@
--button-text: var(--color-dark-on-surface-variant); --button-text: var(--color-dark-on-surface-variant);
--button-surface: transparent; --button-surface: transparent;
border: 1px solid var(--button-outline); border: 1px solid var(--button-outline);
&.selected {
--button-text: var(--color-dark-inverse-on-surface);
--button-surface: var(--color-dark-inverse-surface);
}
&:hover { &:hover {
--button-surface: color-mix(in oklch, var(--button-text) 8%, transparent); --button-surface: color-mix(in oklch, var(--button-text) 8%, transparent);
box-shadow: var(--elevation-dark-0); box-shadow: var(--elevation-dark-0);
} }
&:active { &:active {
--button-surface: color-mix(in oklch, var(--button-text) 10%, transparent); --button-surface: color-mix(in oklch, var(--button-text) 18%, transparent);
}
&.selected {
--button-text: var(--color-dark-inverse-on-surface);
--button-surface: var(--color-dark-inverse-surface);
} }
} }
&.outlined_icon:disabled { &.outlined_icon:disabled {