|
|
| Line 1: |
Line 1: |
| /* ============================================================ | | /* ============================================================ |
| TIMELESS DARK MODE | | SIDEBAR WIDTH |
| ============================================================ */ | | ============================================================ */ |
|
| |
|
| @import url(
| | /* |
| "https://www.mediawiki.org/wiki/Skin:Timeless-DarkCSS/timeless-dark.css?action=raw&ctype=text/css"
| | * Timeless normally uses approximately 15em for the |
| );
| | * left navigation area. |
| | * |
| | * Increase it by 20%. |
| | */ |
|
| |
|
| | | #mw-site-navigation { |
| /* ============================================================
| | width: 18em !important; |
| COLOR VARIABLES
| |
| ============================================================ */
| |
| | |
| :root {
| |
| --background: #111;
| |
| --content: #181818;
| |
| --panel: #202020;
| |
| --input: #222;
| |
| --border: #444;
| |
| | |
| --text: #ddd; | |
| --heading: #eee;
| |
| --muted-text: #aaa;
| |
| | |
| --link: #75aadb;
| |
| --visited-link: #a98bd4;
| |
| } | | } |
|
| |
|
|
| |
|
| /* ============================================================ | | /* ============================================================ |
| PAGE BACKGROUND | | DROPDOWN LAYER 1 |
| ============================================================ */ | | ============================================================ */ |
|
| |
|
| html,
| | /* |
| body {
| | * Examples: |
| background: var(--background) !important;
| | * |
| color: var(--text) !important;
| | * Locations |
| }
| | * Religions |
| | * People |
| | * World Building |
| | * |
| | * These remain the larger top-level headings. |
| | */ |
|
| |
|
| | | .exuvia-dropdown-level-1 > li > a { |
| /* ============================================================
| | font-weight: bold !important; |
| MAIN CONTENT
| |
| ============================================================ */
| |
| | |
| #mw-content-container {
| |
| background: var(--background) !important;
| |
| background-image: none !important;
| |
| }
| |
| | |
| #mw-content {
| |
| background: var(--content) !important;
| |
| color: var(--text) !important;
| |
| }
| |
| | |
| | |
| /* ============================================================
| |
| HEADER
| |
| ============================================================ */
| |
| | |
| #mw-header-container {
| |
| background: var(--content) !important;
| |
| }
| |
| | |
| | |
| /* ============================================================
| |
| SIDEBARS
| |
| ============================================================ */
| |
| | |
| #mw-site-navigation,
| |
| #mw-related-navigation {
| |
| background: var(--content) !important;
| |
| }
| |
| | |
| #mw-site-navigation .portal,
| |
| #mw-related-navigation .portal {
| |
| background: var(--content) !important;
| |
| color: var(--text) !important;
| |
| }
| |
| | |
| #mw-site-navigation .portal h3,
| |
| #mw-related-navigation .portal h3 {
| |
| background: var(--input) !important;
| |
| color: var(--heading) !important;
| |
| }
| |
| | |
| #mw-site-navigation ul,
| |
| #mw-site-navigation li,
| |
| #mw-related-navigation ul,
| |
| #mw-related-navigation li {
| |
| background: transparent !important;
| |
| }
| |
| | |
| | |
| /* ============================================================
| |
| LINKS
| |
| ============================================================ */
| |
| | |
| a {
| |
| color: var(--link) !important;
| |
| }
| |
| | |
| a:visited { | |
| color: var(--visited-link) !important; | |
| }
| |
| | |
| | |
| /* ============================================================
| |
| HEADINGS
| |
| ============================================================ */
| |
| | |
| h1,
| |
| h2,
| |
| h3,
| |
| h4,
| |
| h5,
| |
| h6 {
| |
| color: var(--heading) !important;
| |
| border-color: var(--border) !important;
| |
| }
| |
| | |
| | |
| /* ============================================================
| |
| SEARCH BAR
| |
| ============================================================ */
| |
| | |
| #simpleSearch {
| |
| background: var(--input) !important;
| |
| border-color: var(--border) !important;
| |
| }
| |
| | |
| #searchInput {
| |
| background: transparent !important;
| |
| color: var(--heading) !important;
| |
| }
| |
| | |
| | |
| /* ============================================================
| |
| SEARCH BUTTON
| |
| ============================================================ */
| |
| | |
| .mw-searchButton {
| |
| display: none;
| |
| }
| |
| /* ============================================================
| |
| HIDE TIMELESS HEADER SEARCH BUTTON
| |
| ============================================================ */
| |
| | |
| #p-search button,
| |
| #p-search .mw-ui-button,
| |
| #p-search input[type="submit"] {
| |
| display: none !important;
| |
| }
| |
| | |
| /* ============================================================
| |
| SEARCH PAGE TABS
| |
| ============================================================ */
| |
| | |
| .mw-search-profile-tabs {
| |
| background: #181818 !important;
| |
| border-color: #444 !important;
| |
| }
| |
| | |
| .mw-search-profile-tabs li {
| |
| background: #202020 !important;
| |
| border-color: #444 !important;
| |
| }
| |
| | |
| .mw-search-profile-tabs a {
| |
| background: #202020 !important;
| |
| color: #ddd !important;
| |
| }
| |
| | |
| .mw-search-profile-tabs .selected,
| |
| .mw-search-profile-tabs .selected a {
| |
| background: #181818 !important;
| |
| color: #fff !important; | | color: #fff !important; |
| }
| |
|
| |
| .mw-search-profile-tabs a:hover {
| |
| background: #292929 !important;
| |
| color: #fff !important;
| |
| }
| |
|
| |
|
| |
| /* ============================================================
| |
| TABLES
| |
| ============================================================ */
| |
|
| |
| .wikitable,
| |
| .mw-datatable,
| |
| .mw-metadata {
| |
| background: var(--panel) !important;
| |
| color: var(--text) !important;
| |
| border-color: var(--border) !important;
| |
| }
| |
|
| |
| .wikitable th,
| |
| .mw-datatable th {
| |
| background: #292929 !important;
| |
| color: var(--heading) !important;
| |
| }
| |
|
| |
| .wikitable td,
| |
| .mw-datatable td {
| |
| background: var(--panel) !important;
| |
| color: var(--text) !important;
| |
| border-color: var(--border) !important;
| |
| }
| |
|
| |
|
| |
| /* ============================================================
| |
| INFOBOXES
| |
| ============================================================ */
| |
|
| |
| .infobox {
| |
| background: var(--panel) !important;
| |
| color: var(--text) !important;
| |
| }
| |
|
| |
|
| |
| /* ============================================================
| |
| CODE BLOCKS
| |
| ============================================================ */
| |
|
| |
| pre,
| |
| code,
| |
| .mw-code {
| |
| background: var(--panel) !important;
| |
| color: var(--text) !important;
| |
| border-color: var(--border) !important;
| |
| }
| |
|
| |
|
| |
| /* ============================================================
| |
| FORM INPUTS
| |
| ============================================================ */
| |
|
| |
| input,
| |
| textarea,
| |
| select {
| |
| background: var(--input) !important;
| |
| color: var(--heading) !important;
| |
| border-color: #555 !important;
| |
| }
| |
|
| |
|
| |
| /* ============================================================
| |
| TABLE OF CONTENTS
| |
| ============================================================ */
| |
|
| |
| .toc,
| |
| .toccolours {
| |
| background: var(--panel) !important;
| |
| color: var(--text) !important;
| |
| border-color: var(--border) !important;
| |
| }
| |
|
| |
| .toc a {
| |
| color: var(--link) !important;
| |
| }
| |
|
| |
| .mw-body .toctitle {
| |
| color: var(--heading) !important;
| |
| border-color: var(--border) !important;
| |
| } | | } |
|
| |
|
|
| |
|
| /* ============================================================ | | /* ============================================================ |
| WIKI LOGO | | DROPDOWN LAYER 2 |
| ============================================================ */ | | ============================================================ */ |
|
| |
|
| #p-logo-text {
| | /* |
| display: none !important;
| | * Examples: |
| }
| | * |
| | | * Continents |
| #p-logo {
| | * Kingdoms |
| background: transparent !important;
| | * Towns |
| }
| | * |
| | * These are the second-level headings. |
| | */ |
|
| |
|
| | | .exuvia-dropdown-level-2 > li > a { |
| /* ============================================================
| | font-size: 16px !important; |
| FOOTER
| |
| ============================================================ */
| |
| | |
| .mw-footer-container, | |
| .mw-footer {
| |
| background: var(--background) !important;
| |
| color: var(--muted-text) !important;
| |
| }
| |
| | |
| | |
| /* ============================================================
| |
| DEFAULT FONT SIZE
| |
| ============================================================ */
| |
| | |
| body {
| |
| font-size: 16px; | |
| }
| |
| | |
| | |
| /* ============================================================
| |
| DROPDOWN TITLES
| |
| ============================================================ */
| |
| | |
| li:has(> .exuvia-dropdown-menu) > a {
| |
| font-weight: bold !important; | | font-weight: bold !important; |
| font-size: calc(1em + 2px) !important;
| |
| color: #fff !important; | | color: #fff !important; |
| }
| |
|
| |
|
| |
| /* ============================================================
| |
| DROPDOWN MENUS
| |
| ============================================================ */
| |
|
| |
| .exuvia-dropdown-arrow {
| |
| margin-left: 4px;
| |
| font-size: 0.8em;
| |
| }
| |
|
| |
| .exuvia-dropdown-menu {
| |
| margin: 0 !important;
| |
| padding: 0 !important;
| |
| background: var(--panel) !important;
| |
| }
| |
|
| |
| .exuvia-dropdown-menu li {
| |
| list-style: none !important;
| |
| margin: 0 !important;
| |
| padding: 0 !important;
| |
| background: transparent !important;
| |
| }
| |
|
| |
| .exuvia-dropdown-menu a {
| |
| display: block !important;
| |
| padding: 8px 12px !important;
| |
| background: transparent !important;
| |
| color: var(--link) !important;
| |
| }
| |
|
| |
| .exuvia-dropdown-menu a:hover {
| |
| background: var(--input) !important;
| |
| } | | } |