MediaWiki:Timeless.css: Unterschied zwischen den Versionen

Aktuelle Version vom 18. August 2024, 15:10 Uhr

/* All CSS here will be loaded for users of the Timeless skin */

/* Hier folgen Modifikationen des Timeless skins für unser Wiki. Sie werden automatisch angewandt, wenn der Timeless skin gewählt ist (aktuell der default skin) */

/* Zuerst ein snippet von der Website https://www.mediawiki.org/wiki/Skin:Timeless damit wir sans-serif-Schriftarten für die Top-Leiste haben */

/* Top bar font modernization */
#mw-header *,
#mw-site-navigation *,
#p-logo-text a,
#mw-related-navigation *  { font-family: 'Segoe UI','Segoe UI Emoji','Segoe UI Symbol','Lato','Liberation Sans','Noto Sans','Helvetica Neue','Helvetica',sans-serif  }

/* Avoid cutting off letters with descenders: g,j,p,q,y */
#personal h2 span {
	height: 1.5em;
	position:relative;
	bottom:0.1em;
}

/* Triangle position patch */
#personal h2::after {
	position: relative;
	bottom: 0.5em;
}

/****** fsini customization ******/

/* Erst ein paar Farben und Maße als Variablen, die wir später mit `var(--variable)` benutzen. */
:root{
	/*from the original theme:*/
	--base100: #fff;
	--base20: #54595d;
	--content-width: 115em; /* maximale Content-Breite aller Spalten*/

	/* fsini farben */
	--fsini-light-text: #039;
	--fsini-light-blue: #d5dde6;
	--fsini-blue: #2e5781;
	--fsini-dark-blue: #036;
	--fsini-top-border: var(--fsini-blue);
	--fsini-bottom-border: var(--fsini-dark-blue);
	--fsini-headertext: var(--base100);

	/* eigener Stil*/
	--fsini-side-column-size: 22em;
}

/* Wir ändern nur screen, print ist uns egal/lassen wir so */
@media screen {
	/* Farben für den Header (Seitentitel) */

	/* Header-Container ist blau! */
	#mw-header-container {
		background: var(--fsini-blue);
	}

	/* Schrift im Header muss angepasst werden(User-Dropdown, Seitenname) */
	#mw-header-container h2,
	a#p-banner {
		color: var(--fsini-headertext);
	}

	/* Wir wollen keine Kapitälchen im Seitennamen */
	#p-logo-text a {
		font-variant: unset;
	}
	/* Behandle lange Header(>13 chars) genau wie kurze */
	#p-logo-text a.long {
		font-size: 1.85em;
		padding: 0.1em 1em 0.2em;
		line-height: unset;
	}
	#p-logo-text {
		max-width: unset;
	}
	/* Setze die Farbe der Akzentstreifen auf blau */
	/* Streifen unter dem Header (Searchbox)*/
	.color-left, .color-right, .color-middle {
		background: var(--fsini-top-border);
	}

	/* Streifen unter dem Seitentitel*/
	.mw-body h1.firstHeading {
		border-bottom-color: var(--fsini-dark-blue);
	}

	/* Streifen, der die aktuellen Werkzeugseite (Hauptseite/Diskussion/Versionsgeschichte, etc) hervorhebt */
	.tools-inline li.selected {
		border-bottom-color: var(--fsini-blue);
	}

	/* Streifen über dem Footer */
	#mw-content-container {
		border-bottom-color: var(--fsini-bottom-border);
	}
	#site-tools {
		display:none;
	}
}

/***** MOBILE *****/
@media screen and (max-width: 850px){
	/* Dropdown-Menü-Hintergrundfarbe */
	.sidebar-inner,
	.dropdown {
		background: var(--fsini-light-blue);
	}
	/* Bildschirm wird abgedunkelt wenn man ein dropdown aufmacht (war vorher heller) */
	#menus-cover {
		background: var(--base20);
	}
}

/***** DESKTOP-ALL *****/
@media screen and (min-width: 851px) {
	/* Dropdown-Menü-Hintergrundfarbe */
	#p-variants-desktop .dropdown,
	#personal .dropdown {
		background: var(--fsini-light-blue);
	}

	/* Entferne weißen Rand am Ende von Dropdowns */
	#p-variants-desktop .dropdown:after,
	#personal .dropdown:after {
		border-bottom-color: transparent;
	}
	/* #p-logo {
		display:none;
	}*/
	.mw-wiki-logo.fallback {
		background-size:100%;
		width:unset;
	}
}

/***** DESKTOP-NORMAL (Mid & Full in Timeless) *****/
@media screen and (min-width: 1100px) {
	/* Nav & Inhaltslayout, #mw-content-block ist parent, die folgenden drei sind children
	 * Es reicht, grid-template anzupassen, um das Layout von content und sidebar zu ändern.
	 */
	#mw-content-block {
		--gap: 1em;
		display: grid;
		grid-template-columns: 1fr calc(var(--fsini-side-column-size) - var(--gap));
		grid-template-areas:
          "content nav1"
          "content nav2"
          "content empty" /*Diese und die folgende Zeile sind wichtig, damit die Seitenhöhe passt (kein Whitespace unten und kein Overflow) UND die Sidebar oben kompakt gesammelt ist (und nicht am Rand verteilt)*/
          "content empty";
		grid-column-gap: var(--gap);

	}
	#mw-site-navigation { grid-area: nav1;}
	#mw-related-navigation { grid-area: nav2;}
	#mw-content-wrapper { grid-area: content;}
	/*#mw-content-wrapper { grid-area: content; height:max-content;}
	.visualClear {
		grid-area: empty;
		height:max-content;
	}*/

	/* Entferne das Padding (wird von grid-column-gap übernommen) und setze die Breite */
	#mw-site-navigation,
	#mw-related-navigation {
		padding-left: unset;
		padding-right: 1em;
		width: calc(var(--fsini-side-column-size) - var(--gap));
	}
	/* Hintergrundfarbe für Sidebars, gleicher Abstand */
	#mw-related-navigation .sidebar-chunk,
	#mw-site-navigation .sidebar-chunk
	{
		background: var(--fsini-light-blue);
	}
	#mw-related-navigation > div.sidebar-chunk:first-child {
		margin-top: 0;
	}
	/* User-Dropdown in der Headerleiste muss so breit wie Sidebar sein,
	 * damit die Searchbox mit dem Content aligned ist
	 */
	#user-tools {
		min-width: var(--fsini-side-column-size);
	}
}
@media screen and (min-width: 1100px) and (max-width: 1339px) {
	/* Fix margin-magic for timeless Desktop-mid*/
	#mw-content-wrapper, #mw-content{
		margin-left: unset;
	}
}
/***** DESKTOP-KLEIN *****/
@media screen and (min-width: 851px) and (max-width: 1099px) {
	/* Nur für hohe Auflösungen relevant , sonst ist die Bildschirmbreite eh immer kleiner als max-width */
	#mw-content-block,.ts-inner {
		max-width: var(--content-width) - var(--fsini-side-column-size);
	}

	/* Setze Farbe für die Nav-Dropdowns */
	#mw-related-navigation .sidebar-inner,
	#mw-site-navigation .sidebar-inner {
		background: var(--fsini-light-blue);
	}
	/* Entferne weißen (/farbigen) Streifen am Ende der Menüs*/
	#mw-related-navigation .sidebar-inner:after,
	#mw-site-navigation .sidebar-chunk h2 span:after {
		border-bottom-color: transparent;
	}
}