1442 lines
30 KiB
SCSS
Executable File
1442 lines
30 KiB
SCSS
Executable File
// ----------------------------------
|
|
// Vu que l'admin affiche le site les z-index doivent etre plus grands que ceux du site, soit le z-index du site max = 5
|
|
// plus grand z-index admin= 14 => titre + popup + monCompte + msgKo et ok
|
|
// ----------------------------------
|
|
|
|
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap');
|
|
@import url('https://fonts.googleapis.com/css2?family=BhuTuka+Expanded+One&family=Dancing+Script&family=Hubballi&family=Kalam:wght@300&family=Monoton&family=Nothing+You+Could+Do&family=Pacifico&family=Permanent+Marker&family=Righteous&display=swap');
|
|
@import url('https://fonts.googleapis.com/css2?family=Aclonica&family=Amatic+SC&family=Assistant:wght@200&family=Audiowide&family=Bungee+Inline&family=Cabin+Sketch&family=Cairo:wght@200&family=Caveat&family=Coda&family=Cormorant+Garamond:wght@300&family=Grand+Hotel&family=Handlee&family=Henny+Penny&family=Indie+Flower&family=Italianno&family=Itim&family=Lemon&family=Mali:wght@200&family=Markazi+Text&family=Merienda&family=Noto+Serif+Display:wght@100&family=Patrick+Hand&family=Petit+Formal+Script&family=Philosopher&family=Playball&family=Playfair+Display&family=Rye&family=Sansita+Swashed:wght@300&family=Satisfy&family=Shadows+Into+Light&family=Smooch+Sans:wght@100&family=Tangerine&display=swap');
|
|
|
|
// ----------------------------------
|
|
// Variables
|
|
// ----------------------------------
|
|
@import "_commonVars.scss";
|
|
|
|
// ------------------------------------------------------
|
|
// Styles generiques
|
|
// ------------------------------------------------------
|
|
* { box-sizing: border-box; }
|
|
|
|
form {display:contents; z-index:6;}
|
|
|
|
// ------------------------------------------------------
|
|
// Body
|
|
// ------------------------------------------------------
|
|
html {
|
|
width:99.8%;
|
|
height:100%;
|
|
}
|
|
|
|
body {
|
|
overflow:visible;
|
|
width:99.9%;
|
|
height:100%;
|
|
top:0;
|
|
font-size:1rem;
|
|
box-sizing: border-box;
|
|
margin:0;
|
|
font-family: Arial, sans-serif;
|
|
}
|
|
|
|
a {text-decoration:none; color:inherit;}
|
|
.form {border:1px solid grey; height:100%; padding:3px; padding-top:3px; padding-bottom:20px; vertical-align:top; top:1px; }
|
|
|
|
// ------------------------------------------------------
|
|
// Custo ascenseur : a priori ne passe jamais ici
|
|
// mais dans @supports (scrollbar-width: auto) de theme.css
|
|
// ------------------------------------------------------
|
|
@supports (-webkit-appearance: none) {
|
|
::-webkit-scrollbar { width:14px; height:14px; }
|
|
|
|
// Track
|
|
::-webkit-scrollbar-track {width:14px; box-shadow :inset 0 0 5px lightgrey; border-radius: 3px; }
|
|
|
|
// Handle
|
|
::-webkit-scrollbar-thumb { border-radius: 3px; }
|
|
}
|
|
|
|
// ------------------------------------------------------
|
|
// jsResize
|
|
// ------------------------------------------------------
|
|
#resize, .jsResize{
|
|
cursor:pointer;
|
|
padding-top:5px;
|
|
margin-left: 45px;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
// ------------------------------------------------------
|
|
// Structure des pages
|
|
// ------------------------------------------------------
|
|
|
|
/*
|
|
____________________________________________________
|
|
| zonePageWbm |
|
|
| |
|
|
| |-------------------------------| |
|
|
| | zoneTitreWbm 1 | |
|
|
| |-------------------------------| |
|
|
| | zoneMenuWbm 2 | |
|
|
| |-------------------------------| |
|
|
| | zoneRechercheWbm 3 | |
|
|
| |-------------------------------| |
|
|
| | zoneMsgWbm 4 | |
|
|
| |-------------------------------| |
|
|
| | zoneFormWbm 5 | |
|
|
| | | |
|
|
| | | |
|
|
| | | |
|
|
| |-------------------------------| |
|
|
| | zoneValidateWbm 6 | |
|
|
| |-------------------------------| |
|
|
| |
|
|
|___________________________________________________|
|
|
|
|
*/
|
|
|
|
// ------------------------------------------------------
|
|
// Frames
|
|
// ------------------------------------------------------
|
|
|
|
#globalContainer{
|
|
display:flex;
|
|
flex-direction: row-reverse;
|
|
top:0;
|
|
left:0;
|
|
align-self: flex-start;
|
|
background:lightgrey;
|
|
}
|
|
|
|
#leftFrameAdmin {
|
|
height: 100vh;
|
|
//grid-column:1;
|
|
width:250px;
|
|
overflow-y: auto;
|
|
position:sticky;
|
|
top:0;
|
|
left:0;
|
|
background-color: lightgrey;
|
|
}
|
|
|
|
#rightFrameAdmin {
|
|
width:100%;
|
|
height: 100%;
|
|
vertical-align:top;
|
|
text-align:left;
|
|
padding:0px;
|
|
margin:0;
|
|
border:0;
|
|
top:0;
|
|
overflow:visible;
|
|
/*overflow-y: auto;*/
|
|
flex: 1;
|
|
border-top-left-radius:20px;
|
|
background:lightgrey;
|
|
padding:1px;
|
|
}
|
|
|
|
// ------------------------------------------------------
|
|
// Page
|
|
// ------------------------------------------------------
|
|
#zonePageWbm{
|
|
display:grid;
|
|
grid-template-columns:auto;
|
|
text-align:left;
|
|
position:relative;
|
|
top:0;
|
|
left:0;
|
|
z-index:12;
|
|
overflow:visible;
|
|
/*overflow-y: auto;*/
|
|
border-top-left-radius:20px;
|
|
}
|
|
|
|
// ------------------------------------------------------
|
|
// Titres
|
|
// ------------------------------------------------------
|
|
#zoneTitreWbm {
|
|
grid-column:1 ; grid-row: 1;
|
|
display:flex; flex-wrap:wrap;
|
|
white-space:nowrap;
|
|
position: sticky;
|
|
top:0px;
|
|
height:59px;
|
|
width:100%;
|
|
margin:auto;
|
|
vertical-align:middle;
|
|
text-align:left;
|
|
z-index:14;
|
|
padding: 10px;
|
|
overflow:visible;
|
|
border-top-left-radius:20px;
|
|
}
|
|
|
|
#zoneTitreWbm > img{border-radius: 50%;padding:0px;background:transparent;}
|
|
#zoneTitreWbm > form>img{border-radius: 50%;padding:0px;background:transparent;}
|
|
|
|
// #menu-accordeon--> adminInclude/zoneMonCompte.php
|
|
|
|
// ------------------------------------------------------
|
|
// Menus des pages
|
|
// ------------------------------------------------------
|
|
#zoneMenuWbmContainer {
|
|
grid-column: 1; grid-row: 2;
|
|
position: sticky;
|
|
overflow:visible;
|
|
top:59px;
|
|
margin:auto;
|
|
z-index:13;
|
|
padding:3px;
|
|
width:100%; border:0;
|
|
//height:180px;
|
|
background-color: #fff;
|
|
}
|
|
|
|
#zoneMenuWbm {
|
|
display:flex; flex-wrap:wrap;
|
|
white-space:nowrap;
|
|
width:95%;
|
|
overflow:visible;
|
|
margin:auto;
|
|
text-align:center;
|
|
justify-content: flex-start;
|
|
z-index:12;
|
|
padding:3px;
|
|
margin-top:10px;
|
|
margin-bottom:10px;
|
|
border-radius:20px;
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
// ------------------------------------------------------
|
|
// bordure droite qui ne va pas jusqu'en haut
|
|
// ------------------------------------------------------
|
|
.bordure-esp {
|
|
position: relative;
|
|
}
|
|
|
|
.bordure-esp::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 30px; /* Marge en haut */
|
|
bottom: 10px; /* Marge en bas */
|
|
right: 0;
|
|
width: 1px; /* Épaisseur de la bordure */
|
|
background-color: lightgrey; /* Couleur de la bordure */
|
|
}
|
|
|
|
// ------------------------------------------------------
|
|
// sous recherche
|
|
// ------------------------------------------------------
|
|
#zoneRechercheWbm {
|
|
grid-column: 1 ; grid-row: 3;
|
|
display:flex; flex-wrap:wrap;
|
|
white-space:nowrap;
|
|
position: sticky;
|
|
width:100%;
|
|
max-width:100%;
|
|
//top: 190px;
|
|
left:0px;
|
|
margin:auto;
|
|
text-align:left;
|
|
border-radius: 3px;
|
|
align-content: flex-start;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
overflow:visible;
|
|
z-index:12; // ne doit pas etre pplus grand que menus
|
|
flex: 0 0 auto;
|
|
padding:3px;
|
|
white-space: break-spaces;
|
|
}
|
|
|
|
// ------------------------------------------------------
|
|
// Bandeau aide - info
|
|
// ------------------------------------------------------
|
|
#bandeauAideInfo{
|
|
display:flex;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
column-gap:20px;
|
|
position: sticky;
|
|
white-space: break-spaces;
|
|
hyphens: auto;
|
|
text-align:left;
|
|
color:black;
|
|
z-index:10;
|
|
}
|
|
|
|
// ------------------------------------------------------
|
|
// sous Menus des pages // souvent onglets mais a ne plus utiliser pour simplifier
|
|
// ------------------------------------------------------
|
|
#sousMenuPagesWebm {
|
|
display:flex; flex-wrap: wrap;
|
|
vertical-align:middle;
|
|
white-space:nowrap;
|
|
text-align:center;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
align-content: center;
|
|
width:99.9%;
|
|
z-index:10;
|
|
position:relative;
|
|
top:5px;
|
|
}
|
|
|
|
// ------------------------------------------------------
|
|
// Form
|
|
// ------------------------------------------------------
|
|
#zoneFormWbm {
|
|
//grid-column: 1 ;
|
|
// grid-row: 5;
|
|
vertical-align:top;
|
|
text-align:left;
|
|
margin:auto;
|
|
margin-bottom:2px;
|
|
margin-top: 2px;
|
|
font-size:1rem;
|
|
width:100%;
|
|
//height: 30px; //pour sticky hauteur moins grande que parent
|
|
z-index:15;
|
|
overflow: visible;
|
|
display:flex; flex-direction:row; flex-wrap:wrap;
|
|
position: relative;
|
|
}
|
|
|
|
#zoneValidateWbm {
|
|
grid-column: 1 ;
|
|
//grid-row: 6;
|
|
border-radius: 4px;
|
|
margin:2px;
|
|
padding:15px;
|
|
text-align:center;
|
|
vertical-align:middle;
|
|
z-index:6;
|
|
}
|
|
|
|
|
|
// ------------------------------------------------------
|
|
// Styles du menu gauche
|
|
// ------------------------------------------------------
|
|
#tableMenuGauche {
|
|
display:table;
|
|
vertical-align:top;
|
|
height:100%;
|
|
width:100%;
|
|
//margin:7px;
|
|
text-align:left;
|
|
padding:5px;
|
|
border: 1px solid lightgrey;
|
|
border-top-right-radius:20px;
|
|
border-bottom-right-radius:20px;
|
|
}
|
|
|
|
#blockHaut{
|
|
display:block;
|
|
padding:4px;
|
|
padding-top:1px;
|
|
vertical-align:top;
|
|
margin:auto;
|
|
z-index:11;
|
|
position:relative;
|
|
}
|
|
|
|
#siteLogo{
|
|
text-align:center;
|
|
display:inline;
|
|
max-width:45%;
|
|
border-radius:10px;
|
|
padding:2px;
|
|
}
|
|
|
|
#siteName{
|
|
vertical-align:top;
|
|
font-size:1.3rem;
|
|
line-height:1.2em;
|
|
margin-top:0px;
|
|
font-style:italic;
|
|
word-wrap:normal;
|
|
white-space:nowrap;
|
|
overflow:visible;
|
|
font-weight:bold;
|
|
display:block;
|
|
}
|
|
|
|
#siteTime{
|
|
display:flex;
|
|
font-size:0.9rem;
|
|
width:100%;
|
|
margin-top:25px;
|
|
margin-bottom:0px;
|
|
margin-right:0px;
|
|
margin-left:0px;
|
|
border-radius:25px;
|
|
text-align:center;
|
|
background:transparent;
|
|
}
|
|
.clockContainer {
|
|
white-space: nowrap;
|
|
display: flex;flex-wrap: wrap;
|
|
align-items: start;
|
|
margin-bottom:10px;
|
|
}
|
|
|
|
.siteClockLabel,
|
|
.siteClockInput {
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
font-size: 0.8rem;
|
|
font-family: "Roboto Mono", monospace;
|
|
background: transparent;
|
|
border: 0;
|
|
}
|
|
|
|
.siteClockInput {
|
|
width: auto;
|
|
text-align: left;
|
|
}
|
|
|
|
#labelEnv{
|
|
display:block;
|
|
font-size:0.9rem;
|
|
margin-top:1px;
|
|
padding-right:0px;
|
|
padding-left:0px;
|
|
word-wrap:normal;
|
|
line-height:20px;
|
|
white-space:nowrap;
|
|
overflow:visible;
|
|
width:100%;
|
|
}
|
|
|
|
|
|
.menuGaucheMenusPrincipaux {
|
|
// on a de la place et le bouton s'agrandit - il faut optimiser la largeur
|
|
margin:auto;
|
|
margin-top:7px;
|
|
margin-bottom:7px;
|
|
display:block;
|
|
font-weight:bold;
|
|
font-size:1rem;
|
|
text-decoration:none;
|
|
text-align:left;
|
|
}
|
|
|
|
.boitesSousMenuG {display:block; margin-left:4px; position:relative; padding:2px; padding-left:2px; margin-top:2px; margin-bottom:2px;}
|
|
.menuGaucheSousMenus, .boitesSousMenuG a, { text-decoration:none; font-size:1rem; padding-left:11px; }
|
|
.menuGaucheSousMenusActif { font-style:italic; font-weight:bold; text-decoration:none; font-size:1rem; padding-left:11px; }
|
|
.menuGaucheSousMenus:hover { text-decoration:underline;}
|
|
|
|
/* Option : effet enfoncé au clic */
|
|
.menuGaucheSousMenus:active,
|
|
.boitesSousMenuG a:active {
|
|
transform: scale(0.98);
|
|
}
|
|
|
|
// ------------------------------------------------------
|
|
// Styles des pages
|
|
// ------------------------------------------------------
|
|
.titreWbm { text-align:left; font-size:1.3rem; margin:auto; width:70%; }
|
|
.titreWbm > img {border-radius: 50%;padding:0px; background:transparent; vertical-align:middle;}
|
|
#sousSections { padding:4px; margin:4px; margin-top:0px; }
|
|
th { font-family:monospace; padding:5px; margin:5px; }
|
|
|
|
|
|
// ------------------------------------------------------
|
|
// Styles des champs
|
|
// ------------------------------------------------------
|
|
.libChampsWebmaster {
|
|
margin:auto;
|
|
font-size:1rem;
|
|
padding:5px;
|
|
text-align:left;
|
|
white-space:nowrap;
|
|
vertical-align:middle;
|
|
|
|
margin:2px;
|
|
align-items: center;
|
|
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.lib2ChampsWebmaster {left:320px; width:48%;}
|
|
|
|
.inputWebmaster {
|
|
display: inline-block;
|
|
//padding: 3px;
|
|
margin:2px;
|
|
font-size: 0.9rem;
|
|
border-radius: 4px;
|
|
resize: vertical;
|
|
transition: all 0.3s ease-in-out;
|
|
max-width: 100%;
|
|
width: fit-content;
|
|
}
|
|
|
|
.listBoxCouleur {
|
|
display:inline-block;
|
|
border-radius: 4px;
|
|
margin:2px;
|
|
font-size:1rem;
|
|
cursor : pointer;
|
|
}
|
|
|
|
.listBoxCouleur :focus, .listBoxCouleur :hover { border:1px solid #0b4c5f;}
|
|
|
|
.selectWbm {
|
|
border-radius: 4px;
|
|
font-size: 0.9rem;
|
|
padding:3px;
|
|
margin:2px;
|
|
max-height:30px;
|
|
max-width:100%;
|
|
}
|
|
|
|
.selectWbm > option {
|
|
padding-top: 3px;
|
|
padding-bottom: 3px;
|
|
}
|
|
|
|
select option:hover {
|
|
background-color: #dcdcdc; // Gris plus foncé au survol
|
|
color: #000; // Texte en noir pour plus de contraste
|
|
}
|
|
|
|
.textAreaWbm {
|
|
width:100%;
|
|
white-space: pre-wrap;
|
|
word-wrap:break-word;
|
|
word-break: break-all;
|
|
max-width:100%;
|
|
border-radius: 4px;
|
|
resize: vertical;
|
|
transition: all 0.3s ease-in-out;
|
|
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
|
|
font-family: sans-serif;
|
|
}
|
|
|
|
|
|
// ------------------------------------------------------
|
|
// Styles des messages
|
|
// ------------------------------------------------------
|
|
#zoneMsgWbm {
|
|
grid-column: 1 ;
|
|
grid-row: 4;
|
|
hyphens: auto;
|
|
word-break: break-all;
|
|
margin: 4px;
|
|
border-radius : 4px;
|
|
padding: 4px;
|
|
font-size: 1rem;
|
|
transition: all 0.7s ease-in-out;
|
|
border-radius: 10px;
|
|
margin:auto;
|
|
display:block;
|
|
position:relative;
|
|
overflow:visible;
|
|
top:8px;
|
|
z-index:10;
|
|
resize: both;
|
|
min-width: 200px;
|
|
text-align: left;
|
|
|
|
}
|
|
|
|
.admMsgOk, .admMsgKo {
|
|
padding:7px;
|
|
border-radius: 4px;
|
|
margin: auto;
|
|
margin-top:5px;
|
|
margin-bottom:5px;
|
|
hyphens: auto;
|
|
word-break: break-all;
|
|
white-space: normal;
|
|
resize: both;
|
|
text-align: center;
|
|
}
|
|
|
|
.actionMessages { display:inline; font-size:1rem; padding:2px; margin:auto; clear:both;}
|
|
.informationsTechLib { font-size:1rem; }
|
|
.informationsTechValue { border:0px; font-size:1rem; padding:2px;}
|
|
|
|
.debugStyle {
|
|
/*line-height: 24px;*/
|
|
padding: 2px;
|
|
/*font-size: 1.1rem;*/
|
|
max-width:100%;
|
|
white-space:break-spaces;
|
|
word-break:break-all;
|
|
overflow-wrap:break-word;
|
|
// Facultatif mais utile si le conteneur est trop petit
|
|
//overflow: hidden;
|
|
/*min-height:40px;*/
|
|
}
|
|
|
|
span.libChampsWebmaster > input::placeholder {
|
|
color:grey;
|
|
font-style:italic;
|
|
}
|
|
|
|
// ------------------------------------------------------
|
|
// Les boutons
|
|
// ------------------------------------------------------
|
|
|
|
// ------------------------------------------------------
|
|
// Les boutons actions
|
|
.boutonsWebmaster {
|
|
display:inline-block;
|
|
text-align:center;
|
|
align-content:center;
|
|
margin:3px;
|
|
padding:5px;
|
|
font-family: system-ui;
|
|
font-size:0.9rem;
|
|
vertical-align:middle;
|
|
text-decoration:none;
|
|
cursor:pointer;
|
|
white-space: nowrap;
|
|
max-height:53px;
|
|
border-radius:7px;
|
|
//max-height : 35px;
|
|
}
|
|
|
|
// ------------------------------------------------------
|
|
// Les boutons menus de chaque pages
|
|
// ------------------------------------------------------
|
|
.boutonsMenusWbm, .boutonsMenuWbmActif {
|
|
display: inline-block;
|
|
font-size:1rem;
|
|
text-align:center;
|
|
align-content:center;
|
|
vertical-align:middle;
|
|
white-space:nowrap;
|
|
text-decoration:none;
|
|
cursor:pointer;
|
|
list-style-type : none;
|
|
padding:5px;
|
|
margin:5px;
|
|
font-size:1rem;
|
|
height:37px;
|
|
border-radius:12px;
|
|
}
|
|
|
|
.boutonsMenuWbmActif {
|
|
border-radius:3px;
|
|
border-top-left-radius:12px;
|
|
border-top-right-radius:12px;
|
|
}
|
|
|
|
#btnAvance {
|
|
margin:auto;
|
|
display:block;
|
|
border-radius:2px;
|
|
padding-right:10px;
|
|
padding-left:10px;
|
|
padding-top:3px;
|
|
padding-bottom:3px;
|
|
font-size:1rem;
|
|
cursor:pointer;
|
|
text-align:center;
|
|
margin-bottom:5px;
|
|
}
|
|
|
|
|
|
// ------------------------------------------------------
|
|
// Icônes a priori impacte seulement styles, car les autres sont tous surchargés
|
|
// ------------------------------------------------------
|
|
i ,.fas, .far, .fab ,.fad, .fab, .fa-arrow-circle-left, .fa-arrow-circle-right,.fa-database {
|
|
@include awesomIco;
|
|
}
|
|
|
|
// ------------------------------------------------------
|
|
// Bulle ronde Numéro item
|
|
// ------------------------------------------------------
|
|
.roundedImage{
|
|
border-radius: 50%;
|
|
text-align:center;
|
|
vertical-align:middle;
|
|
text-align:center;
|
|
height:20px;
|
|
margin:2px;
|
|
width:20px;
|
|
display:block;
|
|
box-shadow : 5px 5px lightgrey;
|
|
}
|
|
|
|
|
|
// ------------------------------------------------------
|
|
// Zone aide détaillée dans agencement
|
|
// ------------------------------------------------------
|
|
.pop{
|
|
text-align:left;
|
|
display:inline-block;
|
|
padding:5px;
|
|
margin-left:25px;
|
|
border-radius:5px;
|
|
}
|
|
|
|
|
|
// ------------------------------------------------------
|
|
// Theme
|
|
// ------------------------------------------------------
|
|
#theContainerOFCarrousse{
|
|
display:grid;
|
|
vertical-align:top;
|
|
margin:auto;
|
|
vertical-align:top;
|
|
grid-row:3;
|
|
width:95%;
|
|
grid-column-gap:20px;
|
|
}
|
|
|
|
#theCarrousse{
|
|
border:1px solid lightgrey;
|
|
vertical-align:top;
|
|
display:block;
|
|
padding:1px;
|
|
padding-bottom:30px;
|
|
margin-bottom:5px;
|
|
height:406px;
|
|
}
|
|
|
|
|
|
// ------------------------------------------------------
|
|
// liste des articles / tableaux
|
|
// ------------------------------------------------------
|
|
.tableaux {
|
|
// liste de valeurs, liste des etats cde, pays, ref, ....tout tableau en liste, les %grid sont définis dans le style html
|
|
// couleur a passer dans theemClair
|
|
width:100%;
|
|
text-align:left;
|
|
background-color:#f4f6fc;
|
|
padding:0px;
|
|
margin:0px;
|
|
}
|
|
|
|
.ligneFlex {
|
|
display:flex;
|
|
width:100%;
|
|
justify-content:space-between;
|
|
text-align:center;
|
|
margin-bottom:5px;
|
|
}
|
|
|
|
.libelleLV{
|
|
width:100%;
|
|
text-align:left;
|
|
font-weight:bold;
|
|
padding:5px;
|
|
|
|
background:grey;
|
|
color:white;
|
|
}
|
|
|
|
.celluleLV {vertical-align:middle; font-size:1rem; margin:0; margin-bottom:1px; margin-top:1px; margin-left:0px; width:100%; background-color:white; display:block; padding:6px; }
|
|
|
|
.celluleLV:hover {background:#f4f6fc; }
|
|
|
|
.numLV{
|
|
align-content:center;
|
|
vertical-align:middle;
|
|
text-align:center;
|
|
font-size:13px;
|
|
width:100%;
|
|
display:inline-block;
|
|
position:relative;
|
|
line-height:1.3em;
|
|
white-space:nowrap;
|
|
padding:0px;
|
|
margin:0px;
|
|
font-size:13px;
|
|
vertical-align:middle;
|
|
}
|
|
|
|
.inputLV{
|
|
width:97%;
|
|
display:block;
|
|
border:0px;
|
|
}
|
|
|
|
.ligneFlexBloc{
|
|
display:flex;
|
|
text-align:center;
|
|
flex-direction:column;
|
|
background-color:white;
|
|
border-bottom:1px solid lightgreen;
|
|
width:100%;
|
|
padding:0px;
|
|
}
|
|
|
|
.ligneFlexLignes {
|
|
display:flex;
|
|
width:100%;
|
|
justify-content:space-between;
|
|
padding:4px;
|
|
}
|
|
|
|
.celluleFlex {
|
|
text-align:left;
|
|
padding:4px;
|
|
max-width:100%;
|
|
}
|
|
|
|
.col-image { width: 150px; }
|
|
.col-nom { width: 150px; }
|
|
.col-ref { width: 145px; }
|
|
.col-categorie { width: 130px; }
|
|
.col-souscategorie { width: 170px; }
|
|
.col-gondole { width: 70px; }
|
|
.col-promo { width: 70px; }
|
|
.col-tva { width: 100px; }
|
|
.col-prix { width: 100px; }
|
|
.col-statut { width: 80px; }
|
|
.col-action { width: 50px; }
|
|
|
|
.libChampArtListe {
|
|
text-align:center;
|
|
font-size:0.9rem;
|
|
vertical-align:top;
|
|
margin-bottom:1px;
|
|
display:none;
|
|
text-align:center;
|
|
display:inline;
|
|
}
|
|
.celluleFlex.col-nom input, .celluleFlex.col-ref input, {max-width:200px;}
|
|
.blocFamille {display:flex; justify-content:space-between; width:100%; vertical-align:top; flex-direction:row; flex-wrap:wrap; padding:3px; }
|
|
.boiteFam {flex-direction:column;}
|
|
.flexToColumn{display:flex; flex-wrap:wrap; }
|
|
|
|
.borderBottomToNot {border-bottom:1px solid;}
|
|
.gridToFlexCol{display:grid;}
|
|
.gridToNone{display:grid;}
|
|
.noneToInlineVisible{display:none;}
|
|
|
|
// ------------------------------------------------------
|
|
// Summer note liste police
|
|
// ------------------------------------------------------
|
|
note-editor .note-toolbar .note-dropdown-menu, .note-popover .popover-content .note-dropdown-menu {
|
|
min-width: 380px;
|
|
width: 100%;
|
|
}
|
|
|
|
.note-toolbar{
|
|
display:flex;
|
|
width:100%;
|
|
flex-wrap:wrap;
|
|
}
|
|
|
|
.note-editable { white-space: break-spaces; }
|
|
.note-btn { line-height:1.1 !important;}
|
|
|
|
// ------------------------------------------------------
|
|
// Contenu
|
|
// ------------------------------------------------------
|
|
#boiteRech { display:flex; padding:12px; padding-left:0px; flex-direction:row; flex-wrap:wrap; vertical-align:top; margin:0px; margin-bottom:3px; color:#0b4c5f;}
|
|
|
|
// ------------------------------------------------------
|
|
// Avancement
|
|
// ------------------------------------------------------
|
|
blink { animation: blinker 0.6s linear infinite; }
|
|
@keyframes blinker { 50% { opacity: 0; } }
|
|
|
|
.blink-one { animation: blinker-one 20s linear infinite; }
|
|
@keyframes blinker-one { 0% { opacity: 0; } }
|
|
|
|
.blink-two { animation: blinker-two 1.4s linear infinite; }
|
|
@keyframes blinker-two { 100% { opacity: 0; } }
|
|
|
|
|
|
// ------------------------------------------------------
|
|
// Barre sous sous menus / onglets
|
|
// ------------------------------------------------------
|
|
#sousOnglets {
|
|
display:flex;
|
|
flex-direction:row;
|
|
list-style-type : none;
|
|
width:100%;
|
|
padding:0px;
|
|
padding-left:0px;
|
|
min-height:55px;
|
|
margin:auto;
|
|
margin-top:15px;
|
|
font-size:1rem;
|
|
text-align:center;
|
|
justify-content: flex-start;
|
|
align-content: center;
|
|
//border-bottom:1px solid lightgrey;
|
|
|
|
}
|
|
|
|
#sousOnglets li {
|
|
border-radius: 12px 12px 0px 0px;
|
|
/*display:inline-block;*/
|
|
margin:1px;
|
|
margin-bottom : 0px ;
|
|
margin-top : 3px ;
|
|
padding : 5px;
|
|
text-align:center;
|
|
text-decoration:none;
|
|
display:flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
#sousOnglets li >a, #sousOnglets a {
|
|
text-decoration: none;
|
|
}
|
|
|
|
#sousOnglets li:hover, #sousOnglets a:hover{ cursor:pointer; }
|
|
|
|
// Pour gestion couleur onglets, pas utilisé
|
|
#puceMenu2.fad {color:white;}
|
|
#puceMenu2:hover{color:white;}
|
|
|
|
|
|
// ------------------------------------------------------
|
|
// popup title
|
|
// ------------------------------------------------------
|
|
|
|
[title] {
|
|
position: relative; // Nécessaire pour positionner la tooltip
|
|
white-space:break-spaces;
|
|
word-break:break-word;
|
|
overflow-wrap:break-word;
|
|
cursor: pointer;
|
|
|
|
}
|
|
|
|
// Création de la tooltip avec l'attribut title
|
|
[title]:after {
|
|
content: attr(title); // Récupère le texte du title
|
|
position: absolute;
|
|
background: #fcfee5;
|
|
color: #333;
|
|
padding: 8px 12px;
|
|
border-radius: 4px;
|
|
|
|
// font-weight: bold;
|
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
|
white-space: break-spaces;
|
|
word-wrap:break-word;
|
|
word-break:break-word;
|
|
overflow-wrap:break-word;
|
|
hyphens: auto;
|
|
min-width:120px;
|
|
max-width:170px;
|
|
bottom: 100%;
|
|
left:10%;
|
|
//transform: translateX(-50%);
|
|
opacity: 1;
|
|
visibility: visible;
|
|
transition: opacity 0.2s ease-in-out, visibility 0s 0s;
|
|
z-index: 999;
|
|
text-align:left;
|
|
}
|
|
|
|
// Masquer par défaut
|
|
[title]::after,
|
|
[title]::before {
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
}
|
|
|
|
|
|
// Affichage lors du survol
|
|
[title]:hover::after,
|
|
[title]:hover::before {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
}
|
|
|
|
//--------------------------------
|
|
/* Infobulle personnalisée */
|
|
[data-tooltip] {
|
|
position: relative;
|
|
}
|
|
|
|
[data-tooltip]::after {
|
|
content: attr(data-tooltip);
|
|
position: absolute;
|
|
background: #fcfee5;
|
|
color: #333;
|
|
padding: 8px 12px;
|
|
border-radius: 4px;
|
|
font-size: 1rem;
|
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
|
white-space: normal;
|
|
word-break: break-word;
|
|
max-width: 250px;
|
|
min-width: 120px;
|
|
text-align: left;
|
|
z-index: 999;
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
transition: opacity 0.2s ease-in-out;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* Affichage au survol */
|
|
[data-tooltip]:hover::after {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
}
|
|
|
|
/* Position par défaut (tooltip en bas) */
|
|
.tooltip-bottom[data-tooltip]::after {
|
|
top: 100%;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
margin-top: 8px;
|
|
}
|
|
|
|
/* Position alternative (tooltip en haut) */
|
|
.tooltip-top[data-tooltip]::after {
|
|
bottom: 100%;
|
|
left: 5%;
|
|
transform: translateX(20%);
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
/* Position alternative (tooltip en left) */
|
|
.tooltip-left[data-tooltip]::after {
|
|
right: 50%;
|
|
transform: translateX(-50%);
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
// ------------------------------
|
|
// Pour la popup information/aide
|
|
// ------------------------------
|
|
.popup {
|
|
display: none;
|
|
position: fixed;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: 400px;
|
|
background: #f8f9de;
|
|
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
|
|
border-radius: 10px;
|
|
z-index: 18;
|
|
text-align: left;
|
|
padding: 15px;
|
|
animation: fadeIn 0.3s ease-in-out;
|
|
overflow: visible; // Laisse la popup se redimensionner naturellement
|
|
|
|
flex-direction: column; // Permet d'aligner les éléments dans la popup
|
|
justify-content: flex-start; // Aligne le contenu en haut
|
|
}
|
|
|
|
.popup-content {
|
|
margin: 0;
|
|
padding: 0;
|
|
display: flex;
|
|
flex-direction: column; // Permet d'aligner les éléments à l'intérieur
|
|
justify-content: flex-start; // Aligne le contenu en haut
|
|
text-wrap: wrap;
|
|
z-index: 18;
|
|
}
|
|
|
|
.popup-icon {
|
|
width: 40px;
|
|
height: 40px;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.popup-close {
|
|
position: absolute;
|
|
top: 10px;
|
|
right: 10px;
|
|
font-size: 1.3rem;
|
|
cursor: pointer;
|
|
color: grey;
|
|
border: 2px solid #06c;
|
|
background-color: white;
|
|
padding: 3px;
|
|
width: 30px; // Taille du bouton
|
|
height: 30px; // Taille du bouton
|
|
border-radius: 50%; // Rendre le bouton rond
|
|
text-align: center;
|
|
line-height: 20px; // Centrer le caractère ×
|
|
z-index: 12;
|
|
}
|
|
|
|
.popup-close:hover {
|
|
background-color: #ffcccc; // Effet de survol pour le bouton
|
|
color:white;
|
|
}
|
|
|
|
|
|
@keyframes fadeIn {
|
|
from { opacity: 0; transform: translate(-50%, -55%); }
|
|
to { opacity: 1; transform: translate(-50%, -50%); }
|
|
}
|
|
|
|
// ------------------------------
|
|
// Agencement
|
|
// ------------------------------
|
|
#blocDroit {
|
|
grid-column:2; grid-row:1;
|
|
right: 0;
|
|
overflow-y: scroll;
|
|
z-index: 10;
|
|
padding:0px;
|
|
padding-top:0px;
|
|
margin-right:5px;
|
|
top:10px;
|
|
position:sticky;
|
|
/* heigh nécessaire pour sticky */
|
|
height:900px;
|
|
}
|
|
|
|
#agencementPreview {
|
|
overflow-y: auto;
|
|
position: relative;
|
|
// pour retrouver ascenceur ici mettre un height
|
|
height: 100vh;
|
|
grid-column:1; grid-row:1;
|
|
width:100%; padding:0px;
|
|
border:0px; transform:scale(1,1); padding-top:0px;
|
|
top:10px;
|
|
position:relative;
|
|
}
|
|
|
|
.agencementBarreInfo {
|
|
display:flex;
|
|
flex-direction:row;
|
|
padding:7px;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
align-content: center;
|
|
flex-wrap: wrap;
|
|
font-weight:bold;
|
|
font-size:1rem;
|
|
border:1px solid #daeff8;
|
|
border-radius:2px;
|
|
top:0;
|
|
position:sticky;
|
|
width:100%;
|
|
z-index:11;
|
|
justify-content:flex-start;
|
|
border-radius:4px;
|
|
margin:2px; // comme libChampsWebmaster
|
|
margin-bottom:10px;
|
|
|
|
}
|
|
|
|
// Zone map menu
|
|
.mTable {
|
|
display:flex;
|
|
flex-direction:row;
|
|
padding:15px;
|
|
width:100%;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
justify-content: space-around;
|
|
align-content: center;
|
|
flex-wrap: wrap;
|
|
margin-top:2px;
|
|
border:1px solid lightgrey;
|
|
border-top-left-radius:5px;
|
|
border-top-right-radius:5px;
|
|
top:0px;
|
|
position:sticky;
|
|
height:150px;
|
|
z-index: 10;
|
|
opacity:1;
|
|
}
|
|
|
|
// Zone des boutons sousmenu
|
|
.mRow {padding:1px; margin:5px; display:flex; flex-direction:row; flex-wrap:wrap; gap:5px; justify-content: center; align-items: flex-start;}
|
|
.mCell { padding:1px; margin:1px; display:flex; flex-direction:column; flex-wrap:wrap; gap:5px; justify-content: center; align-items: flex-start; }
|
|
|
|
|
|
.itemPpal, .itemPpalDisabled, .itemEnabled , .itemDisabled {
|
|
font-size: 0.9rem;
|
|
margin:0px;
|
|
padding:0px;
|
|
cursor:pointer;
|
|
border-radius:2px;
|
|
}
|
|
|
|
.itemPpal:hover, .itemPpalDisabled:hover, .itemEnabled:hover, .itemDisabled:hover{
|
|
background:#f4f6fc;
|
|
}
|
|
|
|
.iconesPpauxMenuDeroulant, .iconesPpauxMenuDeroulant:hover{
|
|
font-size:1rem;
|
|
margin:2px;
|
|
padding:0px;
|
|
height:auto;
|
|
}
|
|
|
|
// ------------------------------
|
|
// Mails
|
|
// ------------------------------
|
|
.modaleMails{
|
|
resize:both;
|
|
overflow:scroll;
|
|
width: 85%;
|
|
height: 80%;
|
|
}
|
|
|
|
.popupMails{
|
|
width: 85%;
|
|
height: 95%;
|
|
resize:both;
|
|
overflow:scroll;
|
|
}
|
|
|
|
#mailsInfo {
|
|
position:relative;
|
|
display:block;
|
|
left:0;
|
|
overflow:hidden;
|
|
text-align:left;
|
|
border:1px solid grey;
|
|
border-radius: 2px;
|
|
box-shadow:8px 8px 10px 0 rgba(0,0,0,0.5);
|
|
margin-bottom:3px;
|
|
resize:both;
|
|
width:100%;
|
|
height:2px;
|
|
line-height:8px;
|
|
float:left;
|
|
white-space:nowrap;
|
|
// border:1px solid red;
|
|
}
|
|
|
|
.mailsAide {
|
|
// position:absolute;
|
|
display:block;
|
|
left:0;
|
|
bottom:0;
|
|
height:2px;
|
|
color:#999493;
|
|
font-size:14px;
|
|
text-align:left;
|
|
background-color:white;
|
|
transition: all 1s;
|
|
padding:5px;
|
|
border-radius: 2px;
|
|
opacity:0.8;
|
|
width:100%;
|
|
white-space:nowrap;
|
|
}
|
|
|
|
#mailsInfo:hover, .mailsAide{
|
|
height:70%;
|
|
opacity:1;
|
|
line-height:18px;
|
|
padding:8px;
|
|
cursor:pointer;
|
|
}
|
|
|
|
|
|
// ------------------------------------------------------
|
|
// LISTE DEROULANTE AVEC ICO LANGUE
|
|
// ------------------------------------------------------
|
|
.languesListeBox{
|
|
top:0px;
|
|
margin:5px;
|
|
position:relative;
|
|
width:250px;
|
|
left:1px;
|
|
}
|
|
|
|
.dropdownCell {
|
|
border:1px solid #bbb;
|
|
width:140px;
|
|
height:23px;
|
|
cursor:pointer;
|
|
font-size:11pt;
|
|
max-height:23px;
|
|
background:url('../designAdmin/arrow.gif') top right no-repeat;
|
|
color:black;
|
|
background-color:white;
|
|
border-radius: 4px;
|
|
margin:5px;
|
|
text-align:left;
|
|
padding-left: 8px;
|
|
border-right: 0;
|
|
}
|
|
|
|
.dropdownCellIco {
|
|
border:1px solid #bbb;
|
|
width:100%;
|
|
height:23px;
|
|
cursor:pointer;
|
|
font-size:11pt;
|
|
max-height:23px;
|
|
background:url('../designAdmin/arrow.gif') top right no-repeat;
|
|
color:black;
|
|
background-color:white;
|
|
border-radius: 4px;
|
|
margin:5px;
|
|
text-align:left;
|
|
padding-left: 8px;
|
|
border-right: 0;
|
|
}
|
|
|
|
#liste {
|
|
}
|
|
|
|
.dropdownCell img{
|
|
margin:3px 3px 3px 3px;
|
|
vertical-align:middle;
|
|
width:24px;
|
|
background-color:$grisClair;
|
|
text-align:left;
|
|
}
|
|
|
|
// partie déroulée
|
|
.dropdownPanel{
|
|
display:flex;
|
|
flex-wrap:wrap;
|
|
position:relative;
|
|
left:8px;
|
|
border:1px solid #bbb;
|
|
border-radius: 14px;
|
|
width:137px;
|
|
color:#FFFFFF;
|
|
background-color:#161515;
|
|
text-align:left;
|
|
z-index:11;
|
|
padding:7px;
|
|
}
|
|
|
|
.dropdownPanelIco{
|
|
display:flex;
|
|
flex-wrap:wrap;
|
|
position:relative;
|
|
left:8px;
|
|
border:1px solid #bbb;
|
|
border-radius: 4px;
|
|
width:100%;
|
|
color:#FFFFFF;
|
|
/*background-color:$grisClair;*/
|
|
text-align:left;
|
|
z-index:11;
|
|
/*flex-direction: column;*/
|
|
}
|
|
|
|
.dropdownOpt{
|
|
cursor:pointer;
|
|
font-size:10pt;
|
|
color:#FFFFFF;
|
|
border-radius: 12px;
|
|
padding:7px;
|
|
}
|
|
|
|
.dropdownOptIco{
|
|
cursor:pointer;
|
|
font-size:10pt;
|
|
color:#FFFFFF;
|
|
border-radius: 20px;
|
|
padding:15px;
|
|
border: 1px solid grey;
|
|
margin:3px;
|
|
}
|
|
|
|
.dropdownOpt img{
|
|
margin:3px 3px 3px 3px;
|
|
vertical-align:middle;
|
|
width:24px;
|
|
background-color:$grisClair;
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.dropdownOpt a{
|
|
text-decoration:none;
|
|
width:100%;
|
|
text-align:left;
|
|
color:black;
|
|
}
|
|
|
|
.dropdownOptSelected, .dropdownOpt:hover {
|
|
background-color:$blanc;
|
|
width:100%;
|
|
color:#0b4c5f;
|
|
border-radius: 12px;
|
|
text-align:left;
|
|
color:black;
|
|
}
|
|
|
|
// ------------------------------------------------------
|
|
// Menu mon compte
|
|
// --------------------------------------------------
|
|
#menu-accordeon {
|
|
padding:0px;
|
|
margin:0;
|
|
list-style:none;
|
|
text-align: center;
|
|
font-size:1rem;
|
|
max-width:250px;
|
|
display:inline-block;
|
|
float:right;
|
|
z-index: 11;
|
|
position:relative;
|
|
background:transparent;
|
|
}
|
|
|
|
#menu-accordeon ul {
|
|
padding:0;
|
|
line-height:25px;
|
|
margin:0;
|
|
list-style:none;
|
|
text-align: center;
|
|
}
|
|
|
|
#menu-accordeon li {
|
|
border-top-left-radius: 6px;
|
|
border-top-right-radius: 6px;
|
|
margin:7px;
|
|
box-shadow: 1px 1px 1px grey;
|
|
background: #F5E3C9;
|
|
}
|
|
|
|
#menu-accordeon li li {
|
|
max-height:0;
|
|
overflow: hidden;
|
|
transition: all .5s;
|
|
border-radius:0;
|
|
background: lightgrey;
|
|
border:none;
|
|
margin:0;
|
|
}
|
|
|
|
#menu-accordeon a {
|
|
display:block;
|
|
text-decoration: none;
|
|
color: #fff;
|
|
padding: 5px 0;
|
|
font-size:1rem;
|
|
color:black;
|
|
}
|
|
|
|
#menu-accordeon ul li a {
|
|
font-size:1em;
|
|
background-color:#FFF;
|
|
}
|
|
|
|
#menu-accordeon ul li a:hover {
|
|
background: #F5E3C9;
|
|
border:1px solid white;
|
|
/*background:transparent;*/
|
|
|
|
}
|
|
|
|
#menu-accordeon li li:hover {
|
|
background: #F5E3C9;
|
|
}
|
|
|
|
#menu-accordeon ul li:last-child {
|
|
border-radius: 0 0 6px 6px;
|
|
}
|
|
|
|
#menu-accordeon li:hover li {
|
|
max-height: 15em;
|
|
} |