MediaWiki:Common.css: Unterschied zwischen den Versionen

Version vom 3. Juni 2026, 22:17 Uhr

:root {
  --submers-deep: #06283d;
  --submers-blue: #00a9e0;
  --submers-cyan: #22d3ee;
  --submers-green: #7dd3a8;
  --submers-paper: #f8fbfc;
}
body.mediawiki {
  background:
    radial-gradient(circle at 12% 8%, rgba(34,211,238,.20), transparent 24rem),
    linear-gradient(135deg, #e9fbff 0%, #eef7f2 45%, #e8e0ff 100%);
}
#content, .mw-body {
  border-radius: 0 0 18px 18px;
  box-shadow: 0 18px 45px rgba(6,40,61,.12);
}
#siteNotice { margin: 0 0 1.2rem 0; }
#siteNotice .mw-dismissable-notice-close { z-index: 5; }
#siteNotice .submers-hero {
  margin: -1.1rem -1.5rem 1.4rem -1.5rem !important;
  border-radius: 0 0 24px 24px !important;
  overflow: visible !important;
  color: #ecfeff !important;
  background:
    linear-gradient(120deg, rgba(6,40,61,.92), rgba(8,145,178,.74), rgba(4,120,87,.72)),
    image-set(url('/resources/assets/submers/hero-crayfish.jpg') 1x) !important;
  background-size: cover !important;
  background-position: center 42% !important;
  box-shadow: 0 20px 55px rgba(6,40,61,.28) !important;
  position: relative !important;
}
#siteNotice .submers-hero::after {
  content: '';
  position: absolute;
  inset: auto 4% -14px 4%;
  height: 28px;
  background: radial-gradient(ellipse at center, rgba(6,40,61,.25), transparent 65%);
  filter: blur(8px);
  pointer-events: none;
}
#siteNotice .submers-hero__overlay {
  padding: 1.2rem 1.35rem 1rem !important;
  backdrop-filter: saturate(120%);
}
#siteNotice .submers-hero__brand {
  display: flex !important;
  align-items: center !important;
  gap: 1.05rem !important;
  max-width: 880px !important;
  min-height: 112px !important;
  margin: 0 auto 1.1rem auto !important;
  padding: 1rem 1.4rem !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  border-radius: 22px !important;
  background: linear-gradient(135deg, rgba(6,40,61,.76), rgba(6,182,212,.22)) !important;
  box-shadow: 0 18px 40px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.18) !important;
  backdrop-filter: blur(6px) saturate(130%);
}
#siteNotice .submers-hero__logo {
  display: inline-block !important;
  width: 104px !important;
  height: 104px !important;
  flex: 0 0 104px !important;
  background: url('/resources/assets/submers/submers-logo.svg') center / contain no-repeat !important;
  filter: drop-shadow(0 12px 20px rgba(0,0,0,.35));
}
#siteNotice .submers-hero__copy {
  display: flex !important;
  flex-direction: column !important;
  gap: .18rem !important;
  color: #ecfeff !important;
}
#siteNotice .submers-hero__kicker {
  display: block !important;
  color: #a5f3fc !important;
  font-size: .83rem !important;
  font-weight: 800 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  text-shadow: 0 2px 12px rgba(0,0,0,.48) !important;
}
#siteNotice .submers-hero__title {
  display: block !important;
  color: #ffffff !important;
  font-size: clamp(2.4rem, 5vw, 4.8rem) !important;
  line-height: .95 !important;
  font-weight: 950 !important;
  letter-spacing: -.045em !important;
  text-shadow: 0 5px 22px rgba(0,0,0,.55) !important;
}
#siteNotice .submers-hero__subtitle {
  display: block !important;
  color: #dcfce7 !important;
  font-size: clamp(1rem, 1.45vw, 1.25rem) !important;
  font-weight: 650 !important;
  text-shadow: 0 2px 12px rgba(0,0,0,.45) !important;
}
#siteNotice .submers-topnav {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: .55rem !important;
  max-width: 940px !important;
  margin: .6rem auto 0 auto !important;
  padding: .85rem !important;
  border-radius: 22px !important;
  background: rgba(6,40,61,.58) !important;
  border: 1px solid rgba(255,255,255,.20) !important;
  box-shadow: 0 18px 36px rgba(0,0,0,.22) !important;
}
#siteNotice .submers-navgroup {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: .35rem !important;
  min-height: 2.25rem !important;
  padding: .35rem .55rem !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.10) !important;
  color: #e0fbff !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16) !important;
}
#siteNotice .submers-navgroup > span:first-child {
  font-weight: 850 !important;
  color: #06283d !important;
  padding: .15rem .45rem !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, #a7f3d0, #67e8f9) !important;
}
#siteNotice .submers-navgroup a {
  color: #ecfeff !important;
  text-decoration: none !important;
  padding: .18rem .42rem !important;
  border-radius: 999px !important;
  white-space: nowrap !important;
  font-weight: 650 !important;
  text-shadow: 0 1px 5px rgba(0,0,0,.35) !important;
}
#siteNotice .submers-navgroup a:hover,
#siteNotice .submers-navgroup a:focus {
  color: #06283d !important;
  background: #bbf7d0 !important;
  text-shadow: none !important;
}
.mw-wiki-logo {
  background-size: contain !important;
  filter: drop-shadow(0 10px 20px rgba(6,40,61,.22));
}
.submers-taxobox {
  width: min(850px, 100%);
  margin: 1.6rem auto 1.3rem;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  border: 1px solid rgba(6,40,61,.22);
  border-radius: 16px;
  box-shadow: 0 14px 35px rgba(6,40,61,.13);
  background: #fff;
}
.submers-taxobox th,
.submers-taxobox td {
  padding: .62rem .85rem;
  border-bottom: 1px solid rgba(6,40,61,.13);
  vertical-align: top;
}
.submers-taxobox tr:last-child td { border-bottom: 0; }
.submers-taxobox th {
  color: #083344;
  background: linear-gradient(180deg, #dff7ff, #eefdf5);
  text-align: center;
  font-weight: 850;
}
.submers-taxobox tr:first-child th {
  color: #ecfeff;
  background: linear-gradient(90deg, #075985, #06b6d4 55%, #10b981);
  font-size: 1.05rem;
  letter-spacing: .04em;
}
.submers-taxobox td { background: rgba(248,251,252,.92); }
.submers-fundortbox {
  width: min(360px, 90%);
  margin: .6rem auto 1.3rem;
  border: 1px solid rgba(6,40,61,.22);
  border-radius: 999px;
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(6,40,61,.10);
}
.submers-fundortbox td {
  padding: .45rem 1rem;
  text-align: center;
  font-weight: 850;
  color: #083344;
  background: linear-gradient(90deg, #bbf7d0, #bfdbfe);
}
.gallery, ul.gallery { clear: both; }
@media (max-width: 900px) {
  #siteNotice .submers-hero { margin-left: -.5rem !important; margin-right: -.5rem !important; }
  #siteNotice .submers-hero__brand { align-items: flex-start !important; min-height: auto !important; }
  #siteNotice .submers-hero__logo { width: 78px !important; height: 78px !important; flex-basis: 78px !important; }
  #siteNotice .submers-navgroup { border-radius: 18px !important; align-items: flex-start !important; }
}