MediaWiki:Vector-darkmode.less/interface.less

From RuneRealm Wiki
< MediaWiki:Vector-darkmode.less

This is the current revision of this page, as edited by Alex (talk | contribs) at 17:16, 17 October 2024. The present address (URL) is a permanent link to this version.

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to navigation Jump to search

/* ============================== 

    skin stuff outside mw-body
  ============================== */

// sidebar headers .vector-menu-portal .vector-menu-heading { 

   color: @dark-text;

}

// tabs .vector-menu-tabs { ul li { background: @cloud-burst; }

// selected tab .selected { background: @dark-page; a, a:visited { color: @dark-text; } } }

// tab hover .vector-menu-tabs ul li:not(.selected):hover, // "More" dropdown

  1. p-cactions:hover #p-cactions-label {
   background: lighten( @cloud-burst, 4% );

}

// "More" dropdown .vector-menu-dropdown { .vector-menu-heading { background: @cloud-burst;

span { color: @dark-links; }


// 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"); } } 

   // dropdown box
   .vector-menu-content {

border: none; background-color: @cloud-burst; }

.selected { a, a:visited { color: @dark-text; } }

}

// top links

  1. p-personal {

background: fade( @dark-body, 50% ); top: 0; right: 0; border-radius: 0 0 0 .3em;

ul { list-style-image: none; }

}

  1. 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"); }

  1. pt-notifications-alert,
  2. pt-notifications-notice {

.mw-echo-notifications-badge.mw-echo-notifications-badge-all-read, .mw-echo-notifications-badge { opacity: 1; } }

// bell icon

  1. 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

  1. 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 .vector-user-menu-legacy { #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

  1. pt-anonuserpage {

color: @dark-text; }

// search bar .vector-search-box-inner { background: @pickled-bluewood; }

.vector-search-box-input { color: @dark-text;

// border comes from /elements.less border: none;

&::placeholder { color: @dark-text; opacity: .6; } }

// magnifying glass .searchButton { // border comes from /elements.less border: none !important;

&[name='go'] { 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"); } }

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

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

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

&-result-current { background-color: #2a4b8d; // default color: @dark-text; & .special-label, & .special-query { color: @dark-text; } } }

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

// footer

  1. footer ul {

list-style: none none; 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).

  1. footer-copyrightico img {

display: none; }

  1. 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);
   }

}

  1. footer-poweredbyico img {
   display: none;

}

  1. footer-poweredbyico a:before {

background: url(/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(/images/Weird_Gloop_footer_dark.png?e796d);
   }

}

/* ======================== 

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

// category bar .catlinks { 

   background: @pickled-bluewood;
   border-color: transparent;

   // 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;

}

// when VE is turned on .mw-editsection-divider { color: @dark-text; }

// "redirected from" text

  1. contentSub,
  2. contentSub2 {
   color: #99aad0;

}

// contribs footer

  1. sp-contributions-footer {
   background-color: @dark-wikitable-background;
   border: none;

}

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

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

.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%); }

.mwe-popups-settings-icon:hover { background-color: @ooui-normal--hover; } }

// Anon preferences popup .mwe-popups-overlay { background-color: var(--ooui-window-background); }

  1. mwe-popups-settings {

background: @ooui-interface; header { border-color: @ooui-interface-border; }

main { p { color: @ooui-text; } // text beside radio button form label > span { color: @ooui-text; } } }

// page histories

  1. pagehistory li.selected {

border-color: @pickled-bluewood; background: @cloud-burst; color: @dark-text; }

//Page history sticky compare

  1. mw-history-compare > div:first-of-type {

background-color: @dark-page; border-color: @dark-interface-border; }

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

//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"); }

}

//Create an account page

  1. 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;

}

// 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; }

// transparency grid .mw-mmv-image img { &.gif, &.svg, &.png, &.tiff, &.tif { background-image: url('/images/rss/Dark_mode_checkered_transparency.png'); } }

.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; }

.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; }

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

// Enabling box .mw-mmv-disable-confirmation, // Disabling box .mw-mmv-enable-confirmation& { .mw-mmv-options-dialog-header { color: @dark-text; } }

// Disabled/enabled box .mw-mmv-options-dialog { .mw-mmv-disable-confirmation .mw-mmv-options-text-header, .mw-mmv-enable-confirmation .mw-mmv-options-dialog-header, .mw-mmv-enable-confirmation .mw-mmv-options-text-header { color: @dark-text; } }

.mw-mmv-options-enable-alert { background-color: @pickled-bluewood; color: @dark-text; }

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

.mw-mmv-download-pane { .mw-mmv-download-attribution { background-color: @ooui-normal; color: @dark-text;

&:hover { background-color: @ooui-normal--hover; color: @dark-text; } }

.mw-mmv-download-attribution-cta-invite { color: @dark-text; }

.mw-mmv-download-area .mw-mmv-download-preview-link { color: @dark-links; } }

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

//Warning box .mw-message-box-warning, .warningbox, .mw-message-box-error, .errorbox { color: @bridesmaid; background-color: #95271b; border-color: transparent; }

  1. mw-search-top-table .results-info {

color: inherit; opacity: 0.6; }

//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; }

//general mw ui mimicking ooui //e.g. Special:Browse/page history/MediaViewer .mw-ui { &-button { background-color: @ooui-normal; border-color: @ooui-normal-border; color: @ooui-text; &:not(:disabled) { &:hover { background-color: @ooui-normal--hover; border-color: @ooui-normal-border--hover; color: lighten( @ooui-text, 4% ); } &:focus { background-color: @ooui-normal--hover; color: @ooui-text; } // there's an override for it &:visited { color: @ooui-text; } } &:disabled { background-color: @ooui-disabled; border-color: @ooui-disabled; } }

&-progressive { // progressive colours get overriden by above &:not(:disabled):hover { background-color: @ooui-progressive--hover; border-color: @ooui-progressive--hover; } &:disabled { background-color: @ooui-disabled; border-color: @ooui-disabled; } }

&-input { background-color: @ooui-input; border-color: @ooui-input-border; &:hover { border-color: @ooui-input-border--hover; } }

&-quiet { background-color: transparent; border-color: transparent; &:hover { border-color: transparent; } &:focus { color: @ooui-text; } } }

.mw-ui-icon:before { filter: invert(1); }

// BatchUpload only button? span.fileinput-button { background-color: @ooui-normal; border-color: @ooui-normal-border; 

   color: @ooui-text;

}

Retrieved from "https://wiki2.runerealm.org/index.php?title=MediaWiki:Vector-darkmode.less/interface.less&oldid=39120"