Structorica Wiki

MediaWiki:Minerva.css: Difference between revisions

Browse history interactively
← Older edit
Ivan (talk | contribs)
Bureaucrats, Interface administrators, Suppressors, Administrators
796 edits
No edit summary
Tags: Mobile edit Mobile web edit
No edit summary
 
(18 intermediate revisions by the same user not shown)
Line 1: Line 1:
// Theme toggle functionality for Structorica Wiki
/* Theme toggle button styles for MinervaNeue mobile skin */


// Cookie helper functions
/* Icon styles */
function getCookie(name) {
.minerva-icon--theme-toggle {
  const value = `; ${document.cookie}`;
    mask-image: linear-gradient(transparent, transparent),
  const parts = value.split(`; ${name}=`);
        url("data:image/svg+xml,%3Csvg height='21' viewBox='0 0 21 21' width='21' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m8.85464918.37900488c-1.91149353 1.51069427-3.13816124 3.84973402-3.13816124 6.47527736 0 4.55564936 3.69308349 8.24873286 8.24873286 8.24873286 2.5815709 0 4.8861545-1.1859235 6.3986798-3.0426994-.8206378 4.7389755-4.9523867 8.343122-9.9259291 8.343122-5.56375572 0-10.07407088-4.5103151-10.07407088-10.0740709 0-5.02506013 3.67919933-9.19079725 8.49074856-9.95036192z' fill='%2354595d' fill-rule='evenodd'/%3E%3C/svg%3E");
  if (parts.length === 2) return parts.pop().split(";").shift();
  return null;
}
}


function setCookie(name, value, days = 365) {
.stw-theme-dark .minerva-icon--theme-toggle {
  const domain = ".structorica.wiki"; // Cross-subdomain support
    mask-image: linear-gradient(transparent, transparent),
  document.cookie = `${name}=${value}; path=/; domain=${domain}; max-age=${
        url("data:image/svg+xml,%3Csvg fill='%2354595d' fill-rule='evenodd' xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='M17.07 7.07V2.93h-4.14L10 0 7.07 2.93H2.93v4.14L0 10l2.93 2.93v4.14h4.14L10 20l2.93-2.93h4.14v-4.14L20 10zM10 16a6 6 0 1 1 6-6 6 6 0 0 1-6 6z'/%3E%3Ccircle cx='10' cy='10' r='4.5'/%3E%3C/svg%3E");
    days * 24 * 60 * 60
  }`;
}
}


