source: admin/style/scss/partials/_blog_theme.scss @ 3355:5619cd4c8c5d

/* 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;
}

.box.theme:hover {
    background: #ecf0f1 url(texture.png);
}

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

.module-sshot {
    text-align: center;
}

.module-sshot 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;
}

.bloc-toggler img {
    opacity: .4;
}

.bloc-toggler img:hover {
    opacity: 1;
}

.bloc-toggler a:focus img {
    opacity: 1;
}

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

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

.box.theme input {
    margin-bottom: 1em;
}

.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;
}

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

#theme-deactivate .box.theme:hover {
    background: transparent url(dc_logos/sq-logo-32.png) no-repeat top right;
}


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

.with-js #theme-new .module-infos.toggle-bloc,
.with-js #theme-new .module-actions.toggle-bloc {
    position: absolute;
    left: 10px;
    width: 239px;
    margin: 0;
    padding: 10px;
    background: rgba(250, 250, 250, .95);
}

.with-js #theme-new .module-infos.toggle-bloc {
    top: 128px;
    height: 80px;
    border-top: 1px solid #e3e3e3;
}

.with-js #theme-new .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;
}

.current-theme .module-sshot:hover {
    cursor: auto;
}

.current-theme .module-sshot img {
    float: left;
    margin-right: 2em;
    border: 9px solid #fff;
    padding: 5px;
    max-width: 308px;
    max-height: 273px;
}

.current-theme .module-name {
    color: #D33800;
    font-size: 1.5em;
    margin-bottom: 1em;
}

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

.current-theme .actions-buttons {
    position: absolute;
    bottom: 0;
    right: 18px;
}