MediaWiki:Timeless.css

/* 	CONTENTS 1. Variables 2. Top bar 3. Header + Logo 5. Sidebars 6. Content Area 7. Categories 8. Footer 9. Layout elements 10. Special Pages */

/*================================================== Variables

=
=====================================*/
 * root {

/* Theme Colors */ --color-primary: #F2911B; --color-secondary: #eeca8c; --color-tertiary: #f9f1e5; --color-bg: #ECD6BA; --color-footer: #433d33; --color-text: #000000; --color-header: #733702; --color-border: #a2a9b1;

--layout-radius: 10px; }

/*================================================== Top bar

=
=====================================*/

/* Color border overrides */ /* Hide default lines under header */ .color-left, .color-right, .color-middle { height: 0em; }

background: var(--color-secondary); }
 * 1) mw-header-container,
 * 2) mw-header-nav-hack {

outline: 0.35em solid var(--color-primary); margin-bottom: 5px; }
 * 1) mw-header-container {

/* Search */ border-radius: 5px; }
 * 1) p-search {

border: 0px; border-radius: 5px; }
 * 1) simpleSearch {

/* Top bar font modernization */ font-family: 'Segoe UI', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Lato', 'Liberation Sans', 'Noto Sans', 'Helvetica Neue', 'Helvetica', sans-serif }
 * 1) mw-header *,
 * 2) mw-site-navigation *,
 * 3) mw-related-navigation * {

/* Avoid cutting off letters with descenders: g,j,p,q,y */ height: 1.5em; position: relative; bottom: 0.1em }
 * 1) personal h2 span {

/* Triangle position patch */ position: relative; bottom: 0.5em; }
 * 1) personal h2::after {

/*================================================== Header + Logo

=
=====================================*/   background-color: var(--color-bg); border-bottom: solid 4px var(--color-primary); }
 * 1) mw-content-container {

/* Reposition for logo */ @media screen and (min-width: 1340px) { #mw-content-container { background-image: url(/custom/alephSunBanner.webp), url(/custom/cloudTile.webp), url(/custom/sun-pattern.webp); background-position: center top, center top, center top; background-repeat: no-repeat, repeat-x, repeat; /*Hack for modals forcing reposition*/ position: relative; }

/* Reposition for logo */ #mw-content { margin-top: 10.7em; }

#mw-related-navigation, #mw-site-navigation { margin-top: 9.7em; } }

/* Reposition for logo */ @media screen and (min-width: 1100px) and (max-width: 1339px) { #mw-content-container { background-image: url(/custom/alephSunBanner.webp), url(/custom/sun-pattern.webp); background-position: center top, top left; background-repeat: no-repeat, repeat; /*Hack for modals forcing reposition*/ position: relative; }

#mw-site-navigation { position: unset; }

#mw-content { margin-top: 10.7em; }

#mw-site-navigation { padding-top: 9.7em; } }

/* Do logo things */ .mw-wiki-logo.fallback { width: 26em; height: 9.2em; position: absolute; background-size: contain; top: 0em; left: 50%; transform: translate(-50%, 0); }

.mw-wiki-logo:hover { filter: brightness(1.05); }

/*================================================== Sidebars

=
=====================================*/   border-radius: var(--layout-radius); }
 * 1) mw-site-navigation>.sidebar-chunk,
 * 2) mw-related-navigation>.sidebar-chunk,
 * 3) personal-inner {

/* uncollapsed widths */ @media screen and (min-width: 1100px) {

#mw-site-navigation>.sidebar-chunk, #mw-related-navigation>.sidebar-chunk, #personal-inner { background-color: var(--color-tertiary); } }

/* mobile and tablet */ @media screen and (max-width: 1099px) { .sidebar-inner { border-radius: var(--layout-radius) !important; background-color: var(--color-tertiary); } }

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

#user-tools h2, .sidebar-chunk h2 { filter: drop-shadow(0px 0px 0px rgba(0, 0, 0, 0.5)); } }

@media screen and (min-width: 851px) and (max-width: 1099px) { #mw-header-nav-hack .color-bar { margin-top: 2.8em; } }

/*================================================== Content Area

=
=====================================*/

background-color: var(--color-tertiary); padding-top: 20px; border: 0; box-shadow: none; }
 * 1) mw-content {

/* Font spacing adjustment */ .mw-body-content { line-height: 1.5; }

/* Change border color on selected */ .tools-inline li.selected { border-bottom-color: var(--color-primary); }

/* Page title line color and thickness */ border-bottom: solid 3px var(--color-primary); }
 * 1) firstHeading {

/* Hide subline */ display: none; }
 * 1) siteSub {

/* Fonts for page and section headings */ .mw-body h1, .mw-body h2 { font-family: 'Rubik', sans-serif; color: var(--color-header); overflow: visible; }

/* Adjust font family on headers and lists */ .mw-body h3, .mw-body h4, .mw-body h5, .mw-body h6, .mw-body dt { font-family: 'Rubik', sans-serif; }

.mw-body dd { margin-bottom: 0.01em; }

/* Set section header line color and thickness */ .mw-parser-output h2 { border-bottom: solid 2px var(--color-border); }

/* Background color for code text box */ pre, .mw-code { background-color: #F8F9FA; }

/* Border collapse to separate (Timeless sets this to collapse by default) */ table { border-collapse: separate; border-spacing: revert; }

/* Remove background, border and shadows for SiteNotice container */ .mw-dismissable-notice, background: none; border-style: none; box-shadow: none; }
 * 1) localNotice {

.toc { border-radius: 10px; box-shadow: none; }

/* Image thumbnail adjustments */ .thumbinner { border-radius: 10px; box-shadow: none; }

.thumbinner .thumbimage { border: none; border-radius: 5px; }

/* Float adjustments */ .floatleft, .tleft { margin: 0 0.5em 0.5em 0; padding: 0 0.5em 0.5em 0; }

.floatright, .tright { margin: 0 0 0.5em 0.5em; padding: 0 0 0.5em 0.5em; }

/*================================================== Categories

=
=====================================*/   display: none; }
 * 1) catlinks-sidebar {

display: inherit !important; border-top: 3px solid var(--color-border); padding-bottom: 2em; margin: 0 2em; padding: 1em 0 1em; }
 * 1) catlinks {

border-top: 0; }
 * 1) catlinks.catlinks-allhidden {

background-color: var(--color-tertiary); }
 * 1) content-bottom-stuff {

@media screen and (min-width: 1100px) { #content-bottom-stuff { border-radius: 0 0 var(--layout-radius) var(--layout-radius); }

#mw-content { border-radius: var(--layout-radius) var(--layout-radius) 0 0; } }

/* Adjust padding and borders on mobile/tablet */ @media screen and (max-width: 1099px) { .catlinks li { border-left: 1px solid var(--color-border) !important; }

.catlinks li:first-child { padding-left: 0.25em !important; border-left: 0 !important; } }

/*================================================== Footer

=
=====================================*/ /* Body color is footer color */ body { background: var(--color-footer); }

/*================================================== Special Pages

=
=====================================*/ /* Fix left margin pushing content outside viewable area on mobile */ .client-js .mw-changeslist table.mw-enhanced-rc { margin-left: 0.2em; }

/* Fix for preferences page background */ .mw-prefs-buttons { background-color: var(--color-tertiary); }

/* Print media fixes */ @media print {

#mw-content, #content-bottom-stuff { background-color: #FFFFFF; }

}