document.addEventListener("DOMContentLoaded", function () {
/* Hide vanilla MW theme settings */
  var userPanel = document.querySelector("#p-personal ul");
#skin-client-prefs-skin-theme {
display: none;
}
 
 
 
/* Default styles  */
:root {
--mobile-header-background: url('images/essentials/Mobile-header.png');
--mobile-header-background-color: #698cff;
--content-background-color: #ebeef2;
--content-text-color: #202122;
}
 
/* Logo replacement for MinervaNeue */
.minerva-header .branding-box a span {
    font-size: 0; /* Hide text */
    display: inline-block;
}
 
.minerva-header .branding-box a span::after {
    content: "";
    display: inline-block;
    width: 135px;
    height: 50px;
    background-image: url('images/essentials/WikiLogoMobile.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    vertical-align: middle;
}
 
/* ------------------------------------------ DARK THEME -------------------------------------*/
 
:root .stw-theme-dark {
    --archive-box-background-color: #282828;
--archive-box-border-color: #444;
 
    --mobile-header-background: url('images/essentials/Dark-mobile-header.png');
--mobile-header-background-color: #2b3162;
--content-background-color: #2b2f39;
--content-text-color: #e6e6e6;
--base-background-color: #13191c;
color: var(--content-text-color);
}
 
body.stw-theme-dark :not(.infobox-title) a:not(.new,.mw-selflink,.menu2-text a),
body.stw-theme-dark .jslink,
body.stw-theme-dark .toctogglelabel,
body.stw-theme-dark .mw-collapsible-text,
body.stw-theme-dark .vector-menu-dropdown .mw-list-item a,
body.stw-theme-dark .mw-mmv-post-image a,
body.stw-theme-dark #mw-mf-page-left ul.hlist li a{
    color: #90c0fe;
}
 
body.stw-theme-dark .mw-body-content .hlist li:not(:last-child)::after {
    background-color: #FFF;
}
 
body.stw-theme-dark .mw-message-box,
body.stw-theme-dark .mw-body, h1, h2, h3, h4, h5, h6,
body.stw-theme-dark .mw-ui-input {
    color: var(--content-text-color);
}
 
body.stw-theme-dark .mw-body a.new, body.stw-theme-dark .mw-mmv-post-image a.new {
    color: #ffa4a4;
}
 
body.stw-theme-dark .branding-box img,
body.stw-theme-dark .minerva-footer-logo img {
filter: revert;
}
 
 
/*
body.stw-theme-dark .client-js .sortable:not(.jquery-tablesorter) > * > tr:first-child > th:not(.unsortable),
body.stw-theme-dark .jquery-tablesorter th.headerSort {
background-image: url('images/essentials/Sort_both.svg');
}
body.stw-theme-dark .jquery-tablesorter th.headerSortDown {
background-image: url('images/essentials/Sort_down.svg');
}
body.stw-theme-dark .jquery-tablesorter th.headerSortUp {
background-image: url('images/essentials/Sort_up.svg');
}
*/
 
/* CodeEditor search color fixes for dark theme */
body.stw-theme-dark .ace_search {
background-color: #353535;
border: 1px solid var(--ooui-border);
border-top: 0;
border-right: 0;
color: #e6e6e6;
}
 
/* CodeEditor search input field color fixes for dark theme */
body.stw-theme-dark .ace_search_field {
border-radius: 3px 0 0 3px;
background-color: #414141;
color: #e6e6e6;
border: 1px solid var(--ooui-border);
border-right: 0;
}
 
/* CodeEditor search button color fixes for dark theme */
body.stw-theme-dark .ace_searchbtn {
border: 1px solid var(--ooui-border);
background: #414141;
color: #e6e6e6;
border-right: 0;
border-left: 1px solid var(--ooui-border);
}
body.stw-theme-dark .ace_button {
border: 1px solid var(--ooui-border);
color: #e6e6e6;
}
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
/*----------------------------------------------------------------------------------------*/
 
 
 
.minerva-footer {
    border-color: transparent;
}
 
.mw-footer > .post-content {
    margin-top: 32px;
}
 
.mw-footer > .post-content > .minerva-footer-logo {
    display: none;
}
 
 
 
/*
footer,
footer a:active,
#footer,
#footer a:active {
color: #FFF;
}
 
footer a,
#footer a,
footer a:visited,
#footer a:visited {
    color: #BFBFBF;
}
 
.last-modified-bar {
background-color: #EAECF0;
}
*/
.content code {
border-radius: 2px;
}
 
@media all and (max-width: 768px) {
.gallerybox .thumb > div {
margin: 15px !important;
width: auto !important;
}
}
 
@media all and (max-width: 720px) {
.gallery.mw-gallery-traditional .gallerybox {
width: 155px !important;
}
.gallery.mw-gallery-traditional .gallerybox .thumb {
width: 150px !important;
}
.gallery.mw-gallery-nolines .gallerybox {
width: 125px !important;
}
.gallery.mw-gallery-nolines .gallerybox .thumb {
width: 120px !important;
}
}
 
 
 
 
 
 
 
/* */
 
/** Mobile skin **/
.overlay.search-overlay,
.overlay.editor-overlay {
padding-top: 90px;
}
 
/* Mobile header background */
.skin-minerva #mw-mf-page-center .header-container,
.skin-minerva .search-overlay .header-container {
    position: relative;
    background: var(--mobile-header-background) left bottom repeat-x,linear-gradient(0deg,var(--content-background-color) 50%,var(--mobile-header-background-color) 50%);
    background-size: 48px auto;
    right: 0;
    left: 0;
    height: 96px;
}
 
.skin-minerva .header-container {
    background-color: transparent;
    box-shadow: none;
}
 
.overlay-header,
.minerva-header {
padding-top: 7px;
}
 
/* Maximise editing space when editing on small screens */
@media all and (max-width: 999px) {
.overlay-enabled .editor-overlay {
padding-top: 3.35em;
}
.overlay-enabled .overlay.editor-overlay .header-container:after {
bottom: 0;
background-position: left bottom -29px;
}
}
 
.overlay .overlay-header-container.header-container {
z-index: 2;
}
 
.minerva-header .branding-box {
    opacity: 1;
}
 
.notification-count {
background: none;
}
 
/* Background color */
.overlay-enabled,
.overlay-content,
.mw-body {
background-color: var(--content-background-color);
}
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
/* Hide page title on all main pages */
body.rootpage-Structorica_Wiki .page-heading,
body.rootpage-Main_Page .page-heading {
display: none;
}
body.page-Main_Page #firstHeading {
    display: none;
}
 
 
/* Margin is too big */
.page-heading {
margin-bottom: 0;
}
 
