Alex at 10:11, 18 October 2024

2024-10-18T10:11:53Z

← Older revision		Revision as of 12:11, 18 October 2024
Line 13:		Line 13:
	body.wgl-theme-dark {		body.wgl-theme-dark {
	color-scheme: dark;		color-scheme: dark;
	--body-background-image: url('/images/rss/~~Old_School_RuneScape_Wiki_background_darkmode~~.jpg?width=900px');		--body-background-image: url('/images/rss/background_dark.jpg?width=900px');
	--body-background-color: #071022;		--body-background-color: #071022;
	--body-main: #172136;		--body-main: #172136;

Alex at 16:15, 17 October 2024

2024-10-17T16:15:47Z

← Older revision		Revision as of 18:15, 17 October 2024
Line 13:		Line 13:
	body.wgl-theme-dark {		body.wgl-theme-dark {
	color-scheme: dark;		color-scheme: dark;
	--body-background-image: url('~~filepath:~~//Old_School_RuneScape_Wiki_background_darkmode.jpg?width=900px');		--body-background-image: url('/images/rss/Old_School_RuneScape_Wiki_background_darkmode.jpg?width=900px');
	--body-background-color: #071022;		--body-background-color: #071022;
	--body-main: #172136;		--body-main: #172136;

Alex: Created page with "/** * compiled to MediaWiki:Minerva-darkmode.css; applied when dark mode is * toggled on via MediaWiki:Gadget-skinTogglesMobile.js */ @import 'MediaWiki:Common.less/variables.less'; @import 'MediaWiki:Common.less/mixins.less'; // style browser default forms; :has() is relatively new - shouldnt pose a problem html:has(body.wgl-theme-dark) { color-scheme: dark; } body.wgl-theme-dark { color-scheme: dark; --body-background-image: url('filepath://Old_School..."

2024-10-16T23:11:00Z

Created page with "* * compiled to MediaWiki:Minerva-darkmode.css; applied when dark mode is * toggled on via MediaWiki:Gadget-skinTogglesMobile.js: @import 'MediaWiki:Common.less/variables.less'; @import 'MediaWiki:Common.less/mixins.less'; // style browser default forms; :has() is relatively new - shouldnt pose a problem html:has(body.wgl-theme-dark) { color-scheme: dark; } body.wgl-theme-dark { color-scheme: dark; --body-background-image: url('filepath://Old_School..."

New page

/**
* compiled to [[MediaWiki:Minerva-darkmode.css]]; applied when dark mode is
* toggled on via [[MediaWiki:Gadget-skinTogglesMobile.js]]
*/
@import 'MediaWiki:Common.less/variables.less';
@import 'MediaWiki:Common.less/mixins.less';

// style browser default forms; :has() is relatively new - shouldnt pose a problem
html:has(body.wgl-theme-dark) {
color-scheme: dark;
}

body.wgl-theme-dark {
color-scheme: dark;
--body-background-image: url('filepath://Old_School_RuneScape_Wiki_background_darkmode.jpg?width=900px');
--body-background-color: #071022;
--body-main: #172136;
--body-light: #313e59;
--body-mid: #222e45;
--body-dark: #222e45;
--body-border: #596e96;

--ooui-text: var(--text-color);
--ooui-interface: #222e45; /* from desktop ooui */
--ooui-interface-border: #2f4060;
--ooui-window-background: rgba(25,25,25,0.6);
--ooui-input: #384766;
--ooui-input-border: #475980;
--ooui-input-border--hover: #556c9b;
@ooui-normal: @pickled-bluewood;
--ooui-normal: #313e59;
--ooui-normal--hover: #384766;
--ooui-normal-border: #3f5073;
@ooui-progressive: #8cabe6;
--ooui-progressive: @ooui-progressive;
--ooui-progressive--hover: lighten(@ooui-progressive, 10%);
--ooui-accent: var(--link-color);
--ooui-pending-background-image: repeating-linear-gradient(-45deg,var(--search-box),var(--search-box) 20px,var(--body-main) 20px,var(--body-main) 30px);
--ooui-disabled: desaturate( lighten( @ooui-normal, 32% ), 16%);
--ooui-disabled-border: desaturate( lighten( @ooui-normal, 32% ), 16%);
--ooui-disabled-text: var(--subtle-color);

--link-color: #8cabe6;
--background-link-color: var(--link-color);
--redlink-color: #f26d60;
--text-color: #cbd9f4;
--byline-color: #9aa4b7;
--subtle-color: var(--byline-color);

--admin-blue: #0087ff;
--bearcat-green: #00ff55;
--awb-purple: #f319ff;

--thumb-bg: var(--body-mid);
--thumb-caption-bg: var(--body-light);
--wikitable-header-bg: #222e45;
--wikitable-border: #172136;
--wikitable-bg: #313e59;
--wikitable-bg-lighter: #3a4a69;
--wikitable-color: #cbd9f4;
--wikitable-alternating-bg: #2a3651;
--table-na-background: fade( @black, 20 );
--table-na-color: var(--subtle-color);
--table-yes-background: @san-felix;
--table-yes-color: @caper;
--table-no-background: @mocaccino;
--table-no-color: @apricot-peach;
--table-maybe-background: @cinnamon;
--table-maybe-color: @golden;
--droptable-text-color: @white;
--droptable-always-background: #0b5884;
--droptable-common-background: #3c780a;
--droptable-uncommon-background: #a48900;
--droptable-rare-background: #b55e0c;
--droptable-veryrare-background: #9f261e;
--droptable-random-background: #984c89;
--infobox-bg: #313e59;
--infobox-border: #596e96;
--infobox-header: #172136;
--infobox-subheader: #222e45;
--infobox-text-color: var(--text-color);
--infobox-room-poh-color: @river-bed;
--sidebar: #596e96;
--background-text-color: var(--text-color);
--search-box: #313e59;
--button-background: #617ebc;
--button-dark: #617ebc;
--button-border: #617ebc;
--button-light: #617ebc;
--gemw-name-color: #444e5a;
--gemw-light-text: #555555;
--gemw-time-color: var(--base-text-color);
--gemw-property-border-color: #e4eaee;
--gemw-historical-border-color: var(--body-border);
--gecharts-overlay-bg-color: var(--body-border);
--gecharts-popup-border-color: var(--body-border);
--gecharts-popup-color: var(--text-color);
--mw-code-background-color: #222e45;
--coins-color: #6bc71f;
--coins-pos-color: #3ea6e6;
--coins-neg-color: #ee4231;
--questdetails-header-background: #222e45;
--questdetails-header-background-alt: #222e45;
--transcript-border-color: #596e96;
--transcript-border-hover-color: #8596b7;
--lighttable-bg-hover: @la-palma;
--lighttable-bg-active: @san-felix;
--lighttable-link-color: @caper;
--fact-text-color: #3ea6e6;
--fact-text-border-bottom-color: #8cabe6;
--production-selected-background: #3c780a;
--production-selected-color: #fff;
--wikipedia-border: #313e59;
--wikipedia-background: var(--body-border);
--keypress-background: #313e59;
--keypress-border: var(--body-border);
--keypress-text-shadow: transparent;
--keypress-color: var(--text-color);
--tile-border-color: #596e96;
--tile-background-color: #313e59;
--tile-link-button-color: #222e45;
--tile-link-button-highlight-color: #2a3956;
--tile-dark-color: #fff;
--tile-dark-bg: #5d6773;
--tile-dark-link-color: #ccc;
--tile-dark-byline-color: rgba(255, 255, 255, 0.7);
--tile-dark-header-color: #fff;
--documentation-background: #313e59;
--documentation-border: #222e45;
--documentation-link-color: var(--link-color);
--documentation-headers-color: var(--text-color);
--documentation-header-background: #222e45;
--documentation-subheader-background: #1f293e;
--mw-templatedata-doc-muted-color: #888;
--base-text-color: var(--text-color);
--base-heading-color: var(--text-color);
--base-heading-border: var(--sidebar);
--mainpage-recent-updates-description-color: var(--text-color);
--ajaxpoll-answerbar-background: var(--body-mid);
--errorbox-border: #ee4231;
--warningbox-border: var(--errorbox-border);
--successbox-border: #6bc71f;
--sourceeditor-bg: var(--body-light);
--diff-addedline-background: #438ab5;
--diff-addedline-color: #fff;
--diff-deletedline-background: #9f261e;
--diff-deletedline-color: #fff;
--diff-context-border-color: var(--body-mid);
--diff-context-background: var(--body-mid);
--blockquote-color: var(--text-color);
--errorbox-bg: @mocaccino;
--errorbox-border: @old-brick;
--warningbox-bg: var(--errorbox-bg);
--warningbox-border: var(--errorbox-bg);
--successbox-bg: @san-felix;
--successbox-border: @la-palma;

.mboxvar(obsolete, #464646, #333, #ddd, #bbb);
.mboxvar(info, var(--messagebox-obsolete-background), var(--messagebox-obsolete-border), var(--messagebox-obsolete-color), var(--messagebox-obsolete-link-color));
.mboxvar(action, #45697d, #2d5266, var(--text-color), #b8d5e5);
.mboxvar(warn, #95271b, #6b130a, #f8ebe9, #e8b8b3);
.mboxvar(safe, #1b8408, #126802, #e9f6e7, #c1e0bb);
.mboxvar(disambig, var(--messagebox-obsolete-background), var(--messagebox-obsolete-border), var(--messagebox-obsolete-color), var(--messagebox-obsolete-link-color));

--mobile-navbox-wide-bg-color: #384561;
--mobile-navbox-linear-gradient: linear-gradient(to right, rgba(23, 33, 54, 0), var(--body-main) 95%, var(--body-main));

--tabber-tab-bg: var(--body-light);
--tabber-tab-border-color: var(--body-border);
--tabber-active-tab-bg: var(--body-light);
--tabber-active-tab-color: var(--text-color);
--tabber-active-tab-hover-bg: var(--body-light);
--tabber-active-tab-hover-border-color: var(--body-border);
--tabber-active-tab-hover-color: var(--text-color);
--tabber-active-tab-border-hider-color: var(--body-light);
--tabber-inactive-tab-bg: #222e45;
--tabber-inactive-tab-border-color: var(--body-border);
--tabber-inactive-tab-color: var(--text-color);
--tabber-inactive-tab-hover-bg: var(--body-light);
--tabber-inactive-tab-hover-border-color: var(--body-border);

--rc-negative-color: @flamingo;
--rc-positive-color: @lima;
--filter-black-to-link: invert(63%) sepia(67%) saturate(242%) hue-rotate(182deg) brightness(93%) contrast(94%);

--fieldset-border-color: var(--body-border);
--smw-ask-options-even-bg: var(--body-mid);
--smw-ask-options-odd-bg: var(--body-light);
--smw-ask-action-btn-lblue-bg: #313e59;
--smw-ask-action-btn-lblue-color: #cbd9f4;
--smw-ask-action-btn-lblue-border-color: #3f5073;
--smw-ask-action-btn-dblue-bg: #384766;
--smw-ask-action-btn-dblue-color: #cbd9f4;
--smw-ask-action-btn-dblue-border-color: #475980;

--diff-context-border-color: var(--body-mid);
--diff-context-background: var(--body-mid);

--ajaxpoll-background: var(--body-light);
--ajaxpoll-text-color: var(--base-text-color);
--ajaxpoll-answerbar-background: var(--body-mid);
--ajaxpoll-answerbar-border: var(--body-border);

--sourceeditor-input-background: var(--body-mid);
--sourceeditor-background: var(--body-light);
--sourceeditor-background-secondary: var(--body-mid);
--sourceeditor-border: var(--body-main);

--searchbutton-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cg fill='%23cbd9f4'%3E%3Cpath d='M12.2 13.6a7 7 0 1 1 1.4-1.4l5.4 5.4-1.4 1.4-5.4-5.4zM3 8a5 5 0 1 0 10 0A5 5 0 1 0 3 8z'/%3E%3C/g%3E%3C/svg%3E");

// trailblazer region highlight
--tbz-unlocked-background: repeating-linear-gradient(-45deg, #315d30 0 20px, #13421e 20px 30px);
--tbz-unlocked-border-color: #00e417;

--tbz-locked-background-color: #8a2525;
--tbz-locked-border-color: #b32828;

--tbz-partial-unlock-background: #5a5a5a;
--tbz-partial-unlock-border-color: #13421e;

--external-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cg fill='%238cabe6'%3E%3Cpath d='M8.9 8.9H1.1V1.1h2.8V0H1.1C.5 0 0 .5 0 1.1v7.8C0 9.5.5 10 1.1 10h7.8c.6 0 1.1-.5 1.1-1.1V6.1H8.9v2.8z'/%3E%3Cpath d='M10 0H5.6l1.8 1.8L4.2 5l.8.8 3.2-3.2L10 4.4V0z'/%3E%3C/g%3E%3C/svg%3E");

@codehighlight-background: #222e45;
@import 'MediaWiki:Vector-darkmode.less/codehighlight.less';

/* should later look on how to handle these svgs, (should we really set a var for every svg?) I find it less peculiar to just copy+paste them and then adjust the fill attribute */
a.external,
.mw-parser-output a.external {
background-image: var(--external-icon);
}

.client-js & .sortable:not(.jquery-tablesorter) > * > tr:first-child > th:not(.unsortable),
& .jquery-tablesorter th.headerSort {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21' height='9' viewBox='0 0 21 9'%3E%3Cg fill='%23cbd9f4'%3E%3Cpath d='M14.5 5l-4 4-4-4zM14.5 4l-4-4-4 4z'/%3E%3C/g%3E%3C/svg%3E");
/* styles aren't preloaded like desktop */
cursor: pointer;
background-repeat: no-repeat;
background-position: center right;
padding-right: 21px;
}

& .jquery-tablesorter th.headerSortUp {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21' height='4' viewBox='0 0 21 4'%3E%3Cg fill='%23cbd9f4'%3E%3Cpath d='M6.5 4l4-4 4 4z'/%3E%3C/g%3E%3C/svg%3E");
}

& .jquery-tablesorter th.headerSortDown {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21' height='4' viewBox='0 0 21 4'%3E%3Cg fill='%23cbd9f4'%3E%3Cpath d='M14.5 0l-4 4-4-4z'/%3E%3C/g%3E%3C/svg%3E");
}

.oo-ui-iconElement-icon:not(.oo-ui-image-destructive, .oo-ui-image-warning, .oo-ui-image-progressive, .oo-ui-checkboxInputWidget-checkIcon, .oo-ui-image-invert, .mw-no-invert),
.oo-ui-indicatorElement-indicator,
.mwe-math-element img,
.cdx-button__icon,
.popups-icon,
.soft-redirect > div:nth-child(1) img {
filter: invert(1) hue-rotate(180deg); // hue-rotate to preserve color if possible; not very accurate tho
}

.minerva-icon,
.mf-icon,
.mw-ui-icon-mf-expand {
filter: brightness(0) invert(1);
}
}

MediaWiki:Minerva-darkmode.less - Revision history

Alex at 10:11, 18 October 2024

Alex at 16:15, 17 October 2024