Difference between revisions of "User:Dt192/vector.css"

From Mudlet
Jump to navigation Jump to search
 
(14 intermediate revisions by the same user not shown)
Line 1: Line 1:
−
/* Quick test of custom css */
+
/*** Passable custom css theme. Lots of edge cases to catch I'm sure. ***/
  
 
@import url("https://fonts.googleapis.com/css?family=Roboto+Slab&display=swap");
 
@import url("https://fonts.googleapis.com/css?family=Roboto+Slab&display=swap");
Line 6: Line 6:
  
 
:root {
 
:root {
−
   /* base theme (grey) */
+
   /* Base Theme (grey) */
−
   --canvas-bg-color: #22272e;
+
   --canvas-bg-color: rgba(34, 39, 46);           /* main theme color */
−
   --accent-color: #e0c799cf;
+
   --accent-color: rgba(224, 199, 153, 0.812);    /* color of links etc */
−
   --page-width: 1200px;
+
  --text-color: rgba(255, 255, 255, 0.733);
−
   --corner-rounding: 1em;
+
  --panel-bg-color: rgba(255, 255, 255, 0.063);
 +
   --page-width: 1200px;                           /* constrains page width, set as `100%` to undo */
 +
  --page-margins: unset;                          /* set as `auto` to center page */
 +
   --corner-rounding: 1em;                         /* try `5px`, `10px` or `0` for pointed corners */
 +
 
 
   --font-name: "Exo 2";
 
   --font-name: "Exo 2";
 
   --font-header-name: "Roboto Slab";
 
   --font-header-name: "Roboto Slab";
 
   --font-name-codeblock: "Source Code Pro";
 
   --font-name-codeblock: "Source Code Pro";
  
−
   --text-color: #fffb;
+
   --page-bg-color: var(--panel-bg-color);
−
  --page-bg-color: #ffffff07;
+
   --page-border-color: var(--panel-bg-color);
−
   --page-border-color: #ffffff0b;
+
   --page-panels-bg-color: var(--panel-bg-color);
−
   --page-panels-bg-color: #ffffff07;
+
   --page-panels-border-color: var(--panel-bg-color);
−
   --page-panels-border-color: #ffffff1c;
+
   --page-inner-panels-bg-color: var(--panel-bg-color);
−
   --page-inner-panels-bg-color: #ffffff0a;
+
   --search-box-bg-color: rgba(0, 0, 0, 0.333);
−
   --search-box-bg-color: #0005;
+
   --code-block-bg-color: rgba(0, 0, 0, 0.278);
−
   --code-block-bg-color: #00000047;
+
  --wikitable-bg: rgba(255, 255, 255, 0.016);
 +
  --wikitable-cell-bg: rgba(255, 255, 255, 0.024);
 +
  --header-underline: rgba(255, 255, 255, 0.161);
 +
  --diff-add-hl: rgba(24, 141, 23, 0.439);
 +
  --diff-remove-hl: rgba(207, 33, 33, 0.439);
 +
 
 +
  --syntax-hl-string: rgba(153, 199, 148);
 +
  --syntax-hl-number: rgba(249, 174, 87);
 +
  --syntax-hl-comment: rgba(255, 255, 255, 0.271);
 +
  --syntax-hl-core-func: rgba(102, 153, 204);
 +
  --syntax-hl-core-keyword: rgba(198, 149, 198);
 +
  --syntax-hl-core-not: rgba(249, 123, 87);
 +
  --syntax-hl-core-boolean: rgba(236, 94, 102);
 +
  --syntax-hl-core-local: rgba(236, 94, 102);
 +
  --syntax-hl-core-punctuation: rgba(255, 255, 255, 0.271);
 +
  --syntax-hl-core-operator: rgba(249, 123, 87);
 +
  --syntax-hl-escaped-char-in-string: rgba(95, 184, 255);
 +
 
 +
 
 +
  /*** Sample theme overrides ***/
 +
 
 +
  /* Red Theme
 +
    --canvas-bg-color: rgba(91, 32, 32);
 +
  */
  
 
   /* Blue Theme
 
   /* Blue Theme
−
  --canvas-bg-color: #072b5d;
+
    --canvas-bg-color: rgba(7, 43, 93);
−
  --accent-color: #98dc5ac2;
+
    --accent-color: rgba(152, 220, 90, 0.761);
 
   */
 
   */
  
−
   /* Red Theme  
+
   /* Light Theme (syntax highlighting would need tweaking)
−
  --canvas-bg-color: #5b2020;
+
    --canvas-bg-color: rgba(199,199,199);
−
  */
+
    --text-color: rgba(0, 0, 0, 0.733);
 +
    --accent-color: rgba(126, 0, 197, 0.812);
 +
    --panel-bg-color: rgba(255, 255, 255, 0.3);
 +
    --wikitable-bg: rgba(255, 255, 255, 0.1);
 +
    --wikitable-cell-bg: rgba(255, 255, 255, 0.2);
 +
    --code-block-bg-color: rgba(255, 255, 255, 0.5);
 +
    --search-box-bg-color: rgba(255, 255, 255, 0.333);
 +
*/
 +
}
 +
 
  
 +
/* This rule puts the table of contents to the
 +
  right of the page. Remove this if you are not
 +
  constraining page width or just prefer it inside */
 +
#toc {
 +
    position: absolute;
 +
    left: 100%;
 +
    margin-left: 1em;
 +
    white-space: nowrap;
 +
    top: 6em;
 
}
 
}
 +
  
 
@media screen {
 
@media screen {
Line 49: Line 95:
 
     max-width: var(--page-width);
 
     max-width: var(--page-width);
 
     position: relative;
 
     position: relative;
−
     margin: auto;
+
     margin: var(--page-margins);
 
     background-color: var(--canvas-bg-color);
 
     background-color: var(--canvas-bg-color);
 
   }
 
   }
 
   a {
 
   a {
 
     color: var(--accent-color) !important;
 
     color: var(--accent-color) !important;
 +
  }
 +
  h1 span, h2 span, h3 span, h4 span, h5 span, h6 span {
 +
    font-family: var(--font-header-name) !important;
 +
  }
 +
  h1, h2 {
 +
    border-bottom: 1px dotted var(--header-underline);
 
   }
 
   }
 
   h1, h2, h3, h4, h5, h6 {
 
   h1, h2, h3, h4, h5, h6 {
−
     font-family: var(--font-header-name) !important;
+
     overflow: unset;
 +
    margin-left: -1rem;
 +
  }
 +
  .mw-body-content {
 +
    position:unset;
 
   }
 
   }
 
   .mw-body,
 
   .mw-body,
Line 70: Line 126:
 
     margin-top: 0;
 
     margin-top: 0;
 
     border-radius: 0 0 var(--corner-rounding) var(--corner-rounding);
 
     border-radius: 0 0 var(--corner-rounding) var(--corner-rounding);
 +
    padding-left: 2.5rem;
 +
  }
 +
  #pt-darkmode-link {
 +
    display:none;
 
   }
 
   }
 
   #mp-topbanner,
 
   #mp-topbanner,
 +
  .light-grey-panel,
 
   .mw-pt-languages,
 
   .mw-pt-languages,
 
   .mw-highlight pre,
 
   .mw-highlight pre,
 +
  .mw-changeslist-legend,
 
   .warningbox,
 
   .warningbox,
 +
  .thumbinner,
 +
  .oo-ui-menuSelectWidget,
 +
  .oo-ui-popupWidget-popup,
 +
  .oo-ui-buttonElement-button,
 +
  .oo-ui-buttonSelectWidget .oo-ui-buttonOptionWidget:last-child .oo-ui-buttonElement-button,
 +
  .oo-ui-buttonSelectWidget .oo-ui-buttonOptionWidget:first-child .oo-ui-buttonElement-button,
 +
  .oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button,
 +
  .oo-ui-buttonGroupWidget .oo-ui-buttonElement-framed:first-child .oo-ui-buttonElement-button,
 +
  .oo-ui-buttonGroupWidget .oo-ui-buttonElement-framed:last-child .oo-ui-buttonElement-button,
 
   #catlinks,
 
   #catlinks,
