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 */
|
||||
}
|
||||
BIN
assets/favicon.ico
Normal file
BIN
assets/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 130 KiB |
20
assets/header.svg
Normal file
20
assets/header.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 23 KiB |
263
assets/tailwind.css
Normal file
263
assets/tailwind.css
Normal file
@@ -0,0 +1,263 @@
|
||||
/*! tailwindcss v4.1.5 | MIT License | https://tailwindcss.com */
|
||||
@layer properties;
|
||||
@layer theme, base, components, utilities;
|
||||
@layer theme {
|
||||
:root, :host {
|
||||
--font-sans: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
|
||||
'Noto Color Emoji';
|
||||
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
|
||||
monospace;
|
||||
--text-xs: 0.75rem;
|
||||
--text-sm: 0.875rem;
|
||||
--text-base: 1rem;
|
||||
--text-lg: 1.125rem;
|
||||
--text-xl: 1.25rem;
|
||||
--leading-tight: 1.25;
|
||||
--leading-normal: 1.5;
|
||||
--radius-sm: 0.25rem;
|
||||
--radius-lg: 0.5rem;
|
||||
--default-transition-duration: 150ms;
|
||||
--default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
--default-font-family: var(--font-sans);
|
||||
--default-mono-font-family: var(--font-mono);
|
||||
}
|
||||
}
|
||||
@layer base {
|
||||
*, ::after, ::before, ::backdrop, ::file-selector-button {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0 solid;
|
||||
}
|
||||
html, :host {
|
||||
line-height: 1.5;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
tab-size: 4;
|
||||
font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji');
|
||||
font-feature-settings: var(--default-font-feature-settings, normal);
|
||||
font-variation-settings: var(--default-font-variation-settings, normal);
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
hr {
|
||||
height: 0;
|
||||
color: inherit;
|
||||
border-top-width: 1px;
|
||||
}
|
||||
abbr:where([title]) {
|
||||
-webkit-text-decoration: underline dotted;
|
||||
text-decoration: underline dotted;
|
||||
}
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-size: inherit;
|
||||
font-weight: inherit;
|
||||
}
|
||||
a {
|
||||
color: inherit;
|
||||
-webkit-text-decoration: inherit;
|
||||
text-decoration: inherit;
|
||||
}
|
||||
b, strong {
|
||||
font-weight: bolder;
|
||||
}
|
||||
code, kbd, samp, pre {
|
||||
font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace);
|
||||
font-feature-settings: var(--default-mono-font-feature-settings, normal);
|
||||
font-variation-settings: var(--default-mono-font-variation-settings, normal);
|
||||
font-size: 1em;
|
||||
}
|
||||
small {
|
||||
font-size: 80%;
|
||||
}
|
||||
sub, sup {
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
table {
|
||||
text-indent: 0;
|
||||
border-color: inherit;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
:-moz-focusring {
|
||||
outline: auto;
|
||||
}
|
||||
progress {
|
||||
vertical-align: baseline;
|
||||
}
|
||||
summary {
|
||||
display: list-item;
|
||||
}
|
||||
ol, ul, menu {
|
||||
list-style: none;
|
||||
}
|
||||
img, svg, video, canvas, audio, iframe, embed, object {
|
||||
display: block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
img, video {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
button, input, select, optgroup, textarea, ::file-selector-button {
|
||||
font: inherit;
|
||||
font-feature-settings: inherit;
|
||||
font-variation-settings: inherit;
|
||||
letter-spacing: inherit;
|
||||
color: inherit;
|
||||
border-radius: 0;
|
||||
background-color: transparent;
|
||||
opacity: 1;
|
||||
}
|
||||
:where(select:is([multiple], [size])) optgroup {
|
||||
font-weight: bolder;
|
||||
}
|
||||
:where(select:is([multiple], [size])) optgroup option {
|
||||
padding-inline-start: 20px;
|
||||
}
|
||||
::file-selector-button {
|
||||
margin-inline-end: 4px;
|
||||
}
|
||||
::placeholder {
|
||||
opacity: 1;
|
||||
}
|
||||
@supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {
|
||||
::placeholder {
|
||||
color: currentcolor;
|
||||
@supports (color: color-mix(in lab, red, red)) {
|
||||
color: color-mix(in oklab, currentcolor 50%, transparent);
|
||||
}
|
||||
}
|
||||
}
|
||||
textarea {
|
||||
resize: vertical;
|
||||
}
|
||||
::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
::-webkit-date-and-time-value {
|
||||
min-height: 1lh;
|
||||
text-align: inherit;
|
||||
}
|
||||
::-webkit-datetime-edit {
|
||||
display: inline-flex;
|
||||
}
|
||||
::-webkit-datetime-edit-fields-wrapper {
|
||||
padding: 0;
|
||||
}
|
||||
::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
|
||||
padding-block: 0;
|
||||
}
|
||||
:-moz-ui-invalid {
|
||||
box-shadow: none;
|
||||
}
|
||||
button, input:where([type='button'], [type='reset'], [type='submit']), ::file-selector-button {
|
||||
appearance: button;
|
||||
}
|
||||
::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
|
||||
height: auto;
|
||||
}
|
||||
[hidden]:where(:not([hidden='until-found'])) {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
@layer utilities {
|
||||
.visible {
|
||||
visibility: visible;
|
||||
}
|
||||
.relative {
|
||||
position: relative;
|
||||
}
|
||||
.static {
|
||||
position: static;
|
||||
}
|
||||
.container {
|
||||
width: 100%;
|
||||
@media (width >= 40rem) {
|
||||
max-width: 40rem;
|
||||
}
|
||||
@media (width >= 48rem) {
|
||||
max-width: 48rem;
|
||||
}
|
||||
@media (width >= 64rem) {
|
||||
max-width: 64rem;
|
||||
}
|
||||
@media (width >= 80rem) {
|
||||
max-width: 80rem;
|
||||
}
|
||||
@media (width >= 96rem) {
|
||||
max-width: 96rem;
|
||||
}
|
||||
}
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
.transform {
|
||||
transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
|
||||
}
|
||||
.border {
|
||||
border-style: var(--tw-border-style);
|
||||
border-width: 1px;
|
||||
}
|
||||
.text-wrap {
|
||||
text-wrap: wrap;
|
||||
}
|
||||
.outline {
|
||||
outline-style: var(--tw-outline-style);
|
||||
outline-width: 1px;
|
||||
}
|
||||
.transition {
|
||||
transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
|
||||
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
|
||||
transition-duration: var(--tw-duration, var(--default-transition-duration));
|
||||
}
|
||||
}
|
||||
@property --tw-rotate-x {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
}
|
||||
@property --tw-rotate-y {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
}
|
||||
@property --tw-rotate-z {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
}
|
||||
@property --tw-skew-x {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
}
|
||||
@property --tw-skew-y {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
}
|
||||
@property --tw-border-style {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
initial-value: solid;
|
||||
}
|
||||
@property --tw-outline-style {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
initial-value: solid;
|
||||
}
|
||||
@layer properties {
|
||||
@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
|
||||
*, ::before, ::after, ::backdrop {
|
||||
--tw-rotate-x: initial;
|
||||
--tw-rotate-y: initial;
|
||||
--tw-rotate-z: initial;
|
||||
--tw-skew-x: initial;
|
||||
--tw-skew-y: initial;
|
||||
--tw-border-style: solid;
|
||||
--tw-outline-style: solid;
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user