Theaninova/DeviceManager
1
0
Fork 0
mirror of https://github.com/CharaChorder/DeviceManager.git synced 2026-02-20 08:02:07 +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

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;