225 lines
6.1 KiB
CSS
225 lines
6.1 KiB
CSS
:root,
|
|
.light,
|
|
.default,
|
|
[data-theme="light"],
|
|
[data-theme="default"] {
|
|
color-scheme: light;
|
|
--white: #fff;
|
|
--black: #000;
|
|
--snow: #fcfcfc;
|
|
--eclipse: #18181b;
|
|
--border-width: 1px;
|
|
--field-border-width: 0px;
|
|
--disabled-opacity: 0.5;
|
|
--ring-offset-width: 2px;
|
|
--cursor-interactive: pointer;
|
|
--cursor-disabled: not-allowed;
|
|
--scrollbar-track: transparent;
|
|
--scrollbar-gutter: auto;
|
|
--scrollbar-width: thin;
|
|
--scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
|
|
--default: #ebebec;
|
|
--default-foreground: var(--eclipse);
|
|
--accent: #4c8ac8;
|
|
--accent-foreground: var(--snow);
|
|
--field-background: var(--white);
|
|
--field-foreground: #18181b;
|
|
--field-placeholder: var(--muted);
|
|
--field-border: transparent;
|
|
--success: #17c964;
|
|
--success-foreground: var(--eclipse);
|
|
--warning: #f5a524;
|
|
--warning-foreground: var(--eclipse);
|
|
--danger: #ff383c;
|
|
--danger-foreground: var(--snow);
|
|
--segment: var(--white);
|
|
--segment-foreground: var(--eclipse);
|
|
--separator: #e4e4e7;
|
|
--focus: var(--accent);
|
|
--link: var(--foreground);
|
|
--backdrop: #00000080;
|
|
--surface-hover: var(--surface);
|
|
--border: #28282c;
|
|
--text-xs: 10.5px;
|
|
--text-sm: 12px;
|
|
--text-md: 14px;
|
|
--text-lg: 16px;
|
|
--text-xlg: 20px;
|
|
--primary-color: #000000;
|
|
--main-padding: 6px;
|
|
--spacing: 2px;
|
|
--radius: 2px;
|
|
--button-border-color: var(--border);
|
|
--button-border-size: 1px;
|
|
--button-bg: rgb(from var(--accent) r g b);
|
|
--button-hover-bg: rgb(from var(--button-bg) r g b / 0.8);
|
|
--button-active-bg: rgb(from var(--button-bg) r g b / 0.65);
|
|
--button-text-color: var(--default);
|
|
--button-font-size: var(--text-md);
|
|
--tab-bg-color: var(--segment);
|
|
}
|
|
.dark,
|
|
[data-theme="dark"] {
|
|
--scrollbar-track: transparent;
|
|
--scrollbar-gutter: auto;
|
|
--scrollbar-width: thin;
|
|
--scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
|
|
--accent: #a0cfff;
|
|
--default: #27272a;
|
|
--default-foreground: var(--snow);
|
|
--field-background: #18181b;
|
|
--field-foreground: var(--foreground);
|
|
--warning: #f7b750;
|
|
--warning-foreground: var(--eclipse);
|
|
--danger: #db3b3e;
|
|
--danger-foreground: var(--snow);
|
|
--segment: #46464c;
|
|
--segment-foreground: var(--foreground);
|
|
--border: #dedee0;
|
|
--separator: #212124;
|
|
--focus: var(--accent);
|
|
--link: var(--foreground);
|
|
--backdrop: #0009;
|
|
--surface-shadow: 0 0 0 0 transparent inset;
|
|
--overlay-shadow: 0 0 1px 0 #ffffff4d inset;
|
|
--field-shadow: 0 0 0 0 transparent inset;
|
|
--surface-hover: var(--surface);
|
|
--button-border-color: var(--border);
|
|
--button-border-size: 1px;
|
|
--button-bg: rgb(from var(--accent) r g b);
|
|
--button-hover-bg: rgb(from var(--button-bg) r g b / 0.8);
|
|
--button-active-bg: rgb(from var(--button-bg) r g b / 0.65);
|
|
--button-text-color: var(--default);
|
|
--button-font-size: var(--text-md);
|
|
--tab-bg-color: var(--snow);
|
|
}
|
|
.btn {
|
|
box-sizing: border-box;
|
|
}
|
|
.btn::before,
|
|
.btn::after {
|
|
box-sizing: border-box;
|
|
}
|
|
.btn {
|
|
font-family: Arial, Helvetica, sans-serif;
|
|
margin: 0;
|
|
margin-right: calc(var(--spacing) * 4);
|
|
margin-bottom: calc(var(--spacing) * 4);
|
|
}
|
|
@media (min-width: 900px) {
|
|
.btn:last-child {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
.btn {
|
|
text-align: center;
|
|
vertical-align: middle;
|
|
font-size: var(--button-font-size);
|
|
text-decoration: none;
|
|
color: var(--button-text-color);
|
|
isolation: isolate;
|
|
min-height: calc(var(--spacing) * 16.5);
|
|
transform-origin: 50%;
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: calc(var(--spacing) * 3);
|
|
border: solid var(--button-border-size) rgba(0, 0, 0, 0);
|
|
border-radius: calc(var(--radius) * 3);
|
|
width: -moz-fit-content;
|
|
width: fit-content;
|
|
padding-inline: calc(var(--spacing) * 4);
|
|
line-height: normal;
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
user-select: none;
|
|
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
|
outline-style: none;
|
|
display: inline-flex;
|
|
position: relative;
|
|
cursor: pointer;
|
|
background: #4c8ac8;
|
|
background: var(--button-bg);
|
|
transition:
|
|
background-color 0.2s ease,
|
|
border-color 0.2s ease,
|
|
color 0.2s ease,
|
|
opacity 0.2s ease;
|
|
}
|
|
.btn:hover:not(.btn--disabled) {
|
|
background: var(--button-hover-bg);
|
|
}
|
|
.btn:active:not(.btn--disabled) {
|
|
background: var(--button-active-bg);
|
|
transform: scale(0.98);
|
|
}
|
|
.btn:focus-visible {
|
|
outline: 2px solid var(--focus);
|
|
outline-offset: 2px;
|
|
}
|
|
.btn img,
|
|
.btn .btn__icon {
|
|
width: 1.25em;
|
|
height: 1.25em;
|
|
flex-shrink: 0;
|
|
filter: invert(100%) saturate(1352%) brightness(119%) contrast(119%);
|
|
}
|
|
.btn--xsmall {
|
|
--button-font-size: var(--text-xs);
|
|
min-height: calc(var(--spacing) * 11);
|
|
padding-inline: calc(var(--spacing) * 2.5);
|
|
}
|
|
.btn--small {
|
|
--button-font-size: var(--text-sm);
|
|
min-height: calc(var(--spacing) * 13);
|
|
padding-inline: calc(var(--spacing) * 3);
|
|
}
|
|
.btn--large {
|
|
--button-font-size: var(--text-lg);
|
|
min-height: calc(var(--spacing) * 22);
|
|
padding-inline: calc(var(--spacing) * 6);
|
|
}
|
|
.btn--full {
|
|
width: 100%;
|
|
}
|
|
.btn--secondary {
|
|
--button-bg: color-mix(in srgb, var(--default) 85%, var(--accent));
|
|
--button-hover-bg: color-mix(in srgb, var(--default) 85%, transparent);
|
|
--button-active-bg: color-mix(in srgb, var(--default) 70%, transparent);
|
|
--button-text-color: var(--default-foreground);
|
|
}
|
|
.btn--outline {
|
|
--button-bg: transparent;
|
|
--button-hover-bg: transparent;
|
|
--button-active-bg: transparent;
|
|
--button-text-color: var(--default-foreground);
|
|
border-color: var(--button-border-color);
|
|
}
|
|
.btn--outline:hover:not(.btn--disabled) {
|
|
border-color: var(--accent);
|
|
color: var(--accent);
|
|
}
|
|
.btn--outline:active:not(.btn--disabled) {
|
|
opacity: 0.7;
|
|
}
|
|
.btn--text {
|
|
--button-bg: transparent;
|
|
--button-hover-bg: transparent;
|
|
--button-active-bg: transparent;
|
|
--button-text-color: var(--default-foreground);
|
|
border-color: rgba(0, 0, 0, 0);
|
|
}
|
|
.btn--text:hover:not(.btn--disabled) {
|
|
text-decoration: underline;
|
|
}
|
|
.btn--alert {
|
|
--button-bg: var(--danger);
|
|
--button-hover-bg: color-mix(in srgb, var(--danger) 85%, #000);
|
|
--button-active-bg: color-mix(in srgb, var(--danger) 70%, #000);
|
|
--button-text-color: var(--danger-foreground);
|
|
}
|
|
.btn--disabled {
|
|
opacity: var(--disabled-opacity);
|
|
cursor: not-allowed;
|
|
pointer-events: none;
|
|
} /*# sourceMappingURL=button.css.map */
|