User:NicolaLamacchia/global.css

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.

:root {
	--main-bg-color: #f8f8f8;
	--lighter-bg-color: #fafafa;
	--darker-bg-color: #f1f1f1;
	--darkest-bg-color: #eee;
	--dark-border-color: #ccc;
	--light-border-color: #ddd;
}

body {
	font-size: 1.1em !important;
}

#content {
	background-color: var(--main-bg-color) !important;
	font-size: 1em !important;
}

.oo-ui-popupWidget-popup,
.mw-echo-ui-notificationItemWidget-unread {
	background-color: var(--main-bg-color) !important;
}

.navbox,
.thumb .thumbinner,
#mp-topbanner,
.oo-ui-buttonElement:not(.oo-ui-flaggedElement-primary):not(.oo-ui-buttonElement-active) .oo-ui-buttonElement-button {
	background-color: var(--darker-bg-color) !important;
}

#bodyContent {
	font-size: 1em !important;
}

/* for vector */
[role="navigation"] .selected {
	background-color: var(--main-bg-color) !important;
	background-image: linear-gradient(white, var(--main-bg-color)) !important;
}

table[role="presentation"]:not(.fmbox-warning):not(.fmbox-system) {
	background-color: var(--darkest-bg-color) !important;
}

#mp-topbanner:hover,
#mp-left:hover,
#mp-right:hover,
#mp-lower:hover,
#mp-other-lower:hover,
div.plainlist:hover,
.thumb .thumbinner:hover,
.catlinks:hover,
.quotebox:hover,
.infobox:hover,
.wikitable:hover,
.navbox:hover,
.toc:hover,
table:hover {
	box-shadow: 0 0 3px 0 var(--dark-border-color) inset;
}

div.plainlist,
.catlinks,
.quotebox,
.infobox,
.toc,
.wikitable {
	background-color: var(--darkest-bg-color) !important;
	border-color: var(--dark-border-color) !important;
}

.navbox th, .navbox td {
	border-color: var(--light-border-color) !important;
}

.navbox table:hover {
	box-shadow: none !important;
}

pre, code {
	background-color: var(--darkest-bg-color) !important;
	border-radius: 4px !important;
	font-size: 1em !important;
}

code {
	border-color: var(--light-border-color) !important;
}

#content h2,
code:hover {
	border-color: var(--dark-border-color) !important;
}

pre {
	box-shadow: 0 0 5px -1px var(--dark-border-color) inset;
}

pre:hover {
	box-shadow: 0 0 10px -1px var(--dark-border-color) inset;
}

.oo-ui-buttonElement:not(.oo-ui-flaggedElement-primary):not(.oo-ui-buttonElement-active) .oo-ui-buttonElement-button:hover {
	background-color: var(--lighter-bg-color) !important;
}

.mw-echo-ui-toggleReadCircleButtonWidget .oo-ui-buttonElement-button {
	background-color: transparent !important;
}

input[type="text"],
input[type="checkbox"],
input[type="checkbox"]:not(:checked) + span,
input[type="url"],
input[type="search"],
input[type="email"],
input[type="date"],
input[type="datetime-local"],
input[type="month"],
input[type="time"],
input[type="tel"],
input[type="week"],
input[type="date"],
input[type="password"],
input[type='radio'] + span,
textarea {
	background-color: var(--lighter-bg-color) !important;
	border-color: var(--dark-border-color) !important;
}

input[type="text"]:hover,
input[type="checkbox"]:hover,
input[type="checkbox"]:not(:checked):hover + span,
input[type="url"]:hover,
input[type="search"]:hover,
input[type="email"]:hover,
input[type="date"]:hover,
input[type="datetime-local"]:hover,
input[type="month"]:hover,
input[type="time"]:hover,
input[type="tel"]:hover,
input[type="week"]:hover,
input[type="date"]:hover,
input[type="password"]:hover,
input[type='radio']:hover + span,
textarea {
	box-shadow: 0 0 2px 0 var(--dark-border-color) inset !important;
}