Benutzer:MScharwies/common.css

Hinweis: Leeren Sie nach dem Speichern den Browser-Cache, um die Änderungen sehen zu können.

• Firefox/Safari: Umschalttaste drücken und gleichzeitig Aktualisieren anklicken oder entweder Strg+F5 oder Strg+R (⌘+R auf dem Mac) drücken
• Google Chrome: Umschalttaste+Strg+R (⌘+Umschalttaste+R auf dem Mac) drücken
• Internet Explorer: Strg+F5 drücken oder Strg drücken und gleichzeitig Aktualisieren anklicken
• Opera: Extras → Internetspuren löschen … → Individuelle Auswahl → Den kompletten Cache löschen

@media screen and (prefers-color-scheme: dark) {
	:root { 
		--bgcolor: var(--blue-dark2);
		--bgdarker: var(--blue-dark3);
		--text-color: white;
		--link-color: var(--blue1);
		--mw-panel-bg: var(--blue);
		--mw-panel-border: var(--blue1);
		--mw-panel-head: var(--yellow3);
		--mw-panel-headbg: var(--blue-dark);
		--h1-color: var(--yellow);

	}

    a, .mw-body a, .mw-body a.external {
        color: var(--link-color);
    }

	#toc, .toc, .mw-warning {
		background-color: var(--bgdarker);
		border-color: var(--mw-panel-border);
	}
    #toc a, .toc a > span, #mw-navigation a, .tocright.aside a {
        color: white;
        text-decoration: none;
    }

	#mw-content-text .cards-list .card {
		background: linear-gradient(110deg, var(--bgcolor) 20%, var(--bgdarker));
	}
	#mw-content-text :is(h2,h3,h4,h5,h6) {
		color: var(--yellow);
	}
}

@media screen and (prefers-color-scheme: dark) {
	mark,
	mark.mark-gelb { background-color: var(--brown1); }
	mark.mark-rot  { background-color: var(--maroon1); }
	mark.mark-blau { background-color: var(--blue); }
	mark.mark-grün { background-color: var(--moss1); }
}

#mw-navigation #mw-head #selfhtml-navigation {
  position: static;
  margin-left: 1.75em;
}

#mw-navigation #mw-head #selfhtml-navigation .body ul {
  float: none;
  display: flex;
  align-items: center;
  margin-top: 0;
  height: var(--head-height);
}

@media screen and (min-width: 40em) {

/* Layout part */
  #n-Verein::after { content: '>=40em'; }

  body {
    display: grid;
    grid:
      "head head" auto
      "nav content" auto
      "nav footer" auto / auto 1fr;
    padding-top: 0;
    gap: 0 0.75em;
  }
  #mw-page-base, #mw-head-base {  /* Relikte aus Vektor, brauchen wir nicht */
    display: none;
  }
  #content {
    grid-area: content;
    margin: 0;
    padding: 0 calc(var(--qa-gap) + var(--qa-iconsize)) 1em 0;
  }
  #footer {
    grid-area: footer;
  }
  #mw-navigation {
    display: contents;   /* mw-head und mw-panel für Grid erreichbar machen */
  }
  #mw-navigation #mw-head {
    position: static;
    grid-area: head;
  }
  #mw-navigation #mw-head #p-personal {
    position: static;
    border-top: none;
    margin: 0em;
    padding: 0.2em 0 0.4em 0;
  }
  #mw-navigation #mw-head #p-personal ul {
    position: static;
    margin: 0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.75em;
  }
  #mw-navigation #mw-head #p-personal li {
    float: none;
    margin: 0;
  }
  #mw-navigation #mw-head #p-personal #p-search {
    margin: 0;
    float: none;
  }
  #mw-navigation #navigation-container {
    display: none;   /* Ist alles nach links gezogen */
  }
  #mw-navigation #mw-panel {
    grid-area: nav;
    padding: 0 0.5em;
    position: static;
  }
  #mw-navigation #mw-panel #p-logo {
    position: static;
    width: 5em;
    margin: -2.5em auto 0.5em auto;
    translate: unset;
  }
  #mw-navigation #mw-panel #p-logo a {
    display: none;
  }
  #mw-navigation #mw-panel div.portal {
     padding: 0.5em 0 0 0;
     margin: 0;
  }

/* Content part */

  #firstHeading {
    margin: 0 0 0.3em 0;
  }
  .page-SELFHTML #firstHeading {
    text-align: center;
    font-size: 275%;
    margin: 0;
    padding: 0 0 0.3rem 0;
    color: var(--yellow);
    text-shadow: 2px 2px var(--text-color);
  }
}