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

From Mudlet
Jump to navigation Jump to search
(Created page with "→‎Quick test of custom css: @import url("https://fonts.googleapis.com/css?family=Roboto+Slab&display=swap"); :root { →‎base theme (grey): --canvas-bg-color: #22272...")
 
Line 2: Line 2:
  
 
@import url("https://fonts.googleapis.com/css?family=Roboto+Slab&display=swap");
 
@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 {
 
:root {
Line 8: Line 10:
 
   --accent-color: #e0c799cf;
 
   --accent-color: #e0c799cf;
 
   --page-width: 1200px;
 
   --page-width: 1200px;
−
   --corner-rounding: 5px;
+
   --corner-rounding: 1em;
−
   --font-name: Roboto Slab;
+
   --font-name: "Exo 2";
 +
  --font-header-name: "Roboto Slab";
 +
  --font-name-codeblock: "Source Code Pro";
  
 +
  --text-color: #fffb;
 
   --page-bg-color: #ffffff07;
 
   --page-bg-color: #ffffff07;
 
   --page-border-color: #ffffff0b;
 
   --page-border-color: #ffffff0b;
Line 16: Line 21:
 
   --page-panels-border-color: #ffffff1c;
 
   --page-panels-border-color: #ffffff1c;
 
   --page-inner-panels-bg-color: #ffffff0a;
 
   --page-inner-panels-bg-color: #ffffff0a;
−
  --text-color: #fffb;
 
−
  --link-color: #e0c799cf;
 
 
   --search-box-bg-color: #0005;
 
   --search-box-bg-color: #0005;
 +
  --code-block-bg-color: #00000047;
  
−
   /* Red Theme
+
  /* Blue Theme
 +
  --canvas-bg-color: #072b5d;
 +
  --accent-color: #98dc5ac2;
 +
  */
 +
 
 +
   /* Red Theme  
 
   --canvas-bg-color: #5b2020;
 
   --canvas-bg-color: #5b2020;
−
  */
+
  */
−
}
+
 
−
html {
 
−
  font-size: 105%;
 
 
}
 
}
 +
 
@media screen {
 
@media screen {
 +
  html {
 +
    font-size: 105%;
 +
  }
 +
  .vector-menu-portal {
 +
    font-size: 110%;
 +
  }
 
   * {
 
   * {
 
     color: var(--text-color) !important;
 
     color: var(--text-color) !important;
Line 39: Line 53:
 
   }
 
   }
 
   a {
 
   a {
−
     color: var(--link-color) !important;
+
     color: var(--accent-color) !important;
 +
  }
 +
  h1, h2, h3, h4, h5, h6 {
 +
    font-family: var(--font-header-name) !important;
 
   }
 
   }
 
   .mw-body,
 
   .mw-body,
Line 57: Line 74:
 
   .mw-pt-languages,
 
   .mw-pt-languages,
 
   .mw-highlight pre,
 
   .mw-highlight pre,
−
   .warningbox {
+
   .warningbox,
 +
  #catlinks,
 +
  code {
 
     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;
Line 96: Line 115:
 
     background-image: linear-gradient(transparent, var(--page-border-color));
 
     background-image: linear-gradient(transparent, var(--page-border-color));
 
   }
 
   }
−
   .vector-menu-tabs li {
+
   .vector-menu-tabs li,
−
     background-image: linear-gradient(to top, #0001, transparent);
+
  p-cactions {
 +
     background-image: linear-gradient(to top, #0002, transparent);
 
   }
 
   }
 
   #searchInput {
 
   #searchInput {
Line 103: Line 123:
 
     border: unset;
 
     border: unset;
 
     border-radius: var(--corner-rounding);
 
     border-radius: var(--corner-rounding);
−
     color: fff0 !important;
+
  }
 +
  input::placeholder {
 +
     color: #fff3 !important;
 
   }
 
   }
 
   #editform textarea,
 
   #editform textarea,
 
   #editform .editOptions * {
 
   #editform .editOptions * {
 
     color: #000e !important;
 
     color: #000e !important;
 +
  }
 +
  .wikitable {
 +
    background: unset !important;
 +
    border-spacing: 0.3em;
 +
    border-collapse: separate;
 +
    border: unset;
 +
  }
 +
  .wikitable th,
 +
  .wikitable td {
 +
    border: unset !important;
 +
    background: #ffffff0d !important;
 +
    padding: 0.3em 1em;
 +
  }
 +
  .wikitable th:first-child {
 +
    border-radius: 1em 0 0 0 !important;
 +
  }
 +
  .wikitable th:last-child {
 +
    border-radius: 0 1em 0 0 !important;
 +
  }
 +
  .wikitable tr:last-child td:last-child {
 +
    border-radius: 0 0 1em 0 !important;
 +
  }
 +
  .wikitable tr:last-child td:first-child {
 +
    border-radius: 0 0 0 1em !important;
 +
  }
 +
  code {
 +
    padding: 0.1em 0.5em;
 +
  }
 +
  /* syntax highlighting */
 +
  .mw-highlight-lang-lua pre,
 +
  code {
 +
    background: var(--code-block-bg-color) !important;
 +
    /* padding: 0.5em 0.75em; */
 +
  }
 +
  .mw-highlight-lang-lua pre *,
 +
  code {
 +
    font-family: var(--font-name-codeblock) !important;
 +
    font-weight: normal !important;
 +
  }
 +
  .mw-highlight .s,
 +
  .mw-highlight .s1,
 +
  .mw-highlight .s2 {
 +
    /* strings #5fb8ff */
 +
    color: #99c794 !important;
 +
  }
 +
  .mw-highlight .se {
 +
    color: #5fb8ff !important;
 +
  }
 +
  .mw-highlight .c1,
 +
  .mw-highlight .cm {
 +
    /* comment */
 +
    color: #ffffff45 !important;
 +
  }
 +
  .mw-highlight .nb {
 +
    /* built in functions #afe1ff */
 +
    color: #6699cc !important;
 +
  }
 +
  .mw-highlight .kr {
 +
    /* keywords #ea4a5ade*/
 +
    color: #c695c6 !important;
 +
  }
 +
  .mw-highlight .ow {
 +
    /* not */
 +
    color: #f97b57 !important;
 +
  }
 +
  .mw-highlight .kd {
 +
    /* seems to only be the word local #94A843*/
 +
    color: #ec5e66 !important;
 +
  }
 +
  .mw-highlight .kc {
 +
    /* bools #94A843 */
 +
    color: #ec5e66 !important;
 +
  }
 +
  .mw-highlight .mf,
 +
  .mw-highlight .mi {
 +
    /* numbers #b392f0 */
 +
    color: #f9ae57 !important;
 +
  }
 +
  .mw-highlight .p {
 +
    /* commas, braces etc */
 +
    color: #ffffff45 !important;
 +
  }
 +
  .mw-highlight .o {
 +
    /* operators */
 +
    color: #f97b57 !important;
 
   }
 
   }
 
}
 
}

