créées via l'éditeur tinyMce (cf. option "content_style" du "VueHtmlEditor.php")*/
img {border:0px; vertical-align:middle;}
a, .sLink, .sLinkSelect {cursor:pointer; text-decoration:none;}
abbr, .abbr {border-bottom: 1px dotted #777; cursor:help;}/*remplace balise "acronym" et classe ".acronym"*/
hr {border:0; height:1px; margin-top:10px; margin-bottom:10px;}
audio {min-width:350px;}
/*RESPONSIVE*/
@media screen and (max-width:1023px){
* {-webkit-tap-highlight-color:rgba(0,0,0,0); -webkit-tap-highlight-color:transparent;}/*Pas de changement de couleur au "tap" d'une image ou autre*/
abbr {border-bottom:none;}/*remplace balise "acronym" et classe ".acronym"*/
}
/*RESPONSIVE MOBILE*/
@media screen and (max-width:400px){
body {font-size:14px;}
}
/*PRINT*/
@media print{
@page {size:landscape;}
body {background:#fff; color:#000;}
}
/*** CONTENEURS PRINCIPAUX DE LA PAGE*/
#pageFull, #pageCenter {display:table; margin:0px; margin-top:75px; padding:0px;} /*"margin-top" en fonction du "height" du "#headerBar"*/
#pageFull {width:100%;} /*Affichage sur toute la largeur (Modules Files, Contacts, Tasks, Links, Users, etc)*/
#pageCenter {max-width:100%; margin-left:auto; margin-right:auto;} /*Affichage Centrée (Modules Dashboard, Forum, Mail, Paramétrage, Logs, etc)*/
#pageFullContent,#pageCenterContent,#pageModuleMenu {display:table-cell; margin:0px; padding:0px;}
#pageCenterContent {width:850px;} /*POas + de 850px : cf. affichage des News. tester l'affichage entre 1024px et 1366px*/
#pageModuleMenu {width:320px; padding-right:5px; transition:padding-top 0.1s;} /*Menu de gauche du module, flottant au besoin*/
/*RESPONSIVE*/
@media screen and (max-width:1023px){
#pageFull, #pageCenter {margin-top:65px;}
#pageCenter {width:100%;}
#pageFullContent, #pageCenterContent {width:100%; min-width:100%; padding:0px;}
#pageFullContent.objBlocks {padding-right:0px;}
}
/*PRINT*/
@media print{
#pageFull, #pageCenter {margin:0px;}
#pageModuleMenu {display:none;}
}
/*** DIV "CONTENEUR" DES OBJETS*/
.objContainer,.miscContainer,.emptyContainer,.menuContext {box-shadow:2px 2px 8px rgb(80,80,80); transition:box-shadow 0.3s ease-in-out; border-radius:4px; margin:0px 4px 4px 0px; box-sizing:border-box; background-repeat:no-repeat;}/*Calcul du width avec prise en compte de la bordure : "box-sizing:border-box"*/
.objContainer:hover, .miscContainer:hover {box-shadow:2px 2px 8px rgb(220,220,220);}
.objContainer {position:relative; padding:0px; padding-right:35px; height:90px; min-height:90px;}/*"height"+"min-height" pour l'overflow" du "objContentScroll". "padding-right" pour l'affichage des "objMiscMenus"*/
.miscContainer {padding:15px;}/*cf. form de parametrage general, newsletter, etc.*/
.objContainerSelect, #objSelectMenu {border:1px dashed rgb(255,0,0)!important;}
#objSelectMenu {display:none; margin:10px 0px 20px 0px; box-shadow:2px 0px 8px rgb(80,80,80);}/*menu de sélection masqué par défaut (cf. menu de gauche du module)*/
.objContainer.isSelectable {cursor:url("../img/checkSmall.png"),default;}
.emptyContainer {padding:30px; text-align:center;}/*Aucun contenu sur la page*/
.emptyContainer .sLink {margin-top:20px;}/*Idem*/
.objContentScroll {height:inherit; min-height:inherit; overflow-y:auto; overflow-x:hidden;}/*"height"+"min-height" pour correspondre au "objContainer". Note: ".objContentScroll" permet l'overflow "scroll" du "objContent" ci-après*/
.objContent {height:inherit; min-height:inherit; display:table; width:100%;}/*idem*/
.objContent>div {display:table-cell; vertical-align:middle;}
.objIcon {text-align:center; vertical-align:middle;}/*Cellule d'icone d'objet (dossier, fichier, contact, etc)*/
.objIcon img {max-width:100%; max-height:100%;}/*Icone d'objet*/
.objIconOpacity img {filter:opacity(0.2);}/*Icones opaques link/task*/
.objLabel {padding-left:15px; overflow-wrap:break-word; text-overflow:ellipsis;}
.objLabelLink {padding:15px 40px 15px 0px;}/*Facilite le clique sur les tags ou */
/*DIPLAY "BLOCK"*/
.objBlocks {visibility:hidden;} /*Affiché juste après le calcul du width des ".objContainer" en fonction de la résolution d'écran : cf. "common.js"*/
.objBlocks .objContainer {float:left; width:200px; min-width:200px; max-width:400px;} /*Init le width : cf. ci-dessus*/
.objBlocks .objDetails, .objBlocks .objAutorDate {display:none;} /*masque les détails de l'objet (réservé au display "line")*/
.objBlocks .objIcon {width:90px;} /*largeur réduite de la cellule de l'icone*/
.objBlocks .objIconOpacity {width:50px;} /*réduit la largeur ci-dessus pour les icones opaques link/task*/
.objBlocks .objContentCenter .objIcon {position:absolute; overflow:hidden; width:100%!important; height:100%!important;} /*icones centrées : dossier / types de fichier / images "fullsize"*/
.objBlocks .objContentCenter .objIcon img {margin-top:20px;} /*idem ...sauf image "fullsize"*/
.objBlocks .objContentCenter .objLabel {position:absolute; bottom:0px; width:100%; border-radius:0px 0px 2px 2px; padding:5px 2px 5px 2px; text-align:center;} /*label "bandeau" d'un dossier/fichier (modFile)*/
/*DIPLAY "LINE"*/
.objLines .objContainer {height:55px; min-height:55px; padding-right:55px; margin-bottom:0px;} /*"padding-right" : espace pour l'affichage des "objMiscMenus"*/
.objLines .objIcon {width:70px; padding-left:2px;}
.objLines .objIcon img {max-height:52px;} /*max-height inférieur au ".objLines .objContainer" ci-dessus*/
.objLines .objDetails, .objLines .objAutorDate {text-align:right;}
.objLines .objAutorDate {width:170px!important; max-width:180px!important;} /*Auteur et date de création*/
.objLines .objAutorDateCrea {font-weight:normal!important; margin-top:3px;} /*Date de création*/
/*RESPONSIVE*/
@media screen and (max-width:1023px){
.objContainer, .miscContainer, .emptyContainer {width:100%; margin-bottom:8px; margin-right:2px;} /*tester affichage de news et fichiers*/
.objContainer * {max-width:100%!important; word-break:break-word!important;} /*évite le scroller horizontal. "break-word" évite qu'une URL éclate l'affichage*/
.objDetails, .objAutorDate {display:none!important;} /*toujours prioritaire*/
.objContentScroll {overflow-y:hidden;} /*pas d'ascenseur en responsive !*/
.objIcon, .objIconOpacity {width:70px!important;} /*surcharge*/
.objBlocks .objContentCenter .objLabel {font-size:0.9em;} /*Réduit la taille des labels d'objets*/
}
/*** MENUS DES OBJETS : CONTEXTUELS & MISC*/
.objMenuBurger {position:absolute; z-index:10; top:7px; right:4px;} /*Icone "burger" flottant à droite (par défaut)*/
.objContainer:not(:hover) .objMenuBurger {opacity:0.75;} /*Icone "burger" opaque par défaut (pas moins de 0.75 : cf. images du gestionnaire de fichier)*/
.objContainer:not(:hover) .objMenuLikeComment:not(.showMiscMenu) {display:none;} /*Masque par défaut les .objMenuLikeComment, sauf au survol du ".objContainer" ou si ya un ".showMiscMenu"*/
.objMenuBurgerInline {position:relative; margin:0px 10px;} /*Menu context "inline" : menu des lightbox d'evt/task/etc OU "menuPath"*/
.pathMenu .objMenuBurgerInline {margin:0px 2px 0px 4px;} /*Menu context "inline" d'un dossier ou sujet : recentre l'icone*/
.objSelectCheckbox {display:none;} /*input hidden de sélection/désélection d'objet*/
.objMiscMenus {position:absolute; z-index:10; top:25px; right:5px; text-align:right; width:35px;} /*Affichage vertical des MenuContext + Likes + Comments + Files + persoAccess (cf. "padding-right" des ".objContainer")*/
.objLines .objMiscMenus {width:90px;} /*Affichage horizontal (cf. "padding-right" de ".objLines .objContainer")*/
.objMiscMenuDiv {display:inline-block; margin-top:8px; margin-left:8px;} /*'margin-left' si on affiche de plusieurs icones sur la même ligne (.objLines)*/
.menuCircle {display:inline-block; position:relative; margin:4px -10px 0px 0px; padding:0px; background-color:#800; color:white; border-radius:50%; text-align:center; width:14px; height:14px; line-height:14px; font-size:9px!important;}/*Nb de likes, comments, etc*/
.menuCircleHide {display:none;}
/*RESPONSIVE*/
@media screen and (max-width:1023px){
.objMenuBurger {opacity:1!important;}/*Icones affichées sans opacité*/
.objMenuLikeComment {display:inline-block!important;}/*Affiche toujours*/
.objMiscMenuDiv {margin-top:14px;}/*plus facile pour les gros doigts..*/
}
/*** MENUS DES MODULES & MENUS CONTEXTUELS*/
.menuLine {display:table; width:100%;}
.menuLine>div {display:table-cell; padding:5px; vertical-align:middle; text-align:left; max-width:500px;}
.menuIcon {width:35px; vertical-align:top!important; text-align:center!important;}/*width de 35px minimum pour les icones + padding*/
.menuIcon img {max-width:26px!important; max-height:26px!important;}
#pageModMenu {padding:5px;}
#pageFull #pageModMenu {border-radius:0px 4px 4px 0px;}/*Menus des modules en affichage full (arborescnce)*/
.menuLaunch {display:inline-block; cursor:pointer;}/*launcher du menu contextuel*/
.menuContext {display:none; position:absolute; z-index:100; text-align:left; cursor:default; padding:7px; overflow-y:auto; border-radius:4px; box-shadow:0px 0px 8px rgb(80,80,80);}/*cursor 'default' pour pas prendre celui du block conteneur (de l'objet ou autre))*/
.menuContext .menuLine>div {line-height:18px;}
.menuContext .menuLine>div:last-child {white-space:nowrap;}/*Label d'une option du menu : pas de retour à la ligne (cf. div à droite du .menuIcon)*/
.menuContext hr {margin:3px 0px!important;}
.menuContextSpecificLabels {padding:5px; line-height:20px;}/*cf. affectations des agendas*/
.menuContextTxtLeft {width:110px; min-width:110px; border-right:solid 1px rgba(150,150,150,0.2); vertical-align:top!important;}/*cf. menuContext : Auteur, Droits d'accès..*/
/*RESPONSIVE*/
@media screen and (max-width:1023px){
#pageModuleMenu {display:none;}
.menuContext {max-width:500px;}/*cf. menuContext des "lightbox" (cf. "vueContact")*/
.menuContextSubMenu {position:relative; margin-top:5px; box-shadow:none!important; background-image:none; padding:0px!important; background-image:none!important;}/*cf. second menu dans "#respMenuContent"*/
}
/*** MENUS CENTRÉS ("Ajouter un element" ou Menu de pagination)*/
.objBottomMenu {clear:both; text-align:center; padding-top:20px;}/*clear le "float" des "objBlocks"*/
.objBottomMenu>.miscContainer {display:inline-block; padding:15px 30px;}
.objBottomMenu .sLinkSelect {font-size:1.1em;}
.objBottomMenu a {margin-left:5px; margin-right:5px;}
/*** INPUTS*/
input[type=text], input[type=password], input[type=file], input[type=url], textarea, select, button {box-shadow:0px 0px 4px rgb(180,180,180); transition:box-shadow 0.4s ease-in-out; box-sizing:border-box; min-height:28px; margin:0px; padding:2px; border:#aaa 1px solid; border-radius:2px; outline:none; font-family:inherit; font-size:inherit; font-weight:normal;}/*Attention: sans "box-sizing" le padding/border sera pas pris en compte dans le height des "input", contrairement aux "button" and co*/
input[type=text]:hover, input[type=password]:hover, input[type=url]:hover, textarea:hover {box-shadow:0px 0px 4px rgb(80,80,80);}
input[type=text]:focus, input[type=password]:focus, input[type=url]:hover, textarea:focus {box-shadow:0px 0px 4px rgb(0,100,200); border:#aad 1px solid;}
.focusRed {box-shadow:0px 0px 4px rgb(240,0,0)!important;}
input[type=radio], input[type=checkbox] {vertical-align:middle; margin:0px 3px;}/*pas de margin vertical*/
input[type=text], input[type=password] {max-width:100%;}
input[type=file] {height:auto;}
textarea {width:100%; height:70px;}
input:disabled {opacity:0.6;}
input:read-only {background:#ddd;}
button {background:linear-gradient(#fff,#eee); color:#555; padding-left:8px; padding-right:8px; font-weight:bold; cursor:pointer; vertical-align:middle;}
button:hover {background:linear-gradient(#eee,#fff); color:#800;}
label {cursor:pointer;}
.textBig {min-width:420px!important; max-width:80%!important;}/*souvent avec le bouton "description"*/
.dateInput,.dateBegin,.dateEnd {width:80px!important;}
.timeBegin, .timeEnd {width:45px!important;}
.divPromptInputText {text-align:center;}
::-webkit-input-placeholder {font-weight:normal; padding-left:5px; color:#999;}
::-moz-placeholder {font-weight:normal; padding-left:5px;}
.submitButtonMain {margin-top:40px; margin-bottom:20px; text-align:center;}
.submitButtonMain button {min-width:180px; min-height:44px;} /*dimensions par défaut du button*/
.submitButtonMain .submitButtonLoading {max-width:40px; margin-right:-40px;} /*recentre le texte du button*/
.submitButtonInline {display:inline-block;} /*cf. form de recherche & co*/
.submitButtonInline button {min-width:100px; min-height:30px;} /*height identique aux inputs "text"*/
.submitButtonInline .submitButtonLoading {max-width:25px; margin-right:-25px;} /*recentre le texte du button*/
.submitButtonLoading {visibility:hidden;} /*masqué par défaut et affiché à la validation du form*/
/*RESPONSIVE FANCYBOX : 440px*/
@media screen and (max-width:440px){
.submitButtonInline button {min-height:33px;}/*height: cf. input[type=text]*/
textarea {height:40px;}
input[type=text], input[type=password], input[type=file], textarea, select, button {min-height:33px;}
.textBig {min-width:300px!important;}
}
/*** INPUTS D'EDITION D'OBJET : EDIT D'USER OU DE CONTACT, PARAMETRAGE GENERAL, ETC*/
.objField {display:table; width:100%; margin:12px 0px;}
.objField>div {display:table-cell;}
.objField .fieldLabel {width:50%; padding-right:10px; vertical-align:top;}/*Tester : vue d'user + édition d'user + parametrage general*/
form .fieldLabel {line-height:25px;}/*Pour aligner les labels avec les inputs*/
.objField .fieldLabel img {max-width:22px; margin-right:8px; }
.objField input[type=text] {width:100%;}
.objField .fieldLabel .personImg {max-width:90%; max-height:140px;}/*img des personnes*/
/*RESPONSIVE FANCYBOX : 440px*/
@media screen and (max-width:440px){
.objField {margin:15px 0px;}
.objField, .objField>div, .objField .fieldLabel {display:block; width:100%!important;}
}
/*** PERSONS : CONTACTS & USERS*/
.personLabelImg {margin-bottom:15px; text-align:center;}
.personLabelImg img {max-width:100%; max-height:200px;}
.personImgSmall {border-radius:50%; height:30px; width:30px;}
.objBlocks .objPerson {height:150px; min-height:150px; width:250px; min-width:250px; max-width:450px;}/*surcharge ".objContainer"*/
.objPersonDetails {margin-top:5px;}/*Contact/User: espace entre le label principal et les détails*/
.objPersonDetail {line-height:18px; font-weight:normal;}/*ligne de chaque détails de personne*/
.objPersonDetail a {display:inline-block;}
.objPersonDetail img {max-height:18px;}
.objLines .objPersonDetail {display:inline-block;}/*Chaque contact/user*/
/*AFFECTATION SPACE/USER*/
.spaceAffectLine {display:table; width:100%; max-width:100%;}
.spaceAffectLine img {max-width:15px;}
.spaceAffectLine>* {display:table-cell; padding:5px;}/*label ou div pour de checkbox*/
.spaceAffectLine>div {text-align:center; width:130px;}/*checkboxes*/
/*RESPONSIVE FANCYBOX : 440px*/
@media screen and (max-width:440px){
.spaceAffectLine img {display:none;}
.spaceAffectLine>div {width:100px; font-size:0.95em;}/*checkboxes*/
}
/*** LIGHTBOX (surcharges de "jQuery.fancybox.css")*/
.fancybox-slide--iframe {padding:0px;}/*Lightbox iframes*/
.fancybox-slide--iframe .fancybox-content {width:95%; height:98%; max-width:95%; max-height:98%; margin:0px; border-radius:10px; box-shadow:0px 0px 10px rgb(120,120,120);}/*Lightbox iframes*/
.fancybox-iframe {border-radius:4px;}/*"border-radius" aussi sur l'iframe!*/
.fancybox-toolbar {opacity:1!important; visibility:visible!important; border-left:solid 1px #777; border-bottom:solid 1px #777; border-bottom-left-radius:5px;}/*"opacity" et "visibility" pour tjs afficher le "close" et éviter le masquage auto (exple: maps des contact)*/
.lightboxContent {padding:25px;}
.lightboxTitle {position:relative; text-align:center; font-size:1.1em; padding:0px 20px 15px 40px; margin-bottom:30px; box-shadow:0px 7px 7px -7px rgba(0,0,0,0.7);}/*Padding pour pouvoir afficher le menu context à gauche (cf ".lightboxTitleMenu") et le bouton "close" en responsive && "box-shadow"=pseudo
*/
.lightboxTitleMenu {position:absolute; top:-5px; left:-20px;}
.lightboxTitleDetail {font-size:0.9em; margin-top:15px;}
.lightboxMenuEdit {float:right; margin-right:-10px; margin-top:-10px;}/*Bouton pour éditer un élément*/
.lightboxBlock {margin-top:35px; padding:20px 10px; border-radius:0px 0px 4px 4px; border-top:0px!important;}/*Ex. Fieldset*/
.lightboxBlockTitle {margin-top:35px; margin-bottom:-35px; padding:8px; border-radius:4px 4px 0px 0px; text-align:center;}/*idem*/
.lightboxAddElem {text-align:center;}/*exple: Bouton "ajouter un groupe"*/
.lightboxAddElem button {width:230px; height:50px;}
/*RESPONSIVE FANCYBOX : 440px*/
@media screen and (max-width:440px){
.fancybox-slide--iframe .fancybox-content {width:100%!important; height:100%!important; max-width:100%!important; max-height:100%!important; border-radius:0px;}/*Lightbox iframe en pleine page (pas pour les images!). "!important" pour surcharger l'affichage normal*/
.fancybox-toolbar {border:0px;}
.fancybox-button {width:35px; height:35px; padding:0px; background-color:rgb(255,255,255);}
.lightboxTitleMenu {top:0px;}
.lightboxContent {padding:12px;}
}
/*** SURCHARGES JQUERY-UI & PLUGINS JQUERY*/
.tox-tinymce {border-radius:4px!important; box-shadow:0px 0px 8px rgb(180,180,180)!important;} /*TINYMCE : bordures top-left et top-right du menu*/
.tooltipster-box {box-shadow:0px 0px 5px 3px rgba(50,50,50,0.5)!important;} /*TOOLTIPSTER : infobulles "title"*/
.tooltipster-content {color:#555!important; padding:15px!important;} /*idem*/
.toast-container a, .toast-container a:hover {text-decoration:underline; color:#fff;} /*TOASTMESSAGE : "notify()"*/
.ui-state-default {height:18px;} /*JQUERY-UI :Datepicker Jquery : cellules des jours*/
.ui-state-active {font-weight:bold!important;} /*idem : jour sélectionné*/
.jconfirm-title {line-height:25px;} /*JQUERYCONFIRM : titre*/
.jconfirm-buttons button {margin:10px!important;} /*idem : bouton plus espacés*/
.jconfirm-buttons .btn-green {background-color:#25a55b!important;} /*idem : bouton vert surchargé*/
@media screen and (max-width:440px){
.jconfirm-box {min-width:350px;} /*JQUERYCONFIRM : taille minimum de la box*/
.jconfirm-title {font-size:20px;} /*idem : titre*/
.jconfirm-buttons button {width:100%; white-space:normal!important;} /*idem : retour auto à la ligne*/
}
/*** DIVERS*/
.infos {border:dotted 1px #aaa; margin:7px; padding:10px; border-radius:4px; text-align:center; line-height:22px;}
.percentBar {display:inline-table; height:25px; background:linear-gradient(#fff,#d5d5d5); color:#555; border:solid 1px #ccc; border-radius:2px;}
.percentBarContent {display:table-cell; height:25px; padding:0px 3px 0px 3px; text-align:center; vertical-align:middle; font-size:0.85em; cursor:help; background-repeat:repeat-y; overflow-y:hidden;}
.percentBarContent img {max-height:20px;}
#headerBar {display:table; position:fixed; z-index:20; top:0px; left:0px; width:100%; height:50px; background-repeat:repeat-x;}
#headerBar>div {display:table-cell; vertical-align:middle!important;}
#headerBar>div:last-child {text-align:right;}
.colorPicker {padding:0px; border-radius:2px; min-width:100px;}
.colorPickerTable {display:table!important; padding:0px;}/*"!important" car interfère avec "#respMenuContent>div>div" ci-dessus*/
.colorPickerRow {display:table-row!important;}
.colorPickerCell {display:table-cell; width:15px; height:15px; cursor:pointer;}
.pluginModule {margin-top:15px;}
.pluginModule img {float:right; margin-top:-5px; max-height:24px;}
.cursorHelp {cursor:help;}
.pathMenu {display:table; padding:5px 10px; margin-bottom:10px;}
.pathMenu img {max-height:26px;}
.pathMenu>div {display:table-cell; padding:3px; vertical-align:middle;}
.pathMenu>div.pathIconMenu {cursor:pointer;}
.hide {display:none;}
.menuTradIcon {vertical-align:middle; height:20px;}
.categoryColor,.themeColor {display:inline-block; width:15px; height:15px; margin-right:3px; margin-bottom:3px; vertical-align:middle;}/*vignette de couleur d'une categorie d'evement ou d'un theme du forum*/
.orLabel {display:table; width:100%; margin:30px 0px;}
.orLabel div {display:table-cell; width:45%; text-align:center;}
.orLabel div:nth-child(2) {width:10%; min-width:50px; opacity:0.5; text-transform:uppercase;}/*texte "OU"*/
.orLabel hr {background:#ddd;}
.attachedFileTag {max-width:100%;}/*cf. "attachedFileInsert()". Tester avec une image et une vidéo*/
label, .objContainer, .miscContainer, #headerBar, #treeFolders, #objMenuLabels, #objMenuBlocks {user-select:none;}/*pas de sélection du texte html avec la souris*/
.blink, .pulsate {animation: blinker 1s linear infinite;}/*equivalent css du "pulsate" jQuery*/
@keyframes blinker { 50% {opacity:0;} }
/*RESPONSIVE*/
@media screen and (max-width:1023px){
#headerBar {border-top:1px solid #ddd;}/*"border-top" pour séparer le menu des statusbars des mobiles*/
.pathMenu {width:100%; max-width:100%; padding:5px;}
.pathMenu>div.pathIconMenu {width:55px;}/*width ajusté des menus "top"/"Accueil" & co*/
}
/*PRINT*/
@media print{
.noPrint, img[src*='img/menu'], .tooltipster-content {display:none!important;}
}