www/plugins-dist/medias/prive/style_prive_plugin_medias.html

   1 [(#REM)
   2
   3         Ce squelette definit les styles de l'espace prive
   4
   5         Note: l'entete "Vary:" sert a repousser l'entete par
   6         defaut "Vary: Cookie,Accept-Encoding", qui est (un peu)
   7         genant en cas de "rotation du cookie de session" apres
   8         un changement d'IP (effet de clignotement).
   9
  10         ATTENTION: il faut absolument le charset sinon Firefox croit que
  11         c'est du text/html !
  12         <style>
  13 ]
  14 #CACHE{3600*100,cache-client}
  15 #HTTP_HEADER{Content-Type: text/css; charset=iso-8859-15}
  16 #HTTP_HEADER{Vary: Accept-Encoding}
  17
  18 #SET{claire,##ENV{couleur_claire,edf3fe}}
  19 #SET{foncee,##ENV{couleur_foncee,3874b0}}
  20 #SET{left,#ENV{ltr}|choixsiegal{left,left,right}}
  21 #SET{right,#ENV{ltr}|choixsiegal{left,right,left}}
  22
  23 .formulaire_editer_document {margin-bottom: 0;}
  24 .formulaire_editer_document .editer_dimensions input {width:7em;}
  25 .formulaire_editer_document .editer_parent {padding-#GET{left}:10px;}
  26 .formulaire_editer_document .editer_parent label {margin-#GET{left}:0;display:block;float:left;padding:2px 0;}
  27
  28 .formulaire_editer_document .taille_modifiee {display:block;color: red;}
  29
  30 .formulaire_editer_document .editer_apercu .tourner {display:block;float:#GET{right};}
  31 .formulaire_editer_document .editer_apercu .tourner input.image {padding:5px;border:1px solid #eee;}
  32
  33 .formulaire_joindre_document {margin-top: 0}
  34 .formulaire_joindre_document .sourceup {}
  35 .formulaire_joindre_document .infos {}
  36 .formulaire_joindre_document .deballer_zip ul {font-size:0.9em;}
  37 .formulaire_joindre_document .deballer_zip ul ul {font-size:1em;}
  38 .formulaire_joindre_document .deballer_zip ol {padding-#GET{left}:0;margin:0;word-wrap:break-word;}
  39 .lat .formulaire_joindre_document { margin-top: [(#ENV{margin-bottom}|strmult{1.5})em]; }
  40 .lat .formulaire_joindre_document .deballer_zip ol {max-width: 185px;}
  41
  42 .formulaire_joindre_document .deballer_zip .editer_options_upload_zip li {padding:0;}
  43 .formulaire_joindre_document .deballer_zip .editer_options_upload_zip .erreur_message {margin-bottom:1em;}
  44 #navigation .formulaire_joindre_document .sourceup, #extra .formulaire_joindre_document .sourceup {font-size:0.85em;}
  45 #navigation .formulaire_joindre_document .deballer_zip .editer_options_upload_zip > label,
  46 #extra .formulaire_joindre_document .deballer_zip .editer_options_upload_zip > label {float:none;}
  47 #navigation .formulaire_joindre_document .deballer_zip .editer_options_upload_zip .choix input,
  48 #extra .formulaire_joindre_document .deballer_zip .editer_options_upload_zip .choix input {vertical-align:top;}
  49
  50 .formulaire_joindre_document .editer_fichier input.file {display:block;}
  51 .formulaire_joindre_document .editer_refdoc_joindre input.text {width:50%;}
  52
  53 .onglets_simple .medias .image a,.onglets_simple .medias .image strong {padding-left:27px;background: url(#CHEMIN_IMAGE{media-image-16.png}) no-repeat 5px center;}
  54 .onglets_simple .medias .audio a,.onglets_simple .medias .audio strong {padding-left:27px;background: url(#CHEMIN_IMAGE{media-audio-16.png}) no-repeat 5px center;}
  55 .onglets_simple .medias .video a,.onglets_simple .medias .video strong {padding-left:27px;background: url(#CHEMIN_IMAGE{media-video-16.png}) no-repeat 5px center;}
  56
  57 .onglets_simple.second ul.distant li.first,.onglets_simple.second ul.brises li.first,.onglets_simple.second ul.sanstitre li.first {margin-#GET{left}:30px;}
  58
  59 .choix-type, .choix-type li {display:inline;list-style:none;margin:0;padding:0;}
  60 .choix-type {margin:1em 0;padding:0;}
  61
  62
  63 a.bouton_fermer {display:block;text-align:#GET{right};}
  64
  65 .galerie { float: none; width: 100%; padding:0;margin-bottom: #ENV{margin-bottom};}
  66 .galerie .pagination {clear:both;font-size:0.95em;}
  67 .galerie .pagination + .pagination {border-top: 0;margin-top:-1px;}
  68 .galerie table { width: 100%; border: none; margin-bottom: 0}
  69 .galerie table thead,.galerie table thead th  { background: #e5e5e5;background: -webkit-gradient(linear, left top, left bottom, from(#f0f0f0), to(#e0e0e0));background-image: -webkit-linear-gradient(top, #f0f0f0, #e0e0e0);background-image: -moz-linear-gradient(top, #f0f0f0, #e0e0e0);background-image: -ms-linear-gradient(top, #f0f0f0, #e0e0e0);background-image: -o-linear-gradient(top, #f0f0f0, #e0e0e0);background-image: linear-gradient(top, #f0f0f0, #e0e0e0);filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#f0f0f0', endColorstr='#e0e0e0');}
  70 .galerie table tbody tr:hover { background: [#(#GET{claire}|couleur_eclaircir|couleur_eclaircir)]; }
  71 .galerie table td { min-height: 100px; vertical-align: top; }
  72 .galerie table th, .galerie table td { padding: 0.5em .3em; border-bottom: 1px solid #ccc; }
  73 .galerie table th.id { text-align: right; }
  74 .galerie table td.id { width: 80px; text-align: right; vertical-align: top; line-height: normal; }
  75 .galerie table td.id strong { font-size: 1.6em; color: #666; font-weight: normal; }
  76 .galerie table td.statut { width: 9px; }
  77 .galerie table td.logo { width: 250px; overflow: hidden; }
  78 .galerie table td.logo img { /*border: 1px solid #666;*/ }
  79 .galerie table .fichier {font-size:0.8em;width:250px;overflow:hidden;font-style:italic;}
  80
  81 .galerie table td.exif { width: 140px;  }
  82 .galerie table td.exif small { display: inline; }
  83 .galerie table td.exif .extension {}
  84 .galerie table td.exif .dimensions { font-size: .9em; }
  85 .galerie table td.exif .taille { font-size: .9em; font-weight: bold; color: #666; }
  86 .galerie table td.exif .date { font-size: .9em; }
  87 .galerie table td.descriptif { }
  88
  89 .galerie table .supprimer {display:block;font-size:0.8em;margin-top:1em;}
  90
  91 .galerie.media-image h2 { background: url(#CHEMIN_IMAGE{media-image-32.png}) no-repeat center left; padding: 6px;padding-left: 40px;}
  92 .galerie.media-audio h2 { background: url(#CHEMIN_IMAGE{media-audio-32.png}) no-repeat center left; padding: 6px;padding-left: 40px;}
  93 .galerie.media-video h2 { background: url(#CHEMIN_IMAGE{media-video-32.png}) no-repeat center left; padding: 6px;padding-left: 40px;}
  94
  95 .galerie table td.exif { background-repeat: no-repeat; background-position: top right; }
  96
  97 .popin-choisir_document {}
  98 .popin-choisir_document .onglets_simple.second {display:none;}
  99 .popin-choisir_document .galerie table td.id  {width:40px;}
 100 .popin-choisir_document .galerie table td.logo  {width:200px;}
 101 .popin-choisir_document .galerie table td.exif {width:120px;}
 102 .popin-choisir_document .galerie table td.descriptif {max-width:150px;}
 103 .popin-choisir_document .galerie table td {word-wrap: break-word;}
 104
 105 .spip_documents_legende {border:1px solid #GET{foncee};text-align:center;font-size:0.9em;margin:0 0 1em;}
 106 .spip_documents_legende dt {background:#GET{foncee};color:#fff;padding:5px 3px;font-weight:bold;}
 107 .spip_documents_legende dd {padding:3px 0;margin:0;}
 108 .spip_documents_legende dd.vignette {margin:5px 0;}
 109
 110 .document_utilisations li.item {position:relative;padding-#GET{right}:24px;}
 111 .document_utilisations li.item .vu {position:absolute;top:0;right:0;}
 112
 113
 114 .pagination .tris {float:left;}
 115
 116 p.actions {clear:both;}
 117
 118 #documents_joints {margin-top:25px;}
 119 #documents_joints .item {text-align:center;margin-bottom:25px;padding:0;border:1px solid #GET{foncee};overflow:visible;}
 120 #documents_joints .item.image {background:#fff;}
 121 #documents_joints .item.document {background:#ddd;}
 122 #documents_joints .item .infos {padding:6px;}
 123 #documents_joints .item .titrem {margin-top:0px;text-align:left;background:#GET{foncee};padding:5px;padding-left:16px;font-weight:bold;margin-bottom:5px;position:relative;font-size:x-small;word-wrap:break-word;}
 124 #documents_joints .item .titrem .fichier {display:block;color:#fff;overflow:hidden;}
 125 #documents_joints .item .titrem .titre {display:block;color:#000;}
 126 #documents_joints .item .titrem .image_loading {position:absolute;bottom:-20px;right:0;}
 127 #documents_joints .item .type {font-size:x-small;}
 128 #documents_joints .item .raccourcis {font-size:x-small;padding:2px;}
 129 #documents_joints .item .raccourcis span {display:block;font-weight:bold;text-align:left;}
 130 #documents_joints .item div.mode {text-align:right;font-size:x-small;}
 131 #documents_joints .item .actions {display:block;text-align:right;font-size:x-small;}
 132 .lte7 #documents_joints .item div.mode button,.lte7 #documents_joints .item .actions button {font-size: 11px;}
 133 #documents_joints .item .tourner {display:block;float:#GET{right};}
 134 #documents_joints .item .tourner button {padding:1px;border:1px solid #eee;display:block;}
 135 #documents_joints .item .tourner button img {margin:0px;}
 136
 137 #documents_joints .item .actions > *,
 138 #documents_joints .item .tourner,
 139 #documents_joints .item .mode {opacity:0.4;}
 140 #documents_joints .item .actions .deplacer-modifier {visibility:visible;opacity:1;font-weight:bold;}
 141 #documents_joints .item:hover .actions > *,
 142 #documents_joints .item:hover .tourner,
 143 #documents_joints .item:hover .mode,
 144 #documents_joints .item.hover .actions > *,
 145 #documents_joints .item.hover .tourner,
 146 #documents_joints .item.hover .mode {visibility:visible;opacity:1;}
 147
 148 .portfolios {}
 149 .portfolios h3 {background-color:#GET{claire};padding:2px 10px;color:#000;margin-bottom:0;}
 150 .portfolios .liste_items {margin-top:0;}
 151 .portfolios .liste_items .pagination { clear:both; width:100%; }
 152 .portfolios .liste_items > .pagination:first-child {  margin-top:0; margin-bottom:.6925em; }
 153 .portfolios .item { clear:both; }
 154 .portfolios .item .presentation { display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-orient:horizontal; -webkit-box-direction:normal; -ms-flex-direction:row; flex-direction:row; width:100%; }
 155 .portfolios .item .vignette { width: 150px; min-width:150px; text-align: center; }
 156 .portfolios .item .descriptions {  display:-webkit-box;  display:-ms-flexbox;  display:flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; padding-#GET{right}: 0.6925em; margin-#GET{left}:1em; width: 100%; -webkit-box-flex:1; -ms-flex-positive:1; flex-grow:1; }
 157 .portfolios .item .titrem .vu { float:left; margin-#GET{right}:4px; }
 158 .portfolios .item .titrem {margin:0 0 5px;font-size:1em;}
 159 .portfolios .item .titrem .fichier {font-weight:normal;font-size:0.9em; font-style:italic; display:block; }
 160 .portfolios .item .titrem .titre {display:block;font-size:1.1em;}
 161 .portfolios .item .descriptif { color:#444; margin-bottom:.6925em; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; }
 162 .portfolios .item .infos .permanentes {
 163         display: block;
 164         padding:2px 4px; margin-top:.5em; color:rgba(0,0,0,.8);
 165         border-top:1px solid rgba(100, 100, 100, .1);
 166         border-bottom:1px solid rgba(100, 100, 100, .1);
 167 }
 168 .portfolios .item .infos .lien_details { float:#GET{right}; cursor:pointer; }
 169 .portfolios .item .infos .detaillees { display:none; }
 170 .portfolios .item .infos .detaillees table.compact:first-child tr { border-top:0; }
 171 .portfolios .item table.compact { background-color:rgba(255,255,255,.6); }
 172 .portfolios .item table.compact th,
 173 .portfolios .item table.compact td { padding:.3em .3em; }
 174 .portfolios .item table.compact tr { border-top:1px solid rgba(100, 100, 100, .1); border-bottom:1px solid rgba(100, 100, 100, .1);  }
 175 .portfolios .item table.compact tr:nth-child(2n) td,
 176 .portfolios .item table.compact tr:nth-child(2n) th { background:none; }
 177 .portfolios .item .infos .credits .vide {  font-style:italic; opacity:.5; }
 178 .portfolios .item div.mode {display:inline-block; clear:#GET{right};}
 179 .portfolios .item .actions { clear:both; overflow:visible; margin-top:.6925em; padding-#GET{right}: .6925em; margin-bottom:-3px; }
 180 .portfolios .item div.mode,
 181 .portfolios .item .actions,
 182 .portfolios .item div.mode button,
 183 .portfolios .item .actions button {text-align: #GET{left}; clear: none;}
 184 .portfolios .item div.mode button,
 185 .portfolios .item .actions button {display: inline;}
 186
 187 .portfolios .item .actions > *,
 188 .portfolios .item .mode {opacity:0.4;}
 189 .portfolios .item .actions .deplacer-modifier { visibility: visible; opacity: 1; float: #GET{right}; font-weight: bold; }
 190 .portfolios .item:hover .actions > *,
 191 .portfolios .item:hover .mode,
 192 .portfolios .item.hover .actions > *,
 193 .portfolios .item.hover .mode {visibility:visible;opacity:1;z-index:1000;}
 194
 195 .portfolios .item .titre > .sanstitre,
 196 .portfolios .item .titre > .sanstitre + .fichier {opacity:0.4;}
 197
 198 .portfolios .actions-liste { clear:both; margin-top:.6925em; display:block; }
 199 .portfolios .actions-liste > * {display:inline; }
 200 .portfolios .tout_supprimer span {display:block; text-align:#GET{right};}
 201
 202 .item.vu_oui {background:#f9f9f9;}
 203
 204 .deplacer-document-placeholder { height:130px; }
 205 .deplacer-document { margin-#GET{right}:0.5em; float: #GET{left}; margin-top:1px; cursor:move; }
 206 .document-en-mouvement { cursor:move; }
 207
 208
 209 /* Types d'affichages des listes de douments */
 210 h3 .affichages {
 211         float:#GET{right};
 212 }
 213
 214 .affichages .icone {
 215         width:16px;
 216         height:16px;
 217         margin:0;
 218         padding:2px;
 219         display:inline-block;
 220         background:rgba(255, 255, 255, 0.5) center center no-repeat;
 221         border-radius:3px;
 222         cursor:pointer;
 223 }
 224 .affichages .icone + .icone {
 225         margin-#GET{left}:5px;
 226 }
 227 .affichages .icone.grand {
 228         background-image: url([(#CHEMIN_IMAGE{documents-liste-16.png})]);
 229 }
 230 .affichages .icone.liste {
 231         background-image: url([(#CHEMIN_IMAGE{documents-liste-courte-16.png})]);
 232 }
 233 .affichages .icone.cases {
 234         background-image: url([(#CHEMIN_IMAGE{documents-cases-16.png})]);
 235 }
 236 .affichages .icone.on {
 237         background-color:rgba(255, 255, 255, 0.9);
 238 }
 239 .affichages .icone.on:hover,
 240 .affichages .icone:hover {
 241         background-color:rgba(255, 255, 255, 1);
 242 }
 243
 244 /* Liste courte de documents */
 245 .portfolios .documents_liste .item  {
 246         position:relative;
 247         padding:7px;
 248         display:flex;
 249 }
 250 .portfolios .documents_liste .item .vignette {
 251         width:65px;
 252         min-width: 65px;
 253 }
 254 .portfolios .documents_liste .item .vignette img {
 255         max-height: 36px;
 256         max-width:65px;
 257         height:auto;
 258         width:auto;
 259 }
 260 .portfolios .documents_liste .item .presentation {
 261         -webkit-box-align:center;
 262             -ms-flex-align:center;
 263                 align-items:center;
 264         -webkit-box-flex:1;
 265             -ms-flex-positive:1;
 266                 flex-grow:1;
 267         overflow:hidden;
 268 }
 269 .portfolios .item .descriptions {  overflow: hidden; }
 270 .portfolios .documents_liste .item .infos,
 271 .portfolios .documents_liste .item .descriptif,
 272 .portfolios .documents_liste .item .mode,
 273 .portfolios .documents_liste .item .actions > * {
 274         display:none;
 275 }
 276 .portfolios .documents_liste .item .titrem {
 277         margin-bottom:0;
 278 }
 279 .portfolios .documents_liste .item .titrem .fichier,
 280 .portfolios .documents_liste .item .titrem .titre {
 281         max-height:2.4em;
 282         line-height:1.2em;
 283         overflow:hidden;
 284         white-space: nowrap;
 285         display:block;
 286         text-overflow:ellipsis; /* necessite des overflow:hidden; sur les parents */
 287 }
 288 .portfolios .documents_liste .item .actions {
 289         align-items:center;
 290         text-align:#GET{right};
 291         padding-#GET{right}:0;
 292         min-width:80px;
 293 }
 294 .portfolios .documents_liste .item .actions .deplacer-modifier {
 295         display:inline-block;
 296         float:none;
 297         margin-#GET{right}:0;
 298 }
 299 .documents_liste .deplacer-document-placeholder { height:40px; }
 300
 301
 302 /* Grille en cases des documents. */
 303 .portfolios .documents_cases .sortable {
 304         display:-webkit-box;
 305         display:-ms-flexbox;
 306         display:flex;
 307         -ms-flex-wrap: wrap;
 308             flex-wrap: wrap;
 309 }
 310 .portfolios .documents_cases .item {
 311         padding: 2px;
 312         margin: 2px;
 313         border:1px solid #eee;
 314         border-radius:5px;
 315         width:113px;
 316         height:130px;
 317         display:-webkit-box;
 318         display:-ms-flexbox;
 319         display:flex;
 320         -webkit-box-orient:vertical;
 321         -webkit-box-direction:normal;
 322             -ms-flex-direction:column;
 323                 flex-direction:column;
 324         -webkit-box-align:center;
 325             -ms-flex-align:center;
 326                 align-items:center;
 327 }
 328 .portfolios .documents_cases .item .presentation { -webkit-box-flex:1; -ms-flex-positive:1; flex-grow:1; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
 329 .portfolios .documents_cases .item .descriptions,
 330 .portfolios .documents_cases .item .mode,
 331 .portfolios .documents_cases .item .actions > * {
 332         display:none;
 333 }
 334 .portfolios .documents_cases .item .actions .deplacer-modifier  { display:block; width:100%;}
 335 .portfolios .documents_cases .item .actions .editbox  { float:right; }
 336 .documents_cases .deplacer-document-placeholder { height:130px; width:113px; padding: 2px; margin: 2px;}
 337
 338 .portfolios .documents_cases .item .vignette {
 339         width:auto;
 340         height:auto;
 341         min-width:auto;
 342 }
 343 .portfolios .documents_cases .item .vignette img {
 344         max-height: 95px;
 345         max-width:110px;
 346         width: auto;
 347         height: auto;
 348 }
 349
 350 .portfolios .documents_cases .item .actions {
 351         display:block;
 352         width:100%;
 353         margin-bottom:0;
 354         box-sizing:border-box;
 355         padding: 2px 5px 1px 5px;
 356 }
 357 .portfolios .documents_cases .tout_supprimer {
 358         -ms-flex-preferred-size: 100%;
 359             flex-basis: 100%;
 360 }