/* Force collapsed navbox headers to full width */
.content table.navbox {
display: table;
border-collapse: separate;
}
 
 
/* Show TOC */
@media (max-width: 512px) {
.skin-minerva .toc-mobile {
display: block;
}
}
 
/* Fix Footer*/
.footer-icons .cdx-button.cdx-button--fake-button--enabled,
.footer-icons .cdx-button.cdx-button--fake-button--enabled:hover,
.footer-icons .cdx-button.cdx-button--fake-button--enabled:active {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
}
 
/* Fix footer hlist separator colour */
.footer-content .hlist-separated li:after {
color: #FFF;
}
 
/* Fix hlist gaps being too wide */
.hlist > ul li {
margin-right: 0;
}
 
/* Fix changes autocollapsing in recent changes */
.mw-changeslist-edit, .mw-changeslist-line {
display: table-row !important;
}
.mw-changeslist-line-inner {
padding-top: 1.5em;
}
.mw-enhanced-rc-nested {
    padding-top: 0.5em;
}
 
/* Rollback link as a button */
.mw-rollback-link a {
padding: 5px 12px;
border: 1px solid var(--border-color-base);
font-weight: bold;
}
 
/* Width is based on existing minerva calculations */
@media all and (max-width: 639px) {
/* Display rollback button on own line to stop clipping */
.mw-rollback-link {
    display: block;
}
}
 
/* Alternating cell background */
.alternatecells:nth-child(odd) {
background-color: #F9F9F9;
}
 
 
 
 
 
/* Add a background color to the overlay header and remove the padding */
.overlay-header {
    background-color: var(--content-background-color);
    padding-top: 0;
}
 
.content li {
    margin-bottom: 2px;
}
 
.content .mw-parser-output > h2, .content .section-heading {
    border-bottom: 1px solid #c8ccd1;
}
 
dl {
    margin-bottom: 5px;
}
 
/* Hide nomobile */
.nomobile,
.msgbox .msgbox-image {
display: none;
}
 
/* Remove blank space when editing */
.action-edit .overlay-header-container + .overlay-content {
    padding-top: 0;
}
.editor-overlay .content {
    margin-top: 0;
}
 
 
 
 
 
/* Hatnotes and disambiguation notices */
.hatnote {
font-style: italic;
}
.hatnote i {
font-style: normal;
}
div.hatnote {
    padding-left: 0;
margin-bottom: 0.5em;
    font-size: 0.8125rem;
}
div.hatnote + div.hatnote {
margin-top: -0.5em;
}
div.msgbox {
    font-size: 0.8125rem;
    max-width: revert !important;
}
@media all and (min-width: 511px) {
div.msgbox-subtle {
max-width: 306px !important;
}
}
 
/* Fix animated infobox images shifting the screen when images have different dimensions */
.content span.animated a > img,
.content span.animated a > .lazy-image-placeholder,
.content noscript span.animated > img {
    max-width: initial !important;
}
 
/* Fix infobox text being way too large */
#mw-mf-viewport .notaninfobox p {
font-size: 100%;
padding: 0.2em 0;
}
 
