Update: CSS file

Added styling for zeitinfo and story sections with dark mode support.

Author: lam1aa

_static/quadriga.css

@@ -1,10 +1,17 @@
+/* font-awesome icons library */
+@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css');
+
 /* Custom variables */
 :root {
     --quadriga-main: #00305e;
     --quadriga-main-45: #818bac;
     --quadriga-main-web: #c1d3e0;
 }
 
+html[data-theme='dark'] .navbar-brand img {
+    filter: invert(95%) hue-rotate(190deg) saturate(60%) brightness(135%);
+}
+
 /* Reset ALL default admonition icons */
 .admonition-title::before {
     content: none !important;
@@ -119,7 +126,8 @@ html[data-theme='dark'] div.caution > .admonition-title,
 html[data-theme='dark'] div.hinweis > .admonition-title,
 html[data-theme='dark'] div.keypoint > .admonition-title,
 html[data-theme='dark'] div.solution > .admonition-title,
-html[data-theme='dark'] div.exercise > .admonition-title {
+html[data-theme='dark'] div.exercise > .admonition-title,
+html[data-theme='dark'] div.story > .admonition-title {
     color: #CED6DD !important;
 }
 
@@ -250,9 +258,81 @@ html[data-theme='dark'] div.citation-information > .admonition-title::after {
 
 /* Dark mode styling for Jupyter notebook cells */
 html[data-theme='dark'] div.cell div.cell_input,
-html[data-theme='dark'] div.cell details.above-input > summary {
+html[data-theme='dark'] div.cell div.cell_output,
+html[data-theme='dark'] div.cell details.above-input > summary,
+html[data-theme='dark'] div.cell details.above-output > summary {
     background-color: #29313d !important;
     color: #f7fbff !important;
 }
 
 
+/* Zeitinfo/Bearbeitungszeit styling */
+div.zeitinfo {
+    background-color: #fff9f4 !important;             /* sehr helles Apricot */
+    border-left-color: #e59d7e !important;            /* weiches Apricot */
+}
+
+div.zeitinfo > .admonition-title {
+    background-color: rgba(229, 157, 126, 0.12) !important;
+    color: #cc6f53 !important;                        /* kräftigerer Apricot-Ton */
+}
+
+div.zeitinfo > .admonition-title::after {
+    content: "\f017" !important;                      /* Font Awesome clock */
+    float: left !important;
+    padding-right: 0.5rem !important;
+    font-size: 1em !important;
+    font-family: "Font Awesome 5 Free";
+    font-weight: 900;
+    color: #cc6f53 !important;                  /* Apricot-Farbe für das Icon */
+}
+
+/* Dark mode overrides for zeitinfo */
+html[data-theme='dark'] div.zeitinfo {
+    background-color: rgba(229, 157, 126, 0.1) !important;
+    border-left-color: #e59d7e !important;
+}
+
+html[data-theme='dark'] div.zeitinfo > .admonition-title {
+    background-color: rgba(229, 157, 126, 0.15) !important;
+    color: #e59d7e !important;
+}
+
+html[data-theme='dark'] div.zeitinfo > .admonition-title::after {
+    color: #e59d7e !important;
+}
+
+/* Story styling */
+div.story {
+    background-color: #faf8ff !important;             /* sehr helles Lila */
+    border-left-color: #8e44ad !important;            /* weiches Lila */
+}
+
+div.story > .admonition-title {
+    background-color: rgba(142, 68, 173, 0.12) !important;
+    color: #222832 !important;
+}
+
+div.story > .admonition-title::after {
+    content: "\f02d" !important;                      /* Font Awesome book */
+    float: left !important;
+    padding-right: 0.5rem !important;
+    font-size: 1em !important;
+    font-family: "Font Awesome 5 Free";
+    font-weight: 900;
+    color: #7a3a96 !important;                        /* Lila-Farbe für das Icon */
+}
+
+/* Dark mode overrides for story */
+html[data-theme='dark'] div.story {
+    background-color: rgba(142, 68, 173, 0.1) !important;
+    border-left-color: #8e44ad !important;
+}
+
+html[data-theme='dark'] div.story > .admonition-title {
+    background-color: rgba(142, 68, 173, 0.15) !important;
+}
+
+html[data-theme='dark'] div.story > .admonition-title::after {
+    color: #b876d1
+}