154 lines
No EOL
3.7 KiB
CSS
154 lines
No EOL
3.7 KiB
CSS
.layout {
|
|
display: grid;
|
|
grid: auto minmax(0, 1fr) / 100%;
|
|
inline-size: 100%;
|
|
block-size: 100%;
|
|
overflow: clip;
|
|
background-color: var(--surface-300);
|
|
|
|
@media (display-mode: window-controls-overlay) {
|
|
& {
|
|
row-gap: var(--padding-l);
|
|
}
|
|
}
|
|
|
|
.menu {
|
|
view-transition-name: menu;
|
|
display: grid;
|
|
grid: 100% / auto minmax(0, 1fr) auto;
|
|
grid-auto-flow: column;
|
|
justify-content: start;
|
|
place-items: center start;
|
|
position: relative;
|
|
z-index: 10;
|
|
|
|
gap: .5em;
|
|
padding-inline: 1em;
|
|
block-size: calc(env(titlebar-area-height, 3em) + .5px);
|
|
inline-size: env(titlebar-area-width, 100%);
|
|
-webkit-app-region: drag;
|
|
|
|
background-color: var(--surface-300);
|
|
color: var(--text-1);
|
|
|
|
& > * {
|
|
-webkit-app-region: no-drag;
|
|
}
|
|
|
|
& > .logo {
|
|
aspect-ratio: 1;
|
|
block-size: 100%;
|
|
padding: var(--padding-m);
|
|
|
|
& > picture {
|
|
display: contents;
|
|
|
|
& > img {
|
|
block-size: 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
& .right {
|
|
display: grid;
|
|
grid-auto-flow: column;
|
|
align-content: center;
|
|
|
|
& .themeMenu {
|
|
display: contents;
|
|
|
|
& > button {
|
|
display: flex;
|
|
place-items: center;
|
|
padding: var(--padding-m);
|
|
border: none;
|
|
border-radius: var(--radii-m);
|
|
background-color: transparent;
|
|
|
|
&:hover {
|
|
background-color: var(--surface-500);
|
|
}
|
|
|
|
@media (display-mode: window-controls-overlay) {
|
|
& {
|
|
color: light-dark(#0008, #fff8);
|
|
}
|
|
}
|
|
}
|
|
|
|
& > dialog {
|
|
inset-inline-start: anchor(start);
|
|
inset-block-start: anchor(end);
|
|
position-try-fallbacks: flip-inline;
|
|
|
|
padding: var(--padding-m);
|
|
border: none;
|
|
border-radius: var(--radii-m);
|
|
border-top-right-radius: 0;
|
|
background-color: var(--surface-600);
|
|
box-shadow: var(--shadow-3);
|
|
}
|
|
|
|
&:has(:popover-open) > button {
|
|
border-bottom-left-radius: 0;
|
|
border-bottom-right-radius: 0;
|
|
background-color: var(--surface-600);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
& > section {
|
|
display: grid;
|
|
grid: 100% / 100%;
|
|
inline-size: 100%;
|
|
block-size: 100%;
|
|
overflow: clip;
|
|
view-transition-name: content;
|
|
}
|
|
}
|
|
|
|
.error {
|
|
display: grid;
|
|
place-content: center;
|
|
|
|
background: repeating-linear-gradient(-45deg,
|
|
color(from var(--fail) xyz x y z / .05),
|
|
color(from var(--fail) xyz x y z / .05) 10px,
|
|
color(from var(--fail) xyz x y z / .25) 10px,
|
|
color(from var(--fail) xyz x y z / .25) 12px,
|
|
color(from var(--fail) xyz x y z / .05) 12px);
|
|
color: var(--text-2);
|
|
border: 1px solid var(--fail);
|
|
border-radius: var(--radii-m);
|
|
|
|
margin: var(--padding-l);
|
|
}
|
|
|
|
@keyframes slide-left {
|
|
from {
|
|
translate: 0% 0;
|
|
}
|
|
|
|
to {
|
|
translate: -100% 0;
|
|
}
|
|
}
|
|
|
|
@keyframes slide-right {
|
|
from {
|
|
translate: 100% 0;
|
|
}
|
|
|
|
to {
|
|
translate: 0% 0;
|
|
}
|
|
}
|
|
|
|
::view-transition-old(content) {
|
|
animation-name: slide-left;
|
|
}
|
|
|
|
::view-transition-new(content) {
|
|
animation-name: slide-right;
|
|
} |