User:Closed Limelike Curves/ColorfulButtons.css

Note: After saving, you have to bypass your browser's cache to see the changes. Google Chrome, Firefox, Microsoft Edge and Safari: Hold down the ⇧ Shift key and click the Reload toolbar button. For details and instructions about other browsers, see Wikipedia:Bypass your cache.

/********************/
/* COLORFUL BUTTONS */
/********************/
/******************/
/* Layout changes */
/******************/
html {
	--title-height: 3rem;
	--toolbar-height: 2rem;
	--subheader-height: 1.75rem;
	--page-margins: 2vw;
	--chevron: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 9" fill="none" stroke="rgba(32, 33, 34)" stroke-width="2.25" stroke-linejoin="butt" stroke-linecap="butt"><polyline points="0 0,9 9,18 0"/></svg>');
	--dot: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 9" fill="none" stroke="rgba(32, 33, 34)" stroke-width="2.25" stroke-linejoin="butt" stroke-linecap="butt"><polyline stroke="none" points="0 0,9 9,18 0"/><circle stroke="none" fill="currentColor" cx="9" cy="2.5" r="2.5"/></svg>');
	--thanks-color: #00af89;
	--cdxIconLogoWikipedia: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><g><path d="M11.14 4H14a.69.69 0 010 .65c-1 .16-1.36.91-1.81 1.83l-1.4 2.75 2.35 5.21h.07l3.52-8.1c.44-1.07.4-1.59-.79-1.7a.68.68 0 010-.65h3.45a.68.68 0 010 .65c-1.21.16-1.42.91-1.81 1.83l-4.37 10.08c-.13.3-.24.45-.44.45s-.33-.16-.42-.45l-2.48-5.73-2.72 5.73c-.11.3-.24.45-.44.45s-.31-.16-.42-.45l-4-10.09c-.57-1.4-.6-1.7-1.65-1.8A.68.68 0 01.62 4h3.91a.68.68 0 010 .65c-1.16.13-1.21.45-.74 1.58l3.41 8.19h.05L9.3 10 7.78 6.45C7.17 5.05 7 4.77 6.24 4.66a.69.69 0 010-.65h3.32a.68.68 0 010 .65c-.74.12-.7.45-.19 1.58l.87 2 .08.09 1-2c.57-1.14.64-1.58-.15-1.7a.69.69 0 01-.03-.63"/></g></svg>');
	--newIconSandbox: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-shovel" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M17 2l5 5"/><path d="M18.5 5.5l-8 8"/><path d="M8.276 11.284l4.44 4.44a.968 .968 0 0 1 0 1.369l-2.704 2.704a4.108 4.108 0 0 1 -5.809 -5.81l2.704 -2.703a.968 .968 0 0 1 1.37 0z"/></svg>');
	--colorize: var(--color-base);
}

button,
.cdx-button {
	width: fit-content;
	box-sizing: content-box;
}
#t-collapsible-toggle-all > a {
	color: var(--color-progressive)
}
/* Margin and padding at top-left */
.vector-header-container .mw-header,
.mw-header .vector-header-start {
	gap: 0;
}
#vector-sticky-header .vector-sticky-header-context-bar {
	padding: 0;
	margin: 0;
	.vector-sticky-header-context-bar-primary {
		margin: 4px;
	}
}
#p-search {
	margin: auto;
	margin-left: 4px;
}
/* why does this exist */
#siteSub {
	display: none
}
/* why does this not exist */
#p-navigation .vector-menu-heading {
	display:block
}

/* Correcting flushing */
:is(.vector-header-container,
.vector-page-toolbar,
.mw-body-header) :is(.vector-button-flush-left,
.vector-button-flush-right) {
	margin: unset;
}

.vector-page-titlebar > .cdx-button:last-child,
.vector-page-titlebar > .mw-portlet-lang:last-child {
	margin-right: -3px;
}
#vector-page-titlebar-toc-label {
	margin-left: 0px;
}
.vector-body-before-content {
	float: right;
	.mw-indicators .mw-indicator {
		vertical-align: bottom;
	}
}

