MediaWiki:Common.css: Difference between revisions

Revision as of 11:07, 22 May 2026

/* Das folgende CSS wird für alle Benutzeroberflächen geladen. */

/* Allow limiting of which header levels are shown in a TOC;
<div class="toclimit-3">, for instance, will limit to
showing ==headings== and ===headings=== but no further
(as long as there are no =headings= on the page, which
there shouldn't be according to the MoS).
*/
.toclimit-2 .toclevel-1 ul,
.toclimit-3 .toclevel-2 ul,
.toclimit-4 .toclevel-3 ul,
.toclimit-5 .toclevel-4 ul,
.toclimit-6 .toclevel-5 ul,
.toclimit-7 .toclevel-6 ul {
display: none;
}

/* ============================================
   GLOBAL VARIABLES & BASE STYLES
   ============================================ */

:root {
  --color-primary:   #c0121c;
  --color-primary-dark: #8b0d14;
  --color-accent:    #f5f5f5;
  --color-border:    #e0e0e0;
  --color-text:      #1a1a1a;
  --color-muted:     #666666;
  --color-bg:        #ffffff;
  --font-body:       'Georgia', 'Times New Roman', serif;
  --font-sans:       'Helvetica Neue', 'Arial', sans-serif;
  --radius:          6px;
  --shadow-sm:       0 1px 4px rgba(0,0,0,0.08);
  --shadow-md:       0 4px 12px rgba(0,0,0,0.12);
  --transition:      0.2s ease;
}

body {
  background-color: #f7f8fa;
  color: var(--color-text);
  font-family: var(--font-body);
}

/* ============================================
   HEADER
   ============================================ */

header.main-header {
  background-color: #ffffff;
  border-bottom: 3px solid var(--color-primary);
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

.bs-custom-menu>.level-1 {
  padding: 0 1rem;
}

.bs-page-before-header {
  margin-top: 2em;
}

/* ============================================
   BREADCRUMBS & PAGE INFO
   ============================================ */

.btn.bs-breadcrumb-node {
  font-size: 2.4em !important;
  line-height: 1em !important;
}

.bs-page-edit-elements>li,
.bs-page-info-element>ul>li,
.bs-page-info-element-button-col,
.bs-page-info-element-text-col,
.bs-category-add-category,
.bs-page-last-edit a,
.mw-watchlink,
.bs-page-info-element-button {
  font-size: 0.7rem !important;
  line-height: 0.7rem;
  color: var(--color-muted) !important;
}

.bs-page-namespaces {
  display: none;
}

/* ============================================
   SITE NOTICE
   ============================================ */

#localNotice>.mw-parser-output>.infobox {
  max-width: 100%;
  margin-left: 0 !important;
  font-size: 0.5rem;
  border-radius: var(--radius);
  border-left: 4px solid var(--color-primary);
  background: #fff8f8;
}

#localNotice>.mw-parser-output>.infobox>p {
  font-size: 0.8rem !important;
}

/* ============================================
   TAGS / CATEGORIES
   ============================================ */

.bs-category-container-categories .pill {
  color: var(--color-muted) !important;
  background: #f1f3f5 !important;
  font-size: 0.75em !important;
  border-radius: 20px !important;
  padding: 0.2em 0.75em !important;
  border: 1px solid var(--color-border) !important;
  transition: background var(--transition), color var(--transition);
}

.bs-category-container-categories .pill:hover {
  background: var(--color-primary) !important;
  color: #ffffff !important;
  border-color: var(--color-primary) !important;
}

.bs-category-add-category i::after {
  content: " Tags:";
}

/* ============================================
   CONTENT AREA
   ============================================ */

/* Remove first horizontal line */
#content>.v-line {
  display: none;
}

#content>.v-line~.v-line {
  display: block;
  border-bottom: 2px solid var(--color-border);
}

#content {
  padding-top: 2em;
  background-color: var(--color-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

/* ============================================
   TYPOGRAPHY
   ============================================ */

#mw-content-text p,
#mw-content-text ul>li,
#mw-content-text ol>li {
  font-size: 1.05rem !important;
  line-height: 1.8rem;
}

/* Adjustment for tables */
#mw-content-text td p,
#mw-content-text th p,
#mw-content-text td ul>li {
  font-size: 0.875rem !important;
  line-height: 1.42857143;
}

