MediaWiki:Timeless.css: Difference between revisions

Revision as of 02:51, 4 April 2023

:root {
  --bg-darkest: #202020;
  --bg-dark: #585858;
  --bg-middle: #A9A9A9;
  --bg-light: #D0D0D0;
  --bg-lightest: #FFFFFF;

  --ac-border: #1E90FF;
  --ac-link: #00FFFF;
  --ac-text: #FFFFFF;

  --g-text: #000000;
  --g-link: #000080;
  --g-link-hover: #0000CD;
  --g-bwtag-hover: #00FFFF;
  --g-highlight: #B0C4DE;
  --g-border: #000000;
  --g-overlay: rgba(140, 140, 140, 0.5);

  --svg-sm: #000000;
}

body {
    background: var(--bg-middle);
}

a:link, a:visited {
    color: var(--g-link);
}

a:focus, a:hover {
    color: var(--g-link-hover);
}

#mw-content-container {
    background: var(--bg-darkest);
    border-bottom: none;
}

#mw-content {
    background: var(--bg-light);
    padding: .5em 1em 1em;
}

#mw-content-wrapper {
    background: var(--bg-light);
}

#mw-header-container {
    background: var(--bg-middle);
}

#mw-site-navigation .sidebar-chunk, #mw-related-navigation .sidebar-chunk, .dropdown, #personal .dropdown {
    border-left: 3px solid var(--ac-border);
    background-image: linear-gradient(to right, var(--bg-darkest), var(--bg-dark));
}

li.mw-list-item > a:link, li.mw-list-item > a:visited, .mw-portlet-body > ul > li > a:link, .mw-portlet-body > ul > li > a:visited {
    color: var(--ac-link);
}

li.mw-list-item > a:hover, li.mw-list-item > a:focus, .mw-portlet-body > ul > li > a:hover, .mw-portlet-body > ul > li > a:focus {
    color: var(--ac-text);
}

#mw-portlet {
    color: var(--ac-text);
}

.sidebar-inner, #p-personal {
    color: var(--ac-text);
}

/* #p-namespaces, #p-views, #p-more {
    background: var(--bg-dark);
} */

.tools-inline > .mw-portlet-body > ul > .mw-list-item > a:link, .tools-inline > .mw-portlet-body > ul > .mw-list-item > a:hover {
    color: var(--g-link);
}

.tools-inline > .mw-portlet-body > ul > .mw-list-item > a:link, .tools-inline > .mw-portlet-body > ul > .mw-list-item > a:hover {
    color: var(--g-link);
}

.tools-inline li.selected a:visited, .tools-inline li.selected a:hover {
    color: var(--g-link) !important;
}

.tools-inline li:hover {
    border-bottom-color: var(--ac-border);
}

.tools-inline li.selected {
    border-bottom-color: var(--ac-border);
}


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

#site-navigation .sidebar-inner, .dropdown, #personal .dropdown, .sidebar-inner {
    border-left: 3px solid var(--ac-border);
    background-image: linear-gradient(to right, var(--bg-darkest), var(--bg-dark));
}

}

.mw-footer-container {
    color: var(--g-text);
    background: var(--bg-middle);
}

.mw-footer-container a:visited, .mw-footer-container a:link {
    color: var(--g-link);
}

.mw-footer-container a:hover, .mw-footer-container a:focus, .mw-footer-container a:visited:hover {
    color: var(--g-link-hover);
}

.color-middle, .color-right, .color-left {
    background: var(--bg-dark);
}



/* Snippets */

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

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