MediaWiki:Common.css: Difference between revisions

/* Structorica Vector Theme */

:root {
    /* Width control */
    --fixed-width: 1200px; /* Dynamicly changed by Hook */
        
    --vector-tabs: none;
    --vector-tabs-first: none;
}


:root {
    --external-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2390c0fe' d='M6 1h5v5L8.86 3.85 4.7 8 4 7.3l4.15-4.16L6 1Z M2 3h2v1H2v6h6V8h1v2a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1Z'/%3E%3C/svg%3E");
}

.mw-parser-output a.external {
    background-image: var(--external-icon);
    background-size: 0.857em;
    padding-right: 1em;
}


/* Main page elements */
body {
    background-color: var(--site-background-color);
    color: var(--color-base);
}


#mw-page-base {
	background: none;
	height: 85px;
}

/* Remove excess spacing between the sidebar and the logo */
div#mw-panel {
	padding-top: 0;
	padding-bottom: 10px;
}

#p-logo,
#p-logo a {
	margin: auto;
	/*height: 140px; */
}
#p-logo {
    margin-bottom: 0;
}







#mw-panel h3 {
	text-decoration: none !important;
	cursor: pointer;
}

/* Set the tab link colours to black and bold */
#p-namespaces a,
#p-views a,
#p-cactions-label span,
div#mw-head div.vectorMenu h4,
div#p-variants.vectorMenu #mw-vector-current-variant {
	font-weight: 600;
	text-decoration: none;
}


#p-namespaces .new a,
#p-views .new a {
	color: #e1e6cc;
}










#right-navigation,
#content {
	margin-right: 0px;
}
#footer {
	margin-right: 0px;
}

/* Position the tabs */
#left-navigation,
#right-navigation {
	margin-top: 60px;
    height: 30px;
}

#mw-head-base {
	height: 80px;
	margin-top: -80px;
}

.mw-body {
	margin-top: 5px;
}


/* Tabs styling */
nav.vector-menu-tabs,
nav.vector-menu-dropdown {
    background: none;
    padding: 0;
    height: 30px;
}

nav.vector-menu-tabs li a {
    box-sizing: unset;
}

nav.vector-menu-tabs,
nav.vector-menu-tabs a,
.vector-menu-portal .vector-menu-heading,
nav.vector-menu-tabs ul,
nav.vector-menu-tabs ul li.selected,
#mw-head .vector-menu-dropdown .vector-menu-heading {
    background: none;
}
.vector-legacy-sidebar .vector-menu-portal .vector-menu-heading{
    background-size: 100% 0px;
}
#mw-head .vector-menu-dropdown .vector-menu-heading {
    margin: -2px -1px 0px 0px;
}
#mw-head .vector-menu-dropdown .vector-menu-heading {
    color: var(--color-topbar-text);
}


nav.vector-menu-tabs ul li,
nav.vector-menu-tabs ul li.selected,
nav.vector-menu-tabs ul li:hover,
nav.vector-menu-tabs ul li:focus,
nav.vector-menu-dropdown,
nav.vector-menu-dropdown:hover,
nav.vector-menu-dropdown:focus {
    --ca-background-image: var(--vector-tabs);
    --ca-background-color: var(--content-border-top-color);
    background: var(--ca-background-color);
    position: relative;
}
nav.vector-menu-tabs {
    background: var(--content-border-top-color);
}

nav.vector-menu-tabs ul li.selected{
    --ca-background-color: var(--content-background-color);
    background-position-y: bottom, 0px;
}

nav.vector-menu-tabs ul li:hover:not(.selected),
nav.vector-menu-tabs ul li:focus:not(.selected),
nav.vector-menu-dropdown:hover,
nav.vector-menu-dropdown:focus {
    --ca-background-color: var(--content-border-top-color-hovered);
}

nav.vector-menu-tabs ul li:before,
nav.vector-menu-dropdown:before {
    content: "";
    position: absolute;
    left: 0;
    background: var(--ca-background-image) var(--content-border-top-color) no-repeat left top;
    width: 0px;
    height: 100%;
    pointer-events: none;
}
#left-navigation nav.vector-menu-tabs li:first-child:before {
    background: var(--vector-tabs-first) no-repeat left top;
    height: 93px
}


nav.vector-menu-dropdown .mw-list-item a {
    color: var(--link-color);
}


nav.vector-menu-tabs li a {
    padding: 9px 13px 0px 13px;
    height: 21px;
    line-height: 1.1em;
}

nav.vector-menu-dropdown label {
	padding: 9px 13px 0px 13px !important;
}


