MediaWiki:Colors.css: Difference between revisions
Jump to navigation
Jump to search
No edit summary |
Salty Nori (talk | contribs) (fix diff not showing up) |
||
(9 intermediate revisions by one other user not shown) | |||
Line 1: | Line 1: | ||
:root body:not(.skin-vector-dark) { /* would use .skin-vector-light but there can be neither applied since its JS based so default lightmode */ | :root body:not(.skin-vector-dark) { /* would use .skin-vector-light but there can be neither applied since its JS based so default lightmode */ | ||
--theme-page-text-color: #43403D; /* lighter body font */ | --theme-page-text-color: #43403D; /* lighter body font */ | ||
--theme-page-text-color--inverse: #FFFFFF; | |||
--theme-page-background-color: rgba(255,255,255,0.98); | --theme-page-background-color: rgba(255,255,255,0.98); | ||
--theme-page-background-color--rgb: 255, 255, 255; | --theme-page-background-color--rgb: 255, 255, 255; | ||
--theme-page-background-color--secondary: #f2f2f2; | --theme-page-background-color--secondary: #f2f2f2; | ||
--theme-page-background-color--secondary--rgb: 242,242,242; | --theme-page-background-color--secondary--rgb: 242,242,242; | ||
--theme-link-color: # | --theme-link-color: #327b9a; | ||
--theme-link-color--rgb: | --theme-link-color--rgb: 50,123,154; | ||
--theme-link-color--hover: # | --theme-link-color--hover: #193d4d; | ||
--theme-link-label-color: #fff; | --theme-link-label-color: #fff; | ||
--theme-accent-color: #ddb478; | |||
--theme-accent-color--rgb: 221,180,120; | |||
--theme-accent-color--hover: #be8430; | |||
--theme-accent-label-color: #000; | |||
--theme-border-color: #cecece; | |||
--theme-border-color--rgb: 206,206,206; | |||
--theme-alert-color: #bf0017; | |||
--theme-alert-color--rgb: 191,0,23; | |||
--theme-alert-color--hover: #59000a; | |||
--theme-alert-color--secondary: #bf0017; | |||
--theme-alert-label: #fff; | |||
--theme-warning-color: #cf721c; | |||
--theme-warning-color--rgb: 207,114,28; | |||
--theme-warning-color--secondary: #ce711b; | |||
--theme-warning-label: #000; | |||
--theme-success-color: #0c742f; | |||
--theme-success-color--rgb: 12,116,47; | |||
--theme-success-color--secondary: #0c742f; | |||
--theme-success-label: #fff; | |||
--theme-message-color: #753369; | |||
--theme-message-label: #fff; | |||
--theme-alert-highlight: var(--theme-alert-color); | |||
--theme-alert-highlight--rgb: var(--theme-alert-color--rgb); | |||
--theme-alert-highlight--hover: var(--theme-alert-color--hover); | |||
/* Custom variables */ | /* Custom variables */ | ||
Line 57: | Line 58: | ||
--player: #71A350; | --player: #71A350; | ||
--npc: #8C6233; | --npc: #8C6233; | ||
} | } | ||
:root .skin-vector-dark { | :root .skin-vector-dark { | ||
--theme-page-text-color: #FFFFFF; | --theme-page-text-color: #FFFFFF; | ||
--theme-page-text-color--inverse: #43403D; | |||
--theme-page-background-color: rgb(27, 29, 36, 0.98); | --theme-page-background-color: rgb(27, 29, 36, 0.98); | ||
--theme-page-background-color--rgb: 27, 29, 36; | --theme-page-background-color--rgb: 27, 29, 36; | ||
--theme-page-background-color--secondary: #474747; | --theme-page-background-color--secondary: #474747; | ||
--theme-page-background-color--secondary--rgb: 71,71,71; | --theme-page-background-color--secondary--rgb: 71,71,71; | ||
--theme-link-color: #deb76c; | |||
--theme-link-color--rgb: 222,183,108; | |||
--theme-link-color--hover: #f0dfbf; | |||
--theme-link-color: # | |||
--theme-link-color--rgb: | |||
--theme-link-color--hover: # | |||
--theme-link-label-color: #000; | --theme-link-label-color: #000; | ||
--theme-accent-color: #deb76c; | |||
--theme-accent-color--rgb: 222,183,108; | |||
--theme-accent-color--hover: #ba8829; | |||
--theme-accent-label-color: #000; | |||
--theme-border-color: #4e4f55; | |||
--theme-border-color--rgb: 78,79,85; | |||
--theme-alert-color: #d8001a; | |||
--theme-alert-color--rgb: 216,0,26; | |||
--theme-alert-color--hover: #ff3f56; | |||
--theme-alert-color--secondary: #ff445a; | |||
--theme-alert-label: #fff; | |||
--theme-warning-color: #cf721c; | |||
--theme-warning-color--rgb: 207,114,28; | |||
--theme-warning-color--secondary: #d3741c; | |||
--theme-warning-label: #000; | |||
--theme-success-color: #0c7d32; | |||
--theme-success-color--rgb: 12,125,50; | |||
--theme-success-color--secondary: #0fa240; | |||
--theme-success-label: #fff; | |||
--theme-message-color: #a34792; | |||
--theme-message-label: #fff; | |||
/* Custom variables */ | /* Custom variables */ | ||
Line 90: | Line 105: | ||
--letter-bg: #1C1A1A; | --letter-bg: #1C1A1A; | ||
/* User highlight */ | /* User highlight */ | ||
Line 103: | Line 113: | ||
/* Darker version of alert */ | /* Darker version of alert */ | ||
--theme-alert-highlight: #a90000; | |||
--theme-alert-highlight--rgb: rgb(169,0,0); | |||
--theme-alert-highlight--hover: #c30000; | |||
} | |||
:root { /* universal styles */ | |||
/* Others */ | |||
--gray-900: #1F1E1E; | |||
--gray-800: #272727; | |||
--gray-700: #31302F; | |||
--gray-600: #403F3F; | |||
--gray-500: #545353; | |||
--gray-400: #848181; | |||
--gray-300: #9F9D9D; | |||
--gray-200: #C7C4C4; | |||
--gray-100: #E9E5E5; | |||
--gray-050: #F6F6F6; | |||
--brown-800: #3F3125; | |||
--brown-500: #B38A63; | |||
--brown-400: #CB9E71; | |||
--brown-300: #E4B17F; | |||
--brown-200: #EBC59F; | |||
--brown-100: #EFD8BE; | |||
--brown-050: #F7F2E8; | |||
--light-blue: #C4D6EB; | |||
--gold: #D9A14A; | |||
/* Used by specific modules/functions */ | |||
--border-color: var(--theme-border-color); | |||
} | } | ||
Line 114: | Line 152: | ||
} | } | ||
h1, h2, h3, h4, h5, h6, .mw-body, .editOptions, .ace-tm, .vector-menu-heading, .ace_cursor, .vector-menu-content-list > a, .vector-menu-heading-label { | h1, h2, h3, h4, h5, h6, .mw-body, .editOptions, .ace-tm, .vector-menu-heading, .ace_cursor, .vector-menu-content-list > a, .vector-menu-heading-label { | ||
color: var(--theme-page-text-color) | color: var(--theme-page-text-color); | ||
} | } | ||
.mw-footer, .editOptions, .ace-tm, #mw-panel .vector-menu-heading { | .mw-footer, .editOptions, .ace-tm, #mw-panel .vector-menu-heading { | ||
Line 126: | Line 164: | ||
.skin-vector-dark #mw-notification-area.mw-notification.mw-notification-type-error, | .skin-vector-dark #mw-notification-area.mw-notification.mw-notification-type-error, | ||
.skin-vector-dark .postedit.mw-notification.mw-notification-type-error, | .skin-vector-dark .postedit.mw-notification.mw-notification-type-error, | ||
.skin-vector-dark .wds-table-td-alert | .skin-vector-dark .wds-table-td-alert { | ||
background-color: var(--theme-alert-highlight); | background-color: var(--theme-alert-highlight); | ||
} | } | ||
.text-error { | .text-error { | ||
color: var(--theme-alert-highlight); | color: var(--theme-alert-highlight); | ||
} | |||
/* Revision diff styling */ | |||
.diff td.diff-addedline { | |||
background-color:var(--theme-page-background-color); | |||
border-color:var(--theme-success-color); | |||
border-width:1px 1px 1px 4px | |||
} | |||
.diff td.diff-addedline .diffchange { | |||
background-color:var(--theme-success-color); | |||
color:var(--theme-page-text-color--inverse); | |||
font-weight: normal; | |||
} | |||
.diff td.diff-deletedline { | |||
background-color:var(--theme-page-background-color); | |||
border-color:var(--theme-alert-color); | |||
border-width:1px 1px 1px 4px | |||
} | |||
.diff td.diff-deletedline .diffchange { | |||
background-color:var(--theme-alert-color); | |||
color:var(--theme-page-text-color--inverse); | |||
font-weight: normal; | |||
} | |||
.diff td.diff-context { | |||
background:#0000; | |||
border-color:var(--theme-border-color); | |||
color:var(--theme-page-text-color); | |||
} | |||
.diff-marker a.mw-diff-movedpara-right { | |||
color:#0000 | |||
} | |||
.diff-marker a.mw-diff-movedpara-right:hover:after { | |||
opacity:.75 | |||
} | |||
.diff-marker a.mw-diff-movedpara-right:after { | |||
color:var(--theme-page-text-color); | |||
content:"↩"; | |||
} | |||
.diff-marker a.mw-diff-movedpara-left { | |||
color:#0000 | |||
} | |||
.diff-marker a.mw-diff-movedpara-left:hover:after { | |||
opacity:.75 | |||
} | |||
.diff-marker a.mw-diff-movedpara-left:after { | |||
color:var(--theme-page-text-color); | |||
content:"↪" | |||
} | } | ||
Line 141: | Line 226: | ||
.bg-accent { background-color: var(--color-accent); } | .bg-accent { background-color: var(--color-accent); } | ||
/* CodeMirror */ | |||
.CodeMirror .CodeMirror-scroll { | |||
background: var(--theme-page-background-color); | |||
color: var(--theme-page-text-color); | |||
} | |||
.CodeMirror .CodeMirror-linenumber, .CodeMirror .CodeMirror-gutters { | |||
background: var(--theme-page-background-color--secondary); | |||
color: var(--theme-page-text-color); | |||
} | |||
/* | /* |
Latest revision as of 02:19, 5 August 2024
:root body:not(.skin-vector-dark) { /* would use .skin-vector-light but there can be neither applied since its JS based so default lightmode */
--theme-page-text-color: #43403D; /* lighter body font */
--theme-page-text-color--inverse: #FFFFFF;
--theme-page-background-color: rgba(255,255,255,0.98);
--theme-page-background-color--rgb: 255, 255, 255;
--theme-page-background-color--secondary: #f2f2f2;
--theme-page-background-color--secondary--rgb: 242,242,242;
--theme-link-color: #327b9a;
--theme-link-color--rgb: 50,123,154;
--theme-link-color--hover: #193d4d;
--theme-link-label-color: #fff;
--theme-accent-color: #ddb478;
--theme-accent-color--rgb: 221,180,120;
--theme-accent-color--hover: #be8430;
--theme-accent-label-color: #000;
--theme-border-color: #cecece;
--theme-border-color--rgb: 206,206,206;
--theme-alert-color: #bf0017;
--theme-alert-color--rgb: 191,0,23;
--theme-alert-color--hover: #59000a;
--theme-alert-color--secondary: #bf0017;
--theme-alert-label: #fff;
--theme-warning-color: #cf721c;
--theme-warning-color--rgb: 207,114,28;
--theme-warning-color--secondary: #ce711b;
--theme-warning-label: #000;
--theme-success-color: #0c742f;
--theme-success-color--rgb: 12,116,47;
--theme-success-color--secondary: #0c742f;
--theme-success-label: #fff;
--theme-message-color: #753369;
--theme-message-label: #fff;
--theme-alert-highlight: var(--theme-alert-color);
--theme-alert-highlight--rgb: var(--theme-alert-color--rgb);
--theme-alert-highlight--hover: var(--theme-alert-color--hover);
/* Custom variables */
--theme-alt-text: #FFF;
--theme-accent-bg: #E2EEF2;
--theme-infobox-bg: #FCFAF9;
--color-player: #69ac52;
--color-accent: #d89e43;
--card-bg-main: #F6E6CF;
--card-bg-sub: #E9CDA2;
--letter-bg: #FAF3EA;
/* User highlight */
--custom-admin-highlight: #c05822;
--custom-contentmoderator-highlight: #6368e6;
--custom-bot-color: #999999;
--custom-bot-font-style: italic;
--accent: #F6816C;
--player: #71A350;
--npc: #8C6233;
}
:root .skin-vector-dark {
--theme-page-text-color: #FFFFFF;
--theme-page-text-color--inverse: #43403D;
--theme-page-background-color: rgb(27, 29, 36, 0.98);
--theme-page-background-color--rgb: 27, 29, 36;
--theme-page-background-color--secondary: #474747;
--theme-page-background-color--secondary--rgb: 71,71,71;
--theme-link-color: #deb76c;
--theme-link-color--rgb: 222,183,108;
--theme-link-color--hover: #f0dfbf;
--theme-link-label-color: #000;
--theme-accent-color: #deb76c;
--theme-accent-color--rgb: 222,183,108;
--theme-accent-color--hover: #ba8829;
--theme-accent-label-color: #000;
--theme-border-color: #4e4f55;
--theme-border-color--rgb: 78,79,85;
--theme-alert-color: #d8001a;
--theme-alert-color--rgb: 216,0,26;
--theme-alert-color--hover: #ff3f56;
--theme-alert-color--secondary: #ff445a;
--theme-alert-label: #fff;
--theme-warning-color: #cf721c;
--theme-warning-color--rgb: 207,114,28;
--theme-warning-color--secondary: #d3741c;
--theme-warning-label: #000;
--theme-success-color: #0c7d32;
--theme-success-color--rgb: 12,125,50;
--theme-success-color--secondary: #0fa240;
--theme-success-label: #fff;
--theme-message-color: #a34792;
--theme-message-label: #fff;
/* Custom variables */
--theme-alt-text: #383533;
--theme-accent-bg: #403F3F;
--theme-infobox-bg: #222020;
--color-player: #69ac52;
--color-accent: #d89e43;
--card-bg-main: #2C2C2C;
--card-bg-sub: #474746;
--letter-bg: #1C1A1A;
/* User highlight */
--custom-admin-highlight: #F6816C;
--custom-contentmoderator-highlight: #8796ff;
--custom-bot-color: #999999;
--custom-bot-font-style: italic;
/* Darker version of alert */
--theme-alert-highlight: #a90000;
--theme-alert-highlight--rgb: rgb(169,0,0);
--theme-alert-highlight--hover: #c30000;
}
:root { /* universal styles */
/* Others */
--gray-900: #1F1E1E;
--gray-800: #272727;
--gray-700: #31302F;
--gray-600: #403F3F;
--gray-500: #545353;
--gray-400: #848181;
--gray-300: #9F9D9D;
--gray-200: #C7C4C4;
--gray-100: #E9E5E5;
--gray-050: #F6F6F6;
--brown-800: #3F3125;
--brown-500: #B38A63;
--brown-400: #CB9E71;
--brown-300: #E4B17F;
--brown-200: #EBC59F;
--brown-100: #EFD8BE;
--brown-050: #F7F2E8;
--light-blue: #C4D6EB;
--gold: #D9A14A;
/* Used by specific modules/functions */
--border-color: var(--theme-border-color);
}
/* Use vars */
#content.mw-body, .parsoid-body {
background-color: var(--theme-page-background-color) !important;
border: 10px solid var(--theme-page-background-color);
}
h1, h2, h3, h4, h5, h6, .mw-body, .editOptions, .ace-tm, .vector-menu-heading, .ace_cursor, .vector-menu-content-list > a, .vector-menu-heading-label {
color: var(--theme-page-text-color);
}
.mw-footer, .editOptions, .ace-tm, #mw-panel .vector-menu-heading {
background-color: var(--theme-page-background-color) !important;
}
.ace-tm .ace_gutter, .selected.mw-list-item, #mw-panel .vector-menu-content-list {
background-color: var(--theme-page-background-color--secondary) !important;
}
/* Change color of classes that used alert-color as bg color */
.skin-vector-dark #mw-notification-area.mw-notification.mw-notification-type-error,
.skin-vector-dark .postedit.mw-notification.mw-notification-type-error,
.skin-vector-dark .wds-table-td-alert {
background-color: var(--theme-alert-highlight);
}
.text-error {
color: var(--theme-alert-highlight);
}
/* Revision diff styling */
.diff td.diff-addedline {
background-color:var(--theme-page-background-color);
border-color:var(--theme-success-color);
border-width:1px 1px 1px 4px
}
.diff td.diff-addedline .diffchange {
background-color:var(--theme-success-color);
color:var(--theme-page-text-color--inverse);
font-weight: normal;
}
.diff td.diff-deletedline {
background-color:var(--theme-page-background-color);
border-color:var(--theme-alert-color);
border-width:1px 1px 1px 4px
}
.diff td.diff-deletedline .diffchange {
background-color:var(--theme-alert-color);
color:var(--theme-page-text-color--inverse);
font-weight: normal;
}
.diff td.diff-context {
background:#0000;
border-color:var(--theme-border-color);
color:var(--theme-page-text-color);
}
.diff-marker a.mw-diff-movedpara-right {
color:#0000
}
.diff-marker a.mw-diff-movedpara-right:hover:after {
opacity:.75
}
.diff-marker a.mw-diff-movedpara-right:after {
color:var(--theme-page-text-color);
content:"↩";
}
.diff-marker a.mw-diff-movedpara-left {
color:#0000
}
.diff-marker a.mw-diff-movedpara-left:hover:after {
opacity:.75
}
.diff-marker a.mw-diff-movedpara-left:after {
color:var(--theme-page-text-color);
content:"↪"
}
/* For [[Template:Color]] */
.text-player, .text-player * { color: var(--color-player); }
.bg-player { background-color: var(--color-player); }
.text-accent, .text-accent * { color: var(--color-accent); }
.bg-accent { background-color: var(--color-accent); }
/* CodeMirror */
.CodeMirror .CodeMirror-scroll {
background: var(--theme-page-background-color);
color: var(--theme-page-text-color);
}
.CodeMirror .CodeMirror-linenumber, .CodeMirror .CodeMirror-gutters {
background: var(--theme-page-background-color--secondary);
color: var(--theme-page-text-color);
}
/*
USER HIGHLIGHT
Please keep list alphabetized
*/
/* Admin */
a[href="https://coralisland.wiki/wiki/User:Mikevoir"], a[href="/wiki/User:Mikevoir"], a[href="/wiki/Special:Contributions/Mikevoir"],
a[href="https://coralisland.wiki/wiki/User:Novell"], a[href="/wiki/User:Novell"], a[href="/wiki/Special:Contributions/Novell"],
a[href="https://coralisland.wiki/wiki/User:Salty_Nori"], a[href="/wiki/User:Salty_Nori"], a[href="/wiki/Special:Contributions/Salty_Nori"]
{
color: var(--custom-admin-highlight);
}
/* Content moderator
a[href="https://coralisland.wiki/wiki/User:NAME"], a[href="/wiki/User:NAME"], a[href="/wiki/Special:Contributions/NAME"]
{
color: var(--custom-contentmoderator-highlight);
}
*/
/* Bots */
a[href="https://coralisland.wiki/wiki/User:NoriBot"], a[href="/wiki/User:NoriBot"], a[href="/wiki/Special:Contributions/NoriBot"],
a[href="https://coralisland.wiki/wiki/User:VoirBot"], a[href="/wiki/User:VoirBot"], a[href="/wiki/Special:Contributions/VoirBot"]
{
color: var(--custom-bot-color);
font-style: var(--custom-bot-font-style);
}