MediaWiki:Vector-darkmode.less/interface.less
Jump to navigation
Jump to search
//
/* ============================== skin stuff outside mw-body ============================== */ // sidebar headers #mw-panel .portal h3 { color: @dark-text; } // tabs div.vectorTabs, div.vectorTabs ul, div.vectorTabs ul li, div#mw-head div.vectorMenu h3 { background: @cloud-burst; } // selected tab div.vectorTabs li.selected { background: @dark-page; } div.vectorTabs li.selected a, div.vectorTabs li.selected a:visited { color: @dark-text; } // tab links div.vectorTabs li { a, a:visited, a:active { color: @dark-links; } // redlinks &.new a, &.new a:visited, &.new a:active { color: lighten( @flamingo, 10% ); } } // tab dropdown links div.vectorMenu li { a, a:visited, a:active { color: @dark-links; } } #p-cactions:hover #p-cactions-label, // "More" dropdown div.vectorTabs ul li:not(.selected):hover, div#mw-head div.vectorMenu h3:hover { background: lighten( @cloud-burst, 4% ); } // Watchlist stars // don't use url(filepath://) because each http request causes a slight delay .vectorTabs #ca-watch.icon a { background-image: linear-gradient(transparent,transparent),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: linear-gradient(transparent,transparent),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"); } } .vectorTabs #ca-unwatch.icon a { background-image: linear-gradient(transparent,transparent),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: linear-gradient(transparent,transparent),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"); } } // "More" dropdown div.vectorMenu h3 span { color: @dark-links; // downward arrow &:after { background-image: linear-gradient(transparent, transparent), 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; } } // moon icon #pt-skin-toggles .oo-ui-icon-advanced { background-image: linear-gradient(transparent,transparent),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='%23cbd9f4' 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:before, #pt-notifications-notice .mw-echo-notifications-badge:before { opacity: 1; } // bell icon #pt-notifications-alert .mw-echo-notifications-badge:before { background-image: linear-gradient(transparent,transparent),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='%23cbd9f4' 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:before { background-image: linear-gradient(transparent,transparent),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='%23cbd9f4' 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, #pt-anonuserpage { background-image: linear-gradient(transparent,transparent),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='%23cbd9f4' 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='%23cbd9f4' 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: linear-gradient(transparent, transparent), 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 div.vectorMenu div.menu { background-color: @pickled-bluewood; border: 1px solid @waikawa-grey; } // footer #footer ul li { color: @dark-text; } // replacing footer icons #footer-copyrightico img { display: block; -moz-box-sizing: border-box; box-sizing: border-box; background: url('filepath://Creative_Commons_footer_dark.png?width=88') no-repeat; width: 88px; height: 31px; padding-left: 88px; @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { background-image: url('filepath://Creative_Commons_footer_dark.png'); background-size: 88px 31px; } } #footer-poweredbyico img { display: block; -moz-box-sizing: border-box; box-sizing: border-box; background: url('filepath://Weird_Gloop_footer_dark.png?width=88') no-repeat; width: 88px; height: 31px; padding-left: 88px; @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { background-image: url('filepath://Weird_Gloop_footer_dark.png'); background-size: 88px 31px; } } /* ======================== 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-ltr .mw-editsection-bracket:not(:first-of-type) { color: @dark-text; } // "redirected from" text #contentSub, #contentSub2 { color: #99aad0; } // MediaWiki:Anoneditwarning // MediaWiki:Templatedata-exists-on-related-page .warningbox { color: @bridesmaid; background: @mocaccino; border: none; a { color: @apricot-peach; } // for TemplateData warning &.tdg-editscreen-error-msg { color: @bridesmaid; } } // watchlist marker in page history .updatedmarker { color: @frost; background-color: @la-palma; } // 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 { 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-color: transparent; &.selected { border: 1px solid @pickled-bluewood; background: @cloud-burst; color: @dark-text; } } #mw-history-compare > div:first-of-type { background-color: @dark-page; border-color: @pickled-bluewood; } // 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: @dark-text; opacity: .8; } //advanced search #mw-search-top-table { input { background-color: @pickled-bluewood; border-color: @cloud-burst; color: @dark-text; } } .mw-widget-searchWidget-menu { background-color: @pickled-bluewood; border-color: @cloud-burst; } // redirect arrow .mw-content-ltr .redirectText li:first-child { background-image: linear-gradient(transparent,transparent),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-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-image-links li { color: inherit; &::before { filter: brightness(1.5); } }