.toctitle {
  display: none;
}

/* Headings */
h1 {
  font-family: var(--font-sans);
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 0.5em;
}

h2 {
  font-family: var(--font-sans);
  padding: 0.3em 0.5em;
  font-size: 1.85rem;
  font-weight: 600;
  margin-top: 2.2em;
  margin-bottom: 1rem;
  background: linear-gradient(135deg, #fff5f5 0%, #ffffff 100%);
  border: none;
  border-left: 5px solid var(--color-primary);
  border-bottom: 2px solid var(--color-border);
  border-radius: 0 var(--radius) var(--radius) 0;
  box-shadow: var(--shadow-sm);
  color: var(--color-text);
}

h3 {
  font-family: var(--font-sans);
  font-size: 1.3rem;
  font-weight: 600;
  border-bottom: 2px solid var(--color-border);
  margin-top: 1.5em;
  padding-bottom: 0.3em;
  color: #2c2c2c;
}

h4, h5 {
  font-family: var(--font-sans);
  font-weight: 600;
  margin-top: 1.2em;
  color: #333;
}

h6 {
  margin-top: 1.7em;
  font-family: var(--font-sans);
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.85rem;
}

/* ============================================
   TABLES
   ============================================ */

.wikitable {
  border-collapse: collapse;
  width: 100%;
  margin-bottom: 1.5em;
  font-size: 0.95rem;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.wikitable th {
  background-color: var(--color-primary) !important;
  color: #ffffff !important;
  padding: 0.65em 0.9em;
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: 0.03em;
}

.wikitable td {
  padding: 0.6em 0.9em;
  border: 1px solid var(--color-border);
  vertical-align: top;
}

.wikitable tr:nth-child(even) td {
  background-color: #fafafa;
}

.wikitable tr:hover td {
  background-color: #fff5f5;
  transition: background var(--transition);
}

/* ============================================
   COLLAPSE / EXPAND
   ============================================ */

.mw-collapsed {
  width: 100%;
}

/* ============================================
   SITUATIONSBOXEN (Clinical boxes)
   ============================================ */

small ul li {
  font-size: 1em !important;
  line-height: 1.2em;
}

.contenttable-blue {
  width: 100%;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.contenttable-blue th {
  max-width: 10%;
  background-color: #1a6fa3;
  color: #ffffff;
}

.contenttable-blue td {
  width: 80%;
}

.contenttable-blue table,
.contenttable-blue th,
.contenttable-blue td {
  position: relative;
}

.contenttable-blue .mini-more-link {
  position: absolute;
  bottom: 0.5em;
  right: 1em;
}

/* ============================================
   INFOBOXES
   ============================================ */

.infobox {
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  background: #fafafa;
  box-shadow: var(--shadow-sm);
  font-size: 0.9rem;
}

/* ============================================
   LINKS
   ============================================ */

#mw-content-text a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition);
}

#mw-content-text a:hover {
  color: var(--color-primary-dark);
  text-decoration: underline;
}

/* ============================================
   FOOTER
   ============================================ */

#footer-icons {
  display: none !important;
}

#footer {
  background: #2c2c2c;
  color: #cccccc;
  padding: 1.5em 2em;
  font-size: 0.85rem;
  font-family: var(--font-sans);
  border-top: 3px solid var(--color-primary);
}

#footer a {
  color: #e8a0a4;
}

#footer a:hover {
  color: #ffffff;
}

/* ============================================
   CONTRIBUTION SECTION
   ============================================ */

.contrib-section-start,
.contrib-section-stop {
  display: none;
}

.contrib-inline-start,
.contrib-inline-stop {
  display: none;
}

/* ============================================
   MAIN PAGE CSS
   ============================================ */

.CategoryTreeItem:hover {
  background-color: #fce8e9;
  border-radius: var(--radius);
  transition: background var(--transition);
}

.mp .CategoryTreeLabel {
  font-size: 1.1rem;
}

.mp-bullet li {
  list-style-type: none;
}

.mp-bullet li:hover {
  background-color: #fce8e9;
  border-radius: var(--radius);
}

.mp-arrow {
  font-size: 0.875rem;
  color: var(--color-primary);
}

