MediaWiki:Vector-darkmode.less/interface.less

De RuneScape Wiki
Ir para navegação Ir para pesquisar
// <pre>
/* ==============================
     skin stuff outside mw-body
   ============================== */

// sidebar headers
#mw-panel .portal h3 {
    color: @dark-text;
}

// tabs
nav.vector-menu-tabs ul li,
div#mw-head nav.vector-menu h3 {
    background: @cloud-burst;
}

// selected tab
nav.vector-menu-tabs li.selected {
    background: @dark-page;
}

nav.vector-menu-tabs li.selected a,
nav.vector-menu-tabs li.selected a:visited {
    color: @dark-text;
}

#p-cactions:hover #p-cactions-label, // "More" dropdown
nav.vector-menu-tabs ul li:not(.selected):hover,
div#mw-head nav.vector-menu h3:hover {
    background: lighten( @cloud-burst, 4% );
}

// "More" dropdown
#p-cactions h3 {
    span {
        color: @dark-links;
        padding-top: 1em;
    }

    a {
        height: 2.2em;
    }

    // downward arrow
    &: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 %3Cpath d=%22M11.05 3.996l-.965-1.053-4.035 3.86-3.947-3.86L1.05 3.996l5 5 5-5%22 fill=%22%238cabe6%22/%3E %3C/svg%3E");
    }

}

// top links
#p-personal {
	background: fade( @dark-body, 50% );
	top: 0;
	right: 0;
	border-radius: 0 0 0 .3em;
	
	ul {
		padding: .15em 1em 0 .4em;
		list-style-image: none;
	}

}

#pt-skin-toggles .oo-ui-icon-advanced {
	background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg height='21' viewBox='0 0 21 21' width='21' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m8.85464918.37900488c-1.91149353 1.51069427-3.13816124 3.84973402-3.13816124 6.47527736 0 4.55564936 3.69308349 8.24873286 8.24873286 8.24873286 2.5815709 0 4.8861545-1.1859235 6.3986798-3.0426994-.8206378 4.7389755-4.9523867 8.343122-9.9259291 8.343122-5.56375572 0-10.07407088-4.5103151-10.07407088-10.0740709 0-5.02506013 3.67919933-9.19079725 8.49074856-9.95036192z' fill='%23ccd9f4' fill-rule='evenodd'/%3E%3C/svg%3E");
}

#pt-notifications-alert .mw-echo-notifications-badge.mw-echo-notifications-badge-all-read,
#pt-notifications-notice .mw-echo-notifications-badge.mw-echo-notifications-badge-all-read,
#pt-notifications-alert .mw-echo-notifications-badge,
#pt-notifications-notice .mw-echo-notifications-badge {
	opacity: 1;
}

// bell icon
#pt-notifications-alert .mw-echo-notifications-badge {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Ctitle%3E bell %3C/title%3E%3Cpath fill='%23ccd9f4' d='M16 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'/%3E%3C/svg%3E");
}

// inbox icon
#pt-notifications-notice .mw-echo-notifications-badge {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Ctitle%3E tray %3C/title%3E%3Cpath fill='%23ccd9f4' d='M17 1H3a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2zm0 12h-4l-1 2H8l-1-2H3V3h14z'/%3E%3C/svg%3E");
}

// person icon has a fill for each path - you need to change both
#pt-userpage a,
#pt-anonuserpage {
	background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2212%22 height=%2213.836%22 viewBox=%220 0 12 13.836%22%3E %3Cpath fill='%23ccd9f4' d=%22M1.938%2C6.656c-1.32%2C1.485-1.47%2C3.15-0.97%2C4.25c0.323%2C0.707%2C0.78%2C1.127%2C1.313%2C1.375 c0.496%2C0.229%2C1.074%2C0.273%2C1.658%2C0.282c0.023%2C0%2C0.04%2C0.03%2C0.062%2C0.03h4.187c0.61%2C0%2C1.225-0.125%2C1.75-0.405 c0.527-0.28%2C0.961-0.718%2C1.188-1.376c0.335-0.964%2C0.175-2.529-1.094-4.03C9.094%2C7.954%2C7.68%2C8.719%2C6.065%2C8.719 c-1.677%2C0-3.182-0.812-4.125-2.063H1.938z%22/%3E %3Cpath fill='%23ccd9f4' d=%22M6.063%2C0c-1.89%2C0-3.595%2C1.674-3.594%2C3.563C2.467%2C5.45%2C4.173%2C7.155%2C6.06%2C7.155 c1.89%2C0%2C3.564-1.705%2C3.563-3.593C9.625%2C1.673%2C7.95%2C0%2C6.063%2C0L6.063%2C0z%22/%3E %3C/svg%3E");
}

