MediaWiki:Common.css: Unterschied zwischen den Versionen
MKastl (Diskussion | Beiträge) Keine Bearbeitungszusammenfassung |
MKastl (Diskussion | Beiträge) Keine Bearbeitungszusammenfassung Markierung: Manuelle Zurücksetzung |
||
| (84 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt) | |||
| Zeile 9: | Zeile 9: | ||
.mw-logo-icon { | .mw-logo-icon { | ||
margin-left: 15px; | margin-left: 15px; | ||
} | |||
/* Indicators-Container linksbündig */ | |||
.mw-indicators { | |||
display: flex !important; | |||
align-items: center !important; | |||
flex-wrap: wrap !important; | |||
gap: 12px !important; | |||
float: left !important; /* falls du diese Regel zum Linksverschieben drin hast */ | |||
} | |||
/*alle Bilder transparent*/ | |||
img { | |||
background-color: transparent !important; | |||
} | |||
.white-bg img { | |||
background-color: #FFFFFF !important;; | |||
} | |||
.grey-bg img { | |||
background-color: #B0B0B0 !important;; | |||
} | } | ||
| Zeile 40: | Zeile 62: | ||
} | } | ||
/* Tabelle */ | /* Tabelle *//* | ||
.wikitable { | .wikitable { | ||
border-collapse: collapse; | border-collapse: collapse; | ||
width: auto; | width: auto; | ||
} | }*/ | ||
.wikitable td, .wikitable.customers th { | .wikitable td, .wikitable.customers th { | ||
| Zeile 79: | Zeile 101: | ||
background-color: #FFE5E5 !important; | background-color: #FFE5E5 !important; | ||
} | } | ||
/* Überschriften */ | /* Überschriften */ | ||
| Zeile 122: | Zeile 145: | ||
/* Klassen für Container und FlexBox */ | /* Klassen für Container und FlexBox */ | ||
/* ===== Container Basis ===== */ | |||
.container { | .container { | ||
border: 1px solid rgba( | /* Großzügigere Abstände */ | ||
margin: 10px 4px; | |||
padding: 16px 18px; | |||
/*- | |||
- | /* Modernere Ecken */ | ||
border-radius: 10px; | |||
/* Subtiler Rahmen statt halbtransparentes Weiß */ | |||
border: 1px solid rgba(0, 0, 0, 0.06); | |||
/* Sanfter Doppel-Schatten für leichte "Tiefe" */ | |||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), | |||
0 1px 2px rgba(0, 0, 0, 0.03); | |||
/* Smoothe Übergänge bei Theme-Wechsel und Hover */ | |||
transition: background-color 0.2s ease, | |||
box-shadow 0.2s ease, | |||
transform 0.15s ease; | |||
} | |||
/* Sanftes Anheben bei Hover (optional, aber sehr modern) */ | |||
.container:hover { | |||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.08), | |||
0 2px 4px -2px rgba(0, 0, 0, 0.04); | |||
transform: translateY(-1px); | |||
} | |||
/* Dark Mode: dezenter Rahmen + dunklerer Schatten */ | |||
@media screen { | |||
html.skin-theme-clientpref-night .container { | |||
border-color: rgba(255, 255, 255, 0.06); | |||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), | |||
0 1px 2px rgba(0, 0, 0, 0.15); | |||
} | |||
} | |||
@media screen and (prefers-color-scheme: dark) { | |||
html.skin-theme-clientpref-os .container { | |||
border-color: rgba(255, 255, 255, 0.06); | |||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), | |||
0 1px 2px rgba(0, 0, 0, 0.15); | |||
} | |||
} | } | ||
.container.c { | .container.c { | ||
background-color: #c9e8d4; | background-color: #c9e8d4; | ||
/*#c9e9d4;*/ | /*#c9e9d4;*/ | ||
} | } | ||
/* Forced night mode (user setting) */ | /* Forced night mode (user setting) */ | ||
@media screen { | @media screen { | ||
html.skin-theme-clientpref-night .container.c { | |||
background-color: rgba(41, 98, 60, 0.6); | |||
/*#29623c*/ | |||
} | |||
} | } | ||
/* Auto night mode (OS preference) */ | /* Auto night mode (OS preference) */ | ||
@media screen and (prefers-color-scheme: dark) { | @media screen and (prefers-color-scheme: dark) { | ||
html.skin-theme-clientpref-os .container.c { | |||
background-color: rgba(41, 98, 60, 0.6); | |||
} | |||
} | |||
.container.card { | |||
background-color: rgba(255, 255, 255, 0.5); | |||
/*#ffffff*/ | |||
} | |||
/* Forced night mode (user setting) */ | |||
@media screen { | |||
html.skin-theme-clientpref-night .container.card { | |||
background-color: rgba(255, 255, 255, 0.1); | |||
} | |||
} | |||
/* Auto night mode (OS preference) */ | |||
@media screen and (prefers-color-scheme: dark) { | |||
html.skin-theme-clientpref-os .container.card { | |||
background-color: rgba(255, 255, 255, 0.1); | |||
} | |||
} | } | ||
.container.ibkastl { | .container.ibkastl { | ||
background-color: rgba(237, 239, 242, 0.6); | |||
/*#f8f9fa;*/ | |||
} | } | ||
/* Forced night mode (user setting) */ | /* Forced night mode (user setting) */ | ||
@media screen { | @media screen { | ||
html.skin-theme-clientpref-night .container.ibkastl { | |||
background-color: #14171c; | |||
/*#242b33*/ | |||
} | |||
} | } | ||
/* Auto night mode (OS preference) */ | /* Auto night mode (OS preference) */ | ||
@media screen and (prefers-color-scheme: dark) { | @media screen and (prefers-color-scheme: dark) { | ||
html.skin-theme-clientpref-os .container.ibkastl { | |||
background-color: # | background-color: #14171c; | ||
} | |||
} | |||
.container.pnw { | |||
background-color: #ffe9d4; | |||
} | |||
/* Forced night mode (user setting) */ | |||
@media screen { | |||
html.skin-theme-clientpref-night .container.pnw { | |||
background-color: #ad5500; | |||
} | |||
} | |||
/* Auto night mode (OS preference) */ | |||
@media screen and (prefers-color-scheme: dark) { | |||
html.skin-theme-clientpref-os .container.pnw { | |||
background-color: #ad5500; | |||
} | |||
} | } | ||
.container.white { | .container.white { | ||
background-color: rgb(255, 255, 255); | background-color: rgb(255, 255, 255); | ||
} | } | ||
.container.eplan { | .container.eplan { | ||
background-color: | background-color: rgb(255, 212, 220); | ||
/* | /*rgb(255, 212, 220)*/ | ||
} | } | ||
/* Forced night mode (user setting) */ | /* Forced night mode (user setting) */ | ||
@media screen { | @media screen { | ||
html.skin-theme-clientpref-night .container.eplan { | |||
background-color: rgba(255, 212, 220, 0.3); | |||
/*rgba(255, 212, 220, 0.3)*/ | |||
} | |||
} | } | ||
/* Auto night mode (OS preference) */ | /* Auto night mode (OS preference) */ | ||
@media screen and (prefers-color-scheme: dark) { | @media screen and (prefers-color-scheme: dark) { | ||
html.skin-theme-clientpref-os .container.eplan { | |||
background-color: rgba(255, 212, 220, 0.3); | |||
} | |||
} | } | ||
.container.knowledge { | .container.knowledge { | ||
background-color: #eee8f3; | background-color: #eee8f3; | ||
} | } | ||
/* Forced night mode (user setting) */ | /* Forced night mode (user setting) */ | ||
@media screen { | @media screen { | ||
html.skin-theme-clientpref-night .container.knowledge { | |||
background-color: #5d3e77; | |||
} | |||
} | } | ||
/* Auto night mode (OS preference) */ | /* Auto night mode (OS preference) */ | ||
@media screen and (prefers-color-scheme: dark) { | @media screen and (prefers-color-scheme: dark) { | ||
html.skin-theme-clientpref-os .container.knowledge { | |||
background-color: #5d3e77; | |||
} | |||
} | } | ||
.container.md3 { | .container.md3 { | ||
background-color: | background-color: rgb(182, 234, 237); | ||
/*# | /*#b6eaed*/ | ||
} | } | ||
/* Forced night mode (user setting) */ | /* Forced night mode (user setting) */ | ||
@media screen { | @media screen { | ||
html.skin-theme-clientpref-night .container.md3 { | |||
background-color: rgba(182, 234, 237, 0.4); | |||
} | |||
} | } | ||
/* Auto night mode (OS preference) */ | /* Auto night mode (OS preference) */ | ||
@media screen and (prefers-color-scheme: dark) { | @media screen and (prefers-color-scheme: dark) { | ||
html.skin-theme-clientpref-os .container.md3 { | |||
background-color: rgba(182, 234, 237, 0.4); | |||
} | |||
} | } | ||
.container.mediawiki { | .container.mediawiki { | ||
background-color: # | background-color: #d9d9d9; | ||
/*# | /*#dbe1e7;*/ | ||
} | } | ||
/* Forced night mode (user setting) */ | /* Forced night mode (user setting) */ | ||
@media screen { | @media screen { | ||
html.skin-theme-clientpref-night .container.mediawiki { | |||
background-color: rgba(217, 217, 217, 0.2); | |||
} | |||
} | } | ||
/* Auto night mode (OS preference) */ | /* Auto night mode (OS preference) */ | ||
@media screen and (prefers-color-scheme: dark) { | @media screen and (prefers-color-scheme: dark) { | ||
html.skin-theme-clientpref-os .container.mediawiki { | |||
background-color: rgba(217, 217, 217, 0.2); | |||
} | |||
} | } | ||
.container.standard { | .container.standard { | ||
background-color: | background-color: rgb(210, 229, 247); | ||
/*# | /*#d2e5f7*/ | ||
} | } | ||
/* Forced night mode (user setting) */ | /* Forced night mode (user setting) */ | ||
@media screen { | @media screen { | ||
html.skin-theme-clientpref-night .container.standard { | |||
background-color: rgba(210, 229, 247, 0.4); | |||
} | |||
} | } | ||
/* Auto night mode (OS preference) */ | /* Auto night mode (OS preference) */ | ||
@media screen and (prefers-color-scheme: dark) { | @media screen and (prefers-color-scheme: dark) { | ||
html.skin-theme-clientpref-os .container.standard { | |||
background-color: rgba(210, 229, 247, 0.4); | |||
} | |||
} | } | ||
.container.bosch { | .container.bosch { | ||
background-color: #cdede2; | background-color: #cdede2; | ||
/*#ccece2*/ | /*#ccece2*/ | ||
} | } | ||
/* Forced night mode (user setting) */ | /* Forced night mode (user setting) */ | ||
@media screen { | @media screen { | ||
html.skin-theme-clientpref-night .container.bosch { | |||
background-color: rgba(78, 97, 90, 0.6); | |||
/*#4e615a*/ | |||
} | |||
} | } | ||
/* Auto night mode (OS preference) */ | /* Auto night mode (OS preference) */ | ||
@media screen and (prefers-color-scheme: dark) { | @media screen and (prefers-color-scheme: dark) { | ||
html.skin-theme-clientpref-os .container.bosch { | |||
background-color: rgba(78, 97, 90, 0.6); | |||
} | |||
} | } | ||
.container.boschfile { | .container.boschfile { | ||
background-color: #fff6cd; | background-color: #fff6cd; | ||
/*#fff6cd*/ | /*#fff6cd*/ | ||
} | } | ||
/* Forced night mode (user setting) */ | /* Forced night mode (user setting) */ | ||
@media screen { | @media screen { | ||
html.skin-theme-clientpref-night .container.boschfile { | |||
background-color: rgba(126, 103, 0, 0.6); | |||
/*#7e6700*/ | |||
} | |||
} | } | ||
/* Auto night mode (OS preference) */ | /* Auto night mode (OS preference) */ | ||
@media screen and (prefers-color-scheme: dark) { | @media screen and (prefers-color-scheme: dark) { | ||
html.skin-theme-clientpref-os .container.boschfile { | |||
background-color: rgba(126, 103, 0, 0.6); | |||
} | |||
} | } | ||