MediaWiki:Cosmos.css: Difference between revisions

Help

Revision as of 22:15, 29 July 2026

/* ==========================================================
   THE VAULT @ THE E.E.R.I.E. FILES — MediaWiki:Cosmos.css

   Cosmos skin overrides

   Purpose:
   - Header
   - Sidebar
   - Search
   - Footer
   - Skin navigation

   Main article styling lives in Common.css
   ========================================================== */


/* ==========================================================
   VAULT COLOUR SYSTEM
   ========================================================== */

:root {

    --void:#f5f1e8;
    --panel:#ffffff;
    --panel-edge:#d8d0c0;

    --acid:#7ab800;
    --violet:#7a32b8;
    --cream:#222222;
    --amber:#b87800;

    --muted:#6b6458;

}



/* ==========================================================
   COSMOS SIDE RAIL
   ========================================================== */


#cosmos-rail .rail-module,
.rail-module {

    background-color:var(--panel) !important;

    border:1px solid var(--panel-edge) !important;

    color:var(--cream) !important;

    box-shadow:none !important;

}



.rail-module .rail-module-header,
.rail-module h3 {

    font-family:'JetBrains Mono', monospace !important;

    color:var(--violet) !important;

    letter-spacing:.08em;

    text-transform:uppercase;

    font-size:.75rem !important;

    border-bottom:1px solid var(--panel-edge) !important;

}



.rail-module a {

    color:#276b9c !important;

}



.rail-module a:hover {

    color:var(--acid) !important;

}





/* ==========================================================
   SEARCH
   ========================================================== */


.cosmos-searchInput input,
#simpleSearch,
.oo-ui-textInputWidget input {

    background-color:#ffffff !important;

    color:var(--cream) !important;

    border:1px solid var(--panel-edge) !important;

}



.cosmos-searchInput input::placeholder {

    color:var(--muted);

}





/* ==========================================================
   HEADER / NAVIGATION
   ========================================================== */


.cosmos-community-header,
.wiki-nav,
#p-logo a {

    border-color:var(--panel-edge) !important;

}



.wiki-nav a,
.cosmos-header-menu a {

    color:var(--muted) !important;

}



.wiki-nav a:hover,
.cosmos-header-menu a:hover {

    color:var(--violet) !important;

}





/* ==========================================================
   PERSONAL TOOLBAR
   ========================================================== */


.personal-more-container,
#p-personal {

    color:var(--muted) !important;

}



#p-personal a {

    color:var(--muted) !important;

}



#p-personal a:hover {

    color:var(--violet) !important;

}





/* ==========================================================
   FOOTER
   ========================================================== */


#footer,
.mw-footer {

    background-color:#ede7da !important;

    border-top:1px solid var(--panel-edge) !important;

    color:var(--muted) !important;

}



#footer a,
.mw-footer a {

    color:var(--violet) !important;

}





/* ==========================================================
   COSMOS BACKGROUND FIXES

   Prevents Cosmos forcing dark containers
   ========================================================== */


.cosmos-body,
.cosmos-main-content,
.cosmos-content {

    background-color:var(--void) !important;

    color:var(--cream) !important;

}





/* ==========================================================
   BUTTONS / CONTROLS
   ========================================================== */


button,
input[type="submit"] {

    font-family:'JetBrains Mono', monospace;

}



button:hover,
input[type="submit"]:hover {

    border-color:var(--acid) !important;

}





/* ==========================================================
   RESPONSIVE
   ========================================================== */


@media screen and (max-width:700px) {


    .rail-module {

        border-radius:6px;

    }


}

@@ Line 1: / Line 1: @@
 /* ==========================================================
     THE VAULT @ THE E.E.R.I.E. FILES — MediaWiki:Cosmos.css
-   Paste this into MediaWiki:Cosmos.css (a separate page from
-   Common.css — search "Cosmos.css" or go to
-   yourwiki.url/index.php?title=MediaWiki:Cosmos.css)
-    This file targets Cosmos-specific elements (header, side
+    Cosmos skin overrides
-   rail, search) that Common.css can't reliably reach since
-   Cosmos's layout differs from the default Vector skin.
-    NOTE: the :root variable block below is deliberately
+    Purpose:
-    duplicated from Common.css, not a mistake — MediaWiki
+    - Header
-    loads skin CSS (this file) and Common.css as part of the
+    - Sidebar
-    same combined stylesheet for the Cosmos skin, but each
+    - Search
-    file is still an independent wiki page with its own
+    - Footer
-    content, so each needs its own copy of the variables to
+    - Skin navigation
-    be self-contained if edited or viewed in isolation.
+    Main article styling lives in Common.css
     ========================================================== */
