source: admin/style/scss/partials/_layout.scss @ 3412:a07474dc68c1

// Admin layout
#dotclear-admin {
     display: flex;
     min-height: 100vh;
     flex-direction: column;
}

#header {
     width: 99.99%; /* Bugfix Chrome >= 49.0.2623.108 */
     display: table;
     position: relative;
}

h1,
#top-info-blog,
#top-info-user {
     display: table-cell;
     padding: 8px 0;
     margin: 0;
     font-size: 1em;
     vertical-align: top;
}

#wrapper {
     position: relative;
     padding-top: 1.5em;
     float: left;
     width: 100%;
     z-index: 10;
     flex: 1;
}

.with-js #wrapper {
     padding-top: 0;
}

#main {
     width: 100%;
     float: right;
     margin-left: -14em;
     margin-top: 0;
}

#content {
     margin: 0 0 0 14em;
     padding: .5em 1.5em .75em 2.5em;
}

#main-menu {
     width: 14em;
     float: left;
     margin: 0;
     padding-top: .5em;
     padding-bottom: 1em;
     overflow: hidden;
}

#footer {
     clear: both;
     position: relative;
     padding: .5em 0 .5em 1em;
     text-align: left;
}


/* to hide main-menu */

#collapser {
     position: absolute;
     top: 0;
     left: 14em;
     width: $collapser-width;
     height: 100%;
     overflow: hidden;
     display: block;
     border-right: 0; // 1px solid #999;
     border-bottom: 0;
     z-index: 1;
     transition: none;
}

.expand-mm {
     display: none;
}

/* if main-menu is hidden */

.hide-mm #main {
     margin-left: 0;
}

.hide-mm #content {
     margin-left: $collapser-width;
}

.hide-mm #content > h2 {
     margin-left: calc(-1em - #{$collapser-width});
}

.hide-mm #main-menu {
     display: none;
}

.hide-mm #collapser {
     left: 0;
}

.hide-mm .collapse-mm {
     display: none;
}

.hide-mm .expand-mm {
     display: block;
}

/* -------------------------------------------------------------- layout: two-cols */

.two-cols {
     position: static;
}

.two-cols .col {
     width: 48%;
     margin-left: 2%;
     float: left;
}

.two-cols .col70 {
     width: 68%;
     margin-left: 0;
     float: left;
}

.col30 {
     width: 28%;
     margin-left: 2%;
     float: left;
}

.two-cols .col:first-child,
.two-cols .col30.first-col {
     margin-left: 0;
     margin-right: 2%;
}

.two-cols .col:last-child,
.two-cols .col70.last-col {
     margin-left: 2%;
     margin-right: 0;
}

.two-cols table {
     width: 90%;
}


/* -------------------------------------------------------------- layout: three-cols */

.three-cols {
     position: static;
}

.three-cols .col {
     width: 32.3%;
     float: left;
     margin-left: 1%;
}

.three-cols .col:first-child {
     margin-left: 0;
}


/* ------------------------------------------------- layout: optionnal one/two/three-boxes */

.one-box {
     text-align: justify;
}

.two-boxes {
     width: 48.5%;
}

.three-boxes {
     width: 30%;
}

.two-boxes,
.three-boxes {
     display: inline-block;
     vertical-align: top;
     margin: 0 1.5% 1em;
     text-align: left;
}

.two-boxes:nth-of-type(odd),
.three-boxes:nth-of-type(3n+1) {
     margin-left: 0;
}

.two-boxes:nth-of-type(even),
.three-boxes:nth-of-type(3n) {
     margin-right: 0;
}


/* ---------------------------------------------------------------- layout: popups */

.popup h1 {
     display: block;
     width: 100%;
     margin: 0;
     font-size: 1.5em;
     text-indent: 1em;
     line-height: 1.5em;
     font-weight: normal;
}

.popup #wrapper {
     display: block;
     float: none;
     width: 100%;
     margin: 0;
     padding: 0;
     background-position: 0 0;
}

.popup #main {
     margin: 0;
     padding: 0;
}

.popup #content {
     margin: 0;
     padding: 1em;
}

.popup #content h2 {
     margin: 0 0 1em 0;
     padding: 0;
}

.popup #footer p {
     border: none;
}


/* -------------------------------------------------------- layout: classes de complément */

.constrained {
     margin: 0;
     padding: 0;
     border: none;
     background: transparent;
}

.table {
     display: table;
}

.cell {
     display: table-cell;
     vertical-align: top;
}

.clear {
     clear: both;
}

.lclear {
     clear: left;
}

.clearer {
     height: 1px;
     font-size: 1px;
}


/* Micro clearfix thx to Nicolas Gallagher */

.clearfix:before,
.clearfix:after {
     content: " ";
     display: table;
}

.clearfix:after {
     clear: both;
}

