/* Chrome, Safari, Edge, Opera */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* Firefox */
input[type="number"] {
-moz-appearance: textfield;
}
.ph-container {
display: flex;
padding: 10px 45px;
gap: 15px;
flex-wrap: wrap;
min-height: 70vh;
align-content: flex-start;
width: 100%;
transition: all 0.2s ease-in-out;
}
.ph-container.dragover::after {
content: 'Déposez les fichiers ici';
position: fixed;
background-color: rgba(0, 0, 0, 0.5);
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
color: white;
top: 0;
left: 0;
font-size: 25px;
}
#ph-next,
#ph-sentinel,
#ph-loading {
flex-basis: 100%;
width: 100%;
}
#ph-sentinel {
height: 1px;
}
#ph-loading {
text-align: center;
}
#boutonDwonloadAll.galerie{
display: none;
}
.img-hidden {
opacity: 0;
}
.fade-in {
animation: fadeIn .4s ease forwards;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.fade-out {
animation: fadeOut .4s ease forwards;
}
@keyframes fadeOut {
from { opacity: 1; }
to { opacity: 0; }
}
/* Define the fade-in animation */
@keyframes fadeIn {
0% {
opacity: 0;
transform: translateY(20px);
/* Optional: slide-up effect */
}
100% {
opacity: 1;
transform: translateY(0);
}
}
/* Set initial state for elements */
.ph-element {
opacity: 0;
-webkit-user-select: none;
/* Safari */
-ms-user-select: none;
/* IE 10 and IE 11 */
user-select: none;
/* Standard syntax */
/* Start hidden */
}
.ph-element:hover {
border: solid 2px #6fb1e8;
}
.ph-element:has(.checkElement:checked) {
border: solid 2px #fb6340;
}
.ph-element {
width: 235px;
height: 235px;
aspect-ratio: 1/1;
background-size: cover;
border: solid 2px black;
border-radius: 5px;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
overflow: hidden;
background-position: center;
background-image: var(--bg);
box-shadow: 16px 0px 12px 0px rgba(0, 0, 0, 0.3);
cursor: pointer;
}
.ph-element.ph-True {
cursor: pointer;
}
.ph-element.ph-Dossier,
.ph-element.ph-Photo .ph-element.ph-Vidéo {
cursor: pointer;
}
.ph-element:hover .ph-element_header .ph-element_header_select {
opacity: 1;
}
.ph-element_header {
opacity: 1;
display: flex;
flex-direction: row;
width: 100%;
justify-content: space-between;
padding: 5px;
transition: all 0.2s ease-in;
}
.ph-element_header_select {
opacity: 0;
}
.ph-element_header_delete svg {
width: 18px;
height: 18px;
}
.ph-element_footer {
background: rgb(2, 0, 36);
background: linear-gradient(180deg, rgba(2, 0, 36, 0) 0%, rgba(0, 0, 0, 0.5942752100840336) 47%, rgba(0, 0, 0, 1) 100%);
color: white;
width: 100%;
text-align: center;
padding: 5px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.ph-video:not(tr)::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 40px;
height: 40px;
background-image: url('data:image/svg+xml,');
translate: -50% -50%;
}
.ph-audio:not(tr)::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 40px;
height: 40px;
background-image: url('data:image/svg+xml,');
translate: -50% -50%;
}
.ph-file:not(tr)::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 40px;
height: 40px;
background-image: url('data:image/svg+xml,');
translate: -50% -50%;
}
.ph-element.ph-False::after,
.ph-element.ph-False:hover::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 40px;
height: 40px;
background-image: url('data:image/svg+xml,');
translate: -50% -50%;
}
.ph-photo:not(tr)::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 40px;
height: 40px;
background-image: url('data:image/svg+xml,');
translate: -50% -50%;
}
.ph-dossierVirtuel::before {
content: '';
position: absolute;
inset: 0;
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat;
background-position: center;
}
.ph-dossierVirtuel.is-public::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 20px;
height: 20px;
translate: -50% -50%;
background-repeat: no-repeat;
background-size: contain;
background-image:url('data:image/svg+xml,');
}
.ph-dossierVirtuel::before,
.ph-dossierVirtuel::after{
pointer-events: none;
}
.ph-ariane {
display: flex;
padding: 10px 10px;
margin: 10px 40px;
gap: 8px;
border: 2px solid;
border-radius: 12px;
width: fit-content;
}
.ph-ariane a {
color: white;
text-decoration: none;
}
.ph-ariane_home svg {
width: 18px;
height: 18px;
}
.main-content {
overflow-y: auto;
max-height: 100vh;
}
.fullscreen-div {
display: none;
opacity: 0;
position: fixed;
-webkit-backface-visibility: hidden;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, 0.8);
/* Transparent black background */
z-index: 1200;
transition: opacity 0.2s ease;
}
.fullscreen-div img,
.fullscreen-div video {
width: 100%;
max-height: 90vh;
max-width: 100%;
height: 100%; /* <- important */
object-fit: contain; /* pas de déformation */
}
.fullscreen-div .selected {
border: #fb6340 5px solid;
}
.fullscreenDiv_close {
position: relative;
padding: 20px;
top: 0;
right: 0;
}
.fullscreenDiv_close:hover {
cursor: pointer;
}
.fullscreenDiv_close svg {
width: 20px;
height: 20px;
}
.fullscreenDiv_right {
position: absolute;
top: 50%;
right: 0;
padding: 20px;
transform: translateY(-50%);
cursor: pointer;
}
.fullscreenDiv_right svg,
.fullscreenDiv_left svg {
width: 50px;
height: 50px;
}
.fullscreenDiv_left {
position: absolute;
top: 50%;
left: 0;
padding: 20px;
transform: translateY(-50%);
cursor: pointer;
}
#fullscreenDiv_image {
position: relative;
display: flex;
width: 100vw;
transition: all 0.2s ease-in-out;
height: 100%
}
#fullscreenDiv_infos {
background-color: white;
overflow-wrap: anywhere;
padding: 50px 15px;
display: flex;
flex-direction: column;
}
.fullscreenDiv_infos_title p {
margin-bottom: 5px;
}
#fullscreenDiv_infos p {
margin-bottom: 5px;
font-weight: 600;
}
#fullscreenDiv_infos p>span {
font-weight: 400;
}
.fullscreenDiv_infos_title {
margin-bottom: 20px;
padding-bottom: 10px;
border-bottom: solid lightgrey 2px;
}
.buttonsInfos {
display: flex;
justify-content: space-around;
padding: 4px;
background-color: #adb5bd;
border-radius: 6px;
}
.buttonsInfos span {
border: 1px solid transparent;
cursor: pointer;
color: black;
transition: all 0.2s ease-in-out;
flex: 1;
text-align: center;
border-radius: 6px;
}
.buttonsInfos span.active {
background-color: #161616;
border: 1px solid rgba(74, 37, 208, 0.28);
color: white;
}
#showComments {
overflow-y: auto;
flex: 1;
padding-bottom: 10px;
}
.grey-chevron {
cursor: default;
/* No pointer when inactive */
}
/* Hide the default context menu */
.custom-context-menu {
max-height: 0;
position: fixed;
background-color: #f9f9f9;
box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
z-index: 1000;
min-width: 150px;
overflow: hidden;
border-radius: 5px;
transition: max-height 0.5s ease-in-out;
color: #000;
font-size: 14px;
/* padding: 8px 0px; */
}
.custom-context-menu ul {
list-style-type: none;
padding: 0;
margin: 0;
}
.custom-context-menu ul li {
padding: 8px;
cursor: pointer;
}
.custom-context-menu ul li:hover {
background-color: #ddd;
}
.element {
margin: 10px;
padding: 20px;
border: 1px solid black;
}
.ph-topbar {
position: sticky;
top: 0;
z-index: 1001;
background-color: var(--primary);
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 0px;
}
.ph-search {
transition: all 0.3s;
display: inline-flex;
align-items: center;
flex-direction: row-reverse;
cursor: pointer;
position: relative;
}
.ph-search input {
max-width: 0;
background-color: var(--white);
border-radius: 4px;
margin-right: 4px;
color: var(--primary);
transition: all 0.3s;
opacity: 0;
}
.ph-search input:not(:placeholder-shown),
.ph-search:focus-within input,
.ph-search.active input {
max-width: 200px;
opacity: 1;
}
.ph-advanced-search>div>select{ max-width: 100px; min-width: 100px; }
#ph-search-more {
display: none;
}
.ph-search.active + #ph-search-more {
display: block;
}
.ph-advanced-search {
font-size: small;
display: none;
height: auto;
background-color: var(--white);
color: var(--primary);
position: absolute;
top: 120%;
left: 20%;
border-radius: 8px;
padding: 10px;
max-width: 300px;
}
/* Quand la div .ph-search est active → afficher le menu avancé */
.ph-search.active #ph-advanced-search {
display: block;
}
.ph-topbar_right_sort select {
font-size: clamp(11px, 0.833vw, 16px);
border-radius: 5px;
padding: 5px 10px;
cursor: pointer;
}
.ph-topbar_right {
margin: 0px 40px;
display: flex;
gap: 10px;
align-items: center;
}
.ph-nbElements {
margin: 5px 40px;
color: white;
}
/************* NOTIFS ****************/
.ph-notifs {
position: fixed;
bottom: 0;
right: 0;
display: flex;
flex-direction: column-reverse;
margin: 20px;
gap: 10px;
z-index: 999999;
}
.ph-notifs--success {
padding: 10px 20px;
background-color: var(--success);
border: solid 1px grey;
border-radius: 5px;
color: var(--primary);
}
.ph-notifs--error {
padding: 10px 20px;
background-color: var(--danger);
border: solid 1px grey;
border-radius: 5px;
color: white;
}
/************* BUtTON ************/
.button {
padding: 5px 10px;
background-color: white;
border-radius: 5px;
cursor: pointer;
color: black;
transition: all 0.2s ease-in-out;
font-size: clamp(11px, 0.833vw, 16px);
}
.button:hover {
background-color: lightgray;
}
/*************** NOTIF UPLOAD ************/
.notifUpload {
border: 2px solid black;
border-radius: 10px;
background-color: #252424;
padding: 20px;
color: white;
min-width: 300px;
}
.notifUpload_body {
padding: 10px 0px;
overflow-y: auto;
max-height: 50vh;
min-height: 80px;
}
.notifUploadElement {
padding: 10px 0px;
}
.notifUploadElement .progressContainer .progressbar {
background-color: grey;
width: 100%;
height: 15px;
border-radius: 5px;
overflow: hidden;
}
.notifUpload_header {
padding: 5px 0px;
border-bottom: 1px solid grey;
}
.notifUploadElement .progressContainer .progressbar>.progressbarCenter {
height: 100%;
width: 0%;
background-color: #ebe723;
font-size: 10px;
text-align: center;
border-radius: 5px;
color: black;
}
.notifUploadElement .progressContainer .progressbar>.progressbarCenter.finish {
background-color: #2dce89;
}
#panel {
overflow-x: hidden;
}
.drawer-toggle {
position: absolute;
top: -40px;
left: 50%;
transform: translateX(-50%);
background: #007bff;
color: white;
border-radius: 20px 20px 0 0;
padding: 8px 16px;
cursor: pointer;
}
@media screen and (max-width: 992px) {
#fullscreenDiv_image {
height: 50vh;
width: 100vw;
}
.ph-topbar_right{
flex-direction: column;
}
.ph-topbar_right .petit_bouton{
width: 100%;
text-align: center;
color: var(--primary);
font-size: small;
}
.drawer-toggle{
padding: 4px 10px !important; /* plus compact */
font-size: 12px !important; /* texte plus petit */
border-radius: 12px 12px 0 0 !important;
top: -25px !important;
}
#sortApproved {
display: inline-block;
vertical-align: middle;
margin-right: 6px;
}
label[for="sortApproved"] {
display: inline-block;
vertical-align: middle;
}
#fullscreenDiv_infos {
padding: 15px 15px;
height: 50vh;
width: 100vw;
}
.fullscreen-div {
flex-direction: column;
}
#frameClose>svg>path {
fill: white;
}
.ph-element {
width: 200px;
height: 200px;
}
.ph-container {
padding: 10px 20px;
justify-content: center;
}
.ph-topbar {
flex-direction: column;
margin-bottom: 20px;
position: static;
}
#ph-tree{
display: none;
}
}
.select2-container {
z-index: 999999;
}
.sidenav-image {
background-color: var(--primary);
width: 4vw;
transition: width 0.5s ease;
border-left: var(--white) 1px solid;
}
.sidenav-image .navbar-inner {
display: flex;
flex-direction: column;
align-items: center;
padding-top: 20px;
padding-left: 10px;
padding-right: 10px;
gap: 5px;
}
.sidenav-image-element {
padding: 15px 20px;
width: 100%;
display: flex;
align-items: center;
transition: all 0.3s ease;
cursor: pointer;
border-radius: 7px;
}
.sidenav-image-element.frameClose>svg {
text-align: center;
translate: -50% -50%;
position: absolute;
top: 50%;
left: 50%;
transition: all 0.3s ease;
}
.sidenav-image-element.frameClose {
/* justify-content: center;
align-items: baseline; */
transition: all 0.3s ease;
position: relative;
min-height: 40px;
}
.sidenav-image:hover .sidenav-image-element.frameClose>svg {
left: 90%;
transition: all 0.3s ease;
}
.sidenav-image-element.frameClose:hover {
fill: var(--gray);
background-color: var(--primary);
}
.sidenav-image-element.frameClose>svg>path {
fill: var(--white);
}
.sidenav-image-element.frameClose.active {
background-color: var(--primary);
}
.sidenav-image-element.active {
background-color: var(--white);
}
.sidenav-image-element:hover {
background-color: var(--white);
}
.sidenav-image-element:hover .text {
color: #000;
}
.sidenav-image-element.active .text {
color: #000;
}
/* Style des pictogrammes */
.sidenav-image-element .pictograme,
.sidenav-image-element svg {
color: var(--lightblue);
flex-shrink: 0;
}
.sidenav-image-element .pictograme {
margin-left: -10px;
}
.sidenav-image-element .text {
color: var(--white);
margin-left: 10px;
white-space: nowrap;
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
}
.sidenav-image:hover {
width: 20vw;
}
.sidenav-image:hover .text {
opacity: 1;
}
.sidenav-image:hover .navbar-inner {
align-items: flex-end;
margin-bottom: 5px;
}
.sous-menu {
opacity: 0;
width: 0vw;
background-color: var(--primary);
transition: all 0.3s ease;
padding-right: 10px;
padding: 20px;
}
.sous-menu.active {
opacity: 1;
display: flex;
width: 50vw;
max-width: 30vw;
border-left: var(--white) 1px solid;
}
.card-perso {
position: relative;
flex-direction: column;
min-width: 0;
word-wrap: break-word;
border: 1px solid rgba(0, 0, 0, .05);
border-radius: .375rem;
background-color: var(--white);
background-clip: border-box;
width: 100%;
padding: 10px;
display: flex;
}
.card-perso.inactive {
display: none;
}
.card-perso.active {
display: flex;
}
.text_droit {
text-align: end;
}
.text_gauche {
text-align: start;
}
.bouton {
font-size: .875rem;
position: relative;
transition: all .15s ease;
letter-spacing: .025em;
text-transform: none;
will-change: transform;
border: 1px solid transparent;
border-radius: .25rem;
}
.bouton:disabled {
background-color: #ccc;
}
.bouton:hover{
transform: translateY(-1px);
box-shadow: 0 7px 14px rgba(50, 50, 93, .1), 0 3px 6px rgba(0, 0, 0, .08);
}
.bouton_transparant {
background-color: transparent;
}
.petit_bouton {
line-height: 1.5;
padding: .25rem .5rem;
border-radius: .25rem;
}
.bouton-primary {
background-color: var(--primary);
color: var(--white);
}
.bouton-bleu {
background-color: var(--lightblue);
color: var(--white);
}
.bouton-danger {
background-color: var(--danger);
}
.bouton-danger:hover {
background-color: var(--dangerHover);
color: var(--dark);
}
.bouton-vert {
background-color: var(--success);
color: var(--white);
}
.bouton-bleu {
background-color: var(--lightblue);
color: var(--white);
}
.couperEn2 {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(3, 1fr);
grid-column-gap: 20px;
grid-row-gap: 5px;
text-align: center;
}
.couperEn2Position {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-column-gap: 20px;
grid-row-gap: 5px;
text-align: center;
}
.neonTextBleu {
color: var(--lightblue);
background-color: var(--primary);
text-shadow: 0 0 15px #FFF, 0 0 30px var(--lightblue), 0 0 55px var(--lightblue), 0px 0px 14px rgba(74, 144, 226, 0.9);
border: var(--lightblue) 1px solid;
padding: 10px 15px;
border-radius: 5px;
font-size: xx-large;
}
.textEndessous {
text-shadow: 2px 2px 2px #fff;
color: var(--lightblue);
background-color: var(--primary);
border: var(--lightblue) 1px solid;
padding: 10px 15px;
border-radius: 5px;
font-size: xx-large;
}
.texte-rouge{
color: red;
}
.texte-rouge:hover{
color: rgb(250, 57, 57);
}
.textAdroite {
text-shadow: 2px 0px 0px violet;
color: var(--lightblue);
background-color: var(--primary);
border: var(--lightblue) 1px solid;
padding: 10px 15px;
border-radius: 5px;
font-size: xx-large;
}
.textOutlinedTransparent {
color: var(--primary);
text-shadow: 1px 1px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff, -2px -2px 0 #fff, 2px 0px 0 #fff, 0px 2px 0 #fff, -2px 0px 0 #fff, 0px -2px 0 #fff;
background-color: var(--primary);
border: var(--lightblue) 1px solid;
padding: 10px 15px;
border-radius: 5px;
font-size: xx-large;
}
.textOutlined {
color: var(--lightblue);
text-shadow: 2px 2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff, -2px -2px 0 #fff, 2px 0px 0 #fff, 0px 2px 0 #fff, -2px 0px 0 #fff, 0px -2px 0 #fff;
background-color: var(--primary);
border: var(--lightblue) 1px solid;
padding: 10px 15px;
border-radius: 5px;
font-size: xx-large;
}
.fondBleu {
color: var(--lightblue);
background-color: var(--primary);
border: var(--lightblue) 1px solid;
padding: 10px 15px;
border-radius: 5px;
font-size: xx-large;
}
.inputperso {
width: 60px;
background-color: var(--primary);
color: #FFF;
text-align: center;
padding: 5px;
border: var(--lightblue) 1px solid;
border-radius: 5px;
margin: auto;
}
.gridPositionSoustitres {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
}
.position {
background-color: var(--primary);
border: 1px solid var(--lightblue);
border-radius: 5px;
padding: 5px;
min-width: 50px;
max-width: 80px;
min-height: 40px;
max-height: 70px;
cursor: pointer;
position: relative;
margin: 2px;
transition: background-color 0.3s, border-color 0.3s;
}
/* Indicateur de sélection */
.position::after {
content: "";
position: absolute;
top: 5px;
right: 5px;
width: 15px;
height: 15px;
border-radius: 50%;
background-color: transparent;
transition: background-color 0.3s;
}
/* Changer l'apparence lorsque le radio est sélectionné */
input[type="radio"]:checked+.position {
background-color: var(--lightblue);
border: var(--primary) 1px solid;
}
/* Style du bouton "Plus d'informations" */
.info-toggle {
display: flex;
justify-content: center;
cursor: pointer;
width: 300px;
/* Ajustez la largeur selon vos besoins */
margin: 0 auto;
user-select: none;
/* Empêche la sélection de texte lors du clic */
align-items: center;
}
/* Style du SVG (chevron) */
.chevron {
margin-left: 10px;
transition: transform 0.3s ease;
}
/* Rotation du chevron lorsqu'actif */
.chevron.rotate {
transform: rotate(90deg);
/* Tourne de 90 degrés vers la droite */
}
/* Style de la div cachée */
#plusinfos {
overflow: hidden;
max-height: 0;
transition: max-height 0.5s ease, opacity 0.5s ease;
opacity: 0;
}
/* Classe pour afficher la div avec animation */
#plusinfos.show {
max-height: 500px;
/* Une hauteur suffisamment grande pour le contenu */
opacity: 1;
padding-top: 20px;
}
/* Optionnel : ajouter une transition pour le contenu chargé */
#plusinfos>* {
opacity: 0;
transition: opacity 0.5s ease 0.5s;
}
#plusinfos.show>* {
opacity: 1;
}
.texteinfo {
color: var(--gray);
}
/* Ajoutez ceci à votre fichier CSS */
.sidenav-image-element.disabled {
opacity: 0.5;
/* Grise l'élément */
pointer-events: none;
/* Désactive les interactions de clic */
cursor: not-allowed;
/* Change le curseur pour indiquer que l'élément est désactivé */
}
/* Optionnel : Style visuel pour les éléments désactivés */
.sidenav-image-element.disabled .pictograme svg,
.sidenav-image-element.disabled .text {
fill: #ccc;
/* Change la couleur des icônes et du texte si nécessaire */
}
.switch-button {
margin: auto;
background: var(--grey);
border-radius: 30px;
width: 240px;
text-align: center;
font-size: 18px;
letter-spacing: 1px;
color: var(--lightblue);
position: relative;
padding-right: 120px;
position: relative;
}
.switch-button:before {
content: "Custom";
position: absolute;
top: 0;
bottom: 0;
right: 0;
width: 120px;
display: flex;
align-items: center;
justify-content: center;
z-index: 3;
pointer-events: none;
}
.switch-button-checkbox {
cursor: pointer;
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 100%;
height: 100%;
opacity: 0;
z-index: 2;
}
.switch-button-checkbox:checked+.switch-button-label:before {
transform: translateX(120px);
transition: transform 100ms linear;
}
.switch-button-checkbox+.switch-button-label {
position: relative;
padding: 5px 0;
display: block;
user-select: none;
pointer-events: none;
}
.switch-button-checkbox+.switch-button-label:before {
content: "";
background: var(--primary);
height: 100%;
width: 100%;
position: absolute;
left: 0;
top: 0;
border-radius: 20px;
transform: translateX(0);
transition: transform 100ms;
}
.switch-button-checkbox+.switch-button-label .switch-button-label-span {
position: relative;
}
.sousTitres {
padding-bottom: 5px;
font-size: small;
text-align: center;
}
.sousTitres:hover {
background-color: #ebebeb;
}
.sousTitresEdit {
padding-bottom: 5px;
font-size: small;
text-align: center;
}
.sousTitresEdit:hover {
background-color: #ebebeb;
}
.parametresCustomSoustitres {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
}
.grid2x1 {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(1, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
}
.couleursFav {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr);
grid-column-gap: 3px;
grid-row-gap: 3px;
margin: 10px auto;
}
.couleurfavInput {
border-radius: 4px;
background: var(--white);
border: #000 solid 1px;
cursor: pointer;
}
.maprogressbar {
flex: 1;
margin: 0 10px;
height: 20px;
border-radius: 6px;
background-color: lightgrey;
position: relative;
box-shadow: inset 0px 0px 22px -3px rgba(0, 0, 0, 0.88);
}
.maprogressbar-interior {
height: 100%;
width: var(--value);
background-color: var(--success);
border-radius: 6px;
display: flex;
justify-content: center;
align-items: baseline;
color: var(--primary);
transition: all .2s;
}
.maprogressbar-interior.success {
background-color: var(--success);
}
.showRoomExports {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 1fr);
grid-column-gap: 10px;
grid-row-gap: 10px;
}
.videoShowRoom {
width: 200px;
height: 100px;
background-color: transparent;
background-size: cover;
background-position: center;
border: solid 1px gray;
box-shadow: 5px 5px 7px 0px rgba(0, 0, 0, 0.2);
}
.infovideoShowRoom {
position: relative;
top: 0;
left: 2px;
color: var(--primary);
display: flex;
justify-content: space-between;
padding: 0px 3px;
}
.montooltip {
position: relative;
display: inline-block;
cursor: pointer;
}
.montooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 999999;
bottom: 125%;
left: 50%;
margin-left: -60px;
opacity: 0;
transition: opacity 0.3s;
font-size: 10px;
}
.montooltip .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
.montooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
overflow: visible;
}
.boutonTelechargerExport {
cursor: pointer;
}
/* Style du modal */
.monmodal {
display: none;
/* Caché par défaut */
position: fixed;
z-index: 1000;
/* Assurez-vous qu'il soit au-dessus des autres éléments */
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: hidden;
background-color: rgba(0, 0, 0, 0.5);
/* Fond semi-transparent */
justify-content: center;
align-items: center;
z-index: 9999999;
}
/* Contenu du modal */
.monmodal-content {
background-color: #fff;
padding: 20px;
border-radius: 8px;
text-align: center;
}
/* Spinner (animation de chargement) */
.monspinner {
border: 8px solid #f3f3f3;
/* Couleur de fond du spinner */
border-top: 8px solid #3498db;
/* Couleur de la partie animée */
border-radius: 50%;
width: 60px;
height: 60px;
animation: spin 2s linear infinite;
margin: 0 auto 20px auto;
}
/* Animation du spinner */
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.sousTitres {
flex: 1;
font-size: small;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid lightgray;
border-radius: 6px;
box-shadow: 5px 2px 7px 0px rgba(0, 0, 0, 0.1);
}
.sousTitresEdit {
flex: 1;
font-size: small;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid lightgray;
border-radius: 6px;
box-shadow: 5px 2px 7px 0px rgba(0, 0, 0, 0.1);
}
.sousTitres p {
margin: 0;
}
.sousTitresEdit p {
margin: 0;
}
.sousTitres p span {
display: inline-block;
/* Nécessaire pour que scale() n'affecte pas la disposition des mots */
transition: transform 0.2s, color 0.2s;
/* Transition fluide pour les changements de transformation et de couleur */
padding-right: 5px;
transform-origin: bottom;
}
.sousTitreSelected {
border-color: var(--primary);
background-color: #ebebeb;
}
.subtitle-container {
width: 100%;
flex: 3;
margin: auto;
font-family: Arial, sans-serif;
display: flex;
flex-direction: column;
gap: 5px;
border: solid 1px gray;
border-radius: 8px;
/* Désactive le défilement horizontal si non nécessaire */
flex: 5;
overflow: scroll;
background-color: #e9edf059;
color: var(--primary);
box-shadow: 5px 5px 7px 0px rgba(0, 0, 0, 0.2);
position: relative;
}
.subtitle {
display: flex;
align-items: center;
/* Espacement entre les lignes */
transition: background-color 0.3s, border-color 0.1s;
border-left: 2px solid transparent;
}
.subtitle-highlight{
background-color: rgba(168, 230, 207, 0.5);
}
.subtitle:hover .textSoustitres {
background-color: #ebebeb;
border-radius: 3px;
padding-left: 2px;
}
.subtitle:hover {
border-left: 2px solid #4a91e2cf;
}
.subtitle:has(input:focus) {
background-color: #4a91e24f;
/* Couleur de fond changeante */
border-left: 2px solid #4a91e2cf;
/* Bordure pour mettre en évidence */
}
.subtitle:has(.textSoustitres[data-idtemplate]:not([data-idtemplate=""])) {
border-left: 2px solid var(--danger);
}
.timestamp {
color: gray;
font-size: 0.9rem;
font-family: monospace;
/* Police adaptée aux timestamps */
}
.timestamp:hover {
background-color: #ebebeb;
}
.textSoustitres {
width: 100%;
}
.textSoustitres:hover {
background-color: #ebebeb;
}
.editInput {
width: 100%;
border-radius: 5px;
outline: none;
border-style: none;
background-color: var(--white);
color: #525f7f;
}
.subtitle svg {
display: none;
/* Masquer l'icône par défaut */
cursor: pointer;
color: var(--dark);
padding: 5px;
border-radius: 14px;
}
.subtitle svg:hover {
background-color: #ddd;
transition: all 1s;
}
.subtitle:hover svg {
display: inline-block;
/* Afficher l'icône lors du survol */
}
.subtitle .checkboxSoustitre{
display: none;
}
.subtitle:hover .checkboxSoustitre{
display: inline-block;
}
.subtitle .checkboxSoustitre:checked{
display: inline-block;
}
.subtitle:has(.checkboxSoustitre:checked){
border-left: 2px solid #4a91e2cf;
}
/* Si la checkbox enfant est cochée, l'intermédiaire passe en inline-block */
.intermediate>div:has(.checkboxSoustitre) {
display: inline-block;
}
.subtitle div[style*="flex: 2 1 0%;"] {
display: flex;
align-items: center;
flex-direction: column;
}
.optionSubtitle {
display: flex;
padding: 3px;
justify-content: center;
position: relative;
}
.optionSubtitle button {
display: block;
opacity: 0;
transition: 0.2s;
border: solid 1px #D3D3D3;
}
.optionSubtitle span {
display: block;
opacity: 0;
transition: all 0.2s;
}
.optionSubtitle:hover button {
opacity: 1;
}
.optionSubtitle:hover span {
opacity: 1;
}
.optionSubtitle .bouton {
line-height: 0.9;
background-color: var(--white);
color: #D3D3D3;
border-radius: 12px;
}
.optionSubtitle .bouton:hover {
color: var(--lightblue);
}
/* Style pour les téléphones : écrans étroits, par exemple jusqu'à 600px de large */
@media only screen and (max-width: 600px) {
.sous-menu {
width: 100vw;
height: 100%;
opacity: 0;
max-height: 55vh;
}
.sous-menu.active{
width: 100vw;
border-left: transparent 1px solid;
width: auto;
opacity: 1;
}
.sidenav-image{
width: 100vw;
border-left: transparent 0px solid;
border-bottom: var(--dark) 1px solid;
}
.sidenav-image:hover {
width: 100%;
border-bottom: var(--dark) 1px solid;
}
.card-perso{
overflow-y: scroll;
max-height: 45vh;
}
#plusinfos.show{
overflow: initial;
}
.fullscreen-div {
flex-direction: column;
height: -webkit-fill-available;
flex-direction: column;
}
.sidenav-image .navbar-inner {
flex-direction: row;
padding-top: 0px;
padding-right: 0px;
height: 7vh;
width: 100vw;
justify-content: space-around;
}
.sidenav-image-element .text {
display: none;
}
.sidenav-image-element{
justify-content: center;
}
.sidenav-image-element.frameClose {
position: absolute;
top: 0;
right: 10px;
width: 20px;
height: 20px;
}
#fullscreenDiv_image {
height: 50vh;
width: 100vw;
}
#fullscreenDiv_image:has(+ .sous-menu.active) {
margin-top: 0;
margin-block: 0;
transition: 1s all;
}
.sidenav-image:hover .navbar-inner {
align-items: normal;
margin-bottom: 0px;
}
.sidenav-image-element .pictograme {
margin-left: 0px;
}
#plusinfos{
padding-top: 0px;
}
}
/* Style pour les tablettes : par exemple entre 601px et 900px de large */
@media only screen and (min-width: 601px) and (max-width: 900px) {
}
.text-com:hover{
background-color: #ebebeb;
cursor: text;
}
.optionsCommentaire{
display: flex;
justify-content: flex-end;
}
.optionsCommentaire>svg{
color: gray;
opacity: 0;
}
.optionsCommentaire>svg:hover{
color: var(--dark);
transform: translateY(-1px);
}
.commentaire:hover .optionsCommentaire>svg{
opacity: 1;
display: flex;
justify-content: flex-end;
transition: all 0.3s;
}
/* Le menu déroulant */
.optionsDropdown {
opacity: 0; /* caché par défaut */
position: absolute; /* pour s’afficher par-dessus */
top: 24px; /* ou un autre offset, selon la hauteur de l'icône */
right: 0; /* collé à droite */
background-color: #fff; /* fond blanc */
border: 1px solid #ccc;
border-radius: 4px;
min-width: 100px; /* taille minimale */
z-index: 999; /* pour passer devant d'autres éléments */
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
transition: all 0.3s;
}
.optionsDropdown a {
display: block;
padding: 8px 10px;
text-decoration: none;
}
.optionsDropdown a:hover {
background-color: #f2f2f2;
}
li.optionDisabled{
color: var(--gray) !important;
cursor:default;
}
li.optionDisabled:hover{
background-color: #f9f9f9;
}
.select2-container--default .select2-results>.select2-results__options {
min-width: 100px;
}
.select2-container .select2-selection--single{
display: flex !important;
align-items: center !important;
gap: 5px !important;
border: solid 2px lightgray !important;
border-radius: 8px !important;
padding: 3px !important;
width: 60% !important;
}
.size-picker {
display: flex;
align-items: center;
gap: 5px;
border: solid 2px lightgray;
border-radius: 8px;
padding: 3px;
width: min-content;
max-width: 100px;
height: min-content;
}
/* Input number */
.size-picker input[type="number"] {
padding: 0px 0px 0px 6px;
border: 1px solid var(--border);
border-radius: 5px;
font-size: 14px;
background: var(--bg);
text-align: center;
}
/* Input color */
.size-picker input[type="color"] {
max-width: 25px;
min-width: 25px;
min-height: 25px;
max-height: 25px;
padding: 0;
border: 1px solid var(--border);
border-radius: 5px;
cursor: pointer;
background: var(--bg);
}
/* Focus ring accessible */
.size-picker input:focus {
outline: 2px solid var(--focus);
outline-offset: 2px;
}
.color-input {
/* dimensions du carré : ajustez au besoin */
width: 2.75rem;
height: 2.75rem;
border: none; /* retire le cadre par défaut */
border-radius: 0.5rem; /* ARRONDI principal */
overflow: hidden; /* garde la forme sur WebKit */
cursor: pointer;
/* enlève certains styles natifs pour Chrome / Edge */
-webkit-appearance: none;
}
input[type=color]::-webkit-color-swatch {
border: none;
border-radius: 5px;
padding: 0;
}
input[type=color]::-webkit-color-swatch-wrapper {
border: none;
border-radius: 5px;
padding: 0;
}
input[type="color"]::-moz-color-swatch-wrapper {
padding: 0;
border-radius: 5px;
border: none;
}
#toolbar button{
height:25px;
width:30px;
background-color:transparent;
border-radius:6px;
border-color:transparent;
display: flex;
align-items: center;
}
#bold-btn:hover{
background: rgba(168, 230, 207, 0.5);
}
#bold-btn.active{
background: rgba(168, 230, 207, 0.5);
}
#toolbar button.active{
background: rgba(168, 230, 207, 0.5);
}
.underline-red {
text-decoration: underline;
text-decoration-color: red;
text-decoration-thickness: 2px;
text-decoration-style: wavy;
}
.alert-danger {
color: var(--white);
border-color: #f75676;
background-color: #f75676;
}
/* dropdown à l’intérieur de ce container */
.suggestions-dropdown {
position: absolute;
background: white;
border: 1px solid #ccc;
padding: 4px 0;
border-radius: 2px;
box-shadow: 0 2px 6px rgba(0,0,0,0.2);
font-size: 0.9em;
z-index: 999999;
}
.suggestions-dropdown ul {
margin: 0;
padding: 0;
list-style: none;
}
.suggestions-dropdown li {
padding: 4px 12px;
cursor: pointer;
}
.suggestions-dropdown li:hover {
background: #f5f5f5;
}
.error-nav{
display: flex;
justify-content: space-between;
}
.cell-scrollable {
max-width: 15vw; /* ou la largeur souhaitée */
white-space: nowrap;
overflow-x: auto;
}
.advanced-toggle {
display: flex;
align-items: center;
background: none;
border: none;
padding: 0;
font: inherit;
cursor: pointer;
}
.advanced-toggle .chevron {
display: inline-block;
margin-right: 0.5em;
transition: transform 0.3s ease;
}
.advanced-toggle.open .chevron {
transform: rotate(90deg);
}
.advanced-content {
display: none;
margin-left: 1.5em; /* indentation sous le titre */
margin-top: 0.5rem;
padding: 0.5em 0.5rem;
background-color: rgba(0, 0, 0, 0.04);
border-radius: 8px;
border: #ddd solid 1px;
box-shadow: 5px 5px 7px 0px rgba(0, 0, 0, 0.2);
}
.advanced-content.open {
display: block;
}
.badge:hover{
scale: 1.1;
transition: all 0.1s ease-in-out;
}
/* Panneau latéral (20px -> 100px) */
#ph-tree{
position: fixed;
height: 70vh;
width: 20px; /* fermé */
background: transparent;
color: white;
transition: width .25s ease;
box-shadow: inset -1px 0 0 #e5e7eb; /* fine bordure interne */
overflow: scroll;
flex: 0 0 auto; /* si parent en flex */
max-width: 20px;
transition: all 0.2s ease-in-out;
}
/* État ouvert via data-attribute (pas de classe) */
#ph-tree[data-expanded="true"]{ width: 300px; }
/* Bouton “grip” (toujours au-dessus) */
#ph-tree-toggle-btn{
position: absolute;
top: 50%;
left: 50%; /* centré quand fermé */
transform: translate(-50%,-50%);
z-index: 2;
border: 0;
background: rgba(45, 45, 45, 0.28); /* fond sombre pour voir l’icône blanche */
padding: 6px;
border-radius: 8px;
cursor: pointer;
}
#ph-tree-toggle-btn i{ color:#fff; font-size:18px; line-height:1; }
/* Quand ouvert : bouton collé à droite, centré verticalement */
#ph-tree[data-expanded="true"] #ph-tree-toggle-btn{
left: auto;
right: 8px;
transform: translateY(-50%);
}
/* Zone scrollable qui contient l’arborescence */
.tree-scroll{
position: absolute;
inset: 8px;
z-index: 1; /* sous le bouton */
overflow: auto;
padding-top: 42px; /* pour ne pas chevaucher le bouton */
}
/* Quand fermé, on masque visuellement l’arbo */
#ph-tree:not([data-expanded="true"]) .tree-scroll{
pointer-events: none;
opacity: 0;
}
/* --- Styles de l’arbre (look Drive/Explorateur) --- */
.tree{
list-style: none;
margin: 0;
padding: 0 0 12px 0;
font: var(--tree-font);
color: var(--text);
white-space: nowrap;
}
.tree li{ margin: 0; padding: 0; }
.row{
display: flex;
align-items: center;
gap: 8px;
height: 22px;
padding: 0 8px;
border-bottom: 1px solid transparent;
border-radius: 4px;
cursor: pointer;
user-select: none;
}
.row:hover{ background: var(--hover); }
/* fine séparation comme sur la capture (à mettre sur certaines lignes) */
.row.sep{ border-bottom: 1px solid var(--border); }
/* indentation + petite barre verticale à gauche pour les enfants */
.children{
margin-left: 14px;
padding-left: 12px;
border-left: 1px solid #eee;
}
.hidden{ display: none; }
/* chevrons */
.caret{
width: 12px;
display: inline-flex;
justify-content: center;
color: var(--muted);
}
.caret i{ font-size: 12px; }
/* icônes dossier */
.icon-folder{
width: 14px;
text-align: center;
}
.icon-folder i{
font-size: 14px;
color: #6b7280; /* gris doux */
}
/* libellé */
.label{
overflow: hidden;
text-overflow: ellipsis;
}
/* puce ronde pour les feuilles (comme la capture) */
.leaf-bullet{
width: 12px;
text-align: center;
color: #9aa0a6;
font-size: 10px;
}
/* scrollbar discrète (optionnel) */
.tree-scroll::-webkit-scrollbar{ width: 8px; }
.tree-scroll::-webkit-scrollbar-thumb{ background:#e6e9ee; border-radius:8px; }
.tree-scroll::-webkit-scrollbar-track{ background: transparent; }
/* dans ton CSS */
.label-link{ color: inherit; text-decoration: none; }
.label-link:hover{ text-decoration: underline; }
.tree { width: max-content; min-width: 100%; } /* s’étend à la largeur du contenu */
.tree-scroll { overflow: auto; } /* scroll horizontal si besoin */
.row.active { background:var(--success); outline:1px solid #c7d2fe;color: #000; } /* surbrillance du dossier courant */
#btn-grid.active{
background-color: white;
color: var(--dark);
}
#btn-list.active{
background-color: white;
color: var(--dark);
}
.motSoustitre {
transition: transform 0.3s ease, color 0.3s ease;
display: inline-block;
}
.motSoustitre.current-error {
color: red;
transform: scale(1.25); /* grossit un peu */
}
.ph-acl-tree {
display: flex;
flex-direction: column;
gap: 6px;
padding-right: 30px;
}
.ph-acl-tree-item {
width: 100%;
text-align: left;
border: 1px solid rgba(0,0,0,.12);
background: transparent;
color: #111;
padding: 8px 10px;
border-radius: 10px;
cursor: pointer;
display: flex;
align-items: center;
gap: 8px;
transition: background .15s ease, border-color .15s ease;
}
/* indentation */
.ph-acl-tree-indent {
width: calc(var(--depth) * 16px);
flex-shrink: 0;
}
/* hover */
.ph-acl-tree-item:hover {
background: rgba(0,0,0,.05);
border-color: rgba(0,0,0,.25);
}
/* selected */
.ph-acl-tree-item.is-selected {
background: rgba(25, 118, 210, .12); /* bleu doux */
border-color: rgba(25, 118, 210, .45);
font-weight: 600;
}
.ph-acl-tree-item.is-selected i {
color: #1976d2;
}
/* ===== ACL Tree panel (scrollable) ===== */
.ph-tree-panel {
height: 520px; /* hauteur fixe */
border: 1px solid rgba(0,0,0,.12);
border-radius: 14px;
padding: 12px;
box-sizing: border-box;
background: #fff;
}
.ph-tree-scroll {
flex: 1; /* prend le reste */
overflow-y: auto; /* scroll vertical */
overflow-x: hidden;
padding-right: 6px; /* espace scrollbar */
min-width: 200px;
}
/* scrollbar optionnel */
.ph-tree-scroll::-webkit-scrollbar { width: 6px; }
.ph-tree-scroll::-webkit-scrollbar-thumb {
background: rgba(0,0,0,.22);
border-radius: 8px;
}
.ph-tree-scroll::-webkit-scrollbar-track { background: transparent; }
#audioWrapper{
width: 80%;
}