MediaWiki:Common.css: Unterschied zwischen den Versionen
Zur Navigation springen
Zur Suche springen
(384 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt) | |||
Zeile 2: | Zeile 2: | ||
/* Grid "Zentrale Hinhalte" */ | /* Grid "Zentrale Hinhalte" */ | ||
. | .grid { | ||
display: grid; | |||
grid-template-columns: repeat(4, 1fr); | |||
gap: 1em; | |||
} | |||
.grid-itw { | |||
display: grid; | |||
grid-template-columns: repeat(3, 1fr); | |||
gap: 1em; | |||
} | |||
.grid-fd { | |||
display: grid; | |||
grid-template-columns: repeat(2, 1fr); | |||
gap: 1em; | |||
} | |||
.grid-sf { | |||
display: grid; | |||
grid-template-columns: repeat(1, 1fr); | |||
gap: 1em; | |||
} | |||
@media only screen and (min-width: 680px) { | |||
.grid { | |||
grid-template-columns: repeat(2, 1fr); | |||
} | |||
} | |||
@media only screen and (min-width: 980px) { | |||
.grid { | |||
grid-template-columns: repeat(4, 1fr); | |||
} | |||
} | |||
@media only screen and (min-width: 1980px) { | |||
.grid { | |||
grid-template-columns: repeat(8, 1fr); | |||
} | |||
} | |||
@media only screen and (min-width: 1980px) { | |||
.grid-fd { | |||
grid-template-columns: repeat(4, 1fr); | |||
} | |||
} | |||
@media only screen and (min-width: 1980px) { | |||
.grid-itw { | |||
grid-template-columns: repeat(9, 1fr); | |||
} | |||
} | |||
.grid-item { | |||
text-align: justify; | |||
border: 1px solid #aaa !important; | |||
line-height: 1.5; | |||
font-family: inherit; | |||
padding-left: 20px; | |||
padding-right: 20px; | |||
margin: 10px; | |||
padding-bottom: 20px; | |||
} | |||
.SFB { | .SFB { | ||
grid-column-start: 1; | |||
grid-column-end: 4; | |||
grid-row-start: 1; | |||
grid-row-end: 2; | |||
} | |||
.HS-SF { | |||
} | grid-column-start: 4; | ||
grid-column-end: 5; | |||
grid-row-start: 1; | |||
grid-row-end: 3; | |||
} | |||
.HS-FD { | |||
grid-column-start: 1; | |||
grid-column-end: 4; | |||
grid-row-start: 2; | |||
grid-row-end: 4; | |||
} | |||
.item-wrapper { | |||
border: 1px solid #aaa !important; | |||
margin-top: 20px !important; | |||
} | } | ||
. | .item-header { | ||
text-align: left; | |||
font-weight: bold !important; | |||
line-height: 1.5 !important; | |||
font-family: inherit !important; | |||
padding: 0.4em !important; | |||
padding-left: 20px; | |||
padding:10px !important; | |||
} | } | ||
.HS-FD .item-header{ height: auto; | |||
border-top: 5px solid #cecec7; | |||
} | |||
.HS-SF .item-header{ height: auto; | |||
border-top: 5px solid #8991ba; | |||
} .HS-ITW .item-header{ height: auto; | |||
border-top: 5px solid #CFCEC2; | |||
} | |||
.HS-TPs .item-header{ | |||
min-height: 130px; | |||
border-top: 5px solid #2a4b8b; | |||
} | |||
.item-body{ | |||
border-top: 1px solid #aaa !important; | |||
padding: 10px; | |||
} | |||
.item-header a:link { | |||
color: black; | |||
} | |||
.HS-TPs .item-header:hover { | |||
background: #2a4b8b; | |||
} | |||
.HS-SF .item-header:hover { | |||
background: #8991ba; | |||
} | |||
.HS-FD .item-header:hover { | |||
background: #cecec7; | |||
} | |||
.HS-ITW .item-header:hover { | |||
background: #CFCEC2; | |||
} | |||
.item-header:hover a:link { | |||
color: white; | |||
} .item-header:hover span{ | |||
color: white; | |||
} | |||
.item-header a:visited { | |||
color: black; | |||
} | |||
.item-header:hover a:visited { | |||
color: white; | |||
} | |||
.SF { | |||
text-align: justify; | |||
border: 1px solid #aaa !important; | |||
line-height: 1.5; | |||
font-family: inherit; | |||
padding-left: 20px; | |||
padding-right: 20px; | |||
margin: 10px; | |||
padding-bottom: 20px; | |||
border-top: 5px solid #8991ba!important; | |||
} | |||
.ITW{ | |||
text-align: justify; | |||
border: 1px solid #aaa !important; | |||
line-height: 1.5; | |||
font-family: inherit; | |||
padding: 20px; | |||
margin: 10px; | |||
border-top: 5px solid #CFCEC2 !important; | |||
} | |||
/*Teilprojekte Hauptseiten*/ | |||
.TP-HS .TP-content li { | |||
line-height: 1.5; | |||
padding-inline: 10px; | |||
padding: 5px; | |||
} | |||
.TP-HS .TP-Info { | |||
padding:20px; margin-bottom: 30px; | |||
} | |||
.TP-HS .HS-FD .item-body { text-align:center; line-height: 5; font-size: 14px; } | |||
.TP-HS .HS-FD .item { border: 1.5px solid black; margin:5px; } | |||
.TP-HS .HS-FD .item:hover { | |||
background: #2a4b8b; | |||
} | |||
.TP-HS .HS-FD .item a:link { | |||
color: black; | |||
} | |||
.TP-HS .HS-FD .item:hover a:link { | |||
color: white; | |||
} | |||
.TP-HS .HS-FD .item a:visited { | |||
color: black; | |||
} | |||
.TP-HS .HS-FD .item:hover a:visited { | |||
color: white; | |||
} | |||
.TP-HS .HS-FD .tp-item-header a:link{ color:white; } .TP-HS .HS-FD .tp-item-header a:visited{ color:white; } | |||
.TP-HS .HS-FD .tp-item-header { text-align:center; background-color: #cecec7; color: white; padding: 10px; margin-top: 20px; } | |||
.TP-HS .HS-FD .tp-item-header span{ | |||
color: white; | |||
} | |||
.TP-projekt {border-top: 5px solid #2a4b8b;} | |||
/* Layout TP Test Anordnung ohne Grid*/ | |||
.TP-HS * { box-sizing: border-box; } | |||
.TP-HS .TP-toc {height: auto;} | |||
.TP-header { text-align: center; background: white; margin-left: 18%; width: 60%; margin-bottom: 30px;} | |||
.TP-leftcolumn { float: left; width: 75%; } | |||
.TP-rightcolumn { float: left; width: 25%; padding-left: 20px; } | |||
.TP-HS .row:after { content: ""; display: table; clear: both; } | |||
.TP-content { padding: 20px; text-align: left; margin-top: 20px; } | |||
.TP-SF{ margin-bottom: 30px;} | |||
Aktuelle Version vom 18. Juni 2021, 15:08 Uhr
/* Grid "Zentrale Hinhalte" */ .grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1em; } .grid-itw { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1em; } .grid-fd { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1em; } .grid-sf { display: grid; grid-template-columns: repeat(1, 1fr); gap: 1em; } @media only screen and (min-width: 680px) { .grid { grid-template-columns: repeat(2, 1fr); } } @media only screen and (min-width: 980px) { .grid { grid-template-columns: repeat(4, 1fr); } } @media only screen and (min-width: 1980px) { .grid { grid-template-columns: repeat(8, 1fr); } } @media only screen and (min-width: 1980px) { .grid-fd { grid-template-columns: repeat(4, 1fr); } } @media only screen and (min-width: 1980px) { .grid-itw { grid-template-columns: repeat(9, 1fr); } } .grid-item { text-align: justify; border: 1px solid #aaa !important; line-height: 1.5; font-family: inherit; padding-left: 20px; padding-right: 20px; margin: 10px; padding-bottom: 20px; } .SFB { grid-column-start: 1; grid-column-end: 4; grid-row-start: 1; grid-row-end: 2; } .HS-SF { grid-column-start: 4; grid-column-end: 5; grid-row-start: 1; grid-row-end: 3; } .HS-FD { grid-column-start: 1; grid-column-end: 4; grid-row-start: 2; grid-row-end: 4; } .item-wrapper { border: 1px solid #aaa !important; margin-top: 20px !important; } .item-header { text-align: left; font-weight: bold !important; line-height: 1.5 !important; font-family: inherit !important; padding: 0.4em !important; padding-left: 20px; padding:10px !important; } .HS-FD .item-header{ height: auto; border-top: 5px solid #cecec7; } .HS-SF .item-header{ height: auto; border-top: 5px solid #8991ba; } .HS-ITW .item-header{ height: auto; border-top: 5px solid #CFCEC2; } .HS-TPs .item-header{ min-height: 130px; border-top: 5px solid #2a4b8b; } .item-body{ border-top: 1px solid #aaa !important; padding: 10px; } .item-header a:link { color: black; } .HS-TPs .item-header:hover { background: #2a4b8b; } .HS-SF .item-header:hover { background: #8991ba; } .HS-FD .item-header:hover { background: #cecec7; } .HS-ITW .item-header:hover { background: #CFCEC2; } .item-header:hover a:link { color: white; } .item-header:hover span{ color: white; } .item-header a:visited { color: black; } .item-header:hover a:visited { color: white; } .SF { text-align: justify; border: 1px solid #aaa !important; line-height: 1.5; font-family: inherit; padding-left: 20px; padding-right: 20px; margin: 10px; padding-bottom: 20px; border-top: 5px solid #8991ba!important; } .ITW{ text-align: justify; border: 1px solid #aaa !important; line-height: 1.5; font-family: inherit; padding: 20px; margin: 10px; border-top: 5px solid #CFCEC2 !important; } /*Teilprojekte Hauptseiten*/ .TP-HS .TP-content li { line-height: 1.5; padding-inline: 10px; padding: 5px; } .TP-HS .TP-Info { padding:20px; margin-bottom: 30px; } .TP-HS .HS-FD .item-body { text-align:center; line-height: 5; font-size: 14px; } .TP-HS .HS-FD .item { border: 1.5px solid black; margin:5px; } .TP-HS .HS-FD .item:hover { background: #2a4b8b; } .TP-HS .HS-FD .item a:link { color: black; } .TP-HS .HS-FD .item:hover a:link { color: white; } .TP-HS .HS-FD .item a:visited { color: black; } .TP-HS .HS-FD .item:hover a:visited { color: white; } .TP-HS .HS-FD .tp-item-header a:link{ color:white; } .TP-HS .HS-FD .tp-item-header a:visited{ color:white; } .TP-HS .HS-FD .tp-item-header { text-align:center; background-color: #cecec7; color: white; padding: 10px; margin-top: 20px; } .TP-HS .HS-FD .tp-item-header span{ color: white; } .TP-projekt {border-top: 5px solid #2a4b8b;} /* Layout TP Test Anordnung ohne Grid*/ .TP-HS * { box-sizing: border-box; } .TP-HS .TP-toc {height: auto;} .TP-header { text-align: center; background: white; margin-left: 18%; width: 60%; margin-bottom: 30px;} .TP-leftcolumn { float: left; width: 75%; } .TP-rightcolumn { float: left; width: 25%; padding-left: 20px; } .TP-HS .row:after { content: ""; display: table; clear: both; } .TP-content { padding: 20px; text-align: left; margin-top: 20px; } .TP-SF{ margin-bottom: 30px;}