MediaWiki:Timeless.css: Difference between revisions

From Ghost Theory Wiki
PerilM (talk | contribs)
Bureaucrats, Interface administrators, Administrators
1,128 edits
Created page with "→All CSS here will be loaded for users of the Timeless skin: →Reset and Base Styles: * { margin: 0; padding: 0; box-sizing: border-box; } body { background-color: #000000; color: #ffffff; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 16px; line-height: 1.6; } →Links: a { color: #ffe135; text-decoration: no..."
 
No edit summary
Tag: Bots
 
(137 intermediate revisions by the same user not shown)
Line 1: Line 1:
/* All CSS here will be loaded for users of the Timeless skin */
#ca-talk { display: none !important; }
/* Reset and Base Styles */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }


    body {
/* Hide the entire Anonymous dropdown menu in Timeless */
      background-color: #000000;
#p-personal,
      color: #ffffff;
#personal,
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
#user-tools {
      font-size: 16px;
    display: none !important;
      line-height: 1.6;
}
    }


     /* Links */
.quote-box {
     a {
     padding: 1em 1.2em;
      color: #ffe135;
     margin: 1.5em 0;
      text-decoration: none;
    background: #f2f2f2;
      transition: color 0.3s ease;
    border-left: 4px solid #ccc;
    }
    border-radius: 4px;
    color: #222;
}


    a:visited {
/* Gray background box for FAQ questions */
      color: #c0c0c0;
.faq-question {
     }
    background-color: #f2f3f4;  /* light gray that fits your Timeless theme */
    padding: .2em;               /* space inside the box */
     margin: .5em 0;              /* space between boxes */
    border-radius: 2px;        /* optional: soft corners */


    a:hover {
}
      color: #ffed4e;
    }


    /* Main Layout */
/* Make the heading smaller INSIDE the FAQ box */
    #mw-page-base,
h3 .faq-question {
     #mw-head-base {
     background-color: #f2f3f4;
      background-color: #000000;
     padding: .2em;
     }
    border-radius: 2px;
    font-size: .8em !important;
}


    #mw-head {
/* Hide all category links on article pages */
      background-color: #1a1a1a;
#catlinks {
      border-bottom: 2px solid #333333;
    display: none !important;
      padding: 10px 20px;
}
    }


    #mw-navigation {
/* Hide empty category page warnings and edit notices */
      background-color: #000000;
body.page-Category .mw-parser-output > p,
    }
body.page-Category .noarticletext,
body.page-Category .mw-empty-elt,
body.page-Category #contentSub,
body.page-Category #contentSub2 {
    display: none !important;
}


    /* Content Area */
/* Hide the "Category" tab on category pages (optional) */
    #content {
body.ns-14 #ca-nstab-category {
      background-color: #000000;
    display: none !important;
      padding: 20px;
}
      margin-left: 0;
    }


    #mw-content-container {
/* Hide all category displays in Timeless */
      max-width: 100%;
#catlinks,
    }
.catlinks,
.mw-normal-catlinks,
.mw-hidden-catlinks,
#mw-normal-catlinks,
#mw-hidden-catlinks {
    display: none !important;
}


    /* Text Boxes and Content */
/* Universal kill-switch for Timeless page tools */
    #mw-content {
#mw-related-navigation,
      background-color: #1a1a1a;
#page-tools,
      padding: 20px;
#page-tools-wrapper,
      border-radius: 4px;
#mw-panel .page-tools,
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
.sidebar-chunk.page-tools {
    }
    display: none !important;
}


    /* Sidebar Navigation */