.mp-child {
  background-color: var(--color-bg);
  flex: 1 0 auto;
  padding: 1.8em 2em;
  flex-basis: 40%;
  box-shadow: var(--shadow-md);
  border-radius: var(--radius);
  text-align: left !important;
  border-top: 4px solid var(--color-primary);
  transition: transform var(--transition), box-shadow var(--transition);
}

.mp-child:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

.mp-box {
  display: flex;
  justify-content: space-around;
  height: fit-content;
  flex-wrap: wrap;
  padding: 1.1em;
  align-content: stretch;
  margin: auto !important;
  column-gap: 1.5em;
  row-gap: 1.5em;
  align-items: stretch;
  border-top: 5px solid var(--color-primary);
  padding-top: 2em;
}

.mp-heading {
  padding: 0.1em;
  margin-top: 0px;
}

.mp-headline {
  font-family: var(--font-sans);
  font-size: calc(28px + 5vw) !important;
  font-weight: 800;
  line-height: 1.1;
  padding-bottom: 0.5vw;
  margin: auto !important;
  max-width: 100% !important;
  text-align: center !important;
  color: var(--color-text);
  letter-spacing: -0.02em;
}

.mp-subhead {
  font-family: var(--font-sans);
  font-size: calc(6px + 1.5vw) !important;
  font-weight: 400;
  line-height: 1.6;
  margin: 0 0 60px;
  text-align: center;
  letter-spacing: 4px !important;
  color: var(--color-muted);
  text-transform: uppercase;
}

.mp-abstract {
  padding: 1em 1.5em;
  font-size: 1.05rem;
  margin: auto !important;
  text-align: left !important;
  padding-bottom: 1em;
  line-height: 1.8;
}

#mp-participate {
  text-align: left !important;
  font-size: 1.05rem;
}

#mp-authors {
  font-size: 1.05rem;
  text-align: left !important;
  padding: 1em 1.5em;
}

#mp-news {
  font-size: 1.05rem;
  padding: 1em 1.5em;
}

/* End Main Page CSS */

/* ============================================
   REFERENCES
   ============================================ */

.reference {
  text-decoration: none;
  font-size: 75%;
  font-weight: normal;
  color: var(--color-primary);
}

.references {
  font-size: 0.85rem;
  line-height: 1.6;
  border-top: 2px solid var(--color-border);
  padding-top: 1em;
  margin-top: 2em;
}

/* ============================================
   MISC UTILITIES
   ============================================ */

#mw-content-text p {
  text-align: left !important;
  padding-left: 1em;
  padding-right: 1em;
}

#mp-br {
  height: 1vw;
}

.padding-left {
  padding-left: 1em;
}

.mw-wiki-logo {
  width: 300px !important;
}

p>br:only-child {
  display: none;
}

.rootpage-Hauptseite .title-section {
  display: block !important;
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media only screen and (max-width: 991px) {
  .mp-box {
    flex-direction: column;
  }

  .mw-parser-output {
    overflow-x: hidden;
  }

  h2 {
    font-size: 1.5rem;
  }

  .mp-headline {
    font-size: calc(22px + 5vw) !important;
  }
}

/* ============================================
   EDIT BOX ICON
   ============================================ */

.infektiopedia-editbox > i.icon-pencil::before {
  content: "✎";
  font-family: sans-serif;
  color: var(--color-muted);
}

/* TOC bold toggle */
.toclimit-2 > b,
.toclimit-3 > b,
.toclimit-4 > b,
.toclimit-5 > b,
.toclimit-6 > b,
.toclimit-7 > b {
  display: none;
}

/* Hauptseite: hide title bar and discussion tab */
.page-Hauptseite .vector-page-titlebar,
.page-Hauptseite .vector-page-toolbar {
  display: none !important;
}

/* ============================================
   TABLE OF CONTENTS
   ============================================ */

.toc {
  background: #fafafa;
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius);
  padding: 1em 1.5em;
  display: inline-block;
  min-width: 220px;
  box-shadow: var(--shadow-sm);
  font-family: var(--font-sans);
  font-size: 0.92rem;
}

.toc li {
  line-height: 1.8;
}

.toc a {
  color: var(--color-primary) !important;
  text-decoration: none !important;
}

.toc a:hover {
  text-decoration: underline !important;
  color: var(--color-primary-dark) !important;
}

/* ============================================
   SCROLLBAR (WebKit)
   ============================================ */

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: #cccccc;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-primary);
}