/* Redesign W */
/* A new design for Wikipedia. Beautiful and more readable. */
/* Created in October 2020 by Nick */
/* nickdvlpr */
/* LIGHT MODE */
/* NOTE: ALL CHANGES SHOULD BE DUPLICATED IN DARK MODE SECTION AT BOTTOM OF THIS FILE */
@media (prefers-color-scheme: light) {
/* MAIN ELEMENTS */
body {
padding: 0 10%;
background-color: #ffffff;
}
img {
border-radius: 10px;
}
html .thumbimage {
/* This is the border around most thumbnail images within an article. */
/* Keep as default 1px border, because it looks good for an image with no background or a white background. */
border-radius: 10px;
}
.mw-content-ltr .thumbcaption {
text-align: left;
margin-top: 8px;
}
p {
color: rgba(0,0,0,0.8);;
text-align: left;
letter-spacing: 0.08px;
word-wrap: break-word;
margin-bottom: 30px;
}
h1 {
font-size: 48px;
}
h2 {
font-size: 30px;
border-bottom: 0px;
}
.mw-body-content h2 {
margin-top: 2em;
font-size: 2.0em;
}
h3 {
font-size: 24px;
}
div {
line-height: 24px;
}
div.thumbinner {
border: 0px solid #c8ccd1;
padding: 3px;
background-color: #fff;
font-size: 94%;
text-align: center;
overflow: hidden;
}
.pBody li {
margin: 10px 0 !important;
}
.pBody {
padding-top: 5px !important;
padding-bottom: 5px !important;
}
/* Links */
p a:link {
color: rgba(0,0,0,0.8);
text-decoration: underline;
text-decoration-color: #e0e0e0;
}
p a:visited {
color: rgba(0,0,0,0.8);
text-decoration: underline;
text-decoration-color: #e0e0e0;
}
/* Page Previews (must be enabled in Preferences -> Appearance) */
.mwe-popups {
border-radius: 10px;
background:#fff;
}
/* These are the Article, Talk, and other tabs normally on the top of the page. */
.vector-menu-tabs a {
background: #ffffff;
color: #bdbdbd;
}
.vector-menu-tabs .selected {
background: #ffffff;
}
.vector-menu-tabs ul {
}
.vector-menu-tabs {
background-image: linear-gradient(to bottom,rgba(255,255,255,0) 0, #ffffff 100%);
background-repeat: no-repeat;
background-size: 0px 0%;
}
/* Normally, when logged in to a Wikipedia account, an Edit Source link appears next to every subheader within brackets.
I chose to make these three things hidden since I am just a reader, not an editor. */
.client-js .mw-content-ltr .mw-editsection-bracket:first-of-type, .client-js .mw-content-rtl .mw-editsection-bracket:not(:first-of-type) {
margin-right: 0.25em;
visibility: hidden;
}
.client-js .mw-content-rtl .mw-editsection-bracket:first-of-type, .client-js .mw-content-ltr .mw-editsection-bracket:not(:first-of-type) {
margin-left: 0.25em;
visibility: hidden;
}
.mw-editsection a {
white-space: nowrap;
visibility: hidden;
}
/* ICONS */
/* Find your URLs here and then click raw once you find the icon you want: https://github.com/google/material-design-icons/tree/master/src */
/* Icon - Notifications */
.oo-ui-icon-bell, .mw-ui-icon-bell:before {
background-size: 20px;
background-repeat: no-repeat;
background-position: center;
background-image: linear-gradient(transparent,transparent),url("https://raw.githubusercontent.com/google/material-design-icons/master/src/social/notifications/materialiconsoutlined/24px.svg");
}
.oo-ui-icon-tray, .mw-ui-icon-tray:before {
background-size: 20px;
background-repeat: no-repeat;
background-position: center;
background-image: linear-gradient(transparent,transparent),url(https://raw.githubusercontent.com/google/material-design-icons/master/src/content/inbox/materialiconsoutlined/24px.svg);
}
#pt-anonuserpage, #pt-userpage a {
background-image: url("https://raw.githubusercontent.com/google/material-design-icons/master/src/action/contact_page/materialiconsoutlined/24px.svg");
background-size: 20px;
background-repeat: no-repeat;
background-position: center;
padding-top: 0.6em !important;
padding-left: 120px !important;
}
/* This is the main header of the article. */
#firstHeading {
margin: 50px 50px 0;
border-bottom: 0px;
font-size: 2.4em;
}
#siteSub {
color: #aaaaaa;
margin-bottom: 20px;
font-size: 12px;
}
#contentSub {
font-size: 12px;
line-height: 1em;
margin: 0 0 1.4em 0em;
color: #aaaaaa;
}
/* This is the note text below the main header of the article. */
div.hatnote {
padding-left: 0em;
margin-top: 0px;
margin-bottom: 0px;
color: #aaaaaa;
font-style: normal;
font-size: 12px;
}
div.hatnote + div.hatnote {
margin-top: -0.5em;
margin-bottom: 0px;
}
/* This is the box that sometimes appears at the top of an article if it is unreliable or needs editing. */
table.ambox {
margin: 20px 0%;
border: 1px solid #a2a9b1;
border-radius: 8px;
}
/* This is for the information box aligned on right side within the article. */
.infobox {
margin: 0em 0em 2em 2em;
padding: 1.0em;
border-radius: 8px;
}
#bodyContent {
margin: 0 50px;
}
/* References section */
.reflist {
list-style-type: decimal;
background: #fafafa;
border-radius: 10px;
border: 1px solid #bdbdbd;
padding: 20px 20px 20px 10px;
}
/* Sidebar link colors */
.vector-menu-portal h3 {
color: #d0d0d0;
}
.vector-menu-portal .body li a:visited, .vector-menu-portal .vector-menu-content li a:visited {
color: #e0e0e9;
}
.vector-menu-portal .body li a, .vector-menu-portal .vector-menu-content li a {
color: #e0e0e0;
}
/* These are background areas in top header area and left sidebar area. */
#mw-page-base {
background-color: #ffffff;
background-image: linear-gradient(to bottom,#ffffff 50%,#ffffff 100%);
}
#mw-head-base {
background-color: #ffffff;
}
#mw-navigation {
background-color: #ffffff;
}
/* All the clickable linked pages in the tob bar area. */
/* These can be further subdivided into: p-personal, left-navigation, right-navigation, and simpleSearch*/
#mw-head {
background-color: #ffffff;
visibility: hidden;
}
#mw-panel {
background-color: #ffffff;
}
.mw-body {
margin-left: 4em;
margin-right: 4em;
}
.vector-menu-portal .body li a:visited {
color: #bdbdbd;
}
.vector-menu-portal .body li a:link {
color: #bdbdbd;
}
/* MAIN ELEMENTS */
/* LOGO - WIKIPEDIA */
.mw-wiki-logo {
background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/5/5a/Wikipedia%27s_W.svg/1024px-Wikipedia%27s_W.svg.png");
background-size: 135px auto;
}
/* SEARCH BAR */
#simpleSearch {
box-shadow: 0px 0px 10px rgba(0,0,0,0.0);
background: #f5f5f5;
color: #bdbdbd;
border: 0px;
border-radius: 40px;
padding: 8px 8px 8px 12px;
position: absolute;
top: 40px;
left: 283px;
height: auto;
width: 800px;
visibility: visible;
}
#searchInput {
background-color: #f5f5f5;
color: #000000;
width: 100%;
border: 0px;
font-size: 0.8125em;
direction: ltr;
box-shadow: none !important;
}
#searchButton {
background-position: right center;
top: 7px;
right: 15px;
opacity: 60%;
}
.toc {
margin-top: 20px;
border-radius: 8px;
}
#content {
color: rgba(0, 0, 0, 0.8);
border-right: 0px solid #999;
border: 0px;
}
#p-logo {
width: 9.5em;
height: 152px;
margin-bottom: 0em;
}
#p-personal li {
margin-left: 10px !important;
}
#left-navigation {
left: 0px;
visibility: hidden;
}
.vector-menu-tabs li a {
color: #aaaaaa;
float: right;
position: relative;
padding-top: 8px;
padding-left: 12px;
padding-right: 12px;
padding-bottom: 0px;
font-size: 12px;
cursor: pointer;
}
.vector-menu-tabs .selected a, .vector-menu-tabs .selected a:visited {
color: #616161;
}
/* SPECIFIC PAGES */
/* WIKIPEDIA MAIN PAGE */
#mp-welcome {
text-align: left;
padding: 0em;
}
#mp-free {
font-size: 16px;
text-align: left;
}
}
/* END OF LIGHT MODE */
/********************/
/********************/
/********************/
/********************/
/********************/
/********************/
/********************/
/********************/
/********************/
/********************/
/* DARK MODE */
@media (prefers-color-scheme: dark) {
/* MAIN ELEMENTS */
a {
color: #b7c4d9;
}
body {
padding: 0 10%;
background-color: #2b2a33;
}
.mw-body {
background-color: #2b2a33;
}
.mw-page-base {
background-color: #2b2a33;
background-image: linear-gradient(to bottom, #2b2a33 100%, #2b2a33 100%);
}
img {
border-radius: 10px;
}
html .thumbimage {
/* This is the border around most thumbnail images within an article. */
/* Keep as default 1px border, because it looks good for an image with no background or a white background. */
border-radius: 10px;
}
.mw-content-ltr .thumbcaption {
text-align: left;
margin-top: 8px;
}
p {
color: rgba(255,255,255,0.8);;
text-align: left;
letter-spacing: 0.08px;
word-wrap: break-word;
margin-bottom: 30px;
}
h1 {
color: rgba(255,255,255,0.8);;
font-size: 48px;
}
h2 {
color: rgba(255,255,255,0.8);;
font-size: 30px;
border-bottom: 0px;
}
.mw-body-content h2 {
color: rgba(255,255,255,0.8);;
margin-top: 2em;
font-size: 2.0em;
}
h3 {
color: rgba(255,255,255,0.8);;
font-size: 24px;
}
div {
line-height: 24px;
}
div.thumbinner {
border: 0px solid #c8ccd1;
padding: 3px;
background-color: #2b2a33;
font-size: 94%;
text-align: center;
overflow: hidden;
}
.pBody li {
margin: 10px 0 !important;
}
.pBody {
padding-top: 5px !important;
padding-bottom: 5px !important;
}
/* Links */
p a:link {
color: rgba(255,255,255,0.8);
text-decoration: underline;
text-decoration-color: #e0e0e0;
}
p a:visited {
color: rgba(255,255,255,0.8);
text-decoration: underline;
text-decoration-color: #e0e0e0;
}
/* Page Previews (must be enabled in Preferences -> Appearance) */
.mwe-popups {
border-radius: 10px;
background:#2b2a33;
}
/* These are the Article, Talk, and other tabs normally on the top of the page. */
.vector-menu-tabs a {
background: #2b2a33;
color: #bdbdbd;
}
.vector-menu-tabs .selected {
background: #2b2a33;
}
.vector-menu-tabs ul {
}
.vector-menu-tabs {
background-image: linear-gradient(to bottom,rgba(255,255,255,0) 0, #ffffff 100%);
background-repeat: no-repeat;
background-size: 0px 0%;
}
/* Normally, when logged in to a Wikipedia account, an Edit Source link appears next to every subheader within brackets.
I chose to make these three things hidden since I am just a reader, not an editor. */
.client-js .mw-content-ltr .mw-editsection-bracket:first-of-type, .client-js .mw-content-rtl .mw-editsection-bracket:not(:first-of-type) {
margin-right: 0.25em;
visibility: hidden;
}
.client-js .mw-content-rtl .mw-editsection-bracket:first-of-type, .client-js .mw-content-ltr .mw-editsection-bracket:not(:first-of-type) {
margin-left: 0.25em;
visibility: hidden;
}
.mw-editsection a {
white-space: nowrap;
visibility: hidden;
}
/* ICONS */
/* Find your URLs here and then click raw once you find the icon you want: https://github.com/google/material-design-icons/tree/master/src */
/* Icon - Notifications */
.oo-ui-icon-bell, .mw-ui-icon-bell:before {
background-size: 20px;
background-repeat: no-repeat;
background-position: center;
background-image: linear-gradient(transparent,transparent),url("https://raw.githubusercontent.com/google/material-design-icons/master/src/social/notifications/materialiconsoutlined/24px.svg");
}
.oo-ui-icon-tray, .mw-ui-icon-tray:before {
background-size: 20px;
background-repeat: no-repeat;
background-position: center;
background-image: linear-gradient(transparent,transparent),url(https://raw.githubusercontent.com/google/material-design-icons/master/src/content/inbox/materialiconsoutlined/24px.svg);
}
#pt-anonuserpage, #pt-userpage a {
background-image: url("https://raw.githubusercontent.com/google/material-design-icons/master/src/action/contact_page/materialiconsoutlined/24px.svg");
background-size: 20px;
background-repeat: no-repeat;
background-position: center;
padding-top: 0.6em !important;
padding-left: 120px !important;
}
/* This is the main header of the article. */
#firstHeading {
margin: 50px 50px 0;
border-bottom: 0px;
font-size: 2.4em;
}
#siteSub {
color: #aaaaaa;
margin-bottom: 20px;
font-size: 12px;
}
#contentSub {
font-size: 12px;
line-height: 1em;
margin: 0 0 1.4em 0em;
color: #aaaaaa;
}
/* This is the note text below the main header of the article. */
div.hatnote {
padding-left: 0em;
margin-top: 0px;
margin-bottom: 0px;
color: #aaaaaa;
font-style: normal;
font-size: 12px;
}
div.hatnote + div.hatnote {
margin-top: -0.5em;
margin-bottom: 0px;
}
/* This is the box that sometimes appears at the top of an article if it is unreliable or needs editing. */
table.ambox {
margin: 20px 0%;
border: 1px solid #a2a9b1;
border-radius: 8px;
}
/* This is for the information box aligned on right side within the article. */
.infobox {
margin: 0em 0em 2em 2em;
padding: 1.0em;
border-radius: 8px;
}
#bodyContent {
margin: 0 50px;
}
/* References section */
.reflist {
list-style-type: decimal;
background: #3b3a46;
border-radius: 10px;
border: 1px solid #bdbdbd;
padding: 20px 20px 20px 10px;
}
/* Sidebar link colors */
.vector-menu-portal h3 {
color: #4a4a4e;
}
.vector-menu-portal .body li a:visited, .vector-menu-portal .vector-menu-content li a:visited {
color: #4a4a4e;
}
.vector-menu-portal .body li a, .vector-menu-portal .vector-menu-content li a {
color: #4a4a4e;
}
/* This is the translate button at the bottom of the sidebar */
#p-lang .mw-interlanguage-selector, #p-lang .mw-interlanguage-selector:active {
background: #3b3a46;
border: 0px solid #bdbdbd;
border-radius: 6px;
}
/* These are background areas in top header area and left sidebar area. */
#mw-page-base {
background-color: #2b2a33;
background-image: linear-gradient(transparent,transparent);
}
#mw-head-base {
background-color: #2b2a33;
}
#mw-navigation {
background-color: #2b2a33;
}
/* All the clickable linked pages in the tob bar area. */
/* These can be further subdivided into: p-personal, left-navigation, right-navigation, and simpleSearch*/
#mw-head {
background-color: #2b2a33;
visibility: hidden;
}
#mw-panel {
background-color: #2b2a33;
}
.mw-body {
margin-left: 4em;
margin-right: 4em;
}
.vector-menu-portal .body li a:visited {
color: #bdbdbd;
}
.vector-menu-portal .body li a:link {
color: #bdbdbd;
}
/* MAIN ELEMENTS */
/* LOGO - WIKIPEDIA */
.mw-wiki-logo {
background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/5/5a/Wikipedia%27s_W.svg/1024px-Wikipedia%27s_W.svg.png");
background-size: 135px auto;
filter: invert(1);
}
/* SEARCH BAR */
#simpleSearch {
box-shadow: 0px 0px 10px rgba(0,0,0,0.0);
background: #3b3a46;
color: #bdbdbd;
border: 0px;
border-radius: 40px;
padding: 8px 8px 8px 12px;
position: absolute;
top: 40px;
left: 283px;
height: auto;
width: 800px;
visibility: visible;
}
#searchInput {
background-color: #3b3a46;
color: #000000;
width: 100%;
border: 0px;
font-size: 0.8125em;
direction: ltr;
box-shadow: none !important;
}
#searchButton {
background-position: right center;
top: 7px;
right: 15px;
opacity: 60%;
}
.toc {
background-color: #2b2a33;
margin-top: 20px;
border-radius: 8px;
}
#content {
color: rgba(255, 255, 255, 0.8);
border-right: 0px solid #999;
border: 0px;
}
#p-logo {
width: 9.5em;
height: 152px;
margin-bottom: 0em;
}
#p-personal li {
margin-left: 10px !important;
}
#left-navigation {
left: 0px;
visibility: hidden;
}
.vector-menu-tabs li a {
color: #aaaaaa;
float: right;
position: relative;
padding-top: 8px;
padding-left: 12px;
padding-right: 12px;
padding-bottom: 0px;
font-size: 12px;
cursor: pointer;
}
.vector-menu-tabs .selected a, .vector-menu-tabs .selected a:visited {
color: #616161;
}
/* SPECIFIC PAGES */
/* WIKIPEDIA MAIN PAGE */
#mp-welcome {
text-align: left;
padding: 0em;
}
#mp-free {
font-size: 16px;
text-align: left;
}
}