// "Not logged in" text for anons
#pt-anonuserpage {
	color: @dark-text;
}

// search bar
div#simpleSearch {
    background: @pickled-bluewood;

    #searchInput {
    	color: @dark-text;
    }

    #searchInput::placeholder {
    	color: @dark-text;
    	opacity: .6;
    }
    
    // magnifying glass
    #searchButton {
    	background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2212%22 height=%2213%22%3E %3Cg fill=%22none%22 stroke=%22%238cabe6%22 stroke-width=%222%22%3E %3Cpath d=%22M11.29 11.71l-4-4%22/%3E %3Ccircle cx=%225%22 cy=%225%22 r=%224%22/%3E %3C/g%3E %3C/svg%3E");
    }

}

.suggestions-results,
.suggestions-special {
	background-color: @pickled-bluewood;
	border-color: @waikawa-grey;
}

.suggestions-result,
.suggestions-special .special-query {
	color: @dark-text;
}

.suggestions-special .special-label {
	color: @portage;
}

// notify bubbles
.mw-notification {
	background-color: @pickled-bluewood;
	border: 1px solid @waikawa-grey;
	color: @dark-text;
}

// menu
#p-cactions .vector-menu-content {
    border: none;
    background-color: @cloud-burst;
    box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.1);
}

// footer
#footer ul {
	list-style: none none;
}

#footer ul li {
    color: @dark-text;
}

// Replacing footer icons. Since MW inserts img tags instead of divs in 36
// we need to do a work around where we set images to display none and add a
// pseudo element with the image to get high def images (and dark mode).
#footer-copyrightico img {
	display: none;
}

#footer-copyrightico a:before {
	background: url('/images/thumb/Creative_Commons_footer_dark.png/88px-Creative_Commons_footer_dark.png?e796d') no-repeat 0 0;
	background-size: 88px;
    content: "";
    width: 88px;
    height: 31px;
    display: inline-block;	
    @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
        background-image: url(/images/Creative_Commons_footer_dark.png?e796d);
    }
}

#footer-poweredbyico img {
    display: none;
}

#footer-poweredbyico a:before {
	background: url('https://oldschool.runescape.wiki/images/thumb/Weird_Gloop_footer_dark.png/88px-Weird_Gloop_footer_dark.png?e796d') no-repeat 0 0;
	background-size: 88px;
    content: "";
    width: 88px;
    height: 31px;
    display: inline-block;
    @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
        background-image: url('https://oldschool.runescape.wiki/images/Weird_Gloop_footer_dark.png?e796d');
    }
}

/* ========================
       mediawiki things
   ======================== */

// category bar
.catlinks {
    background: @pickled-bluewood;
    border: none;

    // dividing pipe between cats
    li {
        border-color: @waikawa-grey;
    }

}

// [edit] brackets
.client-js & .mw-content-ltr .mw-editsection-bracket:first-of-type,
.client-js & .mw-content-rtl .mw-editsection-bracket:not(:first-of-type),
.client-js & .mw-content-rtl .mw-editsection-bracket:first-of-type,
.client-js & .mw-content-ltr .mw-editsection-bracket:not(:first-of-type) {
    color: @dark-text;
}

// "redirected from" text
#contentSub,
#contentSub2 {
    color: #99aad0;
}

// log notices
div.mw-warning-with-logexcerpt,
#sp-contributions-footer {
    background-color: @dark-wikitable-background;
    border: none;
}

// anchor marker next to headings
.mw-headline:target {
	color: @lima;
}

