Guild Wars 2 Wiki:Projects/CSS documentation/noncontent ui- vector
From Guild Wars 2 Wiki
Jump to navigationJump to search
/** GENERAL **/
html,
body {
min-height: 100%;
height: auto;
}
body {
font-size: 100%;
line-height: 1.2em;
background-color: transparent;
}
/* Tweak left and right navigation to match full width view */
.mw-content-container,
.vector-toc-collapsed #mw-sidebar-checkbox:not(:checked) ~ .mw-content-container,
.vector-toc-collapsed #mw-sidebar-checkbox:not(:checked) ~ .mw-table-of-contents-container,
#mw-sidebar-checkbox:not(:checked) ~ .vector-sidebar-container-no-toc ~ .mw-content-container {
max-width: unset;
}
div.mw-page-container,
div.mw-workspace-container {
max-width: unset;
margin-left: unset;
margin-right: unset;
}
.mw-checkbox-hack-checkbox:checked ~ .mw-workspace-container .mw-content-container,
.mw-checkbox-hack-checkbox:checked ~ .mw-workspace-container .mw-article-toolbar-container {
margin-left: 11.5em;
}
.mw-page-container {
margin-top: 2.5em;
}
.mw-page-container {
background-color: transparent; /* transparent to overwrite default white */
border-color: transparent;
}
/* positions background image in top left */
/* including legacy version too */
body {
background-image: url("/images/f/f4/Skin_body_background_gradient_(vector).png"), url("/images/9/95/Skin_header_stripe_vector_(Janthir_Wilds).jpg");
background-position: top left, top left;
background-repeat: repeat-x, repeat-x;
background-size: auto 500px, auto;
background-color: transparent; /* transparent to overwrite default white */
width: 100%;
}
body.skin-vector-legacy {
background-image: none;
}
body.skin-vector-legacy #mw-page-base {
background-image: url("/images/f/f4/Skin_body_background_gradient_(vector).png"), url("/images/b/b1/Skin_header_(Janthir_Wilds).png");
background-position: top left, top left;
background-repeat: repeat-x, no-repeat;
background-size: auto 400px, auto;
background-color: transparent; /* transparent to overwrite default white */
height: 300px;
position: absolute;
top: 20px;
left: 0;
z-index: 0;
width: 100%;
}
/* determines where the top of the page content appears based on its height */
#mw-head-base {
margin: 0 0 -1px 12em;
height: 4.4em;
padding: 2px 0 0 0;
border-radius: 0.5em 0 0 0;
background-image: none;
position: relative;
z-index: 2;
}
@media screen and (min-width: 982px) {
body.skin-vector-legacy div#content {
padding: 1em 1.2em 1em;
}
}
div#bodyContent,
#mw-head,
#mw-panel,
#footer,
input,
select,
#p-personal,
#p-personal-sticky-header {
font-family: Arial, sans-serif;
line-height: 1.538em;
}
#bodyContent {
font-size: 0.8125em;
padding-top: 0px;
}
body.skin-vector-legacy div#content {
position: relative;
border-radius: 0;
z-index: 1;
margin-left: 10em;
background-image: none;
}
main.mw-body {
padding: 1em;
}
div#mw-data-after-content {
margin-left: 10em;
}
.mw-indicators {
z-index: unset;
}
/** FOOTER **/
div.mw-footer-container {
padding: 1.5em 0; /* over-ride native 50px top and 82px bottom margin */
}
footer#footer {
margin: 0.5em 0 0; /* better compatibility with non-legacy mode vector versus old -7.5em margin*/
padding: 0.5em 0em 0.5em 0em;
position: relative;
height: 7em;
}
body.skin-vector-legacy footer#footer {
padding: 0.5em 0 0.5em 11.5em;
}
#footer ul li {
padding: 0;
}
#footer #footer-info li,
#footer #footer-places li {
line-height: 1.667em;
}
#footer #footer-places {
margin-top: 0.833em;
}
#footer #footer-icons {
position: absolute;
right: 1em;
z-index: 1;
margin-top: 0.5em;
}
#footer #footer-icons ul li a {
display: block;
float: left;
}
#footer #footer-icons li a + a {
margin-left: 0.75em;
}
#footer #footer-icons li#footer-copyrightico {
position: relative;
top: 0;
margin: 0 5px 0 0;
}
#footer #footer-icons li#footer-copyrightico a {
background-image: url("/images/0/07/ArenaNet_logo.png");
background-repeat: no-repeat;
width: 116px;
height: 47px;
display: block;
margin-top: -1px;
}
#footer #footer-icons li#footer-copyrightico img {
display: none;
}
/* Prevent footer from overflowing onto the "Privacy policy"... line at small page widths on short pages. */
@media screen and (max-width: 1000px) {
.skin-vector-legacy #footer #footer-icons {
position: relative;
margin-top: 1em;
}
}
@media screen and (max-width: 600px) {
.skin-vector-legacy #footer-poweredbyico {
display: none;
}
}
#catlinks {
padding-left: 10px;
}
#mw-hidden-catlinks {
display: none; /* seems this pre-built rule was lost with the MW 1.36 upgrade */
}
#mw-normal-catlinks,
#mw-hidden-catlinks.mw-hidden-cats-user-shown {
display: inline-block;
}
#mw-hidden-catlinks {
padding-left: 1em;
}
/** PAGE TABS **/
/* position tabs above the page to allow no-border on the active tabs to be shown above the border of the top of the page */
.mw-article-toolbar-container {
position: relative;
z-index: 1;
}
/* tabs grouped on the left, e.g. page, talk) */
#left-navigation {
margin-left: 0px;
}
body.skin-vector-legacy #left-navigation {
top: 2.5em;
left: 10em;
margin: -1px 0 0;
position: absolute;
}
/* tabs grouped on the right, e.g. move, search) */
body.skin-vector-legacy #right-navigation {
top: 2.5em;
margin-top: -1px;
position: absolute;
right: 0;
}
body.skin-vector-legacy #right-navigation,
body.skin-vector-legacy #left-navigation {
padding: 1px 0 0;
z-index: 3;
}
.vector-menu-tabs {
padding: 0;
height: unset;
}
#p-cactions-label {
background-image: none;
}
.vector-menu-tabs li a {
overflow: hidden;
line-height: 2.5em;
background: transparent;
}
#right-navigation .vector-menu-tabs {
margin: 0px;
}
.vector-menu-tabs ul {
background: none;
}
body.skin-vector-legacy .vector-menu-tabs ul li {
background-image: none;
height: 1.875em;
line-height: 0;
margin: 0px -1px 0px 0px;
border-width: 1px;
border-style: solid;
}
.vector-menu-tabs li.selected {
border-bottom-width: 0 !important; /* " !important" required because we moved the border rule to the bottom for color scheming*/
padding-bottom: 1px;
margin: 8px -1px 0 0;
border-width: 1px;
border-style: solid;
}
body.skin-vector-legacy .vector-menu-tabs li.selected {
margin: 0 -1px 0 0;
}
.vector-menu-tabs li a {
height: 2.5em;
padding-left: 0.8em;
padding-right: 0.8em;
padding-top: 0em;
background-image: none;
}
.vector-menu-tabs .mw-list-item > a,
#right-navigation div.vector-menu-dropdown {
padding: 0em 1em;
}
div.vector-menu-tabs .mw-list-item,
.mw-article-toolbar-container div.vector-menu-dropdown {
margin: 0em 0.6em;
}
.vector-menu-tabs li.selected {
margin: unset;
border-width: 0px;
}
.vector-menu-tabs li.selected a span {
margin-top: 0px;
}
body.skin-vector-legacy .vector-menu-tabs ul li:first-child {
border-top-left-radius: 0.5em;
}
body.skin-vector-legacy div#left-navigation .vector-menu-tabs li.selected {
border-radius: 0.5em 0 0 0;
}
body.skin-vector-legacy div#left-navigation .vector-menu-tabs li + li.selected {
border-radius: 0;
}
body.skin-vector-legacy div#left-navigation .vector-menu-tabs ul li:last-child {
border-top-right-radius: 0.5em;
}
.vector-menu-tabs .mw-watchlink.icon a::before {
margin-top: 0.5em;
}
body.skin-vector-legacy .vector-menu-tabs .mw-watchlink.icon a::before {
top: 0.5em;
margin-top: 0em;
}
/* Dropdown vector menu */
body.skin-vector-legacy #right-navigation .vector-menu-dropdown {
height: 1.875em;
padding: 0px;
border-width: 1px;
border-style: solid;
}
#right-navigation .vector-menu-dropdown ul {
margin-left: -1px;
}
#right-navigation .vector-menu-dropdown li a {
text-decoration: none;
height: 1.4em;
line-height: 1.538em;
}
body.skin-vector-legacy #right-navigation .vector-menu-dropdown .vector-menu-content {
top: 1.92em; /* if equal to or greater than 2em, the menu will close before the mouse reaches it */
}
#right-navigation .vector-menu-dropdown .vector-menu-content {
top: 2.4em;
}
#right-navigation .vector-menu-dropdown .vector-menu-heading {
padding-top: 0.55em;
height: 2.5em;
}
#right-navigation .vector-menu-dropdown .vector-menu-heading::after {
top: 0em;
}
.vector-menu-tabs, .vector-menu-tabs a,
#mw-head #right-navigation .vector-menu-dropdown label {
background-image: none;
}
/* Simple search */
div#simpleSearch {
height: 1.875em;
margin-top: 0px;
border-width: 1px;
border-style: solid;
}
#p-search {
margin: 0px;
}
body.skin-vector-legacy #p-search {
margin: 0 0 0 -1px;
}
#p-search form,
#p-search input {
margin: 0;
}
div#simpleSearch input {
height: 100%;
padding: 0.2em 0px 0px 0.2em;
border: none;
}
input:-moz-placeholder {
font-style: italic;
}
input::-webkit-input-placeholder {
font-style: italic;
}
#searchInput:focus,
#searchInput:hover {
background-color: #d7d7d7; /* color scheme: offwhite inputs */
}
/* fix magnifying glass icon drifting weirdly upon page load */
#searchButton {
left: unset;
width: unset;
}
/* Dropdown search menu items */
button.wvui-button--framed:not([disabled]),
input.wvui-input__input:not([disabled]) {
color: #EAEAEA; /* color scheme: font offwhite */
}
button.wvui-button--framed:not([disabled]),
input.wvui-input__input:not([disabled]),
ol.wvui-typeahead-search__suggestions {
background-color: #36393F; /* color scheme: page gray */
}
/* Fix search label disappearing */
.wvui-typeahead-search__submit {
opacity: 1;
}
ol.wvui-typeahead-search__suggestions,
a.wvui-typeahead-search__suggestions__footer,
button.wvui-button--framed:not([disabled]),
input.wvui-input__input:not([disabled]) {
border-color: #5A5C5E; /* color scheme: gray page border */
}
button.wvui-button--framed:not([disabled]):hover {
background-color: #40434A; /* color scheme: inactive tabs */
color: #EAEAEA; /* color scheme: font offwhite */
}
a.wvui-typeahead-suggestion--active,
a.wvui-typeahead-search__suggestions__footer--active {
background-color: #40434A; /* color scheme: inactive tabs */
}
span.wvui-typeahead-suggestion__title,
a.wvui-typeahead-search__suggestions__footer {
color: #77B4D2; /* color scheme: font link */
}
/* Few fixes for the legacy vector skin */
body.skin-vector-legacy .suggestions-results {
background-color: #40434A; /* color scheme: inactive tabs */
border-color: #5A5C5E; /* color scheme: gray page border */
}
body.skin-vector-legacy .suggestions-result,
body.skin-vector-legacy .suggestions a.mw-searchSuggest-link {
color: #EAEAEA; /* color scheme: font offwhite */
}
body.skin-vector-legacy .suggestions-special {
background-color: #36393F; /* color scheme: page gray */
border-color: #5A5C5E; /* color scheme: gray page border */
}
body.skin-vector-legacy .suggestions-result-current {
background-color: #2a4b8d;
}
/* Wikilove icons */
#p-views #ca-wikilove.icon a {
padding: none;
}
body.skin-vector-legacy #p-views #ca-wikilove.icon a {
padding: 8px 0px 0px 6px;
}
#ca-wikilove.icon a::before {
background-position: 5px 35%;
}
#ca-wikilove.icon a:hover::before,
#ca-wikilove.icon a:focus::before {
background-position: -19px 35%;
}
div#mw-notification-area {
top: 1em;
}
.vector-sticky-header-enabled .mw-notification-area {
z-index: 100;
}
.vector-sticky-header-context-bar-primary {
overflow: unset;
}
/** LEFT SIDEBAR **/
body.skin-vector-legacy #p-logo a {
width: 10em;
}
body.skin-vector-legacy #p-logo {
width: 10em;
background-color: transparent;
margin-left: 0em;
margin-bottom: 1em;
}
.mw-logo {
margin-right: 2.5em;
}
a.mw-logo:hover {
text-decoration: none;
}
.mw-logo-wordmark {
color: transparent;
}
.mw-logo-container {
background-image: url('/images/c/cb/Mobile_skin_header_logo.png');
background-position-y: center;
background-size: 100%;
background-repeat: no-repeat;
height: 2.5em;
opacity: 0.85;
overflow: visible;
width: 350px;
}
#mw-sidebar-button::before,
#vector-toc-collapsed-button::before {
filter: invert(40);
}
#mw-sidebar-button {
padding: 0.5em 0.75em;
}
div#mw-panel {
background: unset; /* override insane white gradient background that appears when resizing screen horizontally */
left: -0.5em; /* override default -1.8em */
top: 0.5em;
border-style: solid;
border-width: 1px;
padding: 2em 0.5em 0.5em 0.5em;
}
body.skin-vector-legacy div#mw-panel {
background-color: transparent !important;
border: none;
z-index: 1; /* Any value is sufficient to make sure the sidebar is in front of the footer element on short pages. Without this set, cannot click on sidebar links on short pages. */
}
div#mw-panel .portal label {
font-weight: bold;
}
.portal label,
.vector-menu-portal .vector-menu-heading {
background-image: none;
}
div#mw-panel .portal .body ul {
padding-top: 0;
}
/* Table of contents */
.mw-table-of-contents-container {
padding: 0.25em 0em;
}
.sidebar-toc {
padding: 12px 19px 12px 9px;
margin-left: 0.75em;
}
.sidebar-toc .sidebar-toc-contents,
.sidebar-toc .sidebar-toc-header {
margin-left: 1.25em;
}
.sidebar-toc .sidebar-toc-list-item a {
font-size: 0.75em;
}
.sidebar-toc-text {
line-height: 1.125em;
}
.vector-toc-not-collapsed .sidebar-toc::after {
display: none;
}
#vector-toc-collapsed-button {
background-color: transparent;
}
/** PERSONAL PANEL **/
body.skin-vector-legacy #p-search .mw-ui-icon-wikimedia-search,
body.skin-vector-legacy #p-personal-more,
body.skin-vector-legacy #p-personal {
background-color: rgba(0,0,0,0.5);
}
body.skin-vector-legacy #p-personal {
top: 0em;
}
body.skin-vector-legacy #p-personal ul {
padding-left: 0em;
}
#pt-anonuserpage,
#pt-userpage a,
.vector-user-menu-legacy #pt-anonuserpage,
.vector-user-menu-legacy #pt-userpage a {
background: none;
padding-left: 0px !important;
}
#pt-userpage,
#pt-anonuserpage,
#pt-login {
text-transform: none;
}
#pt-notifications-alert .mw-echo-notifications-badge,
#pt-notifications-notice .mw-echo-notifications-badge {
top: -3px;
}
/* Hide personal nav elements below certain screen widths to prevent interaction with tabs */
@media screen and (max-width:818px) {
#utcdate,
#pt-notifications-alert,
#pt-notifications-notice {
display: none;
}
}
@media screen and (max-width:595px) {
#pt-watchlist,
#pt-mycontris {
display: none;
}
}
/** MAIN CONTENT **/
.mw-editsection {
font-family: Arial, sans-serif;
line-height: unset;
}
/* MediaWiki help link on every special page */
div#mw-indicator-mw-helplink a {
background-image: none;
font-weight: bold;
}
.mw-helplink::before {
content: "[?] ";
font-weight: normal;
line-height: 1.5em;
vertical-align: top;
}
/* Empty class appears to be bugged on Vector 2022 and is never removed (has a display:none rule in it) */
#p-lang-btn.mw-portlet-empty {
display: block;
}
#p-lang-btn {
float: right;
}
/** COLORS FOR GENERAL UI ELEMENTS **/
html {
background-color: #363333; /* color scheme: darkest gray */
background-image: url("/images/3/3c/Skin_footer.png");
background-repeat: repeat-x;
background-position: center bottom -75px;
}
.mw-body,
div#mw-panel,
div#simpleSearch,
.vector-menu-tabs .selected,
.vector-menu-tabs li:hover,
#right-navigation .vector-menu-dropdown:hover,
#right-navigation .vector-menu-dropdown ul li:hover,
.oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button,
.oo-ui-tabSelectWidget-framed .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected,
.oo-ui-popupWidget-popup,
.mw-prefs-buttons,
.sidebar-toc,
.mw-sidebar {
background-color: #36393F; /* color scheme: page gray */
}
.vector-sticky-header {
background-color: #1A1A1A; /* color scheme: super dark */
}
.mw-body,
#footer li,
.messagebox,
.errorbox,
.warningbox,
.successbox,
.diff-context,
#pagehistory li.selected,
.oo-ui-tabOptionWidget,
.oo-ui-tabSelectWidget-framed .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected,
.editOptions,
.oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button,
.mw-notification,
.sidebar-toc .sidebar-toc-list-item-active > .sidebar-toc-link,
.vector-menu-tabs-legacy .selected a, .vector-menu-tabs-legacy .selected a:visited,
.vector-sticky-header {
color: #EAEAEA; /* color scheme: font offwhite */
}
.vector-menu-tabs .selected a,
.vector-menu-tabs .selected a:visited,
.vector-menu-tabs .mw-list-item.selected a,
.vector-menu-tabs .mw-list-item.selected a:visited,
#mw-panel .portal label,
.vector-menu label span, {
color: #B0B0B0; /* color scheme: font darker offwhite */
}
a,
a:visited,
#pt-userpage-2 a,
.mw-parser-output a.external,
.mw-parser-output a.external:visited,
.mw-parser-output a.extiw,
.mw-parser-output a.extiw:visited,
.mw-ui-button.mw-ui-progressive.mw-ui-quiet,
.sidebar-toc .sidebar-toc-link,
.toctogglelabel,
.vector-menu li a,
.vector-menu-dropdown .mw-list-item a,
.vector-menu-dropdown .vector-menu-heading,
.vector-menu-portal .vector-menu-content li a,
.vector-menu-portal .vector-menu-content li a:visited,
.vector-menu-tabs .mw-list-item a,
.vector-menu-tabs li a,
.vector-menu-tabs .mw-list-item.selected a,
.vector-menu-tabs .mw-list-item.selected a:visited,
.vector-toc-collapse-button, .vector-toc-uncollapse-button,
.vector-user-links .vector-user-menu .mw-list-item > a,
.vector-user-links .vector-user-menu .vector-menu-content-item,
.vector-user-links .vector-user-menu-more .vector-menu-content-list li a,
.vector-user-menu-create-account a,
.vector-user-menu-login a,
.vector-user-menu-logout a {
color: #77B4D2; /* color scheme: font link */
}
a.new,
#p-personal a.new,
.vector-menu-tabs .new a,
.vector-menu-tabs .new a:visited {
color: #E16B6B; /* color scheme: font red (new) link */
}
/* note: reverse tab highlighting scheme for legacy vs non-legacy */
nav.vector-menu-tabs li,
#right-navigation nav.vector-menu-dropdown,
.vector-menu-dropdown .vector-menu-content,
div.vector-menu-tabs li.selected,
.mw_metadata td,
.mw_metadata th,
.mw-warning,
#pagehistory li.selected,
.catlinks,
.editOptions,
.diff-context,
.oo-ui-tabSelectWidget-framed,
#mw-notification-area > *,
.messagebox,
.errorbox,
.warningbox,
.successbox {
background-color: #40434A; /* color scheme: inactive tabs */
}
#p-personal-sticky-header.vector-menu-dropdown .vector-menu-content {
background-color: #36393F; /* color scheme: page gray */
}
body.skin-vector-legacy div#content,
#right-navigation .vector-menu-dropdown li,
#right-navigation .vector-menu-dropdown,
.catlinks,
.diff-context,
.editOptions,
.mw-article-toolbar-container,
.mw-warning,
.mw_metadata td,
.mw_metadata th,
.oo-ui-panelLayout-framed,
.vector-menu-dropdown .vector-menu-content,
.vector-menu-portal .vector-menu-heading,
.vector-menu-tabs li.selected,
.vector-menu-tabs ul li,
.vector-sticky-header,
.vector-sticky-header-context-bar,
.wikiEditor-ui .wikiEditor-ui-view,
div#mw-panel,
div#simpleSearch,
.oo-ui-popupWidget-popup,
.mw-echo-ui-notificationBadgeButtonPopupWidget-popup > .oo-ui-popupWidget-popup > .oo-ui-popupWidget-head,
.mw-echo-ui-notificationBadgeButtonPopupWidget-popup > .oo-ui-popupWidget-popup > .oo-ui-popupWidget-footer,
footer#footer,
main#content {
border-color: #5A5C5E; /* color scheme: gray page border */
}
main#content {
box-shadow: rgba(0, 0, 0, 0.15) 0 0.1em 0.75em; /* color scheme: shadow page border */
border-style: solid;
border-width: 1px;
}
body.skin-vector-legacy div#content {
box-shadow: rgba(0, 0, 0, 0.15) 0 0.1em 0.75em; /* color scheme: shadow page border */
}
#contentSub,
#contentSub2 {
color: #95A8B7; /* "Redirected from ___" message beneath the page title */
}
.mw-wiki-logo {
filter: brightness(90%);
}
/* Identical to the main theme versions but with fill="#77B4D2" at the end instead of black */
/* down arrow icon */
.vector-menu-dropdown .vector-menu-heading::after {
background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2212%22 height=%2212%22 viewBox=%220 0 12 12%22%3E %3Ctitle%3E down arrow %3C/title%3E %3Cpath d=%22m11.05 3.996-.965-1.053-4.035 3.86-3.947-3.86L1.05 3.996l5 5 5-5%22 fill=%22%2377b4d2%22/%3E %3C/svg%3E");
}
/* bell notifications */
.oo-ui-icon-bell,
.mw-ui-icon-bell::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2220%22 height=%2220%22 viewBox=%220 0 20 20%22%3E %3Ctitle%3E bell %3C/title%3E %3Cpath d=%22M16 7a5.38 5.38 0 0 0-4.46-4.85C11.6 1.46 11.53 0 10 0S8.4 1.46 8.46 2.15A5.38 5.38 0 0 0 4 7v6l-2 2v1h16v-1l-2-2zm-6 13a3 3 0 0 0 3-3H7a3 3 0 0 0 3 3z%22 fill=%22%2377b4d2%22/%3E %3C/svg%3E");
}
/* notice notifications */
.oo-ui-icon-tray,
.mw-ui-icon-tray::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2220%22 height=%2220%22 viewBox=%220 0 20 20%22%3E %3Ctitle%3E tray %3C/title%3E %3Cpath d=%22M3 1a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2zm14 12h-4l-1 2H8l-1-2H3V3h14z%22 fill=%22%2377b4d2%22/%3E %3C/svg%3E");
}
/* search */
.searchButton[name="go"],
.oo-ui-icon-wikimedia-search::before,
.mw-ui-icon-wikimedia-search::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2220%22 height=%2220%22 viewBox=%220 0 20 20%22%3E %3Ctitle%3E search %3C/title%3E %3Cpath d=%22M12.2 13.6a7 7 0 1 1 1.4-1.4l5.4 5.4-1.4 1.4-5.4-5.4zM3 8a5 5 0 1 0 10 0A5 5 0 1 0 3 8z%22 fill=%22%2377b4d2%22/%3E %3C/svg%3E");
}
/* user icon */
.oo-ui-icon-wikimedia-userAvatar,
.mw-ui-icon-wikimedia-userAvatar:before {
background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2220%22 height=%2220%22 viewBox=%220 0 20 20%22%3E %3Ctitle%3E user avatar %3C/title%3E %3Cpath d=%22M10 11c-5.92 0-8 3-8 5v3h16v-3c0-2-2.08-5-8-5z%22 fill=%22%2377b4d2%22/%3E %3Ccircle cx=%2210%22 cy=%225.5%22 r=%224.5%22 fill=%22%2377b4d2%22/%3E %3C/svg%3E");
}
/* discussion */
.mw-ui-icon-wikimedia-speechBubbles::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2220%22 height=%2220%22 viewBox=%220 0 20 20%22%3E %3Ctitle%3E discussion %3C/title%3E %3Cpath d=%22M17 4v7a2 2 0 0 1-2 2H4v1a2 2 0 0 0 2 2h10l4 4V6a2 2 0 0 0-2-2zM6 10H0v6z%22 fill=%22%2377b4d2%22/%3E %3Crect width=%2216%22 height=%2212%22 rx=%222%22 fill=%22%2377b4d2%22/%3E %3C/svg%3E");
}
/* history */
.mw-ui-icon-wikimedia-history::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2220%22 height=%2220%22 viewBox=%220 0 20 20%22%3E %3Ctitle%3E history %3C/title%3E %3Cpath d=%22M9 6v5h.06l2.48 2.47 1.41-1.41L11 10.11V6z%22 fill=%22%2377b4d2%22/%3E %3Cpath d=%22M10 1a9 9 0 0 0-7.85 13.35L.5 16H6v-5.5l-2.38 2.38A7 7 0 1 1 10 17v2a9 9 0 0 0 0-18z%22 fill=%22%2377b4d2%22/%3E %3C/svg%3E");
}
/* watchlist */
.oo-ui-icon-wikimedia-watchlist,
.mw-ui-icon-wikimedia-watchlist:before {
background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2220%22 height=%2220%22 viewBox=%220 0 20 20%22%3E %3Ctitle%3E watchlist %3C/title%3E %3Cpath d=%22M1 3h16v2H1V3Zm0 6h6v2H1V9Zm0 6h8v2H1v-2Zm8-4.24h3.85L14.5 7l1.65 3.76H20l-3 3.17.9 4.05-3.4-2.14L11.1 18l.9-4.05-3-3.19Z%22 fill=%22%2377b4d2%22/%3E %3C/svg%3E");
}
/* watch article (empty) */
.mw-ui-icon-wikimedia-star::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2220%22 height=%2220%22 viewBox=%220 0 20 20%22%3E %3Ctitle%3E star %3C/title%3E %3Cpath d=%22M20 7h-7L10 .5 7 7H0l5.46 5.47-1.64 7 6.18-3.7 6.18 3.73-1.63-7zm-10 6.9-3.76 2.27 1-4.28L3.5 8.5h4.61L10 4.6l1.9 3.9h4.6l-3.73 3.4 1 4.28z%22 fill=%22%2377b4d2%22/%3E %3C/svg%3E");
}
/* unwatch article (fill) */
.mw-ui-icon-wikimedia-unStar::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2220%22 height=%2220%22 viewBox=%220 0 20 20%22%3E %3Ctitle%3E unStar %3C/title%3E %3Cpath d=%22M20 7h-7L10 .5 7 7H0l5.46 5.47-1.64 7 6.18-3.7 6.18 3.73-1.63-7z%22 fill=%22%2377b4d2%22/%3E %3C/svg%3E");
}
/* user talk */
.mw-ui-icon-wikimedia-userTalk::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2220%22 height=%2220%22 viewBox=%220 0 20 20%22%3E %3Ctitle%3E userTalk %3C/title%3E %3Cpath d=%22M18 0H2a2 2 0 0 0-2 2v18l4-4h14a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zm-4 4a1.5 1.5 0 1 1-1.5 1.5A1.5 1.5 0 0 1 14 4zM6 4a1.5 1.5 0 1 1-1.5 1.5A1.5 1.5 0 0 1 6 4zm4 8c-2.61 0-4.83-.67-5.65-3h11.3c-.82 2.33-3.04 3-5.65 3z%22 fill=%22%2377b4d2%22/%3E %3C/svg%3E");
}
/* preferences */
.oo-ui-icon-settings, .mw-ui-icon-settings::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 xmlns:xlink=%22http://www.w3.org/1999/xlink%22 width=%2220%22 height=%2220%22 viewBox=%220 0 20 20%22%3E %3Ctitle%3E settings %3C/title%3E %3Cg transform=%22translate%2810 10%29%22%3E %3Cpath id=%22a%22 d=%22M1.5-10h-3l-1 6.5h5m0 7h-5l1 6.5h3%22 fill=%22%2377b4d2%22 /%3E %3Cuse xlink:href=%22%23a%22 transform=%22rotate%2845%29%22 fill=%22%2377b4d2%22 /%3E %3Cuse xlink:href=%22%23a%22 transform=%22rotate%2890%29%22 fill=%22%2377b4d2%22 /%3E %3Cuse xlink:href=%22%23a%22 transform=%22rotate%28135%29%22 fill=%22%2377b4d2%22 /%3E %3C/g%3E %3Cpath d=%22M10 2.5a7.5 7.5 0 0 0 0 15 7.5 7.5 0 0 0 0-15v4a3.5 3.5 0 0 1 0 7 3.5 3.5 0 0 1 0-7%22 fill=%22%2377b4d2%22 /%3E %3C/svg%3E");
}
/* contributions */
.mw-ui-icon-wikimedia-userContributions::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2220%22 height=%2220%22 viewBox=%220 0 20 20%22%3E %3Ctitle%3E userContributions %3C/title%3E %3Ccircle cx=%2215.5%22 cy=%2210.5%22 r=%222.5%22 fill=%22%2377b4d2%22/%3E %3Cpath d=%22M1 15h8v2H1Zm0-6h10v2H1Zm0-6h16v2H1Zm14.5 10.6c-3.3 0-4.5 1.6-4.5 2.7V18h9v-1.7c0-1-1.2-2.7-4.5-2.7z%22 fill=%22%2377b4d2%22/%3E %3C/svg%3E");
}
/* log out */
.mw-ui-icon-wikimedia-logOut::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2220%22 height=%2220%22 viewBox=%220 0 20 20%22%3E %3Ctitle%3E logout %3C/title%3E %3Cpath d=%22M3 3h8V1H3a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h8v-2H3z%22 fill=%22%2377b4d2%22/%3E %3Cpath d=%22M13 5v4H5v2h8v4l6-5z%22 fill=%22%2377b4d2%22/%3E %3C/svg%3E");
}
