Vorlage:Styles-max576.css

Aus Securepoint Wiki
Version vom 20. August 2019, 13:36 Uhr von Lauritzl (Diskussion | Beiträge) (Die Seite wurde neu angelegt: „ ** Formatierung Breakpoint sm **: @media (max-width: 576px) { .einrücken { margin-left: 0px; } .border-bottom-xs td:nth-child(even) { border-top: 0…“)
(Unterschied) ← Nächstältere Version | Aktuelle Version (Unterschied) | Nächstjüngere Version → (Unterschied)
Wechseln zu:Navigation, Suche

/*** Formatierung Breakpoint sm ***/ @media (max-width: 576px) {


.einrücken {

 margin-left: 0px;

}

.border-bottom-xs td:nth-child(even) {

 border-top: 0!important;
 border-right: 0!important;  
 border-bottom: 1px solid #a2a9b1!important;
 border-left: 0!important;
 }

.border-bottom-xs td:nth-child(odd) {

 border: 0!important;
 }

.noborder {

 border: 0!important;
 background: 0!important;

/*border: 1px solid red; background: blue;*/

 }


.wikitable2 > tbody > tr > td {

 display: block;
 text-align:right;
 padding-left: 25px;
 vertical-align: top;
 border-left: 2px solid #a2a9b1; /* Rand links zeichnen */
 border-right: 2px solid #a2a9b1; /* Rand rechts zeichnen */
 border-top: 1px solid #a2a9b1; /* Rand oben dünn zeichnen */
 border-bottom: 1px solid #eaecf0; /* Rand unten durch Hintergrundfarbe ausblenden */
 }

.wikitable2 > tbody > tr > td:nth-child(1) {

 display: block;
 text-align: left;
 padding-left: 1px;
 vertical-align: top; 
 font-weight: bolder;
 margin-top: 5px;
 border-top: 2px solid #a2a9b1; /* Rand oben zeichnen */
 border-left: 2px solid #a2a9b1; /* Rand links zeichnen */
 border-right: 2px solid #a2a9b1; /* Rand rechts zeichnen */
 border-bottom: 1px solid #eaecf0; /* Rand unten durch Hintergrundfarbe ausblenden */
 color: #555555;
 }

.wikitable2 > tbody > tr > td:last-child {

 display: block;
 text-align:right;
 padding-left: 25px;
 vertical-align: top;
 border: 2px solid #a2a9b1; /* Rand unten, rechts und links zeichnen */
 border-top: 1px solid #a2a9b1; /* Rand oben dünn zeichnen */
 }


.wikitable2 > * > tr > th {

 display: block;
 text-align:right;
 padding-left: 1px; 
 padding-right: 1.4em;
 border: 2px solid #a2a9b1; /* Rand rechts und links zeichnen */
 border-top: 1px solid #a2a9b1; /* Rand oben dünn zeichnen */
 border-bottom: 1px solid #eaecf0; /* Rand unten durch Hintergrundfarbe ausblenden */
 }

.wikitable2 > * > tr > th:first-child {

 margin-top: 5px;
 }

.wikitable2 > * > tr > th:last-child {

 display: block;

/* text-align:right; */

 padding-left: 1px; 
 border-bottom: 2px solid #a2a9b1!important; /* Rand unten zeichnen */

/* border-left: 2px solid #a2a9b1; Rand links zeichnen */ /* border-right: 2px solid #a2a9b1; Rand rechts zeichnen */ /* border-top: 1px solid #a2a9b1; Rand oben dünn zeichnen */

 }

.wikitable2 > * > tr > th:nth-child(1) {

 text-align:left; 
 padding-left: 1px; 
 display: block;
 border-top: 2px solid #a2a9b1; /* Rand oben zeichnen */

/* border-bottom: 1px solid #eaecf0; Rand unten durch Hintergrundfarbe ausblenden */

 }

.wikitable2 .Leerzeile {

 border: solid 1px white!important;
 background: white!important;
 text-align:left!important;
 padding-left: 0px!important;
 vertical-align: bottom!important;
 font-weight: normal;
 color: black;
 }

/****/ .wikitable3 > * > tr > th {

 float: left;
 width: 33.3%;
 padding-left: 1px; 
 padding-right: 0.4em;
 } 

.wikitable3 > * > tr > th:nth-child(1) {

 display: block;
 width:100%;
 text-align: left;
 padding-left: 1px; 
 padding-right: 0.4em;
 border: 2px solid #a2a9b1; /* Rand rechts und links zeichnen */
 border-top: 2px solid #a2a9b1; /* Rand oben dünn zeichnen */
 border-bottom: 0; /* Rand unten ausblenden */
 } 


.wikitable3 > * > tr > th:nth-child(2) {

 border-top: 1px solid #a2a9b1; /* Rand oben dünn zeichnen */
 border-right: 1px solid #a2a9b1; /* Rand rechts dünn zeichnen */
 border-bottom: 2px solid #a2a9b1; /* Rand unten dick zeichnen */
 border-left: 2px solid #a2a9b1; /* Rand links dick zeichnen */
 }

.wikitable3 > * > tr > th:nth-child(3) {

 border-top: 1px solid #a2a9b1; /* Rand oben dünn zeichnen */
 border-right: 0; /* Rand rechts ausblenden */
 border-bottom: 2px solid #a2a9b1; /* Rand unten dick zeichnen */
 border-left: 0; /* Rand links ausblenden */
 }

.wikitable3 > * > tr > th:nth-child(4) {

 border-top: 1px solid #a2a9b1; /* Rand oben dünn zeichnen */
 border-right: 2px solid #a2a9b1; /* Rand rechts dick zeichnen */
 border-bottom: 2px solid #a2a9b1; /* Rand unten dick zeichnen */
 border-left: 1px solid #a2a9b1; /* Rand links dünn zeichnen */
 }

.wikitable3 > tbody > tr > td {

 float: left;
 text-align:left;
 padding-left: 2px;
 vertical-align: top;
 width: 33.3%;
 border-top: 1px solid #a2a9b1; /* Rand oben dünn zeichnen */
 border-right: 1px solid #a2a9b1; /* Rand rechts zeichnen */
 border-bottom: 1px solid #a2a9b1; /* Rand unten dünn zeichnen */
 border-left: 1px solid #a2a9b1; /* Rand links zeichnen */
 margin: -1px 0px;
 }

.wikitable3 > tbody > tr > td:nth-child(2) {

 /*border-right: 0;*/
 }

.wikitable3 > tbody > tr > td:last-child {

 border-left: 1px solid #a2a9b1; /* Rand rechts zeichnen */
 border-right: 1px solid #a2a9b1; /* Rand rechts zeichnen */
 }

.wikitable3 > tbody > tr > td:nth-child(1) {

 width: 100%;
 text-align: left;
 padding-left: 1px;
 vertical-align: top; 
 margin-top: 5px;
 border-top: 1px solid #a2a9b1; /* Rand oben zeichnen */
 border-left: 1px solid #a2a9b1; /* Rand links zeichnen */
 border-right: 1px solid #a2a9b1; /* Rand rechts zeichnen */
 border-bottom: 1px solid #a2a9b1; /* Rand unten zeichnen */
 }

.wikitable3 > tbody > tr > td.no1cell {

 float: left;
 text-align:left;
 padding-left: 2px;
 vertical-align: top;
 width: 33.3%;
 border-right: 0;
 margin: -1px 0px;
 }


.thumbinner {

 margin-bottom: 10px;
 }

.pt2 {

 float: left;
 margin-bottom :10px;
 max-width:100%;
 }

.sptable > * > tr > th {

 float: left;
 width: 100%;
 padding-left: 1px; 
 padding-right: 0.4em;
 } 

.sptable {

 border-collapse: separate;
 border-spacing: 0.3em;
 }

.sptable > * > tr > th:nth-child(1) {

 display: block;
 width:100%;
 text-align: left;
 padding-left: 1px; 
 padding-right: 0.4em;
 } 

.sptable > tbody > tr > td {

 display: block;
 width:100%;
 text-align: right;
 padding-left: 1px;
 vertical-align: top;
 }


.sptable > tbody > tr > td:first-child {

 display: block;
 width: 100%;
 text-align: left;
 padding-left: 1px;
 vertical-align: top; 

}

.sptable.striped > tbody > tr > td:first-child, sptable3.striped > tbody > tr > td:first-child {

 background-color: #eaecf0;
 }

.sptable > * > tr > th, .sptable > tbody > tr > td { border-top: 1px solid #a2a9b1; /* Rand oben dünn zeichnen */ /* border-right: 0; Rand rechts ausblenden */ border-bottom: 2px solid #a2a9b1; /* Rand unten dick zeichnen */ border-left: 1px solid #a2a9b1; /* Rand links dünn zeichnen */ }

.sptable > * > tr > th:first-child, .sptable > tbody > tr > td:first-child { border-top: 2px solid #a2a9b1; border-right: 2px solid #a2a9b1; border-bottom: 0; /* Rand unten ausblenden */ border-left: 2px solid #a2a9b1; /* Rand links dick zeichnen */ }

.sptable > * > tr > th:nth-child(2), .sptable > tbody > tr > td:nth-child(2) { border-left: 2px solid #a2a9b1; /* Rand links dick zeichnen */ }

.sptable > * > tr > th:last-child, .sptable > tbody > tr > td:last-child { border-right: 2px solid #a2a9b1; } .border-top-mobil td:first-child { border-top: 2px solid grey!important; }

.sptable .Leerzeile {

 border-left: 0!important; 
 border-right: 0!important; 
 border-top: 0!important;
 background: white!important;
 }

.spgridtr tr > td.bild { grid-column: 1/5; grid-row: 1; background: white; border: 0; padding-top: 10px; padding-bottom: 0px; }


.sptable3 {

   background-color:white;
   color: #222;
   margin: 0em 0;
   border: 0;

width: 100%;

   }

.sptable3 td {

   background-color: #f8f9fa;
   border: 1px solid #a2a9b1;
   padding: 0.2em 0.1em;
   line-height:1.4;
   }

.sptable3 > * > tr > th {

 display: block;
 width:100%;
 text-align: left;
 padding-left: 1px; 
 padding-right: 0.4em;
 } 

.sptable3 > * > tr > th:nth-child(2) {

 float: left;
 padding-left: 1px; 
 padding-right: 0.4em;
   background-color: #eaecf0;
   border: 1px solid #a2a9b1;
   padding: 0.2em 0.1em;
   line-height:1.4;
   width: 50%;
 } 

.sptable3 > * > tr > th:nth-child(3) {

 float: left;
 padding-left: 1px; 
 padding-right: 0.4em;
   background-color: #eaecf0;
   border: 1px solid #a2a9b1;
   padding: 0.2em 0.1em;
   line-height:1.4;
   width: 50%;
 } 


.sptable3 {

 border-collapse: separate;
 border-spacing: 0.3em;
 }


.sptable3 > * > tr > th:nth-child(2) {

 text-align:left;

}

.sptable3 .Leerzeile {

 border-left: 0; 
 border-right: 0; 
 background: white;
 }


.sptable3 tbody > tr:first-child { display: table-row; width: 100%; }

.sptable3 td:nth-child(1) { grid-column: 1 / 3; grid-row: 2; background-color: #eaecf0; border: 1px solid #a2a9b1; margin-top: 5px; text-align: left; }

.sptable3 tr > td:nth-child(2) { grid-column: 1; grid-row: 3; background-color: #f8f9fa; border: 1px solid #a2a9b1; text-align: center; vertical-align: middle; }

.sptable3 tr > td:nth-child(3) { grid-column: 2; grid-row: 3; background-color: #f8f9fa; border: 1px solid #a2a9b1; }

.sptable3 tr > td:nth-child(4) { grid-column: 1/3; grid-row: 4; background-color: #f8f9fa; border: 1px solid #a2a9b1; }

.sptable3 tr > td:nth-child(5) { grid-column: 1/3; grid-row: 5; background-color: #f8f9fa; border: 1px solid #a2a9b1; }

.sptable3 tr > td:nth-child(6) { grid-column: 1/3; grid-row: 6; background-color: #f8f9fa; border: 1px solid #a2a9b1; }

.sptable3 tr > td.bild { grid-column: 1/5; grid-row: 1; background: white; border: 0; padding-top: 10px; padding-bottom: 0px; width:100%; }


.bild2 {

 display: ruby;
 }


} /*** Ende Formatierung Breakpoint sm ***/