Changed colours of some admonitions

TeachBooks · Dec 14, 2024 · a8af50e · a8af50e
1 parent 4809bf1
commit a8af50e
Showing 1 changed file with 105 additions and 76 deletions.
diff --git a/src/sphinx_tudelft_theme/static/tudelft_style.css b/src/sphinx_tudelft_theme/static/tudelft_style.css
@@ -1,5 +1,3 @@
-
-
 :root {
     --raspberry: rgb(165,0,52);
     --raspberry-min: rgb(165,0,52,3%);
@@ -20,6 +18,8 @@
     --orange-min: #EC684210;
     --orange-mid: #EC684225;
     --cyan: #00A6D6;
+    --cyan-min: #00A6D610;
+    --cyan-mid: #00A6D625;
     --gray: #7d7d7d;
     --gray-min: #7d7d7d05;
     --gray-mid: #7d7d7d20;
@@ -37,6 +37,25 @@
     --green-mid: #6CC24A25;
   }
 
+  /* BLOCK COMPONENTS (admonitions, proofs, exercises) */
+
+  /* Admonition */
+  div.admonition {
+    border-color: var(--cyan);
+    background-color: var(--cyan-min);
+  }
+   div.admonition > .admonition-title {
+    background-color: var(--cyan-mid);
+  }
+   div.admonition > .admonition-title::after {
+    color: var(--cyan);
+  }
+
+  /* Proof */
+  div.admonition.proof {
+    background-color:#FFF;
+  }
+
   /* Grasple */
   div.grasple p.admonition-title::after {
     content: "\f12e";
@@ -53,7 +72,7 @@
     background-color: var(--raspberry-mid);
   }
 