.vector-menu-tabs .mw-watchlink.icon {
	/* Force font-size when using the icon */
    font-size: 16px !important;
}

.vector-menu-tabs .mw-watchlink.icon a {
    width: 45px;
    margin-right: 0px;
    margin-bottom: -10px;
}

.vector-menu-tabs .mw-watchlink.icon a:before {
	left: 1.17em;
    top: 0.60em;
}



nav.vector-menu-dropdown .vector-menu-content {
	transition: none;
	min-width: calc(100% - 14px); /* Subtract 14px from the minimum width so that it doesn't cross the grass border */
}

nav.vector-menu {
    margin: 0 8px 0 6px;
}
#p-views,
#p-cactions {
	margin: 0;
}
#p-cactions {
	padding-right: 8px;
    height: 30px;
}

#left-navigation nav.vector-menu {
	margin-left: 0;
}

nav.vector-menu h3 span {
    padding-left: 0px;
    font-weight: bold;
}

nav.vector-menu h3 a {
    height: 30px;
    margin-right: 0px;
}

nav.vector-menu div.vector-menu-content {
    top: 30px;
}


/* Set the outer content link colours to light gray and white */
#mw-panel *:not(h3) > a:not(:hover):not(:focus),
#footer a:not(:hover):not(:focus),
.mw-notification a:not(:hover):not(:focus) {
	color: var( --color-siderbar-links)  !important;
}

#mw-panel h3,
#mw-panel a,
#footer li,
#footer a,
.mw-notification a {
	color: var(--color-siderbar-base) !important;
}


nav.mw-portlet.emptyPortlet {
	display: none;
}

.mw-body, .parsoid-body,
div#content {
	background-color: var(--content-background-color);
	border-top: 0px solid var(--content-background-color);
	border-bottom: 0px solid var(--content-background-color);
	border-left: 0px solid var(--content-background-color);
	border-right: 0px solid var(--content-background-color);
}
.oo-ui-windowManager-modal > .oo-ui-dialog > .oo-ui-window-frame {
	background-color: var(--content-background-color);
}
#preferences .mw-htmlform-submit-buttons {
	background-color: var(--content-background-color);
}
















/* Style the personal links */
#p-personal {
    right: 10px;
    top: 5px;
    margin-right: 0;
    margin-left: 10px;
}

#p-personal a {
    color: white;
}

.mw-echo-alert {
    background-color: #8e721c;
    border: 1px solid #fff;
    border-radius: 4px;
    font-weight: bold;
}

#p-personal .vector-menu-content-list {
	padding: 1px 0.5em 1px 0;
}

.vector-user-menu-legacy li {
    padding-top: 0.3em;
    padding-bottom: 0.3em;
}

.oo-ui-icon-bell, .mw-ui-icon-bell::before,
.oo-ui-icon-tray, .mw-ui-icon-tray::before {
    filter: invert(1);
}
.vector-user-menu-legacy #pt-anonuserpage,
.vector-user-menu-legacy #pt-tmpuserpage,
.vector-user-menu-legacy #pt-userpage a {
    filter: invert(1);
    padding-top: 0;
    background-size: 14px;
    background-position: unset;
}

.vector-user-menu-legacy #pt-anonuserpage span,
.vector-user-menu-legacy #pt-tmpuserpage span,
.vector-user-menu-legacy #pt-userpage a span {
    color: white;
    filter: invert(1);
}

.skin-vector-legacy #p-personal #pt-notifications-notice,
.skin-vector-legacy #p-personal #pt-notifications-alert {
	margin-right: 0;
}

.skin-vector-legacy #pt-notifications-notice .mw-echo-notifications-badge,
.skin-vector-legacy #pt-notifications-alert .mw-echo-notifications-badge {
    top: 0;
    width: 14px;
    height: 14px;
    background-size: 14px 14px;
    margin-right: 8px;
}

.skin-vector-legacy #pt-notifications-notice .mw-echo-notifications-badge.mw-echo-notifications-badge-all-read,
.skin-vector-legacy #pt-notifications-alert .mw-echo-notifications-badge.mw-echo-notifications-badge-all-read {
    margin-right: 2px;
}

.skin-vector-legacy #pt-notifications-notice .mw-echo-notifications-badge:after,
.skin-vector-legacy #pt-notifications-alert .mw-echo-notifications-badge:after {
    top: 4px;
    filter: invert(1);
	border-color: var(--color-inverted-fixed);
	color: var(--color-inverted-fixed);
}
















/* Style the simple search */
#p-search {
	margin-left: 0;
}

#p-search form {
	position: relative;
	padding: 0 0px 0 1px;
	height: 30px;
}