/* Margin and padding changes */
.mw-page-container {
	padding: 0 var(--page-margins);
	margin: 0 auto;
	width: 100%;
	max-width: unset;
}
.mw-page-container .mw-page-container-inner, .vector-feature-page-tools-pinned-enabled #content {
	column-gap: var(--page-margins)
}

.mw-page-container > *,
.mw-content-container #content .mw-body-header,
.vector-header-container .mw-header,
.vector-header-container .vector-sticky-header {
	width: 100%;
	max-width: 100vw;
	min-width: unset;
}


/* Smaller margin for RecentChanges pages */
.client-js .mw-changeslist table.mw-enhanced-rc {
	margin: 0 var(--page-margins);
}


/* ??? */
/* This undoes a top margin that breaks the #ca-watchstar */
/* padding and makes 0 sense  to me */
.vector-page-toolbar .vector-menu-tabs .mw-list-item .cdx-button--icon-only {
	margin: unset;
	padding: 0;
}
.vector-page-toolbar-container {
	height: 2rem;
}


/**********************/
/* Shrink top toolbar */
/**********************/
/* Page toolbar */
.vector-page-toolbar-container :is(.vector-menu-tabs .mw-list-item.vector-tab-noicon,
.vector-dropdown) {
	height: 100%;
	align-items: baseline;
	vertical-align: baseline;
	& > :is(a,
	.vector-dropdown-label) {
		height: 100%;
		min-height: 2rem;
		box-sizing: content-box;
		padding-block: 0;
		margin-block: auto;
		align-items: center;
		vertical-align: baseline;
	}
}


/* Header outline */
#vector-sticky-header,
.mw-header.vector-header {
	/* subtract 4px for the button margins, .5 for outline */
	padding: 0 calc(var(--page-margins) - 3.5px);
	margin: 0;
	box-shadow: 0px 1px rgba(0, 0, 0, 10%);
}


.vector-user-links-main {
	position: relative;
	& > * {
		position: relative;
		display: flex;
	}
}
.vector-user-links-main > :not(.emptyPortlet, #p-vector-user-menu-overflow)::after {
	display: block;
	width: 12px;
	margin-inline: -4px;
	clip-path: circle(3px at 7px);
	background: black;
	content: "";
}


/* Adjust titlebar border */
.mw-body-header::after {
	display: none
}
#vector-sticky-header,
.mw-header,
.mw-body-header {
	height: var(--title-height);
	box-sizing: content-box;
	border-top: 1px solid transparent;
	border-bottom: 1px solid var(--border-color-divider);
	&.vector-page-titlebar-blank {
		display: none
	}
}

/* Visual editor toolbar fix */
#bodyContent div.ve-ui-toolbar {
	outline: 1px solid var(--border-color-divider);
	& div.oo-ui-toolbar-bar {
		border: none;
	}
}

/* Remove separator */
#vector-sticky-header > div.vector-sticky-header-start > * {
	border: none;
}

/* Turn logo into button */
.skin-theme-clientpref-night .mw-logo-icon[src*="wikipedia"] {
	filter: invert();
}
.mw-logo-icon[src*="wikipedia"] {
	content: var(--cdxIconLogoWikipedia);
}
.mw-logo-container {
	display: none;
}

/* Excess inter-button margins */
.vector-sticky-header-icons,
.vector-sticky-header-buttons {
	column-gap: 0px;
	margin: 0px
}

/* Kill old vector >:( */
#vector-main-menu > div.vector-main-menu-action.vector-main-menu-action-opt-out {
	display: none
}

/* Use dropdown user links */
#pt-userpage,
#pt-userpage-sticky-header {
	display: block
}
#p-vector-user-menu-userpage {
	display: none;
}


/*********************/
/* Visible buttons!! */
/*********************/
/* Colorize! */
:is(.vector-header-container,
.vector-page-toolbar,
#p-personal) :is(a:has(.vector-icon),
.cdx-button,
.oo-ui-widget):not(.vector-toc-toggle, .oo-ui-popupWidget) {
	text-decoration-color: var(--colorize);
	position: relative;
	& .vector-icon {
		background-color: var(--colorize);
		background-origin: content-box;
	}
}
#ca-wikilove {
	--colorize: salmon;
}
#pt-notifications-alert {
	--colorize: silver;
}
#pt-notifications-notice {
	--colorize: saddlebrown;
	background-image: none;
}

