MediaWiki:Common.css: Difference between revisions

From Worldless
Content added Content deleted
No edit summary
No edit summary
Line 41: Line 41:
.mw-page-title-main,
.mw-page-title-main,
.mw-page-title-namespace,
.mw-page-title-namespace,
.mw-page-title-seperator
.mw-page-title-seperator,
.mw-page-container
{
{
font-family: "AssemblageSans" !important;
font-family: "AssemblageSans" !important;

Revision as of 06:07, 6 July 2024

.client-darkmode
{
	--genesis-color-base: #1E2438 !important;
	--genesis-color-base-accent: #34394A !important;
	--genesis-color-text: #FFFFFF !important;
	--genesis-color-text-accent: #C0C0C0 !important;
	--genesis-color-highlight: #FF8A00 !important;
	--genesis-bullet-image: url(https://static.miraheze.org/worldlesswiki/3/35/Bullet-DarkAbsorption.png) !important;
	--genesis-divider-svg: url("data:image/svg+xml,<svg width='8' height='8' viewBox='0 0 8 8' fill='none' xmlns='http://www.w3.org/2000/svg'><rect x='0' y='3' width='8' height='2' fill='%23FFFFFF'/></svg>") !important;
	--vector-icon-custom-color: var(--genesis-color-text) !important;
}

:root
{
	--genesis-color-base: #E3E6F2;
	--genesis-color-base-accent: #D5DAEA;
	--genesis-color-text: #000000;
	--genesis-color-text-accent: #3F3F3F;
	--genesis-color-highlight: #017DC2;
	--genesis-bullet-image: url(https://static.miraheze.org/worldlesswiki/9/9c/Bullet-LightAbsorption.png?20240706041939);
	--genesis-divider-svg: url("data:image/svg+xml,<svg width='8' height='8' viewBox='0 0 8 8' fill='none' xmlns='http://www.w3.org/2000/svg'><rect x='0' y='3' width='8' height='2' fill='%23000000'/></svg>");
	--vector-icon-custom-color: var(--genesis-color-text);
}

@font-face
{
    font-family: "AssemblageSans";
    src: url("https://static.miraheze.org/worldlesswiki/6/6c/AssemblageSans-Regular.woff2");
}

@font-face
{
    font-family: "AtkinsonHyperlegible";
    font-style: normal;
    src: url("https://static.miraheze.org/worldlesswiki/1/18/AtkinsonHyperlegible-Regular.woff2");
}

h1, h2, h3, h4, h5, h6,
.mw-page-title-main,
.mw-page-title-namespace,
.mw-page-title-seperator,
.mw-page-container
{
    font-family: "AssemblageSans" !important;
    background: var(--genesis-color-base) !important;
    color: var(--genesis-color-text) !important;
    border: transparent;
}

.vector-pinnable-header-label
{
    font-family: "AssemblageSans" !important;
    background: var(--genesis-color-base-accent) !important;
    color: var(--genesis-color-text) !important;
    border: transparent;
}

.vector-page-titlebar,
.vector-page-toolbar-container
{
	box-shadow: 0px 0px transparent;
}

body,
.vector-header-container,
.mw-page-container,
.vector-main-menu,
.footer,
.mw-datatable,
.mw-footer li
{
	font-family: "AtkinsonHyperlegible" !important;
	background: var(--genesis-color-base) !important;
    color: var(--genesis-color-text) !important;
    border: transparent !important;
}

.mw-logo-wordmark
{
	background: var(--genesis-color-base) !important;
}

.vector-pinnable-element::after
{
	background: transparent !important;
}

.vector-toc,
.vector-pinnable-header-label,
.cdx-button,
.wikitable,
.wikitable > * > tr > th,
.wikitable > * > tr > td,
figure,
figcaption,
figure > figcaption,
img,
.vector-menu,
.vector-dropdown-content
{
	background: var(--genesis-color-base-accent) !important;
	color: var(--genesis-color-text) !important;
	border: 0px transparent;
}

.wikitable,
.wikitable > * > tr > th,
.wikitable > * > tr > td
{
	border: solid var(--genesis-color-base) !important;
}

.mw-content-ltr li::before
{
	margin: 0;
	padding: 0 0 0 20px;
	list-style: none;
	background-image: var(--genesis-bullet-image);
	background-repeat: no-repeat;
	background-position: left center;
	background-size: 15px;
	content: "";
}

.mw-body li::marker
{
	content: "";
}

.cdx-text-input__input:enabled
{
	background-color: var(--genesis-color-base-accent);
}

.mw-echo-notification-badge-nojs,
.mw-echo-notification-badge-nojs::after
{
	border: 0px transparent;
}
.cdx-text-input__input:enabled ~ .cdx-text-input__icon
{
	opacity: 1.0;
}

.cdx-button:enabled
{
	color: white;
}

.cdx-button:disabled
{
	color: white;
}

.vector-main-menu
{
  background: var(--genesis-color-base-accent) !important;
}

a,
a:link 
{
    color: var(--genesis-color-highlight) !important;
}

#pt-userpage-2
{
	padding-left: 8px;
}

.genesis-divider-container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: normal;
  align-items: normal;
  align-content: normal;
}

.genesis-divider-right {
	display: block;
	flex-grow: 0;
	flex-shrink: 1;
	flex-basis: auto;
	align-self: auto;
	order: 0;
	height: auto;
	width: auto;
	min-height: 0.25em;
	min-width: 0.25em;
	background-image: url("data:image/svg+xml,<svg width='9' height='9' viewBox='0 0 9 9' fill='none' xmlns='http://www.w3.org/2000/svg'><rect x='0.0251465' y='4.47485' width='5.71458' height='5.65685' transform='rotate(-45 0.0251465 4.97485)' fill='%23FF8A00'/></svg>");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	margin-left: -2px;
	z-index: 10;
}

.genesis-divider-center {
	display: block;
	flex-grow: 1;
	flex-shrink: 1;
	flex-basis: auto;
	align-self: auto;
	order: 0;
	height: auto;
	width: auto;
	min-height: 1em;
	min-width: 1em;
	background-image: var(--genesis-divider-svg);
	background-repeat: repeat-x;
	background-position: center;
}

.genesis-divider-left {
	display: block;
	flex-grow: 0;
	flex-shrink: 1;
	flex-basis: auto;
	align-self: auto;
	order: 0;
	height: auto;
	width: auto;
	min-height: 0.25em;
	min-width: 0.25em;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='9' height='9' %3E%3Cellipse rx='4' ry='4' cy='4.5' cx='4.5' fill='%237DD0FF'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	margin-right: -2px;
	z-index: 10;
}

.vector-icon.mw-ui-icon-wikimedia-bell {
    -webkit-mask-image: url(/w/load.php?modules=skins.vector.icons&image=bell&format=original&lang=en&skin=vector-2022&version=mvyy1);
    mask-image: url(/w/load.php?modules=skins.vector.icons&image=bell&format=original&lang=en&skin=vector-2022&version=mvyy1);
    background: var(--vector-icon-custom-color, black) !important;
    mask-repeat: no-repeat;
}

.vector-icon.mw-ui-icon-wikimedia-tray {
    -webkit-mask-image: url(/w/load.php?modules=skins.vector.icons&image=tray&format=original&lang=en&skin=vector-2022&version=mvyy1);
    mask-image: url(/w/load.php?modules=skins.vector.icons&image=tray&format=original&lang=en&skin=vector-2022&version=mvyy1);
    background: var(--vector-icon-custom-color, black) !important;
    mask-repeat: no-repeat;
}

.vector-icon.mw-ui-icon-wikimedia-labFlask {
    -webkit-mask-image: url(/w/load.php?modules=skins.vector.icons&image=labFlask&format=original&lang=en&skin=vector-2022&version=mvyy1);
    mask-image: url(/w/load.php?modules=skins.vector.icons&image=labFlask&format=original&lang=en&skin=vector-2022&version=mvyy1);
    background: var(--vector-icon-custom-color, black) !important;
    mask-size: cover;
}

.vector-icon.mw-ui-icon-wikimedia-language {
    -webkit-mask-image: url(/w/load.php?modules=skins.vector.icons&image=language&format=original&lang=en&skin=vector-2022&version=mvyy1);
    mask-image: url(/w/load.php?modules=skins.vector.icons&image=language&format=original&lang=en&skin=vector-2022&version=mvyy1);
    background: var(--vector-icon-custom-color, black) !important;
    mask-size: cover;
}

.vector-icon.mw-ui-icon-wikimedia-sandbox {
    -webkit-mask-image: url(/w/load.php?modules=skins.vector.icons&image=sandbox&format=original&lang=en&skin=vector-2022&version=mvyy1);
    mask-image: url(/w/load.php?modules=skins.vector.icons&image=sandbox&format=original&lang=en&skin=vector-2022&version=mvyy1);
    background: var(--vector-icon-custom-color, black) !important;
    mask-size: cover;
}

.vector-icon.mw-ui-icon-wikimedia-listBullet {
    -webkit-mask-image: url(/w/load.php?modules=skins.vector.icons&image=listBullet&format=original&lang=en&skin=vector-2022&version=mvyy1);
    mask-image: url(/w/load.php?modules=skins.vector.icons&image=listBullet&format=original&lang=en&skin=vector-2022&version=mvyy1);
    background: var(--vector-icon-custom-color, black) !important;
    mask-size: cover;
}

.vector-icon.mw-ui-icon-wikimedia-close {
    -webkit-mask-image: url(/w/load.php?modules=skins.vector.icons&image=close&format=original&lang=en&skin=vector-2022&version=mvyy1);
    mask-image: url(/w/load.php?modules=skins.vector.icons&image=close&format=original&lang=en&skin=vector-2022&version=mvyy1);
    background: var(--vector-icon-custom-color, black) !important;
    mask-size: cover;
}

.vector-icon.mw-ui-icon-wikimedia-ellipsis {
    -webkit-mask-image: url(/w/load.php?modules=skins.vector.icons&image=ellipsis&format=original&lang=en&skin=vector-2022&version=mvyy1);
    mask-image: url(/w/load.php?modules=skins.vector.icons&image=ellipsis&format=original&lang=en&skin=vector-2022&version=mvyy1);
    background: var(--vector-icon-custom-color, black) !important;
    mask-size: cover;
}

.vector-icon.mw-ui-icon-wikimedia-heart {
    -webkit-mask-image: url(/w/load.php?modules=skins.vector.icons&image=heart&format=original&lang=en&skin=vector-2022&version=mvyy1);
    mask-image: url(/w/load.php?modules=skins.vector.icons&image=heart&format=original&lang=en&skin=vector-2022&version=mvyy1);
    background: var(--vector-icon-custom-color, black) !important;
    mask-size: cover;
}

.vector-icon.mw-ui-icon-wikimedia-logIn {
    -webkit-mask-image: url(/w/load.php?modules=skins.vector.icons&image=logIn&format=original&lang=en&skin=vector-2022&version=mvyy1);
    mask-image: url(/w/load.php?modules=skins.vector.icons&image=logIn&format=original&lang=en&skin=vector-2022&version=mvyy1);
    background: var(--vector-icon-custom-color, black) !important;
    mask-size: cover;
}

.vector-icon.mw-ui-icon-wikimedia-logOut {
    -webkit-mask-image: url(/w/load.php?modules=skins.vector.icons&image=logOut&format=original&lang=en&skin=vector-2022&version=mvyy1);
    mask-image: url(/w/load.php?modules=skins.vector.icons&image=logOut&format=original&lang=en&skin=vector-2022&version=mvyy1);
    background: var(--vector-icon-custom-color, black) !important;
    mask-size: cover;
}

.vector-icon.mw-ui-icon-wikimedia-search {
    -webkit-mask-image: url(/w/load.php?modules=skins.vector.icons&image=search&format=original&lang=en&skin=vector-2022&version=mvyy1);
    mask-image: url(/w/load.php?modules=skins.vector.icons&image=search&format=original&lang=en&skin=vector-2022&version=mvyy1);
    background: var(--vector-icon-custom-color, black) !important;
    mask-size: cover;
}

.vector-icon.mw-ui-icon-wikimedia-settings {
    -webkit-mask-image: url(/w/load.php?modules=skins.vector.icons&image=settings&format=original&lang=en&skin=vector-2022&version=mvyy1);
    mask-image: url(/w/load.php?modules=skins.vector.icons&image=settings&format=original&lang=en&skin=vector-2022&version=mvyy1);
    background: var(--vector-icon-custom-color, black) !important;
    mask-size: cover;
}

.vector-icon.mw-ui-icon-wikimedia-menu {
    -webkit-mask-image: url(/w/load.php?modules=skins.vector.icons&image=menu&format=original&lang=en&skin=vector-2022&version=mvyy1);
    mask-image: url(/w/load.php?modules=skins.vector.icons&image=menu&format=original&lang=en&skin=vector-2022&version=mvyy1);
    background: var(--vector-icon-custom-color, black) !important;
    mask-size: cover;
}

.vector-icon.mw-ui-icon-wikimedia-imageGallery {
    -webkit-mask-image: url(/w/load.php?modules=skins.vector.icons&image=imageGallery&format=original&lang=en&skin=vector-2022&version=mvyy1);
    mask-image: url(/w/load.php?modules=skins.vector.icons&image=imageGallery&format=original&lang=en&skin=vector-2022&version=mvyy1);
    background: var(--vector-icon-custom-color, black) !important;
    mask-size: cover;
}

.vector-icon.mw-ui-icon-wikimedia-star {
    -webkit-mask-image: url(/w/load.php?modules=skins.vector.icons&image=star&format=original&lang=en&skin=vector-2022&version=mvyy1);
    mask-image: url(/w/load.php?modules=skins.vector.icons&image=star&format=original&lang=en&skin=vector-2022&version=mvyy1);
    background: var(--vector-icon-custom-color, black) !important;
    mask-size: cover;
}

.vector-icon.mw-ui-icon-wikimedia-halfStar {
    -webkit-mask-image: url(/w/load.php?modules=skins.vector.icons&image=halfStar&format=original&lang=en&skin=vector-2022&version=mvyy1);
    mask-image: url(/w/load.php?modules=skins.vector.icons&image=halfStar&format=original&lang=en&skin=vector-2022&version=mvyy1);
    background: var(--vector-icon-custom-color, black) !important;
    mask-size: cover;
}

.vector-icon.mw-ui-icon-wikimedia-unStar {
    -webkit-mask-image: url(/w/load.php?modules=skins.vector.icons&image=unStar&format=original&lang=en&skin=vector-2022&version=mvyy1);
    mask-image: url(/w/load.php?modules=skins.vector.icons&image=unStar&format=original&lang=en&skin=vector-2022&version=mvyy1);
    background: var(--vector-icon-custom-color, black) !important;
    mask-size: cover;
}

.vector-icon.mw-ui-icon-wikimedia-expand {
    -webkit-mask-image: url(/w/load.php?modules=skins.vector.icons&image=expand&format=original&lang=en&skin=vector-2022&version=mvyy1);
    mask-image: url(/w/load.php?modules=skins.vector.icons&image=expand&format=original&lang=en&skin=vector-2022&version=mvyy1);
    background: var(--vector-icon-custom-color, black) !important;
    mask-size: cover;
}

.vector-icon.mw-ui-icon-wikimedia-userAdd {
    -webkit-mask-image: url(/w/load.php?modules=skins.vector.icons&image=userAdd&format=original&lang=en&skin=vector-2022&version=mvyy1);
    mask-image: url(/w/load.php?modules=skins.vector.icons&image=userAdd&format=original&lang=en&skin=vector-2022&version=mvyy1);
    background: var(--vector-icon-custom-color, black) !important;
    mask-size: cover;
}

.vector-icon.mw-ui-icon-wikimedia-userAvatar {
    -webkit-mask-image: url(/w/load.php?modules=skins.vector.icons&image=userAvatar&format=original&lang=en&skin=vector-2022&version=mvyy1);
    mask-image: url(/w/load.php?modules=skins.vector.icons&image=userAvatar&format=original&lang=en&skin=vector-2022&version=mvyy1);
    background: var(--vector-icon-custom-color, black) !important;
    mask-size: cover;
}

.vector-icon.mw-ui-icon-wikimedia-userContributions {
    -webkit-mask-image: url(/w/load.php?modules=skins.vector.icons&image=userContributions&format=original&lang=en&skin=vector-2022&version=mvyy1);
    mask-image: url(/w/load.php?modules=skins.vector.icons&image=userContributions&format=original&lang=en&skin=vector-2022&version=mvyy1);
    background: var(--vector-icon-custom-color, black) !important;
    mask-size: cover;
}

.vector-icon.mw-ui-icon-wikimedia-userGroup {
    -webkit-mask-image: url(/w/load.php?modules=skins.vector.icons&image=userGroup&format=original&lang=en&skin=vector-2022&version=mvyy1);
    mask-image: url(/w/load.php?modules=skins.vector.icons&image=userGroup&format=original&lang=en&skin=vector-2022&version=mvyy1);
    background: var(--vector-icon-custom-color, black) !important;
    mask-size: cover;
}

.vector-icon.mw-ui-icon-wikimedia-userTalk {
    -webkit-mask-image: url(/w/load.php?modules=skins.vector.icons&image=userTalk&format=original&lang=en&skin=vector-2022&version=mvyy1);
    mask-image: url(/w/load.php?modules=skins.vector.icons&image=userTalk&format=original&lang=en&skin=vector-2022&version=mvyy1);
    background: var(--vector-icon-custom-color, black) !important;
    mask-size: cover;
}

.vector-icon.mw-ui-icon-wikimedia-userTemporary {
    -webkit-mask-image: url(/w/load.php?modules=skins.vector.icons&image=userTemporary&format=original&lang=en&skin=vector-2022&version=mvyy1);
    mask-image: url(/w/load.php?modules=skins.vector.icons&image=userTemporary&format=original&lang=en&skin=vector-2022&version=mvyy1);
    background: var(--vector-icon-custom-color, black) !important;
    mask-size: cover;
}

.vector-icon.mw-ui-icon-wikimedia-watchlist {
    -webkit-mask-image: url(/w/load.php?modules=skins.vector.icons&image=watchlist&format=original&lang=en&skin=vector-2022&version=mvyy1);
    mask-image: url(/w/load.php?modules=skins.vector.icons&image=watchlist&format=original&lang=en&skin=vector-2022&version=mvyy1);
    background: var(--vector-icon-custom-color, black) !important;
    mask-size: cover;
}

.vector-icon.mw-ui-icon-wikimedia-speechBubbleAdd {
    -webkit-mask-image: url(/w/load.php?modules=skins.vector.icons.js&image=speechBubbleAdd&format=original&lang=en&skin=vector-2022&version=1mt5m);
    mask-image: url(/w/load.php?modules=skins.vector.icons.js&image=speechBubbleAdd&format=original&lang=en&skin=vector-2022&version=1mt5m);
    background: var(--vector-icon-custom-color, black) !important;
    mask-size: cover;
}

.vector-icon.mw-ui-icon-wikimedia-speechBubbles {
    -webkit-mask-image: url(/w/load.php?modules=skins.vector.icons.js&image=speechBubbles&format=original&lang=en&skin=vector-2022&version=1mt5m);
    mask-image: url(/w/load.php?modules=skins.vector.icons.js&image=speechBubbles&format=original&lang=en&skin=vector-2022&version=1mt5m);
    background: var(--vector-icon-custom-color, black) !important;
    mask-size: cover;
}

.vector-icon.mw-ui-icon-wikimedia-article {
    -webkit-mask-image: url(/w/load.php?modules=skins.vector.icons.js&image=article&format=original&lang=en&skin=vector-2022&version=1mt5m);
    mask-image: url(/w/load.php?modules=skins.vector.icons.js&image=article&format=original&lang=en&skin=vector-2022&version=1mt5m);
    background: var(--vector-icon-custom-color, black) !important;
    mask-size: cover;
}

.vector-icon.mw-ui-icon-wikimedia-history {
    -webkit-mask-image: url(/w/load.php?modules=skins.vector.icons.js&image=history&format=original&lang=en&skin=vector-2022&version=1mt5m);
    mask-image: url(/w/load.php?modules=skins.vector.icons.js&image=history&format=original&lang=en&skin=vector-2022&version=1mt5m);
    background: var(--vector-icon-custom-color, black) !important;
    mask-size: cover;
}

.vector-icon.mw-ui-icon-wikimedia-wikiText {
    -webkit-mask-image: url(/w/load.php?modules=skins.vector.icons.js&image=wikiText&format=original&lang=en&skin=vector-2022&version=1mt5m);
    mask-image: url(/w/load.php?modules=skins.vector.icons.js&image=wikiText&format=original&lang=en&skin=vector-2022&version=1mt5m);
    background: var(--vector-icon-custom-color, black) !important;
    mask-size: cover;
}

.vector-icon.mw-ui-icon-wikimedia-edit {
    -webkit-mask-image: url(/w/load.php?modules=skins.vector.icons.js&image=edit&format=original&lang=en&skin=vector-2022&version=1mt5m);
    mask-image: url(/w/load.php?modules=skins.vector.icons.js&image=edit&format=original&lang=en&skin=vector-2022&version=1mt5m);
    background: var(--vector-icon-custom-color, black) !important;
    mask-size: cover;
}

.vector-icon.mw-ui-icon-wikimedia-editLock {
    -webkit-mask-image: url(/w/load.php?modules=skins.vector.icons.js&image=editLock&format=original&lang=en&skin=vector-2022&version=1mt5m);
    mask-image: url(/w/load.php?modules=skins.vector.icons.js&image=editLock&format=original&lang=en&skin=vector-2022&version=1mt5m);
    background: var(--vector-icon-custom-color, black) !important;
    mask-size: cover;
}

.vector-icon.mw-ui-icon-wikimedia-exitFullscreen {
    -webkit-mask-image: url(/w/load.php?modules=skins.vector.icons.js&image=exitFullscreen&format=original&lang=en&skin=vector-2022&version=1mt5m);
    mask-image: url(/w/load.php?modules=skins.vector.icons.js&image=exitFullscreen&format=original&lang=en&skin=vector-2022&version=1mt5m);
    background: var(--vector-icon-custom-color, black) !important;
    mask-size: cover;
}

.vector-icon.mw-ui-icon-wikimedia-fullScreen {
    -webkit-mask-image: url(/w/load.php?modules=skins.vector.icons.js&image=fullScreen&format=original&lang=en&skin=vector-2022&version=1mt5m);
    mask-image: url(/w/load.php?modules=skins.vector.icons.js&image=fullScreen&format=original&lang=en&skin=vector-2022&version=1mt5m);
    background: var(--vector-icon-custom-color, black) !important;
    mask-size: cover;
}

#vector-user-links-dropdown-label::after,
#vector-user-links-dropdown-label::after,
#vector-user-links-dropdown-label-sticky-header::after,
#p-lang-btn-sticky-header::after
{
	content: '';
    width: 1.23076923em;
    height: 1.23076923em;
    margin-left: -1px;
    -webkit-mask-image: url(/1.41/skins/Vector/resources/skins.vector.styles/images/arrow-down.svg?9426f);
    mask-image: url(/1.41/skins/Vector/resources/skins.vector.styles/images/arrow-down.svg?9426f);
    mask-repeat: no-repeat;
    background: var(--vector-icon-custom-color, black) !important;
    mask-size: 100% 50%;
	margin-top: 25%;
}

.vector-dropdown-label-text
{
	padding-left: 5px;
}

.cdx-button:enabled, .cdx-button.cdx-button--fake-button--enabled
{
	color: var(--genesis-color-text);
	background: var(--genesis-color-base-accent);
}

.client-darkmode:not(.mw-invert), 
.client-darkmode img:not(.mw-invert), 
.client-darkmode video:not(.mw-invert), 
.client-darkmode svg:not(.mw-invert), 
.client-darkmode iframe:not(.mw-invert), 
.client-darkmode .mw-no-invert:not(.mw-invert), 
.client-darkmode .cdx-no-invert:not(.mw-invert), 
.client-darkmode td .diffchange:not(.mw-invert), 
.client-darkmode .skin-minerva .mw-notification-visible .mw-notification-content:not(.mw-invert)
{
	filter: none !important;
	-webkit-filter: none !important;
}