Difference between revisions of "User:Dt192/vector.css"
Jump to navigation
Jump to search
| Line 7: | Line 7: | ||
:root { | :root { | ||
/* Base Theme (grey) */ | /* Base Theme (grey) */ | ||
| − | --canvas-bg-color: #22272e; | + | --canvas-bg-color: #22272e; /* change this to set your main theme color */ |
| − | + | --accent-color: #e0c799cf; /* color of links etc */ | |
| − | --accent-color: #e0c799cf; | + | --page-width: 1200px; /* constrains page width, set to 100% to undo */ |
| − | --page-width: 1200px; | + | --corner-rounding: 1em; /* try 5px for smaller corners or 0 for pointed */ |
| − | --corner-rounding: 1em; | ||
--font-name: "Exo 2"; | --font-name: "Exo 2"; | ||
| Line 17: | Line 16: | ||
--font-name-codeblock: "Source Code Pro"; | --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 96: | Line 96: | ||
.mw-pt-languages, | .mw-pt-languages, | ||
.mw-highlight pre, | .mw-highlight pre, | ||
| + | .mw-changeslist-legend, | ||
.warningbox, | .warningbox, | ||
| + | .oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button, | ||
#catlinks, | #catlinks, | ||
code, | code, | ||
| Line 145: | Line 147: | ||
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 { | ||
Revision as of 02:12, 9 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; /* change this to set your main theme color */
--accent-color: #e0c799cf; /* color of links etc */
--page-width: 1200px; /* constrains page width, set to 100% to undo */
--corner-rounding: 1em; /* try 5px for smaller corners or 0 for pointed */
--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;
--wikitable-bg: #ffffff0d;
--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;
/*** Overrides ***/
/* Blue Theme
--canvas-bg-color: #072b5d;
--accent-color: #98dc5ac2;
*/
/* Red Theme
--canvas-bg-color: #5b2020;
*/
}
@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: auto;
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,
.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,
.oo-ui-buttonElement-framed.oo-ui-widget-enabled > .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);
}
.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 {
background: unset !important;
border-spacing: 0.3em;
border-collapse: separate;
border: unset;
}
.wikitable th,
.wikitable td {
border: unset !important;
background: var(--wikitable-bg) !important;
padding: 0.3em 1em;
}
.wikitable th:first-child {
border-radius: var(--corner-rounding) 0 0 0 !important;
}
.wikitable th:last-child {
border-radius: 0 var(--corner-rounding) 0 0 !important;
}
.wikitable tr:last-child td:last-child {
border-radius: 0 0 var(--corner-rounding) 0 !important;
}
.wikitable tr:last-child td:first-child {
border-radius: 0 0 0 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;
}
.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 {
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;
}
}