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.
/* All CSS here will be loaded for users of the Timeless skin */
html {
--timeless-header-height: 56px;
--timeless-site-nav-height: 36px;
background: var(--tg-color-surface-0);
}
:focus-visible {
outline-color: var(--tg-color-progressive);
}
/* BULLET POINTS */
ul {
margin-left: 0.7em;
padding-left: 0.7em;
}
/* Backport Citizen overflow class */
.citizen-overflow {
overflow-x: auto;
}
/* Timeless does not respect __NOTITLE__ */
.page-Main_Page .mw-page-title-main {
display: none;
}
#mw-header-container {
z-index: 1000; /* Fix navigation menu appear above header */
border-bottom: var(--tg-border-base);
height: var(--timeless-site-nav-height);
/* Set background color to a color similiar to the background image */
background-color: #b5d8ef;
background-image: url("/w/resources/assets/tg-top-bar.webp");
background-repeat: repeat-x;
background-size: cover;
}
#mw-content-container {
background: var(--tg-color-surface-0);
border-bottom: var(--tg-border-base);
}
/* Fix wordmark logo alignment */
#p-logo-text {
display: flex;
align-items: center;
}
/* Fix personal menu icon alignment */
#personal h2 {
background-position: left center;
}
/* TG theme */
body {
color: var(--tg-color-base);
font-family: var(--tg-font-family-body);
font-size: var(--tg-font-size-medium);
line-height: var(--tg-line-height);
}
h1,
h2,
h3,
h4,
h5,
h6,
dt {
color: var(--tg-color-emphasized);
}
b,
h1,
h2,
h3,
h4,
h5,
h6,
dt,
th {
font-weight: var(--tg-font-weight-semibold);
}
.mw-body h1,
.mw-body h2,
.mw-body h3,
.mw-body h4,
.mw-body h5,
.mw-body h6 {
font-family: var(--tg-font-family-heading);
font-weight: var(--tg-font-weight-semibold);
line-height: var(--tg-line-height-xxx-small);
}
.mw-body h1 {
font-size: var(--tg-font-size-xxx-large);
}
.mw-body h2 {
font-size: var(--tg-font-size-xx-large);
border-bottom: 0;
}
.mw-body h3 {
font-size: var(--tg-font-size-x-large);
}
.mw-body h4 {
font-size: var(--tg-font-size-large);
}
.mw-body h5 {
font-size: var(--tg-font-size-medium);
}
.mw-body h6 {
font-size: var(--tg-font-size-medium);
}
.mw-body h1.firstHeading {
margin-bottom: 0.25rem;
border-bottom: 0;
}
.mw-body .toctitle h2 {
font-family: var(--tg-font-family-body);
}
.floatleft,
.tleft {
margin: 0 1rem 1rem 0;
padding: 0;
}
.floatright,
.tright {
margin: 0 0 1rem 1rem;
padding: 0;
}
/* Remove bottom border under h1 and h2 */
.mw-body .mw-parser-output h1:after,
.mw-body .mw-parser-output h2:after {
content: none;
}
/* Make menu links more clickable */
.mw-list-item a {
display: block;
font-weight: var(--tg-font-weight-medium);
font-size: var(--tg-font-size-small);
}
.mw-editsection {
font-family: var(--tg-font-family-body);
font-size: var(--tg-font-size-small);
}
#mw-content {
background: var(--tg-color-surface-0);
}
.mw-footer-container {
border-top: 0;
box-shadow: none;
}
.tools-inline li.selected {
border-bottom-color: var(--tg-color-progressive);
}
.toc {
padding: 0; /* Let its children handle the padding */
line-height: var(--tg-line-height-xxx-small);
}
.toc > ul {
margin-top: 0;
padding: 0 1rem 0.5rem 1rem;
}
.mw-body .toctitle {
border-bottom: 0;
padding: 0.75rem 1rem;
}
.toctitle {
position: relative;
}
/* Make the whole ToC header clickable */
.toctogglelabel {
position: absolute;
inset: 0;
margin: 0;
display: flex;
align-items: center;
justify-content: flex-end;
padding: 0.75rem 1rem;
}
ul#filetoc,
.toc,
.toccolours,
.mw-warning {
border: var(--tg-border-base);
box-shadow: none;
background: var(--tg-color-surface-2);
}
.thumbinner {
padding: 0;
box-shadow: none;
border: var(--tg-border-base);
background: var(--tg-color-surface-2);
}
.thumbcaption {
padding: 0.5em;
font-size: var(--tg-font-size-small);
}
/* Fix search bar alignment */
#searchInput {
height: 36px;
padding-top: 0.25em;
padding-bottom: 0.25em;
}
#simpleSearch {
box-shadow: none;
border: var(--tg-border-base);
}
/* Reset editor font size */
.mw-editfont-monospace,
.mw-editfont-sans-serif,
.mw-editfont-serif {
font-size: 13px;
}
@media screen and (max-width: 850px) {
.floatleft,
.tleft {
margin-right: 0;
}
.floatright,
.tright {
margin-left: 0;
}
/* Use smaller icon instead of wordmark */
.wordmark::before {
content: "";
background-image: url(https://tolkiengateway.net/w/resources/assets/tg-stamp.png);
background-size: contain;
background-repeat: no-repeat;
width: 32px;
height: 32px;
display: block;
}
.wordmark > img {
display: none;
}
/* Fix wordmark logo alignment */
#p-logo-text {
top: 1em;
}
#mw-header-container {
padding: var(--timeless-header-height) 0 0 0;
}
#mw-header-hack {
display: none;
}
#mw-content-block {
background: var(--tg-color-surface-0);
}
#mw-content {
padding: 0.5em 16px;
}
.sidebar-inner,
.dropdown {
background: var(--tg-color-surface-1);
font-size: var(--tg-font-size-small);
line-height: var(--tg-line-height-xxx-small);
}
}
@media screen and (min-width: 851px) {
#mw-header-container {
min-height: var(--timeless-header-height);
}
/* Fix header alignment */
#mw-header {
display: flex;
align-items: center;
}
#personal h2 {
font-family: var(--tg-font-family-body);
font-weight: var(--tg-font-weight-medium);
color: #fff;
filter: drop-shadow(2px 4px 6px black);
}
#mw-header-nav-hack,
#mw-header-hack {
display: none;
}
#mw-content-container {
margin-top: var(--timeless-header-height);
}
#personal .dropdown {
background: var(--tg-color-surface-1);
line-height: var(--tg-line-height-xxx-small);
font-size: var(--tg-font-size-small);
border: var(--tg-border-base);
}
/* Search key hint */
#simpleSearch:after {
content: "/";
position: absolute;
top: 0;
bottom: 0;
right: 8px;
border: var(--tg-border-base);
border-radius: 4px;
margin: 8px 0;
width: 16px;
font-size: 10px;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
font-weight: 800;
background: var(--tg-color-surface-3);
}
}
@media screen and (min-width: 851px) and (max-width: 1099px) {
#mw-content {
margin-top: calc(
var(--timeless-header-height) + var(--timeless-site-nav-height)
);
border-top: var(--tg-border-base);
}
#mw-site-navigation .sidebar-inner {
background: var(--tg-color-surface-1);
border: var(--tg-border-base);
}
#mw-site-navigation h2,
#mw-related-navigation h2 {
font-family: var(--tg-font-family-body);
font-size: var(--tg-font-size-medium);
font-weight: var(--tg-font-weight-medium);
}
}
@media screen and (min-width: 1100px) {
/* Set background color to a color similiar to the background image */
#mw-content-container {
background-color: #e4dcc6;
}
/* Lazy load background image only when needed */
.timeless-background-ready #mw-content-container {
background-image: url(/w/resources/assets/tg-map-compressed.webp);
}
}
@media screen and (min-width: 1100px) and (max-width: 1339px) {
#mw-site-navigation .sidebar-chunk,
#mw-related-navigation .sidebar-chunk {
background: var(--tg-color-surface-0);
font-size: var(--tg-font-size-small);
line-height: var(--tg-line-height-xxx-small);
box-shadow: none;
border: var(--tg-border-base);
}
}
@media screen and (min-width: 1340px) {
#mw-content-wrapper {
border-left: var(--tg-border-base);
border-right: var(--tg-border-base);
}
#mw-site-navigation .sidebar-chunk,
#mw-related-navigation .sidebar-chunk {
background: var(--tg-color-surface-0);
font-size: var(--tg-font-size-small);
line-height: var(--tg-line-height-xxx-small);
}
}