Vorlage:Portal/Layout.css

/* -----------------------------------------------------------------------------

                  Layout styles for BlueSpice

            

---

*/

/* -----------------------------------------------------------------------------

  Common styles

---

*/

/* Items */ .bs-vspace { margin-top: 10px;

                   margin-bottom: 10px;

            

} layout-cell.bs-layout-cell-item .bs-layout-cell-title{ font-size: 16px; font-weight: bold; display: block; padding-bottom: 15px; } .bs-layout-cell.bs-layout-cell-item.bs-layout-cell-head .bs-layout-cell-title { font-size: 22px; padding-bottom: 15px; display: block; } .bs-layout-cell.bs-layout-cell-content { } .bs-layout-cell.bs-layout-cell-item.bs-layout-cell-head .bs-layout-cell-content { padding: 25px; }

/* container */ .bs-layout-container { width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; } .bs-layout-container.bs-layout-space-between { justify-content: space-between; } .bs-layout-container.bs-layout-space-around { justify-content: space-around; } .bs-layout-container.bs-layout-space-auto { justify-content: space-between; } .bs-layout-container.bs-layout-space-start { justify-content: flex-start; } .bs-layout-container.bs-layout-space-end { justify-content: flex-end; }

/* cell */ .bs-layout-cell { padding: 10px; margin-bottom: 10px; overflow: hidden; text-overflow: ellipsis; }

.bs-layout-cell a.image img { max-width: 100%; height: auto; }

.bs-layout-cell.bs-layout-cell-image { padding: 0px; }

.bs-layout-cell.bs-layout-cell-image a > img { max-width: 100%; height: auto; }

/* -----------------------------------------------------------------------------

  Desktop only styles

---

*/

@media all and ( min-width: 1001px ) { .bs-layout-container.bs-space-auto { justify-content: space-between; } } /* -----------------------------------------------------------------------------

  Desktop and tablet styles

---

*/

@media all and ( min-width: 721px ) { .bs-layout-cell { width: 100%; min-height: 100%; }

.bs-layout-container.bs-contain-col-2 > .bs-layout-cell { width: 49%; } .bs-layout-container.bs-contain-col-2 .bs-layout-cell:nth-child( odd ) { margin-left: 0; margin-right: 1%; } .bs-layout-container.bs-contain-col-2 .bs-layout-cell:nth-child( even ) { margin-left: 1%; margin-right: 0; } .bs-layout-container.bs-contain-col-3 3 > .bs-layout-cell { width: 32%; } .bs-layout-container.bs-contain-col-3.bs-layout-cell:nth-child( 3n+1 ) { margin-left: 0; margin-right: 1%; } .bs-layout-container.bs-contain-col-3 .bs-layout-cell:nth-child( 3n+2 ) { margin-left: 0.5%; margin-right: 0.5%; } .bs-layout-container.bs-contain-col-3 .bs-layout-cell:nth-child( 3n ) { margin-left: 1%; margin-right: 0; } .bs-layout-container.bs-contain-col-3.colspan-2-left > .bs-layout-cell:nth-child( odd ) { width: 65%; margin-left: 0; margin-right: 1%; 66%; } .bs-layout-container.bs-contain-col-3.colspan-2-left .bs-layout-cell:nth-child( even ) { width: 32%; margin-left: 1%; margin-right: 0; } right > .bs-layout-container.bs-contain-col-3.colspan-2-right .bs-layout-cell:nth-child( odd ) { width: 32%; margin-left: 0; margin-right: 1%; } .bs-layout-container.bs-contain-col-3.colspan-2-right .bs-layout-cell:nth-child( even ) { width: 65%; margin-left: 1%; margin-right: 0; } 66%; } .bs-layout-container.bs-contain-col-4 > .bs-layout-cell { width: 23%; } .bs-layout-container.bs-contain-col-4 .bs-layout-cell:nth-child( 4n+1 ) { margin-left: 0; margin-right: 1%; 23.25%; } .bs-layout-container.bs-contain-col-4.bs-layout-cell:nth-child( 4n+2 ), .bs-layout-container.bs-contain-col-4 .bs-layout-cell:nth-child( 4n+3 ){ margin-left: 0.5%; margin-right: 0.5%; } .bs-layout-container.bs-contain-col-4 .bs-layout-cell:nth-child( 4n ) { margin-left: 1%; margin-right: 0; } .bs-layout-container.bs-contain-col-4.colspan-2-left > .bs-layout-cell:nth-child( 3n+1 ) { width: 45%; margin-left: 0; margin-right: 1%; } .bs-layout-container.bs-contain-col-4.colspan-2-left .bs-layout-cell:nth-child( 3n+2 ), .bs-layout-container.bs-contain-col-4.colspan-2-left .bs-layout-cell:nth-child( 3n ){ margin-left: 1%; } 48.5%; } .bs-layout-container.bs-contain-col-4.colspan-2-center > .bs-layout-cell:nth-child( 3n+1 ) { margin-right: 1%; } .bs-layout-container.bs-contain-col-4.colspan-2 -center .bs-layout-cell:nth-child( 3n+2 ) { width: 45%; margin-right: 0; } .bs-layout-container.bs-contain-col-4.colspan-2-center .bs-layout-cell:nth-child( 3n ){ margin-left: 0; margin-right: 1%; } 48.5%; } .bs-layout-container.bs-contain-col-4.colspan-2-right > .bs-layout-cell:nth-child( 3n +1 ), .bs-layout-container.bs-contain-col-4.colspan-2-right .bs-layout-cell:nth-child( 3n+2 ) { margin-right: 1%; } .bs-layout-container.bs-contain-col-4.colspan-2-right .bs-layout-cell:nth-child( 3n ){ width: 45%; margin-left: 1%; margin-right: 0; } { width: 48.5%; } .bs-layout-container.bs-contain-col-4.colspan-3-left > .bs-layout-cell:nth-child( odd ) { width: 73.75%; margin-left: 0; margin-right: 1%; } .bs-layout-container.bs-contain-col-4.colspan-3-left right > .bs-layout-cell:nth-child( even ) { margin-left: 1%; margin-right: 0; } width: 73.75%; } .bs-layout-container.bs-contain-col-4.colspan-3-right .5 > .bs-layout-cell :nth-child( odd ) { margin-left: 0; margin-right: 1%; { width: 18.4%; } .bs-layout-container.bs-contain-col-4.colspan-3-right .6 > .bs-layout-cell :nth-child( even ) { width: 75%; margin-left: 1%; margin-right: 0; 15%; } } /* -----------------------------------------------------------------------------

  Tablet only styles

---

*/

@media all and ( min-width: 721px ) and ( max-width: 1000px ) { .bs-layout-container.bs-space-auto { justify-content: space-evenly; } } /* -----------------------------------------------------------------------------

  Mobile only styles

---

*/

@media all and ( max-width: 720px ) { .bs-layout-container.bs-space-auto { justify-content: space-evenly; }

.bs-layout-container .bs-layout-cell { min-width: 100%; min-height: 100% !important; } }