MediaWiki:Common.css: Difference between revisions

← Older edit Newer edit →

@@ Line 771: / Line 771: @@
    max-width: none;
    margin: 0;
-   padding: 0;
+   padding: 0 !important;
+  background: #004080;
 }
 #footer.mw-footer{
    width: 100%;
+  max-width: none !important;
    margin: 0;
    padding: 18px 16px;
-   background: #004080;
+   background: transparent;
    color: #fff;
-   border-top: 1px solid rgba(255,255,255,0.18);
+   display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px 24px;
 }
@@ Line 799: / Line 806: @@
 }
-#footer.mw-footer ul{
+#footer-info,
+#footer-places,
+#footer-icons{
+  list-style: none;
    margin: 0;
    padding: 0;
 }
-#footer.mw-footer li{
+#footer-info{
-   color: #fff;
+  flex: 1 1 420px;
+}
+#footer-info li{
+   margin: 0 0 6px 0;
+}
+#footer-info li:last-child{
+  margin-bottom: 0;
+}
+#footer-places{
+  flex: 1 1 320px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px 14px;
+}
+#footer-places li{
+  margin: 0;
+}
+#footer-icons{
+  flex: 0 0 auto;
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  margin-left: auto;
 }
-#footer-icons a{
+#footer-icons a.cdx-button{
-   background: transparent !important;
+   background: rgba(255,255,255,0.95) !important;
-   border: 1px solid rgba(255,255,255,0.22);
+   border: 1px solid rgba(0,0,0,0.10);
    border-radius: 8px;
 }
@@ Line 816: / Line 853: @@
 #footer-icons img,
 #footer-icons picture{
-   filter: brightness(0) invert(1);
+   filter: none;
 }
+@media (max-width: 720px){
+  #footer.mw-footer{
+    flex-direction: column;
+    align-items: flex-start;
+  }
+  #footer-icons{
+    margin-left: 0;
+  }
+}
+/* Dark mode */
 @media screen{
-   html.skin-theme-clientpref-night #footer.mw-footer{
+   html.skin-theme-clientpref-night .mw-footer-container{
      background: #002a55;
-    border-top-color: rgba(255,255,255,0.14);
    }
+   html.skin-theme-clientpref-night #footer-icons a.cdx-button{
-   html.skin-theme-clientpref-night #footer-icons a{
+     background: rgba(255,255,255,0.92) !important;
-     border-color: rgba(255,255,255,0.18);
    }
 }
 @media screen and (prefers-color-scheme: dark){
-   html.skin-theme-clientpref-os #footer.mw-footer{
+   html.skin-theme-clientpref-os .mw-footer-container{
      background: #002a55;
-    border-top-color: rgba(255,255,255,0.14);
    }
+   html.skin-theme-clientpref-os #footer-icons a.cdx-button{
-   html.skin-theme-clientpref-os #footer-icons a{
+     background: rgba(255,255,255,0.92) !important;
-     border-color: rgba(255,255,255,0.18);
    }
 }