Create quadriga.css

quadriga-dk · Jan 17, 2025 · bf3df15 · bf3df15
1 parent 3f956ac
commit bf3df15
Showing 1 changed file with 222 additions and 0 deletions.
diff --git a/quadriga.css b/quadriga.css
@@ -0,0 +1,222 @@
+/* Custom variables */
+:root {
+    --quadriga-main: #00305e;
+    --quadriga-main-45: #818bac;
+    --quadriga-main-web: #c1d3e0;
+}
+
+/* Reset ALL default admonition icons */
+.admonition-title::before {
+    content: none !important;
+}
+
+/* Exercise/Übung styling */
+div.exercise {
+    background-color: rgba(66, 165, 245, 0.05) !important;
+    border-left-color: #7baac7 !important;
+}
+
+div.exercise > .admonition-title {
+    background-color: rgba(66, 165, 245, 0.1) !important;
+    color: #4a90c9 !important;
+}
+
+div.exercise > .admonition-title::after {
+    content: "\f44b" !important;
+    float: left !important;
+    padding-right: 0.5rem !important;
+    font-size: 1 em !important;
+    color: #4a90c9 !important;
+}
+
+
+/* Solution/Lösung styling */
+div.solution {
+    background-color: #e8f5e931 !important;
+    border-left-color: #66bb6a !important;
+}
+
+div.solution > .admonition-title {
+    background-color: rgba(102, 187, 106, 0.1) !important;
+    color: #43a047 !important;
+}
+
+div.solution > .admonition-title::after {
+    content: "\f06e" !important;  /* FontAwesome eye icon */
+    font-family: "Font Awesome 5 Free" !important;
+    font-weight: 900 !important;
+    float: left !important;
+    padding-right: 0.5rem !important;
+    font-size: 1em !important;
+    color: #43a047 !important;
+}
+
+/* keypoint styling */
+div.keypoint {
+    background-color: #fff6e026 !important;
+    border-left-color: #f2a541 !important;
+}
+
+div.keypoint > .admonition-title {
+    background-color: rgba(251, 140, 0, 0.1) !important;
+    color: #f2a541 !important;
+}
+
+div.keypoint > .admonition-title::after {
+    content: "\f0eb" !important;  /* FontAwesome lightbulb icon */
+    font-family: "Font Awesome 5 Free" !important;
+    font-weight: 900 !important;
+    float: left !important;
+    padding-right: 0.5rem !important;
+    font-size: 1em !important;
+    color: #f2a541 !important;
+}
+
+/* Hinweis styling */
+div.hinweis {
+    background-color: rgba(108, 160, 216, 0.05) !important;
+    border-left-color: #6ca0d8ad !important;
+}
+
+div.hinweis > .admonition-title {
+    background-color: rgba(108, 160, 216, 0.1) !important;
+    color: #6ca0d8e3 !important;
+}
+
+div.hinweis > .admonition-title::after {
+    content: "\f08d" !important;  /* FontAwesome thumbtack icon */
+    font-family: "Font Awesome 5 Free" !important;
+    font-weight: 900 !important;
+    float: left !important;
+    padding-right: 0.5rem !important;
+    font-size: 1.2em !important;
+    color: #6ca0d8ad !important;
+}
+
+/* lernziele styling */
+/* lernziele styling */
+div.lernziele {
+    background-color: #f7fbff !important;
+    border-left-color: #00305e !important;
+}
+
+div.lernziele > .admonition-title {
+    background-color: rgba(0, 48, 94, 0.1) !important;
+    color: #00305e !important;
+}
+
+div.lernziele > .admonition-title::after {
+    content: "\f19d" !important;  /* FontAwesome graduation-cap icon */
+    font-family: "Font Awesome 5 Free" !important;
+    font-weight: 900 !important;
+    float: left !important;
+    padding-right: 0.5rem !important;
+    font-size: 1 em !important;
+    color: #00305e !important;
+}
+
+/* Dark mode overrides for lernziele */
+html[data-theme='dark'] div.lernziele {
+    background-color: rgba(193, 211, 224, 0.1) !important;
+    border-left-color: var(--quadriga-main-web) !important;
+}
+
+html[data-theme='dark'] div.lernziele > .admonition-title {
+    background-color: rgba(193, 211, 224, 0.15) !important;
+    color: var(--quadriga-main-web) !important;
+}
+
+html[data-theme='dark'] div.lernziele > .admonition-title::after {
+    color: var(--quadriga-main-web) !important;
+}
+
+/* Caution styling */
+div.caution {
+    background-color: #ffe6e61f !important;
+    border-left-color: #f08a8a !important;
+}
+
+div.caution > .admonition-title {
+    background-color: rgba(211, 47, 47, 0.1) !important;
+    color: #c85454 !important;
+}
+
+div.caution > .admonition-title::after {
+    content: "\f071" !important;  /* FontAwesome exclamation-triangle icon */
+    font-family: "Font Awesome 5 Free" !important;
+    font-weight: 900 !important;
+    float: left !important;
+    padding-right: 0.5rem !important;
+    font-size: 1 em !important;
+    color: #c85454 !important;
+}
+
+/* Externer Link mit ↗ */
+.external-link:after {
+    color: var(--quadriga-main);
+    content: "↗";
+}
+
+/* mailto: link mit 📧 */
+a[href^="mailto:"]:after {
+    color: var(--quadriga-main);
+    content: "📧";
+}
+
+/* margin for frage-feedback styling */
+div.frage-feedback {
+    background-color: #f7fbff !important;
+    border-left-color: #00305e !important;
+}
+
+div.frage-feedback  > .admonition-title {
+    background-color: rgba(0, 48, 94, 0.1) !important;
+    color: #00305e !important;
+}
+
+div.frage-feedback  > .admonition-title::after {
+    content: "\f059";  /* FontAwesome question-circle icon */
+    font-family: "Font Awesome 5 Free";
+    font-weight: 900;
+    float: left !important;
+    padding-right: 0.5rem !important;
+    font-size: 1 em !important;
+    color: #00305e !important;
+}
+
+/* Dark mode overrides for frage-feedback */
+html[data-theme='dark'] div.frage-feedback {
+    background-color: rgba(193, 211, 224, 0.1) !important;
+    border-left-color: var(--quadriga-main-web) !important;
+}
+
+html[data-theme='dark'] div.frage-feedback > .admonition-title {
+    background-color: rgba(193, 211, 224, 0.15) !important;
+    color: var(--quadriga-main-web) !important;
+}
+
+html[data-theme='dark'] div.frage-feedback > .admonition-title::after {
+    color: var(--quadriga-main-web) !important;
+}
+
+
+/* citation information styling */
+div.citation-information {
+    background-color: #f7fbff !important;
+    border-left-color: #00305e !important;
+}
+
+div.citation-information  > .admonition-title {
+    background-color: rgba(0, 48, 94, 0.1) !important;
+    color: #00305e !important;
+}
+
+div.citation-information  > .admonition-title::after {
+    content: "\f10d";  /* FontAwesome quote left icon */
+    font-family: "Font Awesome 5 Free";
+    font-weight: 900;
+    float: left !important;
+    padding-right: 0.5rem !important;
+    font-size: 1 em !important;
+    color: #00305e !important;
+}