/* Elektronmods-Anpassungen für Dazzle. Wird nach global.css geladen und überschreibt dort nur gezielt. */ /* Header ohne obere Leiste: Logo links, Login/Register bzw. Benutzer-Links rechts daneben. Verlauf per CSS mit den Farben aus Dazzles header_bg.png (Zeilen 43–192). Das Bild selbst endet mit einer gestrichelten Linie, die bei Browser-Zoom/Retina-Skalierung an der Unterkante durchscheint. */ #header { height: 150px; background: #384958 linear-gradient(to bottom, #5e707f 0, #4d5f6e 56px, #3f5160 106px, #384958 149px); } .header-top { display: flex; align-items: center; justify-content: space-between; height: 92px; } .header-top .branding { display: block; height: auto; line-height: 0; margin: 0; } .header-top .logo { float: none; display: inline-block; } #panel { font-family: Arial, Sans-Serif; font-style: normal; font-size: 12px; text-shadow: none; } #panel a { color: #fff; transition: color 0.15s, background-color 0.15s; } /* Menüpunkte ohne Untertitel: Schrift mittig in der 58px-Leiste, Höhe wie vorher, damit die Trenner gleich bleiben */ .menu li { height: 48px; } .menu ul a:link, .menu ul a:visited { margin-top: 20px; } /* Suche rechts in der Menüleiste */ .menu .search-box { float: right; margin: 13px 15px 0 0; } /* Dropdowns öffnen nach links, damit sie nicht über den rechten Rand ragen */ #panel .user-dropdown-box { left: auto; right: -5px; border-radius: 4px 0 4px 4px; } #panel .user-dropdown-box::before { left: auto; right: 10px; } /* Beim Quick-Login würde der Pfeil auf Register statt Login zeigen */ #quick_login .user-dropdown-box { border-radius: 4px; } #quick_login .user-dropdown-box::before { display: none; } #panel .loginlink:hover { color: #d7e1ea; } /* Register-Button: flach und modern statt Verlauf und Schatten */ #panel .registerlink { background: #8db318; color: #fff; font-weight: 600; padding: 6px 14px; border-radius: 4px; box-shadow: none; text-shadow: none; } #panel .registerlink:hover { background: #7a9c12; color: #fff; } /* Startseite: Pfadzeile (Breadcrumb) entfällt, sie zeigt dort nur den Forennamen. "index-page" setzt Dazzles index-Template am . */ .index-page .navigation, .index-page .navigation + br { display: none; } /* Unterforen unter dem Forennamen als kleine Karten: oben der Name mit Status-Punkt, darunter die nächste Ebene (z. B. Hardware | Software) als zusammenhängende Buttons mit feiner Trennlinie. Die nächste Ebene liefert das Plugin "Elektronmods Tweaks", ausgegeben über forumbit_subforums und forumbit_depth3. */ .subforumbox { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 10px 0 0; padding: 0; border: 0; background: none; font-size: 12px; } .subforum-row { display: grid; grid-template-columns: auto 1fr; align-items: center; background: #f2f4f6; border-radius: 8px; overflow: hidden; line-height: 1.3; } .subforum-row .subforumicon { margin: 0 7px 0 12px; } /* ".subforumbox" davor, damit Dazzles ".col-forumdetails a" (grau) nicht gewinnt */ .subforumbox .subforum-link { padding: 8px 12px 8px 0; font-weight: bold; color: #316180; } .subforum-children { grid-column: 1 / -1; display: flex; border-top: 1px solid #e0e5ea; } .subforumbox .subforum-children a { flex: 1; padding: 6px 10px; font-size: 11px; text-align: center; color: #6f8494; transition: background-color 0.15s, color 0.15s; } .subforumbox .subforum-children a + a { border-left: 1px solid #e0e5ea; } .subforumbox .subforum-link:hover { color: #1f4660; text-decoration: underline; } .subforumbox .subforum-children a:hover { color: #1f4660; background: #e6ebef; } /* Unterforen ohne eigene nächste Ebene (z. B. Hardware/Software direkt unter Syntakt): ein Button-Paar unter dem Forennamen, gestaltet wie die untere Button-Zeile der Karten (ohne Punkt, nicht fett) */ .subforumbox:not(:has(.subforum-children)) { display: flex; width: fit-content; gap: 0; background: #f2f4f6; border-radius: 8px; overflow: hidden; } .subforumbox:not(:has(.subforum-children)) .subforum-row { display: block; background: none; border-radius: 0; transition: background-color 0.15s; } .subforumbox:not(:has(.subforum-children)) .subforum-row + .subforum-row { border-left: 1px solid #e0e5ea; } .subforumbox:not(:has(.subforum-children)) .subforumicon { display: none; } .subforumbox:not(:has(.subforum-children)) .subforum-link { display: block; min-width: 80px; padding: 6px 10px; font-size: 11px; font-weight: normal; text-align: center; color: #6f8494; } .subforumbox:not(:has(.subforum-children)) .subforum-row:hover { background: #e6ebef; } .subforumbox:not(:has(.subforum-children)) .subforum-link:hover { color: #1f4660; text-decoration: none; } /* Forenliste: Themen/Beiträge als Icons (Tooltip und Screenreader-Text nennen sie), letzter Beitrag ab etwa der Mitte mit vollem Titel statt nach 25 Zeichen abgeschnitten */ .em-sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } table.tborder td.col-postcount { width: 70px; min-width: 0; text-align: left; } .forum-stat { display: block; line-height: 1.6; } .forum-stat .fa { width: 14px; margin-right: 4px; color: #9aa8b3; text-align: center; } table.tborder td.col-lastpost { width: 40%; min-width: 0; } /* Grid mit minmax(0, 1fr) lässt die Tabellenzelle schmaler werden als der Titel; ist er länger, endet er mit "…" (voller Titel im Tooltip) */ .lastpost-box { display: grid; grid-template-columns: minmax(0, 1fr); } .lastpost-subject, .lastpost-meta { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .lastpost-subject { font-weight: bold; } /* "Never" (noch kein Beitrag) ist im Template per Inline-Style zentriert; links wie die Titel */ table.tborder td.col-lastpost > div { text-align: left !important; } /* Find-Button unter Beiträgen entfällt: die Zahlen bei Posts/Threads neben dem Autor verlinken auf die Suche */ .postbit_buttons > a.postbit_find { display: none; } /* ===================================================================== Nachträge aus MyBB 1.8.41, die im älteren Dazzle-CSS (1.8.17) fehlen ===================================================================== */ /* Code wird mit echten Zeilenumbrüchen ausgegeben */ .codeblock code { white-space: pre; tab-size: 4; } .thread_start_datetime { color: #999; } /* Formular-Validierung, z. B. bei der Registrierung */ input.error, textarea.error, select.error { border: 1px solid #f30; color: #f30; } input.valid, textarea.valid, select.valid { border: 1px solid #0c0; } label.error { color: #f30; margin: 5px; padding: 0; display: block; font-weight: bold; font-size: 11px; } blockquote cite > span { float: right; font-weight: normal; font-size: 12px; color: #666; } /* Sperrstufen im ModCP */ .imminent_banned { color: #880000; } .high_banned { color: #FF0000; } .moderate_banned { color: #FF6600; } .low_banned { color: #008000; } /* Gelöschte Beiträge (für Moderatoren sichtbar) */ .deleted_post_hidden { border-top: 2px solid #ccc; padding: 15px; } .deleted_post_collapsed { border-top: 3px solid #333; padding: 15px; } .deleted_post_collapsed .show_deleted_post { margin-top: -15px; } /* ===================================================================== Responsive ===================================================================== */ /* Bilder und Videos in Beiträgen nie breiter als der Beitrag */ .post_body img, .post_body iframe, .post_body video { max-width: 100%; height: auto; } /* Unter 980px: flexible Breite statt fester 960px */ @media (max-width: 979px) { .main_width { width: auto; margin-left: 10px; margin-right: 10px; } form #message { width: 100%; box-sizing: border-box; } .modal { max-width: 90%; box-sizing: border-box; } /* Benutzer-Auswahlfelder (select2, z. B. Empfänger bei privaten Nachrichten) */ #content .select2-container { width: 100% !important; max-width: 100%; box-sizing: border-box; } #content .select2-search-field input { max-width: 100%; } } /* Handy */ @media (max-width: 767px) { input.textbox, textarea, select { max-width: 100%; box-sizing: border-box; } /* Header: Logo und Login bei Platzmangel untereinander; der Verlauf endet nach 149px in der Grundfarbe */ #header { height: auto; } .header-top { height: auto; flex-wrap: wrap; gap: 6px 12px; padding: 14px 0; } /* 32px hoch: Logo und Login/Register passen auf 375px nebeneinander */ .header-top .logo img { max-height: 32px; width: auto; height: auto; } /* bricht die Leiste unter das Logo um, bleibt sie rechtsbündig */ #panel { margin-left: auto; } /* Menü: Suche in eigener Zeile über die volle Breite */ .menu { height: auto; } .menu ul { overflow: hidden; } .menu li, .menu li:first-child { padding-left: 0; margin-left: 0; } .menu ul a:link, .menu ul a:visited { margin: 14px 0; padding: 0 14px; } .menu .search-box { float: none; margin: 0 10px 10px; } .menu .search-box form { display: flex; } .menu .search-box .textbox { flex: 1; min-width: 0; } /* Eingabefelder in Formular-Tabellen: volle Zellenbreite statt fester Zeichenbreite (size/cols), sonst kann die Tabelle nicht schmaler werden als das Feld */ #content table input.textbox, #content table textarea { width: 100%; } /* Lange Wörter und URLs umbrechen, statt Tabellen zu verbreitern */ #content td { overflow-wrap: anywhere; } /* Beitrags-Buttons nur mit Icon. Die Beschriftung bleibt als Tooltip (title) und für Screenreader erhalten. Nur Buttons mit Dazzle-Icon, damit Buttons von Plugins ohne Icon nicht leer werden. */ .postbit_buttons > a:is(.postbit_find, .postbit_reputation_add, .postbit_email, .postbit_website, .postbit_pm, .postbit_quote, .postbit_multiquote, .postbit_edit, .postbit_qdelete, .postbit_qrestore, .postbit_report, .postbit_warn, .postbit_purgespammer, .postbit_reply_pm, .postbit_reply_all, .postbit_forward_pm, .postbit_delete_pm) span { font-size: 0; } .postbit_buttons > a:is(.postbit_find, .postbit_reputation_add, .postbit_email, .postbit_website, .postbit_pm, .postbit_quote, .postbit_multiquote, .postbit_edit, .postbit_qdelete, .postbit_qrestore, .postbit_report, .postbit_warn, .postbit_purgespammer, .postbit_reply_pm, .postbit_reply_all, .postbit_forward_pm, .postbit_delete_pm) span::before { margin-right: 0; font-size: 15px; } .postbit_buttons > a:is(:link, :visited, :hover, :active) { padding: 7px 11px; } /* Smilie-Box neben dem Editor entfällt, der Editor hat einen eigenen Smilie-Button */ #content div:has(> table.tborder #clickable_smilies) { display: none; } /* Zweispaltige Formulare (Beschriftung | Feld): Beschriftung über dem Feld. Tabellen mit mehr Spalten (z. B. Nachrichtenlisten) bleiben unberührt. */ :where(#content form table.tborder:not(:has(> tbody > tr > td:nth-child(3), select[name="forums[]"]))), :where(#content form table.tborder:not(:has(> tbody > tr > td:nth-child(3), select[name="forums[]"]))) > :is(thead, tbody), :where(#content form table.tborder:not(:has(> tbody > tr > td:nth-child(3), select[name="forums[]"]))) > :is(thead, tbody) > tr, :where(#content form table.tborder:not(:has(> tbody > tr > td:nth-child(3), select[name="forums[]"]))) > :is(thead, tbody) > tr > td { display: block; width: auto; } #content form table.tborder:not(:has(> tbody > tr > td:nth-child(3), select[name="forums[]"])) > tbody > tr > td:first-child:not(:last-child) { border-bottom: 0; padding-bottom: 4px; } #captcha_trow table { width: auto !important; } /* User-CP, private Nachrichten, Mod-CP: Layout-Tabelle (Navigation | Inhalt) wird zu Inhalt, darunter Navigation */ :where(#content table[width="100%"]:not(.tborder):has(> tbody > tr > td[valign="top"] + td[valign="top"])), :where(#content table[width="100%"]:not(.tborder):has(> tbody > tr > td[valign="top"] + td[valign="top"])) > tbody, :where(#content table[width="100%"]:not(.tborder):has(> tbody > tr > td[valign="top"] + td[valign="top"])) > tbody > tr > td { display: block; width: auto; } #content table[width="100%"]:not(.tborder):has(> tbody > tr > td[valign="top"] + td[valign="top"]) > tbody > tr { display: flex; flex-direction: column-reverse; gap: 15px; } /* Fallback: ist eine Tabelle darin trotzdem zu breit, scrollt nur die Inhaltsspalte seitlich */ #content table[width="100%"]:not(.tborder):has(> tbody > tr > td[valign="top"] + td[valign="top"]) > tbody > tr > td:last-child { overflow-x: auto; min-width: 0; } /* Suche und Mitgliedersuche: Spalten fest aufteilen, Inhalte schrumpfen mit */ table.tborder:has(select[name="forums[]"]), form[action="memberlist.php"] table.tborder { table-layout: fixed; } table.tborder:has(select[name="forums[]"]) select, form[action="memberlist.php"] table.tborder select { width: 100%; } /* Tabellen mit Foren- bzw. Threadlisten werden zu Blöcken, jede Zeile zu einer Flex-Zeile. :where() hält die Spezifität niedrig, damit die Spaltenregeln darunter greifen. */ :where(table.tborder:has(td.col-forumdetails)), :where(table.tborder:has(td.col-forumdetails)) > thead, :where(table.tborder:has(td.col-forumdetails)) > tbody, :where(table.tborder:has(td.col-forumdetails)) tr, :where(table.tborder:has(td.col-forumdetails)) td, :where(table.tborder:has(> tbody > tr > td > .thread_status)), :where(table.tborder:has(> tbody > tr > td > .thread_status)) > tbody, :where(table.tborder:has(> tbody > tr > td > .thread_status)) tr, :where(table.tborder:has(> tbody > tr > td > .thread_status)) td { display: block; } tr:has(> td.col-forumdetails), table.tborder tr:has(> td > .thread_status) { display: flex; flex-wrap: wrap; } /* Forenliste: Status | Forum, darunter der letzte Beitrag; Themen-/Beitragszahl und Spaltenköpfe entfallen. "table.tborder" hebt die Spezifität über Dazzles ".index_table .trow1" (Status-Zelle dort sogar !important). */ table.tborder:has(td.col-forumdetails) tr:has(> td.tcat), table.tborder td.col-postcount { display: none; } table.tborder td.col-indicator { flex: 0 0 auto; width: auto; padding-bottom: 8px !important; } table.tborder td.col-indicator, table.tborder td.col-forumdetails { border-bottom: 0; padding-bottom: 8px; } table.tborder td.col-forumdetails { flex: 1; min-width: 0; } table.tborder td.col-lastpost { flex: 0 0 100%; box-sizing: border-box; width: auto; min-width: 0; padding-top: 0; padding-left: 82px; white-space: normal !important; text-align: left; } /* Threadlisten (Forum, User-CP, Abonnements, Suche) erkennt man am Status-Icon in der ersten Zelle. Status | Thema, darunter der letzte Beitrag. Entfallen: Icon (2), Antworten bzw. Forum (4), Aufrufe bzw. Antworten (5), Aufrufe nach der Antworten-Zelle, Bewertung. */ table.tborder:has(> tbody > tr > td > .thread_status) tr:has(> td.tcat), tr:has(> td > .thread_status) > td:nth-child(2), tr:has(> td > .thread_status) > td:nth-child(4), tr:has(> td > .thread_status) > td:nth-child(5), tr:has(> td > .thread_status) > td:has(> a[href*="whoposted"]) + td, tr:has(> td > .thread_status) > td[id^="rating_table_"] { display: none; } /* Kopfzeile: Forenname oben, "Mark this forum read | Subscribe" darunter statt rechts daneben */ table.tborder:has(> tbody > tr > td > .thread_status) td.thead:has(> .float_right) { display: flex; flex-direction: column-reverse; gap: 4px; } table.tborder:has(> tbody > tr > td > .thread_status) td.thead > .float_right { float: none; } tr:has(> td > .thread_status) > td:first-child { flex: 0 0 auto; width: auto; } tr:has(> td > .thread_status) > td:first-child, tr:has(> td > .thread_status) > td:nth-child(3), tr:has(> td > .thread_status) > td:has(> input.checkbox) { border-bottom: 0; padding-bottom: 6px; } tr:has(> td > .thread_status) > td:nth-child(3) { flex: 1; min-width: 0; } tr:has(> td > .thread_status) > td:has(a[href*="lastpost"]) { order: 10; flex: 0 0 100%; box-sizing: border-box; padding-top: 0; padding-left: 52px; white-space: normal !important; text-align: left !important; } tr:has(> td > .thread_status) > td:has(a[href*="lastpost"]) br { display: none; } /* Mitgliederliste: Letzter Besuch, Threads und Empfehlungen entfallen */ table.tborder:has(a[href*="sort=lastvisit"]) tr > td:nth-child(4), table.tborder:has(a[href*="sort=lastvisit"]) tr > td:nth-child(6), table.tborder:has(a[href*="sort=lastvisit"]) tr > td:nth-child(7) { display: none; } /* Unterforen-Karten: eine pro Zeile */ .subforumbox { grid-template-columns: minmax(0, 1fr); } /* Button-Paar ohne Karte (Syntakt, Tonverk) so breit wie die Karten */ .subforumbox:not(:has(.subforum-children)) { width: auto; } .subforumbox:not(:has(.subforum-children)) .subforum-row { flex: 1; } /* Legende unter der Forenliste: ein Eintrag pro Zeile */ .forum_legend { display: grid; grid-template-columns: auto 1fr; gap: 6px 10px; align-items: center; } .forum_legend dt, .forum_legend dd { float: none; margin: 0; } /* Footer: Links und Copyright dürfen umbrechen */ .bottommenu { height: auto; line-height: normal; overflow: hidden; } .bottommenu a, .bottommenu a:first-child { height: auto; line-height: 1.4; padding: 10px; margin: 0; border: 0; } .bottommenu .theme { float: none; clear: both; padding: 0 10px 10px; } #copyright { height: auto; line-height: 1.4; padding: 12px 15px; overflow: hidden; } #back-top { height: auto; line-height: normal; padding: 0 0 0 10px; border: 0; } #back-top i { top: 0; } }