MediaWiki:Timeless.css - Versionsgeschichte

Markus: Bessere Doku

2024-08-18T15:10:44Z

Bessere Doku

← Nächstältere Version		Version vom 18. August 2024, 15:10 Uhr
Zeile 1:		Zeile 1:
	/* All CSS here will be loaded for users of the Timeless skin */		/* All CSS here will be loaded for users of the Timeless skin */

	/* 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 */		/* Top bar font modernization */
	#mw-header *,		#mw-header *,
Zeile 21:		Zeile 25:

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

			/* Erst ein paar Farben und Maße als Variablen, die wir später mit `var(--variable)` benutzen. */
	:root{		:root{
	/from the original theme:/		/from the original theme:/
Zeile 140:		Zeile 146:
	"content nav1"		"content nav1"
	"content nav2"		"content nav2"
	"content empty" /Diese und die folgende Zeile sind wichtig, damit die Seitenhöhe passt (kein Whitespace unten und kein Overflow) ~~AND~~ die Sidebar oben kompakt gesammelt ist (und nicht am Rand verteilt)/		"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";		"content empty";
	grid-column-gap: var(--gap);		grid-column-gap: var(--gap);

Markus: Logo:AN

2023-06-06T17:39:14Z

Logo:AN

← Nächstältere Version		Version vom 6. Juni 2023, 17:39 Uhr
Zeile 119:		Zeile 119:
	border-bottom-color: transparent;		border-bottom-color: transparent;
	}		}
	#p-logo {		/* #p-logo {
	display:none;		display:none;
	}		}*/
	/* .mw-wiki-logo.fallback {		.mw-wiki-logo.fallback {
	background-size:100%;		background-size:100%;
	width:unset;		width:unset;
	}*/		}
	}		}

Markus: Logo vorbereiten, aber noch ausgeblendet lassen

2023-06-03T20:18:31Z

Logo vorbereiten, aber noch ausgeblendet lassen

← Nächstältere Version		Version vom 3. Juni 2023, 20:18 Uhr
Zeile 122:		Zeile 122:
	display:none;		display:none;
	}		}
			/* .mw-wiki-logo.fallback {
			background-size:100%;
			width:unset;
			}*/
	}		}

Markus: verstecke "Wiki Werkzeuge"

2021-05-22T12:12:31Z

verstecke "Wiki Werkzeuge"

← Nächstältere Version		Version vom 22. Mai 2021, 12:12 Uhr
Zeile 88:		Zeile 88:
	border-bottom-color: var(--fsini-bottom-border);		border-bottom-color: var(--fsini-bottom-border);
	}		}
			#site-tools {

			display:none;
			}
	}		}

Markus: logo verstecken

2021-05-22T11:55:15Z

logo verstecken

← Nächstältere Version		Version vom 22. Mai 2021, 11:55 Uhr
Zeile 116:		Zeile 116:
	#personal .dropdown:after {		#personal .dropdown:after {
	border-bottom-color: transparent;		border-bottom-color: transparent;
			}
			#p-logo {
			display:none;
	}		}
	}		}

Markus: Die Seite wurde neu angelegt: „/* All CSS here will be loaded for users of the Timeless skin / / All CSS here will be loaded for users of the Timeless skin / / Top bar font modernization…“

2021-05-22T11:52:15Z

Die Seite wurde neu angelegt: „All CSS here will be loaded for users of the Timeless skin: All CSS here will be loaded for users of the Timeless skin: /* Top bar font modernization…“

Neue Seite

/* All CSS here will be loaded for users of the Timeless skin */
/* All CSS here will be loaded for users of the Timeless skin */
/* 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 ******/
: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);
}

}

/***** 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;
}
}

/***** 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) AND 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;
}
}