body.page-Main_Page #firstHeading {
    display: none;
}
 
 
 
 
 
 
 
 
 
 


  if (userPanel) {
    // Add both theme and width toggle buttons
    userPanel.insertAdjacentHTML(
      "afterbegin",
      '<li class="mw-list-item mw-list-item-js" id="pt-fw-disable"><a href="#" title="Toggle fixed width"><span></span></a></li>' +
        '<li class="mw-list-item mw-list-item-js" id="pt-dm-toggle"><a href="#" title="Toggle dark mode"><span></span></a></li>'
    );


    setTimeout(function () {
      // Theme toggle functionality
      var themeBtn = document.getElementById("pt-dm-toggle");
      if (themeBtn) {
        // Set initial theme from cookie (fallback to localStorage for migration)
        var savedTheme =
          getCookie("stw-theme") || localStorage.getItem("stw-theme") || "dark";
        var body = document.body;


        if (savedTheme === "dark") {
          body.classList.add("stw-theme-dark");
          body.classList.remove("stw-theme-light");
        } else {
          body.classList.add("stw-theme-light");
          body.classList.remove("stw-theme-dark");
        }


        themeBtn.addEventListener("click", function (e) {
          e.preventDefault();


          if (body.classList.contains("stw-theme-dark")) {
            body.classList.remove("stw-theme-dark");
            body.classList.add("stw-theme-light");
            setCookie("stw-theme", "light");
            localStorage.setItem("stw-theme", "light"); // Fallback
          } else {
            body.classList.remove("stw-theme-light");
            body.classList.add("stw-theme-dark");
            setCookie("stw-theme", "dark");
            localStorage.setItem("stw-theme", "dark"); // Fallback
          }
        });
      }


      // Width toggle functionality
/* Turn a list into a tree view style */
      var widthBtn = document.getElementById("pt-fw-disable");
.treeview {
      if (widthBtn) {
margin-top: 0.3em;
        // Set initial width mode from cookie
}
        var savedWidth =
          getCookie("stw-width") ||
          localStorage.getItem("stw-width") ||
          "fluid";
        var root = document.documentElement;


        if (savedWidth === "fluid") {
.treeview .treeview-header {
          root.style.setProperty("--fixed-width", "100vw");
padding-left: 3px;
          widthBtn.id = "pt-fw-disable"; // Fullscreen mode
font-weight: bold;
        } else {
}
          root.style.removeProperty("--fixed-width"); // Use default 1200px
.treeview .treeview-header:last-child {
          widthBtn.id = "pt-fw-enable"; // Exit fullscreen mode
border-color: #636363 !important;
        }
border-left-style: dotted;
}
.treeview .treeview-header:not(:last-child):before {
content: none;
}
.treeview .treeview-header:last-child:before {
border-bottom: 0;
}


        widthBtn.addEventListener("click", function (e) {
.treeview ul,
          e.preventDefault();
.treeview li {
margin: 0;
padding: 0;
list-style-type: none;
list-style-image: none;
}


          if (root.style.getPropertyValue("--fixed-width") === "100vw") {
.treeview li li {
            // Switch to fixed width (remove property to use default 1200px)
position: relative;
            root.style.removeProperty("--fixed-width");
padding-left: 13px;
            widthBtn.id = "pt-fw-enable";
margin-left: 7px;
            setCookie("stw-width", "fixed");
border-left: 1px solid #636363;
            localStorage.setItem("stw-width", "fixed"); // Fallback
}
          } else {
.treeview li li:before {
            // Switch to fluid width
content: "";
            root.style.setProperty("--fixed-width", "100vw");
position: absolute;
            widthBtn.id = "pt-fw-disable";
top: 0;
            setCookie("stw-width", "fluid");
left: -1px;
            localStorage.setItem("stw-width", "fluid"); // Fallback
width: 11px;
          }
height: 11px;
        });
border-bottom: 1px solid #636363;
      }
}
    }, 100);
 
  } else {
.treeview li li:last-child:not(.treeview-continue) {
    console.log(
border-color: transparent;
      "Theme script: userPanel not found, trying alternative selector"
}
    );
.treeview li li:last-child:not(.treeview-continue):before {
    var altPanel = document.querySelector("#p-personal");
border-left: 1px solid #636363;
    console.log("Theme script: altPanel found:", !!altPanel, altPanel);
width: 10px;
  }
}
});
 
.nbttree-inherited {
background-color: #E6E6FA;
}
Retrieved from "https://structorica.wiki/w/MediaWiki:Minerva.css"