MediaWiki:Vector-2022.css - Versionsgeschichte

Admin am 27. November 2025 um 14:09 Uhr

2025-11-27T14:09:10Z

← Nächstältere Version		Version vom 27. November 2025, 15:09 Uhr
Zeile 1:		Zeile 1:
	.js-~~foto~~-~~button~~ {		/* Der Container, der die Buttons hält und positioniert */
			.custom-button-wrapper {
	position: fixed;		position: fixed;
	z-index: 99999 !important;		z-index: 99999 !important;
			display: flex; /* Flexbox aktiviert */
			flex-direction: column; /* Buttons untereinander stapeln */
			gap: 10px; /* Abstand zwischen den Buttons */
			pointer-events: none; /* Der Container selbst blockiert keine Klicks drumherum */
			}

			/* Das Aussehen der Buttons */
			.js-custom-button {
			pointer-events: auto; /* Die Buttons müssen klickbar sein */
	cursor: pointer;		cursor: pointer;
	~~pointer-events: auto !important;~~

	background-color: #d33;		background-color: #d33; /* Rot */
	color: #ffffff !important;		color: #ffffff !important;
	font-family: sans-serif;		font-family: sans-serif;
Zeile 14:		Zeile 23:
	box-shadow: 0 4px 8px rgba(0,0,0,0.5);		box-shadow: 0 4px 8px rgba(0,0,0,0.5);
	border: 2px solid white;		border: 2px solid white;

			/* Animation für Hover */
			transition: transform 0.2s, background-color 0.2s;
			}

			/* Hover-Effekt für beide Buttons */
			.js-custom-button:hover {
			background-color: #ff0000;
			transform: scale(1.05);
	}		}

	/* PC ~~Ansicht~~ */		/* --- PC / DESKTOP --- */
	@media screen and (min-width: 769px) {		@media screen and (min-width: 769px) {
	.js-~~foto~~-~~button~~ {		.custom-button-wrapper {
	top: 80px;		top: 80px;
	right: 20px;		right: 20px;
			}

			.js-custom-button {
	padding: 10px 20px;		padding: 10px 20px;
	border-radius: 5px;		border-radius: 5px;
Zeile 27:		Zeile 48:
	}		}

	/* ~~Handy Ansicht~~ */		/* --- HANDY / MOBILE --- */
	@media screen and (max-width: 768px) {		@media screen and (max-width: 768px) {
	.js-~~foto~~-~~button~~ {		.custom-button-wrapper {
	top: auto;		top: auto;
	bottom: 30px;		bottom: 30px; /* Abstand vom unteren Rand */
	right: 20px;		right: 20px;
	~~padding: 15px 25px;~~
	~~border-radius: 50px;~~
	~~font-size: 16px;~~
	}		}
	}
			.js-custom-button {
	.js-~~foto~~-button:~~hover {~~		padding: 12px 20px;
	~~background~~-~~color~~: ~~#ff0000~~;		border-radius: 50px; /* Pillen-Form auf Handy */
	~~transform~~: ~~scale(1.05)~~;		font-size: 14px;
			}
	}		}

Admin am 27. November 2025 um 14:00 Uhr

2025-11-27T14:00:39Z

← Nächstältere Version		Version vom 27. November 2025, 15:00 Uhr
Zeile 1:		Zeile 1:
	.js-foto-button {		.js-foto-button {
	~~/* WICHTIG: Damit der Button über ALLEM liegt und klickbar ist */~~
	position: fixed;		position: fixed;
	z-index: ~~2147483647~~ !important; ~~/* Der technisch höchstmögliche Wert */~~		z-index: 99999 !important;
	cursor: pointer; ~~/* Zeigt die Hand beim Drüberfahren */~~		cursor: pointer;
			pointer-events: auto !important;

	~~/* Design */~~
	background-color: #d33;		background-color: #d33;
	color: #ffffff;		color: #ffffff !important;
	font-family: sans-serif;		font-family: sans-serif;
	font-weight: bold;		font-weight: bold;
	text-transform: uppercase;		text-transform: uppercase;
	text-align: center;		text-align: center;
			text-decoration: none !important;
	box-shadow: 0 4px 8px rgba(0,0,0,0.5);		box-shadow: 0 4px 8px rgba(0,0,0,0.5);
	border: 2px solid white; ~~/* Weißer Rand macht ihn sichtbarer */~~		border: 2px solid white;
	}		}

	/* ~~--- DESKTOP (~~PC~~/Laptop) ---~~ */		/* PC Ansicht */
	@media screen and (min-width: 769px) {		@media screen and (min-width: 769px) {
	.js-foto-button {		.js-foto-button {
	top: 80px; ~~/* Unterhalb der Kopfzeile */~~		top: 80px;
	right: 20px; ~~/* Ganz rechts am Rand */~~		right: 20px;
	padding: 10px 20px;		padding: 10px 20px;
	border-radius: 5px;		border-radius: 5px;
Zeile 27:		Zeile 27:
	}		}

	/* ~~--- HANDY (Mobile) ---~~ */		/* Handy Ansicht */
	@media screen and (max-width: 768px) {		@media screen and (max-width: 768px) {
	.js-foto-button {		.js-foto-button {
	top: auto; ~~/* Nicht oben */~~		top: auto;
	bottom: 30px; ~~/* Sondern unten */~~		bottom: 30px;
	right: 20px; ~~/* Rechts */~~		right: 20px;
	padding: 15px ~~20px~~;		padding: 15px 25px;
	border-radius: 50px; ~~/* Rund */~~		border-radius: 50px;
	font-size: 16px;		font-size: 16px;
	}		}
	}		}

	~~/* Hover-Effekt */~~
	.js-foto-button:hover {		.js-foto-button:hover {
	background-color: #ff0000;		background-color: #ff0000;
	transform: scale(1.05);		transform: scale(1.05);
	}		}

Admin am 27. November 2025 um 13:40 Uhr

2025-11-27T13:40:44Z

← Nächstältere Version		Version vom 27. November 2025, 14:40 Uhr
Zeile 1:		Zeile 1:
	~~/* Styling für den JavaScript-Button */~~
	.js-foto-button {		.js-foto-button {
	position: fixed; ~~/* Fixiert am Bildschirm */~~		/* WICHTIG: Damit der Button über ALLEM liegt und klickbar ist */
	z-index: ~~9999; /* Über allem anderen (wichtig~~!~~) */~~		position: fixed;
			z-index: 2147483647 !important; /* Der technisch höchstmögliche Wert */
	~~/* Aussehen Desktop (Standard) */~~		cursor: pointer; /* Zeigt die Hand beim Drüberfahren */
	~~top: 15px~~; /* ~~Ganz oben~~ */
	~~right~~: ~~120px~~; /* ~~Etwas links vom Benutzermenü/Suche~~ */

			/* Design */
	background-color: #d33;		background-color: #d33;
	color: #ffffff ~~!important~~;		color: #ffffff;
	~~padding~~: ~~8px 15px~~;		font-family: sans-serif;
	font-weight: bold;		font-weight: bold;
	~~font~~-~~family~~: ~~sans-serif~~;		text-transform: uppercase;
	text-~~decoration: none !important;~~		text-align: center;
	~~border-radius~~: ~~4px~~;		box-shadow: 0 4px 8px rgba(0,0,0,0.5);
	box-shadow: 0 ~~2px 5px~~ rgba(0,0,0,0.5);		border: 2px solid white; /* Weißer Rand macht ihn sichtbarer */
	~~font-size~~: ~~14px~~;
	}		}

	/* ~~Hover~~-~~Effekt~~ */		/* --- DESKTOP (PC/Laptop) --- */
	.js-foto-button:~~hover {~~		@media screen and (min-width: 769px) {
	~~background~~-~~color~~: ~~#f00~~;		.js-foto-button {
	~~transform~~: ~~scale(1.05)~~;		top: 80px; /* Unterhalb der Kopfzeile */
	~~cursor: pointer;~~		right: 20px; /* Ganz rechts am Rand */
			padding: 10px 20px;
			border-radius: 5px;
			font-size: 14px;
			}
	}		}

	/* --- HANDY ~~ANSICHT~~ (Mobile) --- */		/* --- HANDY (Mobile) --- */
	@media screen and (max-width: 768px) {		@media screen and (max-width: 768px) {
	.js-foto-button {		.js-foto-button {
	top: auto; /* Nicht oben */		top: auto; /* Nicht oben */
	bottom: ~~20px~~; /* Sondern unten */		bottom: 30px; /* Sondern unten */
	right: 20px; /* Rechts */		right: 20px; /* Rechts */
			padding: 15px 20px;
	padding: 15px 20px; ~~/* Größerer Touch-Bereich */~~		border-radius: 50px; /* Rund */
	border-radius: 50px; /* ~~Pillen-Form~~ */
	font-size: 16px;		font-size: 16px;
	~~box-shadow: 0 4px 10px rgba(0,0,0,0.5);~~
	}		}
			}

			/* Hover-Effekt */
			.js-foto-button:hover {
			background-color: #ff0000;
			transform: scale(1.05);
	}		}

Admin am 27. November 2025 um 13:28 Uhr

2025-11-27T13:28:54Z

← Nächstältere Version		Version vom 27. November 2025, 14:28 Uhr
Zeile 1:		Zeile 1:
	/* ~~Der~~ Button ~~selbst~~ */		/* Styling für den JavaScript-Button */
	.~~mein~~-foto-button {		.js-foto-button {
	position: fixed; /* Fixiert am Bildschirm */		position: fixed; /* Fixiert am Bildschirm */
	~~top: 70px; /* Abstand von oben (unterhalb der Kopfzeile) */~~		z-index: 9999; /* Über allem anderen (wichtig!) */
	~~right: 15px; /* Abstand von rechts~~ */
	z-index: ~~3000~~; /* ~~Höher als alles andere~~ (~~Menüs etc.~~) */

	~~display~~: ~~block~~;		/* Aussehen Desktop (Standard) */
	background-color: #d33; ~~/* Rot */~~		top: 15px; /* Ganz oben */
	color: #ffffff !important; ~~/* Weiß */~~		right: 120px; /* Etwas links vom Benutzermenü/Suche */
	padding: ~~10px 20px~~;
			background-color: #d33;
			color: #ffffff !important;
			padding: 8px 15px;
	font-weight: bold;		font-weight: bold;
	font-family: sans-serif;		font-family: sans-serif;
	text-decoration: none !important;		text-decoration: none !important;
	border-radius: ~~5px~~;		border-radius: 4px;
	box-shadow: 0 ~~4px 8px~~ rgba(0,0,0,0.4);		box-shadow: 0 2px 5px rgba(0,0,0,0.5);
	~~text-transform: uppercase~~;
	font-size: 14px;		font-size: 14px;
	}		}

	/* Hover-Effekt */		/* Hover-Effekt */
	.~~mein~~-foto-button:hover {		.js-foto-button:hover {
	background-color: #f00;		background-color: #f00;
	transform: scale(1.05);		transform: scale(1.05);
			cursor: pointer;
	}		}

	/* ~~WICHTIG: Auf dem Handy etwas kleiner und weiter unten,~~		/* --- HANDY ANSICHT (Mobile) --- */
	~~damit es nicht das Benutzermenü verdeckt~~ */
	@media screen and (max-width: 768px) {		@media screen and (max-width: 768px) {
	.~~mein~~-foto-button {		.js-foto-button {
	top: auto; /* Nicht ~~mehr~~ oben ~~fixieren~~ */		top: auto; /* Nicht oben */
	bottom: 20px; /* Sondern unten ~~rechts (wie ein Chat-Button)~~ */		bottom: 20px; /* Sondern unten */
	right: 20px;		right: 20px; /* Rechts */

			padding: 15px 20px; /* Größerer Touch-Bereich */
			border-radius: 50px; /* Pillen-Form */
	font-size: 16px;		font-size: 16px;
	~~padding: 15px 25px;~~		box-shadow: 0 4px 10px rgba(0,0,0,0.5);
	~~border~~-~~radius~~: ~~50px~~; ~~/* Runder "Pille"-Look auf Handy */~~
	}		}
	}		}

Admin am 27. November 2025 um 13:25 Uhr

2025-11-27T13:25:06Z

← Nächstältere Version	Version vom 27. November 2025, 14:25 Uhr
Zeile 1:	Zeile 1:
		/* Der Button selbst */
		.mein-foto-button {
		position: fixed; /* Fixiert am Bildschirm */
		top: 70px; /* Abstand von oben (unterhalb der Kopfzeile) */
		right: 15px; /* Abstand von rechts */
		z-index: 3000; /* Höher als alles andere (Menüs etc.) */

		display: block;
		background-color: #d33; /* Rot */
		color: #ffffff !important; /* Weiß */
		padding: 10px 20px;
		font-weight: bold;
		font-family: sans-serif;
		text-decoration: none !important;
		border-radius: 5px;
		box-shadow: 0 4px 8px rgba(0,0,0,0.4);
		text-transform: uppercase;
		font-size: 14px;
		}

		/* Hover-Effekt */
		.mein-foto-button:hover {
		background-color: #f00;
		transform: scale(1.05);
		}

		/* WICHTIG: Auf dem Handy etwas kleiner und weiter unten,
		damit es nicht das Benutzermenü verdeckt */
		@media screen and (max-width: 768px) {
		.mein-foto-button {
		top: auto; /* Nicht mehr oben fixieren */
		bottom: 20px; /* Sondern unten rechts (wie ein Chat-Button) */
		right: 20px;
		font-size: 16px;
		padding: 15px 25px;
		border-radius: 50px; /* Runder "Pille"-Look auf Handy */
		}
		}

Admin: Die Seite wurde geleert.

2025-11-27T13:23:37Z

Die Seite wurde geleert.

← Nächstältere Version		Version vom 27. November 2025, 14:23 Uhr
Zeile 1:		Zeile 1:
	~~/* Den Menüpunkt "Fotos" aus der Leiste herauslösen und fixieren */~~
	~~#n-Fotos {~~
	~~position: fixed !important;~~
	~~top: 80px; /* Abstand von oben - etwas tiefer, damit es nicht das Benutzermenü verdeckt */~~
	~~right: 20px; /* Abstand von rechts */~~
	~~z-index: 999; /* Ganz weit vorne */~~
	~~list-style: none !important; /* Keine Aufzählungspunkte */~~
	~~margin: 0 !important;~~
	}

	~~/* Den eigentlichen Link zum Button stylen */~~
	~~#n-Fotos a {~~
	~~display: block !important;~~
	~~background-color: #d33; /* Roter Hintergrund */~~
	~~color: #fff !important; /* Weiße Schrift */~~
	~~padding: 12px 25px !important; /* Größe des Buttons */~~
	~~text-decoration: none !important;~~
	~~font-weight: bold;~~
	~~font-size: 16px;~~
	~~border-radius: 8px; /* Runde Ecken */~~
	~~box-shadow: 0 4px 6px rgba(0,0,0,0.3); /* Schatten für 3D-Effekt */~~
	~~text-transform: uppercase; /* Großbuchstaben */~~
	}

	~~/* Hover-Effekt (Maus drüber) */~~
	~~#n-Fotos a:hover {~~
	~~background-color: #f00; /* Helleres Rot */~~
	~~transform: scale(1.05); /* Leicht vergrößern */~~
	}

	~~/* Das Icon neben dem Text ausblenden (falls vorhanden) */~~
	~~#n-Fotos a::before {~~
	~~display: none !important;~~
	}

