Theaninova/DeviceManager
1
0
Fork 0
mirror of https://github.com/CharaChorder/DeviceManager.git synced 2026-04-20 05:08:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor: swap stylelint css order plugin for prettier plugin

Browse Source
This commit is contained in:
Thea Schöbl
2025-07-31 13:41:39 +02:00
parent 048dee0a6d
commit 0b2695a380
64 changed files with 649 additions and 635 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/lib/charrecorder/CharRecorder.svelte
View File

@@ -113,15 +113,15 @@
position: absolute;
top: 0;
left: 0;
font-family: inherit;
font-size: inherit;
color: inherit;
font-size: inherit;
font-family: inherit;
user-select: none;
}
svg > :global(text) {
font-family: inherit;
font-size: inherit;
font-family: inherit;
fill: currentColor;
dominant-baseline: middle;
}

14
src/lib/charrecorder/ChordHud.svelte
View File

@@ -83,24 +83,24 @@
<style>
section {
display: grid;
position: relative;
margin: 1em;
margin-bottom: 0;
display: grid;
height: 3em;
font-size: 2em;
}
.rating {
font-weight: bold;
font-style: italic;
font-weight: bold;
text-transform: uppercase;
}
.tile {
border-radius: 0.1em;
width: 100%;
height: 0.2em;
border-radius: 0.1em;
}
kbd {
@@ -112,19 +112,19 @@
}
.chord {
will-change: transform, opacity, scale;
display: flex;
position: absolute;
top: 0;
left: 50%;
display: flex;
flex-direction: column;
margin-inline-end: 1em;
padding-inline: 0.1em;
justify-content: center;
align-items: center;
transition:
opacity 0.3s ease,
translate 0.3s ease,
scale 0.3s ease;
will-change: transform, opacity, scale;
margin-inline-end: 1em;
padding-inline: 0.1em;
}
</style>

6
src/lib/chat/MatrixRoomMembers.svelte
View File

