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

Resolve "range docusaurus colors in css"

Merged Resolve "range docusaurus colors in css"
85-doc-create-docusaurus-doc-colors into master
Merged Julie Thezenas requested to merge 85-doc-create-docusaurus-doc-colors into master
Viewing commit 0b0579a3
Prev
Show latest version
2 files
+ 2
− 1
Compare changes
  • Side-by-side
  • Inline
Files
2
src/css/custom.css
+ 58
− 208
/******** 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;
}

Froggit est fièrement fabriqué avec amour par Lydra avec des Logiciels Libres et hébergé en France chez Scaleway | Status du service