:root{ /* ------------------------------------------- OPTIONS GLOBALES ------------------------------------------- */ /* Font des titres */ --title-font: 'Rubik', sans-serif; /* Couleurs principales */ --main-color:#0992bd; --second-color:#51c0d7; --flash-color:#f5d29e; --alert-color: red; --success-color: #99bb3d; --warning-color: #dc9435; --error-color: #d31111; /* Couleurs back office */ --back-color: rgb(56 66 76); --back-color-dark : rgb(45 54 61); /* Couleur du texte */ --text-color:#616161; /* Taille du texte de base */ --text-size: 14px; /* Couleur des blocs de la sidebar et des miniatures produits */ --block-bg:#F6F9FC; /* Couleur des borders */ --border-color:#dedede; /* Coins arrondis du site */ --radius: 10px; /* Ombres des blocs */ --shadow: 0px 5px 10px rgba(0,0,0,.05); /* transitions */ --transition: all ease-in-out .1s; /* Flash message */ --flash-bg:#fff; --flash-border: none; --flash-radius: var(--radius); /* BACKGROUND */ /* Couleur du fond de page*/ --bg-color: #e9ecef; /* Nom du fichier de l'image de fond du site */ --bg-img:'bg_body.jpg'; /* pour rien mettre '' */ /* Taille du background (auto, cover, ...) */ --bg-size:auto; /* Taille du background sur mobile */ --mobile-bg-size: var(--bg-size); /* Répétition du background */ --bg-repeat:no-repeat; /* Comportement du background (fixed ou local) */ --bg-comportement:local; /* Positionnement du background */ /* Latéral */ --bg-posX:center; /* Vertical */ --bg-posY:top; /* ------------------------------------------- OPTIONS DES BLOCS ------------------------------------------- */ /* Couleur du conteneur principal */ --mainSection-bg:none; /* Ombre sous le conteneur principal (unset ou Xpx Xpx Xpx rgba(X,X,X,X)) */ --mainSection-shadow: unset; /* Largeur du conteneur principal (1140 ou 980) */ --mainSection-width:1140px; /* Padding du conteneur principal */ --mainSection-padding:0px; /* margin du conteneur principal */ --mainSection-margin: 30px 15px; /* Couleur du conteneur principal sur les pages intérieures (hors accueil) */ --pageSection-bg:none; /* Ombre sous le conteneur principal (unset ou Xpx Xpx Xpx rgba(X,X,X,X)) */ --pageSection-shadow: unset; /* Padding du conteneur principal */ --pageSection-padding:0px; /* COLONNE PRINCIPALE */ /* Couleur de fond du bloc de contenu | default:none */ --mainCol-bg: none; /* Padding du bloc de contenu | default:0px */ --mainCol-padding:0px; /* */ /* Couleur de fond de la | default:none */ ---bg: none; /* Padding de la | default:0px */ ---padding: 0px; /* Ombre sous la */ ---shadow: unset; /* Onglets (dans les pages mon compte, panier, etc) */ --onglets-wrapper-bg: var(--block-bg); --onglets-bg: transparent; --onglets-text: var(--text-color); --onglets-hover-bg: #fff; --onglets-hover-text: var(--text-color); --onglets-active-bg: #fff; --onglets-active-text: var(--second-color); /* ------------------------------------------- BOUTONS ------------------------------------------- */ /* boutons principaux */ /* coins arrondis des boutons principaux */ --button-radius:10px; /* couleur de fond des boutons principaux */ --button-bg:var(--flash-color); /* couleur du texte des boutons principaux */ --button-text:#fff; /* taille du texte des boutons principaux */ --button-text-size:14px; /* border des boutons principaux */ --button-border:0px; /* padding des boutons principaux */ --button-padding:7px 20px; /* couleur des icones des boutons principaux */ --button-icon-color:var(--main-color); /* taille des icones des boutons principaux */ --button-icon-size:14px; /* couleur de fond de la bulle des boutons principaux */ --button-pin-bg:#fff; /* border des bulles des boutons principaux */ --button-pin-border: 1px solid var(--flash-color); /* couleur du texte des bulles des boutons principaux */ --button-pin-color:var(--main-color); /* taille du texte des bulles des boutons principaux */ --button-pin-font-size:11px; /* taille des bulles des boutons principaux */ --button-pin-size:20px; /* bg hover des boutons principaux */ --button-hover-bg: var(--button-bg); /* border hover des boutons principaux */ --button-hover-border: var(--button-border); /* color hover des boutons principaux */ --button-hover-color: var(--button-text); /* transform hover des boutons principaux */ --button-hover-transform: scale(1.05); /* couleur des icones au hover des boutons principaux */ --button-hover-icon-color: var(--button-icon-color); /* couleur du texte des bulles au hover des boutons principaux */ --button-hover-pin-color: var(--button-pin-color); /* bg des bulles au hover des boutons principaux */ --button-hover-pin-bg: var(--button-pin-bg); /* border des bulles au hover des boutons principaux */ --button-hover-pin-border: var(--button-pin-border); /* boutons secondaires */ --secondary-button-radius:10px; --secondary-button-bg:#fff; --secondary-button-text:var(--text-color); --secondary-button-text-size:14px; --secondary-button-border:1px solid var(--second-color); --secondary-button-padding:7px 20px; --secondary-button-icon-color:var(--second-color); --secondary-button-icon-size:14px; --secondary-button-pin-bg:var(--second-color); --secondary-button-pin-border: 1px solid var(--second-color); --secondary-button-pin-color:#fff; --secondary-button-pin-font-size:11px; --secondary-button-pin-size:20px; --secondary-button-hover-bg: var(--secondary-button-bg); --secondary-button-hover-border: var(--secondary-button-border); --secondary-button-hover-color: var(--secondary-button-text); --secondary-button-hover-transform: scale(1.05); --secondary-button-hover-icon-color: var(--secondary-button-icon-color); --secondary-button-hover-pin-color: var(--secondary-button-pin-color); --secondary-button-hover-pin-bg: var(--secondary-button-pin-bg); --secondary-button-hover-pin-border: var(--secondary-button-pin-border); /* HEADER ----------------------------------------------------------------------------------------------------------------------------- */ /* Affichage du header (Block ou none) */ --header-display: block; /* Border Top du site */ /* Epasseur*/ --top-border:5px; /* Couleur */ --top-border-color: var(--flash-color); /* Largeur du conteneur du header (1440 ou 1140 ou 980 ou 100%) */ --header-width:var(--mainSection-width); /* Hauteur du header de toutes les pages */ --header-height:auto; /* Marge sous le header */ --header-margin-bottom: 0px; /* Couleur de fond du header */ --header-bg-color: #fff; /* Ombre sous le header */ --header-shadow: 0px 10px 10px rgba(0,0,0,.2); /* Widgets header */ /* position (flex-start, center ou flex-end) */ --header-widgets-justify: flex-end; --header-widgets-align: center; /* Nom du fichier de l'image de fond du HEADER du site */ --header-bg-img:''; /* pour rien mettre '' */ --header-bg-repeat:'no-repeat'; /* Positionnement du background du HEADER */ /* Latéral */ --header-bg-posX:left; /* Vertical */ --header-bg-posY:top; /* Logo */ --header-logo-width:auto; --header-logo-height:auto; --header-logo-margin:20px 0px; /* Répartition du header (12 à répartir entre les 2 zones) */ /* taille de la zone du logo (de 1 à 11) */ --header-logo-cols:4; /* taille de la zone de widget (de 1 à 11) */ --header-widget-cols: 8; /* Alignement du logo (flex-start, center ou flex-end) */ --header-logo-justify: flex-start; /* FOOTER ----------------------------------------------------------------------------------------------------------------------------- */ /* Affichage de lu footer */ --footer-display: block; /* Background */ /* Couleur de fond du footer */ --footer-bg-color: var(--main-color); /* Couleur de fond de la 2e ligne du footer */ --footer-secondrow-bg: rgba(0,0,0,.1); /* Couleur de fond du logo du footer */ --footer-logo-bg: #fff; /* Ombre du bloc du logo du footer */ --footer-logo-shadow: var(--shadow); /* Border Top du site */ /* Epasseur*/ --bottom-border:0px; /* Couleur */ --bottom-border-color: var(--flash-color); /* PAGES PRE-LOGIN ----------------------------------------------------------------------------------------------------------------------------- */ --card-width: 500px; /* Largeur du bloc */ --card-bg: #fff; /* Background du bloc */ --card-border: 1px solid var(--border-color); --card-flash-bg: var(--flash-color); --card-flash-border: 1px solid var(--border-color); /* SIDEBAR ----------------------------------------------------------------------------------------------------------------------------- */ /* Affichage de la barre de menu (Block ou none) */ --sidebar-display: none; /* NAVBAR ----------------------------------------------------------------------------------------------------------------------------- */ /* Affichage de la barre de menu (Block ou none) */ --navbar-display: block; /* Largeur du conteneur de la navbar (1140 ou 980 ou 100%) */ --navbar-width:var(--mainSection-width); /* Couleur de fond de la navBar */ --navbar-bg:var(--main-color); /* Bord arrondis de la navbar */ --navbar-radius:0px; /* GRILLE DE PRODUITS ----------------------------------------------------------------------------------------------------------------------------- */ /* répartition des colonnes de la grid de thumbnail produit */ --products-grid: 1fr 1fr 1fr; /* taille des goutières de thumbnail produit */ --products-gap: 15px; /* padding des blocs de thumbnail produit */ --product-bloc-padding: 10px; /* border des blocs de thumbnail produit */ --product-bloc-border: 1px solid var(--border-color); /* background des blocs de thumbnail produit */ --product-bloc-bg: #fff; /* Affichage des description produits des thumbnail */ --product-bloc-desc-display: -webkit-box; /* Background des footer des thumbnail produit */ --product-bloc-footer-bg: none; }