Revision as of 17:09, 8 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;
  --accent-color: #e0c799cf;
  --page-width: 1200px;
  --corner-rounding: 1em;
  --font-name: "Exo 2";
  --font-header-name: "Roboto Slab";
  --font-name-codeblock: "Source Code Pro";

  --text-color: #fffb;
  --page-bg-color: #ffffff07;
  --page-border-color: #ffffff0b;
  --page-panels-bg-color: #ffffff07;
  --page-panels-border-color: #ffffff1c;
  --page-inner-panels-bg-color: #ffffff0a;
  --search-box-bg-color: #0005;
  --code-block-bg-color: #00000047;

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

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

}

@media screen {
  html {
    font-size: 105%;
  }
  .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: auto;
    background-color: var(--canvas-bg-color);
  }
  a {
    color: var(--accent-color) !important;
  }
  h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-header-name) !important;
  }
  .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,
  .warningbox,
  #catlinks,
  code {
    background: var(--page-panels-bg-color) !important;
    border-color: var(--page-panels-border-color) !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;
  }
  .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 {
    background-color: var(--search-box-bg-color);
    border: unset;
    border-radius: var(--corner-rounding);
  }
  input::placeholder {
    color: #fff3 !important;
  }
  #editform textarea,
  #editform .editOptions * {
    color: #000e !important;
  }
  .wikitable {
    background: unset !important;
    border-spacing: 0.3em;
    border-collapse: separate;
    border: unset;
  }
  .wikitable th,
  .wikitable td {
    border: unset !important;
    background: #ffffff0d !important;
    padding: 0.3em 1em;
  }
  .wikitable th:first-child {
    border-radius: 1em 0 0 0 !important;
  }
  .wikitable th:last-child {
    border-radius: 0 1em 0 0 !important;
  }
  .wikitable tr:last-child td:last-child {
    border-radius: 0 0 1em 0 !important;
  }
  .wikitable tr:last-child td:first-child {
    border-radius: 0 0 0 1em !important;
  }
  code {
    padding: 0.1em 0.5em;
  }
  /* syntax highlighting */
  .mw-highlight-lang-lua pre,
  code {
    background: var(--code-block-bg-color) !important;
    /* padding: 0.5em 0.75em; */
  }
  .mw-highlight-lang-lua pre *,
  code {
    font-family: var(--font-name-codeblock) !important;
    font-weight: normal !important;
  }
  .mw-highlight .s,
  .mw-highlight .s1,
  .mw-highlight .s2 {
    /* strings #5fb8ff */
    color: #99c794 !important;
  }
  .mw-highlight .se {
    color: #5fb8ff !important;
  }
  .mw-highlight .c1,
  .mw-highlight .cm {
    /* comment */
    color: #ffffff45 !important;
  }
  .mw-highlight .nb {
    /* built in functions #afe1ff */
    color: #6699cc !important;
  }
  .mw-highlight .kr {
    /* keywords #ea4a5ade*/
    color: #c695c6 !important;
  }
  .mw-highlight .ow {
    /* not */
    color: #f97b57 !important;
  }
  .mw-highlight .kd {
    /* seems to only be the word local #94A843*/
    color: #ec5e66 !important;
  }
  .mw-highlight .kc {
    /* bools #94A843 */
    color: #ec5e66 !important;
  }
  .mw-highlight .mf,
  .mw-highlight .mi {
    /* numbers #b392f0 */
    color: #f9ae57 !important;
  }
  .mw-highlight .p {
    /* commas, braces etc */
    color: #ffffff45 !important;
  }
  .mw-highlight .o {
    /* operators */
    color: #f97b57 !important;
  }
}
Retrieved from "https://wiki.mudlet.org/index.php?title=User:Dt192/vector.css&oldid=20716"