/********************************************************************************************/ /* APPLICATION.CSS - template de styles générique => vers skin de l'application */ /********************************************************************************************/ /* template 100% automatisé FRAMEWORK ---------------------------------- Ce template est un masque de génération de CSS. a) Dans ce template, les commentaires sont des directives de compilation b) on ne doit PAS customiser ce template (les seules modifications acceptées sont des modifications de DEV, pas de LOOK) Dans les commentaires (directives), on peut trouver 1) un "FWK!" NE PAS TOUCHER !! il s'agit de styles propres au fonctionnement du Framework qu'il ne faut pas surclasser sauf contre-ordre 2) des "directives de compilation CSS" colorX ==> #XXXXXX où XXXXXX est un paramètre de compil rondXXX ==> une chaine du genre npx, ou npx npx ou npx npx npx npx ... pour la définition des border-radius [AAAAA_X] ==> une chaine complexe (voir fwk_cssmaker.php) CUSTOMISATION (SKIN) -------------------- les directives font référence à des paramètres de customisation définis dans fwk_cssmaker.php ces paramètres sont définis dans les paramètres de typeparam=CSS - le codeParam correspond à la directive CSS - le libCourtParam correspond à une valeur par défaut (généralement une référence à un codeParam de type "default_xxx" ces paramètres sont an bas de l'onglet "paramètres " de NOVA les valeurs de ces paramètres peuvent être redéfinis - en priorité dans le(s) skin(s) de votre application, dans le xmlinfo de l'acteur de type SKIN au statuscode=1 (skin actif) l'outil permettant la création d'un "skin" est ici : http://127.0.0.1:1001/sandbox/root/sandbox_lookeur.php TRAITEMENT par cssMaker: ----------------------- - par défaut : le style est celui du CSS - ce style peut être écrasé selon la directive de compilation CSS - en priorité par la valeur stockée dans le xmlInfo de l'acteur SKIN courant - certains paramaètre (les eRAZeurs) positionnent d'autres paramètres (ex: general_radiusAll_RAZ) - ils correspondent à des traitements particulier en début du traitement de CSSMaker - si cette valeur est vide ou n'existe pas, par la valeur définie par le paramètre CSS correspondant à la directive - soit par la recopie de la valeur du paramètre "à recopier" situé dans libcourt (libcourt contient le codeparam d'un autre paramètre CSS) - soit directement par une valeur (à priori inutile, autant que ce soit dans le CSS d'origine) 3) un (S), un (n), un (.) styles que nous avons estimés +/- "standards toutes applications". Surclassez si vous voulez, mais PAS ICI --------------------------------------- - option 1) en * ajoutant une directive de compilation en commentaire * ajoutant un parametre de typeParam CSS * modifiant les paramètres propres à votre application via le lookeur pour que ce paramètre soit accessible à toute appli * modifiant (au besoin) les traitements de cssmaker.php ATTENTION! ne pas faire n'importe quoi et SURTOUT, conservez la valeur courante comme valeur par défaut du paramètre ! - option 2) dans le CSS propre à l'application (myApp/rsc/myApp.css) (sous votre responsabilité) (voir D) ci-dessous) le (S) est prévu pour être surclassable, mais ce n'est pas encore paramétré ==> plutôt option1) ------- si le (S) est placé en face d'un style "générique", ou "neutre", enivagez de le reporter sur les styles neutre/s1 si il y a lieu le (n) est vu comme standard, mais c'est comme vous voyez ------ le (.) concerne plus particulièrement les fonts, tailles et autres margin/padding. ==> plutôt option 2) car c'est à la limite du (FWK!) ------ rappel: le FWK! ne doit pas être modifié !! ---- 4) possibilité d'avoir DEUX directives sur le même élément la 2e est exécutée en premier (dans fwk_cssmaker.php) selon la variable (ex: si non vide) et surclasse la 1ere dans ce cas ex: un border peut être surclassé par un razborder si la variable est à "raz" (effacement complet de la ligne) exception : policeTaille peut être surclassée par zoom (mode tablette), mais le zoom est exécuté en premier ATTENTION: les directives sont exécutées dans l'ordre Ordaf+CodeParam (parametres CSS) - placer les RAZ (règles à exécuter en 1er) avant les autres... ou fusionner les 2 paramètres (sauf zoom) Organisation de ce CSS ---------------------- Chaque objet est défini en plusieurs sections 1°) la partie propre au framework FWK! ==> ne pas toucher sans savoir 2°) la partie "look" générique généralement les éléments communs quelque soit le style (taille, padding ...) 3°) le look "neutre" pour les éléments déclinables en look/styles s1 , c'est le "s0" ou style par défaut 4°) 1 section pour le look s1 pour les éléments pouvant avoir 2 looks (neutre/s1) */ /***************************************************************************************************************************** RAZ *****************************************************************************************************************************/ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; } /* pas question ! html {overflow-y: scroll;} */ /* --- FONT FACE DECLARATIONS --- */ @font-face { /* police "normale" */ font-family: 'droid_sansregular'; src: url('../../framework/core/blz/rsc/css/fonts/DroidSans-webfont.eot'); src: url('../../framework/core/blz/rsc/css/fonts/DroidSans-webfont.eot?#iefix') format('embedded-opentype'), url('../../framework/core/blz/rsc/css/fonts/DroidSans-webfont.woff') format('woff'), url('../../framework/core/blz/rsc/css/fonts/DroidSans-webfont.ttf') format('truetype'), url('../../framework/core/blz/rsc/css/fonts/DroidSans-webfont.svg#droid_sansregular') format('svg'); font-weight: normal; font-style: normal; } @font-face { /* police "bold" */ font-family: 'droid_sansbold'; src: url('../../framework/core/blz/rsc/css/fonts/DroidSans-Bold-webfont.eot'); src: url('../../framework/core/blz/rsc/css/fonts/DroidSans-Bold-webfont.eot?#iefix') format('embedded-opentype'), url('../../framework/core/blz/rsc/css/fonts/DroidSans-Bold-webfont.woff') format('woff'), url('../../framework/core/blz/rsc/css/fonts/DroidSans-Bold-webfont.ttf') format('truetype'), url('../../framework/core/blz/rsc/css/fonts/DroidSans-Bold-webfont.svg#droid_sansbold') format('svg'); font-weight: normal; font-style: normal; } @font-face { /* police "extralight " */ /* TODO : à priori inutilisée (seul usage sur "ESPACE PRATICIEN" sur maquette: à supprimer si confirmé*/ font-family: 'dejavu_sansextralight'; src: url('../../framework/core/blz/rsc/css/fonts/DejaVuSans-ExtraLight-webfont.eot'); src: url('../../framework/core/blz/rsc/css/fonts/DejaVuSans-ExtraLight-webfont.eot?#iefix') format('embedded-opentype'), url('../../framework/core/blz/rsc/css/fonts/DejaVuSans-ExtraLight-webfont.woff') format('woff'), url('../../framework/core/blz/rsc/css/fonts/DejaVuSans-ExtraLight-webfont.ttf') format('truetype'), url('../../framework/core/blz/rsc/css/fonts/DejaVuSans-ExtraLight-webfont.svg#dejavu_sansextralight') format('svg'); font-weight: normal; font-style: normal; } /***************************************************************************************************************************** config générale de la page *****************************************************************************************************************************/ *{ font-family:droid_sansregular, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size:100%;/*zoom*/ } body{ padding:0px; /*(.)*/ margin:0px; /*(.)*/ background-color: #F9F9F9; } button{ cursor:pointer; /*(.)*/ } table{ empty-cells: show; /* FWK! */ border-collapse:collapse; /* FWK! */ } .hand{ cursor:pointer; /*(.)*/ } @-webkit-keyframes blinker { from {opacity: 1.0;} to {opacity: 0.0;} } .blink{ text-decoration: blink; -webkit-animation-name: blinker; -webkit-animation-duration: 1s; -webkit-animation-iteration-count:infinite; -webkit-animation-timing-function:ease-in-out; -webkit-animation-direction: alternate; } @-ms-keyframes spin { from { -ms-transform: rotate(0deg); } to { -ms-transform: rotate(360deg); } } @-moz-keyframes spin { from { -moz-transform: rotate(0deg); } to { -moz-transform: rotate(360deg); } } @-webkit-keyframes spin { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); } } @keyframes spin { from { transform:rotate(0deg); } to { transform:rotate(360deg); } } .spin{ -webkit-animation-name: spin; -webkit-animation-duration: 4000ms; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; -moz-animation-name: spin; -moz-animation-duration: 4000ms; -moz-animation-iteration-count: infinite; -moz-animation-timing-function: linear; -ms-animation-name: spin; -ms-animation-duration: 4000ms; -ms-animation-iteration-count: infinite; -ms-animation-timing-function: linear; animation-name: spin; animation-duration: 4000ms; animation-iteration-count: infinite; animation-timing-function: linear; opacity: 0.5; } .fa.fa-6x { font-size: 10em; } #main{ /* div racine, juste sous le body, contient toute l'IHM (bonne pratique) */ /*margin:0 auto; */ margin:0 auto; max-width:1280px; } /***************************************************************************************************************************** panels auto-dimensionnables ---------------------------- vpanel : zone conteneur de zones les unes à côté des autres (total = 100% largeur du conteneur du vpanel) hpanel : zone conteneur de zones les unes au dessus des autres (total = 100% hauteur du conteneur du hpanel) scrollable : zone avec ascenseur automatique si débordement du contenu ******************************************************************************************************************************/ div.vPanel{ overflow:hidden; /* FWK! */ } div.hPanel > div, div.vPanel > div{ float:left; /* FWK! */ overflow:hidden; /* FWK! */ } div.scrollable, div.hPanel > div.scrollable{ overflow-y:auto; /* FWK! */ } div.scrollableY, div.hPanel > div.scrollableY{ overflow-y:auto; /* FWK! */ overflow-x:hidden; /* FWK! */ } div.scrollableXY, div.hPanel > div.scrollableXY{ overflow-y:auto; /* FWK! */ overflow-x:auto; /* FWK! */ } div.forceScrollXY, div.hPanel > div.forceScrollXY, div.hPanel > div.forceScrollXY, div.vPanel > div.forceScrollXY{ overflow-y:scroll; /* FWK! */ overflow-x:scroll; /* FWK! */ } #pnSave{ /* panel d'affichage "enregistrement en cours/effectué" */ position:absolute; left:50%; top:33%; width:250px; margin-left:-125px; background-color:#E3E3E3; border:2px solid #0C5460; color:#0C5460; font-size:1.5em; padding:5px; text-align:center; font-family:droid_sansbold, "Helvetica Neue", Helvetica, Arial, sans-serif;; } /******************************************************************************************************************************/ /****** blzPanel : conteneurs ******* ******************************************************************************************************************************/ .____________________blzPanel__________________________{} div.blzPanel{ /* NB: le blzPanel neutre ne doit pas être bordé */ padding:0px; margin:0px; } div.blzPanel.borderPanel{ /* bordure explicite de blzPanel */ border: 1px solid #E3E3E3; border-radius:0px; } div.blzPanel.separateurV{ /* permet de laisser un espace entre les panel d'un vPanel*/ margin-right:5px; /*(.)*/ } div.blzPanel.separateurH{ /* permet de laisser un espace entre les panel d'un hPanel*/ margin-bottom:5px; /*(.)*/ } /* TODO : se débarrasser des titrePanel ? */ div.blzPanel > div.titrePanel{ /* Titre de blzPanel, à différentier des blzToolBar */ border-radius:0px; font-family:droid_sansbold, "Helvetica Neue", Helvetica, Arial, sans-serif;; padding: 5px 3px; /*(.)*/ vertical-align:middle; /*(.)*/ /* -- look neutre -- */ background: #E3E3E3; color:#0C5460; } div.blzPanel > div.titrePanel > div{ /* exemple: notes et notes confidentielles */ font-family:droid_sansbold, "Helvetica Neue", Helvetica, Arial, sans-serif;; } /* --- s1 blzPanel (avec bordure) */ div.blzPanel.s1{ border-radius:0px; backGround-color:#E3E3E3; } /* TODO : se débarrasser des titrePanel */ div.blzPanel.s1 > div.titrePanel{ background: #E3E3E3; color:#FFFFFF; } /***************************************************************************************************************************** ****** ToolBar Barre de titre/bouton présentes dans les popups ou les tabSheet (en haut ou en bas) ********* *****************************************************************************************************************************/ .____________________blzToolBar____________________{} div.blzToolBar > ul{ /* zone tool Bar */ list-style: none; /* FWK! */ overflow: hidden; /* FWK! */ position: relative; /* FWK! */ margin-right: -3px; /*toolBar_margin*/ /* compenser les marging right des boutons et coller à droite le dernier bouton*/ padding:5px 0px; vertical-align:middle; /*(.)*/ border-radius:0px; } div.blzToolBar > ul > li { /* éléments (dont titre du toolbar et boutons calé à droite par défaut) */ display: inline-block; /* FWK! */ position: relative; /* FWK! */ float:right; /* FWK! */ margin-right:3px; /*(.)*/ font-family:droid_sansbold, "Helvetica Neue", Helvetica, Arial, sans-serif;; /*toolBar_fontSize_SET*/ } div.blzToolBar > ul > li.gauche { /* les boutons - ou titre - calés à gauche */ float:left; /* FWK! */ /*margin-left:3px; */ /*(.) collé à gauche*/ vertical-align:middle; } /* 2021-03-12 : Possibilité de placer un élément (ex : bouton) sur une nouvelle ligne (en-dessous du titre d'onglet par exemple). */ div.blzToolBar > ul > li.sautLigne { clear: both; /* FWK! */ } div.blzToolBar > ul > li > a { /* bouton */ display: inline-block; /* FWK! */ /* ces lignes servent à comptabiliser les borders dans la taille */ -moz-box-sizing: border-box; /* FWK! */ -webkit-box-sizing: border-box; /* FWK! */ box-sizing: border-box; /* FWK! */ text-decoration:none; /*(.)*/ padding:4px 4px; /*(.)*/ font-size:0.75em; text-transform:uppercase; font-family:droid_sansbold, "Helvetica Neue", Helvetica, Arial, sans-serif;; border : 1px solid #E3E3E3; /*tbBouton_border*/ border-radius: 3px; /*tbBouton_radius*/ } div.blzToolBar > ul > li > a.popupDefaut{ /* bouton de la toolBar associé à ENTER (close/ok) */ } div.blzToolBar > ul > li > a.popupCancel{ /* bouton de la toolBar associé à ESCAPE (close/cancel)*/ } div.blzToolBar > ul > li > a.spacer { /* faux bouton spacer pour le li titre */ visibility:hidden; /* FWK! */ width:1px; /* FWK! */ padding:4px 0px; /* FWK! */ } /* ----------------------- */ /* -- looks toolBar -- */ /* ----------------------- */ /*--- look neutre toolBar ---*/ /* style neutre : deprecated ? */ div.blzToolBar > ul{ /* zone tool Bar */ background: #0C5460; color: #E3E3E3; } div.blzToolBar > ul > li > a { /* bouton */ background-color : #FFFFFF; color: #000000; } div.blzToolBar > ul > li > a.VALIDER{ /* bouton de la toolBar de type "VALIDER" */ background-color : #FFFFFF; } div.blzToolBar > ul > li > a.ANNULER{ /* bouton de la toolBar de type "ANNULER" */ background-color : #FFFFFF; } div.blzToolBar > ul > li > a:hover, div.blzToolBar > ul > li > a.dropdown.titre:hover{ background-color : #FFFFFF; color: #FFFFFF; border-color : #FFFFFF; } div.blzToolBar > ul > li > a:active, div.blzToolBar > ul > li > a.dropdown.titre:active{ background-color:#FFFFFF; color: #FFFFFF; border-color:#000000; } div.blzToolBar > ul > li.inactif > a, div.blzToolBar > ul > li.inactif > a:hover{ background-color : #FFFFFF; color: #F9F9F9; border-color: #F9F9F9; } div.blzToolBar > ul > li.inactif > a:hover{ cursor:default; /*(.)*/ } div.blzToolBar > ul > li > a.dropdown.titre /* dropDown + titre (ex: favoris/complet, ou filtre obs et alerte) */ { background: #FFFFFF; color: #FFFFFF; border-color:#FFFFFF; } /*--- s1 toolBar ---*/ div.blzToolBar.s1 > ul { background: #E3E3E3; color:#0C5460; } div.blzToolBar.s1 > ul > li > a{ background-color:#38A3B6; color: #FFFFFF; } div.blzToolBar.s1 > ul > li > a.VALIDER{ background-color : #9C254D; } div.blzToolBar.s1 > ul > li > a.ANNULER{ background-color : #323A45; } div.blzToolBar.s1 > ul > li > a:hover, div.blzToolBar.s1 > ul > li > a.dropdown.titre:hover{ background-color : #D7336B; color: #FFFFFF; border-color:#E3E3E3; } div.blzToolBar.s1 > ul > li > a:active, div.blzToolBar.s1 > ul > li > a.dropdown.titre:active{ background-color : #D7336B; color: #FFFFFF; border-color: #9C254D; } div.blzToolBar.s1 > ul > li.inactif > a, div.blzToolBar.s1 > ul > li.inactif > a:hover { background-color : #E3E3E3; color: #F9F9F9; border-color: #F9F9F9; } div.blzToolBar.s1 > ul > li > a.dropdown.titre { background: #E3E3E3; color: #D7336B; border-color:#D7336B; } /******************************************************************************************************************************/ /****** Popups *******/ /******************************************************************************************************************************/ .____________________blzPopup____________________{} /* ----------------------- */ /* -- générique popups -- */ /* ----------------------- */ div.umModal{ /* zone "calque" pour inhiber l'arrière plan */ position:absolute; /* FWK! */ left:0px; /* FWK! */ top:0px; /* FWK! */ width:100%; /* FWK! */ height:100%; /* FWK! */ z-index: 2; /* FWK! */ cursor: wait; /*(n)*/ } /*.popup{display:none;}*/ /* pour les déclaration de DIV de popup (obsolète : Bonne pratique => style="display:none" dans le HTML) */ div.blzPopup{ /* conteneur externe popup */ overflow:hidden; /* FWK! */ position:absolute; /* FWK! */ /* placé centré par défaut */ left:50%; /*(n)*/ top:50%; /*(n)*/ border-radius:0px; border:5px solid #E3E3E3; } div.blzPopup > div.popupTitre > ul { /* Barre de Titre de popup ) */ list-style: none; /* FWK! */ overflow: hidden; /* FWK! */ position: relative; /* FWK! */ border-radius:0px; border-bottom :5px solid #E3E3E3; } div.blzPopup > div.popupTitre > ul > li{ /* titre calé à gauche */ display: inline-block; /* FWK! */ position: relative; /* FWK! */ float:right; /* FWK! */ padding: 0px 3px; font-size:1em; /*popup_fontsize_SET*/ } div.blzPopup.std > div.popupTitre > ul > li{ /* Popup standard : titre plus large*/ padding:0.5em; } div.blzPopup > div.popupTitre > ul > li.gauche{ float:left; /* FWK! */ } div.blzPopup > div.popupTitre > ul > li > a{ /* la croix de fermeture (bouton) */ float:right; /* FWK! */ display: inline-block; /* FWK! */ /* ces lignes servent à comptabiliser les borders dans la taille */ -moz-box-sizing: border-box; /* FWK! */ -webkit-box-sizing: border-box; /* FWK! */ box-sizing: border-box; /* FWK! */ text-decoration:none; /*(.)*/ margin-right:3px; /*(.)*/ padding:1px 4px; /*(.)*/ background-color : #FFFFFF; color:#000000; border : 1px solid #666; /*popCross_borderColor*/ border-radius: 3px; /*popCross_radius*/ } div.blzPopup > div.popupTitre > ul > li > a:hover{ color:#FFFFFF; border : 1px solid #FFFFFF; } div.blzPopup > div.popupTitre > ul > li > a:active{ color:#FFFFFF; border : 1px solid #000000; } div.blzPopup > div div.errorTitle *{ /* sous-titre pour popup errorMsg */ color:#C00000; /*popErrTitre_color*/ font-family:droid_sansbold, "Helvetica Neue", Helvetica, Arial, sans-serif;; font-size:75%; margin:0px 2px; /*(S)*/ } div.blzPopup > div > div.blzPanel { /* zone de message des popup spécifiques */ background-color:#FFF; /*(S)*/ padding:2px; } /* Toolbar de popup */ div.blzPopup div.blzToolBar > ul{ /* toolbar de poupup "message" */ padding:5px 5px 0px 5px; } div.blzPopup.std div.blzToolBar > ul{ /* toolbar de poupup standard : comme une toolbar standard */ padding:10px 5px 5px 5px; } /* ----------------------- */ /* -- looks popups -- */ /* ----------------------- */ /* --- look neutre.popup ---*/ div.blzPopup{ /* conteneur externe popup */ background-color:#FFFFFF; } div.blzPopup > div.popupTitre > ul { /* barre de titre */ background:#0C5460; color:#FFFFFF; } div.blzPopup > div.popupTitre > ul >li > i { /* icones des popups spécifiques*/ padding: 0px 7px 0px 3px; } div.blzPopup .errorTitle{ border-bottom:5px solid #E3E3E3; } div.blzPopup.prompt> div > div.blzPanel, div.blzPopup.confirm > div > div.blzPanel, div.blzPopup.wait > div > div.blzPanel, div.blzPopup.info > div > div.blzPanel, div.blzPopup.error > div > div.blzPanel, div.blzPopup.message > div > div.blzPanel, div.blzPopup.s1 > div > div.blzPanel, div.blzPopup.session > div > div.blzPanel, div.blzPopup.system > div > div.blzPanel { /* zone de message des popup spécifiques */ background-color:#FFF; /*(S)*/ font-size:75%;; } /* --- s1.popup --- */ /* deprecated */ div.blzPopup.s1{ background-color:#0C5460; } div.blzPopup.s1 > div.popupTitre > ul { background:#E3E3E3; color:#FFFFFF; } /******** Popup erreur ************/ div.blzPopup.error > div.popupTitre > ul, div.blzToolBar.error > ul, div.blzToolBar.error > ul > li > a:hover { background-color:#C00000; color:#FFF; } /******** Popup system ************/ div.blzPopup.system > div.popupTitre > ul, div.blzToolBar.system > ul, div.blzToolBar.system > ul > li > a:hover { background-color:#000000; color:#FFF; } div.blzPopup.system .tErrSys{ /* et sous-titre d'erreur système*/ color:#C00000; /*popErrTitre_color*/ font-family:droid_sansbold, "Helvetica Neue", Helvetica, Arial, sans-serif;; } /******** Popup session ************/ div.blzPopup.session > div.popupTitre > ul, div.blzToolBar.session > ul, div.blzToolBar.session > ul > li > a:hover { background-color:#000000; color:#FFF; } div.blzPopup.system .tErrSys{ /* et sous-titre d'erreur système*/ color:#C00000; /*popErrTitre_color*/ font-family:droid_sansbold, "Helvetica Neue", Helvetica, Arial, sans-serif;; } /******** Popup message ************/ div.blzPopup.message > div.popupTitre > ul, div.blzToolBar.message > ul, div.blzToolBar.message > ul > li > a:hover{ background:#0C5460; color:#FFF; } /******** Popup prompt ************/ div.blzPopup.prompt > div.popupTitre > ul, div.blzToolBar.prompt > ul, div.blzToolBar.prompt > ul > li > a:hover { background-color:#0C5460; color:#FFF; } /******** Popup confirm ************/ div.blzPopup.confirm > div.popupTitre > ul, div.blzToolBar.confirm > ul, div.blzToolBar.confirm > ul > li > a:hover { background-color:#0C5460; color:#FFF; } /******** Popup wait ************/ div.blzPopup.wait > div.popupTitre > ul, div.blzToolBar.wait > ul, div.blzToolBar.wait > ul > li > a:hover { background-color:#555555; /*popWait_bgColor*/ color:#FFF; } /******** Popup info ************/ div.blzPopup.info > div.popupTitre > ul, div.blzToolBar.info > ul, div.blzToolBar.info > ul > li > a:hover { background-color:#0C5460; color:#FFF; } div.blzToolBar > ul > li > a.btHiddenFirst{ visibility:hidden; } div.blzToolBar > ul > li > a.btHiddenFirst.show{ visibility:visible; } /******************************************************************************************************************************/ /****** tabSheets *******/ /******************************************************************************************************************************/ .____________________blzTabSheet____________________{} /* --------------------------- */ /* --- tabSheet - générique -- */ /* le tag porteur d'un .blzTabSheet est soit un DIV (tabsheet classique), soit un form (formulaire à onglet)*/ /* --------------------------- */ .blzTabsheet > div.tsTabBar > ul{ /*-- Les onglets (tsTabbBar) --*/ list-style: none; /* FWK! */ width:2000px; /* FWK! */ overflow: hidden; /* FWK! */ position: relative; /* FWK! */ margin: 0px 0 0px; /*(.)*/ padding: 0; /*(.)*/ padding-left:0px; /* ressaut à gauche, lié à up/dn et chevauchement (calculé par le maker)*/ } .blzTabsheet > div.tsTabBar > ul:before { /* bordure bas sous les tabs (EQU top border de la page)*/ position: absolute; /* FWK! */ content: " "; /* FWK! */ width: 100%; /* FWK! */ bottom: 0; /* FWK! */ left: 0; /* FWK! */ z-index: 1; /* FWK! */ border-bottom:3px solid #D7336B; } .blzTabsheet > div.tsTabBar > ul > li { /* onglet (général) */ display: inline-block; /* FWK! */ position: relative; /* FWK! */ z-index: 0; /* FWK! */ cursor:pointer; /*(.)*/ padding: 4px 10px; /*tabsheet_padding*/ margin:3px; /* chevauchement des onglets (calculé par le maker)*/ border-radius:0px; color: #FFFFFF; } .blzTabsheet > div.tsTabBar > ul > li:nth-child(1){ /* 1er onglet */ margin-left:0px; /* pas de marge si on n'a pas d'arrondi (calculé par le maker)*/ } .blzTabsheet > div.tsTabBar > ul > li{ /* onglets */ background: #0C5460; /* onglets enabled (actif non sélectionné) */ } .blzTabsheet > div.tsTabBar > ul > li.disabled{ /* onglet désactivé (disabled) : ni s1, ni neutre : texte en gris*/ color: #F9F9F9; background: #E3E3E3; cursor : default; /*(.)*/ } .blzTabsheet > div.tsTabBar > ul > li.selected { /* onglet sélectionné (général) */ z-index: 2; /* FWK! */ cursor : default; /*(.)*/ } .blzTabsheet > div.tsPage{ /* pages (général) : contient les toolbar T/D et le contenu (tsTabPage)*/ border-style: solid; /*(.)*/ border-color: #E3E3E3; border-radius:0px; } .blzTabsheet.tsNoTabs > div.tsPage{ /* page sans tabs (bord haut arrondi possible */ border-radius:0px; } .blzTabsheet > div.tsPage > div.tsTabPage{ /* contenu proprement dit*/ overflow-y: auto; overflow-x: hidden; /* FWK! */ } .blzTabsheet > div.tsPage > div.tsTabPage.vPanel{ overflow:hidden; /* FWK! */ } .blzTabsheet.tsNoBorder > div, /* gestion du "noBorder"*/ .blzTabsheet.tsNoBorder > div.tsPage { border-width:0px; /*(.)*/ } /* --------------------------- */ /* --- tabSheet - looks -- */ /* --------------------------- */ /*--- look neutre.tabsheet ---*/ .blzTabsheet > div.tsTabBar > ul > li.selected{ background:#D7336B; border-bottom-color: #FFFFFF; } .blzTabsheet > div.tsTabBar > ul > li:hover { background: #D7336B; } .blzTabsheet > div.tsTabBar > ul > li.disabled:hover{ background: #E3E3E3; } .blzTabsheet > div.tsPage{ } .blzTabsheet > div.tsPage > div.tsTabPage > div.blzTabsheet > div.tsPage, .blzTabsheet > div.tsPage > div.tsTabPage > div.tsPage{ /* specifique pour ts page interne (le 1er niveau correspond au mille feuilles) */ background:#E3E3E3; padding:0px 10px 10px 10px; } .blzTabsheet > div.tsPage > div.tsTabPage > div.blzTabsheet > div.tsPage div.tsPage, /* 3e niveau d'onglet (cas des référentiels) */ .blzTabsheet > div.tsPage > div.tsTabPage > div.tsPage div.tsPage{ padding:0px; } .blzTabsheet > div.tsPage > div.tsTabPage > p.texteDummy{ /* texte "dummy" (ex: sélectionnez un patient) */ color:#0C5460; margin:10px; /*(.)*/ } /*--- s1.tabsheet ---*/ .blzTabsheet.s1 > div.tsTabBar > ul > li.selected{ background:#D7336B; border-bottom-color: #0C5460; } .blzTabsheet.s1 > div.tsTabBar > ul > li:hover { background: #D7336B; } .blzTabsheet.s1 > div.tsTabBar > ul > li.disabled:hover{ background: #E3E3E3; } .blzTabsheet.s1 > div.tsPage{ } /******************************************************************************************************************************/ /****** grilles *******/ /******************************************************************************************************************************/ .____________________blzGrid____________________{} /* ----------------------- */ /* -- générique grilles -- */ /* ----------------------- */ table.blzGrid{ /* la table de la grille */ display:block; /* FWK! */ float: left; /* FWK! */ clear: both; /* FWK! */ width: 100%; /* FWK! */ border:0px; } table.blzGrid tr{ /* ligne (titre, filtre, données) */ display:block; /* FWK! */ width:100%; /* FWK! */ float: left; /* FWK! */ clear: both; /* FWK! */ border-bottom:1px dotted #38A3B6; } table.blzGrid tr.gdRowOddNoBottom, table.blzGrid tr.gdRowEvenNoBottom{ border-bottom:0px; } table.blzGrid td, /* cellule (données ou filtre) */ table.blzGrid th{ /* header (titre) */ display: block; /* FWK! */ overflow:hidden; /* FWK! */ float: left; /* FWK! */ height:100%; /* FWK! */ } table.blzGrid th.multiLigne span{ display:block; } table.blzGrid th:last-child, /* header (titre) */ table.blzGrid td:last-child{ /* cellule (filtre ou données) */ border-right:0px; /*gridCell_borderLast*/ } table.blzGrid th { cursor : default; /*(.)*/ border-right:1px solid #E3E3E3; /*gridCell_border*/ } table.blzGrid th{ text-align:left; /*gridHead_textAlign*/ padding:2px 0px; } table.blzGrid th > span{ font-family:droid_sansbold, "Helvetica Neue", Helvetica, Arial, sans-serif;; font-weight:normal; /*gridHead_normalTH*/ font-size:75%; padding-left:14px; } table.blzGrid th.aGauche > span{ padding-left: 2px; } /* pour placer une icone à la place du titre de colonne */ table.blzGrid th.size100 > span{ font-size:100%; } table.blzGrid th, table.blzGrid > thead{ /* zone THEAD (titres et filtres) */ display:block; /* FWK! */ /* ------------------------------ */ width:100%; /* FWK! */ } table.blzGrid > thead > tr > *{ min-height:17px; /* FWK! */ /* font-size+6 (cause underline & sort) */ vertical-align:middle; /*(.)*/ } table.blzGrid > thead > tr:nth-child(1){ /* ligne de TITRES de colonnnes */ border-bottom:0px; /*gridHead_border*/ } table.blzGrid > thead > tr > th.gdSort, /* colonne triable */ table.blzGrid > thead > tr > th.gdSortAsc, table.blzGrid > thead > tr > th.gdSortDesc{ text-decoration:underline; cursor:pointer; background-repeat:no-repeat; background-position-x:1px; background-position-y:center; } table.blzGrid > thead > tr > th.gdSort{ /* non triée, ASC, DESC */ background-image:url("../../framework/core/blz/rsc/img/sort.gif"); /*(S)*/ } table.blzGrid > thead > tr > th.gdSort.gdSortAsc{ background-image:url("../../framework/core/blz/rsc/img/sort_asc.gif");/*(S)*/ } table.blzGrid > thead > tr > th.gdSort.gdSortDesc{ background-image:url("../../framework/core/blz/rsc/img/sort_desc.gif");/*(S)*/ } table.blzGrid > thead > tr:nth-child(2){ /* ligne de FILTRES */ font-size:75%; border-bottom:2px solid #0C5460; padding:2px 0px; } div:has(>table.blzGrid) { overflow-y: hidden !important; /* FWK! */ } div.gridFilter select, div.gridFilter input, div.gridFilter .inRadio{ border:1px solid #E3E3E3; } div.gridFilter input[type="text"], div.gridFilter select{ width:100%; } div.gridFilter input[type="checkbox"] { margin-left: 6px; } table.blzGrid .gdFilterItem{ /* champ de filtre avec erreur (ex minChar) */ background-color:#FFF; } table.blzGrid .filterError{ /* champ de filtre avec erreur (ex minChar) */ background-color:#FFF; border-color:#D7336B; } table.blzGrid > tbody{ /* zone TBODY "dataset" (les données de la grille) */ display:block; /* FWK! */ /* ------------------------------------------------*/ width:100%; /* FWK! */ float: left; /* FWK! */ overflow-y:scroll; /* FWK! */ background-color:#FFF; /*(S)*/ } table.blzGrid td { /* cellule (données ou filtre) */ border-right:1px solid #E3E3E3; /*gridCell_border*/ } /*table.blzGrid > tbody > tr:nth-child(odd)*/ .gdRowOdd, .gdRowOddNoBottom { /* lignes impaires / paires */ background-color:#FFFFFF; } /*table.blzGrid > tbody tr:nth-child(even)*/ .gdRowEven, .gdRowEvenNoBottom { background-color:#F0F0F0; } .gdRowBorderTop { border-top:1px solid black; } table.blzGrid > tbody > tr.selected{ /* ligne sélectionnée */ /* voir à distinguer odd/even au besoin */ } table.blzGrid > tbody > tr > td > *{ /* contenu cellule */ cursor:pointer; /*(.)*/ padding-left:2px; /*(.)*/ } table.blzGrid > tbody > tr > td > div{ /* cellule : la donnée (toujours dans un div pour overflow) */ width:2000px; /* FWK! */ font-size:75%; } table.blzGrid > tbody > tr > td > div.fa { /* cellule de type icone (typiquement check/noCheck)*/ font-size:100%; } table.blzGrid.wrap > tbody > tr > td > div { /* grilles : toute la grille est en mode auto-wrap. TODO: les div des cellules n'occupant pas toute la hauteur, la selection ne fonctionne que si on clique sur le texte */ width: 100%; /* FWK! */ } /* -------------------------- */ /* --- Grille - looks -- */ /* -------------------------- */ /*--- look neutre grille --*/ table.blzGrid > thead > tr:nth-child(1){ /* ligne de titre de colonnnes */ background-color:#0C5460; color:#FFFFFF; } table.blzGrid > thead > tr:nth-child(2){ /* ligne de filtres */ background-color:#E3E3E3; } table.blzGrid > tbody tr.mouseover /* ligne survolée par la souris */ { background-color:#D7336B; color:#FFFFFF; } table.blzGrid > tbody > tr.selected{ /* ligne sélectionnée */ /* voir à distinguer odd/even au besoin */ background-color:#D7336B; color:#FFFFFF; } table.blzGrid > tbody tr.selected.mouseover /* ligne sélectionnée survolée par la souris (idem non survolée, ici)*/ { background-color:#D7336B; color:#FFFFFF; } /*--- s1 grille ---*/ /* NB: le paramètre de look de blzGrid est css (ex css:s1) */ table.blzGrid.s1 > thead > tr:nth-child(1){ background-color:#AAA; /*gridHead_bgColor_1*/ color:#FFF; /*gridHead_color_1*/ } table.blzGrid.s1 > thead > tr:nth-child(2){ background-color:#DDD; /*gridFilter_bgColor_1*/ } table.blzGrid.s1 > tbody tr.mouseover { background-color:#3399FF; /*gridRow_bgColor_H1*/ color:#000; /*gridRow_color_H1*/ } table.blzGrid.s1 > tbody > tr.selected{ background-color:#AAA; /*gridRow_bgColor_S1*/ color:#FFF; /*gridRow_color_S1*/ } table.blzGrid.s1 > tbody tr.selected.mouseover { background-color:#AAA; /*gridRow_bgColor_SH1*/ color:#FFF; /*gridRow_color_SH1*/ } /* --------------------------------------------*/ /* styles spéciaux pour "patterns" de cellules . voir blzGrid.setAddClass()*/ /* --------------------------------------------*/ /* TODO: on est à la limite du custom application ++... à revoir */ table.blzGrid > tbody > tr > td > div.gdBold_1{ font-family:droid_sansbold, "Helvetica Neue", Helvetica, Arial, sans-serif;; /* gras/normal (ex propriété documentaire du questManager) */ } table.blzGrid > tbody > tr > td > div.gdItal_0{ font-style: italic; /* FWK! */ /* italique/normal (ex propriété non validée/validée du questManager */ } table.blzGrid > tbody > tr > td > div.gdRed_1{ /* probablement inutilisé */ color:#F00; /*(S)*/ } table.blzGrid > tbody > tr > td > div.gdGrey{ /* questManager, questionnaires unpub */ color:#666; /*(S)*/ } table.blzGrid > tbody > tr > td > div.gdCoul_blue{ /* questManager, questionnaires NOVA */ color:blue; /*(S)*/ } table.blzGrid > tbody > tr > td > div.gdCoul_maroon{ /* questManager, questionnaires 75 */ color:maroon; /*(S)*/ } table.blzGrid > tbody > tr > td > div.gdCoul_green{ /* questManager, questionnaires 76 */ color:green; /*(S)*/ } .fa_green{ /* questManager, questionnaires 76 */ color:green; font-weight: bold; /*(S)*/ padding-left: 1em; } .fa_red{ /* questManager, questionnaires 76 */ color:red; font-weight: bold; /*(S)*/ padding-left: 1em; /*(S)*/ } .fa_gray{ /* questManager, questionnaires 76 */ color:grey; font-weight: bold; /*(S)*/ padding-left: 1em; /*(S)*/ } table.blzGrid > tbody > tr.selected > td > div { /* pas de coloration spéciale pour selected */ color:#FFFFFF; } table.blzGrid.s1 > tbody > tr.selected > td > div { color:#FFF; /*gridRow_color_S1*/ } table.blzGrid > tbody > tr.selected.mouseover > td > div { /* pas de coloration spéciale pour selected+mouseOver */ color:#FFFFFF; } table.blzGrid.s1 > tbody > tr.selected.mouseover > td > div { color:#FFF; /*gridRow_color_SH1*/ } table.blzGrid > tbody > tr > td > div.gdLevel_0, table.blzGrid > tbody > tr > td > div.gdNoeud_0{ /* gestion des niveaux pour arbres (ex listes cim/ccam) */ font-family:droid_sansbold, "Helvetica Neue", Helvetica, Arial, sans-serif;; } table.blzGrid > tbody > tr > td > div.gdLevel_1{ padding-left:2em; /*(n)*/ } table.blzGrid > tbody > tr > td > div.gdLevel_2{ padding-left:4em; /*(n)*/ } table.blzGrid > tbody > tr > td > div.gdLevel_3{ padding-left:6em; /*(n)*/ } table.blzGrid > tbody > tr > td > div.gdLevel_4{ padding-left:8em; /*(n)*/ } table.blzGrid > tbody > tr > td > div.gdLevel_5{ padding-left:10em; /*(n)*/ } table.blzGrid > tbody > tr > td > div.gd2Lignes{ height: 2em; /*(n)*/ background: transparent; /*(n)*/ } table.blzGrid > tbody > tr > td > div.gdAtcdY{ /* pour caler une date YYYY sur une colonne DD/MM/YYYY */ padding-left:3em; /*(n)*/ } table.blzGrid > tbody > tr > td > div.gdAtcdYM{ /* pour caler une date YYYY sur une colonne DD/MM/YYYY */ padding-left:1.5em; /*(n)*/ } /*------------------------------------------------------------------*/ /* Style de cases à cocher (ex: admin droit/profil dans l'annuaire */ /*------------------------------------------------------------------*/ table.blzGrid > tbody > tr > td > div.checkTrue{ padding-left:16px; background-image:url("../../framework/core/blz/rsc/img/checktrue.gif"); /*(S)*/ background-repeat:no-repeat; /*(S)*/ } table.blzGrid > tbody > tr > td > div.checkFalse{ padding-left:16px; background-image:url("../../framework/core/blz/rsc/img/checkfalse.gif"); /*(S)*/ background-repeat:no-repeat; /*(S)*/ } table.blzGrid > tbody > tr > td > div.checkNo{ padding-left:16px; background-image:url("../../framework/core/blz/rsc/img/checkno.gif"); /*(S)*/ background-repeat:no-repeat; /*(S)*/ } table.blzGrid > tbody > tr > td > div.restreint{ font-style:italic; } table.blzGrid > tbody > tr > td > div.standard{ margin-left:10px } table.blzGrid > tbody > tr > td > div.etendu{ margin-left:20px; font-family:droid_sansbold, "Helvetica Neue", Helvetica, Arial, sans-serif;; } /*--------- Statuts pour statutExecution de TacheRun -----------*/ .stExecRun_0 { /* planifié */ background-color:#c0c0c0; color:black; } .stExecRun_1 { /* en cours */ background-color:#59b1e6; color:black; } .stExecRun_2 { /* terminé */ background-color:#74ce22; color:black; } .stExecRun_3 { /* erreur */ background-color:#ff0000; color:white; } /*-------------- pour administration questionnaires -------------------*/ table.blzGrid > tbody > tr > td > div > div.partOne{ /* n° de version et de build */ font-family:droid_sansbold, "Helvetica Neue", Helvetica, Arial, sans-serif;; float:left; width:30px; padding-right:5px; } table.blzGrid > tbody > tr > td > div.boutonGrille /* look bouton dans une grille */ { cursor:pointer; padding: 0px 15px; background-color:#38A3B6; color: #FFFFFF; } table.blzGrid > tbody > tr > td > div.boutonGrille:hover{ background-color : #D7336B; color: #FFFFFF; border-color:#E3E3E3; } table.blzGrid > tbody > tr > td > div.boutonGrille:active{ background-color : #D7336B; color: #FFFFFF; border-color:#E3E3E3; } /******************************************************************************************************************************/ /****** Questionnaires : moteur de formulaires *******/ /******************************************************************************************************************************/ .____________________blzQuest____________________{} div.blzQuest{ /* conteneur du form (ex un tsTabPage) */ overflow:hidden; /* FWK! */ background-color:#FFF; /*quest_bgColor*/ font-size:75%;; } form.quest:not(.RG){ /* form du formulaire en RUN ou en VISU */ display:block; /* FWK! */ /*height:100%;*/ /* FWK! */ overflow-y:scroll; /* FWK! */ margin:0px; /* FWK! */ padding:2px; /* FWK! */ &.noscroll{ /* pour formulaires systèmes à taille figée */ overflow-y:hidden; /* FWK! */ } & .visEdit_hidRun{ /* éléments de conception masqués en RUN ("poignées" de conception)*/ display:none; } /* ELEMENT de Formulaire (tous types) */ & div.elt{ margin:2px 0px; /* FWK! */ /* espacement verticale entre items */ clear:both; /* FWK! */ } & div.elt.currentElt{ /* item de formulaire ayant le focus */ background-color: #D7336B; margin:-2px;padding:2px; color:#FFFFFF; } & div.elt.nbLigne2{ min-height: 2.5em; } & div.elt.nbLigne3{ min-height: 3.5em; } & div.elt.nbLigne4{ min-height: 4.5em; } & div.elt.nbLigne5{ min-height: 5.5em; } & .elt.valeurRouge .valeurVisu { color: tomato; } &.questVisu div.elt{ line-height:initial; /* FWK! pour firefox */ } } form.quest:not(.RG):not(.edit) div.elt.hidden, form.quest:not(.RG):not(.edit) fieldset.elt.hidden{ display:none; } /* -- CONTENEUR : propriété [largeurConteneur] -- */ /* ----------------*/ .____conteneur____{} form.quest:not(.RG) { & div.col1, & div.col2, & div.col3, & div.col4, & div.col9 { -moz-box-sizing: border-box; /* FWK! */ -webkit-box-sizing: border-box; /* FWK! */ box-sizing: border-box; /* FWK! */ margin:0px; /* FWK! */ border:0px; /*(.)*/ padding:0px 2px 0px 0px; /*(.)*/ } & div.col1 + div{ clear:both; /* FWK! */ /* [largeurConteneur] : Reste */ } & div.col2, & div.col3, & div.col4, & div.col9 { /*display: inline-block;*/ float:left; /* FWK! */ } & div.col2{ /* [largeurConteneur] : moitié */ width:50%; /* FWK! */ } & div.col3{ /* [largeurConteneur] : Tiers */ width:33%; /* FWK! */ /*margin-top:2px;*/ } & div.col4{ /* [largeurConteneur] : Quart */ width:25%; /* FWK! */ /*margin-top:2px;*/ } /* -- ELT : hauteur pour label multiligne -- */ /* --------------------------------------------*/ & .multiligne_6{ height: 7em; } & .multiligne_5{ height: 6em; } & .multiligne_4{ height: 5em; } & .multiligne_3{ height: 4em; } & .multiligne_2{ height: 3em; } /* -- PUCES : fieldSet : le conteneur CADRE -- */ /* --------------------------------------------*/ & fieldset{ /* CADRE de PUCE (fieldSet) : cadre générique */ border-width : 0px; /* FWK! */ margin: 0px; /* FWK! */ padding : 0.35em 0.75em 0.35em 1em; /* FWK! */ /* (padding par défaut d'un fieldset: 0.35em 0.75em 0.625em 0.75em) */ border-style : solid; /*(.)*/ /* style de bordure "normal" */ border-radius:0px; clear:both; /*corrige le bug de la puce sous le radio*/ } & fieldset.tsTabPage{ /* PUCE1 (section) cadre en onglet*/ padding-top:1em; } & fieldset.noLegend { /* [titreVisible] = false. cadre sans padding top/down*/ padding-top:0px; /* FWK! */ padding-bottom:0px; /* FWK! */ } & fieldset.noShift { /* [titreVisible] = false. cadre sans padding top/down*/ padding:0px; /* FWK! */ } /* & .tsPage > fieldset > fieldset{ fieldset niveau block dans un tabsheet : DEPRECATED margin-top:10px; } */ } /* -- PUCE : div.legend - Le LABEL -- */ /* ------------------------------------*/ .____puce_label____{} form.quest:not(.RG) { & legend{ /* PUCE : le tag legend est masqué et remplacé par un DIV class legend */ visibility:hidden; /* FWK! */ /* TODO: pourquoi on préfère un DIV à LEGEND ?? */ position:absolute; /* FWK! */ /*text-align:left; display:inline-block; top:0.1em;*/ } & fieldset > div.legend{ /* PUCE : le label (dans un DIV de class legend) */ display:none; /* FWK! */ display:block; /* FWK! */ margin-left:-1em; /* FWK! */ /* conpensation padding-left du fieldset: puce en retrait à gauche des items */ margin-bottom:2px; /* FWK! */ border-radius:0px; } & fieldset.puce1 > div.legend{ /* PUCE niveau 1 (section) */ margin-left:-0.7em; /* FWK! */ padding:0.2em; /*(.)*/ font-size:1.3em; background-color:transparent; color:#0C5460; text-transform: uppercase; font-family:droid_sansbold, "Helvetica Neue", Helvetica, Arial, sans-serif;; display : list-item; /*puce1_displayItem*/ list-style-position:inside; /* FWK! */ list-style-type:none; /*puce1_typeItem*/ } & fieldset.noShift.puce1 > div.legend { /* puce 1 non indentée SANNOVAW-6458 */ margin-left:-0.3em; /* FWK! */ } & fieldset.puce1.header > div.legend{ /* titre événement parent en visu event*/ color:#FFF; background-color:#38A3B6; border:1px solid #38A3B6; } & fieldset.puce1.header2 > div.legend{ /* titre événement enfant en visu event*/ color:#38A3B6; background-color:#E3E3E3; border: 1px solid #999999; /*puce1Header2_border*/ } & fieldset.puce1.header2 { border: 0px solid #999999; /*puce1Header2_border_field*/ } /* toggle */ & fieldset.puce1.toggle > div.legend, & fieldset.puce2.toggle > div.legend, & fieldset.puce3.toggle > div.legend, & fieldset.puce4.toggle > div.legend, & fieldset.puce5.toggle > div.legend, & fieldset.puce6.toggle > div.legend { cursor:pointer; } /* * gestion des bordure de section */ & fieldset.puce1 > div:last-child{ border: 1px solid #E3E3E3; margin-left:0px; padding: 1em; background-color: #F9F9F9; } /*piloté par quest*/ &.noBorder fieldset.puce1 > div:last-child{ border: 0px; margin-left: 0em; padding: 0em; background-color: #FFFFFF ; } /*piloté par l'élément*/ & fieldset.puce1.noBorder > div{ border: 0px solid gray; margin-left: 0em; padding: 0em; background-color: #FFFFFF ; } & .tsPage > .puce1 > div.legend.onglet{ /* si section en onglet, le titre n'est pas affiché (nb .puce1 est dans un DIV ici)*/ display:none; } & fieldset.puce2 > div.legend{ /* PUCES niveau 2 à 6 */ font-size:1.2em; background-color:transparent; /*puce2_bgColor*/ color:#0C5460; /*puce2_txtTransform_SET*/ font-family:droid_sansbold, "Helvetica Neue", Helvetica, Arial, sans-serif;; text-decoration:none; /*puce2_fontSub*/ display : list-item; /*puce2_displayItem*/ list-style-position:inside; /* FWK! */ list-style-type:none; } & fieldset.puce3 > div.legend{ font-size:1.1em; /*puce3_fontSize*/ background-color:transparent; /*puce3_bgColor*/ color:#0C5460; font-family:droid_sansbold, "Helvetica Neue", Helvetica, Arial, sans-serif;; text-decoration:none; /*puce3_fontSub*/ display : list-item; /*puce3_displayItem*/ list-style-position:inside; /* FWK! */ list-style-type:disc; /*puce3_typeItem*/ } & fieldset.puce4 > div.legend{ background-color:transparent; /*puce4_bgColor*/ color:#000; /*puce4_color*/ font-family:droid_sansbold, "Helvetica Neue", Helvetica, Arial, sans-serif;; text-decoration:none; /*puce4_fontSub*/ display : list-item; /*puce4_displayItem*/ list-style-position:inside; /* FWK! */ list-style-type:disc; /*puce4_typeItem*/ } & fieldset.puce5 > div.legend{ background-color:transparent; /*puce5_bgColor*/ color:#000; /*puce5_color*/ /*puce5_txtTransform_SET*/ text-decoration:underline; display : list-item; /*puce5_displayItem*/ list-style-position:inside; /* FWK! */ list-style-type:disc; /*puce5_typeItem*/ } & fieldset.puce6 > div.legend{ background-color:transparent; /*puce6_bgColor*/ color:#000; /*puce6_color*/ display : list-item; /*puce6_displayItem*/ list-style-position:inside; /* FWK! */ list-style-type:disc; /*puce6_typeItem*/ } & fieldset > div.legendAsText{ /* puce texte seul TODO : revalider */ margin-left:-1em; /* FWK! */ font-size:1em; } } /* -- TABLEAU -- */ /* --------------*/ .____tableau____{} form.quest:not(.RG) { & div.eltTable /* item tableau : le tableau */ { display:table; /* FWK! */ margin-left:-2px; /* FWK! */ /* compense le padding de eltCell*/ width:100%; /* ajout Yark pour QM2 : si pb, déplacer dans qm2.css */ } & div.eltLigne /* ligne de tableau */ { display:table-row; /* FWK! */ margin:0px; /* FWK! */ } & div.eltCell /* case de tableau */ { display:table-cell; /* FWK! */ margin:0px; /* FWK! */ padding : 0px 2px; /* FWK! */ vertical-align:top; /* FWK! */ } & div.eltCell.vCenter /* case de tableau pour bouton centré*/ { vertical-align:middle; } & div.eltTable.noPadding /* le tableau sans padding pour ajustement manuel */ { margin-left:0px; /* FWK! */ } & div.eltTable.noPadding div.eltCell { padding : 0px 0px; /* FWK! */ } & div.eltTable.colBorder div.eltLigne div.eltCell:nth-last-of-type(n+2) /* bordure de colonne, sur toute les cellules sauf la derniere de toutes les lignes */ { border-right:1px solid black; /* FWK! */ } & div.eltTable.rowBorder div.eltLigne:nth-last-of-type(n+2) div.eltCell:nth-last-of-type(n) /* bordure de ligne, sur toute les cellule sur toutes les lignes sauf la derniere */ { border-bottom: 1px solid black; /* FWK! */ } } /* -- REPLICAT -- */ /* ---------------*/ .____replicat____{} form.quest:not(.RG) { & div.eltArray /* Instance de REPLICAT */ { display:inline-block; /* FWK! */ width:100%; /* FWK! */ } &.questVisu div.eltArray /* Instance de REPLICAT */ { display:block; /*(.)*/ } & div.eltArray.replicat_hide /* template d'instance de réplicat */ { display:none; } & div.eltArray.box /* Instance de REPLICAT */ { border-radius:0px; border-left: 5px solid #999999; padding-left: 10px;; margin-bottom:10px; background-color:transparent; } & div.eltArray div.arrayTools { float:left; /*(.)*/ height:1px; } & button.arrayBtn { width:32px; height:32px; border:0px; background-color:transparent; overflow: hidden; margin-bottom:3px; font-size:0.1px; color:#FFF; padding:0px; } & button.arrayBtn.delete:before, & button.arrayBtn.up:before, & button.arrayBtn.down:before { color:#38A3B6; display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: 30px; text-rendering: auto; -webkit-font-smoothing: antialiased; } & button.arrayBtn.delete:hover:before, & button.arrayBtn.up:hover:before, & button.arrayBtn.down:hover:before{ color:#D7336B; } & button.arrayBtn.delete:active:before, & button.arrayBtn.up:active:before, & button.arrayBtn.down:active:before{ color:#D7336B; } & button.arrayBtn.delete:before { content:"\f057"; } & button.arrayBtn.up:before { content:"\f0aa"; } & button.arrayBtn.down:before { content:"\f0ab"; } & button.arrayAdd { width:32px; height:32px; border:0px; background-color:transparent; overflow: hidden; margin-bottom:3px; font-size:0.1px; color:#FFF; padding:0px; } & button.arrayAdd:before{ color:#38A3B6; content:"\f055"; display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: 30px; text-rendering: auto; -webkit-font-smoothing: antialiased; } & button.arrayAdd:hover:before{ color:#D7336B; } & button.arrayAdd:active:before{ color:#D7336B; } & div.eltArray div.arrayContent { margin-left:40px; /* FWK! */ } & .icone button.arrayBtn.delete { background-image:url("../../framework/core/blz/rsc/img/quest/arrayDelete.png?2");/*(S)*/ border: none; background-position: 0px 0px; } & .icone .arrayAdd.btn{ background-image:url("../../framework/core/blz/rsc/img/quest/arrayAdd.png?1");/*(S)*/ width:32px; height:32px; overflow: hidden; margin-bottom:3px; margin-top:2px; border: none; margin-left: 6px; } & .iconeSmall button.arrayBtn.delete { background-image:url("../../framework/core/blz/rsc/img/quest/arrayDeleteSmall.png?2");/*(S)*/ border: none; background-position: 0px 0px; width:24px; height:24px; } & .iconeSmall .arrayAdd.btn{ background-image:url("../../framework/core/blz/rsc/img/quest/arrayAddSmall.png?1");/*(S)*/ width:24px; height:24px; overflow: hidden; margin-bottom:3px; margin-top:2px; border: none; margin-left: 6px; } /** -------------- */ /** replicat compact **/ /** -------------- */ & .arrayCompact div.eltArray{ border-width: 0px ; padding:0px; } & .arrayCompact div.eltArray.box{ border-width: 0px; padding: 0em; margin-bottom: 0px; } & .arrayCompact button.arrayBtn.delete { /* background-image:url("../../framework/core/blz/rsc/img/quest/arrayDeleteSmall.png?2");*/ border: none; background-position: 0px 0px; width:24px; height:24px; } & .arrayCompact .arrayAdd.btn{ /* background-image:url("../../framework/core/blz/rsc/img/quest/arrayAddSmall.png?1");*/ background-position: 0px 0px; width:24px; height:24px; overflow: hidden; margin-bottom:3px; margin-top:2px; border: none; } & .arrayCompact button.arrayAdd:before, & .arrayCompact button.arrayBtn.delete:before, & .arrayCompact button.arrayBtn.up:before, & .arrayCompact button.arrayBtn.down:before { font-size: 20px; } & .arrayCompact div.eltArray div.arrayContent{ margin-left:24px; } } /* ---------------*/ /*-- ELEMENTS --*/ /* ---------------*/ .____Element_labels____{} form.quest:not(.RG) { & div.controls{ /* conteneur de la zone de saisie */ display:inline; /* FWK! */ clear:both; /* FWK! */ } /* -- TITRES de question - labels --*/ /* ---------------------------------*/ & .elt > label, /*label classique ou checkbox avec label à gauche*/ & .elt > .controls > label, /*label de checkbox à droite de la check box*/ & .elt > .controls > .inRadio > label, /*label de radio (associé à un bouton)*/ & .elt .boxMultiSel > div > label, /* label de checkbox multi sélection */ & .elt.eltTit, /* titre seul */ & div.calc, /* valeur de champ calculé */ & .elt > span.labelLike{ /*pseudo label pour checkbox avec label à droite(pseudo à gauche),*/ /* et pour radio (associé au groupe de boutons) */ padding-right:0.5em; /* FWK! */ /* espace avant l'input*/ padding-top:4px;/* compense le padding de l'input, textarea,inRadio */ vertical-align:text-top; /* FWK! */ /*input_font_SET*/ } & .elt > label.titreNonVisible, /*label classique*/ & .elt > .controls > label.titreNonVisible, /*label de checkbox à droite de la check box*/ & .elt > .controls > .inRadio > label.titreNonVisible, /*label de radio (associé à un bouton)*/ & .elt .boxMultiSel > div > label.titreNonVisible, /* label de checkbox multi sélection */ & .elt > span.labelLike.titreNonVisible{ /*pseudo label pour checkbox avec label à droite(pseudo à gauche),*/ /* et pour radio (associé au groupe de boutons) */ display:none; padding-top:4px;/* compense le padding de l'input, textarea,inRadio */ vertical-align:top; /* FWK! */ } & .elt > label{ /*label classique*/ display:inline-block; /* FWK! */ vertical-align:top; } & .elt > span.labelLike{ float:left; /* FWK! */ } & .elt > label.enDessous, & .elt > span.labelLike.enDessous{ /* propriété [styleChampAligne] (input en dessous du titre) */ display:block; /* FWK! */ float:none; /* FWK! */ } & .elt > label.enDessous.titreNonVisible, & .elt > span.labelLike.enDessous.titreNonVisible { display:none; } & .droite label, /* propriété [styleTitreAligne] (titre aligné à droite contre l'input) */ & .droite span.labelLike, &.droite label, /* (prop. de puce ou du questionnaire) */ &.droite span.labelLike{ text-align:right; /* FWK! */ padding-right:0.5em; /* FWK! */ } & .gauche label, & .gauche span.labelLike, &.gauche label, &.gauche span.labelLike{ text-align:left; /* FWK! */ } } /* -- INPUTS - les questions -- */ /* ------------------------------*/ .____question_input____{} form.quest:not(.RG) { & .inRadio{ /* Radio : zone boutons + labels de boutons */ display:inline-block; /* FWK! */ /* Select : contenant du