// log notices
div.mw-warning-with-logexcerpt,
#sp-contributions-footer {
    background-color: @dark-wikitable-background;
    border: none;
}

#viewingold-warning,
#viewingnew-warning {
    background-color: @dark-wikitable-background;
    border: none;
    color: @dark-text;
}

// page previews
.mwe-popups .mwe-popups-container {
    background: @pickled-bluewood;

    // arrow pointing to link
    // seems to be a different class for each possible position and img combination

    &.flipped-x-y:before,
    &.flipped-y:before {
        border-top: none;
    }

    &.mwe-popups-no-image-tri:before {
    	border-bottom: none;
    }

    &.flipped-x-y:after,
    &.flipped-y:after {
        border-top-color: @pickled-bluewood;
    }

    &.mwe-popups-no-image-tri:after {
    	border-bottom-color: @pickled-bluewood;
    }

    // text section
    .mwe-popups-extract {
        color: @dark-text;
    }

    // fade for text overflow
    .mwe-popups-extract[dir='ltr']:after {
        background-image: linear-gradient(to right, rgba(49, 62, 89, 0), @pickled-bluewood 50%);
    }

}

// page histories
#pagehistory li {
	border: 1px solid @cloud-burst;

    &.selected {
        border: 1px solid @pickled-bluewood;
        background: @cloud-burst;
        color: @dark-text;
    }

}

// page deletions
// this is inline and i don't know what the mediawiki page is
#deletedtextmessage {
	background: @pickled-bluewood !important;
	color: @dark-text !important;
	padding: 1em;
	border-radius: 2px;
	margin-bottom: 1em;
}

// edit summaries
.autocomment {
	color: @gray-chateau;
}

//Blue border
fieldset {
    border-color: @waikawa-grey;
}

//Watch star
.vector-menu-tabs #ca-watch.icon a:before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2216%22 height=%2216%22%3E %3Cpath fill=%22transparent%22 stroke=%22%238cabe6%22 stroke-width=%22.99992%22 d=%22M8.103 1.146l2.175 4.408 4.864.707-3.52 3.431.831 4.845-4.351-2.287-4.351 2.287.831-4.845-3.52-3.431 4.864-.707z%22/%3E %3C/svg%3E");

	&:hover,
	&:focus {
		background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2216%22 height=%2216%22%3E %3Cpath fill=%22transparent%22 stroke=%22%23f7861b%22 stroke-width=%22.99992%22 d=%22M8.103 1.146l2.175 4.408 4.864.707-3.52 3.431.831 4.845-4.351-2.287-4.351 2.287.831-4.845-3.52-3.431 4.864-.707z%22/%3E %3C/svg%3E");
	}

}

.vector-menu-tabs #ca-unwatch.icon a:before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2216%22 height=%2216%22%3E %3Cpath fill=%22%238cabe6%22 stroke=%22%238cabe6%22 stroke-width=%22.99992%22 d=%22M8.103 1.146l2.175 4.408 4.864.707-3.52 3.431.831 4.845-4.351-2.287-4.351 2.287.831-4.845-3.52-3.431 4.864-.707z%22/%3E %3C/svg%3E");

	&:hover,
	&:focus {
		background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2216%22 height=%2216%22%3E %3Cpath fill=%22%238cabe6%22 stroke=%22%23f7861b%22 stroke-width=%22.99992%22 d=%22M8.103 1.146l2.175 4.408 4.864.707-3.52 3.431.831 4.845-4.351-2.287-4.351 2.287.831-4.845-3.52-3.431 4.864-.707z%22/%3E %3C/svg%3E");
	}

}

//Module Debug Console
.mw-scribunto-console-fieldset {
    background: @dark-wikitable-background;
    color: @dark-text;
}
.mw-scribunto-message {
    color: @bold-green;
    background: @dark-wikitable-background;
}

.mw-scribunto-input {
    color: @white;
}

#mw-scribunto-input {
	background: @dark-wikitable-header;
}

//Create an account page
#bodyContent .mw-number-text h3,
.mw-number-text {
    color: @dark-text;
}

