/* Kosmos Terminal Theme Basis: nahezu-schwarzer Hintergrund, weisser Text, roter Akzent aus dem Logo. Light Mode wird per data-Attribut auf umgeschaltet, siehe base.html.twig */ :root { --kt-bg: #0a0a0a; --kt-bg-alt: #121212; --kt-text: #e8e8e8; --kt-text-muted: #8a8a8a; --kt-border: #262626; --kt-accent: #e6423a; --kt-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, Consolas, monospace; --kt-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } html[data-theme="light"] { --kt-bg: #f6f6f4; --kt-bg-alt: #ffffff; --kt-text: #1a1a1a; --kt-text-muted: #62605c; --kt-border: #dcdad5; --kt-accent: #c9362f; } * { box-sizing: border-box; } body { margin: 0; background: var(--kt-bg); color: var(--kt-text); font-family: var(--kt-sans); line-height: 1.65; transition: background 0.15s ease, color 0.15s ease; } a { color: var(--kt-text); text-decoration: none; border-bottom: 1px solid transparent; } a:hover { border-bottom-color: var(--kt-accent); } .kt-wrap { max-width: 760px; margin: 0 auto; padding: 0 24px; } /* Header */ .kt-header { padding: 20px 0; } .kt-header-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; border-bottom: 1px solid var(--kt-border); padding-bottom: 20px; } .kt-brand { display: flex; align-items: center; gap: 12px; font-family: var(--kt-mono); font-size: 17px; } .kt-brand img { height: 30px; width: auto; display: block; } .kt-nav { display: flex; flex-wrap: wrap; gap: 10px 22px; font-family: var(--kt-mono); font-size: 13px; color: var(--kt-text-muted); } .kt-nav a { color: var(--kt-text-muted); } .kt-nav a:hover { color: var(--kt-text); } .kt-nav a.active { color: var(--kt-accent); } /* Dropdown fuer Seiten mit Unterseiten - haelt die Hauptnav uebersichtlich */ .kt-nav-item { position: relative; } .kt-nav-item > a::after { content: ''; display: inline-block; margin-left: 5px; border-left: 3px solid transparent; border-right: 3px solid transparent; border-top: 4px solid currentColor; vertical-align: middle; opacity: 0.6; } .kt-submenu-toggle { display: none; } .kt-submenu { display: none; position: absolute; top: 100%; right: 0; /* kein margin-top: eine Luecke zwischen Link und Menue wuerde beim Rueberfahren mit der Maus eine hover-lose Zone erzeugen, wodurch das Menue sofort wieder verschwindet. Stattdessen padding-top fuer den visuellen Abstand, das bleibt Teil der hoverbaren Box. */ padding-top: 8px; background: transparent; width: max-content; max-width: min(320px, 90vw); flex-direction: column; z-index: 10; } .kt-submenu-inner { background: var(--kt-bg-alt); border: 1px solid var(--kt-border); border-left: 2px solid var(--kt-accent); border-radius: 0 8px 8px 8px; padding: 6px 0; } .kt-submenu a { display: block; padding: 6px 14px; white-space: normal; line-height: 1.4; } .kt-submenu a.kt-submenu-more { margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--kt-border); color: var(--kt-accent); font-size: 12px; } .kt-nav-item.kt-open .kt-submenu, .kt-nav-item:focus-within .kt-submenu { display: flex; } /* Breadcrumb auf Unterseiten */ .kt-breadcrumb { font-family: var(--kt-mono); font-size: 12px; color: var(--kt-text-muted); margin-bottom: 6px; } .kt-breadcrumb a { color: var(--kt-text-muted); } .kt-breadcrumb a:hover { color: var(--kt-text); } /* Light mode toggle button - bewusst unauffällig, oben rechts frei schwebend, nimmt keinen Platz vom Nav-Layout weg */ .kt-mode-toggle { display: block; margin: 8px 0 0 auto; font-family: var(--kt-mono); font-size: 11px; color: var(--kt-text-muted); background: transparent; border: none; padding: 0; cursor: pointer; opacity: 0.55; } .kt-mode-toggle:hover { opacity: 1; color: var(--kt-text); } /* Hero / terminal prompt block */ .kt-hero { padding: 56px 0 32px; } .kt-prompt-label { font-family: var(--kt-mono); font-size: 13px; color: var(--kt-text-muted); margin-bottom: 8px; } .kt-hero-body { display: flex; align-items: flex-start; gap: 26px; flex-wrap: wrap; } .kt-avatar { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; border: 2px solid var(--kt-border); display: block; flex-shrink: 0; } .kt-hero-text { flex: 1 1 280px; min-width: 0; } .kt-hero h1 { font-size: 30px; font-weight: 600; margin: 0 0 6px; } .kt-tagline { font-family: var(--kt-mono); font-size: 14px; color: var(--kt-text-muted); margin: 0 0 18px; max-width: 60ch; } /* Generische Rundungs-Klasse fuer Markdown-Bilder: ![Bild](x.jpg?cropZoom=300,300&classes=circle) */ .circle { border-radius: 50%; object-fit: cover; } /* Social-Link-Pills mit lokalen FontAwesome-SVG-Icons */ .kt-social { display: flex; flex-wrap: wrap; gap: 10px; } .kt-social-link { display: inline-flex; align-items: center; gap: 7px; font-family: var(--kt-mono); font-size: 12px; color: var(--kt-text); border: 1px solid var(--kt-border); border-radius: 999px; padding: 5px 14px 5px 12px; } .kt-social-link svg { width: 13px; height: 13px; fill: currentColor; flex-shrink: 0; } .kt-social-link:hover { border-color: var(--kt-accent); color: var(--kt-accent); } /* Community-/Projekt-Karten (ruhiger, mit fester Breite statt volles Grid-Stretching) */ .kt-community-grid { display: flex; flex-wrap: wrap; gap: 20px; margin: 4px 0 32px; } .kt-community-card { flex: 0 1 210px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 26px 20px; border: 1px solid var(--kt-border); border-radius: 8px; background: var(--kt-bg-alt); } .kt-community-card:hover { border-color: var(--kt-accent); } .kt-community-link { display: flex; flex-direction: column; align-items: center; gap: 10px; color: var(--kt-text); } .kt-community-link:hover .kt-community-name { color: var(--kt-accent); } .kt-community-logo { width: 56px; height: 56px; border-radius: 8px; object-fit: cover; } .kt-community-name { font-weight: 600; font-size: 13px; } .kt-community-desc { font-size: 12px; color: var(--kt-text-muted); } .kt-community-desc p { margin: 0; } .kt-community-desc a { color: var(--kt-accent); } .kt-community-desc strong { color: var(--kt-text); } /* Page content - Markdown-Typografie */ .kt-content { padding: 8px 0 48px; } .kt-content h1, .kt-content h2, .kt-content h3, .kt-content h4, .kt-content h5, .kt-content h6 { font-weight: 600; line-height: 1.3; margin: 2em 0 0.6em; color: var(--kt-text); } .kt-content h1 { font-size: 28px; } .kt-content h2 { font-size: 21px; } .kt-content h3 { font-size: 17px; } .kt-content h4 { font-size: 15px; } .kt-content h5 { font-size: 13px; color: var(--kt-text-muted); } .kt-content h6 { font-size: 12px; color: var(--kt-text-muted); text-transform: uppercase; letter-spacing: 0.06em; } .kt-content h2::before, .kt-content h3::before { font-family: var(--kt-mono); color: var(--kt-accent); margin-right: 10px; opacity: 0.7; font-weight: 400; } .kt-content h2::before { content: '##'; } .kt-content h3::before { content: '###'; } .kt-content p { margin: 0 0 1em; } .kt-content strong { color: var(--kt-text); font-weight: 600; } .kt-content kbd { font-family: var(--kt-mono); font-size: 0.85em; background: var(--kt-bg-alt); border: 1px solid var(--kt-border); border-bottom: 2px solid var(--kt-border); border-radius: 4px; padding: 1px 6px; } .kt-content mark { background: color-mix(in srgb, var(--kt-accent) 30%, transparent); color: var(--kt-text); padding: 0 3px; border-radius: 3px; } .kt-content cite { color: var(--kt-text-muted); font-style: italic; } .kt-content abbr { text-decoration: underline dotted; text-decoration-color: var(--kt-text-muted); cursor: help; } .kt-content var { font-family: var(--kt-mono); font-style: italic; color: var(--kt-text-muted); } .kt-content del { color: var(--kt-text-muted); } .kt-content time { font-family: var(--kt-mono); color: var(--kt-text-muted); font-size: 0.9em; } .kt-content sup, .kt-content sub { color: var(--kt-text-muted); } .kt-content a { color: var(--kt-accent); } .kt-content a:hover { border-bottom-color: var(--kt-accent); } .kt-content ul, .kt-content ol { margin: 0 0 1em; padding-left: 1.3em; list-style: none; } .kt-content li { position: relative; margin-bottom: 0.4em; } .kt-content li > ul, .kt-content li > ol { margin: 0.4em 0 0; } .kt-content ul li::before { content: '\203A'; position: absolute; left: -1.2em; color: var(--kt-accent); font-family: var(--kt-mono); } .kt-content ol { counter-reset: kt-ol; padding-left: 1.6em; } .kt-content ol li { counter-increment: kt-ol; } .kt-content ol li::before { content: counter(kt-ol) '.'; position: absolute; left: -1.5em; color: var(--kt-accent); font-family: var(--kt-mono); font-size: 0.9em; } .kt-content ol ol { counter-reset: kt-ol; } .kt-content blockquote { margin: 1.2em 0; padding: 0.2em 1em; border-left: 3px solid var(--kt-accent); color: var(--kt-text-muted); font-style: italic; } .kt-content blockquote p:last-child { margin-bottom: 0; } .kt-content hr { border: none; border-top: 1px solid var(--kt-border); margin: 2.5em 0; } .kt-content table { width: 100%; border-collapse: collapse; margin: 1.2em 0; font-size: 0.92em; } .kt-content th, .kt-content td { border: 1px solid var(--kt-border); padding: 8px 12px; text-align: left; } .kt-content th { font-family: var(--kt-mono); color: var(--kt-text-muted); background: var(--kt-bg-alt); font-weight: 500; } .kt-content img { max-width: 100%; border-radius: 6px; border: 1px solid var(--kt-border); } .kt-content code { font-family: var(--kt-mono); background: var(--kt-bg-alt); border: 1px solid var(--kt-border); border-radius: 6px; padding: 2px 6px; font-size: 0.9em; overflow-wrap: break-word; word-break: break-word; } .kt-content pre { font-family: var(--kt-mono); background: var(--kt-bg-alt); border: 1px solid var(--kt-border); border-radius: 6px; overflow: hidden; } .kt-content pre code { display: block; background: none; border: none; border-radius: 0; padding: 14px; font-size: 1em; overflow-x: auto; overflow-wrap: normal; word-break: normal; white-space: pre; } .kt-code-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 8px 6px 14px; border-bottom: 1px solid var(--kt-border); background: rgba(255, 255, 255, 0.02); } .kt-code-meta { display: flex; align-items: center; gap: 10px; min-width: 0; font-family: var(--kt-mono); font-size: 11px; } .kt-code-filename { color: var(--kt-text); opacity: 0.85; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .kt-code-lang { color: var(--kt-text-muted); border: 1px solid var(--kt-border); border-radius: 4px; padding: 1px 6px; text-transform: lowercase; } .kt-code-copy { flex-shrink: 0; font-family: var(--kt-mono); font-size: 11px; color: var(--kt-text-muted); background: transparent; border: none; padding: 2px 6px; cursor: pointer; opacity: 0.6; } .kt-code-copy:hover { opacity: 1; color: var(--kt-text); } /* Alert-Boxen des github-markdown-alerts Plugins ans dunkle Theme anpassen */ .kt-content .md-alert { border: 1px solid var(--kt-border); border-left: 3px solid var(--kt-text-muted); border-radius: 6px; background: var(--kt-bg-alt); padding: 12px 16px; margin: 1rem 0; color: var(--kt-text); } .kt-content .md-alert-title { display: flex; align-items: center; gap: 6px; font-weight: 600; margin: 0 0 6px; color: var(--kt-text); } .kt-content .md-alert-title svg { fill: currentColor; width: 16px; height: 16px; flex-shrink: 0; } .kt-content .md-alert-body p { margin: 0; color: var(--kt-text); } .kt-content .md-alert--note { border-left-color: var(--gh-alert-note-border-color, #316dca); } .kt-content .md-alert--tip { border-left-color: var(--gh-alert-tip-border-color, #347d39); } .kt-content .md-alert--important { border-left-color: var(--gh-alert-important-border-color, #8256d0); } .kt-content .md-alert--warning { border-left-color: var(--gh-alert-warning-border-color, #c69026); } .kt-content .md-alert--caution { border-left-color: var(--gh-alert-caution-border-color, #c93c37); } /* Blinking cursor, dezent eingesetzt */ .kt-cursor { display: inline-block; width: 8px; height: 1em; background: var(--kt-accent); vertical-align: text-bottom; animation: kt-blink 1s step-end infinite; } @keyframes kt-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } /* Footer */ .kt-footer { border-top: 1px solid var(--kt-border); padding: 20px 0 32px; font-family: var(--kt-mono); font-size: 12px; color: var(--kt-text-muted); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; } .kt-footer a { color: var(--kt-text-muted); } .kt-login-status, .kt-login-status * { font-family: var(--kt-mono) !important; font-size: 12px !important; color: var(--kt-text-muted) !important; } .kt-login-status a:hover { color: var(--kt-accent) !important; } /* Datum auf einzelnen Blog-Beitraegen */ .kt-post-date { font-family: var(--kt-mono); font-size: 13px; color: var(--kt-text-muted); margin: -8px 0 18px; } /* Post-Liste auf der Blog-Uebersichtsseite */ .kt-post-list { display: flex; flex-direction: column; margin: 4px 0 40px; } .kt-post-item { display: grid; grid-template-columns: 80px 1fr 220px; align-items: start; gap: 4px 16px; padding: 14px 4px; border-bottom: 1px solid var(--kt-border); color: var(--kt-text); } .kt-post-item:first-child { border-top: 1px solid var(--kt-border); } .kt-post-item-date { font-family: var(--kt-mono); font-size: 12px; color: var(--kt-text-muted); padding-top: 2px; } .kt-post-item-title { font-weight: 600; font-size: 14px; min-width: 0; } .kt-post-item-summary { font-size: 13px; color: var(--kt-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; padding-top: 2px; } .kt-post-item:hover { border-bottom-color: var(--kt-accent); } .kt-post-item:hover .kt-post-item-title { color: var(--kt-accent); } @media (max-width: 560px) { .kt-header-inner { flex-direction: column; align-items: flex-start; } .kt-post-item { grid-template-columns: 1fr; gap: 4px; } .kt-post-item-summary { white-space: normal; overflow: visible; text-overflow: clip; } /* Dropdown auf Mobile: kein schwebendes Popup (funktioniert ohne Maus/Hover nicht gut), stattdessen ein eingebettetes Akkordeon in voller Breite, per Tap auf einen eigenen Pfeil-Button auf-/zugeklappt. Wichtig: ALLE Nav-Kinder (auch einfache , nicht nur .kt-nav-item) bekommen dieselbe Zeilen-Behandlung, sonst brechen nur einzelne Punkte um und die Zeile verzerrt sich. */ .kt-nav { flex-direction: column; align-items: stretch; width: 100%; gap: 0; } .kt-nav > a { padding: 10px 0; border-bottom: 1px solid var(--kt-border); } .kt-nav-item { width: 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--kt-border); } .kt-nav-item > a { flex: 1 1 auto; padding: 10px 0; } .kt-nav-item > a::after { display: none; } .kt-submenu-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex-shrink: 0; background: transparent; border: none; -webkit-appearance: none; appearance: none; color: var(--kt-text-muted); padding: 0; } .kt-submenu-caret { display: inline-block; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform 0.15s ease; } .kt-nav-item.kt-open .kt-submenu-caret { transform: rotate(-135deg); } .kt-submenu { display: none; position: static; width: 100%; max-width: none; padding-top: 0; order: 3; flex-basis: 100%; } .kt-nav-item.kt-open .kt-submenu, .kt-nav-item:focus-within .kt-submenu { display: block; } .kt-submenu-inner { margin: 0 0 10px; border-radius: 8px; } } /* Login-Seite (Login-Plugin) - bewusst OHNE Karten-Look (Rahmen/Hintergrund/ feste Breite), damit es sich wie jede andere Seite ins Layout einfuegt statt ein Einzelfall-Element zu sein. */ .kt-login-box { margin-top: 8px; max-width: 420px; } .kt-login-intro { color: var(--kt-text-muted); font-size: 14px; margin: 0 0 14px; } .kt-login-intro:last-of-type { margin-bottom: 22px; } /* Bewusst generisch gehalten: das Login-Plugin bringt eigene Feld-/Button- Struktur mit, die wir nicht 1:1 kennen. Diese Regeln greifen auf typische Formularelemente zu, ohne Klassennamen des Plugins vorauszusetzen, damit es zur Not auch ohne Anpassung lesbar/funktional bleibt. */ .kt-login-box label { display: block; font-family: var(--kt-mono); font-size: 12px; color: var(--kt-text-muted); margin: 14px 0 4px; } .kt-login-box input[type="checkbox"], .kt-login-box input[type="radio"] { width: auto; margin: 0 6px 0 0; vertical-align: middle; } .kt-login-box input[type="checkbox"] + label, .kt-login-box input[type="radio"] + label { display: inline; margin: 0; vertical-align: middle; } .kt-login-box input[type="text"], .kt-login-box input[type="email"], .kt-login-box input[type="password"] { width: 100%; background: var(--kt-bg); border: 1px solid var(--kt-border); border-radius: 6px; padding: 9px 12px; color: var(--kt-text); font-family: var(--kt-sans); font-size: 16px; } .kt-login-box input[type="text"]:focus, .kt-login-box input[type="email"]:focus, .kt-login-box input[type="password"]:focus { outline: none; border-color: var(--kt-accent); } .kt-login-box button, .kt-login-box input[type="submit"] { margin-top: 18px; background: var(--kt-accent); color: #fff; border: none; border-radius: 6px; padding: 10px 18px; font-family: var(--kt-sans); font-size: 14px; font-weight: 600; cursor: pointer; } .kt-login-box button:hover, .kt-login-box input[type="submit"]:hover { opacity: 0.9; } .kt-login-box a { color: var(--kt-accent); font-size: 13px; } .kt-login-box .alert, .kt-login-box .form-messages { margin-top: 14px; padding: 10px 14px; border-radius: 6px; border: 1px solid var(--kt-border); font-size: 13px; } /* Sicherheitsnetz: falls das Login-Plugin trotz built_in_css:false noch irgendwo eigene helle Hintergrundfarben/Schriftarten auf Wrapper-Elementen mitbringt, zwingen wir alles innerhalb der Box auf Theme-Look. */ .kt-login-box, .kt-login-box * { background-color: transparent !important; color: var(--kt-text); font-family: var(--kt-sans) !important; } .kt-login-box h1, .kt-login-box h2, .kt-login-box h3 { font-family: var(--kt-sans) !important; } .kt-login-box input, .kt-login-box textarea { background-color: var(--kt-bg) !important; } .kt-login-box button, .kt-login-box input[type="submit"] { background-color: var(--kt-accent) !important; color: #fff !important; } .kt-login-box label, .kt-login-box small { color: var(--kt-text-muted) !important; } .kt-login-box h1::before, .kt-login-box h2::before, .kt-login-box h3::before { content: none; }