225 lines
4.4 KiB
CSS
Executable File
225 lines
4.4 KiB
CSS
Executable File
:root {
|
|
/* Brand Colors — Charcoal / Gris neutre (zéro vert) */
|
|
--color-primary: #212E53; /*#2e3440;*/ /* charcoal foncé */
|
|
--color-primary-light: #4c566a; /* slate moyen */
|
|
--color-primary-dark: #1a1d24; /* quasi-noir */
|
|
--color-primary-ghost: rgba(33, 46, 83, 0.05); /* Ajusté sur le Charcoal */
|
|
|
|
/* Accent / Status — conservés pour lisibilité fonctionnelle */
|
|
--color-accent: #5e6e82; /* gris-bleu neutre */
|
|
--color-urgent: #c0392b;
|
|
--color-warning: #e67e22;
|
|
--color-success: #27ae60;
|
|
--color-info: #2980b9;
|
|
--color-neutral: #7f8c8d;
|
|
|
|
/* Backgrounds */
|
|
--bg-base: #f2f3f5;
|
|
--bg-surface: #ffffff;
|
|
--bg-surface-2: #f8f9fa;
|
|
--bg-sidebar: #7A90A4;/*#1e2228;*/ /* charcoal très sombre */
|
|
--bg-header: #ffffff;
|
|
|
|
/* Text — contraste maximal */
|
|
--text-primary: #1a1d24;
|
|
--text-secondary: #4c566a;
|
|
--text-muted: #7b8a99;
|
|
--text-inverse: #ffffff;
|
|
|
|
/* Borders */
|
|
--border-light: #e3e6ea;
|
|
--border-medium: #c8cdd4;
|
|
|
|
/* Spacing & Radius */
|
|
--radius-sm: 4px;
|
|
--radius-md: 6px;
|
|
--radius-lg: 8px;
|
|
--radius-xl: 12px;
|
|
--radius-full: 9999px;
|
|
|
|
/* Shadows — neutres, sans teinte colorée */
|
|
--shadow-xs: 0 1px 2px rgba(0,0,0,.05);
|
|
--shadow-sm: 0 2px 4px rgba(0,0,0,.05);
|
|
--shadow-lg: 0 10px 25px rgba(0,0,0,.1);
|
|
|
|
/* Transitions */
|
|
--transition-fast: 0.15s ease;
|
|
--transition-base: 0.25s ease;
|
|
--transition-slow: 0.4s cubic-bezier(.4,0,.2,1);
|
|
|
|
/* Layout */
|
|
--sidebar-width: 240px;
|
|
--sidebar-collapsed: 60px;
|
|
--header-height: 60px;
|
|
--context-width: 320px;
|
|
}
|
|
|
|
.sidebar, .sidebar-nav .nav-link.collapsed{
|
|
/*background:#3473ac;*/
|
|
color:var(--text-primary);
|
|
width: 100%;
|
|
}
|
|
|
|
|
|
.sidebar-nav .nav-content a {
|
|
color:white
|
|
}
|
|
|
|
.active-submenu{
|
|
color:#fff !important;
|
|
width:150px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.active-submenu:hover{
|
|
/* color:grey !important; */
|
|
background:#d6d7d8 !important;
|
|
color:green !important
|
|
}
|
|
|
|
.sidebar-nav .nav-content a:hover{
|
|
color:grey !important;
|
|
/* background:grey !important */
|
|
font-weight: bold !important;
|
|
}
|
|
|
|
.nav-item:hover .bi, .nav-item:hover .bx, .nav-item:hover .collapsed{
|
|
color:grey !important;
|
|
background:#F5F8FE !important;
|
|
}
|
|
|
|
.sidebar-nav .nav-link{
|
|
width:250px;
|
|
cursor:pointer;
|
|
|
|
}
|
|
|
|
#main{
|
|
margin-top: 0;
|
|
}
|
|
|
|
#main {
|
|
/*margin-top: 60px;*/
|
|
padding: 20px 30px;
|
|
transition: all 0.3s;
|
|
}
|
|
|
|
@media (max-width: 1199px){
|
|
#main {
|
|
padding: 20px;
|
|
}
|
|
}
|
|
|
|
.sidebar-nav .nav-content a {
|
|
width: 190px !important;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* .right-side-nav{
|
|
background:#286090;
|
|
color:white;
|
|
width: 300px;
|
|
height: 80vh;
|
|
position:absolute;
|
|
padding: 2px;
|
|
right:0;
|
|
top:80px
|
|
} */
|
|
|
|
.fixed-button {
|
|
position: fixed;
|
|
top: 15%;
|
|
right: 0;
|
|
transform: translateY(-50%);
|
|
color: white;
|
|
padding: 15px 20px;
|
|
border: none;
|
|
border-radius: 0;
|
|
cursor: pointer;
|
|
}
|
|
|
|
|
|
.sr-only{
|
|
visibility:hidden
|
|
}
|
|
|
|
/* style la barre de navigation horizontale */
|
|
|
|
div.scrollmenu {
|
|
background-color: white;
|
|
/* overflow: auto; */
|
|
white-space: nowrap;
|
|
margin-bottom:5px
|
|
}
|
|
|
|
div.scrollmenu a {
|
|
display: inline-block;
|
|
color: #286090;
|
|
border: solid 2px #286090;
|
|
line-height: 10px;
|
|
|
|
text-align: center;
|
|
padding: 6px;
|
|
text-decoration: none;
|
|
}
|
|
|
|
div.scrollmenu a:hover {
|
|
background-color: #286090;
|
|
color: white;
|
|
}
|
|
|
|
/* style de la barre de navigation verticale */
|
|
.sidebar{
|
|
max-width:200px;
|
|
padding:5px
|
|
}
|
|
|
|
.sidebar-nav .nav-link{
|
|
width:190px
|
|
}
|
|
|
|
#main{
|
|
margin-left:200px;
|
|
padding:10px
|
|
}
|
|
.logo {
|
|
width: 163px;
|
|
}
|
|
|
|
.sr-only
|
|
{
|
|
display: none;
|
|
}
|
|
|
|
#showSideNav{
|
|
position: absolute;
|
|
top: 106px;
|
|
right:0;
|
|
opacity: 0.5;
|
|
position:fixed
|
|
}
|
|
#showSideNav:hover{
|
|
opacity: 1;
|
|
}
|
|
|
|
|
|
.fixed-div {
|
|
width: 100%; /* Set the width of the fixed div */
|
|
position: fixed; /* Make the div fixed */
|
|
top: 50; /* Position it at the top of the viewport */
|
|
/* background-color: #f1f1f1; */
|
|
/* padding: 10px; */
|
|
overflow-x: auto; /* Enable horizontal scrolling */
|
|
white-space: nowrap; /* Prevent text from wrapping */
|
|
|
|
}
|
|
|
|
.content {
|
|
width: 200%; /* Set the width of the content inside the fixed div */
|
|
}
|
|
|
|
|
|
.main-dashboard{
|
|
margin-top: 60px;
|
|
}
|