@import url('https://fonts.googleapis.com/css2?family=Alegreya:opsz,wght@8..30,400;8..30,600;8..30,700&display=swap');
    #mw-panel {
      background-color: #000000;
      padding: 10px 0;
    }


    .mw-portlet {
/* Force Timeless title span to behave like a real heading */
      background-color: #000000;
.mw-page-title-main {
      margin-bottom: 20px;
    display: block !important;
      border: 1px solid #333333;
     font-family: "Alegreya", serif !important;
      border-radius: 4px;
     font-size: 1.4rem !important;
      overflow: hidden;
     font-weight: 700 !important;
    }
     line-height: 1.2 !important;
 
     margin: 0 0 0.2em 0 !important;
    .mw-portlet-body {
     color: #989898 !important;
      background-color: #1a1a1a;
}
      padding: 0;
    }
 
    /* Portlet Header */
    .mw-portlet > h3,
    .vector-portlet-heading {
      background-color: #2a2a2a;
      color: #ffffff;
      padding: 12px 15px;
      margin: 0;
      font-size: 16px;
      font-weight: 600;
      display: flex;
      justify-content: space-between;
      align-items: center;
      cursor: pointer;
      user-select: none;
      border-bottom: 1px solid #333333;
      transition: background-color 0.3s ease;
     }
 
    .mw-portlet > h3:hover,
    .vector-portlet-heading:hover {
      background-color: #333333;
     }
 
    /* Collapsible Arrow */
    .portlet-arrow {
      display: inline-block;
      transition: transform 0.3s ease;
      font-size: 12px;
      color: #ffe135;
    }
 
    .portlet-arrow.collapsed {
      transform: rotate(-90deg);
    }
 
    /* Portlet List */
    .mw-portlet-body ul {
      list-style: none;
      padding: 0;
      margin: 0;
    }
 
    .mw-portlet-body li {
      border-bottom: 1px solid #2a2a2a;
      margin: 0;
    }
 
    .mw-portlet-body li:last-child {
      border-bottom: none;
    }
 
    .mw-portlet-body a {
      display: block;
      padding: 12px 15px;
      color: #ffe135;
      text-decoration: none;
      transition: background-color 0.2s ease, padding-left 0.2s ease;
     }
 
    .mw-portlet-body a:visited {
      color: #c0c0c0;
    }
 
    .mw-portlet-body a:hover {
      background-color: #2a2a2a;
      padding-left: 20px;
      color: #ffed4e;
    }
 
    /* Year Items and Expandable Sections */
    .year-item {
      background-color: #1a1a1a;
      border-bottom: 1px solid #2a2a2a;
      margin: 0;
      padding: 0;
    }
 
    .year-item:last-child {
      border-bottom: none;
    }
 
    .year-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 12px 15px;
      background-color: #1a1a1a;
      color: #ffe135;
      cursor: pointer;
      user-select: none;
      font-weight: 500;
      transition: background-color 0.2s ease;
     }
 
    .year-header:hover {
      background-color: #2a2a2a;
    }
 
    .year-arrow {
      display: inline-block;
      transition: transform 0.3s ease;
      font-size: 12px;
      color: #ffe135;
     }
 
    .year-arrow.collapsed {
      transform: rotate(-90deg);
    }
 
    .year-content {
      display: none;
      background-color: #0f0f0f;
      padding: 0;
      border-top: 1px solid #2a2a2a;
    }
 
    .year-content.expanded {
      display: block;
    }
 
    .year-content ul {
      list-style: none;
      padding: 0;
      margin: 0;
    }
 
    .year-content li {
      border-bottom: 1px solid #2a2a2a;
      margin: 0;
    }
 
    .year-content li:last-child {
      border-bottom: none;
    }
 
    .year-content a {
      display: block;
      padding: 10px 15px 10px 30px;
      color: #ffe135;
      text-decoration: none;
      transition: background-color 0.2s ease, padding-left 0.2s ease;
      font-size: 14px;
    }
 
    .year-content a:visited {
      color: #c0c0c0;
    }
 
    .year-content a:hover {
      background-color: #1a1a1a;
      padding-left: 35px;
      color: #ffed4e;
    }
 
    /* Search Box */
    .searchbox {
      padding: 10px;
      margin-bottom: 10px;
    }
 
     .searchbox input {
      width: 100%;
      padding: 8px;
      border: 1px solid #2a2a2a;
      background-color: #0f0f0f;
      color: #ffe135;
      font-size: 14px;
      box-sizing: border-box;
    }
 
    .searchbox input::placeholder {
      color: #666;
    }
 
    .searchbox input:focus {
      outline: none;
      border-color: #ffe135;
      background-color: #1a1a1a;
    }
 
    /* Responsive Design */
    @media (max-width: 768px) {
      .sidebar {
        position: fixed;
        left: -300px;
        top: 0;
        height: 100vh;
        z-index: 1000;
        transition: left 0.3s ease;
      }
 
      .sidebar.active {
        left: 0;
      }
 
      .main-content {
        margin-left: 0;
      }
    }
  </style>
