bterkuile/fizzy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Set @layer

Browse Source
This commit is contained in:
Jason Zimdars
2025-06-19 14:40:52 -05:00
parent ac09940509
commit 6946c1d6d5
1 changed files with 59 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/assets/stylesheets/fizzy-menu.css
+59 -57
View File
@@ -1,68 +1,70 @@
.fizzy-dialog {
--panel-border-color: var(--color-selected-dark);
--panel-border-radius: 1.4em;
@layer components {
.fizzy-dialog {
--panel-border-color: var(--color-selected-dark);
--panel-border-radius: 1.4em;
box-shadow: 0 0 0 1px oklch(var(--lch-blue-medium) / 5%),
0 0.2em 0.2em oklch(var(--lch-blue-medium) / 5%),
0 0.4em 0.4em oklch(var(--lch-blue-medium) / 5%),
0 0.8em 0.8em oklch(var(--lch-blue-medium) / 5%);
z-index: 5;
}
.fizzy-menu {
--input-border-color: var(--color-selected-dark);
--input-padding: 0.2em 2em 0.2em 0.9em;
box-shadow: 0 0 0 1px oklch(var(--lch-blue-medium) / 5%),
0 0.2em 0.2em oklch(var(--lch-blue-medium) / 5%),
0 0.4em 0.4em oklch(var(--lch-blue-medium) / 5%),
0 0.8em 0.8em oklch(var(--lch-blue-medium) / 5%);
margin-block-start: 0.1em;
svg {
block-size: auto;
inline-size: 1.3em;
margin-block-end: 0.2em;
margin-inline-end: 0.8ch;
box-shadow: 0 0 0 1px oklch(var(--lch-blue-medium) / 5%),
0 0.2em 0.2em oklch(var(--lch-blue-medium) / 5%),
0 0.4em 0.4em oklch(var(--lch-blue-medium) / 5%),
0 0.8em 0.8em oklch(var(--lch-blue-medium) / 5%);
z-index: 5;
}
}
.fizzy-menu__hotkeys {
--gap: 3px;
.input:is(.fizzy-menu) {
--input-border-color: var(--color-selected-dark);
--input-padding: 0.2em 2em 0.2em 0.9em;
gap: var(--gap);
margin: var(--block-space-half) auto calc(var(--block-space-half) / 2);
box-shadow: 0 0 0 1px oklch(var(--lch-blue-medium) / 5%),
0 0.2em 0.2em oklch(var(--lch-blue-medium) / 5%),
0 0.4em 0.4em oklch(var(--lch-blue-medium) / 5%),
0 0.8em 0.8em oklch(var(--lch-blue-medium) / 5%);
margin-block-start: 0.1em;
.btn {
--btn-border-radius: 0.4em;
align-content: end;
aspect-ratio: 5/3;
flex-basis: calc((100% - var(--gap) * 2) / 3);
flex-direction: column;
font-size: var(--text-small);
line-height: 1;
justify-content: center;
overflow: hidden;
position: relative;
row-gap: 0.3lh;
text-align: center;
kbd {
border: none;
box-shadow: none;
inset: 0.66em 0.33em auto auto;
opacity: 0.5;
position: absolute;
svg {
block-size: auto;
inline-size: 1.3em;
margin-block-end: 0.2em;
margin-inline-end: 0.8ch;
}
}
.icon {
--icon-size: 2em !important;
}
.fizzy-menu__hotkeys {
--gap: 3px;
span {
display: flex;
text-wrap: nowrap;
gap: var(--gap);
margin: var(--block-space-half) auto calc(var(--block-space-half) / 2);
.btn {
--btn-border-radius: 0.4em;
align-content: end;
aspect-ratio: 5/3;
flex-basis: calc((100% - var(--gap) * 2) / 3);
flex-direction: column;
font-size: var(--text-small);
line-height: 1;
justify-content: center;
overflow: hidden;
position: relative;
row-gap: 0.3lh;
text-align: center;
kbd {
border: none;
box-shadow: none;
inset: 0.66em 0.33em auto auto;
opacity: 0.5;
position: absolute;
}
.icon {
--icon-size: 2em !important;
}
span {
display: flex;
text-wrap: nowrap;
}
}
}
}