Pour tout problème contactez-nous par mail : support@froggit.fr | La FAQ :grey_question: | Rejoignez-nous sur le Chat :speech_balloon:

Skip to content
Snippets Groups Projects
Commit d9b02c2e authored by Julie Thezenas's avatar Julie Thezenas Committed by Christophe Chaudier
Browse files

refactor: get organized css files

parent 307f757c
No related branches found
No related tags found
1 merge request!58Resolve "range docusaurus colors in css"
li::marker {
color: var(--ifm-color-dark-green);
color: var(--ifm-color-success);
}
/******** FONTS ********/
@font-face {
font-family: 'comfortaa';
src: url('/fonts/comfortaa.woff2') format('woff2');
src: url('/fonts/comfortaa.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'montserrat';
src: url('/fonts/montserrat.woff2') format('woff2');
src: url('/fonts/montserrat.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'jetbrainsmono';
src: url('/fonts/jetbrainsmono.woff2') format('woff2');
src: url('/fonts/jetbrainsmono.woff') format('woff');
}
/******** VARIABLES ********/
:root {
--ifm-color-primary: #000000;
--ifm-color-dark-green: #577018;
--ifm-color-light-green:#8EA34E;
--ifm-color-frame: #FFC729;
--ifm-color-tonic-one: #E07931;
--ifm-color-tonic-two: #B3433B;
--ifm-color-tonic-three: #805D93;
--ifm-color-tonic-three-light: #B39BBF;
--ifm-color-primary-light: #ffffff;
--ifm-color-gray-100: #f5f6f7;
--ifm-color-gray-700: #646960;
--ifm-code-background: #f1f1f1;
--ifm-link-color: #E07931;
--ifm-button-color: var(--ifm-color-primary);
--ifm-code-font-size: 95%;
--ifm-font-family-base: "comfortaa", cursive;
--ifm-font-family: "montserrat", sans-serif;
--ifm-font-family-monospace: "jetbrainsmono", monospace;
--ifm-container-width: 100%;
--ifm-container-max-width: 950px;
--ifm-navbar-shadow: none;
--ifm-button-shadow: 1px 3px 4px #b6b6b6;
--ifm-color-success: var(--ifm-color-dark-green);
--ifm-color-info: var(--ifm-color-tonic-three);
--ifm-color-warning: var(--ifm-color-tonic-one);
--ifm-color-danger: var(--ifm-color-tonic-two);
--ifm-color-success-contrast-background: var(--ifm-color-dark-green);
--ifm-color-info-contrast-background: var(--ifm-color-tonic-three);
--ifm-color-warning-contrast-background: var(--ifm-color-tonic-one);
--ifm-color-danger-contrast-background: var(--ifm-color-tonic-two);
--ifm-alert-border-color:var(--ifm-color-tonic-two);
--ifm-alert--warning-border-color:var(--ifm-color-tonic-one);
--ifm-alert--danger-border-color:var(--ifm-color-tonic-two);
--ifm-pre-background: var(--prism-background-color);
--ifm-color-secondary-contrast-background: var(--ifm-color-gray-100);
--ifm-color-success-dark: var(--ifm-color-light-green);
--ifm-color-info-dark: var(--ifm-color-tonic-three-light);
--ifm-color-warning-dark: var(--ifm-color-frame);
--ifm-color-danger-dark: var(--ifm-color-tonic-one);
--ifm-color-success-contrast-foreground: var(--ifm-color-primary-light);
--ifm-color-info-contrast-foreground: var(--ifm-color-primary-light);
--ifm-color-warning-contrast-foreground: var(--ifm-color-primary-light);
--ifm-color-danger-contrast-foreground: var(--ifm-color-primary-light);
}
html[data-theme='dark'] {
--ifm-color-secondary-contrast-background: var(--ifm-color-gray-700);
--ifm-color-success-contrast-background: var(--ifm-color-dark-green);
--ifm-color-info-contrast-background: var(--ifm-color-tonic-three);
--ifm-color-warning-contrast-background: var(--ifm-color-tonic-one);
--ifm-color-danger-contrast-background: var(--ifm-color-tonic-two);
@import url("variables.css");
@import url("fonts.css");
@import url("footer.css");
@import url("dark-theme.css");
@import url("matomo.css");
html, body {
margin: 0;
padding: 0;
}
.docusaurus-highlight-code-line {
......@@ -83,18 +17,6 @@ html[data-theme='dark'] {
padding: 0 var(--ifm-pre-padding);
}
html[data-theme='dark'] {
--ifm-background-color: #18191a;
--ifm-background-surface-color: #18191a;
--ifm-hover-overlay: #ffffff0d;
--ifm-color-content-secondary: var(--ifm-color-primary-light);
--ifm-breadcrumb-separator-filter: invert(64%) sepia(11%) saturate(0%);
}
html[data-theme='dark'] .docusaurus-highlight-code-line {
background-color: rgba(0, 0, 0, 0.3);
}
hgroup {
font-family: var(--ifm-font-family-base);
font-weight: 700;
......@@ -111,6 +33,11 @@ a:hover {
transition: 0.3s;
}
p a {
color: var(--ifm-color-warning);
}
/* FORM & INPUT */
form > p {
font-size: small;
margin-top: 2em;
......@@ -126,7 +53,7 @@ input {
border-radius: var(--ifm-button-border-radius);
border-style: solid;
border-width: 2px;
border-color: var(--ifm-color-dark-green);
border-color: var(--ifm-color-success);
font-family: var(--ifm-font-family-base);
}
......@@ -137,26 +64,18 @@ input {
/********* TABLE OF CONTENT ********/
.table-of-contents__link:hover, .table-of-contents__link--active {
color: var(--ifm-color-tonic-one);
color: var(--ifm-color-warning);
}
.clean-btn {
color: var(--ifm-color-dark-green);
color: var(--ifm-color-success);
}
.clean-btn :hover {
color: var(--ifm-color-light-green);
}
html[data-theme='dark'] .clean-btn {
color: var(--ifm-color-primary-light);
}
html[data-theme='dark'] .clean-btn :hover {
color: var(--ifm-color-primary-light);
}
/******* table & ul montserra font *******/
/* table & ul montserra font */
table td {
font-family: var(--ifm-font-family);
}
......@@ -165,7 +84,7 @@ ul {
font-family: var(--ifm-font-family);
}
/************ Navbar style ***********/
/* Navbar style */
.navbar {
background-color: var(--ifm-color-light-green);
--ifm-navbar-link-hover-color: var(--ifm-color-frame);
......@@ -175,7 +94,7 @@ ul {
}
.navbar__items :hover {
color: var(--ifm-color-tonic-three);
color: var(--ifm-color-info);
}
.navbar__title {
......@@ -183,7 +102,7 @@ ul {
}
.navbar__link {
color: var(--ifm-color-primary-light);
color: var(--ifm-color-secondary);
}
.navbar--fixed-top {
......@@ -194,17 +113,21 @@ ul {
/****** HERO TITLE ******/
.hero__title {
color: var(--ifm-color-primary-light);
color: var(--ifm-color-white);
}
.hero__subtitle {
color: var(--ifm-color-primary-light);
color: var(--ifm-color-white);
width: 90%;
text-align: center;
margin: auto;
padding-bottom: 20px;
}
/***** BUTTON *****/
.button {
margin: 10px;
border-color: var(--ifm-color-dark-green);
border-color: var(--ifm-color-success);
color: var(--ifm-color-frame);
border-style: none;
white-space : initial;
......@@ -212,26 +135,26 @@ ul {
}
.button--beta {
background-color: var(--ifm-color-dark-green);
border-color: var(--ifm-color-dark-green);
background-color: var(--ifm-color-success);
border-color: var(--ifm-color-success);
color: var(--ifm-color-frame);
border-style: none;
}
.button--beta:hover {
color: var(--ifm-color-primary-light);
background-color: var(--ifm-color-tonic-three);
color: var(--ifm-color-secondary);
background-color: var(--ifm-color-info);
border-style: none;
}
.button--warning {
color: var(--ifm-color-dark-green);
color: var(--ifm-color-success);
border-style: none;
}
.button--warning:hover, .button--warning:not(.button--outline):hover {
color: var(--ifm-color-primary-light);
background-color: var(--ifm-color-tonic-three);
color: var(--ifm-color-secondary);
background-color: var(--ifm-color-info);
border-style: none;
}
......@@ -239,14 +162,7 @@ ul {
background-color: var(--ifm-color-frame);
}
/***** dark theme button ******/
html[data-theme='dark'] .button--beta:hover {
color: var(--ifm-color-primary-light);
background-color: var(--ifm-color-tonic-three);
border-style: none;
}
/************ main elements style***********/
/******* MAIN ELEM *******/
.section-promises {
padding: 4rem 0;
width: 100%;
......@@ -268,71 +184,35 @@ html[data-theme='dark'] .button--beta:hover {
flex-direction: row-reverse;
}
/************ footer style ***********/
a.footer__link-item:hover {
color: var(--ifm-color-frame);
/******* ADMONITIONS *******/
.admonition a {
color: var(--ifm-color-white);
}
.footer a {
color: var(--ifm-color-primary-light);
.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);
}
.footer a:hover {
color: var(--ifm-color-frame);
}
.footer {
background-color: var(--ifm-color-tonic-one);
color: var(--ifm-color-primary-light);
--ifm-footer-link-color: var(--ifm-color-primary);
--ifm-footer-title-color: var(--ifm-color-primary);
font-family: var(--ifm-font-family);
}
.footer_container {
display: flex;
justify-content: center;
.alert--success {
--ifm-alert-border-color: var(--ifm-color-light-green);
}
.footer_icons {
margin-left: 12px;
margin-right: 12px;
width: 1.8rem;
height: auto;
.alert--info {
--ifm-alert-border-color: var(--ifm-color-info-lightest);
}
.footer__title {
color: var(--ifm-color-primary-light);
.alert--warning {
--ifm-alert-border-color: var(--ifm-color-frame);
}
.footer__link-item {
color: var(--ifm-color-primary-light);
.alert--danger {
--ifm-alert-border-color: var(--ifm-color-warning);
}
/************ sub-footer style ***********/
/* SUB-FOOTER STYLE */
.footer__bottom {
font-family: var(--ifm-font-family);
font-weight: 600;
}
/*************** dark footer *************/
html[data-theme='dark'] .footer__link-item {
color: var(--ifm-color-primary-light);
}
html[data-theme='dark'] .footer {
background-color: var(--ifm-color-tonic-one);
color: var(--ifm-color-primary);
--ifm-footer-link-color: var(--ifm-color-primary-light);
--ifm-footer-title-color: var(--ifm-color-primary-light );
}
html[data-theme='dark'] .footer__copyright {
color: var(--ifm-color-primary-light);
}
/********* Doc page ***********/
/******* DOC PAGE *******/
/* lateral text */
.menu__link {
background: none;
......@@ -340,7 +220,7 @@ html[data-theme='dark'] .footer__copyright {
/* text mouse hover */
.menu__link:hover {
color: var(--ifm-color-tonic-three);
color: var(--ifm-color-info);
}
/* text on click */
......@@ -350,48 +230,18 @@ html[data-theme='dark'] .footer__copyright {
}
.menu__link--active {
color: var(--ifm-color-tonic-one);
color: var(--ifm-color-warning);
}
/* button "La doc de Froggit" */
.breadcrumbs__item--active .breadcrumbs__link {
background: var(--ifm-breadcrumb-item-background-active);
color: var(--ifm-color-tonic-one);
color: var(--ifm-color-warning);
}
/******* Dark theme ********/
html[data-theme='dark'] a:hover {
color: var(--ifm-color-frame);
transition: 0.3s;
}
/* lateral text menu*/
html[data-theme='dark'] .menu__link {
color: var(--ifm-color-tonic-one);
}
/****** Media screen *******/
/****** MEDIA SCREEN *******/
@media screen and (max-width:330px) {
.navbar {
width: 330px;
}
}
/******** Matomo & track *********/
.matomo_optout {
border: 0;
height: 200px;
width: 600px;
}
.notrack_container {
display: flex;
justify-content: center;
}
.no_track {
margin-left: 12px;
margin-right: 12px;
width: 10rem;
height: auto;
}
/******** 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;
--ifm-background-surface-color: var(--ifm-background-color);
--ifm-hover-overlay: #ffffff0d;
--ifm-color-content-secondary: var(--ifm-color-primary-light);
--ifm-breadcrumb-separator-filter: invert(64%) sepia(11%) saturate(0%);
}
html[data-theme='dark'] .docusaurus-highlight-code-line {
background-color: rgba(0, 0, 0, 0.3);
}
html[data-theme='dark'] .clean-btn {
color: var(--ifm-color-secondary);
}
html[data-theme='dark'] .clean-btn :hover {
color: var(--ifm-color-secondary);
}
/* dark theme button*/
html[data-theme='dark'] .button--beta:hover {
color: var(--ifm-color-secondary);
background-color: var(--ifm-color-info);
border-style: none;
}
/* 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'] li a {
color: var(--ifm-color-warning);
}
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'] .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 */
html[data-theme='dark'] .table-of-contents__link {
color: var(--ifm-color-white);
}
html[data-theme='dark'] .table-of-contents__link--active {
color: var(--ifm-color-warning);
}
/* lateral text menu */
html[data-theme='dark'] .menu__link {
color: var(--ifm-color-warning);
}
/* dark footer */
html[data-theme='dark'] .footer__link-item {
color: var(--ifm-color-secondary);
}
html[data-theme='dark'] .footer {
background-color: var(--ifm-color-warning);
color: var(--ifm-color-secondary);
--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);
}
/******** FONTS ********/
@font-face {
font-family: 'comfortaa';
src: url('/fonts/comfortaa.woff2') format('woff2');
src: url('/fonts/comfortaa.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'montserrat';
src: url('/fonts/montserrat.woff2') format('woff2');
src: url('/fonts/montserrat.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'jetbrainsmono';
src: url('/fonts/jetbrainsmono.woff2') format('woff2');
src: url('/fonts/jetbrainsmono.woff') format('woff');
}
/************ FOOTER ***********/
.footer {
background-color: var(--ifm-color-warning);
color: var(--ifm-color-secondary);
--ifm-footer-link-color: var(--ifm-color-secondary);
--ifm-footer-title-color: var(--ifm-color-secondary);
font-family: var(--ifm-font-family);
}
.footer_container {
display: flex;
justify-content: center;
}
.footer__title {
color: var(--ifm-color-secondary);
}
.footer__link-item {
color: var(--ifm-color-secondary);
}
.footer_icons {
margin-left: 12px;
margin-right: 12px;
width: 1.8rem;
height: auto;
}
/* a */
a.footer__link-item:hover {
color: var(--ifm-color-frame);
}
.footer a {
color: var(--ifm-color-secondary);
}
.footer a:hover {
color: var(--ifm-color-frame);
}
/* sub-footer style */
.footer__bottom {
font-family: var(--ifm-font-family);
font-weight: 600;
}
/******** MATOMO *********/
.matomo_optout {
border: 0;
height: 200px;
width: 600px;
}
.notrack_container {
display: flex;
justify-content: center;
}
.no_track {
margin-left: 12px;
margin-right: 12px;
width: 10rem;
height: auto;
}
/* NOTE VALUE INFO to change color var
--ifm-color-scheme: light;
--ifm-dark-value: 10%;
--ifm-darker-value: 15%;
--ifm-darkest-value: 30%;
--ifm-light-value: 15%;
--ifm-lighter-value: 30%;
--ifm-lightest-value: 50%;
--ifm-contrast-background-value: 90%;
--ifm-contrast-foreground-value: 70%;
--ifm-contrast-background-dark-value: 70%;
--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;
/* Fonts var */
--ifm-font-family-base: "comfortaa", cursive;
--ifm-font-family: "montserrat", sans-serif;
--ifm-font-family-monospace: "jetbrainsmono", monospace;
--ifm-code-font-size: 95%;
/* Container var */
--ifm-container-width: 100%;
--ifm-container-max-width: 950px;
/* Navbar var */
--ifm-navbar-shadow: none;
--ifm-button-shadow: 1px 3px 4px var(--ifm-color-secondary-darkest);
/* Primary */
--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: #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: var(--ifm-color-secondary);
/* Success */
--ifm-color-success-lightest: #68861d;
--ifm-color-success-lighter: #64811c;
--ifm-color-success-light: #607b1a;
--ifm-color-success-dark: #4e6516;
--ifm-color-success-darker: #4a5f14;
--ifm-color-success-darkest: #3d4e11;
--ifm-color-success-contrast-background: var(--ifm-color-success);
--ifm-color-success-contrast-foreground: var(--ifm-color-secondary);
/* Info */
--ifm-color-info-lightest: #B39BBF;
--ifm-color-info-lighter: #9270a4;
--ifm-color-info-light: #8c68a0;
--ifm-color-info-dark: #735484;
--ifm-color-info-darker: #6d4f7d;
--ifm-color-info-darkest: #5a4167;
--ifm-color-info-contrast-background: var(--ifm-color-info);
--ifm-color-info-contrast-foreground: var(--ifm-color-secondary);
/* Warning */
--ifm-color-warning-lightest: #e79860;
--ifm-color-warning-lighter: #e59055;
--ifm-color-warning-light: #e48849;
--ifm-color-warning-dark: #d66b20;
--ifm-color-warning-darker: #ca651e;
--ifm-color-warning-darkest: #a65319;
--ifm-color-warning-contrast-background: var(--ifm-color-warning);
--ifm-color-warning-contrast-foreground: var(--ifm-color-secondary);
/* Danger */
--ifm-color-danger-lightest: #c65951;
--ifm-color-danger-lighter: #c4544b;
--ifm-color-danger-light: #c14d44;
--ifm-color-danger-dark: #a13c35;
--ifm-color-danger-darker: #983932;
--ifm-color-danger-darkest: #7d2f29;
--ifm-color-danger-contrast-background: var(--ifm-color-danger);
--ifm-color-danger-contrast-foreground: var(--ifm-color-secondary);
/* White - black - gray */
--ifm-color-white: #fff;
--ifm-color-black: #000;
--ifm-color-gray-0: var(--ifm-color-white);
--ifm-color-gray-100: #f5f6f7;
--ifm-color-gray-200: #ebedf0;
--ifm-color-gray-300: #dadde1;
--ifm-color-gray-400: #ccd0d5;
--ifm-color-gray-500: #bec3c9;
--ifm-color-gray-600: #8d949e;
--ifm-color-gray-700: #606770;
--ifm-color-gray-800: #444950;
--ifm-color-gray-900: #1c1e21;
--ifm-color-gray-1000: var(--ifm-color-black);
--ifm-color-emphasis-0: var(--ifm-color-gray-0);
--ifm-color-emphasis-100: var(--ifm-color-gray-100);
--ifm-color-emphasis-200: var(--ifm-color-gray-200);
--ifm-color-emphasis-300: var(--ifm-color-gray-300);
--ifm-color-emphasis-400: var(--ifm-color-gray-400);
--ifm-color-emphasis-500: var(--ifm-color-gray-500);
--ifm-color-emphasis-600: var(--ifm-color-gray-600);
--ifm-color-emphasis-700: var(--ifm-color-gray-700);
--ifm-color-emphasis-800: var(--ifm-color-gray-800);
--ifm-color-emphasis-900: var(--ifm-color-gray-900);
--ifm-color-emphasis-1000: var(--ifm-color-gray-1000);
--ifm-color-content: var(--ifm-color-emphasis-900);
--ifm-color-content-inverse: var(--ifm-color-emphasis-0);
--ifm-color-content-secondary: #525860;
--ifm-background-color: transparent;
--ifm-background-surface-color: var(--ifm-color-content-inverse);
--ifm-global-border-width: 1px;
--ifm-global-radius: 0.4rem;
--ifm-hover-overlay: rgba(0, 0, 0, 0.05);
--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);
--ifm-link-color : var(--ifm-color-warning);
}
/************ Header style ***********/
.hero__subtitle {
width: 90%;
text-align: center;
margin: auto;
padding-bottom: 20px;
}
/************ HEADER STYLE ***********/
.heroBanner {
padding: 2.6rem 0;
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment