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

Revision as of 05:08, 10 January 2024

/* Quick test of custom css */

@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: #22272e;    /* main theme color rgb(34, 39, 46) */
  --accent-color: #e0c799cf;     /* color of links etc rgba(224, 199, 153, 81%) */
  --text-color: #fffb;		 /* equivilent to rgba(255, 255, 255, 73%); */
  --panel-bg-color: #ffffff10;   /* equivilent to rgba(255, 255, 255, 4%); */
  --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: #0005;
  --code-block-bg-color: #00000047;
  --wikitable-bg: #ffffff04;
  --wikitable-cell-bg: #ffffff06;
  --header-underline: #ffffff29;
  --diff-add-hl: #188d1770;
  --diff-remove-hl: #cf212170;

  --syntax-hl-string: #99c794;
  --syntax-hl-number: #f9ae57;
  --syntax-hl-comment: #ffffff45;
  --syntax-hl-core-func: #6699cc;
  --syntax-hl-core-keyword: #c695c6;
  --syntax-hl-core-not: #f97b57;
  --syntax-hl-core-boolean: #ec5e66;
  --syntax-hl-core-local: #ec5e66;
  --syntax-hl-core-punctuation: #ffffff45;
  --syntax-hl-core-operator: #f97b57;
  --syntax-hl-escaped-char-in-string: #5fb8ff;


  /* Red Theme 
  --canvas-bg-color: #5b2020;
  */

  /* Blue Theme
  --canvas-bg-color: #072b5d;
  --accent-color: #98dc5ac2;
  */

  /* Light Theme
    --canvas-bg-color: #bbbbbb;
    --text-color: #000b;
    --accent-color: #7e00c5cf;
    --panel-bg-col: 255,255,255; /* this one has to be in RGB */
    --alpha: 20%;
  */
}


/* 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;
    text-wrap: 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);
  }
  .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);
  }

  #mp-topbanner,
  .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 {
    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;
  }
  .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, #built-in-lua-variables {
    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,
  .wikitable td, #built-in-lua-variables 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 {
    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 {
    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 {
    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 {
    border-bottom-left-radius: var(--corner-rounding) !important;
  }
  code {
    padding: 0.1em 0.5em;
  }
  .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;
  }
}

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

Revision as of 05:08, 10 January 2024

Navigation menu

Search

@@ Line 7: / Line 7: @@
 :root {
    /* Base Theme (grey) */
-   --canvas-bg-color: #22272e;  /* change this to set your main theme color */
+   --canvas-bg-color: #22272e;    /* main theme color rgb(34, 39, 46) */
-   --accent-color: #e0c799cf;   /* color of links etc */
+   --accent-color: #e0c799cf;     /* color of links etc rgba(224, 199, 153, 81%) */
-   --page-width: 1200px;        /* constrains page width, set as `100%` to undo */
+  --text-color: #fffb;		 /* equivilent to rgba(255, 255, 255, 73%); */
-   --page-margins: unset;       /* set as `auto` to center page */
+  --panel-bg-color: #ffffff10;   /* equivilent to rgba(255, 255, 255, 4%); */
-   --corner-rounding: 1em;      /* try `5px` or `10px` or `0` for pointed corners */
+   --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";
@@ Line 17: / Line 19: @@
    --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: #ffffff0c;
+   --page-inner-panels-bg-color: var(--panel-bg-color);
-   --page-inner-panels-bg-color: #ffffff0a;
    --search-box-bg-color: #0005;
    --code-block-bg-color: #00000047;
@@ Line 43: / Line 44: @@
    --syntax-hl-escaped-char-in-string: #5fb8ff;
-   /*** Overrides ***/
+   /* Red Theme
+  --canvas-bg-color: #5b2020;
+  */
    /* Blue Theme
@@ Line 50: / Line 54: @@
    */
-   /* Red Theme
+   /* Light Theme
-  --canvas-bg-color: #5b2020;
+    --canvas-bg-color: #bbbbbb;
+    --text-color: #000b;
+    --accent-color: #7e00c5cf;
+    --panel-bg-col: 255,255,255; /* this one has to be in RGB */
+    --alpha: 20%;
    */
 }
@@ Line 200: / Line 207: @@
      color: #000e !important;
    }
-   .wikitable {
+   .wikitable, #built-in-lua-variables {
      background: var(--wikitable-bg) !important;
      border-spacing: 0.3em;
@@ Line 207: / Line 214: @@
      border-radius: var(--corner-rounding);
    }
-   .wikitable th,
+   .wikitable th, #built-in-lua-variables th,
-   .wikitable td {
+   .wikitable td, #built-in-lua-variables td {
      border: unset !important;
      background: var(--wikitable-cell-bg) !important;
      padding: 0.3em 1em;
    }
-   .wikitable th:first-child {
+   .wikitable tr:first-child th:first-child, #built-in-lua-variables tr:first-child th:first-child {
-     border-radius: var(--corner-rounding) 0 0 0 !important;
+     border-top-left-radius: var(--corner-rounding) !important;
    }
-   .wikitable th:last-child {
+   .wikitable tr:first-child th:last-child, #built-in-lua-variables tr:first-child th:last-child {
-     border-radius: 0 var(--corner-rounding) 0 0 !important;
+     border-top-right-radius: var(--corner-rounding) !important;
    }
-   .wikitable tr:last-child td:last-child {
+   .wikitable tr:last-child td:last-child, #built-in-lua-variables tr:last-child td:last-child {
-     border-radius: 0 0 var(--corner-rounding) 0 !important;
+     border-bottom-right-radius: var(--corner-rounding) !important;
    }
-   .wikitable tr:last-child td:first-child {
+   .wikitable tr:last-child td:first-child, #built-in-lua-variables tr:last-child td:first-child {
-     border-radius: 0 0 0 var(--corner-rounding) !important;
+     border-bottom-left-radius: var(--corner-rounding) !important;
    }
    code {