Admin am 27. November 2025 um 13:16 Uhr

2025-11-27T13:16:18Z

← Nächstältere Version		Version vom 27. November 2025, 14:16 Uhr
Zeile 1:		Zeile 1:
	/* 1. Den ~~Container-Bereich (Sidebar) nach oben rechts verschieben~~ */		/* Den Menüpunkt "Fotos" aus der Leiste herauslösen und fixieren */
	#p-Fotos~~-Button~~ {		#n-Fotos {
	position: fixed; ~~/* Fixiert ihn relativ zum Browserfenster */~~		position: fixed !important;
	top: ~~20px~~; /* Abstand ~~vom oberen Rand~~ */		top: 80px; /* Abstand von oben - etwas tiefer, damit es nicht das Benutzermenü verdeckt */
	right: 20px; /* Abstand ~~vom rechten Rand~~ */		right: 20px; /* Abstand von rechts */
	z-index: ~~100~~; /* ~~Sorgt dafür, dass er über anderen Elementen liegt~~ */		z-index: 999; /* Ganz weit vorne */
	~~background~~: none; /* Keine ~~Hintergrundfarbe für den Container~~ */		list-style: none !important; /* Keine Aufzählungspunkte */
	~~border~~: ~~none~~;		margin: 0 !important;
	}		}

	/* 2. Den eigentlichen Link ~~(den~~ Button) stylen */		/* Den eigentlichen Link zum Button stylen */
	#p-Fotos~~-Button li~~ a {		#n-Fotos a {
	display: block;		display: block !important;
	~~padding: 10px 20px~~ !important; ~~/* Button-Größe */~~		background-color: #d33; /* Roter Hintergrund */
	background-color: #~~CC3333~~; /* ~~Auffällige Farbe (dunkles Rot)~~ */		color: #fff !important; /* Weiße Schrift */
	color: #~~ffffff~~ !important; /* Weiße Schrift */		padding: 12px 25px !important; /* Größe des Buttons */
	~~text-align~~: ~~center~~;		text-decoration: none !important;
	text-decoration: none;
	font-weight: bold;		font-weight: bold;
	border-radius: ~~5px~~; /* ~~Abgerundete~~ Ecken */		font-size: 16px;
	box-shadow: ~~2px 2px 5px~~ rgba(0, 0, 0, 0.3); /* ~~Leichter~~ Schatten */		border-radius: 8px; /* Runde Ecken */
	~~font~~-~~size: 1.2em; /* Große Schrift */~~		box-shadow: 0 4px 6px rgba(0,0,0,0.3); /* Schatten für 3D-Effekt */
	~~transition~~: ~~background-color 0.3s~~; /* ~~Weicher Hover-Effekt~~ */		text-transform: uppercase; /* Großbuchstaben */
	}		}

	/* 3. Hover-Effekt ~~für Benutzerfreundlichkeit~~ */		/* Hover-Effekt (Maus drüber) */
	#p-Fotos~~-Button li~~ a:hover {		#n-Fotos a:hover {
	background-color: #~~FF4444~~; /* ~~Hellere Farbe beim Überfahren~~ */		background-color: #f00; /* Helleres Rot */
			transform: scale(1.05); /* Leicht vergrößern */
	}		}

	/* ~~4. Verstecke den Titel "Fotos-Button" des Containers~~ (~~da er nicht benötigt wird~~) */		/* Das Icon neben dem Text ausblenden (falls vorhanden) */
	#p-Fotos~~-Button .sidebar-portlet-header~~ {		#n-Fotos a::before {
	display: none;		display: none !important;
	}		}

