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.
This commit is contained in:
172
assets/css/base.css
Normal file
172
assets/css/base.css
Normal file
@@ -0,0 +1,172 @@
|
||||
/* ==========================================================================
|
||||
Baseline — reset and element defaults. No component styling below this line.
|
||||
========================================================================== */
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
html {
|
||||
color-scheme: dark;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
/* App chrome should not feel like a document. */
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
body {
|
||||
min-height: 100dvh;
|
||||
background-color: var(--dn-bg-app);
|
||||
color: var(--dn-fg);
|
||||
font-family: var(--dn-font-ui);
|
||||
font-size: var(--dn-text-base);
|
||||
line-height: var(--dn-leading-normal);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
text-rendering: optimizeLegibility;
|
||||
overflow: hidden; /* the editor and sidebar scroll, the shell does not */
|
||||
}
|
||||
|
||||
/* Text the user is meant to read or copy opts back in. */
|
||||
input,
|
||||
textarea,
|
||||
[contenteditable],
|
||||
.selectable {
|
||||
-webkit-user-select: text;
|
||||
user-select: text;
|
||||
}
|
||||
|
||||
/* --- Typographic elements ------------------------------------------------- */
|
||||
|
||||
h1, h2, h3, h4 {
|
||||
font-weight: 600;
|
||||
line-height: var(--dn-leading-tight);
|
||||
text-wrap: balance;
|
||||
}
|
||||
|
||||
h1 { font-size: var(--dn-text-xl); }
|
||||
h2 { font-size: var(--dn-text-lg); }
|
||||
h3 { font-size: var(--dn-text-md); }
|
||||
h4 { font-size: var(--dn-text-base); }
|
||||
|
||||
p {
|
||||
text-wrap: pretty;
|
||||
max-width: var(--dn-measure);
|
||||
}
|
||||
|
||||
small {
|
||||
font-size: var(--dn-text-xs);
|
||||
color: var(--dn-fg-muted);
|
||||
}
|
||||
|
||||
code, kbd, samp, pre {
|
||||
font-family: var(--dn-font-code);
|
||||
font-size: 0.9375em;
|
||||
}
|
||||
|
||||
hr {
|
||||
border: 0;
|
||||
border-top: 1px solid var(--dn-border);
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--dn-accent);
|
||||
text-decoration-color: var(--dn-accent-muted);
|
||||
text-underline-offset: 2px;
|
||||
transition: color var(--dn-dur-fast) var(--dn-ease);
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration-color: currentColor;
|
||||
}
|
||||
|
||||
/* --- Form and media defaults ---------------------------------------------- */
|
||||
|
||||
img, svg, video, canvas {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
button, input, select, textarea {
|
||||
font: inherit;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
button {
|
||||
background: none;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
::placeholder {
|
||||
color: var(--dn-fg-faint);
|
||||
}
|
||||
|
||||
::selection {
|
||||
background: var(--dn-accent-muted);
|
||||
color: var(--dn-fg);
|
||||
}
|
||||
|
||||
/* --- Focus ---------------------------------------------------------------- */
|
||||
|
||||
:focus-visible {
|
||||
outline: 2px solid var(--dn-accent);
|
||||
outline-offset: 2px;
|
||||
border-radius: var(--dn-radius-sm);
|
||||
}
|
||||
|
||||
:focus:not(:focus-visible) {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* --- Scrollbars ------------------------------------------------------------ */
|
||||
|
||||
* {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: var(--dn-border-strong) transparent;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: var(--dn-border);
|
||||
border: 3px solid transparent;
|
||||
background-clip: content-box;
|
||||
border-radius: 999px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--dn-border-strong);
|
||||
background-clip: content-box;
|
||||
}
|
||||
|
||||
/* --- Reduced motion --------------------------------------------------------- */
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
animation-duration: 0.01ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
scroll-behavior: auto !important;
|
||||
}
|
||||
}
|
||||
205
assets/css/components.css
Normal file
205
assets/css/components.css
Normal file
@@ -0,0 +1,205 @@
|
||||
/* ==========================================================================
|
||||
Components — the things you click. Each rule owns one class.
|
||||
========================================================================== */
|
||||
|
||||
/* --- File rail entry -------------------------------------------------------
|
||||
An active file is marked by a rule at the left edge, the way an editor marks
|
||||
the current line — not by a filled pill.
|
||||
-------------------------------------------------------------------------- */
|
||||
|
||||
.file-selector {
|
||||
position: relative;
|
||||
display: block;
|
||||
padding: var(--dn-space-1) var(--dn-space-2) var(--dn-space-1) var(--dn-space-3);
|
||||
border-radius: var(--dn-radius-sm);
|
||||
color: var(--dn-fg-muted);
|
||||
font-family: var(--dn-font-code);
|
||||
font-size: var(--dn-text-sm);
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
transition: color var(--dn-dur-fast) var(--dn-ease),
|
||||
background-color var(--dn-dur-fast) var(--dn-ease);
|
||||
}
|
||||
|
||||
.file-selector::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset-block: 3px;
|
||||
left: 0;
|
||||
width: 2px;
|
||||
border-radius: 999px;
|
||||
background: var(--dn-accent);
|
||||
transform: scaleY(0);
|
||||
transition: transform var(--dn-dur) var(--dn-ease);
|
||||
}
|
||||
|
||||
.file-selector:hover {
|
||||
background: var(--dn-bg-raised);
|
||||
color: var(--dn-fg);
|
||||
}
|
||||
|
||||
.file-selector.active {
|
||||
color: var(--dn-fg);
|
||||
background: var(--dn-bg-raised);
|
||||
}
|
||||
|
||||
.file-selector.active::before {
|
||||
transform: scaleY(1);
|
||||
}
|
||||
|
||||
/* --- Workspace selector tab ------------------------------------------------- */
|
||||
|
||||
.workspace-selector {
|
||||
padding: var(--dn-space-2) var(--dn-space-4);
|
||||
border-radius: var(--dn-radius);
|
||||
color: var(--dn-fg-muted);
|
||||
font-size: var(--dn-text-base);
|
||||
font-weight: 500;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
transition: color var(--dn-dur-fast) var(--dn-ease),
|
||||
background-color var(--dn-dur-fast) var(--dn-ease);
|
||||
}
|
||||
|
||||
.workspace-selector:hover {
|
||||
color: var(--dn-fg);
|
||||
background: var(--dn-bg-raised);
|
||||
}
|
||||
|
||||
.workspace-selector.active {
|
||||
color: var(--dn-fg-on-accent);
|
||||
background: var(--dn-accent);
|
||||
}
|
||||
|
||||
/* --- Buttons ---------------------------------------------------------------- */
|
||||
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: var(--dn-space-2);
|
||||
padding: var(--dn-space-2) var(--dn-space-4);
|
||||
border: 1px solid var(--dn-border-strong);
|
||||
border-radius: var(--dn-radius);
|
||||
background: var(--dn-bg-raised);
|
||||
color: var(--dn-fg);
|
||||
font-size: var(--dn-text-base);
|
||||
font-weight: 500;
|
||||
transition: background-color var(--dn-dur-fast) var(--dn-ease),
|
||||
border-color var(--dn-dur-fast) var(--dn-ease);
|
||||
}
|
||||
|
||||
.btn:hover:not(:disabled) {
|
||||
background: var(--dn-bg-overlay);
|
||||
border-color: var(--ctp-surface-2);
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: var(--dn-accent);
|
||||
border-color: var(--dn-accent);
|
||||
color: var(--dn-fg-on-accent);
|
||||
}
|
||||
|
||||
.btn-primary:hover:not(:disabled) {
|
||||
background: var(--dn-accent-hover);
|
||||
border-color: var(--dn-accent-hover);
|
||||
}
|
||||
|
||||
.btn-ghost {
|
||||
background: transparent;
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.btn-ghost:hover:not(:disabled) {
|
||||
background: var(--dn-bg-raised);
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
/* --- Text input --------------------------------------------------------------
|
||||
Workspace names, file names, search.
|
||||
-------------------------------------------------------------------------- */
|
||||
|
||||
.input {
|
||||
width: 100%;
|
||||
padding: var(--dn-space-2) var(--dn-space-3);
|
||||
border: 1px solid var(--dn-border-strong);
|
||||
border-radius: var(--dn-radius);
|
||||
background: var(--dn-bg-well);
|
||||
color: var(--dn-fg);
|
||||
font-family: var(--dn-font-code);
|
||||
font-size: var(--dn-text-base);
|
||||
transition: border-color var(--dn-dur-fast) var(--dn-ease);
|
||||
}
|
||||
|
||||
.input:focus {
|
||||
border-color: var(--dn-accent);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.input:focus-visible {
|
||||
outline: 2px solid var(--dn-accent-muted);
|
||||
outline-offset: 0;
|
||||
}
|
||||
|
||||
/* --- Field ------------------------------------------------------------------- */
|
||||
|
||||
.field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--dn-space-2);
|
||||
}
|
||||
|
||||
.field-label {
|
||||
color: var(--dn-fg-muted);
|
||||
font-family: var(--dn-font-code);
|
||||
font-size: var(--dn-text-xs);
|
||||
letter-spacing: var(--dn-tracking-caps);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.field-hint {
|
||||
color: var(--dn-fg-faint);
|
||||
font-size: var(--dn-text-xs);
|
||||
}
|
||||
|
||||
.field-error {
|
||||
color: var(--dn-danger);
|
||||
font-size: var(--dn-text-xs);
|
||||
}
|
||||
|
||||
/* --- Empty state --------------------------------------------------------------
|
||||
An empty screen is an invitation to act, not a shrug.
|
||||
-------------------------------------------------------------------------- */
|
||||
|
||||
.empty-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: var(--dn-space-3);
|
||||
height: 100%;
|
||||
padding: var(--dn-space-7) var(--dn-space-4);
|
||||
color: var(--dn-fg-muted);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.empty-state-title {
|
||||
color: var(--dn-fg);
|
||||
font-size: var(--dn-text-md);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* --- Utilities ---------------------------------------------------------------- */
|
||||
|
||||
.visually-hidden {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
margin: -1px;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
clip-path: inset(50%);
|
||||
white-space: nowrap;
|
||||
}
|
||||
94
assets/css/layout.css
Normal file
94
assets/css/layout.css
Normal file
@@ -0,0 +1,94 @@
|
||||
/* ==========================================================================
|
||||
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);
|
||||
}
|
||||
}
|
||||
97
assets/css/tokens.css
Normal file
97
assets/css/tokens.css
Normal file
@@ -0,0 +1,97 @@
|
||||
/* ==========================================================================
|
||||
Design tokens — the only place raw values live.
|
||||
|
||||
Palette: Catppuccin Mocha, matching the editor's Theme::CATPPUCCIN_MOCHA
|
||||
so the editor pane and the app chrome are the same surface.
|
||||
|
||||
All tokens are prefixed --dn-. Tailwind v4 publishes its own --font-*,
|
||||
--text-*, --radius-* and --leading-* on :root and tree-shakes that set as
|
||||
utilities come and go, so an unprefixed token would collide silently.
|
||||
========================================================================== */
|
||||
|
||||
:root {
|
||||
/* --- Raw palette ------------------------------------------------------ */
|
||||
--ctp-crust: #11111b;
|
||||
--ctp-mantle: #181825;
|
||||
--ctp-base: #1e1e2e;
|
||||
--ctp-surface-0: #313244;
|
||||
--ctp-surface-1: #45475a;
|
||||
--ctp-surface-2: #585b70;
|
||||
--ctp-overlay-0: #6c7086;
|
||||
--ctp-subtext-0: #a6adc8;
|
||||
--ctp-text: #cdd6f4;
|
||||
|
||||
--ctp-mauve: #cba6f7;
|
||||
--ctp-green: #a6e3a1;
|
||||
--ctp-peach: #fab387;
|
||||
--ctp-red: #f38ba8;
|
||||
|
||||
/* --- Semantic surfaces ------------------------------------------------ */
|
||||
--dn-bg-app: var(--ctp-base); /* editor pane, page background */
|
||||
--dn-bg-sunken: var(--ctp-mantle); /* sidebar, chrome */
|
||||
--dn-bg-well: var(--ctp-crust); /* deepest: inputs, scrollbar track */
|
||||
--dn-bg-raised: var(--ctp-surface-0); /* hover, selected */
|
||||
--dn-bg-overlay: var(--ctp-surface-1); /* popovers, tooltips */
|
||||
|
||||
/* --- Semantic text ---------------------------------------------------- */
|
||||
--dn-fg: var(--ctp-text);
|
||||
--dn-fg-muted: var(--ctp-subtext-0);
|
||||
--dn-fg-faint: var(--ctp-overlay-0);
|
||||
--dn-fg-on-accent: var(--ctp-crust);
|
||||
|
||||
/* --- Lines ------------------------------------------------------------ */
|
||||
--dn-border: var(--ctp-surface-0);
|
||||
--dn-border-strong: var(--ctp-surface-1);
|
||||
|
||||
/* --- Accent & status -------------------------------------------------- */
|
||||
--dn-accent: var(--ctp-mauve);
|
||||
--dn-accent-hover: color-mix(in oklab, var(--ctp-mauve) 88%, white);
|
||||
--dn-accent-muted: color-mix(in oklab, var(--ctp-mauve) 22%, transparent);
|
||||
--dn-success: var(--ctp-green);
|
||||
--dn-warning: var(--ctp-peach);
|
||||
--dn-danger: var(--ctp-red);
|
||||
|
||||
/* --- Type ------------------------------------------------------------- */
|
||||
--dn-font-ui: system-ui, -apple-system, "Segoe UI Variable Text", "Segoe UI",
|
||||
Roboto, sans-serif;
|
||||
--dn-font-code: "JetBrains Mono", "Cascadia Code", "Fira Code", ui-monospace,
|
||||
"SF Mono", Consolas, "Liberation Mono", monospace;
|
||||
|
||||
--dn-text-xs: 0.75rem; /* 12 — captions, counts */
|
||||
--dn-text-sm: 0.8125rem; /* 13 — sidebar, dense chrome */
|
||||
--dn-text-base: 0.875rem; /* 14 — UI default */
|
||||
--dn-text-md: 1rem; /* 16 — prose */
|
||||
--dn-text-lg: 1.25rem; /* 20 — section headings */
|
||||
--dn-text-xl: 1.5rem; /* 24 — page title */
|
||||
|
||||
--dn-leading-tight: 1.25;
|
||||
--dn-leading-normal: 1.55;
|
||||
|
||||
--dn-tracking-caps: 0.08em; /* eyebrows / all-caps labels */
|
||||
|
||||
/* --- Space (4px base) -------------------------------------------------- */
|
||||
--dn-space-1: 0.25rem;
|
||||
--dn-space-2: 0.5rem;
|
||||
--dn-space-3: 0.75rem;
|
||||
--dn-space-4: 1rem;
|
||||
--dn-space-5: 1.5rem;
|
||||
--dn-space-6: 2rem;
|
||||
--dn-space-7: 3rem;
|
||||
|
||||
/* --- Shape ------------------------------------------------------------- */
|
||||
--dn-radius-sm: 3px;
|
||||
--dn-radius: 5px;
|
||||
--dn-radius-lg: 8px;
|
||||
|
||||
/* --- Motion ------------------------------------------------------------ */
|
||||
--dn-ease: cubic-bezier(0.2, 0, 0, 1);
|
||||
--dn-dur-fast: 90ms;
|
||||
--dn-dur: 160ms;
|
||||
|
||||
/* --- Elevation ---------------------------------------------------------- */
|
||||
--dn-shadow: 0 4px 16px rgb(0 0 0 / 0.35);
|
||||
|
||||
/* --- Layout ------------------------------------------------------------- */
|
||||
--dn-sidebar-width: 240px;
|
||||
--dn-measure: 72ch; /* max line length for prose */
|
||||
}
|
||||
Reference in New Issue
Block a user