#pt-notifications-watchlist .vector-icon.watchlistwatcher {
	background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="-2 -2 24 24"><g><path d="M20 7h-7L10 .5 7 7H0l5.46 5.47-1.64 7 6.18-3.7 6.18 3.73-1.63-7z" fill="gold" stroke="rgb(32,32,32)" stroke-width="2px"/></g></svg>') transparent center no-repeat;
	--webkit-mask-image: none !important;
	mask-image: none !important;
}
:is(#pt-watchlist,
#pt-watchlist-2,
#pt-watchlist-sticky-header) {
	display: block;
	--colorize: purple;
	.vector-icon {
		background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='20 20'><rect x='0' y='0' width='20' height='20' fill='transparent'/><rect x='9' y='6' width='11' height='14' fill='gold'/></svg>");
	}
}
#ca-subject-sticky-header {
	--colorize: black;
}
#ca-talk-sticky-header {
	--colorize: var(--thanks-color)
}
#ca-history-sticky-header {
	--colorize: purple
}
#ca-ve-edit .vector-icon,
#ca-ve-edit-sticky-header .vector-icon {
	background: linear-gradient(45deg, var(--color-base) 10%, wheat 10%, wheat 18%, orange 20%, orange calc(2/3*100%), salmon calc(2/3*100%))
}

#p-lang-btn,
#p-lang-btn-sticky-header,
#ca-uls,
#cx-language,
#cx-language-sticky {
	--colorize: mediumvioletred;
	&,
	& > label {
		position: relative;
		z-index: 1;
	}
	/* Repurpose as mild shadow*/
	&.cdx-button span:nth-child(2) {
		display: inline-block !important;
		font-size: 0;
		position: absolute;
		z-index: -1;
		background: url(https://en.wikipedia.org/w/load.php?modules=skins.vector.icons&image=language&variant=progressive&format=original&lang=en&skin=vector-2022&version=12vhz) no-repeat;
		background-position: center;
		width: 20px;
		height: 20px;
		top: 50%;
		left: 6px;
		translate: 0 -50%;
		filter: hue-rotate(.33turn) blur(1px) brightness(300%);
	}
}

/* Dropdown links */
#pt-userpage,
#pt-userpage-sticky-header {
	--colorize: var(--color-base)
}
#pt-mytalk,
#pt-mytalk-sticky-header {
	--colorize: var(--thanks-color)
}

#pt-sandbox,
#pt-sandbox-sticky-header {
	--colorize: sandybrown;
	.vector-icon {
		mask-image: var(--newIconSandbox);
		mask-size: cover
	}
}
#pt-betafeatures,
#pt-betafeatures-sticky-header {
	--colorize: lightblue
}
#pt-logout,
#pt-logout-sticky-header {
	--colorize: var(--color-destructive);
	a {
		color: var(--color-destructive);
		text-shadow: 0px 0px 1px color-mix(in lab, var(--colorize), transparent)
	}
}
#pt-preferences,
#pt-preferences-sticky-header {
	--colorize: steelblue
}

#cx-imageGallery,
#cx-imageGallery-sticky {
	--colorize: forestgreen
}

/* Fix screwy oo-ui notifications icons so color renders properly... */
#pt-notifications-alert .oo-ui-icon-bell {
	mask-image: url(/w/load.php?modules=skins.vector.icons&image=bell&format=original&lang=en&skin=vector-2022&version=1gucb) !important;
	background: none;
}
#pt-notifications-notice .oo-ui-icon-tray {
	mask-image: url(/w/load.php?modules=skins.vector.icons&image=tray&format=original&lang=en&skin=vector-2022&version=1gucb) !important;
	background: none
}

/* Fix wonky-ass watchstar */
[dir*='l'] .mw-watchlink .mw-ui-icon-wikimedia-unStar {
	transform: rotate3d(0, 1, 0, 180deg);
}

