chris/streamarr
1
0
Fork 0
Code Issues 2 Pull requests Projects Releases Packages Wiki Activity Actions

update styles

Browse source
This commit is contained in:
Chris Kruining 2025-05-14 13:53:47 +02:00
parent 18c96302e2
commit 81491482e4
No known key found for this signature in database
GPG key ID: EB894A3560CCCAD2
4 changed files with 106 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

1
package.json
View file

@ -22,6 +22,7 @@
"@solidjs/start": "^1.1.4",
"better-auth": "^1.2.7",
"better-sqlite3": "^11.10.0",
"open-props": "^1.7.15",
"sitemap": "^8.0.0",
"solid-icons": "^1.1.0",
"solid-js": "^1.9.6",

2
src/components/list/list.module.css
View file

@ -42,7 +42,7 @@
&::after {
order: 11;
inline-size: 50cqi;
inline-size: 100cqi;
}
& > li {

87
src/components/select/select.module.css
View file

@ -1,4 +1,87 @@
.box {
appearance: none;
display: block grid;
place-items: center start;
padding: var(--size-2);
background-color: transparent;
border: none;
border-radius: var(--radius-2);
font-size: 1rem;
&:hover {
background-color: var(--surface-700);
}
@supports (appearance: base-select) {
&,
&::picker(select) {
appearance: base-select;
}
&::picker(select) {
/* display: block grid;
row-gap: var(--size-2); */
background-color: var(--surface-3);
padding: var(--size-2) 0;
border: none;
box-shadow: var(--shadow-2);
opacity: 0;
block-size: 0;
overflow: clip;
transition:
height 0.5s ease-out,
opacity 0.5s ease-out,
overlay 0.5s,
display 0.5s,
overflow 0.5s;
transition-behavior: allow-discrete;
}
&:open {
background-color: var(--surface-3);
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
&::picker(select) {
opacity: 1;
block-size: calc-size(auto, size);
overflow: auto;
@starting-style {
opacity: 0;
block-size: 0;
}
}
}
& > option {
display: block grid;
grid-auto-flow: column;
place-items: center start;
border-radius: var(--radius-2);
padding: var(--size-2);
cursor: pointer;
&:checked {
background-color: var(--surface-4);
}
&::checkmark {
display: none;
}
}
}
}
/* .box {
display: contents;
&:has(> :popover-open) > .button {
@ -14,7 +97,6 @@
grid-template-columns: inherit;
place-items: center start;
/* Make sure the height of the button does not collapse when it is empty */
block-size: 1em;
box-sizing: content-box;
@ -52,7 +134,6 @@
inset-block-start: anchor(end);
position-try-fallbacks: flip-block, flip-inline;
/* inline-size: anchor-size(self-inline); */
background-color: var(--surface-3);
padding: var(--size-2);
border: none;
@ -92,4 +173,4 @@
&.selected {
background-color: oklch(from var(--info) l c h / .1);
}
}
} */

22
src/features/shell/shell.module.css
View file

@ -1,6 +1,6 @@
.container {
position: relative;
display: grid;
display: block grid;
grid: auto 1fr / 5em 1fr;
grid-template-areas:
"top top"
@ -11,25 +11,35 @@
overflow: clip;
container-type: inline-size;
background-color: var(--surface-1);
&::after {
content: '';
grid-area: content;
display: block;
position: absolute;
inset-inline-start: 0;
inset-block-start: 0;
inline-size: var(--radius-4);
block-size: var(--radius-4);
background: radial-gradient(circle at bottom right, transparent var(--radius-4), var(--surface-1) var(--radius-4));
pointer-events: none;
}
}
.body {
grid-area: 2 / 1 / 3 / 3;
inline-size: 100%;
block-size: 100%;
background: linear-gradient(
180deg,
background: linear-gradient(180deg,
transparent,
transparent 90vh,
var(--surface-500) 90vh,
var(--surface-500)
);
var(--surface-500));
overflow: clip auto;
padding-inline-start: 5em;
transition: filter var(--duration-moderate-1) var(--ease-3);
& > div {
border-top-left-radius: var(--radius-4);
background-color: var(--surface-2);
isolation: isolate;
inline-size: 100%;