</head>
<body>
  <div class="sidebar">
    <div class="sidebar-header">
      <h2>Sidebar</h2>
    </div>
 
    <!-- Search Box -->
    <div class="searchbox">
      <input type="text" id="searchInput" placeholder="Search...">
    </div>
 
    <!-- Portlets -->
    <div class="mw-portlet" id="portlet-navigation">
      <div class="portlet-header">
        <h3>Navigation</h3>
        <span class="portlet-arrow">▼</span>
      </div>
      <div class="mw-portlet-body">
        <ul>
          <li><a href="#home">Home</a></li>
          <li><a href="#about">About</a></li>
          <li><a href="#services">Services</a></li>
          <li><a href="#contact">Contact</a></li>
        </ul>
      </div>
    </div>
 
    <div class="mw-portlet" id="portlet-years">
      <div class="portlet-header">
        <h3>Years</h3>
        <span class="portlet-arrow">▼</span>
      </div>
      <div class="mw-portlet-body">
        <div class="year-item" data-year="2024">
          <div class="year-header">
            <span>2024</span>
            <span class="year-arrow">▼</span>
          </div>
          <div class="year-content">
            <ul>
              <li><a href="#2024-jan">January</a></li>
              <li><a href="#2024-feb">February</a></li>
              <li><a href="#2024-mar">March</a></li>
              <li><a href="#2024-apr">April</a></li>
            </ul>
          </div>
        </div>
 
        <div class="year-item" data-year="2023">
          <div class="year-header">
            <span>2023</span>
            <span class="year-arrow">▼</span>
          </div>
          <div class="year-content">
            <ul>
              <li><a href="#2023-jan">January</a></li>
              <li><a href="#2023-feb">February</a></li>
              <li><a href="#2023-mar">March</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
 
    <div class="mw-portlet" id="portlet-tools">
      <div class="portlet-header">
        <h3>Tools</h3>
        <span class="portlet-arrow">▼</span>
      </div>
      <div class="mw-portlet-body">
        <ul>
          <li><a href="#tool1">Tool 1</a></li>
          <li><a href="#tool2">Tool 2</a></li>
          <li><a href="#tool3">Tool 3</a></li>
        </ul>
      </div>
    </div>
  </div>
 
  <div class="main-content">
    <h1>Main Content</h1>
    <p>This is the main content area. The sidebar on the left contains navigation, years, and tools.</p>
  </div>
 
  <script>
    // Portlet Toggle
    document.querySelectorAll('.portlet-header').forEach(header => {
      header.addEventListener('click', function () {
        const portlet = this.closest('.mw-portlet');
        const body = portlet.querySelector('.mw-portlet-body');
        const arrow = this.querySelector('.portlet-arrow');
 
        body.classList.toggle('collapsed');
        arrow.classList.toggle('collapsed');
      });
    });
 
    // Year Toggle
    document.querySelectorAll('.year-header').forEach(header => {
      header.addEventListener('click', function () {
        const yearItem = this.closest('.year-item');
        const content = yearItem.querySelector('.year-content');
        const arrow = this.querySelector('.year-arrow');
 
        content.classList.toggle('expanded');
        arrow.classList.toggle('collapsed');
      });
    });
 
    // Search Functionality
    document.getElementById('searchInput').addEventListener('keyup', function (e) {
      const searchTerm = e.target.value.toLowerCase();
      document.querySelectorAll('.mw-portlet-body a, .year-content a').forEach(link => {
        const linkText = link.textContent.toLowerCase();
        if (linkText.includes(searchTerm)) {
          link.parentElement.style.display = 'block';
        } else {
          link.parentElement.style.display = 'none';
        }
      });
    });
  </script>
</body>
</html>
```
Retrieved from "https://ghosttheorywiki.com/wiki/MediaWiki:Timeless.css"