#ca-watch,
#ca-unwatch,
#ca-watchstar-sticky-header {
	&, & .cdx-button {
		padding: 0;
		.vector-icon {
			background: url(https://en.wikipedia.org/w/load.php?modules=skins.vector.icons&image=star&format=original&lang=en&skin=vector-2022&version=12vhz) center no-repeat;
			background-color: transparent;
		}
		.mw-ui-icon-wikimedia-unStar {
			--colorize: gold;
		}
	}
}

/* pin button */
.vector-pinnable-header.vector-pinnable-header-unpinned > button.vector-pinnable-header-toggle-button {
	font-size: 0;
	height: 24px;
	width: 24px;
	margin: auto 0;
	position: relative;
	top: 0;
	/* Rotate background --cdxIconPushPin */
	background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><g><path transform="rotate(41) translate(1 3)" transform-origin="center" d="M13 8V2a2 2 0 002-2H5a2 2 0 002 2v6H6a2 2 0 00-2 2v1h5v5l1 4 1-4v-5h5v-1a2 2 0 00-2-2z"></path></g></svg>') no-repeat center;
	border: 1px solid var(--border-color-interactive);
	background-color: var(--background-color-interactive-subtle);
}


/*********************/
/* shadow and border */
/*********************/
.vector-header-container,
.vetor-sticky-header,
.mw-header,
.mw-body-header {
	:is(.cdx-button,
	.oo-ui-widget):has(.vector-icon):not(.vector-toc-toggle):has(.vector-icon),
	.mw-logo:has(.mw-logo-icon) {
		border: none;
		outline: 1px outset var(--border-color-interactive);
		border-radius: 4px;
		height: 2rem;
		width: fit-content;
		min-height: 32px;
		min-width: 32px;
		padding: 6px;
		margin: 4px;
		align-items: center;
		text-align: center;
		box-sizing: border-box;
	}
}


/* correct icon sizes */
:is(.vector-header-container,
.mw-body-header,
#vector-sticky-header) :is(.cdx-button:not(.vector-toc-toggle),
.oo-ui-widget,
.mw-logo) :is(.vector-icon,
.mw-logo-icon,
.oo-ui-labelElement,
.mw-echo-notifications-badge) {
	height: calc(5/8 * 100%);
	width: calc(5/8 * 100%);
	min-height: 20px;
	min-width: 20px;
	padding: 0;
	margin: 0;
	border: none;
	box-sizing: content-box;
	mask-origin: content-box;
	mask-size: contain;
	mask-position: center;
}


/* Duplicate padding >:( */
.vector-user-links .mw-list-item:has(.cdx-button) {
	margin: 0;
}

/* Dropdown fixes */
.vector-dropdown > .vector-dropdown-checkbox + .vector-dropdown-label,
.mw-interlanguage-selector {
	min-width: 48px;
}
/* correct arrow sizes */
:is(.vector-header-container,
.mw-body-header) .vector-dropdown > .vector-dropdown-checkbox + .vector-dropdown-label::after,
.mw-interlanguage-selector::after {
	margin: 0;
	padding: 0;
	margin-left: -6px;
	margin-right: 6px;
	width: 12px;
	max-height: unset;
	max-width: unset;
	margin-block: auto;
	mask-size: contain;
}

.vector-dropdown > .vector-dropdown-checkbox + .vector-dropdown-label.mw-portlet-lang-heading-empty::after {
	mask-image: url(/w/load.php?modules=skins.vector.icons&image=close&format=original&lang=en&skin=vector-2022&version=16unw);
	height: 12px;
}

#ca-addtopic {
	column-gap: 1em
}

