MediaWiki:Common.css: Difference between revisions

← Older edit

@@ Line 1: / Line 1: @@
 /* CSS placed here will be applied to all skins */
+/* light mode */
+:root, .skin-theme-clientpref-day {
+	--vw-bg-page:		#f8f9fa;
+	--vw-bg-surface:	#ffffff;
+	--vw-bg-subtle:		#f8f9fa;
+	--vw-bg-heading:	#EAECF0;
+	--vw-text-subtle:   #555555;
+	--vw-border:		#A2A9B1;
+	--vw-accent:		#af3350;
+	--vw-accent-subtle:	#f5dde2;
+	--vw-gold:			#b7a054;
+	--vw-gold-subtle:	#f4f0dc;
+	--vw-green:			#6bb754;
+	--vw-green-subtle:	#e0f4dc;
+	--vw-teal:			#338a76;
+	--vw-teal-subtle:	#dcf4f0;
+	--vw-blue:			#546bb7;
+	--vw-blue-subtle:	#dce0f4;
+	--vw-violet:		#76338A;
+	--vw-violet-subtle:	#f0dcf4;
+}
+/* dark mode */
+.skin-theme-clientpref-night {
+	--vw-bg-page:		#101418;
+	--vw-bg-surface:	#1e2227;
+	--vw-bg-subtle:		#2a2f36;
+	--vw-bg-heading: 	#27292D;
+	--vw-text-subtle:   #BBBBBB;
+	--vw-border:		#72777D;
+	--vw-accent:		#ad6171;
+	--vw-accent-subtle:	#3d1e26;
+	--vw-gold:			#ad9c61;
+	--vw-gold-subtle:	#3e351e;
+	--vw-green:			#74ad61;
+	--vw-green-subtle:	#263e1e;
+	--vw-teal:			#61ad9b;
+	--vw-teal-subtle:	#1e3e35;
+	--vw-blue:			#6171ad;
+	--vw-blue-subtle:	#1e263e;
+	--vw-violet:		#9c61ad;
+	--vw-violet-subtle:	#351e3e;
+}
+@media ( prefers-color-scheme: dark ) {
+    .skin-theme-clientpref-os {
+		--vw-bg-page:		#101418;
+		--vw-bg-surface:	#1e2227;
+		--vw-bg-subtle:		#2a2f36;
+		--vw-bg-heading: 	#27292D;
+		--vw-text-subtle:   #BBBBBB;
+		--vw-border:		#72777D;
+		--vw-accent:		#F2A0B2;
+		--vw-accent-subtle:	#3d1e26;
+		--vw-gold:			#ad9c61;
+		--vw-gold-subtle:	#3e351e;
+		--vw-green:			#74ad61;
+		--vw-green-subtle:	#263e1e;
+		--vw-teal:			#61ad9b;
+		--vw-teal-subtle:	#1e3e35;
+		--vw-blue:			#6171ad;
+		--vw-blue-subtle:	#1e263e;
+		--vw-violet:		#9c61ad;
+		--vw-violet-subtle:	#351e3e;
+    }
+}
+.skin-theme-clientpref-night .mw-logo-icon {
+    filter: invert(1);
+}
+@media ( prefers-color-scheme: dark ) {
+    .skin-theme-clientpref-os .mw-logo-icon {
+        filter: invert(1);
+    }
+}
 #footer-info li, #footer-places li {
      font-size: 14px;
@@ Line 6: / Line 90: @@
 .mw-logo-wordmark {
      font-size: 1.5rem;
-     color: maroon;
+     color: var(--vw-accent);
 }
@@ Line 13: / Line 97: @@
      padding-left: 1.5em;
      margin-bottom: 0.5em;
+}
+.infobox {
+    float: right;
+    margin: 0 0 1em 1em;
+}
+@media (max-width: 600px) {
+    .infobox {
+        width: 100% !important;
+        float: none !important;
+        margin: 0 0 1em 0;
+        box-sizing: border-box;
+    }
+    .infobox img {
+        max-width: 100% !important;
+        overflow: hidden;
+    }
+}
+@media (min-width: 601px){
+	.infobox{
+		max-width: 300px !important;
+	}
 }
@@ Line 19: / Line 125: @@
 }
+#welcome-box {
+	border: 2px solid var(--vw-accent);
+	background-color: var(--vw-accent-subtle);
+}
 #welcome-box h1 {
-	border-bottom-color: #C2637A;
+	border-bottom-color: var(--vw-accent);
-	width: 50%;
+	width: min(100%, 400px);
+}
+#events-box, #feature-box {
+    flex: 1;
+    min-width: 280px;
 }
-#events-box h2 { border-bottom-color: #627ac1; }
-#bulletin-box h2 { border-bottom-color: #62c1aa; }
-.documentation .mw-editsection {
+#events-box {
+	border: 2px solid var(--vw-blue);
+	background-color: var(--vw-blue-subtle);
+}
+#events-box h2 { border-bottom-color: var(--vw-blue); }
+#bulletin-box {
+	border: 2px solid var(--vw-green);
+	background-color: var(--vw-green-subtle);
+}
+#bulletin-box h2 { border-bottom-color: var(--vw-green); }
+#feature-box {
+	border: 2px solid var(--vw-gold);
+	background-color: var(--vw-gold-subtle);
+}
+#feature-box h2 { border-bottom-color: var(--vw-gold); }
+.documentation .mw-editsection:not(.documentation-edit) {
      display: none;
+}
+.poster-container {
+	display:flex; flex-wrap:wrap; gap:0.4em;
 }