alpha_full/admin/adminInclude/makeCss/sass/themeClair.scss
2026-04-06 22:58:51 +02:00

353 lines
11 KiB
SCSS
Executable File

/* ---------------------------------- */
/* Variables
/* ---------------------------------- */
/* Le>est un sélecteur d'enfant direct. Il cible un élément qui est un enfant immédiat du sélecteur parent.
Le sélecteur>s'assure que l'élément cible est un enfant direct du parent spécifié. Il ne sélectionne pas les éléments qui sont plus profonds dans la hiérarchie, même si un autre élément les contient.
L'espace dans un sélecteur CSS est un sélecteur descendant. Cela signifie qu'il cible tous les éléments a à l'intérieur de l'élément .boutonsMenusWbm, quel que soit leur niveau de profondeur.
*/
/* ---------------------------------- */
@import "_commonVars.scss";
/* ------------------------------------------------------ */
/* Body --- fonds
/* ------------------------------------------------------ */
body, frame, frameSet { background: $clairBkgrd; }
html, .informationsTechLib, #myArbo, .famItem, .catItem, #zoneFormWbm, #langue, ul, li, .conteneurArticle, .conteneurArticle>div, .note-frame, .libChampArtListe, #zoneFormModales, .informationsTechValue, #zonePageWbm, #zoneRechercheWbm, #blocDroit { @include adminClair; }
.informationsTechLib, .informationsTechValue {background-color: transparent; color:black;}
// #zoneRechercheWbm {background: rgb(213,215,215); background: linear-gradient(4deg, rgba(213,215,215,1) 0%, rgba(246,246,247,0.07619747038810487) 52%, rgba(213,215,215,1) 100%);}
#zoneRechercheWbm {background: $clairFondsFrame;}
a { color: $clairColor}
a:hover { color: $clairColor; text-decoration: underline}
a:visited { color: $clairColor; }
/* ------------------------------------------------------ */
/* Menus -- fonds different
/* ------------------------------------------------------ */
#zonePageWbm, #zoneMenuWbm, #blockHaut, #tableMenuGauche, #siteName, #siteTime, .accueil, span>accueil, .accueil>a, #tableMenuGauche, .boitesSousMenuGauche, #labelEnv, #siteClock, #zoneTitreWbm, .titreWbm { background-color: $clairBkgrd; }
menuGaucheSousMenus, .titreWbm a, .boitesSousMenuG a:visited, #zoneMenuWbm, #zoneMenuWbm a, #zoneMenuWbm a:visited { color: black; text-decoration: none;}
#bandeauAideInfo { color: black; }
#zoneSousCat { background-color: #f3eded; }
/* ------------------------------------------------------ */
/* Modales
/* ------------------------------------------------------ */
.modaleGene, .popupGene, #zoneTitreModales, #zonePageModales, .zoneFormModales, .popupAide { @include adminClair; }
/* ------------------------------------------------------ */
/* Ascenseurs
/* ------------------------------------------------------ */
/* firefox */
@supports (scrollbar-width: auto) {
* {
scrollbar-width: auto;
scrollbar-color: #b7cddd transparent;
}
}
/* ------------------------------------------------------ */
/* Icones
/* ------------------------------------------------------ */
.fa, .fad, .fa-duotone, .fab, .fas, .thin {
--fa-primary-color: #{$clairIcoColor};
--fa-secondary-color: #{$clairIcoColor2};
}
.fas:hover, .far:hover, .fab:hover, .fad:hover, i:focus, i:visited, i:hover, .thin:hover {
color: $clairIcoOver;
--fa-primary-color: #{$clairIcoOver};
--fa-secondary-color: #{$clairIcoOver2};
}
/* ------------------------------------------------------ */
/* Images
/* ------------------------------------------------------ */
.imgFamTV, .imgCatalogue {
@include adminClair;
border:1px solid lightgrey;
border-radius:5px;
}
.imgCatalogue:hover, .imgFamTV:hover { background-color: #086a87; cursor:pointer;}
/* ------------------------------------------------------ */
/* Menu accordeon
/* ------------------------------------------------------ */
#menu-accordeon, #menu-accordeon>li, { background: $clairFondsFrame; color: black !important; }
#menu-accordeon, #menu-accordeon>li, #menu-accordeon>li>ul>li>a { color: black !important; }
/* ------------------------------------------------------ */
/* Boutons menu gauche
/* ------------------------------------------------------ */
.menuGaucheMenusPrincipaux>a { color: $clairIcoColor; }
.menuGaucheMenusPrincipaux>i { color: $clairIcoColor; }
.menuGaucheMenusPrincipauxIco { color: $clairIcoColor; }
.menuGaucheSousMenus:hover { color: $clairIcoColor; }
.menuGaucheSousMenusActif { color: $clairLienActif; }
/* ------------------------------------------------------ */
/* Boutons actions Webmaster
/* ------------------------------------------------------ */
.boutonsWebmaster, .boutonsWebmaster a, .boutonsWebmaster span a {
background: lightgrey;
color: darkblue
}
.boutonsWebmaster i, .boutonsWebmaster span>i {
/* --fa-primary-color: white;
--fa-secondary-color: white;*/
}
.boutonsWebmaster:hover, .boutonsWebmaster a:hover {
background: $clairBoutonMenuOverBckgrd;
color: $clairBoutonMenuOverColor;
}
.boutonsWebmaster i:hover {
--fa-primary-color: #{$clairBoutonIcoOver};
--fa-secondary-color: #{$clairBoutonIcoOver2};
}
/* ------------------------------------- */
/* Les boutons menus / onglets
/* ------------------------------------- */
.boutonsMenusWbm{
border:1px solid $clairBoutonMenusBorder;
}
.boutonsMenusWbm, #sousOnglets li{
/*background-color: $clairFondsFrame;*/
color: $clairBoutonMenusColor;
}
.boutonsMenusWbm>i, .boutonsMenusWbm>span>i, #sousOnglets li>a span#puceMenu2 {
--fa-primary-color: #{$clairIcoColor};
--fa-secondary-color: #{$clairIcoColor2};
}
#sousOnglets li {
border : 1px solid $clairBoutonMenusBorder;
background: $clairFondsFrame;
}
/* ---- hover ---- */
.boutonsMenusWbm:hover, #sousOnglets>li:hover , #sousOnglets li:hover {
background-color: #{$clairBoutonMenuOverBckgrd};
color: #{$clairBoutonMenuOverColor};
}
#sousOnglets li:hover>a {
color: #{$clairBoutonMenuOverColor};
}
.boutonsMenusWbm:hover>i, .boutonsMenusWbm:hover>span>i, #sousOnglets li:hover a>span#puceMenu2, {
/*background-color: transparent;*/
--fa-primary-color: yellow;
--fa-secondary-color: white;
}
/* ---- actifs ---- */
#sousOnglets li.sactive, #sousOnglets li.sactive a, li.sactive>a:visited {
background-color: $clairBoutonMenuActifBackground;
color: white!important;
text-decoration:none;
}
.boutonsMenuWbmActif i,.boutonsMenuWbmActif span i, #sousOnglets li.sactive>a span#puceMenu2 {
--fa-primary-color: orange;
--fa-secondary-color: #{$clairBoutonIcoOver2};
}
/* --- actif + hover --- */
.boutonsMenuWbmActif:hover, #sousOnglets li.sactive:hover {
color: #{$clairBoutonMenuOverColor};
background: #{$clairBoutonMenuActifBackground};
}
.boutonsMenuWbmActif>i:hover, .boutonsMenuWbmActif span i:hover, #sousOnglets li.sactive:hover>a span#puceMenu2{
--fa-primary-color: yellow;
--fa-secondary-color: white;
}
/* ------------------------------------------------------ */
/* Bouton avancement
/* ------------------------------------------------------ */
#btnAvance {
box-shadow : 1px 1px $clairBoxShadow;
border: 1px solid $clairBoxShadow;
background: transparent;
color: black;
}
.txtAvance { color: $clairBkgrd; }
/* ------------------------------------- */
/* dans page creation
/* ------------------------------------- */
.boutonEnregistrer {
background:#28a745 !important;
color:white;
}
.boutonEnregistrer i {
--fa-primary-color: white;
--fa-secondary-color: white;
}
.boutonEnregistrer i:hover {
--fa-primary-color: white;
--fa-secondary-color: green;
}
/* ------------------------------------- */
/* dans menu gauche, css, txt, contenu, agencement, mails */
/* ------------------------------------- */
.boutonPublier {
background:grey !important;
color:white;
}
.boutonPublier i {
--fa-primary-color: white;
--fa-secondary-color: white;
}
.boutonPublier i:hover {
--fa-primary-color: white;
}
/* ------------------------------------------------------ */
/* Bordures
/* ------------------------------------------------------ */
.menuGaucheMenusPrincipaux { border-bottom: 1px solid $clairBordure; }
/* ------------------------------------------------------ */
/* Styles des champs
/* ------------------------------------------------------ */
.libChampsWebmaster {
color : #7d7777; //gris
background: $clairBoutonMenusBkgrdColor;
}
.checkBoxWbm, .selectWbm, select, checkBox {
background: white;
color: grey;
border: 1px solid $clairBordure;
}
.inputWebmaster, .textAreaWbm {
background: white;
color: black;
border: 1px solid $clairBordure;
}
.selectWbm option {
background: white;
color: black;
}
.inputWebmaster:hover, .inputWebmaster:focus, .textAreaWbm:hover, .checkBoxWbm:hover, checkBox:hover {
cursor: pointer;
border: 0px;
}
.libChampArtListe { color: grey; }
.celluleLV { color : $clairLibChampsColor; background: $clairBkgrd; }
.inputLV { background: transparent}
.listBoxCouleur{background: $clairFondsFrame; border-color: $clairBordure;}
/* ------------------------------------------------------ */
/* Styles des messages
/* ------------------------------------------------------ */
.actionMessages { color: $clairActionColor; }
a:visited>.boutonsMenusWbm { color: $clairColor2; }
.pop { background: grey; color: white; }
.admMsgOk {
background-color: #2bc12b;
color: white;
}
.admMsgKo {
background-color: coral ;
color: white;
}
.debugStyle {
background-color: #e7ffd8;
color: darkgreen;
}
/* ------------------------------------------------------ */
/* Contenu
/* ------------------------------------------------------ */
.contenu { background: $clairBkgrd; }
/* ------------------------------------------------------ */
/* Modales
/* ------------------------------------------------------ */
.btn_close { color: $clairIcoColor; background-color: $clairBkgrd; border-color: $clairColor; }
.btn_close:hover { color: $clairBoutonOverColor; background-color: $clairBoutonOverBckgrd; border-color: $clairBoutonOverColor; }
/* ------------------------------------------------------ */
/* Styles
/* ------------------------------------------------------ */
.itemReglage { color: $clairLibChampsColor; }
/* ------------------------------------------------------ */
/* Summer note
/* ------------------------------------------------------ */
.note-btn { color: black !important; background: $clairBkgrd; }
.note-toolbar { color: $clairLibChampsColor; background: $clairBkgrd !important; }
/* ------------------------------------------------------ */
/* popupAide
/* ------------------------------------------------------ */
.popupAide { color: $clairColor; }
/* ------------------------------------------------------ */
/* blocDroit
/* ------------------------------------------------------ */
.mTable {background: $clairFondsFrame; color:black; font-size:1rem;}
.agencementBarreInfo {
background: $clairFondsFrame;
color:black;
}
/* ------------------------------------------------------ */
/* Tableaux, listes
/* ------------------------------------------------------ */
.fondColorListe {background: #7591e3}
/* ------------------------------------------------------ */
/* btnTest
/* ------------------------------------------------------ */
.layer, .layerJ, .layerL {background: $clairFondsFrame;}