MediaWiki:Common.css: Difference between revisions
No edit summary |
No edit summary |
||
| Line 266: | Line 266: | ||
} | } | ||
.vector-pinned-container .vector-page-tools::after { | .vector-feature-zebra-design-disabled #vector-page-tools-pinned-container .vector-page-tools::after { | ||
display: none; | display: none; | ||
} | } | ||
Latest revision as of 20:37, 22 June 2024
/* font for title */
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
/* default vector theme */
:root {
--layout-topbar-height: 35px; /* height of topbar */
--layout-sidespace: 24px; /* whitespace width on most left and most right */
--layout-content-width: minmax(0,1fr);
--font-size: 14px;
--line-height: 24px;
--font-size-s: 12px;
--line-height-s: 20px;
--font-size-xs: 10px;
--line-height-xs: 16px;
--font-size-l: 16px;
--line-height-l: 24px;
--theme-text-color: #fff;
--theme-site-background: #141;
--theme-header-background: #151;
--mw-page-container-side-padding: 1.5em;
--theme-body-bg: #f8f9fa;
--theme-body-color: #202122;
--theme-body-link-color: #3366cc;
--theme-header-bg: #fff;
--theme-header-color: #202122;
--theme-header-link-color: #3366cc;
--theme-content-bg: #fff;
--theme-heading-color: #000;
--theme-code-bg: #f8f9fa;
--theme-code-border: 1px solid #eaecf0;
--theme-code-color: #000;
--theme-icon-filter: invert(100%);
--theme-catlinks-bg: #f8f9fa;
--theme-catlinks-border: 1px solid #a2a9b1;
--theme-sidebar-bg: #fff;
--theme-sidebar-color: #202122;
--theme-sidebar-link-color: #3366cc;
--theme-pinnable-header-label-color: #54595d;
--theme-pinnable-header-link-color: #3366cc;
--theme-pinnable-header-link-hover-color: #447ff5;
--theme-pinnable-list-heading-color: #54595d;
--theme-pinnable-list-link-color: #3366cc;
--theme-main-menu-bg: #f8f9fa;
--theme-toc-bg: #fff;
--theme-toc-link-color: #3366cc;
--theme-toc-active-parent-link-color: #202122;
--theme-toc-active-link-color: #202122;
--theme-dropdown-bg: #fff;
--theme-footer-color: #202122;
/* syntax highlighting colors, original from cs2022dark.css highlight.js theme */
--theme-hljs-bg: #1e1e1e;
--theme-hljs-unset: #dbdbdb;
--theme-hljs-comment: #57a64a;
--theme-hljs-doctag: #556b2f;
--theme-hljs-keyword: #569cd6;
--theme-hljs-type: #4ec9b0;
--theme-hljs-function: #dcdcaa;
--theme-hljs-string: #d69d85;
--theme-hljs-number: #b5cea8;
--theme-hljs-variable: #9cdcfe;
--theme-hljs-symbol: #d8a0df;
--theme-hljs-regexp: #9a5334;
--theme-hljs-meta: #9b9b9b;
--theme-hljs-section: gold;
--theme-hljs-attribute: #92caf4;
--theme-hljs-bullet: #d7ba7d;
--theme-hljs-selector: #d7ba7d;
--theme-hljs-addition: #144212;
--theme-hljs-deletion: #600;
--theme-hljs-tsql-symbol: #dcdcdc;
--theme-hljs-tsql-string: #cb4141;
--theme-hljs-tsql-built_in: #c975d5;
--theme-hljs-tsql-sp: #b3725b;
}
.mw-page-container,
.vector-feature-zebra-design-disabled .mw-page-container {
padding-left: var(--mw-page-container-side-padding);
padding-right: var(--mw-page-container-side-padding);
}
.mw-logo,
.vector-header-start a:visited {
color: var(--theme-header-link-color);
}
.mw-logo-container:before {
content: "GAME DEV";
font-size: 20px;
font-family: "Press Start 2P", system-ui;
font-weight: 400;
font-style: normal;
line-height: 28px;
}
.mw-logo-wordmark {
display: none;
}
@media screen {
.vector-header-container,
.vector-feature-zebra-design-disabled .vector-header-container {
box-shadow: 0 0 16px #000;
}
.mw-page-container,
.vector-feature-zebra-design-disabled .mw-page-container {
box-shadow: 0 8px 16px #000;
}
.vector-sticky-header-container,
.vector-feature-zebra-design-disabled .vector-sticky-header-container {
box-shadow: none;
}
.vector-feature-zebra-design-disabled body {
background: var(--theme-body-bg);
color: var(--theme-body-color);
}
.vector-feature-zebra-design-disabled .vector-header-container {
background: var(--theme-header-bg);
}
.vector-sticky-header-context-bar-primary,
.vector-feature-zebra-design-disabled .vector-sticky-header-context-bar-primary {
color: var(--theme-header-color);
}
.vector-header-container #pt-userpage-2 a:not(.mw-selflink) {
color: var(--theme-header-link-color);
}
.vector-feature-zebra-design-disabled .vector-dropdown .vector-dropdown-content {
background: var(--theme-dropdown-bg);
}
.vector-user-menu-logged-in .vector-dropdown-label::after {
filter: var(--theme-icon-filter);
}
.vector-pinnable-header-label,
.vector-feature-zebra-design-disabled .vector-pinnable-header-label,
.vector-pinnable-header-toggle-button::before,
.vector-feature-zebra-design-disabled .vector-pinnable-header-toggle-button::before,
.vector-pinnable-header-toggle-button::after,
.vector-feature-zebra-design-disabled .vector-pinnable-header-toggle-button::after {
color: var(--theme-pinnable-header-label-color);
}
.vector-pinnable-header-toggle-button,
.vector-feature-zebra-design-disabled .vector-pinnable-header-toggle-button {
color: var(--theme-pinnable-header-link-color);
}
.vector-pinnable-header-toggle-button:hover,
.vector-feature-zebra-design-disabled .vector-pinnable-header-toggle-button:hover {
color: var(--theme-pinnable-header-link-hover-color);
}
.vector-feature-zebra-design-disabled .vector-pinnable-element .vector-menu-heading,
.vector-feature-zebra-design-disabled .vector-dropdown-content .vector-menu-heading {
color: var(--theme-pinnable-list-heading-color);
}
.vector-feature-zebra-design-disabled .vector-pinnable-element .mw-list-item a,
.vector-feature-zebra-design-disabled .vector-dropdown-content .mw-list-item a,
.vector-feature-zebra-design-disabled .vector-dropdown .mw-list-item a:not(.mw-selflink),
.vector-feature-zebra-design-disabled .vector-pinnable-element .mw-list-item a:not(.mw-selflink):visited,
.vector-feature-zebra-design-disabled .vector-dropdown-content .mw-list-item a:not(.mw-selflink):visited {
color: var(--theme-pinnable-list-link-color);
}
.mw-page-container,
.vector-feature-zebra-design-disabled .mw-page-container {
background: var(--theme-content-bg);
}
.vector-main-menu,
.vector-feature-zebra-design-disabled .vector-main-menu,
#vector-main-menu-pinned-container .vector-main-menu,
.vector-feature-zebra-design-disabled #vector-main-menu-pinned-container .vector-main-menu {
background: var(--theme-main-menu-bg);
}
.vector-toc,
.vector-feature-zebra-design-disabled .vector-toc {
background: var(--theme-toc-bg);
}
.vector-toc .vector-toc-link,
.vector-feature-zebra-design-disabled .vector-toc .vector-toc-link {
color: var(--theme-toc-link-color);
}
.vector-feature-zebra-design-disabled .vector-toc .vector-toc-level-1-active:not(.vector-toc-list-item-active) > .vector-toc-link {
color: var(--theme-toc-active-parent-link-color);
}
.vector-feature-zebra-design-disabled .vector-toc .vector-toc-list-item-active > .vector-toc-link,
.vector-feature-zebra-design-disabled .vector-toc .vector-toc-level-1-active:not(.vector-toc-list-item-expanded) > .vector-toc-link,
.vector-feature-zebra-design-disabled .vector-toc .vector-toc-level-1-active:not(.vector-toc-list-item-active) > .vector-toc-link,
.vector-feature-zebra-design-disabled .vector-toc .vector-toc-list-item-active.vector-toc-level-1-active > .vector-toc-link {
color: var(--theme-toc-active-link-color);
}
.vector-header-container a {
color: var(--theme-header-link-color);
}
.vector-menu-tabs .mw-list-item.selected a,
.vector-menu-tabs .mw-list-item.selected a:visited {
color: var(--theme-body-color);
}
h1, h2, h3, h4, h5, h6 {
color: var(--theme-heading-color);
}
a {
color: var(--theme-body-link-color);
}
ul {
list-style: disc;
}
pre, code, .mw-code {
background: var(--theme-code-bg);
border: var(--theme-code-border);
color: var(--theme-code-color);
}
table.zebra tr.odd {
background-color: #eee;
}
.catlinks {
background-color: var(--theme-catlinks-bg);
border: var(--theme-catlinks-border);
}
.cdx-button:enabled,
.cdx-button.cdx-button--fake-button--enabled {
color: var(--theme-body-color);
}
.vector-settings .cdx-button {
background-color: var(--theme-sidebar-bg);
color: var(--theme-body-color);
border-color: #a2a9b1;
}
.vector-settings .cdx-button:hover {
background-color: var(--theme-dropdown-bg);
color: var(--theme-body-color);
cursor: pointer;
}
.vector-feature-zebra-design-disabled #vector-page-tools-pinned-container .vector-page-tools::after {
display: none;
}
.mw-footer li {
color: var(--theme-footer-color);
}
}
@media screen and (min-width:1000px) {
:root {
--mw-page-container-side-padding: 2.75em;
}
#vector-toc-pinned-container .vector-toc::after,
.vector-feature-zebra-design-disabled #vector-toc-pinned-container .vector-toc::after {
background: none;
}
.mw-footer-container,
.vector-feature-zebra-design-disabled .mw-footer-container {
grid-row-start: footer;
grid-row-end: footer;
grid-column-start: pageContent;
grid-column-end: pageContent;
}
.vector-icon {
filter: var(--theme-icon-filter);
}
}
@media screen and (min-width:1200px) {
:root {
--mw-page-container-side-padding: 3.25em;
}
}
.mw-page-container-inner::before {
content: "";
display: block;
grid-column-start: toc;
grid-column-end: toc;
grid-row-start: siteNotice;
grid-row-end: footer;
margin-left: calc(-1*var(--mw-page-container-side-padding));
background: var(--theme-sidebar-bg);
}
.vector-feature-zebra-design-disabled.vector-feature-main-menu-pinned-disabled.vector-toc-not-available .mw-page-container-inner::before,
.vector-feature-zebra-design-disabled.vector-feature-main-menu-pinned-disabled .vector-sidebar-container-no-toc ~ .mw-page-container-inner::before,
.vector-feature-zebra-design-disabled.vector-feature-main-menu-pinned-disabled.vector-feature-toc-pinned-clientpref-0 .mw-page-container-inner::before {
display: none;
}
.vector-main-menu-action-opt-out {
display: none;
}
.mw-footer-container {
grid-row-start: footer;
grid-row-end: footer;
grid-column-start: pageContent;
grid-column-end: pageContent;
}
.vector-feature-zebra-design-disabled.vector-feature-main-menu-pinned-disabled.vector-toc-not-available .mw-footer-container,
.vector-feature-zebra-design-disabled.vector-feature-main-menu-pinned-disabled .vector-sidebar-container-no-toc ~ .mw-footer-container,
.vector-feature-zebra-design-disabled.vector-feature-main-menu-pinned-disabled.vector-feature-toc-pinned-clientpref-0 .mw-footer-container {
grid-column-start: toc;
grid-column-end: pageContent;
}
/* syntax highlighting colors */
.hljs{background:var(--theme-hljs-bg)}
.hljs,.hljs-operator,.hljs-property,.hljs-punctuation,.hljs-subst,.hljs-unset{color:var(--theme-hljs-unset)}
.hljs-quote,.hljs-comment{color:var(--theme-hljs-comment)}
.hljs-doctag{color:var(--theme-hljs-doctag)}
.hljs-built_in,.hljs-name,.hljs-literal,.hljs-link,.hljs-meta-keyword,.hljs-keyword{color:var(--theme-hljs-keyword)}
.hljs-title,.hljs-type{color:var(--theme-hljs-type)}
.hljs-title.function_{color:var(--theme-hljs-function)}
.hljs-meta-string,.hljs-string{color:var(--theme-hljs-string)}
.hljs-number{color:var(--theme-hljs-number)}
.hljs-builtin-name,.hljs-formula,.hljs-params,.hljs-template-variable,.hljs-variable{color:var(--theme-hljs-variable)}
.hljs-symbol{color:var(--theme-hljs-symbol)}
.hljs-template-tag,.hljs-regexp{color:var(--theme-hljs-regexp)}
.hljs-tag,.hljs-tsql-literal,.hljs-meta{color:var(--theme-hljs-meta)}
.hljs-section{color:var(--theme-hljs-section)}
.hljs-attr,.hljs-attribute{color:var(--theme-hljs-attribute)}
.hljs-bullet{color:var(--theme-hljs-bullet)}
.hljs-selector-attr,.hljs-selector-class,.hljs-selector-id,.hljs-selector-pseudo,.hljs-selector-tag{color:var(--theme-hljs-selector)}
.hljs-addition{background-color:var(--theme-hljs-addition)}
.hljs-deletion{background-color:var(--theme-hljs-deletion)}
.hljs-tsql-symbol{color:var(--theme-hljs-tsql-symbol)}
.hljs-tsql-string{color:var(--theme-hljs-tsql-string)}
.hljs-tsql-built_in{color:var(--theme-hljs-tsql-built_in)}
.hljs-tsql-sp{color:var(--theme-hljs-tsql-sp)}
/* light vector theme */
:root {
--theme-body-bg: #072207;
--theme-body-color: #202122;
--theme-body-link-color: #3366cc;
--theme-header-bg:
repeating-linear-gradient(to top, #0002, #0000 1em),
repeating-linear-gradient(to right, #0002, #0000 1em),
radial-gradient(circle at left, #141, #151 10%, #151 40%, #113811);
--theme-header-color: #fff;
--theme-header-icon-filter: invert(100%);
--theme-header-link-color: #fff;
--theme-content-bg: #fff;
--theme-heading-color: #000;
--theme-code-bg: #f8f9fa;
--theme-code-border: 1px solid #eaecf0;
--theme-code-color: #000;
--theme-catlinks-bg: #f8f9fa;
--theme-catlinks-border: 1px solid #a2a9b1;
--theme-sidebar-bg: #141;
--theme-sidebar-color: #fff;
--theme-sidebar-link-color: #ddf;
--theme-pinnable-header-label-color: #ddd;
--theme-pinnable-header-link-color: #fafff4;
--theme-pinnable-header-link-hover-color: #fff;
--theme-pinnable-list-heading-color: #eee;
--theme-pinnable-list-link-color: #fff;
--theme-main-menu-bg: transparent;
--theme-toc-bg: transparent;
--theme-toc-link-color: #fafff4;
--theme-toc-active-parent-link-color: #fafafa;
--theme-toc-active-link-color: #fff;
--theme-dropdown-bg: #151;
--theme-footer-color: #202122;
/* syntax highlighting colors */
--theme-hljs-bg: #f7f7f7;
--theme-hljs-unset: #000;
--theme-hljs-comment: #080;
--theme-hljs-doctag: #556b2f;
--theme-hljs-keyword: #00f;
--theme-hljs-type: #2b91af;
--theme-hljs-function: #74531f;
--theme-hljs-string: #a31515;
--theme-hljs-number: #000;
--theme-hljs-variable: #9cdcfe;
--theme-hljs-symbol: #d8a0df;
--theme-hljs-regexp: #9a5334;
--theme-hljs-meta: #9b9b9b;
--theme-hljs-section: gold;
--theme-hljs-attribute: #2b91af;
--theme-hljs-bullet: #d7ba7d;
--theme-hljs-selector: #2b91af;
--theme-hljs-addition: #144212;
--theme-hljs-deletion: #600;
--theme-hljs-tsql-symbol: #dcdcdc;
--theme-hljs-tsql-string: #cb4141;
--theme-hljs-tsql-built_in: #c975d5;
--theme-hljs-tsql-sp: #b3725b;
}
/* light vector theme body colors (default) */
.mw-content-container {
--theme-icon-filter: none;
--theme-pinnable-header-label-color: #54595d;
--theme-pinnable-header-link-color: #3366cc;
--theme-pinnable-header-link-hover-color: #447ff5;
--theme-pinnable-list-heading-color: #54595d;
--theme-pinnable-list-link-color: #3366cc;
--theme-dropdown-bg: #fff;
}