MediaWiki:Common.css

From Holoscopic

Note: After publishing, you may have to bypass your browser's cache to see the changes.

  • Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
  • Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
  • Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
  • Opera: Press Ctrl-F5.
/* Minimal styling for Main Page */
.page-Main_Page #firstHeading,
.page-Main_Page .mw-page-title-separator,
.page-Main_Page .mw-page-title-main {
    display: none !important;
}

.page-Main_Page #mw-content-text {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Hide sidebar on main page (optional) */
.page-Main_Page #mw-navigation {
    /* display: none; */
}


/* Custom namespace styling */
.ns-100 .mw-page-title-namespace { /* Whorl namespace */
    color: #9b59b6;
}

.ns-102 .mw-page-title-namespace { /* Activity namespace */
    color: #3498db;
}

/* Minimal link styling */
#mw-content-text a {
    color: #333;
    text-decoration: none;
    border-bottom: 1px solid #ddd;
}

#mw-content-text a:hover {
    border-bottom-color: #333;
}

/* Clean up templates */
.infobox {
    border: 1px solid #e0e0e0;
    background: #fafafa;
    border-radius: 4px;
    box-shadow: none;
}

/* ===== COLLAPSIBLE SECTIONS - Wikipedia Mobile Style ===== */

/* Main container for collapsible sections */
.mw-collapsible {
    border-bottom: 1px solid #a2a9b1;
    margin: 0;
    padding: 0;
    background: #fff;
}

/* Toggle row styling - matches Wikipedia mobile exactly */
.mw-collapsible-toggle-row {
    display: flex;
    align-items: center;
    padding: 16px;
    cursor: pointer;
    background: #fff;
    position: relative;
}

.mw-collapsible-toggle-row:active {
    background-color: #eaecf0;
}

/* Toggle arrow styling - clean and simple */
.mw-collapsible-toggle {
    position: absolute !important;
    left: 16px;
    width: 20px !important;
    height: 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #72777d !important;
    font-size: 12px !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
}

/* Arrow characters */
.mw-collapsible-toggle::before {
    content: "▼" !important;
    display: block;
    line-height: 1;
}

.mw-collapsible.mw-collapsed .mw-collapsible-toggle::before {
    content: "▶" !important;
}

/* Hide ALL default MediaWiki toggle elements */
.mw-collapsible-toggle-default::after,
.mw-collapsible-toggle .mw-collapsible-text,
.mw-collapsible-toggle .mw-collapsible-bracket,
.mw-collapsible-toggle-collapsed,
.mw-collapsible-toggle-expanded {
    display: none !important;
}

/* Section title styling - Wikipedia mobile style */
.mw-collapsible h2,
.mw-collapsible h3,
.mw-collapsible h4,
.mw-collapsible h5 {
    font-weight: 400 !important;
    font-size: 1rem !important;
    line-height: 1.5 !important;
    color: #000 !important;
    margin: 0 !important;
    padding: 0 0 0 32px !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", sans-serif !important;
}

/* Content area styling */
.mw-collapsible-content {
    padding: 0 16px 16px 16px;
    background: #fff;
    font-size: 0.875rem;
    line-height: 1.6;
}

/* Remove any top margin from first element in content */
.mw-collapsible-content > *:first-child {
    margin-top: 0;
}

/* Nested collapsibles */
.mw-collapsible .mw-collapsible {
    border-bottom: none;
    border-top: 1px solid #a2a9b1;
    margin: 0;
}

.mw-collapsible .mw-collapsible .mw-collapsible-toggle-row {
    padding-left: 48px;
}

.mw-collapsible .mw-collapsible h3,
.mw-collapsible .mw-collapsible h4 {
    padding-left: 64px !important;
}

/* Article outline container */
.article-outline {
    background: #fff;
    border-top: 1px solid #a2a9b1;
    margin: 0;
    padding: 0;
}

.article-outline > .mw-collapsible:last-child {
    border-bottom: 1px solid #a2a9b1;
}

/* Remove hover effects for cleaner mobile experience */
.mw-collapsible-toggle-row:hover {
    background-color: #fff;
}

/* Touch feedback for mobile */
@media (hover: none) {
    .mw-collapsible-toggle-row:active {
        background-color: #eaecf0;
    }
}

/* Ensure sections start collapsed */
.mw-collapsible.mw-collapsed .mw-collapsible-content {
    display: none;
}

/* ===== Collapsible Section Headers Styling ===== */

