117 lines
3.4 KiB
CSS
117 lines
3.4 KiB
CSS
/* Tibi Doku — Nova-angelehnt: Inter, Near-Black-Akzent, Nova-Orange als Zweitakzent.
|
|
Hinweis: --sl-color-white/black/gray bewusst NICHT überschrieben (Starlight
|
|
dreht sie je Theme, eigenes Mapping zerstört Kontraste auf Buttons/Nav). */
|
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
|
|
|
|
:root {
|
|
--sl-font: 'Inter', system-ui, -apple-system, sans-serif;
|
|
|
|
/* Akzent-Skala: Text-Akzent muss auf Weiß lesbar sein → dunkel */
|
|
--sl-color-accent-low: #e8eaed;
|
|
--sl-color-accent: #374151;
|
|
--sl-color-accent-high: #111827;
|
|
|
|
/* Nova-Farben nur als Deko, nie als Textfarbe auf hellem Grund */
|
|
--tibi-nova: #c2410c;
|
|
--tibi-nova-core: #4da8b8;
|
|
--tibi-nova-outer: #dc2626;
|
|
--tibi-sidebar: #f8f9fa;
|
|
--tibi-topbar: #ffffff;
|
|
--tibi-card-border: #e5e7eb;
|
|
}
|
|
|
|
:root[data-theme='dark'] {
|
|
/* Auf dunklem Grund muss Text-Akzent hell sein */
|
|
--sl-color-accent-low: #2b3138;
|
|
--sl-color-accent: #9aa4b2;
|
|
--sl-color-accent-high: #e5e7eb;
|
|
|
|
--tibi-sidebar: #16181d;
|
|
--tibi-topbar: #16181d;
|
|
--tibi-card-border: #333a44;
|
|
}
|
|
|
|
/* ---------- Flächen in Nova-Nähe ---------- */
|
|
.sidebar-pane {
|
|
background-color: var(--tibi-sidebar);
|
|
}
|
|
.header {
|
|
background-color: var(--tibi-topbar);
|
|
}
|
|
|
|
/* ---------- Hero ---------- */
|
|
.hero {
|
|
background:
|
|
radial-gradient(ellipse 60% 50% at 50% 0%, rgba(194, 65, 12, 0.1), transparent),
|
|
radial-gradient(ellipse 40% 30% at 50% 0%, rgba(77, 168, 184, 0.07), transparent),
|
|
radial-gradient(ellipse 25% 20% at 70% 0%, rgba(220, 38, 38, 0.05), transparent);
|
|
}
|
|
:root[data-theme='dark'] .hero {
|
|
background:
|
|
radial-gradient(ellipse 60% 50% at 50% 0%, rgba(194, 65, 12, 0.16), transparent),
|
|
radial-gradient(ellipse 40% 30% at 50% 0%, rgba(77, 168, 184, 0.1), transparent);
|
|
}
|
|
.hero img {
|
|
border: 1px solid var(--tibi-card-border);
|
|
border-radius: 0.75rem;
|
|
box-shadow: 0 20px 50px -20px rgba(17, 24, 39, 0.35);
|
|
max-width: min(100%, 45rem);
|
|
}
|
|
|
|
/* Inhaltsbilder (z. B. Startseiten-Screenshot): gerahmt, zentriert */
|
|
.sl-markdown-content p > img:only-child {
|
|
border: 1px solid var(--tibi-card-border);
|
|
border-radius: 0.75rem;
|
|
box-shadow: 0 24px 60px -24px rgba(17, 24, 39, 0.4);
|
|
display: block;
|
|
margin: 0 auto;
|
|
max-width: min(100%, 58rem);
|
|
}
|
|
|
|
/* ---------- Buttons: immer lesbar, Nova-Nähe ---------- */
|
|
.sl-link-button.primary {
|
|
background: #111827;
|
|
border-color: #111827;
|
|
color: #ffffff;
|
|
}
|
|
.sl-link-button.primary:hover {
|
|
background: #000000;
|
|
border-color: #000000;
|
|
color: #ffffff;
|
|
}
|
|
.sl-link-button.minimal,
|
|
.sl-link-button.secondary {
|
|
color: #111827;
|
|
}
|
|
.sl-link-button.minimal:hover,
|
|
.sl-link-button.secondary:hover {
|
|
color: #c2410c;
|
|
}
|
|
:root[data-theme='dark'] .sl-link-button.primary {
|
|
background: #e5e7eb;
|
|
border-color: #e5e7eb;
|
|
color: #111827;
|
|
}
|
|
:root[data-theme='dark'] .sl-link-button.primary:hover {
|
|
background: #ffffff;
|
|
border-color: #ffffff;
|
|
color: #111827;
|
|
}
|
|
:root[data-theme='dark'] .sl-link-button.minimal,
|
|
:root[data-theme='dark'] .sl-link-button.secondary {
|
|
color: #e5e7eb;
|
|
}
|
|
:root[data-theme='dark'] .sl-link-button.minimal:hover,
|
|
:root[data-theme='dark'] .sl-link-button.secondary:hover {
|
|
color: #fcd34d;
|
|
}
|
|
|
|
/* ---------- Karten: ruhig, Nova-Rahmen, Orange nur bei Hover ----------
|
|
(gilt für LinkCards; normale Cards erben Rahmen über Starlight-Default) ---------- */
|
|
.sl-link-card {
|
|
border-color: var(--tibi-card-border);
|
|
}
|
|
.sl-link-card:hover {
|
|
border-color: var(--tibi-nova);
|
|
}
|