css colors: replace hard coded values with vars

inveniosoftware · Jun 18, 2024 · cd4a9da · cd4a9da
1 parent 90270cd
commit cd4a9da
Showing 1 changed file with 32 additions and 27 deletions.
diff --git a/docs/stylesheets/extra.css b/docs/stylesheets/extra.css
@@ -1,6 +1,11 @@
 /* Color variables
 https://github.com/squidfunk/mkdocs-material/blob/master/src/templates/assets/stylesheets/main/_colors.scss
 */
+:root {
+    --color-invenio: #0377cd;
+    --color-black: #000000;
+    --color-white: #ffffff;
+}
 
 [data-md-color-scheme="default"] {
     --md-primary-fg-color: #707070;
@@ -9,15 +14,15 @@ https://github.com/squidfunk/mkdocs-material/blob/master/src/templates/assets/st
 
     /* .md-typeset a, */
     .md-nav__link--active {
-        color: #000000;
+        color: var(--color-black);
         opacity: 0.54;
     }
     .md-tabs__link{
-        color: white;
+        color: var(--color-white);
     }
     .md-typeset a:hover,
     .md-nav__link:hover {
-        color: #000000;
+        color: var(--color-black);
     }
 
     .md-nav__title {
@@ -35,7 +40,7 @@ https://github.com/squidfunk/mkdocs-material/blob/master/src/templates/assets/st
             rgba(3, 119, 205, 1) 52.52%,
             rgba(251, 130, 115, 0.69))
             no-repeat;
-        color: #ffffff;
+        color: var(--color-white);
     }
     .md-tabs  {
         background: linear-gradient(
@@ -44,12 +49,12 @@ https://github.com/squidfunk/mkdocs-material/blob/master/src/templates/assets/st
             rgba(3, 119, 205, 1) 52.52%,
             rgba(251, 130, 115, 0.69))
             no-repeat;
-        color: #ffffff;
+        color: var(--color-white);
     }
 
     .md-search form.md-search__form {
         background-color: rgba(255,255,255, 0.1);
-        color: #fff;
+        color: var(--color-white);
         transition: 0.3 ease-in;
     }
 
@@ -59,7 +64,7 @@ https://github.com/squidfunk/mkdocs-material/blob/master/src/templates/assets/st
 
     .md-header[data-md-state="shadow"] {
         box-shadow: none;
-        border-bottom: 0.05rem solid #ffffff;
+        border-bottom: 0.05rem solid var(--color-white);
     }
 
     .md-header__topic:first-child {
@@ -76,21 +81,21 @@ https://github.com/squidfunk/mkdocs-material/blob/master/src/templates/assets/st
     }
 
     .md-footer {
-        border-top: 0.05rem solid #ffffff;
-        background-color: #0377cd;
+        border-top: 0.05rem solid var(--color-white);
+        background-color: var(--color-invenio);
     }
 
     .md-footer__link {
         padding-top: 0.8rem;
         padding-bottom: 0;
-        color: #ffffff;
+        color: var(--color-white);
         opacity: 0.75;
         margin-bottom: 0;
         margin-top: 0;
     }
 
     .md-footer__direction {
-        color: #ffffff;
+        color: var(--color-white);
         opacity: 0.75;
         font-size: .64rem;
         left: 0;
@@ -117,11 +122,11 @@ https://github.com/squidfunk/mkdocs-material/blob/master/src/templates/assets/st
     }
 
     .md-footer-meta {
-        background-color: rgb(1, 98, 170);
+        background-color: #0162aa;
     }
 
     html .md-footer-meta .md-footer-meta__inner a {
-        color: #ffffff;
+        color: var(--color-white);
     }
 
     .md-footer-meta__inner {
@@ -152,7 +157,7 @@ https://github.com/squidfunk/mkdocs-material/blob/master/src/templates/assets/st
     }
 
     .md-search-result__link[data-md-state="active"] {
-        background-color: #ffffff;
+        background-color: var(--color-white);
     }
 
 
@@ -174,11 +179,11 @@ https://github.com/squidfunk/mkdocs-material/blob/master/src/templates/assets/st
     .md-typeset h6[id] .headerlink:focus,
     .md-typeset h6[id]:hover .headerlink:hover,
     .md-typeset h6[id]:target .headerlink {
-        color: #0377cd;
+        color: var(--color-invenio);
     }
 
     ::placeholder {
-        color: #ffffff;
+        color: var(--color-white);
     }
 
     .rdm-hero-bg {
@@ -200,7 +205,7 @@ https://github.com/squidfunk/mkdocs-material/blob/master/src/templates/assets/st
     }
 
     .frontpage .md-main {
-        background-color: white;
+        background-color: var(--color-white);;
     }
 }
 
@@ -229,24 +234,24 @@ https://github.com/squidfunk/mkdocs-material/blob/master/src/templates/assets/st
 
 /* Common styles */
 .md-typeset .md-button.md-button--primary {
-    background-color: white;
-    border-color: white;
-    color: #0377cd;
+    background-color: var(--color-white);
+    border-color: var(--color-white);
+    color: var(--color-invenio);
     opacity: 100%;
 }
 
 .rdm-hero > a.md-button.md-button--primary:hover {
     background-color: transparent;
-    border-color: white;
-    color: white;
+    border-color: var(--color-white);
+    color: var(--color-white);
 }
 .md-typeset .md-button--primary {
-    color: white;
+    color: var(--color-white);
     opacity: 100%;
 }
 
 .md-typeset .md-button {
-    color: white;
+    color: var(--color-white);
 }
 
 .rdm-hero-bg {
@@ -334,9 +339,9 @@ https://github.com/squidfunk/mkdocs-material/blob/master/src/templates/assets/st
 }
 
 .rdm-hero > a.md-button:hover {
-    background-color: white;
-    border-color: white;
-    color: #0377cd;
+    background-color: var(--color-white);
+    border-color: var(--color-white);
+    color: var(--color-invenio);
 }
 
 .frontpage .md-main > .md-main__inner, .frontpage .md-main .md-content__inner {