Admin: Die Seite wurde neu angelegt: „/* 1. Den Container-Bereich (Sidebar) nach oben rechts verschieben / #p-Fotos-Button { position: fixed; / Fixiert ihn relativ zum Browserfenster / top: 20px; / Abstand vom oberen Rand / right: 20px; / Abstand vom rechten Rand / z-index: 100; / Sorgt dafür, dass er über anderen Elementen liegt / background: none; / Keine Hintergrundfarbe für den Container / border: none; } / 2. Den eigentlichen Link (den…“

2025-11-27T13:07:47Z

Die Seite wurde neu angelegt: „1. Den Container-Bereich (Sidebar) nach oben rechts verschieben: #p-Fotos-Button { position: fixed; Fixiert ihn relativ zum Browserfenster: top: 20px; Abstand vom oberen Rand: right: 20px; Abstand vom rechten Rand: z-index: 100; Sorgt dafür, dass er über anderen Elementen liegt: background: none; Keine Hintergrundfarbe für den Container: border: none; } /* 2. Den eigentlichen Link (den…“

Neue Seite

/* 1. Den Container-Bereich (Sidebar) nach oben rechts verschieben */
#p-Fotos-Button {
position: fixed; /* Fixiert ihn relativ zum Browserfenster */
top: 20px; /* Abstand vom oberen Rand */
right: 20px; /* Abstand vom rechten Rand */
z-index: 100; /* Sorgt dafür, dass er über anderen Elementen liegt */
background: none; /* Keine Hintergrundfarbe für den Container */
border: none;
}

/* 2. Den eigentlichen Link (den Button) stylen */
#p-Fotos-Button li a {
display: block;
padding: 10px 20px !important; /* Button-Größe */
background-color: #CC3333; /* Auffällige Farbe (dunkles Rot) */
color: #ffffff !important; /* Weiße Schrift */
text-align: center;
text-decoration: none;
font-weight: bold;
border-radius: 5px; /* Abgerundete Ecken */
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); /* Leichter Schatten */
font-size: 1.2em; /* Große Schrift */
transition: background-color 0.3s; /* Weicher Hover-Effekt */
}

/* 3. Hover-Effekt für Benutzerfreundlichkeit */
#p-Fotos-Button li a:hover {
background-color: #FF4444; /* Hellere Farbe beim Überfahren */
}

/* 4. Verstecke den Titel "Fotos-Button" des Containers (da er nicht benötigt wird) */
#p-Fotos-Button .sidebar-portlet-header {
display: none;
}