source: admin/style/scss/partials/_blog_theme.scss @ 3468:5f0bb79dfa96

/* pour les alignements verticaux */

#theme-new,
#theme-activate,
#theme-deactivate,
#theme-update {
     margin-left: -10px;
     margin-right: -10px;
}

.box.theme {
     margin: 5px;
     padding: 10px 10px 5px 10px;
     border: 1px solid #dfdfdf;
     position: relative;
     &:hover {
          background: #ecf0f1 url(texture.png);
     }
     input {
          margin-bottom: 1em;
     }
}

.module-name,
.module-name label {
     margin-bottom: .5em;
     color: #676e78;
}

.module-sshot {
     text-align: center;
     img {
          padding: 5px;
          background: #f7f7f7;
          box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
          border: 3px solid #fff;
          max-width: 100%;
     }
}

.module-actions {
     margin-top: 1em;
}

.bloc-toggler {
     text-align: right;
     img {
          opacity: .4;
          &:hover {
               opacity: 1;
          }
     }
     a:focus img {
          opacity: 1;
     }
}

span.module-version:before {
     content: "- ";
}

.toggle-bloc .mod-more {
     display: block;
     margin-left: 0;
}

.module-name input[type="checkbox"] {
     margin-bottom: 0;
}


/**
Les screenshots des thèmes ont deux tailles possibles :
- dans Ajouter des thèmes : 240px (+ 10 padding image + 20 padding boîte + 6 bordure + 2 ombrage = 278)
- dans Thèmes installés : 280px (+ 10 padding-image + 20 padding-boîte + 2 ombrage = 318)
On adapte largeur et hauteur en fonction
*/

#theme-new .box.theme,
#theme-update .box.theme {
     /* Ajouter un thème */
     width: 278px;
     min-height: 275px;
}

#theme-new .module-sshot img {
     /* Pour ceux qui n'ont pas de miniature on contraint l'image */
     max-width: 240px;
     max-height: 210px;
     overflow: hidden;
}

#theme-deactivate .box.theme {
     /* Thèmes désactivés */
     width: 278px;
     &:hover {
          background: transparent url(dc_logos/sq-logo-32.png) no-repeat top right;
     }
}

#theme-activate .box.theme {
     /* Thèmes installés */
     width: 318px;
     min-height: 304px;
     max-width: 100%;
}


/* si js est là, les infos viennent par dessus le screenshot */

.with-js #theme-new {
     .module-infos.toggle-bloc,
     .module-actions.toggle-bloc {
          position: absolute;
          left: 10px;
          width: 239px;
          margin: 0;
          padding: 10px;
          background: rgba(250, 250, 250, .95);
     }
     .module-infos.toggle-bloc {
          top: 128px;
          height: 80px;
          border-top: 1px solid #e3e3e3;
     }
     .module-actions.toggle-bloc {
          top: 208px;
          height: 40px;
          border-bottom: 1px solid #e3e3e3;
     }
}

.with-js .module-sshot:hover {
     cursor: pointer;
}


/* mise en forme pour la boîte du thème courant */

.box.current-theme {
     /* Thème courant */
     width: 646px;
     margin: 5px;
     padding: 20px 18px 6px;
     background: #fff url(texture.png);
     border: 1px solid #eee;
     border-radius: .5em;
     min-height: 326px;
     box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
     position: relative;
     .module-sshot:hover {
          cursor: auto;
     }
     .module-sshot img {
          float: left;
          margin-right: 2em;
          border: 9px solid #fff;
          padding: 5px;
          max-width: 308px;
          max-height: 273px;
     }
     .module-name {
          color: #D33800;
          font-size: 1.5em;
          margin-bottom: 1em;
     }
     .module-actions {
          display: flex;
          flex-wrap: wrap;
     }
}

.current-actions {
     width: auto;
     overflow: hidden;
     padding-top: 2em;
     background: transparent url(../images/minus-theme.png) no-repeat left top;
}