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.

/* Remove ad/banner whitespace */
#siteNotice,
.cx-uls-relevant-languages-banner {
	display: none !important;
}

#p-vector-user-menu-notifications,
#p-vector-user-menu-overflow,
#vector-user-links-dropdown,
#vector-sticky-header,
#p-search > *,
#p-search > * > *,
body > div:nth-child(2) > header > div.vector-header-start {
	/* Last one: controls gap between first 2 buttons */
	column-gap: 5px;
	margin: 0;
}

/* Margin and padding changes */
#content {
	margin-top: .5%
}
.vector-button-flush-right,
.vector-button-flush-left {
	margin: 0;
	padding: 0
}

.mw-page-container,
.vector-header-container .mw-header,
.vector-header-container .vector-sticky-header {
	padding: 0% 2.5%
}
.mw-page-container > *,
.vector-header-container .mw-header,
.vector-header-container .vector-sticky-header {
	width: 100%;
	min-width: unset;
}

/* Header border */
#vector-sticky-header,
body > div:nth-child(2) > header {
	border-top: solid white 5px;
	margin-top: -5px;
	padding: 0% 2.5%;
	border-bottom: solid gray 1px;
	box-shadow: 0 1px #EEEEEE;
}
/* Dropdown-buttons */
.vector-user-links,
#vector-user-links-dropdown,
#vector-user-links-dropdown-label,
#vector-user-links-dropdown-sticky-header,
#vector-user-links-dropdown-label-sticky-header,
#p-lang-btn,
#p-lang-btn-label,
#p-lang-btn-sticky-header,
#p-lang-btn-label-sticky-header {
	height: 32px;
	width: 48px;
	aspect-ratio: 3/2;
	margin: 0;
	margin-left: 4px
}
.vector-sticky-header-buttons .cdx-button {
	margin: 0;
	padding: 0;
}
#p-lang-btn-sticky-header > span:nth-child(2),
#p-lang-btn-label > span.vector-dropdown-label-text {
	display: none
}

body > div:nth-child(2) > header {
	display: flex
}

#vector-user-links-dropdown-label .vector-icon,
#vector-user-links-dropdown-label-sticky-header .vector-icon,
#p-lang-btn-label .vector-icon,
#p-lang-btn-sticky-header .vector-icon {
	margin: 6px;
	width: 20px;
	padding: 0
}

#vector-user-links-dropdown-label::after,
#vector-user-links-dropdown-label-sticky-header::after,
#p-lang-btn-label::after,
#p-lang-btn-sticky-header::after {
	margin-left: 0;
	padding: 0;
	margin-right: 3px;
}

/* Left header padding */
#p-search,
.vector-sticky-header-context-bar {
	padding: 0;
	margin: 0;
	padding-left: 5px
}

/* Colorize! */
#ca-wikilove .vector-icon {
	background-color: salmon;
}
#pt-notifications-alert .vector-icon {
	background-color: silver;
}
#pt-notifications-notice .vector-icon {
	background-color: saddlebrown;
}
#ca-watchstar-sticky-header .vector-icon,
#ca-watch .vector-icon,
#ca-unwatch .vector-icon {
	background-color: gold
}
#pt-watchlist-2 .vector-icon {
    background: conic-gradient(from 56deg, 
    	gold 0deg 130deg, 
    	var(--color-base) 130deg
	);
}
#ca-subject-sticky-header > * {
	background-color: black;
}
#ca-talk-sticky-header > * {
	background-color: lightseagreen
}
#ca-history-sticky-header > * {
	background-color: purple
}
#p-lang-btn-sticky-header *,
#p-lang-btn-sticky-header::after,
#ca-uls .vector-icon,
#cx-language .vector-icon {
	background-color: var(--color-progressive)
}
#p-lang-btn-sticky-header *,
#p-lang-btn-sticky-header::after,
#ca-uls * {
	color: var(--color-progressive);
}
#vector-user-links-dropdown-label *,
#vector-user-links-dropdown-label-sticky-header *,
#pt-userpage .vector-icon,
#pt-userpage-sticky-header .vector-icon {
	background-color: var(--color-subtle)
}
#pt-mytalk .vector-icon,
#pt-mytalk-sticky-header .vector-icon {
	background-color: #08ac8c
}
#pt-sandbox .vector-icon,
#pt-sandbox-sticky-header .vector-icon {
	background-color: darkgoldenrod
}
#pt-logout .vector-icon,
#pt-logout-sticky-header .vector-icon {
	background-color: crimson
}
#pt-preferences .vector-icon,
#pt-preferences-sticky-header .vector-icon {
	background-color: darkslategrey
}
#pt-watchlist-sticky-header .vector-icon {
	background-color: gold
}

#cx-language .vector-icon,
#cx-language-sticky .vector-icon {
	background-color: var(--color-progressive)
}
#cx-imageGallery .vector-icon,
#cx-imageGallery-sticky .vector-icon {
	background-color: forestgreen
}
#ca-ve-edit-sticky-header .vector-icon {
	background: linear-gradient(
		45deg, #FFC107, #FFC107 70%, salmon 70%, salmon
	)
}

/* Make buttons visible! */
#vector-user-links-dropdown > div .vector-icon,
#p-lang-btn-label,
#vector-main-menu-dropdown-label,
#vector-page-titlebar-toc-label,
#vector-sticky-header .cdx-button {
	border: solid #AAAAAA 1px;
	box-shadow: 2px 2px #EEEEEE;
}
/* Header buttons */
body > div:nth-child(2) > header > div.vector-header-end > nav .cdx-button {
	border: solid #AAAAAA 1px;
	box-shadow: 2px 2px #EEEEEE;
}

/* Fix double toc-line? */
#vector-sticky-header > div.vector-sticky-header-start > * {
	border: none;
}

/* Fix redundant spacing */
#vector-sticky-header > div.vector-sticky-header-start .cdx-button {
	margin: 0;
	padding: 0
}

/* Turn logo into button */
.mw-logo-container {
	display: none;
}
.mw-logo-icon {
	height: 24px;
	width: 24px;
	padding: 4px;
	margin: auto;
}
.mw-logo {
	min-height: unset;
	min-width: unset;
	box-shadow: 2px 2px #EEEEEE;
	height: 32px;
	width: 32px;
	box-sizing: border-box;
	border: 1px #AAAAAA solid;
	border-radius: 2px;
}

/* Fix screwed-up under-title toolbar header spacing */
#ca-wikilove,
#ca-unwatch,
#ca-watch {
	margin-top: 3px;
}