MediaWiki: Common.css: Unterschied zwischen den Versionen
Aus Zweidat
Zpd (Diskussion | Beiträge) Keine Bearbeitungszusammenfassung |
Zpd (Diskussion | Beiträge) Keine Bearbeitungszusammenfassung |
||
| Zeile 3: | Zeile 3: | ||
/* fix google maps little man in responsive skin */ | /* fix google maps little man in responsive skin */ | ||
.gm-style img { | .gm-style img { | ||
max-width: none; | |||
} | } | ||
/*Tabellen*/ | /*Tabellen*/ | ||
table.wikitable { | table.wikitable { | ||
background-color: #ffffff; | |||
width: 100%; | |||
} | } | ||
table.wikitable > tr > th, table.wikitable > * > tr > th{ | |||
table.wikitable>tr>th, | |||
table.wikitable>*>tr>th { | |||
background-color: #E6960A; | |||
border-color: #000000; | |||
max-width: 40%; | |||
} | } | ||
/*Überschrift-Farben*/ | /*Überschrift-Farben*/ | ||
h1 { | h1 { | ||
color: #E6960A; | |||
} | } | ||
/*Überschrift-Größe*/ | /*Überschrift-Größe*/ | ||
h1 span[dir=auto] { | h1 span[dir=auto] { | ||
font-weight: 400; | |||
} | } | ||
/*Eigenschaften-Timeline*/ | /*Eigenschaften-Timeline*/ | ||
.timeline-event-bubble-body { | .timeline-event-bubble-body { | ||
font-size: 90%; | |||
} | |||
.timeline-event-bubble-time { | |||
color: #aaa; | |||
visibility: hidden; | |||
} | } | ||
td, | |||
th { | |||
vertical-align: top; | |||
} | } | ||
.links.sidebar { | .links.sidebar { | ||
display: block; | |||
width: 120px; | |||
float: right; | |||
margin-left: 10px; | |||
font-size: 80%; | |||
} | } | ||
/*************************tabs**********************/ | /*************************tabs**********************/ | ||
#headertabs.round .ui-corner-top { | #headertabs.round .ui-corner-top { | ||
-moz-border-radius-topleft: 3px; | -moz-border-radius-topleft: 3px; | ||
-webkit-border-top-left-radius: 3px; | -webkit-border-top-left-radius: 3px; | ||
-moz-border-radius-topright: 3px; | -moz-border-radius-topright: 3px; | ||
-webkit-border-top-right-radius: 3px; | -webkit-border-top-right-radius: 3px; | ||
border-top-left-radius: 3px 3px; | border-top-left-radius: 3px 3px; | ||
border-top-right-radius: 3px 3px; | border-top-right-radius: 3px 3px; | ||
} | } | ||
#headertabs.round .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { | #headertabs.round .ui-state-default, | ||
border: 1px solid #DDD; | .ui-widget-content .ui-state-default, | ||
font-weight: normal; | .ui-widget-header .ui-state-default { | ||
color: #2779AA; | border: 1px solid #DDD; | ||
font-weight: normal; | |||
color: #2779AA; | |||
} | } | ||
/****TWEEKI-Anpassungen**************/ | /****TWEEKI-Anpassungen**************/ | ||
/* Ausblenden roter Links im Tweeki-Skin (genauer: subpages-tweeki) */ | /* Ausblenden roter Links im Tweeki-Skin (genauer: subpages-tweeki) */ | ||
.subpages-tweeki a.new { | .subpages-tweeki a.new { | ||
display: none | |||
} | } | ||
/*Je nach Bildbreite wird das Subnav oder die linke Sidebar verwendet*/ | /*Je nach Bildbreite wird das Subnav oder die linke Sidebar verwendet*/ | ||
/*Dazu wird die Breite des Inhalts eingeblendet*/ | /*Dazu wird die Breite des Inhalts eingeblendet*/ | ||
@media (min-width: | @media (min-width: 1000px) { | ||
/*.nav-pills{ | |||
display:none; | display:none; | ||
}*/ | }*/ | ||
#navbar>ul>li:nth-of-type(3){ | #navbar>ul>li:nth-of-type(3) { | ||
display: none; | |||
} | } | ||
.footer-sticky { | |||
display: none; | |||
} | |||
} | } | ||
@media (max-width: | @media (max-width: 1000px) { | ||
#sidebar-left { | |||
display: none; | |||
} | |||
.footer-sticky { | |||
display: block; | |||
} | |||
} | } | ||
@media (max-width: | @media (max-width: 1000px) and (min-width: 768px) { | ||
.navbar-form .form-control { | .navbar-form .form-control { | ||
width:180px; | width: 180px; | ||
} | } | ||
.nav>li>a { | .nav>li>a { | ||
padding-left: 10px; | |||
padding-right: 10px; | |||
font-size: 80%; | |||
} | } | ||
} | } | ||
.btn { | .btn { | ||
font-size:12px; | font-size: 12px; | ||
} | } | ||
.btn-primary { | .btn-primary { | ||
background-image: none; | |||
box-shadow: none; | |||
text-shadow: none; | |||
} | } | ||
#sidebar-left{ | #sidebar-left { | ||
width:20%; | width: 20%; | ||
} | } | ||
| Zeile 135: | Zeile 147: | ||
#sidebar-left .btn-primary:hover { | #sidebar-left .btn-primary:hover { | ||
-webkit-box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.5); | -webkit-box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.5); | ||
-moz-box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.5); | -moz-box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.5); | ||
box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.5); | box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.5); | ||
} | } | ||
| Zeile 153: | Zeile 165: | ||
#sidebar-left div:first-of-type .btn-primary | #sidebar-left div:first-of-type .btn-primary | ||
/*.nav-pills li:first-of-type a */{ | |||
/*.nav-pills li:first-of-type a */ | |||
{ | |||
background-color: #0A0A78 !important; | |||
border-color: #0A0A78 !important; | |||
color: #FFFFFF !important; | |||
padding: 15px; | |||
} | } | ||
#sidebar-left div:nth-of-type(2) .btn-primary, #sidebar-left div:nth-of-type(3) .btn-primary | #sidebar-left div:nth-of-type(2) .btn-primary, | ||
/*.nav-pills li:nth-of-type(2) a, .nav-pills li:nth-of-type(3) a*/ { | #sidebar-left div:nth-of-type(3) .btn-primary | ||
/*.nav-pills li:nth-of-type(2) a, .nav-pills li:nth-of-type(3) a*/ | |||
{ | |||
background-color: #64A0C8 !important; | |||
border-color: #64A0C8 !important; | |||
color: #FFFFFF !important; | |||
padding: 15px; | |||
} | } | ||
#sidebar-left div:nth-of-type(3) { | #sidebar-left div:nth-of-type(3) { | ||
margin-bottom: 10px | |||
} | } | ||
/*.nav-pills li:nth-of-type(4)*/ { | /*.nav-pills li:nth-of-type(4)*/ | ||
{ | |||
margin-left: 0px; | |||
} | } | ||
#sidebar-left div:nth-of-type(4) .btn-primary | #sidebar-left div:nth-of-type(4) .btn-primary | ||
/*.nav-pills li:nth-of-type(4) a */{ | |||
/*.nav-pills li:nth-of-type(4) a */ | |||
{ | |||
background-color: #646464 !important; | |||
border-color: #646464 !important; | |||
color: #FFFFFF !important; | |||
} | } | ||
#sidebar-left div:nth-of-type(5) .btn-primary, #sidebar-left div:nth-of-type(6) .btn-primary | #sidebar-left div:nth-of-type(5) .btn-primary, | ||
/*.nav-pills li:nth-of-type(5) a, .nav-pills li:nth-of-type(6) a */{ | #sidebar-left div:nth-of-type(6) .btn-primary | ||
/*.nav-pills li:nth-of-type(5) a, .nav-pills li:nth-of-type(6) a */ | |||
{ | |||
background-color: #DCDCDC !important; | |||
border-color: #DCDCDC !important; | |||
color: #222222 !important; | |||
} | } | ||
#sidebar-left div:nth-of-type(7){ | #sidebar-left div:nth-of-type(7) { | ||
margin-top: 20px; | |||
} | } | ||
#sidebar-left div:nth-of-type(7) .btn-primary{ | |||
#sidebar-left div:nth-of-type(7) .btn-primary { | |||
display: none; | |||
} | } | ||
.tab-content{ | .tab-content { | ||
padding-left: 10px; | |||
/* | /* | ||
border-left-width: 1px; | border-left-width: 1px; | ||
border-left-style: solid; | border-left-style: solid; | ||
| Zeile 209: | Zeile 233: | ||
/*Footer*/ | /*Footer*/ | ||
#footer { | #footer { | ||
background: none | |||
} | } | ||
| Zeile 228: | Zeile 252: | ||
/*Schriftskalierung*/ | /*Schriftskalierung*/ | ||
@media (min-width: 1000px) { | @media (min-width: 1000px) { | ||
.mw-body, | |||
.btn, | |||
.btn-group { | |||
font-size: 100%; | |||
} | |||
.mw-body h2, | |||
.mw-body .h2, | |||
.mw-body h1, | |||
.mw-body h1 { | |||
font-size: 28px; | |||
} | |||
.mw-body h2, | |||
.mw-body .h2 { | |||
margin-bottom: 10px; | |||
margin-top: 20px; | |||
} | |||
.mw-body h3, | |||
.mw-body .h3 { | |||
font-size: 24px; | |||
margin-bottom: 5px; | |||
margin-top: 10px; | |||
} | |||
} | } | ||
@media (min-width: 800px) and (max-width: 1000px) { | @media (min-width: 800px) and (max-width: 1000px) { | ||
.mw-body, | |||
.btn, | |||
.btn-group { | |||
font-size: 90% | |||
} | |||
.mw-body h2, | |||
.mw-body .h2, | |||
.mw-body h1, | |||
.mw-body .h1 { | |||
font-size: 24px; | |||
} | |||
mw-body h2, | |||
.mw-body .h2 { | |||
margin-bottom: 8px; | |||
margin-top: 16px; | |||
} | |||
.mw-body h3, | |||
.mw-body .h3 { | |||
font-size: 20px; | |||
margin-bottom: 4px; | |||
margin-top: 8px; | |||
} | |||
} | } | ||
@media (min-width: 600px) and (max-width: 800px) { | @media (min-width: 600px) and (max-width: 800px) { | ||
.mw-body, | |||
.btn, | |||
.btn-group { | |||
font-size: 80%; | |||
} | |||
.mw-body h2, | |||
.mw-body .h2, | |||
.mw-body h1, | |||
.mw-body .h1 { | |||
font-size: 20px; | |||
} | |||
mw-body h2, | |||
.mw-body .h2 { | |||
margin-bottom: 6px; | |||
margin-top: 12px; | |||
} | |||
.mw-body h3, | |||
.mw-body .h3 { | |||
font-size: 16px; | |||
margin-bottom: 3px; | |||
margin-top: 6px; | |||
} | |||
} | } | ||
@media (min-width: 400px) and (max-width: 600px) { | @media (min-width: 400px) and (max-width: 600px) { | ||
.mw-body, | |||
.btn, | |||
.btn-group { | |||
font-size: 70%; | |||
} | |||
.mw-body h2, | |||
.mw-body .h2, | |||
.mw-body h1, | |||
.mw-body .h1 { | |||
font-size: 16px; | |||
} | |||
mw-body h2, | |||
.mw-body .h2 { | |||
margin-bottom: 4px; | |||
margin-top: 8px; | |||
} | |||
.mw-body h3, | |||
.mw-body .h3 { | |||
font-size: 14px; | |||
margin-bottom: 2px; | |||
margin-top: 4px; | |||
} | |||
} | } | ||
@media (max-width: 400px) { | @media (max-width: 400px) { | ||
.mw-body, | |||
.btn, | |||
.btn-group { | |||
font-size: 60%; | |||
} | |||
.mw-body h2, | |||
.mw-body .h2, | |||
.mw-body h1, | |||
.mw-body .h1 { | |||
font-size: 14px; | |||
} | |||
mw-body h2, | |||
.mw-body .h2 { | |||
margin-bottom: 2px; | |||
margin-top: 4px; | |||
} | |||
.mw-body h3, | |||
.mw-body .h3 { | |||
font-size: 12px; | |||
margin-bottom: 1px; | |||
margin-top: 2px; | |||
} | |||
} | } | ||
Version vom 25. Oktober 2024, 10:02 Uhr
/* Das folgende CSS wird für alle Benutzeroberflächen geladen. */
/* fix google maps little man in responsive skin */
.gm-style img {
max-width: none;
}
/*Tabellen*/
table.wikitable {
background-color: #ffffff;
width: 100%;
}
table.wikitable>tr>th,
table.wikitable>*>tr>th {
background-color: #E6960A;
border-color: #000000;
max-width: 40%;
}
/*Überschrift-Farben*/
h1 {
color: #E6960A;
}
/*Überschrift-Größe*/
h1 span[dir=auto] {
font-weight: 400;
}
/*Eigenschaften-Timeline*/
.timeline-event-bubble-body {
font-size: 90%;
}
.timeline-event-bubble-time {
color: #aaa;
visibility: hidden;
}
td,
th {
vertical-align: top;
}
.links.sidebar {
display: block;
width: 120px;
float: right;
margin-left: 10px;
font-size: 80%;
}
/*************************tabs**********************/
#headertabs.round .ui-corner-top {
-moz-border-radius-topleft: 3px;
-webkit-border-top-left-radius: 3px;
-moz-border-radius-topright: 3px;
-webkit-border-top-right-radius: 3px;
border-top-left-radius: 3px 3px;
border-top-right-radius: 3px 3px;
}
#headertabs.round .ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
border: 1px solid #DDD;
font-weight: normal;
color: #2779AA;
}
/****TWEEKI-Anpassungen**************/
/* Ausblenden roter Links im Tweeki-Skin (genauer: subpages-tweeki) */
.subpages-tweeki a.new {
display: none
}
/*Je nach Bildbreite wird das Subnav oder die linke Sidebar verwendet*/
/*Dazu wird die Breite des Inhalts eingeblendet*/
@media (min-width: 1000px) {
/*.nav-pills{
display:none;
}*/
#navbar>ul>li:nth-of-type(3) {
display: none;
}
.footer-sticky {
display: none;
}
}
@media (max-width: 1000px) {
#sidebar-left {
display: none;
}
.footer-sticky {
display: block;
}
}
@media (max-width: 1000px) and (min-width: 768px) {
.navbar-form .form-control {
width: 180px;
}
.nav>li>a {
padding-left: 10px;
padding-right: 10px;
font-size: 80%;
}
}
.btn {
font-size: 12px;
}
.btn-primary {
background-image: none;
box-shadow: none;
text-shadow: none;
}
#sidebar-left {
width: 20%;
}
/*
.nav-pills{
margin: auto;
float:none!important;
}
.nav-pills li {
width:32%;
}
.nav-pills a {
margin-bottom:3px;
margin-left:2px;
text-align: center;
}
*/
#sidebar-left .btn-primary:hover {
-webkit-box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.5);
box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.5);
}
/*
.nav-pills a:hover {
-webkit-box-shadow: 0px 1px 3px 1px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 1px 3px 1px rgba(0,0,0,0.5);
box-shadow: 0px 1px 3px 1px rgba(0,0,0,0.5);
}
*/
/*Farbe und Design der Seitenleiste (inklusive Logo)/Navbar*/
/*Leider notwendig: Important-Modifikator zum Verhindern des Farbwechsels
beim Hovern über den Link für eine bereits aktiven Seite */
#sidebar-left div:first-of-type .btn-primary
/*.nav-pills li:first-of-type a */
{
background-color: #0A0A78 !important;
border-color: #0A0A78 !important;
color: #FFFFFF !important;
padding: 15px;
}
#sidebar-left div:nth-of-type(2) .btn-primary,
#sidebar-left div:nth-of-type(3) .btn-primary
/*.nav-pills li:nth-of-type(2) a, .nav-pills li:nth-of-type(3) a*/
{
background-color: #64A0C8 !important;
border-color: #64A0C8 !important;
color: #FFFFFF !important;
padding: 15px;
}
#sidebar-left div:nth-of-type(3) {
margin-bottom: 10px
}
/*.nav-pills li:nth-of-type(4)*/
{
margin-left: 0px;
}
#sidebar-left div:nth-of-type(4) .btn-primary
/*.nav-pills li:nth-of-type(4) a */
{
background-color: #646464 !important;
border-color: #646464 !important;
color: #FFFFFF !important;
}
#sidebar-left div:nth-of-type(5) .btn-primary,
#sidebar-left div:nth-of-type(6) .btn-primary
/*.nav-pills li:nth-of-type(5) a, .nav-pills li:nth-of-type(6) a */
{
background-color: #DCDCDC !important;
border-color: #DCDCDC !important;
color: #222222 !important;
}
#sidebar-left div:nth-of-type(7) {
margin-top: 20px;
}
#sidebar-left div:nth-of-type(7) .btn-primary {
display: none;
}
.tab-content {
padding-left: 10px;
/*
border-left-width: 1px;
border-left-style: solid;
border-left-color: #ddd #ddd transparent;
*/
}
/*Footer*/
#footer {
background: none
}
/*Anpassung der Suchen
.mw-search-profile-tabs{
display:none
}
.smw-ask-actions .smw-ask-action-btn, .smw-ask-actions p, .smw-ask-actions hr{
display:none
}
searchresults .mw-search-createlink strong{
display:none
}
*/
/*Schriftskalierung*/
@media (min-width: 1000px) {
.mw-body,
.btn,
.btn-group {
font-size: 100%;
}
.mw-body h2,
.mw-body .h2,
.mw-body h1,
.mw-body h1 {
font-size: 28px;
}
.mw-body h2,
.mw-body .h2 {
margin-bottom: 10px;
margin-top: 20px;
}
.mw-body h3,
.mw-body .h3 {
font-size: 24px;
margin-bottom: 5px;
margin-top: 10px;
}
}
@media (min-width: 800px) and (max-width: 1000px) {
.mw-body,
.btn,
.btn-group {
font-size: 90%
}
.mw-body h2,
.mw-body .h2,
.mw-body h1,
.mw-body .h1 {
font-size: 24px;
}
mw-body h2,
.mw-body .h2 {
margin-bottom: 8px;
margin-top: 16px;
}
.mw-body h3,
.mw-body .h3 {
font-size: 20px;
margin-bottom: 4px;
margin-top: 8px;
}
}
@media (min-width: 600px) and (max-width: 800px) {
.mw-body,
.btn,
.btn-group {
font-size: 80%;
}
.mw-body h2,
.mw-body .h2,
.mw-body h1,
.mw-body .h1 {
font-size: 20px;
}
mw-body h2,
.mw-body .h2 {
margin-bottom: 6px;
margin-top: 12px;
}
.mw-body h3,
.mw-body .h3 {
font-size: 16px;
margin-bottom: 3px;
margin-top: 6px;
}
}
@media (min-width: 400px) and (max-width: 600px) {
.mw-body,
.btn,
.btn-group {
font-size: 70%;
}
.mw-body h2,
.mw-body .h2,
.mw-body h1,
.mw-body .h1 {
font-size: 16px;
}
mw-body h2,
.mw-body .h2 {
margin-bottom: 4px;
margin-top: 8px;
}
.mw-body h3,
.mw-body .h3 {
font-size: 14px;
margin-bottom: 2px;
margin-top: 4px;
}
}
@media (max-width: 400px) {
.mw-body,
.btn,
.btn-group {
font-size: 60%;
}
.mw-body h2,
.mw-body .h2,
.mw-body h1,
.mw-body .h1 {
font-size: 14px;
}
mw-body h2,
.mw-body .h2 {
margin-bottom: 2px;
margin-top: 4px;
}
.mw-body h3,
.mw-body .h3 {
font-size: 12px;
margin-bottom: 1px;
margin-top: 2px;
}
}