−
   code {
+
   code,
 +
  pre,
 +
  #pagehistory li.selected,
 +
  .mw-search-profile-tabs {
 
     background: var(--page-panels-bg-color) !important;
 
     background: var(--page-panels-bg-color) !important;
 
     border-color: var(--page-panels-border-color) !important;
 
     border-color: var(--page-panels-border-color) !important;
 +
    border-radius: var(--corner-rounding);
 +
  }
 +
  .oo-ui-popupWidget-popup,
 +
  .oo-ui-menuSelectWidget,
 +
  .mw-rcfilters-ui-filterTagMultiselectWidget,
 +
  .mw-rcfilters-ui-filterTagMultiselectWidget *,
 +
  .oo-ui-defaultOverlay div {
 +
    background-color: var(--canvas-bg-color) !important;
 +
    border: unset !important;
 +
  }
 +
  .oo-ui-textInputWidget .oo-ui-inputWidget-input,
 +
  .mw-widget-dateInputWidget-handle,
 +
  .oo-ui-checkboxInputWidget [type='checkbox'] + span,
 +
  .oo-ui-dropdownWidget.oo-ui-widget-enabled .oo-ui-dropdownWidget-handle,
 +
  .vector-menu-dropdown .vector-menu-content-list {
 +
    background-color: var(--canvas-bg-color);
 +
    border-color: var(--page-panels-border-color);
 +
  }
 +
  .oo-ui-dropdownInputWidget.oo-ui-widget-enabled,
 +
  .oo-ui-dropdownWidget.oo-ui-widget-enabled.oo-ui-dropdownWidget-open .oo-ui-dropdownWidget-handle,
 +
  .oo-ui-dropdownWidget.oo-ui-widget-enabled .oo-ui-dropdownWidget-handle:hover {
 +
    background: unset !important;
 +
  }
 +
  .oo-ui-defaultOverlay .oo-ui-optionWidget-highlighted {
 +
    background-color: var(--accent-color) !important;
 +
  }
 +
  li.gallerybox div.thumb {
 +
    border-color: var(--page-border-color);
 +
    background-color: var(--page-bg-color);
 +
  }
 +
  .thumbimage {
 +
    background-color: unset;
 +
    border:unset !important;
 
     border-radius: var(--corner-rounding);
 
     border-radius: var(--corner-rounding);
 
   }
 
   }
Line 99: Line 206:
 
   .mw-pt-translate-header {
 
   .mw-pt-translate-header {
 
     border-bottom: unset;
 
     border-bottom: unset;
 +
  }
 +
  .portal h3, .vector-menu-portal h3 {
 +
    background: unset;
 
   }
 
   }
 
   .toc,
 
   .toc,
Line 119: Line 229:
 
     background-image: linear-gradient(to top, #0002, transparent);
 
     background-image: linear-gradient(to top, #0002, transparent);
 
   }
 
   }
−
   #searchInput {
+
   #searchInput, .mw-input input, .mw-input select {
 
     background-color: var(--search-box-bg-color);
 
     background-color: var(--search-box-bg-color);
 
     border: unset;
 
     border: unset;
 
     border-radius: var(--corner-rounding);
 
     border-radius: var(--corner-rounding);
 +
    padding: 0.4em;
 
   }
 
   }
 
   input::placeholder {
 
   input::placeholder {
Line 131: Line 242:
 
     color: #000e !important;
 
     color: #000e !important;
 
   }
 
   }
−
   .wikitable {
+
   .wikitable tr, #built-in-lua-variables tr, .alternating-table tr {
 
     background: unset !important;
 
     background: unset !important;
 +
  }
 +
  .wikitable,
 +
  #built-in-lua-variables,
 +
  .alternating-table {
 +
    background: var(--wikitable-bg) !important;
 
     border-spacing: 0.3em;
 
     border-spacing: 0.3em;
 
     border-collapse: separate;
 
     border-collapse: separate;
−
     border: unset;
+
     border: 1px solid var(--page-panels-border-color) !important;
 +
    border-radius: var(--corner-rounding);
 
   }
 
   }