-  /* Exercise */
+   /* Exercise */
   div.exercise p.admonition-title::after {
     content: "\f12e";
     color: var(--raspberry);
@@ -81,76 +100,62 @@
   div.definition > p.admonition-title {
     background-color: var(--blue-mid);
   }
-
-  /* Criterion */
-  div.criterion p.admonition-title::after {
-    content: "\f058";
-    color: var(--orange);
-  }
-  div.criterion {
-    border-color: var(--orange);
-    background-color: var(--orange-min);
-  }
-  div.criterion > p.admonition-title {
-    background-color: var(--orange-mid);
-  }
-
-  /* Axiom, Lemma, Conjecture */
+
+  /* Axiom, Conjecture, Assumption */
   div.axiom  p.admonition-title::after,
-  div.lemma  p.admonition-title::after,
+  div.assumption  p.admonition-title::after,
   div.conjecture  p.admonition-title::after {
-    content: "\f0e3";
-    color: var(--yellow);
+    content: "\f19c";
+    color: var(--red);
   }
   div.axiom, 
-  div.lemma, 
+  div.assumption,
   div.conjecture{
-    border-color: var(--yellow);
-    background-color: var(--yellow-min);
+    border-color: var(--red);
+    background-color: var(--red-min);
   }
   div.axiom > p.admonition-title,
-  div.lemma > p.admonition-title,
+  div.assumption > p.admonition-title,
   div.conjecture > p.admonition-title{
-    background-color: var(--yellow-mid);
+    background-color: var(--red-mid);
   }
 
-  /* Property */
-  div.property  p.admonition-title::after {
+  /* Property, Observation */
+  div.property  p.admonition-title::after,
+  div.admonition.observation > .admonition-title::after {
     content: "\f02b";
     color: var(--orange);
   }
-  div.property{
+  div.property,
+  div.admonition.observation{
     border-color: var(--orange);
     background-color: var(--orange-min);
   }
-  div.property > p.admonition-title{
+  div.property > p.admonition-title,
+  div.admonition.observation > .admonition-title{
     background-color: var(--orange-mid);
   }
 
-  /* Assumption */
-  div.assumption  p.admonition-title::after {
-    color: var(--yellow);
-  }
-  div.assumption{
-    border-color: var(--yellow);
-    background-color: var(--yellow-min);
-  }
-  div.assumption > p.admonition-title{
-    background-color: var(--yellow-mid);
-  }
-
-  /* Theorem, Preposition, Corollary */
+  /* Theorem, Lemma, Preposition, Corollary, Criterion  */
   div.theorem  p.admonition-title::after,
+  div.criterion p.admonition-title::after,
+  div.lemma  p.admonition-title::after,
   div.proposition p.admonition-title::after,
   div.corollary p.admonition-title::after {
     content: "\f51b";
     color: var(--darkGreen);
   }
-  div.theorem, div.proposition, div.corollary {
+  div.theorem, 
+  div.criterion,
+  div.lemma,
+  div.proposition, 
+  div.corollary {
     border-color: var(--darkGreen);
     background-color: var(--darkGreen-min);
   }
   div.theorem > p.admonition-title,
+  div.criterion > p.admonition-title,
+  div.lemma > p.admonition-title,
    div.proposition > p.admonition-title,
    div.corollary >p.admonition-title {
     background-color: var(--darkGreen-mid);
@@ -163,6 +168,7 @@
   }
   div.example > p.admonition-title {
     background-color: var(--yellow-mid);
+    /* color: white; */
   }
   div.example p.admonition-title::after {
     content: "\f002";
@@ -182,7 +188,7 @@
     content: "\e5a0";
     color: var(--purple);
   }
-
+  
   /* TU Delft Proof */
   div.admonition.tudproof {
     border-color: var(--darkGreen);
@@ -198,17 +204,17 @@
 
   /* Algorithm */
   div.algorithm > .admonition-title::after {
-    content: "\f120";
-    color: var(--blue);
+    content: "\f051";
+    color: var(--darkBlue);
   }
   div.algorithm {
-    border-color: var(--blue);
-    background-color: var(--blue-min);
+    border-color: var(--darkBlue);
+    background-color: var(--darkBlue-min);
   }
   div.algorithm > .admonition-title {
-    background-color: var(--blue-mid);
-    border-top: .15rem solid var(--blue-mid);
-    border-bottom: .15rem solid var(--blue-mid);
+    background-color: var(--darkBlue-mid);
+    border-top: .15rem solid var(--darkBlue-mid);
+    border-bottom: .15rem solid var(--darkBlue-mid);
   }
 
   /* Bonus */
@@ -243,7 +249,8 @@
   }
 
   /* Danger, Error */
-  div.admonition.danger, div.admonition.error {
+  div.admonition.danger, 
+  div.admonition.error {
     border-color: var(--red);
     background-color: var(--red-min);
   }
@@ -255,27 +262,33 @@
    div.admonition.error > .admonition-title::after {
     color: var(--red);
   }
-
-  /* Hint, Note, SeeAlso, Tip, Remark, Observation */
-  div.admonition.hint, div.admonition.note, div.admonition.seealso, div.admonition.tip, div.admonition.remark, div.admonition.observation {
+
+  /* Hint, Note, SeeAlso, Tip, Remark */
+  div.admonition.hint, 
+  div.admonition.note, 
+  div.admonition.seealso, 
+  div.admonition.tip, 
+  div.admonition.remark {
     border-color: var(--green);
     background-color: var(--green-min);
   }
   div.admonition.hint > .admonition-title,
    div.admonition.note > .admonition-title,
     div.admonition.seealso > .admonition-title,
      div.admonition.tip > .admonition-title,
-      div.admonition.remark > .admonition-title,
-      div.admonition.observation > .admonition-title  {
+      div.admonition.remark > .admonition-title  {
     background-color: var(--green-mid);
   }
   div.admonition.hint > .admonition-title::after,
    div.admonition.note > .admonition-title::after,
     div.admonition.seealso > .admonition-title::after,
      div.admonition.tip > .admonition-title::after,
-     div.admonition.remark > .admonition-title::after,
-     div.admonition.observation > .admonition-title::after {
+     div.admonition.remark > .admonition-title::after {
     color: var(--green);
+  }
+
+  /* Sticky note for remark */
+  div.admonition.remark > .admonition-title::after {
     content: "\f249";
   }
 
@@ -311,7 +324,7 @@
     color: var(--red);
   }
 
-   /* BADGES */
+  /* BADGES */
 
   /* all badges */
   .sd-badge {
@@ -322,21 +335,20 @@
     border-radius: .45rem;
   }
 
-  /* primary, info */
-  .sd-bg-primary,
-  .sd-bg-info{
+  /* primary */
+  .sd-bg-primary{
     color: #FFFFFF !important;
-    background-color: var(--blue) !important;
+    background-color: var(--cyan) !important;
   }
-  /* primary-line, info-line */
-  .sd-outline-primary,
-  .sd-outline-info{
-    color: var(--blue) !important;
-    border-color: var(--blue) !important;
+  /* primary-line */
+  .sd-outline-primary{
+    color: var(--cyan) !important;
+    border-color: var(--cyan) !important;
   }
 
   /* secondary */
-  .sd-bg-secondary{
+  .sd-bg-secondary,
+  .sd-btn-secondary{
     color: #FFFFFF !important;
     background-color: var(--yellow) !important;
   }
@@ -357,6 +369,17 @@
     border-color: var(--darkGreen) !important;
   }
 
+  /* info */
+  .sd-bg-info{
+    color: #FFFFFF !important;
+    background-color: var(--blue) !important;
+  }
+  /* info-line */
+  .sd-outline-info{
+    color: var(--blue) !important;
+    border-color: var(--blue) !important;
+  }
+
   /* warning */
   .sd-bg-warning{
     color: #FFFFFF !important;
@@ -434,7 +457,6 @@
     border-color: var(--black) !important;
   }
 
-
   /* BUTTONS */
 
   /* all buttons */
@@ -449,12 +471,12 @@
     border: 0 !important;
   }
 
-  /* primary, info */
+  /* primary */
   .sd-btn-primary,
   .sd-btn-info{
     color: #FFFFFF !important;
-    background-color: var(--blue) !important;
-    border-color: var(--blue) !important;
+    background-color: var(--cyan) !important;
+    border-color: var(--cyan) !important;
   }
 
   /* secondary */
@@ -471,6 +493,13 @@
     border-color: var(--darkGreen) !important;
   }
 
+   /* info */
+   .sd-btn-info{
+     color: #FFFFFF !important;
+     background-color: var(--blue) !important;
+     border-color: var(--blue) !important;
+   }
+
   /* warning */
   .sd-btn-warning{
     color: #FFFFFF !important;
@@ -518,4 +547,4 @@
     color: #FFFFFF !important;
     background-color: var(--black) !important;
     border-color: var(--black) !important;
-  }
+  }