MediaWiki:Monobook.css: Unterschied zwischen den Versionen

← Zum vorherigen Versionsunterschied

@@ Zeile 1: / Zeile 1: @@
 /* Das folgende CSS wird für Benutzer der Benutzeroberfläche MonoBook geladen */
 @media screen {
-   body {
+   body { /* überschreibe MonoBook-Hintergrundbild mit Farbe Almadanerblau */
 	background-image: none;
 	background-color: #003993;
@@ Zeile 9: / Zeile 9: @@
 @media screen {
 	body:not(.skin--responsive), body.skin--responsive {
-		.portlet h3 {
+		.portlet { /* seitliches Menü leicht vom Rand absetzen */
+			margin-bottom: 0.5em;
+			margin-left: 0.3em;
+		}
+		.portlet h3 { /* Überschriften der seitlichen Menüs (Navigation, Suche, Werkzeuge...) */
 	    	color: white;
 	    	font-weight: normal;
 	    	margin: 0 0 0 0;
-	    /*	padding: 0.4em 0.4em; */
-	    	cursor: default;
 	    	border: 0;
-	    	background: #cd0000;
+	    	background: #cd0000; /* Almadaner-Rot */
-	    /*	width: 11.6em; */
+			padding: 0.2em 11em 0.2em 0.5em; /* Breite auf die Breite des Kastens darunter ausdehnen */
-			padding: 0.2em 11em 0.2em 0.5em;
+		}
+		.pBody { /* kleiner Abstand oberhalb der Menü-Inhaltskästen, damit Überschrift optisch abgesetzt wird */
+		 	margin: 0.2em 0em 0em 0em;
+		 	background-color: white;
 		}
 	}
+	body.skin--responsive #menus-cover-background, body.skin--responsive #menus-cover {
+	 	background: none; /* zeige Seiteninhalt unmodifiziert an, auch wenn ein Overlay-Menü aktiv ist */
+	 	opacity: 0;
+	}
+	body.skin--responsive .mobile-menu-active {
+	 	border: solid 2px #cd0000;
+	 	#ca-talk, #ca-edit { /* einblenden */
+	 		position: unset;
+	 	}
+	 	#ca-view { /* ausblenden, man kann das Menü ja einfach zumachen */
+	 		position: absolute;
+    		top: -9999px;
+    		left: 0;
+	 	}
+	}
+}
-body:not(.skin--responsive) #p-personal li a, body.skin--responsive #p-personal li a {
+@media screen and (max-width: 550px) {
-	color: white;
+	body:not(.skin--responsive), body.skin--responsive {
+		#ca-favorite.icon a, #ca-unfavorite.icon a {
+		 /*background-image: url(/images/fav-icons.png);
+		  background-position: 0px -25%;*/
+		  background: none;
+		  padding-top: 0.65em;
+		  padding-bottom: 2em;
+		  width: inherit;
+		  visibility: hidden;
+		}
+		#ca-favorite.icon a:hover, #ca-unfavorite.icon a:hover {
+			background: none;
+		}
+		#ca-favorite.icon a:before {
+			content: "zu Favoriten hinzufügen";
+			visibility: visible;
+		}
+		#ca-unfavorite.icon a:before {
+			content: "aus Favoriten entfernen";
+			visibility: visible;
+		}
+		#p-cactions-mobile li#ca-more a {
+			color: white;
+		}
+		#searchBody {
+			position: fixed;
+		    top: 3px;
+		    left: 57px;
+		    width: 65%;
+		}
+		#echo-hack-badges {
+			left: -30px;
+			pointer-events: unset;
+		}
+		#p-cactions-mobile li#talk-mobile a {
+			background-image: url(images/speech_balloon.svg);
+    		background-size: 18px;
+		}
+		li#ca-addsection a:after{
+			content: " neuer Abschnitt";
+		}
+		#p-cactions-mobile .pBody {
+			background: unset;
+		}
+	}
 }
-body:not(.skin--responsive) #p-personal li a:hover, body.skin--responsive #p-personal li a:hover {
-	background-color: rebeccapurple;
+@media screen and (min-width: 551px) {
+	body:not(.skin--responsive), body.skin--responsive {
+		#p-personal li a {
+			/* Links in der Menüzeile ganz oben weiß einfärben, sonst zu dunkel */
+			color: white;
+		}
+		#p-personal li a:hover { /* visueller Indikator */
+			background-color: rebeccapurple;
+		}
+		#ca-favorite.icon a, #ca-favorite.icon a:hover {
+			display: unset;
+			background-image: url(/images/fav-icons.png);
+			background-position: 4px 3px;
+			background-size: 60px;
+		}
+		#ca-unfavorite.icon a, #ca-unfavorite.icon a:hover {
+			display: unset;
+			background-image: url(/images/fav-icons.png);
+			background-position: -45px 3px;
+			background-size: 60px;
+		}
+		#ca-unfavorite.icon a:before, #ca-favorite.icon a:before {
+			content: "   ";
+		}
+	}
 }
-body:not(.skin--responsive) #p-personal li a.oo-ui-icon-bell, body.skin--responsive #p-personal li a.oo-ui-icon-bell {
+.oo-ui-icon-bell { /* lade Glockensymbol in weiß, sonst schwarz */
 	background-image: url("eigene_includes/bell.php?fill=ffffff");
 }
-body:not(.skin--responsive) #p-personal li a.oo-ui-icon-tray, body.skin--responsive #p-personal li a.oo-ui-icon-tray {
+.oo-ui-icon-tray { /* lade Briefkastensymbol in weiß, sonst schwarz */
 	background-image: url("eigene_includes/tray.php?fill=ffffff");
-}
- body:not(.skin--responsive) .pBody, body.skin--responsive .pBody {
- 	margin: 0.2em 0em 0em 0em;
- }
 }