−
   .wikitable th,
+
   .wikitable th, #built-in-lua-variables th, .alternating-table th,
−
   .wikitable td {
+
   .wikitable td, #built-in-lua-variables td, .alternating-table td {
 
     border: unset !important;
 
     border: unset !important;
−
     background: #ffffff0d !important;
+
     background: var(--wikitable-cell-bg) !important;
 
     padding: 0.3em 1em;
 
     padding: 0.3em 1em;
 
   }
 
   }
−
   .wikitable th:first-child {
+
   .wikitable tr:first-child th:first-child,
−
     border-radius: 1em 0 0 0 !important;
+
  #built-in-lua-variables tr:first-child th:first-child,
 +
  .alternating-table tr:first-child th:first-child {
 +
     border-top-left-radius: var(--corner-rounding) !important;
 
   }
 
   }
−
   .wikitable th:last-child {
+
   .wikitable tr:first-child th:last-child,
−
     border-radius: 0 1em 0 0 !important;
+
  #built-in-lua-variables tr:first-child th:last-child,
 +
  .alternating-table tr:first-child th:last-child {
 +
     border-top-right-radius: var(--corner-rounding) !important;
 
   }
 
   }
−
   .wikitable tr:last-child td:last-child {
+
   .wikitable tr:last-child td:last-child,
−
     border-radius: 0 0 1em 0 !important;
+
  #built-in-lua-variables tr:last-child td:last-child,
 +
  .alternating-table tr:last-child td:last-child {
 +
     border-bottom-right-radius: var(--corner-rounding) !important;
 
   }
 
   }
−
   .wikitable tr:last-child td:first-child {
+
   .wikitable tr:last-child td:first-child,
−
     border-radius: 0 0 0 1em !important;
+
  #built-in-lua-variables tr:last-child td:first-child,
 +
  .alternating-table tr:last-child td:first-child {
 +
     border-bottom-left-radius: var(--corner-rounding) !important;
 
   }
 
   }
 
   code {
 
   code {
 
     padding: 0.1em 0.5em;
 
     padding: 0.1em 0.5em;
 
   }
 
   }
 +
  .mw-ui-button {
 +
    background-color: var(--accent-color);
 +
  }
 +
  .diff tr div {
 +
    font-family: var(--font-name-codeblock) !important;
 +
  }
 +
  ins.diffchange, del.diffchange {
 +
    font-weight: normal !important;
 +
  }
 +
  .diff-context {
 +
    background: var(--page-inner-panels-bg-color);
 +
    border:unset;
 +
  }
 +
  .diff-addedline, .diff-deletedline {
 +
    border-color: var(--page-inner-panels-bg-color) !important;
 +
  }
 +
  .diff-context div {
 +
    color: #fff3 !important;
 +
  }
 +
  .diff-addedline .diffchange {
 +
    background: var(--diff-add-hl);
 +
  }
 +
  .diff-deletedline .diffchange {
 +
    background: var(--diff-remove-hl);
 +
  }
 +
 
   /* syntax highlighting */
 
   /* syntax highlighting */
 
   .mw-highlight-lang-lua pre,
 
   .mw-highlight-lang-lua pre,
 
   code {
 
   code {
 
     background: var(--code-block-bg-color) !important;
 
     background: var(--code-block-bg-color) !important;
−
    /* padding: 0.5em 0.75em; */
 
 
   }
 
   }
−
   .mw-highlight-lang-lua pre *,
