diff --git a/src/css/custom.css b/src/css/custom.css
index c12cafc61d6ef7e04d9af3d890efa256345ef0e9..6ca89062534ea5082ca94923d36303af21b52c0a 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -1,8 +1,8 @@
@import url("variables.css");
@import url("fonts.css");
@import url("dark-theme.css");
-@import url("../theme/Footer/footer.css");
@import url("matomo.css");
+@import url("../theme/Footer/footer.css");
html, body {
margin: 0;
@@ -27,19 +27,16 @@ p {
font-weight: 500;
}
-p a {
- color: var(--ifm-color-warning);
-}
-
/****** LINK a ******/
a:hover {
transition: 0.3s;
}
-li a:hover {
+p a {
color: var(--ifm-color-warning);
}
+/* FORM & INPUT */
form > p {
font-size: small;
margin-top: 2em;
@@ -187,9 +184,11 @@ ul {
color: var(--ifm-color-white);
}
-.alert--secondary {
+.alert--secondary, .alert--secondary a, .alert--secondary svg {
--ifm-alert-border-color: var(--ifm-color-gray-500);
--ifm-alert-background-color: var(--ifm-color-gray-100);
+ color: var(--ifm-color-gray-800);
+ fill: var(--ifm-color-gray-600);
}
.alert--success {
diff --git a/src/css/dark-theme.css b/src/css/dark-theme.css
index a0836c1dd5683c85db15e71d45289867ef4e30d7..1b1c12cb775069a0aff67b2cec0f982babef9e5e 100644
--- a/src/css/dark-theme.css
+++ b/src/css/dark-theme.css
@@ -1,5 +1,24 @@
/******** DARK THEME ********/
+/* variables dark theme */
+html[data-theme='dark'] {
+ --ifm-font-color-base: var(--ifm-color-white);
+ --ifm-font-color-base-inverse: var(--ifm-color-white);
+ --ifm-font-color-secondary: var(--ifm-color-white);
+ /* admonitions base */
+ --ifm-color-secondary-contrast-background: var(--ifm-color-gray-700);
+ --ifm-color-success-contrast-background: var(--ifm-color-success);
+ --ifm-color-info-contrast-background: var(--ifm-color-info);
+ --ifm-color-warning-contrast-background: var(--ifm-color-warning);
+ --ifm-color-danger-contrast-background: var(--ifm-color-danger);
+ /* admonitions border */
+ --ifm-alert-border-color: var(--ifm-color-danger);
+ --ifm-alert--success-border: var(--ifm-color-light-green);
+ --ifm-alert--info-border-color: var(--ifm-color-info-lightest);
+ --ifm-alert--warning-border-color: var(--ifm-color-frame);
+ --ifm-alert--danger-border-color: var(--ifm-color-warning);
+}
+
/* background */
html[data-theme='dark'] {
--ifm-background-color: #18191a;
@@ -29,29 +48,41 @@ html[data-theme='dark'] .button--beta:hover {
}
/* a & text */
+html[data-theme='dark'] .theme-doc-footer-edit-meta-row a {
+ color: var(--ifm-color-warning);
+ transition: 0.3s;
+}
+
html[data-theme='dark'] p a {
color: var(--ifm-color-warning);
}
-html[data-theme='dark'] .admonition a {
- color: var(--ifm-color-white);
-}
-
-html[data-theme='dark'] a:hover {
- color: var(--ifm-color-frame);
- transition: 0.3s;
-}
-
html[data-theme='dark'] li a {
color: var(--ifm-color-warning);
}
-html[data-theme='dark'] a {
+html[data-theme='dark'] li a:hover {
+ color: var(--ifm-color-warning);
+}
+
+/* admonitions */
+html[data-theme='dark'] .admonition a {
color: var(--ifm-color-white);
}
-html[data-theme='dark'] li a:hover {
- color: var(--ifm-color-warning);
+html[data-theme='dark'] .alert--secondary {
+ background-color: var(--ifm-color-gray-400);
+ border-color: var(--ifm-color-gray-600);
+}
+
+html[data-theme='dark'] .alert--secondary a {
+ color: var(--ifm-color-gray-900);
+ fill: var(--ifm-color-gray-600);
+ text-decoration-color: var(--ifm-color-gray-600);
+}
+
+html[data-theme='dark'] .alert--secondary a:hover{
+ color: var(--ifm-color-gray-900);
}
/* table-of-contents */
@@ -79,7 +110,7 @@ html[data-theme='dark'] .footer {
--ifm-footer-link-color: var(--ifm-color-secondary);
--ifm-footer-title-color: var(--ifm-color-secondary);
}
-
+
html[data-theme='dark'] .footer__copyright {
color: var(--ifm-color-secondary);
}
diff --git a/src/css/variables.css b/src/css/variables.css
index d0d8d66848684674cbe13409e475180b681694e6..893cfb4eb5efd7be6ddf7d3ee611a5a2654b705e 100644
--- a/src/css/variables.css
+++ b/src/css/variables.css
@@ -16,6 +16,19 @@
--ifm-contrast-foreground-dark-value: 90%; */
:root {
+
+ /* Base colors
+ https://infima.dev/docs/utilities/colors
+ https://coolors.co/000000-ffffff-805d93-e07931-b3433b
+ */
+
+ --ifm-color-primary: var(--ifm-color-light-green);
+ --ifm-color-secondary: #ebedf0;
+ --ifm-color-success: #577018;
+ --ifm-color-info: #805D93;
+ --ifm-color-warning: #E07931;
+ --ifm-color-danger: #B3433B;
+
/* Froggit colors*/
--ifm-color-light-green:#8EA34E;
--ifm-color-frame: #FFC729;
@@ -34,37 +47,25 @@
--ifm-navbar-shadow: none;
--ifm-button-shadow: 1px 3px 4px var(--ifm-color-secondary-darkest);
- /* Base colors
- https://infima.dev/docs/utilities/colors
- https://coolors.co/000000-ffffff-805d93-e07931-b3433b
- */
-
- --ifm-color-primary: #000000;
- --ifm-color-secondary: #ffffff;
- --ifm-color-success: #577018;
- --ifm-color-info: #805D93;
- --ifm-color-warning: #E07931;
- --ifm-color-danger: #B3433B;
-
/* Primary */
- --ifm-color-primary-dark: #000000;
- --ifm-color-primary-darker: #000000;
- --ifm-color-primary-darkest: #000000;
- --ifm-color-primary-light: #000000;
- --ifm-color-primary-lighter: #000000;
- --ifm-color-primary-lightest: #000000;
- --ifm-color-primary-contrast-background: #000000;
- --ifm-color-primary-contrast-foreground: #000000;
+ --ifm-color-primary-lightest: #aebf7a;
+ --ifm-color-primary-lighter: #9fb462;
+ --ifm-color-primary-light: #9ab059 ;
+ --ifm-color-primary-darkest: #637237;
+ --ifm-color-primary-darker: #798b42;
+ --ifm-color-primary-dark: #809346;
+ --ifm-color-primary-contrast-background: var(--ifm-color-light-green);
+ --ifm-color-primary-contrast-foreground: var(--ifm-color-secondary);
/* Secondary */
--ifm-color-secondary-lightest: #ffffff;
--ifm-color-secondary-lighter: #ffffff;
--ifm-color-secondary-light: #ffffff;
- --ifm-color-secondary-dark: #e6e6e6;
- --ifm-color-secondary-darker: #d9d9d9;
- --ifm-color-secondary-darkest: #b3b3b3;
+ --ifm-color-secondary-dark: #d0d5dc;
+ --ifm-color-secondary-darker: #c2c8d1;
+ --ifm-color-secondary-darkest: #9aa4b3;
--ifm-color-secondary-contrast-background: var(--ifm-color-gray);
- --ifm-color-secondary-contrast-foreground: #ffffff;
+ --ifm-color-secondary-contrast-foreground: var(--ifm-color-secondary);
/* Success */
--ifm-color-success-lightest: #68861d;
@@ -142,22 +143,5 @@
--ifm-font-color-base: var(--ifm-color-content);
--ifm-font-color-base-inverse: var(--ifm-color-content-inverse);
--ifm-font-color-secondary: var(--ifm-color-content-secondary);
-}
-
-html[data-theme='dark'] {
- --ifm-font-color-base: var(--ifm-color-white);
- --ifm-font-color-base-inverse: var(--ifm-color-white);
- --ifm-font-color-secondary: var(--ifm-color-white);
- /* admonitions base */
- --ifm-color-secondary-contrast-background: var(--ifm-color-gray-700);
- --ifm-color-success-contrast-background: var(--ifm-color-success);
- --ifm-color-info-contrast-background: var(--ifm-color-info);
- --ifm-color-warning-contrast-background: var(--ifm-color-warning);
- --ifm-color-danger-contrast-background: var(--ifm-color-danger);
- /* admonitions border */
- --ifm-alert-border-color: var(--ifm-color-danger);
- --ifm-alert--success-border: var(--ifm-color-light-green);
- --ifm-alert--info-border-color: var(--ifm-color-info-lightest);
- --ifm-alert--warning-border-color: var(--ifm-color-frame);
- --ifm-alert--danger-border-color: var(--ifm-color-warning);
+ --ifm-link-color : var(--ifm-color-warning);
}