//Dupe upload warning
.mw-destfile-warning {
    border: 4px solid @bold-red;
    color: @dark-text;
    background-color: @dark-wikitable-background;
}

//MU upload
ul.fileupload-results li.ful-success {
    background-color: @bold-green;
    border-color: @dark-interface-border;
}

//Page history sticky compare
#mw-history-compare > div:first-of-type {
	background-color: @dark-page;
	border: 1px solid @dark-interface-border;
}


// redirect arrow
.mw-content-ltr .redirectText li:first-child {
	background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2247%22 height=%2220%22 viewBox=%220 0 47 20%22%3E %3Cpath fill=%22none%22 stroke=%22%23cbd9f4%22 stroke-width=%222%22 stroke-miterlimit=%2210%22 d=%22M14.98 2.5V11c0 1.04 1.02 1.98 2.02 1.98h6l3 .02%22/%3E %3Cpath fill=%22%23cbd9f4%22 d=%22M23.48 9.5l.02 7L30 13z%22/%3E %3C/svg%3E");
}

// MediaViewer extension
.mw-mmv-overlay {
	background-color: @black-pearl;
}

.mw-mmv-post-image.mw-mmv-untruncated,
.jq-fullscreened .mw-mmv-post-image {
	box-shadow: 0 -4px 10px rgba(0,0,0,0.3);
}

.mw-mmv-image-links li {
    color: inherit;
}

.mw-mmv-post-image {
	color: @dark-text;
	background-color: @cloud-burst;
}

.mw-mmv-image-metadata {
	color: @dark-text;
	background-color: @pickled-bluewood;
	border-top: none;
	transition: .1s ease; // for padding rule below
}

.mw-mmv-main.metadata-panel-is-open .mw-mmv-image-metadata {
	padding-top: 1em;
}

.mw-mmv-dialog,
.mw-mmv-dialog .mw-mmv-dialog-down-arrow,
.mw-mmv-options-dialog .mw-mmv-dialog-down-arrow {
	background-color: @pickled-bluewood;
	box-shadow: none;
}

.mw-mmv-options-text-header,
.mw-mmv-options-text-body {
	color: @dark-text;
}

.mw-mmv-filepage-buttons .mw-mmv-view-config,
.mw-mmv-filepage-buttons .mw-mmv-view-expanded {
	background-color: @pickled-bluewood;
	border-color: @waikawa-grey;
}

.mw-mmv-filepage-buttons .mw-mmv-view-config.mw-ui-icon:before,
.mw-mmv-filepage-buttons .mw-mmv-view-expanded.mw-ui-icon:before {
	filter: invert(1);
}

.mw-ui-button.mw-ui-quiet {
	color: @portage;
}

.mw-mmv-dialog .mw-mmv-dialog-warning {
	background-color: @cloud-burst;
	color: @dark-text;
}

.mw-mmv-shareembed-explanation {
	color: @dark-text;
}

// MediaWiki:Anoneditwarning
// MediaWiki:Templatedata-exists-on-related-page
.warningbox {
	color: @bridesmaid;
	background: @mocaccino;
	border: none;
	
	a {
		color: @portage;
	}
	
	// for TemplateData warning
	&.tdg-editscreen-error-msg {
		color: @bridesmaid;
	}

}

//Special:Search
.wgl-darkmode #searchText .oo-ui-icon-search,
.wgl-darkmode #searchText .oo-ui-indicator-clear {
	filter: invert(1);
}

#mw-search-top-table .results-info {
	color: inherit;
	opacity: 0.6;
}

//Cancel button fix
span.oo-ui-iconElement-icon.oo-ui-icon-cancel {
    filter: invert(1);
}

//Special:ProtectedPages
.mw-protectedpages-unknown {
    color: @dark-text;
}

//Soft redirect page arrow
.soft-redirect > div:nth-child(1) > img:nth-child(1) {
	filter: invert(1);
}

.mw-abusefilter-history-changed {
    background: transparent;
}

//Revision slider
.mw-revslider-container {
	border-color: @waikawa-grey
}

.mw-revslider-slider-wrapper {
	border-top-color: @waikawa-grey
}


// temp (profiler)
> pre {
	color: @dark-text;
}