/********************/
/* PINNABLE CONTENT */
/********************/
/* fixing table-of-contents layout */
.vector-pinnable-element {
	line-height: var(--line-height-medium);
	padding-inline: 0;
	font-size: var(--font-size-medium);
	.vector-menu,
	.vector-toc-level-1 {
		position: relative;
		overflow: visible;
	}
	.vector-menu > .vector-menu-heading,
	.vector-toc-level-1 > .vector-toc-link {
		line-height: 1lh;
		position: relative;
	}
}
.vector-pinnable-element .mw-list-item a,
.vector-toc-list-item .vector-toc-text {
	padding: 0;
}
:is(.vector-pinnable-element,
#vector-page-tools-dropdown) :is(.vector-toc-list-item,
.mw-list-item) {
	margin: 0;
	line-height: 1lh;
	padding-top: .25lh;
}

/* COLLAPSE BUTTON */
.vector-toc .vector-toc-toggle {
	all: unset
}
*,
.vector-pinnable-element,
.vector-toc {
	.vector-toc-toggle {
		display: inline-block;
		align-self: start;
		transition: 100ms;
		line-height: inherit;
		position: relative;
		left: unset;
		right: unset;
		top: 0;
		min-height: unset;
		min-width: unset;
		aspect-ratio: 1/1;
		width: auto;
		height: 1lh;
		padding: 0;
		font-size: 1em;
		z-index: 1;
		vertical-align: baseline;
		border: 1px solid transparent;
		margin: auto;
		.vector-icon {
			vertical-align: baseline;
			font-size: 1em;
			mask: none;
			background: none;
			align-items: baseline;
			margin: unset;
		}
	}
}
.vector-column-start {
	/* HACK: preserves space for chevrons */
	.vector-toc-level-1:has(button) > .vector-toc-link > .vector-toc-text > span::after,
	.vector-menu:has(button) > .vector-menu-heading::after {
		display: inline;
		content: ".";
		color: transparent;
		mask: var(--dot) center no-repeat;
		inline-size: 1lh;
		writing-mode: vertical-rl;
	}
	.vector-toc-toggle {
		float: inline-end;
		right: 0;
	}
}
.vector-column-end {
	.vector-toc-toggle {
		position: relative;
		float: left;
		bottom: 0;
		left: 0;
	}
}

.mw-body-content .mw-heading {
	padding: 0;
	text-box: trim-top;
	position: relative;
	.vector-toc-toggle {
		display: inline-block;
		position: relative;
		align-self: end;
		align-items: baseline;
		align-content: baseline;
		top: 0;
		bottom: 0;
		width: auto;
		aspect-ratio: 1 / 1;
		.vector-icon.mw-ui-icon-wikimedia-expand {
			margin: unset;
		}
	}
}


.vector-toc .vector-toc-toggle {
	position: relative;
	padding: unset;
	border: 1px solid transparent;
	float: right;
	left: unset !important;
	top: calc(-2px - 1lh);
	scale: -1 1
}

.vector-toc .vector-toc-toggle .vector-icon.mw-ui-icon-wikimedia-expand {
	display: block;
	mask: none;
	content: var(--chevron);
	background: none;
	margin: unset;
	box-sizing: content-box;
	height: 1ex;
	object-fit: contain;
	align-self: baseline;
	align-content: baseline
}


/*****************/
/* MISCELLANEOUS */
/*****************/
#editform > div.editOptions > div.editButtons {
	text-wrap: nowrap
}

/* Get rid of language count */
#p-lang-btn-sticky-header > span:nth-child(2),
#p-lang-btn-label > span.vector-dropdown-label-text {
	display: none;
}

/* Left header padding */
#p-search > .vector-typeahead-search-container > .cdx-typeahead-search {
	margin: 0;
}

/* Userscript fixes */
body #cd-navPanel {
	display: grid;
	bottom: 0;
	top: unset;
	width: fit-content;
	grid-auto-flow: column;
	& > .cd-navPanel-button {
		display: flex !important;
		position: static;
		width: 32px;
		height: 32px;
		padding: 0;
		margin: 0;
		border-left: solid 1px var(--border-color-interactive);
		&::before {
			display: none
		}
	}
}
#bodyContent div:has(#diff-permalink-link) {
	width: fit-content;
	position: absolute;
	top: 2px;
	button {
		padding: 0 .5em !important;
		border: none;
		outline: 1px solid var(--border-color-base)
	}
}
.mw-echo-notification-badge-nojs::after {
	translate: -1px;
}