#simpleSearch {
	border: 0;
	background-color: #D0CFCF;
	background-image: -webkit-linear-gradient(#C3C3C3, #DBDBDB);
	background-image: linear-gradient(#C3C3C3, #DBDBDB);
	-webkit-transition: none !important;
	-moz-transition: none !important;
	transition: none !important;
}

.vector-search-box,
.vector-search-box form {
    margin: 0;
}

/* Remove border of search bar */
#simpleSearch .vector-search-box-input {
    border: none;
    border-radius: 0;
    outline: none;
    box-shadow: none;
    height: 30px;
    padding-left: 13px;
}

.vector-search-box-input::placeholder {
	color: var(--searchinput-placeholder-color);
}

/* Style the simple search */
#p-search {
	margin-left: 0;
	width: unset;
	min-width: unset;
}

#p-search #searchform {
	position: relative;
	padding: 0 0px 0 1px;
}

/* Unstyle codex search */
#p-search #searchform .cdx-text-input__input,
#p-search #searchform .cdx-search-input,
#p-search #searchform {
	background: none;
	display: block;
    border: none;
    border-radius: 0;
    outline: none;
    box-shadow: none;
    height: 30px;
}

/* Keep old vector default styles */
#p-search #searchform .cdx-search-input__input-wrapper {
    height: 100%;
    min-width: 6.5em;
    width: 20vw;
    max-width: 26em;
    margin: 0;
}

#p-search #searchform .cdx-search-input__input-wrapper {
	position: relative;
	border: 0;
	background-color: #D0CFCF;
	background-image: -webkit-linear-gradient(#C3C3C3, #DBDBDB);
	background-image: linear-gradient(#C3C3C3, #DBDBDB);
	-webkit-transition: none !important;
	-moz-transition: none !important;
	transition: none !important;
}


#p-search #searchform .cdx-text-input__input {
    background-color: rgba(255, 255, 255, 0.5);
    color: #000;
    min-height: unset;
    padding: 5px 2.15384615em 5px 0.4em;
}

#p-search #searchform .cdx-text-input__input::placeholder {
	color: var(--searchinput-placeholder-color);
}

#p-search #searchform .cdx-search-input__end-button {
	display: block;
    position: absolute;
    top: 1px;
    bottom: 1px;
    right: 1px;
    min-width: 28px;
    width: 2.15384615em;
    border: 0;
    padding: 0;
    cursor: pointer;
    direction: ltr;
    text-indent: -99999px;
    white-space: nowrap;
    overflow: hidden;
    z-index: 1;
    background: no-repeat center / 1.23076923em url(/skins/Vector/resources/skins.vector.styles.legacy/images/search.svg?ac00d);
    opacity: 0.67;
    margin: 0;
    min-height: unset;
}

#p-search #searchform > .cdx-search-input__end-button {
	right: 5px;
}

#p-search #searchform .cdx-thumbnail__placeholder,
#p-search #searchform .cdx-thumbnail__image {
	background-color: var(--background-color-base);
}

/* Fix placeholder text being too light in chrome */
::-webkit-input-placeholder {
	color: inherit;
	opacity: 0.54;
}

/* The suggestions shown under the search bar */
.suggestions.searchbar {
	margin-right: -1px;
}

.suggestions.searchbar > .suggestions-results,
.suggestions.searchbar > .mw-searchSuggest-link {
	display: block;
	margin-left: 1px;
}

.suggestions.searchbar .suggestions-results,
.suggestions.searchbar .suggestions-special,
.suggestions .suggestions-results,
.suggestions .suggestions-special {
	background-color: #DBDADA !important;
	border-color: #3C3B3B !important;
}

.suggestions.searchbar .suggestions-result-current,
.suggestions .suggestions-result-current {
	background-color: #0078D7 !important;
}



















/* ------------------------------------------- */

/* Theme and Width toggle buttons styling */
.theme-toggle-button,
.width-toggle-button {
    display: block;
    padding: 8px 12px;
    text-decoration: none;
    border-radius: 4px;
    font-size: 14px;
    margin: 4px 0;
}
body.stw-theme-dark .theme-toggle-button:hover,
body.stw-theme-dark .width-toggle-button:hover,
#p-personal .theme-toggle-button,
#p-personal .width-toggle-button {
    display: inline-block;
    margin: 0 0 0 10px;
    padding: 0.5em;
    font-size: 0.875em;
    line-height: 1;
}
/* Width control */
@media screen and (min-width: 1200px) {
    body {
        max-width: var(--fixed-width); /* Dynamicly changed by Hook */
        margin: auto;
    }
}