User:Redesign W/vector.css

/* 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); }   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; }
 * 1) pt-anonuserpage, #pt-userpage a {

/* This is the main header of the article. */	margin: 50px 50px 0; border-bottom: 0px; font-size: 2.4em; }	color: #aaaaaa; margin-bottom: 20px; font-size: 12px; }   font-size: 12px; line-height: 1em; margin: 0 0 1.4em 0em; color: #aaaaaa; }
 * 1) firstHeading {
 * 1) siteSub {
 * 1) contentSub {

/* 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; }

margin: 0 50px; }
 * 1) bodyContent {

/* 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. */	background-color: #ffffff; background-image: linear-gradient(to bottom,#ffffff 50%,#ffffff 100%); }	background-color: #ffffff; }	background-color: #ffffff; }
 * 1) mw-page-base {
 * 1) mw-head-base {
 * 1) mw-navigation {

/* All the clickable linked pages in the tob bar area. */ /* These can be further subdivided into: p-personal, left-navigation, right-navigation, and simpleSearch*/ background-color: #ffffff; visibility: hidden; }	background-color: #ffffff; }
 * 1) mw-head {
 * 1) mw-panel {

.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 */ 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; }   background-color: #f5f5f5; color: #000000; width: 100%; border: 0px; font-size: 0.8125em; direction: ltr; box-shadow: none !important; }	background-position: right center; top: 7px; right: 15px; opacity: 60%; }
 * 1) simpleSearch {
 * 1) searchInput {
 * 1) searchButton {

.toc { margin-top: 20px; border-radius: 8px; }

color: rgba(0, 0, 0, 0.8); border-right: 0px solid #999; border: 0px; }
 * 1) content {

width: 9.5em; height: 152px; margin-bottom: 0em; }
 * 1) p-logo {

margin-left: 10px !important; }
 * 1) p-personal li {

left: 0px; visibility: hidden; }
 * 1) left-navigation {

.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 */ text-align: left; padding: 0em; }   font-size: 16px; text-align: left; }
 * 1) mp-welcome {
 * 1) mp-free {

} /* 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); }   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; }
 * 1) pt-anonuserpage, #pt-userpage a {

/* This is the main header of the article. */	margin: 50px 50px 0; border-bottom: 0px; font-size: 2.4em; }	color: #aaaaaa; margin-bottom: 20px; font-size: 12px; }   font-size: 12px; line-height: 1em; margin: 0 0 1.4em 0em; color: #aaaaaa; }
 * 1) firstHeading {
 * 1) siteSub {
 * 1) contentSub {

/* 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; }

margin: 0 50px; }
 * 1) bodyContent {

/* 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 */ background: #3b3a46; border: 0px solid #bdbdbd; border-radius: 6px; }
 * 1) p-lang .mw-interlanguage-selector, #p-lang .mw-interlanguage-selector:active {

/* These are background areas in top header area and left sidebar area. */	background-color: #2b2a33; background-image: linear-gradient(transparent,transparent); }	background-color: #2b2a33; }	background-color: #2b2a33; }
 * 1) mw-page-base {
 * 1) mw-head-base {
 * 1) mw-navigation {

/* All the clickable linked pages in the tob bar area. */ /* These can be further subdivided into: p-personal, left-navigation, right-navigation, and simpleSearch*/ background-color: #2b2a33; visibility: hidden; }	background-color: #2b2a33; }
 * 1) mw-head {
 * 1) mw-panel {

.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 */ 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; }   background-color: #3b3a46; color: #000000; width: 100%; border: 0px; font-size: 0.8125em; direction: ltr; box-shadow: none !important; }	background-position: right center; top: 7px; right: 15px; opacity: 60%; }
 * 1) simpleSearch {
 * 1) searchInput {
 * 1) searchButton {

.toc { background-color: #2b2a33; margin-top: 20px; border-radius: 8px; }

color: rgba(255, 255, 255, 0.8); border-right: 0px solid #999; border: 0px; }
 * 1) content {

width: 9.5em; height: 152px; margin-bottom: 0em; }
 * 1) p-logo {

margin-left: 10px !important; }
 * 1) p-personal li {

left: 0px; visibility: hidden; }
 * 1) left-navigation {

.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 */ text-align: left; padding: 0em; }   font-size: 16px; text-align: left; }
 * 1) mp-welcome {
 * 1) mp-free {

}