Files
dionotes-client/assets/css/layout.css
MDietermann 2a1d5528cd chore: Dioxus-0.7-Projekt mit Tailwind-Setup aufsetzen
Cargo-, Dioxus- und Tailwind-Konfiguration, Clippy-Regeln, Assets und
Stylesheets (tokens/base/layout/components). Cargo.lock wird eingecheckt,
da es sich um ein Binary-Crate handelt.

node_modules/ und .idea/ per .gitignore ausgeschlossen.
2026-08-27 14:00:05 +02:00

95 lines
2.3 KiB
CSS

/* ==========================================================================
Layout — app shell and the two top-level screens. Structure only, no skin.
========================================================================== */
#main {
height: 100dvh;
display: flex;
flex-direction: column;
overflow: hidden;
}
/* --- Workspace selector ----------------------------------------------------
The pre-editor screen: pick or create a workspace. Centered, deliberately
sparse — it has exactly one job.
-------------------------------------------------------------------------- */
.workspace-selector-layout {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--dn-space-6);
padding: var(--dn-space-6);
}
.workspace-selector-links {
display: flex;
gap: var(--dn-space-1);
padding: var(--dn-space-1);
background: var(--dn-bg-sunken);
border: 1px solid var(--dn-border);
border-radius: var(--dn-radius-lg);
}
.workspace-selector-view {
width: 100%;
max-width: 34rem;
padding: var(--dn-space-6);
background: var(--dn-bg-sunken);
border: 1px solid var(--dn-border);
border-radius: var(--dn-radius-lg);
box-shadow: var(--dn-shadow);
}
/* --- Editor shell ----------------------------------------------------------
Fixed-width file rail + fluid editor. Both scroll independently.
-------------------------------------------------------------------------- */
.layout-container {
flex: 1;
min-height: 0;
display: flex;
flex-direction: row;
}
.files-bar {
flex: 0 0 var(--dn-sidebar-width);
min-width: 0;
display: flex;
flex-direction: column;
gap: 1px;
padding: var(--dn-space-2);
background: var(--dn-bg-sunken);
border-right: 1px solid var(--dn-border);
overflow-y: auto;
overscroll-behavior: contain;
}
.editor-container {
flex: 1;
min-width: 0;
overflow: auto;
}
.editor-class {
height: 100%;
cursor: text;
}
/* Below tablet the rail collapses to a strip across the shell's full width. */
@media (max-width: 640px) {
.layout-container {
flex-direction: column;
}
.files-bar {
flex: 0 0 auto;
max-height: 40dvh;
border-right: 0;
border-bottom: 1px solid var(--dn-border);
}
}