MediaWiki:Common.css: Difference between revisions
UnrulyJuli3 (talk | contribs) Add more items to fancy heading selectors |
UnrulyJuli3 (talk | contribs) Custom dark mode test |
||
| Line 4: | Line 4: | ||
-webkit-mask-image: url(data:image/svg+xml;utf8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0iIzAwMDAwMCI+PHBhdGggZD0iTTEyLjIgMTMuNmE3IDcgMCAxMTEuNC0xLjRsNS40IDUuNC0xLjQgMS40ek0zIDhhNSA1IDAgMTAxMCAwQTUgNSAwIDAwMyA4Ii8+PC9zdmc+); | -webkit-mask-image: url(data:image/svg+xml;utf8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0iIzAwMDAwMCI+PHBhdGggZD0iTTEyLjIgMTMuNmE3IDcgMCAxMTEuNC0xLjRsNS40IDUuNC0xLjQgMS40ek0zIDhhNSA1IDAgMTAxMCAwQTUgNSAwIDAwMyA4Ii8+PC9zdmc+); | ||
mask-image: url(data:image/svg+xml;utf8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0iIzAwMDAwMCI+PHBhdGggZD0iTTEyLjIgMTMuNmE3IDcgMCAxMTEuNC0xLjRsNS40IDUuNC0xLjQgMS40ek0zIDhhNSA1IDAgMTAxMCAwQTUgNSAwIDAwMyA4Ii8+PC9zdmc+); | mask-image: url(data:image/svg+xml;utf8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0iIzAwMDAwMCI+PHBhdGggZD0iTTEyLjIgMTMuNmE3IDcgMCAxMTEuNC0xLjRsNS40IDUuNC0xLjQgMS40ek0zIDhhNSA1IDAgMTAxMCAwQTUgNSAwIDAwMyA4Ii8+PC9zdmc+); | ||
background-color: # | background-color: #dfdedd; | ||
} | } | ||
| Line 33: | Line 33: | ||
} | } | ||
html | html { | ||
--background-color-base: # | --background-color-base: #191e25; | ||
} | } | ||
body, | |||
.cdx-button:enabled, | |||
.cdx-button.cdx-button--fake-button--enabled, | |||
background: # | .vector-menu-tabs .mw-list-item.selected a, | ||
.vector-menu-tabs .mw-list-item.selected a:visited { | |||
color: #dfdedd; | |||
} | |||
.vector-icon { | |||
filter: invert(1); | |||
-webkit-filter: invert(1); | |||
} | |||
a, | |||
.vector-menu-tabs .mw-list-item a, | |||
.vector-pinnable-element .mw-list-item a, | |||
.vector-dropdown-content .mw-list-item a, | |||
#pt-userpage-2 a:not(.mw-selflink) { | |||
color: #6da5ff; | |||
} | |||
html, | |||
body, | |||
.vector-pinned-container { | |||
background: #191e25; | |||
} | |||
.mw-heading,h1,h2,h3,h4,h5,h6 { | |||
color: #fff; | |||
} | |||
.vector-pinnable-element .vector-menu-heading { | |||
color: #aba6a2; | |||
} | |||
.catlinks { | |||
background-color: #070605; | |||
border: 1px solid #5d564e; | |||
} | |||
.cdx-text-input__input:enabled { | |||
background-color: #000; | |||
color: #dfdedd; | |||
border-color: #5d564e; | |||
} | |||
.cdx-text-input__input:enabled:hover { | |||
border-color: #8d8882; | |||
} | |||
.cdx-text-input__input:disabled { | |||
background-color: #15130f; | |||
color: #8d8882; | |||
-webkit-text-fill-color: #8d8882; | |||
border-color: #37332e; | |||
} | |||
.cdx-button:enabled, | |||
.cdx-button.cdx-button--fake-button--enabled { | |||
background-color: #070605; | |||
color: #dfdedd; | |||
border-color: #5d564e; | |||
} | |||
.cdx-button:enabled:hover, | |||
.cdx-button.cdx-button--fake-button--enabled:hover { | |||
background-color: #000; | |||
color: #bfbdbb; | |||
} | |||
.cdx-button:enabled:active, | |||
.cdx-button.cdx-button--fake-button--enabled:active, | |||
.cdx-button:enabled.cdx-button--is-active, | |||
.cdx-button.cdx-button--fake-button--enabled.cdx-button--is-active { | |||
background-color: #15130f; | |||
color: #fff; | |||
border-color: #8d8882; | |||
} | |||
.cdx-button:disabled, | |||
.cdx-button.cdx-button--fake-button--disabled { | |||
background-color: #37332e; | |||
color: #000; | |||
} | } | ||
Revision as of 22:12, 25 August 2024
@import url(https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap);
.cdx-search-input .cdx-text-input__icon.cdx-text-input__start-icon {
-webkit-mask-image: url(data:image/svg+xml;utf8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0iIzAwMDAwMCI+PHBhdGggZD0iTTEyLjIgMTMuNmE3IDcgMCAxMTEuNC0xLjRsNS40IDUuNC0xLjQgMS40ek0zIDhhNSA1IDAgMTAxMCAwQTUgNSAwIDAwMyA4Ii8+PC9zdmc+);
mask-image: url(data:image/svg+xml;utf8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0iIzAwMDAwMCI+PHBhdGggZD0iTTEyLjIgMTMuNmE3IDcgMCAxMTEuNC0xLjRsNS40IDUuNC0xLjQgMS40ek0zIDhhNSA1IDAgMTAxMCAwQTUgNSAwIDAwMyA4Ii8+PC9zdmc+);
background-color: #dfdedd;
}
html, body {
font-family: Inter, sans-serif;
}
.mw-body h1,
.mw-body .mw-heading1,
.mw-body-content h1,
.mw-body-content .mw-heading1,
.mw-body-content h2,
.mw-body-content .mw-heading2,
.vector-sticky-header-context-bar-primary {
/* fancy heading */
font-family: Inter, sans-serif;
font-weight: 600;
}
@media print {
.toc,
body,
img {
/* fancy heading */
font-family: Inter, sans-serif;
font-weight: 600;
}
}
html {
--background-color-base: #191e25;
}
body,
.cdx-button:enabled,
.cdx-button.cdx-button--fake-button--enabled,
.vector-menu-tabs .mw-list-item.selected a,
.vector-menu-tabs .mw-list-item.selected a:visited {
color: #dfdedd;
}
.vector-icon {
filter: invert(1);
-webkit-filter: invert(1);
}
a,
.vector-menu-tabs .mw-list-item a,
.vector-pinnable-element .mw-list-item a,
.vector-dropdown-content .mw-list-item a,
#pt-userpage-2 a:not(.mw-selflink) {
color: #6da5ff;
}
html,
body,
.vector-pinned-container {
background: #191e25;
}
.mw-heading,h1,h2,h3,h4,h5,h6 {
color: #fff;
}
.vector-pinnable-element .vector-menu-heading {
color: #aba6a2;
}
.catlinks {
background-color: #070605;
border: 1px solid #5d564e;
}
.cdx-text-input__input:enabled {
background-color: #000;
color: #dfdedd;
border-color: #5d564e;
}
.cdx-text-input__input:enabled:hover {
border-color: #8d8882;
}
.cdx-text-input__input:disabled {
background-color: #15130f;
color: #8d8882;
-webkit-text-fill-color: #8d8882;
border-color: #37332e;
}
.cdx-button:enabled,
.cdx-button.cdx-button--fake-button--enabled {
background-color: #070605;
color: #dfdedd;
border-color: #5d564e;
}
.cdx-button:enabled:hover,
.cdx-button.cdx-button--fake-button--enabled:hover {
background-color: #000;
color: #bfbdbb;
}
.cdx-button:enabled:active,
.cdx-button.cdx-button--fake-button--enabled:active,
.cdx-button:enabled.cdx-button--is-active,
.cdx-button.cdx-button--fake-button--enabled.cdx-button--is-active {
background-color: #15130f;
color: #fff;
border-color: #8d8882;
}
.cdx-button:disabled,
.cdx-button.cdx-button--fake-button--disabled {
background-color: #37332e;
color: #000;
}