Düsseldorfer Tauchverband · Umwelt & Wissenschaft SubmersWiki Leben unter Wasser im Elbsee – Bestimmen, dokumentieren, staunen.

Unser Elbsee Bestimmungsheft Herbarium Mitmachen Fakten Videos Wissenswertes Wir über uns

MediaWiki:Common.css: Unterschied zwischen den Versionen

Aus SubmersWiki
Zur Navigation springen Zur Suche springen
(Modernes Submers-Layout, Navigation und Bestimmungsseiten-Styling)
 
(Logo/Navigation CSS für erlaubtes Sitenotice-Markup angepasst)
Zeile 1: Zeile 1:
:root {
:root {\n  --submers-deep: #06283d;\n  --submers-blue: #00a9e0;\n  --submers-cyan: #22d3ee;\n  --submers-green: #7dd3a8;\n  --submers-paper: #f8fbfc;\n}\nbody.mediawiki {\n  background:\n    radial-gradient(circle at 12% 8%, rgba(34,211,238,.20), transparent 24rem),\n    linear-gradient(135deg, #e9fbff 0%, #eef7f2 45%, #e8e0ff 100%);\n}\n#content, .mw-body {\n  border-radius: 0 0 18px 18px;\n  box-shadow: 0 18px 45px rgba(6,40,61,.12);\n}\n#siteNotice { margin: 0 0 1.2rem 0; }\n#siteNotice .mw-dismissable-notice-close { z-index: 5; }\n.submers-hero {\n  margin: -1.1rem -1.5rem 1.4rem -1.5rem;\n  border-radius: 0 0 24px 24px;\n  overflow: visible;\n  color: #fff;\n  background:\n    linear-gradient(120deg, rgba(6,40,61,.92), rgba(8,145,178,.74), rgba(4,120,87,.72)),\n    image-set(url('/resources/assets/submers/hero-crayfish.jpg') 1x);\n  background-size: cover;\n  background-position: center 42%;\n  box-shadow: 0 20px 55px rgba(6,40,61,.28);\n  position: relative;\n}\n.submers-hero::after {\n  content: '';\n  position: absolute;\n  inset: auto 4% -14px 4%;\n  height: 28px;\n  background: radial-gradient(ellipse at center, rgba(6,40,61,.25), transparent 65%);\n  filter: blur(8px);\n  pointer-events: none;\n}\n.submers-hero__overlay {\n  padding: 1.2rem 1.35rem 1rem;\n  backdrop-filter: saturate(120%);\n}\n.submers-hero__brand {\n  display: flex;\n  align-items: center;\n  gap: 1rem;\n  min-height: 120px;\n}\n.submers-hero__logo {\n  width: 106px;\n  height: 106px;\n  object-fit: contain;\n  flex: 0 0 auto;\n  filter: drop-shadow(0 12px 20px rgba(0,0,0,.35));\n}\n.submers-hero__kicker {
  --submers-deep: #06283d;
   display: block;\n  font-size: .82rem;\n  letter-spacing: .14em;\n  text-transform: uppercase;\n  color: #cffafe;\n  font-weight: 700;\n}\n.submers-hero__title {
  --submers-blue: #00a9e0;
   display: block;\n  font-size: clamp(2.1rem, 5vw, 4.4rem);\n  line-height: .95;\n  font-weight: 900;\n  letter-spacing: -.04em;\n  text-shadow: 0 4px 18px rgba(0,0,0,.35);\n}\n.submers-hero__subtitle {
  --submers-cyan: #22d3ee;
   display: block;\n  margin-top: .45rem;\n  font-size: clamp(1rem, 1.5vw, 1.25rem);\n  color: #ecfeff;\n  max-width: 52rem;\n}\n.submers-topnav {\n  display: flex;\n  flex-wrap: wrap;\n  gap: .55rem;\n  margin-top: .8rem;\n}\n.submers-navgroup {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  gap: .35rem;\n  min-height: 2.25rem;\n  padding: .35rem .55rem;\n  border: 1px solid rgba(255,255,255,.20);\n  border-radius: 999px;\n  background: rgba(255,255,255,.13);\n  box-shadow: inset 0 1px 0 rgba(255,255,255,.16);\n}\n.submers-navgroup > span:first-child {\n  font-weight: 850;\n  color: #fff;\n  padding: .15rem .45rem;\n  border-radius: 999px;\n  background: rgba(6,40,61,.55);\n}\n.submers-navgroup a {\n  color: #e0fbff !important;\n  text-decoration: none;\n  padding: .18rem .42rem;\n  border-radius: 999px;\n  white-space: nowrap;\n  font-weight: 650;\n}\n.submers-navgroup a:hover, .submers-navgroup a:focus {\n  color: #06283d !important;\n  background: #a7f3d0;\n  text-decoration: none;\n}\n.mw-wiki-logo {\n  background-size: contain !important;\n  filter: drop-shadow(0 10px 20px rgba(6,40,61,.22));\n}\n.submers-taxobox {\n  width: min(850px, 100%);\n  margin: 1.6rem auto 1.3rem;\n  border-collapse: separate;\n  border-spacing: 0;\n  overflow: hidden;\n  border: 1px solid rgba(6,40,61,.22);\n  border-radius: 16px;\n  box-shadow: 0 14px 35px rgba(6,40,61,.13);\n  background: #fff;\n}\n.submers-taxobox th,\n.submers-taxobox td {\n  padding: .62rem .85rem;\n  border-bottom: 1px solid rgba(6,40,61,.13);\n  vertical-align: top;\n}\n.submers-taxobox tr:last-child td { border-bottom: 0; }\n.submers-taxobox__title th {\n  text-align: center;\n  color: #ecfeff;\n  background: linear-gradient(90deg, #075985, #06b6d4 55%, #10b981);\n  font-size: 1.05rem;\n  letter-spacing: .04em;\n}\n.submers-taxobox__head th {\n  color: #083344;\n  background: linear-gradient(180deg, #dff7ff, #eefdf5);\n  text-align: center;\n  font-weight: 850;\n}\n.submers-taxobox__data td { background: rgba(248,251,252,.92); }\n.submers-fundortbox {\n  width: min(360px, 90%);\n  margin: .6rem auto 1.3rem;\n  border: 1px solid rgba(6,40,61,.22);\n  border-radius: 999px;\n  overflow: hidden;\n  box-shadow: 0 10px 24px rgba(6,40,61,.10);\n}\n.submers-fundortbox td {\n  padding: .45rem 1rem;\n  text-align: center;\n  font-weight: 850;\n  color: #083344;\n  background: linear-gradient(90deg, #bbf7d0, #bfdbfe);\n}\n.gallery, ul.gallery {\n  clear: both;\n}\n@media (max-width: 900px) {\n  .submers-hero { margin-left: -.5rem; margin-right: -.5rem; }\n  .submers-hero__brand { align-items: flex-start; min-height: auto; }\n  .submers-hero__logo { width: 78px; height: 78px; }\n  .submers-navgroup { border-radius: 18px; align-items: flex-start; flex-wrap: wrap; }\n}
  --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; }
.submers-hero {
  margin: -1.1rem -1.5rem 1.4rem -1.5rem;
  border-radius: 0 0 24px 24px;
  overflow: visible;
  color: #fff;
  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);
  background-size: cover;
  background-position: center 42%;
  box-shadow: 0 20px 55px rgba(6,40,61,.28);
  position: relative;
}
.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;
}
.submers-hero__overlay {
  padding: 1.2rem 1.35rem 1rem;
  backdrop-filter: saturate(120%);
}
.submers-hero__brand {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 120px;
}
.submers-hero__logo {
  width: 106px;
  height: 106px;
  object-fit: contain;
  flex: 0 0 auto;
  filter: drop-shadow(0 12px 20px rgba(0,0,0,.35));
}
.submers-hero__kicker {
   font-size: .82rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #cffafe;
  font-weight: 700;
}
.submers-hero__title {
   font-size: clamp(2.1rem, 5vw, 4.4rem);
  line-height: .95;
  font-weight: 900;
  letter-spacing: -.04em;
  text-shadow: 0 4px 18px rgba(0,0,0,.35);
}
.submers-hero__subtitle {
   margin-top: .45rem;
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  color: #ecfeff;
  max-width: 52rem;
}
.submers-topnav {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin-top: .8rem;
}
.submers-navgroup {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  min-height: 2.25rem;
  padding: .35rem .55rem;
  border: 1px solid rgba(255,255,255,.20);
  border-radius: 999px;
  background: rgba(255,255,255,.13);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16);
}
.submers-navgroup > span {
  font-weight: 850;
  color: #fff;
  padding: .15rem .45rem;
  border-radius: 999px;
  background: rgba(6,40,61,.55);
}
.submers-navgroup a {
  color: #e0fbff !important;
  text-decoration: none;
  padding: .18rem .42rem;
  border-radius: 999px;
  white-space: nowrap;
  font-weight: 650;
}
.submers-navgroup a:hover, .submers-navgroup a:focus {
  color: #06283d !important;
  background: #a7f3d0;
  text-decoration: none;
}
.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__title th {
  text-align: center;
  color: #ecfeff;
  background: linear-gradient(90deg, #075985, #06b6d4 55%, #10b981);
  font-size: 1.05rem;
  letter-spacing: .04em;
}
.submers-taxobox__head th {
  color: #083344;
  background: linear-gradient(180deg, #dff7ff, #eefdf5);
  text-align: center;
  font-weight: 850;
}
.submers-taxobox__data 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) {
  .submers-hero { margin-left: -.5rem; margin-right: -.5rem; }
  .submers-hero__brand { align-items: flex-start; min-height: auto; }
  .submers-hero__logo { width: 78px; height: 78px; }
  .submers-navgroup { border-radius: 18px; align-items: flex-start; flex-wrap: wrap; }
}

Version vom 3. Juni 2026, 22:13 Uhr

:root {\n  --submers-deep: #06283d;\n  --submers-blue: #00a9e0;\n  --submers-cyan: #22d3ee;\n  --submers-green: #7dd3a8;\n  --submers-paper: #f8fbfc;\n}\nbody.mediawiki {\n  background:\n    radial-gradient(circle at 12% 8%, rgba(34,211,238,.20), transparent 24rem),\n    linear-gradient(135deg, #e9fbff 0%, #eef7f2 45%, #e8e0ff 100%);\n}\n#content, .mw-body {\n  border-radius: 0 0 18px 18px;\n  box-shadow: 0 18px 45px rgba(6,40,61,.12);\n}\n#siteNotice { margin: 0 0 1.2rem 0; }\n#siteNotice .mw-dismissable-notice-close { z-index: 5; }\n.submers-hero {\n  margin: -1.1rem -1.5rem 1.4rem -1.5rem;\n  border-radius: 0 0 24px 24px;\n  overflow: visible;\n  color: #fff;\n  background:\n    linear-gradient(120deg, rgba(6,40,61,.92), rgba(8,145,178,.74), rgba(4,120,87,.72)),\n    image-set(url('/resources/assets/submers/hero-crayfish.jpg') 1x);\n  background-size: cover;\n  background-position: center 42%;\n  box-shadow: 0 20px 55px rgba(6,40,61,.28);\n  position: relative;\n}\n.submers-hero::after {\n  content: '';\n  position: absolute;\n  inset: auto 4% -14px 4%;\n  height: 28px;\n  background: radial-gradient(ellipse at center, rgba(6,40,61,.25), transparent 65%);\n  filter: blur(8px);\n  pointer-events: none;\n}\n.submers-hero__overlay {\n  padding: 1.2rem 1.35rem 1rem;\n  backdrop-filter: saturate(120%);\n}\n.submers-hero__brand {\n  display: flex;\n  align-items: center;\n  gap: 1rem;\n  min-height: 120px;\n}\n.submers-hero__logo {\n  width: 106px;\n  height: 106px;\n  object-fit: contain;\n  flex: 0 0 auto;\n  filter: drop-shadow(0 12px 20px rgba(0,0,0,.35));\n}\n.submers-hero__kicker {
  display: block;\n  font-size: .82rem;\n  letter-spacing: .14em;\n  text-transform: uppercase;\n  color: #cffafe;\n  font-weight: 700;\n}\n.submers-hero__title {
  display: block;\n  font-size: clamp(2.1rem, 5vw, 4.4rem);\n  line-height: .95;\n  font-weight: 900;\n  letter-spacing: -.04em;\n  text-shadow: 0 4px 18px rgba(0,0,0,.35);\n}\n.submers-hero__subtitle {
  display: block;\n  margin-top: .45rem;\n  font-size: clamp(1rem, 1.5vw, 1.25rem);\n  color: #ecfeff;\n  max-width: 52rem;\n}\n.submers-topnav {\n  display: flex;\n  flex-wrap: wrap;\n  gap: .55rem;\n  margin-top: .8rem;\n}\n.submers-navgroup {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  gap: .35rem;\n  min-height: 2.25rem;\n  padding: .35rem .55rem;\n  border: 1px solid rgba(255,255,255,.20);\n  border-radius: 999px;\n  background: rgba(255,255,255,.13);\n  box-shadow: inset 0 1px 0 rgba(255,255,255,.16);\n}\n.submers-navgroup > span:first-child {\n  font-weight: 850;\n  color: #fff;\n  padding: .15rem .45rem;\n  border-radius: 999px;\n  background: rgba(6,40,61,.55);\n}\n.submers-navgroup a {\n  color: #e0fbff !important;\n  text-decoration: none;\n  padding: .18rem .42rem;\n  border-radius: 999px;\n  white-space: nowrap;\n  font-weight: 650;\n}\n.submers-navgroup a:hover, .submers-navgroup a:focus {\n  color: #06283d !important;\n  background: #a7f3d0;\n  text-decoration: none;\n}\n.mw-wiki-logo {\n  background-size: contain !important;\n  filter: drop-shadow(0 10px 20px rgba(6,40,61,.22));\n}\n.submers-taxobox {\n  width: min(850px, 100%);\n  margin: 1.6rem auto 1.3rem;\n  border-collapse: separate;\n  border-spacing: 0;\n  overflow: hidden;\n  border: 1px solid rgba(6,40,61,.22);\n  border-radius: 16px;\n  box-shadow: 0 14px 35px rgba(6,40,61,.13);\n  background: #fff;\n}\n.submers-taxobox th,\n.submers-taxobox td {\n  padding: .62rem .85rem;\n  border-bottom: 1px solid rgba(6,40,61,.13);\n  vertical-align: top;\n}\n.submers-taxobox tr:last-child td { border-bottom: 0; }\n.submers-taxobox__title th {\n  text-align: center;\n  color: #ecfeff;\n  background: linear-gradient(90deg, #075985, #06b6d4 55%, #10b981);\n  font-size: 1.05rem;\n  letter-spacing: .04em;\n}\n.submers-taxobox__head th {\n  color: #083344;\n  background: linear-gradient(180deg, #dff7ff, #eefdf5);\n  text-align: center;\n  font-weight: 850;\n}\n.submers-taxobox__data td { background: rgba(248,251,252,.92); }\n.submers-fundortbox {\n  width: min(360px, 90%);\n  margin: .6rem auto 1.3rem;\n  border: 1px solid rgba(6,40,61,.22);\n  border-radius: 999px;\n  overflow: hidden;\n  box-shadow: 0 10px 24px rgba(6,40,61,.10);\n}\n.submers-fundortbox td {\n  padding: .45rem 1rem;\n  text-align: center;\n  font-weight: 850;\n  color: #083344;\n  background: linear-gradient(90deg, #bbf7d0, #bfdbfe);\n}\n.gallery, ul.gallery {\n  clear: both;\n}\n@media (max-width: 900px) {\n  .submers-hero { margin-left: -.5rem; margin-right: -.5rem; }\n  .submers-hero__brand { align-items: flex-start; min-height: auto; }\n  .submers-hero__logo { width: 78px; height: 78px; }\n  .submers-navgroup { border-radius: 18px; align-items: flex-start; flex-wrap: wrap; }\n}
Abgerufen von „https://submers.wirts.net/index.php?title=MediaWiki:Common.css&oldid=2910“