-:root{
-     --void:#0a0714;
+/* ==========================================================
-     --panel:#160f2b;
+   VAULT COLOUR SYSTEM
-     --panel-edge:#2a1c4a;
+   ========================================================== */
-     --acid:#a6ff3f;
-     --violet:#b34aff;
+:root {
-     --cream:#f2ecd9;
-     --amber:#ffcf4d;
+     --void:#f5f1e8;
-     --muted:#9d8fc2;
+     --panel:#ffffff;
+     --panel-edge:#d8d0c0;
+     --acid:#7ab800;
+     --violet:#7a32b8;
+     --cream:#222222;
+     --amber:#b87800;
+     --muted:#6b6458;
 }
-/* Side rail modules (Recent Changes, Random Page, etc.) */
+/* ==========================================================
+   COSMOS SIDE RAIL
+   ========================================================== */
 #cosmos-rail .rail-module,
 .rail-module {
-     background-color: var(--panel) !important;
-     border: 1px solid var(--panel-edge) !important;
+     background-color:var(--panel) !important;
-     color: var(--cream) !important;
+     border:1px solid var(--panel-edge) !important;
+     color:var(--cream) !important;
+    box-shadow:none !important;
 }
 .rail-module .rail-module-header,
 .rail-module h3 {
-     font-family: 'JetBrains Mono', monospace !important;
-     color: var(--violet) !important;
+     font-family:'JetBrains Mono', monospace !important;
-     letter-spacing: 0.08em;
-     text-transform: uppercase;
+     color:var(--violet) !important;
-     font-size: 0.75rem !important;
-     border-bottom: 1px solid var(--panel-edge) !important;
+     letter-spacing:.08em;
+     text-transform:uppercase;
+     font-size:.75rem !important;
+     border-bottom:1px solid var(--panel-edge) !important;
 }
 .rail-module a {
-     color: var(--muted) !important;
+     color:#276b9c !important;
 }
 .rail-module a:hover {
-     color: var(--acid) !important;
+     color:var(--acid) !important;
 }
-/* Search box */
+/* ==========================================================
+   SEARCH
+   ========================================================== */
 .cosmos-searchInput input,
 #simpleSearch,
 .oo-ui-textInputWidget input {
-     background-color: var(--void) !important;
-     color: var(--cream) !important;
+     background-color:#ffffff !important;
-     border: 1px solid var(--panel-edge) !important;
+     color:var(--cream) !important;
+     border:1px solid var(--panel-edge) !important;
 }
-/* Community/wiki header navigation bar */
+.cosmos-searchInput input::placeholder {
+    color:var(--muted);
+}
+/* ==========================================================
+   HEADER / NAVIGATION
+   ========================================================== */
 .cosmos-community-header,
 .wiki-nav,
 #p-logo a {
-     border-color: var(--panel-edge) !important;
+     border-color:var(--panel-edge) !important;
 }
-.wiki-nav a, .cosmos-header-menu a {
-     color: var(--muted) !important;
+.wiki-nav a,
+.cosmos-header-menu a {
+     color:var(--muted) !important;
 }
-.wiki-nav a:hover, .cosmos-header-menu a:hover {
-     color: var(--acid) !important;
+.wiki-nav a:hover,
+.cosmos-header-menu a:hover {
+     color:var(--violet) !important;
 }
-/* Personal toolbar (login/user links top-right) */
+/* ==========================================================
+   PERSONAL TOOLBAR
+   ========================================================== */
 .personal-more-container,
 #p-personal {
-     color: var(--muted) !important;
+     color:var(--muted) !important;
 }
 #p-personal a {
-     color: var(--muted) !important;
+     color:var(--muted) !important;
 }
 #p-personal a:hover {
-     color: var(--acid) !important;
+     color:var(--violet) !important;
+}
+/* ==========================================================
+   FOOTER
+   ========================================================== */
+#footer,
+.mw-footer {
+    background-color:#ede7da !important;
+    border-top:1px solid var(--panel-edge) !important;
+    color:var(--muted) !important;
+}
+#footer a,
+.mw-footer a {
+    color:var(--violet) !important;
+}
+/* ==========================================================
+   COSMOS BACKGROUND FIXES
+   Prevents Cosmos forcing dark containers
+   ========================================================== */
+.cosmos-body,
+.cosmos-main-content,
+.cosmos-content {
+    background-color:var(--void) !important;
+    color:var(--cream) !important;
 }
-/* Footer */
-#footer, .mw-footer {
-    background-color: var(--panel) !important;
-     border-top: 1px solid var(--panel-edge) !important;
-    color: var(--muted) !important;
+/* ==========================================================
+   BUTTONS / CONTROLS
+   ========================================================== */
+button,
+input[type="submit"] {
+     font-family:'JetBrains Mono', monospace;
 }
-#footer a, .mw-footer a {
-     color: var(--violet) !important;
+button:hover,
+input[type="submit"]:hover {
+     border-color:var(--acid) !important;
 }
-/* NOTE: Cosmos's exact class names can vary slightly by
-    version. If any of the above doesn't visibly apply once
-    pasted in, right-click the element in your browser →
-   Inspect, find its actual class name, and swap it in above —
-   the colour variables at the top will still be correct either
+/* ==========================================================
-   way, it's just a case of matching the right selector. */
+    RESPONSIVE
+    ========================================================== */
+@media screen and (max-width:700px) {
+    .rail-module {
+        border-radius:6px;
+    }
+}

GaryJJSpate (talk | contribs)

Revision as of 22:15, 29 July 2026