/* Base styling for all collapsible headers */
h2.section-collapsible,
h3.section-collapsible,
h4.section-collapsible {
    background: #fff;
    border-bottom: 1px solid #a2a9b1;
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    position: relative;
}

/* Level-specific styling */
h2.section-collapsible {
    padding: 16px 16px 16px 44px;
    font-size: 1.2rem;
    font-weight: 400;
}

h3.section-collapsible {
    padding: 14px 14px 14px 40px;
    font-size: 1.05rem;
    font-weight: 400;
    background: #f8f9fa;
}

h4.section-collapsible {
    padding: 12px 12px 12px 36px;
    font-size: 0.95rem;
    font-weight: 400;
    background: #f0f2f5;
}

/* Arrow positioning */
.section-arrow {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #72777d;
}

/* Section content styling */
.section-content {
    background: #fff;
    padding: 16px;
}

.section-content.level-3 {
    padding-left: 24px;
}

.section-content.level-4 {
    padding-left: 32px;
}

/* Remove edit section links from collapsible headers */
.section-collapsible .mw-editsection {
    display: none;
}

/* Hover effects */
h2.section-collapsible:hover,
h3.section-collapsible:hover,
h4.section-collapsible:hover {
    background-color: #eaecf0;
}

/* Reset heading default styles within sections */
h2.section-collapsible .mw-headline,
h3.section-collapsible .mw-headline,
h4.section-collapsible .mw-headline {
    font-size: inherit;
    font-weight: inherit;
}

/* ===== HEADER AND FOOTER CUSTOMIZATION ===== */

/* Header styling */
.mw-header {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
}

/* Logo customization - 40px with 5px padding */
.mw-logo-icon {
    width: 40px !important;
    height: 40px !important;
}

.mw-logo {
    padding: 5px !important;
}

.mw-logo-container {
    max-width: 50px;
}

/* Remove visited link color from site title */
.mw-logo-wordmark,
.mw-logo-tagline,
.mw-header a.mw-logo-wordmark,
.mw-header .mw-logo-wordmark a,
a.mw-logo-wordmark:visited {
    color: inherit !important;
}

/* Footer styling */
#footer {
    background: transparent;
    border: none;
    padding: 20px;
    margin-top: 40px;
}

#footer-info {
    text-align: center;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Hide unnecessary footer elements */
#footer-places,
#footer-icons {
    display: none;
}

/* ===== HOMEPAGE STYLING ===== */

.holoscopic-home {
    max-width: 800px;
    margin: 0 auto;
    padding: 60px 20px;
    text-align: center;
}

.hero-section {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.hero-title {
    font-size: 4rem;
    font-weight: 300;
    letter-spacing: -0.02em;
    margin: 40px 0 10px;
    color: #000;
    position: relative;
}

/* Orange underline effect */
.hero-title::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    height: 4px;
    background: #ff6600;
}

.hero-subtitle {
    font-size: 1.25rem;
    font-weight: 300;
    color: #333;
    margin: 30px 0 50px;
}

.hero-list {
    text-align: left;
    max-width: 500px;
    margin: 0 auto;
}

.hero-list p {
    font-size: 1.1rem;
    line-height: 1.8;
    margin: 10px 0;
    color: #333;
}

/* Arrow styling */
.hero-list p::before {
    content: ">";
    margin-right: 10px;
    font-weight: bold;
    color: #000;
}

/* Last line special styling */
.hero-list p:last-child {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #e0e0e0;
}

/* Hide page title on main page */
.page-Main_Page .mw-page-title-main,
.page-Main_Page #firstHeading {
    display: none !important;
}

/* Keep default toolbar display on main page */

.page-Main_Page .mw-page-container {
    padding-top: 0;
}

/* Hide Table of Contents in sidebar */
#vector-toc,
.vector-toc,
.toc,
#toc {
    display: none !important;
}

/* Also hide the outline button */
.vector-page-titlebar-toc {
    display: none !important;
}

/* Clean main page content area */
.page-Main_Page #mw-content-text {
    background: #fff;
}

/* Link styling in hero */
.hero-list a {
    color: #0066cc;
    text-decoration: none;
    border-bottom: 1px solid #0066cc;
}

.hero-list a:hover {
    color: #ff6600;
    border-bottom-color: #ff6600;
}

/* Fix Tools dropdown menu layout */
.vector-page-tools .vector-menu-content {
    columns: 1;
}

.vector-page-tools .vector-menu-content-list {
    columns: 1;
}
Retrieved from "https://wiki.holoscopic.io/index.php?title=MediaWiki:Common.css&oldid=18"