+
   pre,
 +
  pre *,
 
   code {
 
   code {
 
     font-family: var(--font-name-codeblock) !important;
 
     font-family: var(--font-name-codeblock) !important;
Line 172: Line 323:
 
   .mw-highlight .s1,
 
   .mw-highlight .s1,
 
   .mw-highlight .s2 {
 
   .mw-highlight .s2 {
−
    /* strings #5fb8ff */
+
     color: var(--syntax-hl-string) !important;
−
     color: #99c794 !important;
 
 
   }
 
   }
 
   .mw-highlight .se {
 
   .mw-highlight .se {
−
     color: #5fb8ff !important;
+
     color: var(--syntax-hl-escaped-char-in-string) !important;
 
   }
 
   }
 
   .mw-highlight .c1,
 
   .mw-highlight .c1,
 
   .mw-highlight .cm {
 
   .mw-highlight .cm {
−
    /* comment */
+
     color: var(--syntax-hl-comment) !important;
−
     color: #ffffff45 !important;
 
 
   }
 
   }
 
   .mw-highlight .nb {
 
   .mw-highlight .nb {
−
    /* built in functions #afe1ff */
+
     color: var(--syntax-hl-core-func) !important;
−
     color: #6699cc !important;
 
 
   }
 
   }
 
   .mw-highlight .kr {
 
   .mw-highlight .kr {
−
    /* keywords #ea4a5ade*/
+
     color: var(--syntax-hl-core-keyword) !important;
−
     color: #c695c6 !important;
 
 
   }
 
   }
 
   .mw-highlight .ow {
 
   .mw-highlight .ow {
−
    /* not */
+
     color: var(--syntax-hl-core-not) !important;
−
     color: #f97b57 !important;
 
 
   }
 
   }
 
   .mw-highlight .kd {
 
   .mw-highlight .kd {
−
    /* seems to only be the word local #94A843*/
+
     color: var(--syntax-hl-core-local) !important;
−
     color: #ec5e66 !important;
 
 
   }
 
   }
 
   .mw-highlight .kc {
 
   .mw-highlight .kc {
−
    /* bools #94A843 */
+
     color: var(--syntax-hl-core-boolean) !important;
−
     color: #ec5e66 !important;
 
 
   }
 
   }
 
   .mw-highlight .mf,
 
   .mw-highlight .mf,
 
   .mw-highlight .mi {
 
   .mw-highlight .mi {
−
    /* numbers #b392f0 */
+
     color: var(--syntax-hl-number) !important;
−
     color: #f9ae57 !important;
 
 
   }
 
   }
 
   .mw-highlight .p {
 
   .mw-highlight .p {
−
    /* commas, braces etc */
+
     color: var(--syntax-hl-core-punctuation) !important;
−
     color: #ffffff45 !important;
 
 
   }
 
   }
 
   .mw-highlight .o {
 
   .mw-highlight .o {
−
    /* operators */
+
     color: var(--syntax-hl-core-operator) !important;
−
     color: #f97b57 !important;
 
 
   }
 
   }
 
}
 
}

Latest revision as of 08:37, 23 April 2024

/*** Passable custom css theme. Lots of edge cases to catch I'm sure. ***/