@@ -37,16 +37,16 @@
<style lang="scss">
.avatar {
flex-shrink: 0;
border-radius: 50%;
width: 32px;
height: 32px;
flex-shrink: 0;
}
.avatar-placeholder {
display: flex;
align-items: center;
justify-content: center;
align-items: center;
font-size: 24px;
}
@@ -61,8 +61,8 @@
flex-direction: column;
gap: 0.5rem;
padding: 8px;
overflow-y: auto;
height: 100%;
overflow-y: auto;
}
span {

12
src/lib/chat/MatrixRooms.svelte
View File

@@ -53,17 +53,17 @@
.room {
display: flex;
align-items: center;
justify-content: flex-start;
align-items: center;
gap: 0.5rem;
cursor: pointer;
padding-block: 2px;
min-height: 0;
height: unset;
padding-inline: 16px;
padding-block: 4px;
border-radius: 8px;
padding-inline: 16px;
padding-block: 2px;
padding-block: 4px;
width: 100%;
height: unset;
min-height: 0;
&.active {
background: var(--md-sys-color-primary-container);

20
src/lib/chat/MatrixTimeline.svelte
View File

@@ -178,17 +178,17 @@
$border-radius: 16px;
.input {
border: 1px solid var(--md-sys-color-outline);
flex-grow: 1;
cursor: text;
border: 1px solid var(--md-sys-color-outline);
border-radius: $border-radius;
padding: 0.5em;
font-size: 1rem;
border-radius: $border-radius;
text-wrap: wrap;
white-space: pre-wrap;
overflow-wrap: break-word;
word-break: break-word;
overflow-wrap: break-word;
&:focus-visible {
outline: none;
@@ -197,9 +197,9 @@
.input-box {
display: flex;
flex-shrink: 0;
gap: 4px;
padding-block: 8px;
flex-shrink: 0;
width: 100%;
}
@@ -209,23 +209,23 @@
}
.timeline {
contain: content;
height: auto;
display: flex;
flex-direction: column-reverse;
overflow-y: scroll;
overflow-x: hidden;
flex-grow: 1;
flex-direction: column-reverse;
contain: content;
width: 100%;
height: auto;
overflow-x: hidden;
overflow-y: scroll;
}
section {
display: flex;
flex-direction: column;
overflow: hidden;
justify-content: flex-end;
width: 100%;
height: 100%;
overflow: hidden;
}
</style>

50
src/lib/chat/events/MatrixEvent.svelte
View File

@@ -255,21 +255,21 @@
}
.toolbar {
display: flex;
position: absolute;
top: -26px;
right: 0;
background: var(--md-sys-color-secondary-container);
color: var(--md-sys-color-on-secondary-container);
padding: 4px;
border-radius: 4px;
display: flex;
z-index: 100;
border-radius: 4px;
background: var(--md-sys-color-secondary-container);
padding: 4px;
color: var(--md-sys-color-on-secondary-container);
a,
button {
font-size: 16px;
width: 24px;
height: 24px;
font-size: 16px;
}
}
@@ -289,10 +289,10 @@
}
.dot {
animation: bounce 1s infinite;
border-radius: 50%;
width: 6px;
height: 6px;
border-radius: 50%;
animation: bounce 1s infinite;
}
.sender,
@@ -302,10 +302,10 @@
.avatar {
grid-area: avatar;
translate: 0 2px;
border-radius: 50%;
width: 32px;
height: 32px;
border-radius: 50%;
translate: 0 2px;
}
div.avatar {
@@ -322,18 +322,18 @@
}
.reactions {
grid-area: reactions;
margin-top: 2px;
display: flex;
grid-area: reactions;
gap: 4px;
margin-top: 2px;
}
.reaction {
border: 1px solid var(--md-sys-color-outline);
padding: 6px;
border-radius: 6px;
height: 24px;
display: flex;
border: 1px solid var(--md-sys-color-outline);
border-radius: 6px;
padding: 6px;
height: 24px;
font-size: 12px;
> .count {
@@ -344,16 +344,16 @@
.event {
display: grid;
position: relative;
padding-inline: 0.5em;
margin-inline: 0.5em;
padding-block: 0.25em;
border-radius: 4px;
grid-template-columns: 32px 1fr auto;
grid-template-areas:
"avatar sender date"
"avatar content content"
"none reactions reactions";
grid-template-columns: 32px 1fr auto;
margin-inline: 0.5em;
border-radius: 4px;
padding-inline: 0.5em;
padding-block: 0.25em;
}
.content {
@@ -370,12 +370,12 @@
.backdrop {
position: absolute;
inset: 0;
z-index: -1;
opacity: 0.25;
background: var(--md-sys-color-surface-variant);
z-index: -1;
inset: 0;
border-radius: 8px;
background: var(--md-sys-color-surface-variant);
}
</style>

2
src/lib/chat/events/MatrixMessageEvent.svelte
View File

@@ -39,9 +39,9 @@
}
img {
border-radius: 8px;
max-width: 100%;
max-height: 16em;
border-radius: 8px;
}
.content {

38
src/lib/components/Action.svelte
View File

@@ -20,17 +20,17 @@
</script>
{#snippet popoverSnippet()}
<div bind:this={popover} popover="hint">
&lt;{info.id ?? `0x${info.code.toString(16)}`}&gt;
{#if info.title}
{info.title}
{/if}
{#if info.variant === "left"}
(Left)
{:else if info.variant === "right"}
(Right)
{/if}
</div>
<div bind:this={popover} popover="hint">
&lt;{info.id ?? `0x${info.code.toString(16)}`}&gt;
{#if info.title}
{info.title}
{/if}
{#if info.variant === "left"}
(Left)
{:else if info.variant === "right"}
(Right)
{/if}
</div>
{/snippet}
{#if display === "keys"}
@@ -50,15 +50,17 @@
{:else if display === "inline-keys"}
{#if !info.icon && dynamicMapping?.length === 1}
<span
{@attach tooltip(popover)}
{@attach tooltip(popover)}
class:left={info.variant === "left"}
class:right={info.variant === "right"}>{dynamicMapping}{@render popoverSnippet()}</span
class:right={info.variant === "right"}
>{dynamicMapping}{@render popoverSnippet()}</span
>
{:else if !info.icon && info.id?.length === 1}
<span
{@attach tooltip(popover)}
{@attach tooltip(popover)}
class:left={info.variant === "left"}
class:right={info.variant === "right"}>{info.id}{@render popoverSnippet()}</span
class:right={info.variant === "right"}
>{info.id}{@render popoverSnippet()}</span
>
{:else}
<kbd
@@ -66,7 +68,7 @@
class:left={info.variant === "left"}
class:right={info.variant === "right"}
class:icon={!!info.icon}
{@attach tooltip(popover)}
{@attach tooltip(popover)}
>
{dynamicMapping ??
info.icon ??
@@ -79,9 +81,9 @@
<style lang="scss">
kbd:not(.inline-kbd) {
height: 24px;
padding-block: auto;
transition: color 250ms ease;
padding-block: auto;
height: 24px;
}
.left {

22
src/lib/components/ActionListItem.svelte
View File

@@ -48,33 +48,33 @@
<style lang="scss">
button {
display: flex;
gap: 4px;
align-items: center;
gap: 4px;
margin: 0;
border-radius: 8px;
padding: 8px;
width: 100%;
height: auto;
margin: 0;
padding: 8px;
font-family: "Noto Sans Mono", monospace;
border-radius: 8px;
@media not (forced-colors: active) {
color: inherit;
background: transparent;
border: none;
background: transparent;
color: inherit;
&:focus-visible {
color: var(--md-sys-color-on-surface-variant);
background: var(--md-sys-color-surface-variant);
outline: none;
background: var(--md-sys-color-surface-variant);
color: var(--md-sys-color-on-surface-variant);
}
}
@media (forced-colors: active) {
border: 1px solid ButtonBorder;
margin-block: 4px;
border: 1px solid ButtonBorder;
&:hover {
color: ActiveText;
@@ -86,8 +86,8 @@
display: flex;
flex: 1;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
align-items: flex-start;
text-align: start;
}

4
src/lib/components/AnimatedNumber.svelte
View File

@@ -29,15 +29,15 @@
<style lang="scss">
.digits {
position: relative;
display: inline-block;
position: relative;
transition: width 500ms ease;
}
.digit-wrapper {
display: inline-grid;
height: 1em;
width: 1ch;
height: 1em;
}
.digit {

4
src/lib/components/PwaStatus.svelte
View File

@@ -16,8 +16,8 @@
<style lang="scss">
button {
cursor: pointer;
color: var(--md-sys-color-on-background);
background: transparent;
border: none;
background: transparent;
color: var(--md-sys-color-on-background);
}
</style>

62
src/lib/components/Terminal.svelte
View File

@@ -33,63 +33,61 @@
<style lang="scss">
form {
display: flex;
position: relative;
flex-direction: column;
contain: strict;
overflow: hidden;
display: flex;
flex-direction: column;
border-radius: 16px;
width: 100%;
height: 100%;
overflow: hidden;
color: var(--md-sys-color-on-secondary);
font-size: 0.75rem;
font-family: "Noto Sans Mono", monospace;
font-size: 0.75rem;
color: var(--md-sys-color-on-secondary);
border-radius: 16px;
}
fieldset::before {
content: "$";
position: absolute;
bottom: 8px;
left: 8px;
content: "$";
font-weight: 900;
}
input {
width: 100%;
appearance: none;
margin-block-start: -16px;
border: none;
background: var(--md-sys-color-secondary);
padding: 8px;
padding-block-start: 24px;
padding-inline-start: calc(8px + 1.5ch);
padding-block-start: 24px;
width: 100%;
color: var(--md-sys-color-on-secondary);
font-weight: 600;
font-family: "Noto Sans Mono", monospace;
font-weight: 600;
color: var(--md-sys-color-on-secondary);
appearance: none;
background: var(--md-sys-color-secondary);
border: none;
}
.io {
--scrollbar-color: var(--md-sys-color-secondary);
flex: 1;
z-index: 1;
border-radius: 0 0 16px 16px;
overflow-y: auto;
flex: 1;
background: var(--md-sys-color-secondary-container);
padding: 12px;
color: var(--md-sys-color-on-secondary-container);
overflow-y: auto;
background: var(--md-sys-color-secondary-container);
border-radius: 0 0 16px 16px;
color: var(--md-sys-color-on-secondary-container);
}
:focus-visible {
@@ -99,10 +97,10 @@
fieldset {
all: unset;
position: relative;
display: block;
position: relative;
opacity: 0.8;
transition: opacity 250ms ease;
@@ -113,16 +111,16 @@
}
.anchor {
overflow-anchor: auto;
height: 1px;
overflow-anchor: auto;
}
code,
samp,
p {
display: block;
overflow-anchor: none;
margin-block: 0.15rem;
overflow-anchor: none;
}
p {
@@ -130,24 +128,24 @@
justify-content: center;
margin-block-end: 1rem;
border-radius: 8px;
background: var(--md-sys-color-secondary);
padding: 0.25rem;
color: var(--md-sys-color-on-secondary);
background: var(--md-sys-color-secondary);
border-radius: 8px;
}
code::before {
content: "> ";
margin-block-end: 0.25rem;
font-weight: 900;
content: "> ";
color: var(--md-sys-color-primary);
font-weight: 900;
}
::selection {
color: var(--md-sys-color-background);
background: var(--md-sys-color-on-background);
color: var(--md-sys-color-background);
}
@keyframes blink {

2
src/lib/components/Tooltip.svelte
View File

@@ -20,8 +20,8 @@
:global(kbd.icon) {
display: inline-flex;
font-size: inherit;
translate: 0 0.2em;
font-size: inherit;
}
}
</style>

93
src/lib/components/layout/ActionSelector.svelte
View File

@@ -189,18 +189,17 @@
border: none;
label {
height: unset;
padding-block: 2px;
border: 1px solid currentcolor;
border-radius: 6px;
padding-inline: 4px;
padding-block: 2px;
height: unset;
font-size: 14px;
border: 1px solid currentcolor;
border-radius: 6px;
&:has(:checked) {
color: var(--md-sys-color-on-secondary);
background: var(--md-sys-color-secondary);
color: var(--md-sys-color-on-secondary);
}
input {
@@ -211,34 +210,33 @@
dialog {
display: flex;
align-items: center;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
border: none;
background: rgba(0 0 0 / 60%);
border: none;
width: 100%;
height: 100%;
}
aside {
pointer-events: none;
opacity: 0.4;
margin: 8px;
opacity: 0.4;
border: 1px dashed var(--md-sys-color-outline);
border-radius: 8px;
pointer-events: none;
> h3 {
width: fit-content;
margin-inline-start: 16px;
margin-block-start: -13px;
margin-block-end: 0;
margin-inline-start: 16px;
padding-inline: 8px;
background: var(--md-sys-color-background);
padding-inline: 8px;
width: fit-content;
}
@media (prefers-contrast: more) {
@@ -253,26 +251,26 @@
.search-row {
display: flex;
gap: 4px;
align-items: center;
gap: 4px;
margin-inline: 16px;
}
.content {
position: relative;
transform-origin: top left;
overflow: hidden;
display: flex;
position: relative;
flex-direction: column;
transform-origin: top left;
border-radius: 16px;
background: var(--md-sys-color-background);
width: calc(min(30cm, 90%));
height: calc(min(100% - 128px, 90%));
color: var(--md-sys-color-on-background);
overflow: hidden;
background: var(--md-sys-color-background);
border-radius: 16px;
color: var(--md-sys-color-on-background);
@media (forced-colors: active) {
border: 1px solid CanvasText;
@@ -280,39 +278,38 @@
}
input[type="search"] {
width: 100%;
height: 64px;
transition: all 250ms ease;
margin-block-end: 8px;
padding-inline: 16px;
font-family: inherit;
font-size: 16px;
color: currentcolor;
background: none;
border: none;
border-bottom: 1px solid var(--md-sys-color-surface-variant);
transition: all 250ms ease;
background: none;
padding-inline: 16px;
width: 100%;
height: 64px;
color: currentcolor;
font-size: 16px;
font-family: inherit;
&:focus {
border-bottom: 1px solid var(--md-sys-color-primary);
outline: none;
border-bottom: 1px solid var(--md-sys-color-primary);
}
}
ul {
--scrollbar-color: var(--md-sys-color-surface-variant);
scrollbar-gutter: both-edges stable;
overflow-y: auto;
box-sizing: border-box;
height: 100%;
margin: 0;
padding: 0;
padding-inline: 4px;
height: 100%;
overflow-y: auto;
scrollbar-gutter: both-edges stable;
}
li {
@@ -322,27 +319,27 @@
.exact {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
align-items: center;
margin-block-start: 8px;
border: 1px solid var(--md-sys-color-primary);
border-radius: 8px;
width: 100%;
> i {
display: flex;
gap: 4px;
align-items: center;
justify-content: center;
align-items: center;
gap: 4px;
border-radius: 0 0 8px 8px;
background: var(--md-sys-color-primary);
padding-inline: 6px;
color: var(--md-sys-color-on-primary);
background: var(--md-sys-color-primary);
border-radius: 0 0 8px 8px;
}
@media (forced-colors: active) {

2
src/lib/components/layout/GenericLayout.svelte
View File

@@ -219,9 +219,9 @@
<style lang="scss">
svg {
overflow: visible;
grid-area: "d";
width: calc(min(100%, 35cm));
max-height: calc(100% - 170px);
overflow: visible;
}
</style>

6
src/lib/components/layout/KeyText.svelte
View File

@@ -83,15 +83,15 @@
$transition: 200ms;
text {
will-change: translate, scale;
user-select: none;
transform-origin: center;
transform-box: fill-box;
transform-origin: center;
transition:
fill #{$focus-transition} ease,
opacity #{$transition} ease,
translate #{$transition} ease,
scale #{$transition} ease;
will-change: translate, scale;
user-select: none;
@media (prefers-contrast: more) {
--inactive-opacity: 0.8;

8
src/lib/components/layout/KeyboardKey.svelte
View File

@@ -113,14 +113,14 @@
$transition: 200ms;
rect {
transform-origin: center;
transform-box: fill-box;
transform-origin: center;
}
path,
g {
transform-origin: top left;
transform-box: fill-box;
transform-origin: top left;
}
path,
@@ -138,15 +138,15 @@
g.faded,
g:hover {
cursor: default;
opacity: 0.6;
transition: opacity #{$transition} ease;
cursor: default;
}
g.highlight,
g:focus-within {
color: var(--md-sys-color-primary);
outline: none;
color: var(--md-sys-color-primary);
> path,
> rect {

17
src/lib/components/layout/Layout.svelte
View File

@@ -76,8 +76,8 @@
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
@@ -85,24 +85,23 @@
}
fieldset {
position: relative;
display: flex;
align-items: center;
position: relative;
justify-content: center;
padding: 8px;
align-items: center;
border: none;
padding: 8px;
}
.layers {
display: flex;
align-items: center;
justify-content: center;
margin-inline: auto;
align-items: center;
gap: 2px;
margin-inline: auto;
}
</style>

4
src/lib/dialogs/ConnectionFailed.svelte
View File

@@ -83,9 +83,9 @@
<style lang="scss">
h1 {
color: var(--md-sys-color-error);
font-size: 2em;
text-align: center;
color: var(--md-sys-color-error);
}
.buttons {
@@ -100,7 +100,7 @@
a {
display: inline;
color: var(--md-sys-color-primary);
padding: 0;
color: var(--md-sys-color-primary);
}
</style>

10
src/lib/dialogs/Dialog.svelte
View File

@@ -16,15 +16,15 @@
<style lang="scss">
dialog {
box-shadow: 0 0 48px rgba(0 0 0 / 60%);
border: none;
border-radius: 38px;
background: var(--md-sys-color-background);
min-width: 300px;
max-width: 512px;
color: var(--md-sys-color-on-background);
background: var(--md-sys-color-background);
border: none;
border-radius: 38px;
box-shadow: 0 0 48px rgba(0 0 0 / 60%);
}
dialog::backdrop {

24
src/lib/fonts/material-symbols-rounded.scss
View File

@@ -1,33 +1,33 @@
@font-face {
font-family: "Material Symbols Rounded";
font-weight: 100 700;
font-style: normal;
font-weight: 100 700;
src: url("$lib/assets/icons.min.woff2") format("woff2");
font-family: "Material Symbols Rounded";
}
.icon {
user-select: none;
direction: ltr;
display: inline-block;
font-style: normal;
font-weight: normal;
font-size: 24px;
line-height: 1;
/* stylelint-disable-next-line */
font-family: "Material Symbols Rounded";
font-size: 24px;
font-feature-settings: "liga";
font-variation-settings:
"FILL" var(--icon-fill, 0),
"wght" var(--icon-weigth, 400),
"GRAD" var(--icon-grade, 0);
font-weight: normal;
font-style: normal;
line-height: 1;
text-transform: none;
font-feature-settings: "liga";
letter-spacing: normal;
direction: ltr;
user-select: none;
text-transform: none;
word-wrap: normal;
white-space: nowrap;
transition: font-variation-settings 250ms ease;
white-space: nowrap;
-moz-osx-font-smoothing: grayscale;
}

12
src/lib/fonts/noto-sans-mono.scss
View File

@@ -66,13 +66,13 @@
/* noto-sans-mono-latin-ext-wght-normal */
@font-face {
font-family: "Noto Sans Mono Variable";
font-weight: 100 900;
font-style: normal;
font-display: swap;
font-weight: 100 900;
font-stretch: 62.5% 100%;
src: url("@fontsource-variable/noto-sans-mono/files/noto-sans-mono-latin-ext-wght-normal.woff2")
format("woff2-variations");
font-family: "Noto Sans Mono Variable";
font-display: swap;
unicode-range:
U+0100-02AF, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329,
U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F,
@@ -81,13 +81,13 @@
/* noto-sans-mono-latin-wght-normal */
@font-face {
font-family: "Noto Sans Mono";
font-weight: 100 900;
font-style: normal;
font-display: swap;
font-weight: 100 900;
font-stretch: 62.5% 100%;
src: url("@fontsource-variable/noto-sans-mono/files/noto-sans-mono-latin-wght-normal.woff2")
format("woff2-variations");
font-family: "Noto Sans Mono";
font-display: swap;
unicode-range:
U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+2000-206F, U+2074,

12
src/lib/setting.ts
View File

@@ -62,22 +62,22 @@ function hsvToRgb(h: number, s: number, v: number): [number, number, number] {
switch (i % 6) {
case 0:
(r = v), (g = t), (b = p);
((r = v), (g = t), (b = p));
break;
case 1:
(r = q), (g = v), (b = p);
((r = q), (g = v), (b = p));
break;
case 2:
(r = p), (g = v), (b = t);
((r = p), (g = v), (b = t));
break;
case 3:
(r = p), (g = q), (b = v);
((r = p), (g = q), (b = v));
break;
case 4:
(r = t), (g = p), (b = v);
((r = t), (g = p), (b = v));
break;
case 5:
(r = v), (g = p), (b = q);
((r = v), (g = p), (b = q));
break;
}

18
src/lib/style/_kbd.scss
View File

@@ -1,18 +1,18 @@
kbd {
display: inline-flex;
align-items: center;
justify-content: center;
height: 20px;
align-items: center;
margin-block: 6px;
padding: 4px;
font-size: 14px;
font-weight: normal;
color: currentcolor;
border: 1px solid currentcolor;
border-radius: 4px;
padding: 4px;
height: 20px;
color: currentcolor;
font-weight: normal;
font-size: 14px;
&.icon {
padding: 2px;
@@ -21,8 +21,8 @@ kbd {
&:has(> kbd) {
gap: 4px;
padding: 0;
border: none;
padding: 0;
}
> kbd {

2
src/lib/style/_reset.scss
View File

@@ -1,4 +1,4 @@
* {
box-sizing: border-box;
appearance: none;
box-sizing: border-box;
}

4
src/lib/style/elements/_h1.scss
View File

@@ -1,6 +1,6 @@
h1 {
margin-block-start: 0;
font-size: 4rem;
font-weight: 700;
color: var(--md-sys-color-secondary);
font-weight: 700;
font-size: 4rem;
}

24
src/lib/style/elements/_popover.scss
View File

@@ -3,20 +3,8 @@ $translate: translateY(8px);
[popover] {
position: absolute;
inset: unset;
margin: 0;
padding: 8px;
border: 1px solid var(--md-sys-color-outline);
border-radius: 8px;
font-family: "Noto Sans Mono", monospace;
font-size: initial;
font-weight: initial;
color: var(--md-sys-color-on-surface);
opacity: 0;
background: var(--md-sys-color-surface);
transition:
transform $animation-duration ease,
@@ -24,6 +12,18 @@ $translate: translateY(8px);
overlay $animation-duration allow-discrete,
display $animation-duration allow-discrete;
margin: 0;
inset: unset;
border: 1px solid var(--md-sys-color-outline);
border-radius: 8px;
background: var(--md-sys-color-surface);
padding: 8px;
color: var(--md-sys-color-on-surface);
font-weight: initial;
font-size: initial;
font-family: "Noto Sans Mono", monospace;
position-area: bottom span-all;
position-try-fallbacks:
top span-all,

33
src/lib/style/form/_button.scss
View File

@@ -5,31 +5,30 @@ a {
a,
label:has(input),
button {
cursor: pointer;
display: flex;
gap: 4px;
align-items: center;
justify-content: center;
align-items: center;
gap: 4px;
transition: all 250ms ease;
cursor: pointer;
border-radius: 32px;
padding-inline: 16px;
padding-block: 8px;
width: max-content;
height: 48px;
padding-block: 8px;
padding-inline: 16px;
font-weight: 600;
font-family: inherit;
font-weight: 600;
border-radius: 32px;
transition: all 250ms ease;
@media not (forced-colors: active) {
color: currentcolor;
background: transparent;
border: none;
background: transparent;
color: currentcolor;
&.primary {
color: var(--md-sys-color-on-primary);
background: var(--md-sys-color-primary);
color: var(--md-sys-color-on-primary);
}
}
@@ -40,17 +39,17 @@ button {
&.icon {
display: inline-flex;
border-radius: 50%;
padding-inline: 0;
padding-block: 0;
aspect-ratio: 1;
padding-block: 0;
padding-inline: 0;
font-size: 24px;
border-radius: 50%;
@media (forced-colors: active) {
padding: 2px;
margin: 2px;
padding: 2px;
}
}
@@ -88,8 +87,8 @@ button {
}
&.active,
&:active {
color: SelectedItemText;
background: SelectedItem;
color: SelectedItemText;
}
}
}

21
src/lib/style/form/_radio.scss
View File

@@ -1,20 +1,19 @@
label:has(input[type="radio"]) {
cursor: pointer;
z-index: 1;
aspect-ratio: unset;
height: 1.5em;
padding-inline: 12px;
transition: all 250ms ease;
cursor: pointer;
border: none;
border-radius: 0;
font-size: 16px;
background: var(--md-sys-color-surface-variant);
padding-inline: 12px;
aspect-ratio: unset;
height: 1.5em;
color: var(--md-sys-color-on-surface-variant);
background: var(--md-sys-color-surface-variant);
transition: all 250ms ease;
font-size: 16px;
> input[type="radio"] {
display: none;
@@ -29,8 +28,8 @@ label:has(input[type="radio"]) {
}
&:has(:checked) {
font-weight: 900;
color: var(--md-sys-color-on-tertiary);
background: var(--md-sys-color-tertiary);
color: var(--md-sys-color-on-tertiary);
font-weight: 900;
}
}

68
src/lib/style/form/_toggle.scss
View File

@@ -3,57 +3,55 @@ $border: 2px;
$height: 1.5em;
label:has(input[type="checkbox"]) {
cursor: pointer;
user-select: none;
display: flex;
gap: $padding;
align-items: center;
justify-content: center;
align-items: center;
gap: $padding;
cursor: pointer;
font-size: 12px;
user-select: none;
input[type="checkbox"] {
$width: calc($height * (5 / 3));
$diameter: calc($height - ((2 * $padding) + (2 * $border)));
$radius: calc($diameter / 2);
cursor: pointer;
display: flex;
position: relative;
overflow: hidden;
display: flex;
width: $width;
height: $height;
border-radius: calc($height / 2);
font-size: inherit;
color: inherit;
cursor: pointer;
outline: $border solid currentcolor;
outline-offset: calc(-1 * $border);
border-radius: calc($height / 2);
width: $width;
height: $height;
overflow: hidden;
color: inherit;
font-size: inherit;
&::after {
content: "";
display: block;
position: absolute;
top: calc($padding + $border);
left: calc($padding + $border);
display: block;
width: $diameter;
height: $diameter;
border-radius: calc($radius);
transition: all 250ms ease;
outline-color: inherit;
outline-style: solid;
outline-width: $radius;
outline-offset: calc(-1 * $radius);
border-radius: calc($radius);
transition: all 250ms ease;
width: $diameter;
height: $diameter;
content: "";
}
&:checked::after {
@@ -73,14 +71,8 @@ label:has(input[type="checkbox"]) {
}
> span.icon {
position: relative;
display: block;
width: 1em;
height: 1em;
font-size: inherit;
position: relative;
clip-path: polygon(
0% $side,
@@ -101,22 +93,26 @@ label:has(input[type="checkbox"]) {
transition: all 250ms ease;
width: 1em;
height: 1em;
font-size: inherit;
&::before {
content: "";
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, 0) rotate(45deg);
display: block;
width: calc(100% * sqrt(2));
height: $line-width;
transition: all 250ms ease;
background-color: currentcolor;
transition: all 250ms ease;
width: calc(100% * sqrt(2));
height: $line-width;
content: "";
}
}

8
src/lib/style/scrollbar.scss
View File

@@ -1,14 +1,14 @@
@media not (forced-colors: active) {
::-webkit-scrollbar {
width: 8px;
background: transparent;
border-radius: 4px;
background: transparent;
width: 8px;
}
::-webkit-scrollbar-thumb {
background: var(--scrollbar-color, white);
border-radius: 4px;
transition: all 250ms ease;
border-radius: 4px;
background: var(--scrollbar-color, white);
&:hover {
filter: brightness(120%);

14
src/lib/style/theme.scss
View File

@@ -11,26 +11,26 @@
@use "elements/popover";
body {
overflow: hidden;
display: flex;
flex-direction: column;
margin: 0;
background: var(--md-sys-color-background);
width: 100vw;
height: 100vh;
margin: 0;
font-family: "Noto Sans Mono", monospace;
overflow: hidden;
color: var(--md-sys-color-on-background);
background: var(--md-sys-color-background);
font-family: "Noto Sans Mono", monospace;
}
main {
contain: strict;
display: flex;
flex-direction: column;
flex-grow: 1;
flex-direction: column;
align-items: center;
contain: strict;
padding-inline: 16px;
}

14
src/lib/style/tippy.scss
View File

@@ -1,10 +1,10 @@
$padding: 16px;
.tippy-box[data-theme~="surface-variant"] {
color: var(--md-sys-color-on-surface-variant);
background-color: var(--md-sys-color-surface-variant);
filter: drop-shadow(0 0 12px #000a);
border-radius: calc(24px + $padding);
background-color: var(--md-sys-color-surface-variant);
color: var(--md-sys-color-on-surface-variant);
.tippy-content {
padding: $padding;
@@ -24,10 +24,10 @@ $padding: 16px;
}
@media (forced-colors: active) {
color: CanvasText;
background-color: Canvas;
filter: none;
border: 1px solid CanvasText;
background-color: Canvas;
color: CanvasText;
> .tippy-arrow {
display: none;
@@ -36,16 +36,16 @@ $padding: 16px;
}
.tippy-box[data-theme~="tooltip"] {
color: var(--md-sys-color-on-background);
background-color: var(--md-sys-color-background);
border: 1px solid var(--md-sys-color-outline);
border-radius: 8px;
background-color: var(--md-sys-color-background);
color: var(--md-sys-color-on-background);
}
.tippy-box[data-theme~="search-completion"] {
overflow: hidden;
filter: none;
border-radius: 0 0 16px 16px;
overflow: hidden;
.tippy-content {
padding: 0;