/*
.frame-shrink {
     border: 1px solid #676e78;
     padding: 0.5em;
     margin-bottom: 1em;
     height: 120px;
     overflow: auto;
     }
 */

.box {
     display: inline-block;
     vertical-align: top;
     margin: 0 10px 10px;
     text-align: left;
     flex: 1 1 auto;
}

.box.small {
//    width: 312px;
     flex-basis: 312px;
}

.box.medium {
//    width: 644px;
     flex-basis: 644px;
}

.box.large {
     width: 100%;
}

.odd {
     margin-left: 0;
}

.even {
     margin-right: 0;
}

/* ------------------------------------------------------------------------------------
                                                                           UN POIL DE MEDIA QUERIES
------------------------------------------------------------------------------------ */

@media screen and (max-width: $xl-screen) {
     #main {
          margin-left: -17em;
     }
     #content {
          margin: 0 0 0 17em;
     }
     #main-menu {
          width: 17em;
     }
     #collapser {
          left: 17em;
     }
     h1 {
          width: 19.5em;
     }
     #top-info-blog #switchblog {
          max-width: 16em;
     }
     #top-info-blog a {
          margin-left: 2em;
     }
     #header {
          display: block;
          width: 100%;
          text-align: right;
     }
     #header h1,
     #header h1 a {
          width: 120px;
          margin: 0;
     }
     h1,
     #top-info-blog {
          display: inline-block;
          vertical-align: top;
          margin-right: 1em;
     }
     #top-info-user {
          display: block;
          width: 100%;
     }
     .three-boxes,
     .three-boxes .box,
     .two-cols .col70,
     .two-cols .col30 {
          width: 100%;
          margin-left: 0;
          margin-right: 0;
     }
}

@media screen and (max-width: $m-screen) {
     #dashboard-boxes .box.medium,
     .box.medium,
     #dashboard-boxes .box.small,
     .box.small,
     #dashboard-boxes .box.large,
     .box.large {
          width: 95%;
          margin: 10px auto;
     }
}

@media screen and (max-width: $s-screen) {
     #help-button {
          height: 26px;
          width: 26px;
          margin: 0;
          overflow: hidden;
     }
     #content.with-help #help-button {
          top: 10em; // 77px;
     }
     .one-box,
     .two-boxes,
     .box,
     .two-cols .col {
          width: 96%;
          margin-left: 0;
          margin-right: 0;
     }
     #entry-wrapper {
          float: none;
          width: 100%;
          margin-right: 0;
     }
     #entry-content {
          margin-right: 0;
          margin-left: 0;
     }
     #entry-sidebar {
          width: 100%;
          float: none;
     }
}

@media screen and (max-width: $xs-screen) {
     #header h1,
     #header h1 a {
          width: 42px !important;
          height: 42px;
     }
     #wrapper,
     #main,
     #main-menu {
          display: block;
          float: none;
          width: 100%;
          margin: 0;
     }
     #main-menu a {
          display: block;
          width: 100%;
     }
     #main-menu h3 a {
          display: inline;
     }
     #content,
     .hide-mm #content {
          margin: 0;
     }
     #collapser {
          display: none;
     }
     #main #content > h2 {
          margin: 0 -.25em 1em;
     }
     #dashboard-boxes .box.medium,
     .box.medium,
     #dashboard-boxes .box.small,
     .box.small,
     #dashboard-boxes .box.large,
     .box.large {
          width: 95%;
          margin: 10px auto;
     }
     .cell,
     #filters-form .cell {
          display: inline-block;
          vertical-align: bottom;
     }
     .pseudo-tabs li {
          display: block;
          float: left;
          width: 50%;
     }
}

@media screen and (max-width: $xxs-screen) {
     #top-info-blog label,
     .nomobile {
          display: none;
     }
     #top-info-blog {
          margin-bottom: .5em;
          max-width: 75%;
     }
     #top-info-blog select {
          margin-bottom: .5em;
     }
     #content.with-help #help-button {
          top: 10em; // 120px;
          right: 28rem; // 20.5em;
     }
     #content.with-help #help {
          width: 28rem;
     }
     p.top-add {
          margin-bottom: .5em;
     }
     .part-tabs ul {
          margin: 1em 0;
     }
     .part-tabs li a {
          display: block;
          width: 100%;
     }
     #icons p {
          width: 9em;
     }
     .media-item {
          width: 90%;
     }
     #theme-new,
     #theme-activate,
     #theme-deactivate {
          margin-left: 0;
          margin-right: 0;
     }
     .box.current-theme {
          margin: 5px;
          width: 100%;
     }
     .current-theme .module-sshot img {
          margin: 0;
          float: none;
          max-width: 100%;
     }
     table .maximal {
          min-width: 14em;
     }
     .pseudo-tabs li {
          display: block;
          width: 100%;
          float: none;
     }
}