@import url("https://fonts.googleapis.com/css?family=Roboto+Slab&display=swap");
@import url(https://fonts.googleapis.com/css?family=Exo+2&display=swap);
@import url(https://fonts.googleapis.com/css?family=Source+Code+Pro&display=swap);

:root {
  /* Base Theme (grey) */
  --canvas-bg-color: rgba(34, 39, 46);            /* main theme color */
  --accent-color: rgba(224, 199, 153, 0.812);     /* color of links etc */
  --text-color: rgba(255, 255, 255, 0.733);
  --panel-bg-color: rgba(255, 255, 255, 0.063);
  --page-width: 1200px;                           /* constrains page width, set as `100%` to undo */
  --page-margins: unset;                          /* set as `auto` to center page */
  --corner-rounding: 1em;                         /* try `5px`, `10px` or `0` for pointed corners */

  --font-name: "Exo 2";
  --font-header-name: "Roboto Slab";
  --font-name-codeblock: "Source Code Pro";

  --page-bg-color: var(--panel-bg-color);
  --page-border-color: var(--panel-bg-color);
  --page-panels-bg-color: var(--panel-bg-color);
  --page-panels-border-color: var(--panel-bg-color);
  --page-inner-panels-bg-color: var(--panel-bg-color);
  --search-box-bg-color: rgba(0, 0, 0, 0.333);
  --code-block-bg-color: rgba(0, 0, 0, 0.278);
  --wikitable-bg: rgba(255, 255, 255, 0.016);
  --wikitable-cell-bg: rgba(255, 255, 255, 0.024);
  --header-underline: rgba(255, 255, 255, 0.161);
  --diff-add-hl: rgba(24, 141, 23, 0.439);
  --diff-remove-hl: rgba(207, 33, 33, 0.439);

  --syntax-hl-string: rgba(153, 199, 148);
  --syntax-hl-number: rgba(249, 174, 87);
  --syntax-hl-comment: rgba(255, 255, 255, 0.271);
  --syntax-hl-core-func: rgba(102, 153, 204);
  --syntax-hl-core-keyword: rgba(198, 149, 198);
  --syntax-hl-core-not: rgba(249, 123, 87);
  --syntax-hl-core-boolean: rgba(236, 94, 102);
  --syntax-hl-core-local: rgba(236, 94, 102);
  --syntax-hl-core-punctuation: rgba(255, 255, 255, 0.271);
  --syntax-hl-core-operator: rgba(249, 123, 87);
  --syntax-hl-escaped-char-in-string: rgba(95, 184, 255);


  /*** Sample theme overrides ***/

  /* Red Theme 
    --canvas-bg-color: rgba(91, 32, 32);
  */

  /* Blue Theme
    --canvas-bg-color: rgba(7, 43, 93);
    --accent-color: rgba(152, 220, 90, 0.761);
  */

  /* Light Theme (syntax highlighting would need tweaking)
    --canvas-bg-color: rgba(199,199,199);
    --text-color: rgba(0, 0, 0, 0.733);
    --accent-color: rgba(126, 0, 197, 0.812);
    --panel-bg-color: rgba(255, 255, 255, 0.3);
    --wikitable-bg: rgba(255, 255, 255, 0.1);
    --wikitable-cell-bg: rgba(255, 255, 255, 0.2);
    --code-block-bg-color: rgba(255, 255, 255, 0.5);
    --search-box-bg-color: rgba(255, 255, 255, 0.333);
 */
}


/* This rule puts the table of contents to the
  right of the page. Remove this if you are not
  constraining page width or just prefer it inside */
#toc {
    position: absolute;
    left: 100%;
    margin-left: 1em;
    white-space: nowrap;
    top: 6em;
}


@media screen {
  html {
    font-size: 115%;
  }
  .vector-menu-portal {
    font-size: 110%;
  }
  * {
    color: var(--text-color) !important;
    font-family: var(--font-name) !important;
  }
  body {
    max-width: var(--page-width);
    position: relative;
    margin: var(--page-margins);
    background-color: var(--canvas-bg-color);
  }
  a {
    color: var(--accent-color) !important;
  }
  h1 span, h2 span, h3 span, h4 span, h5 span, h6 span {
    font-family: var(--font-header-name) !important;
  }
  h1, h2 {
    border-bottom: 1px dotted var(--header-underline);
  }
  h1, h2, h3, h4, h5, h6 {
    overflow: unset; 
    margin-left: -1rem;
  }
  .mw-body-content {
    position:unset;
  }
  .mw-body,
  .parsoid-body {
    background-color: var(--page-bg-color);
  }
  #mw-page-base {
    background: unset;
  }
  .mw-body {
    border-color: var(--page-border-color);
    border-width: 0px 1px 1px 1px;
    margin-top: 0;
    border-radius: 0 0 var(--corner-rounding) var(--corner-rounding);
    padding-left: 2.5rem;
  }
  #pt-darkmode-link {
    display:none;
  }
  #mp-topbanner,
  .light-grey-panel,
  .mw-pt-languages,
  .mw-highlight pre,
  .mw-changeslist-legend, 
  .warningbox,
  .thumbinner,
  .oo-ui-menuSelectWidget,
  .oo-ui-popupWidget-popup,
  .oo-ui-buttonElement-button,
  .oo-ui-buttonSelectWidget .oo-ui-buttonOptionWidget:last-child .oo-ui-buttonElement-button,
  .oo-ui-buttonSelectWidget .oo-ui-buttonOptionWidget:first-child .oo-ui-buttonElement-button,
  .oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button,
  .oo-ui-buttonGroupWidget .oo-ui-buttonElement-framed:first-child .oo-ui-buttonElement-button,
  .oo-ui-buttonGroupWidget .oo-ui-buttonElement-framed:last-child .oo-ui-buttonElement-button,
  #catlinks,
  code,
  pre,
  #pagehistory li.selected,
  .mw-search-profile-tabs {
    background: var(--page-panels-bg-color) !important;
    border-color: var(--page-panels-border-color) !important;
    border-radius: var(--corner-rounding);
  }
  .oo-ui-popupWidget-popup,
  .oo-ui-menuSelectWidget,
  .mw-rcfilters-ui-filterTagMultiselectWidget,
  .mw-rcfilters-ui-filterTagMultiselectWidget *,
  .oo-ui-defaultOverlay div {
    background-color: var(--canvas-bg-color) !important;
    border: unset !important;
  }
  .oo-ui-textInputWidget .oo-ui-inputWidget-input,
  .mw-widget-dateInputWidget-handle,
  .oo-ui-checkboxInputWidget [type='checkbox'] + span,
  .oo-ui-dropdownWidget.oo-ui-widget-enabled .oo-ui-dropdownWidget-handle,
  .vector-menu-dropdown .vector-menu-content-list {
    background-color: var(--canvas-bg-color);
    border-color: var(--page-panels-border-color);
  }
  .oo-ui-dropdownInputWidget.oo-ui-widget-enabled,
  .oo-ui-dropdownWidget.oo-ui-widget-enabled.oo-ui-dropdownWidget-open .oo-ui-dropdownWidget-handle,
  .oo-ui-dropdownWidget.oo-ui-widget-enabled .oo-ui-dropdownWidget-handle:hover {
    background: unset !important;
  }
  .oo-ui-defaultOverlay .oo-ui-optionWidget-highlighted {
    background-color: var(--accent-color) !important;
  }
  li.gallerybox div.thumb {
    border-color: var(--page-border-color);
    background-color: var(--page-bg-color);
  }
  .thumbimage {
    background-color: unset;
    border:unset !important;
    border-radius: var(--corner-rounding);
  }
  .MainPageBG,
  #mp-left {
    background: unset !important;
  }
  .MainPageBG {
    border-color: var(--page-panels-border-color) !important;
    border-radius: var(--corner-rounding);
  }
  #mp-tfa-h2 {
    background: var(--page-inner-panels-bg-color) !important;
    border: unset !important;
    border-radius: var(--corner-rounding);
  }
  .mw-pt-languages-label {
    background-color: unset;
  }
  .mw-pt-translate-header {
    border-bottom: unset;
  }
  .portal h3, .vector-menu-portal h3 {
    background: unset;
  }
  .toc,
  .mw-warning,
  .toccolours {
    background: var(--page-inner-panels-bg-color) !important;
    border-color: var(--page-panels-border-color) !important;
    border-radius: var(--corner-rounding);
  }
  .vector-menu-tabs .selected {
    background: var(--page-bg-color);
  }
  .vector-menu-tabs,
  .vector-menu-tabs a,
  #mw-head .vector-menu-dropdown h3 {
    background-image: linear-gradient(transparent, var(--page-border-color));
  }
  .vector-menu-tabs li,
  p-cactions {
    background-image: linear-gradient(to top, #0002, transparent);
  }
  #searchInput, .mw-input input, .mw-input select {
    background-color: var(--search-box-bg-color);
    border: unset;
    border-radius: var(--corner-rounding);
    padding: 0.4em;
  }
  input::placeholder {
    color: #fff3 !important;
  }
  #editform textarea,
  #editform .editOptions * {
    color: #000e !important;
  }
  .wikitable tr, #built-in-lua-variables tr, .alternating-table tr {
    background: unset !important;
  }
  .wikitable,
  #built-in-lua-variables,
  .alternating-table {
    background: var(--wikitable-bg) !important;
    border-spacing: 0.3em;
    border-collapse: separate;
    border: 1px solid var(--page-panels-border-color) !important;
    border-radius: var(--corner-rounding);
  }
  .wikitable th, #built-in-lua-variables th, .alternating-table th,
  .wikitable td, #built-in-lua-variables td, .alternating-table td {
    border: unset !important;
    background: var(--wikitable-cell-bg) !important;
    padding: 0.3em 1em;
  }
  .wikitable tr:first-child th:first-child,
  #built-in-lua-variables tr:first-child th:first-child,
  .alternating-table tr:first-child th:first-child {
    border-top-left-radius: var(--corner-rounding) !important;
  }
  .wikitable tr:first-child th:last-child,
  #built-in-lua-variables tr:first-child th:last-child,
  .alternating-table tr:first-child th:last-child {
    border-top-right-radius: var(--corner-rounding) !important;
  }
  .wikitable tr:last-child td:last-child,
  #built-in-lua-variables tr:last-child td:last-child,
  .alternating-table tr:last-child td:last-child {
    border-bottom-right-radius: var(--corner-rounding) !important;
  }
  .wikitable tr:last-child td:first-child,
  #built-in-lua-variables tr:last-child td:first-child,
  .alternating-table tr:last-child td:first-child {
    border-bottom-left-radius: var(--corner-rounding) !important;
  }
  code {
    padding: 0.1em 0.5em;
  }
  .mw-ui-button {
    background-color: var(--accent-color);
  }
  .diff tr div {
    font-family: var(--font-name-codeblock) !important;
  }
  ins.diffchange, del.diffchange {
    font-weight: normal !important;
  }
  .diff-context {
    background: var(--page-inner-panels-bg-color);
    border:unset;
  }
  .diff-addedline, .diff-deletedline {
    border-color: var(--page-inner-panels-bg-color) !important;
  }
  .diff-context div {
    color: #fff3 !important;
  }
  .diff-addedline .diffchange {
    background: var(--diff-add-hl);
  }
  .diff-deletedline .diffchange {
    background: var(--diff-remove-hl);
  }

  /* syntax highlighting */
  .mw-highlight-lang-lua pre,
  code {
    background: var(--code-block-bg-color) !important;
  }
  pre,
  pre *,
  code {
    font-family: var(--font-name-codeblock) !important;
    font-weight: normal !important;
  }
  .mw-highlight .s,
  .mw-highlight .s1,
  .mw-highlight .s2 {
    color: var(--syntax-hl-string) !important;
  }
  .mw-highlight .se {
    color: var(--syntax-hl-escaped-char-in-string) !important;
  }
  .mw-highlight .c1,
  .mw-highlight .cm {
    color: var(--syntax-hl-comment) !important;
  }
  .mw-highlight .nb {
    color: var(--syntax-hl-core-func) !important;
  }
  .mw-highlight .kr {
    color: var(--syntax-hl-core-keyword) !important;
  }
  .mw-highlight .ow {
    color: var(--syntax-hl-core-not) !important;
  }
  .mw-highlight .kd {
    color: var(--syntax-hl-core-local) !important;
  }
  .mw-highlight .kc {
    color: var(--syntax-hl-core-boolean) !important;
  }
  .mw-highlight .mf,
  .mw-highlight .mi {
    color: var(--syntax-hl-number) !important;
  }
  .mw-highlight .p {
    color: var(--syntax-hl-core-punctuation) !important;
  }
  .mw-highlight .o {
    color: var(--syntax-hl-core-operator) !important;
  }
}
Retrieved from "https://wiki.mudlet.org/index.php?title=User:Dt192/vector.css&oldid=21547"