67 lines
1.3 KiB
CSS
67 lines
1.3 KiB
CSS
:root {
|
|
font-family: "Geist", sans-serif;
|
|
--surface-1: rgb(255, 255, 255);
|
|
}
|
|
|
|
.field_control {
|
|
position: absolute;
|
|
right: 0;
|
|
width: 22px;
|
|
height: 50%;
|
|
background: transparent;
|
|
border: none;
|
|
}
|
|
|
|
.field_control.is-increase {
|
|
top: 0;
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
.field_control.is-decrease {
|
|
bottom: 0;
|
|
}
|
|
|
|
.field_control:before {
|
|
position: absolute;
|
|
top: 1px;
|
|
left: 50%;
|
|
width: 12px;
|
|
height: 12px;
|
|
margin-left: -6px;
|
|
content: "";
|
|
background: var(--surface-1);
|
|
border-radius: 0 0 6px 6px;
|
|
}
|
|
|
|
:hover:is(.field_control:before) {
|
|
background: var(--surface-ui-accent);
|
|
}
|
|
|
|
.field_control:after {
|
|
position: absolute;
|
|
top: 4px;
|
|
left: 50%;
|
|
width: 6px;
|
|
height: 6px;
|
|
margin-left: -3px;
|
|
content: "";
|
|
background: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20fill='none'%20viewBox='0%200%206%206'%3e%3cpath%20fill='%23000'%20d='M.707%201.825%202.62%204.057a.5.5%200%200%200%20.76%200l1.913-2.232A.5.5%200%200%200%204.913%201H1.087a.5.5%200%200%200-.38.825Z'/%3e%3c/svg%3e");
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
.field_control:after {
|
|
filter: invert(1);
|
|
}
|
|
:root {
|
|
--surface-1: rgb(44, 42, 48);
|
|
}
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "Martian Mono";
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
font-display: swap;
|
|
src: url("/MartianMono.woff2") format("woff2");
|
|
}
|