MediaWiki:Common.css/src/theme/OOUI.scss
< MediaWiki:Common.css | src
Jump to navigation
Jump to search
This page is one of the SCSS pages which are the basis for MediaWiki:Common.css. After you edit this page, you will need to recompile them for your changes to take effect. See Terraria Wiki:CSS to learn more.
Ancestors: / src / theme / OOUI.scss
Siblings: OOUI.scss catlinks.scss footer.scss navbar.scss sidebar.scss
Children: (none)
/********* OOUI theming *********/
:root {
/* These helper variables are defined for reuse in the variable definitions below */
--oouihelper--red: #b32424;
--oouihelper--red-darker: #551111;
--oouihelper--red-lighter: #f04848;
--oouihelper--red-lighter-transparent: rgba(240, 72, 72, 0.6); /* #f0484899 */
--oouihelper--red-lightest: #ff5959;
// @theme Underground {
// }
@theme Snow {
--oouihelper--red: #900000;
--oouihelper--red-darker: #491010;
--oouihelper--red-lighter: #b40000;
--oouihelper--red-lightest: #bc0000;
}
// @theme Jungle {
// }
// @theme Hallowed {
// }
// @theme Crimson {
// }
// @theme Corruption {
// }
// @theme Legacy {
// }
--oouihelper--yellow: #ac6600;
--oouihelper--yellow-darker: #4d2e00;
--oouihelper--yellow-lighter: #ffcc33;
// @theme Underground {
// }
// @theme Snow {
// }
// @theme Jungle {
// }
// @theme Hallowed {
// }
// @theme Crimson {
// }
// @theme Corruption {
// }
// @theme Legacy {
// }
--oouihelper--green: #006633;
--oouihelper--green-darker: #00331a;
--oouihelper--green-lighter: #00e673;
// @theme Underground {
// }
// @theme Snow {
// }
// @theme Jungle {
// }
// @theme Hallowed {
// }
// @theme Crimson {
// }
// @theme Corruption {
// }
// @theme Legacy {
// }
--oouihelper--progressive: #9fecf0;
--oouihelper--progressive-transparent: rgba(159, 236, 240, 0.6); /* #9fecf099; */
--oouihelper--progressive-lighter: #a7eef1;
@theme Underground {
--oouihelper--progressive: var(--theme-link-color);
--oouihelper--progressive-transparent: rgba(var(--theme-link-color--rgb), 0.6);
--oouihelper--progressive-lighter: rgba(var(--theme-link-color--rgb), 0.8);
}
@theme Snow {
--oouihelper--progressive: var(--theme-link-color);
--oouihelper--progressive-transparent: rgba(var(--theme-link-color--rgb), 0.6);
--oouihelper--progressive-lighter: rgba(var(--theme-link-color--rgb), 0.8);
}
@theme Jungle {
--oouihelper--progressive: var(--theme-link-color);
--oouihelper--progressive-transparent: rgba(var(--theme-link-color--rgb), 0.6);
--oouihelper--progressive-lighter: rgba(var(--theme-link-color--rgb), 0.8);
}
@theme Hallowed {
--oouihelper--progressive: var(--theme-link-color);
--oouihelper--progressive-transparent: rgba(var(--theme-link-color--rgb), 0.6);
--oouihelper--progressive-lighter: rgba(var(--theme-link-color--rgb), 0.8);
}
@theme Crimson {
--oouihelper--progressive: var(--theme-link-color);
--oouihelper--progressive-transparent: rgba(var(--theme-link-color--rgb), 0.6);
--oouihelper--progressive-lighter: rgba(var(--theme-link-color--rgb), 0.8);
}
@theme Corruption {
--oouihelper--progressive: var(--theme-link-color);
--oouihelper--progressive-transparent: rgba(var(--theme-link-color--rgb), 0.6);
--oouihelper--progressive-lighter: rgba(var(--theme-link-color--rgb), 0.8);
}
@theme Legacy {
--oouihelper--progressive: var(--theme-link-color);
--oouihelper--progressive-transparent: rgba(var(--theme-link-color--rgb), 0.6);
--oouihelper--progressive-lighter: rgba(var(--theme-link-color--rgb), 0.8);
}
--oouihelper--disabled: #b3b3b3;
--oouihelper--disabled-lighter-transparent: rgba(196, 196, 196, 0.5);
--oouihelper--disabled-darker-transparent: rgba(128, 128, 128, 0.5);
@theme Underground {
--oouihelper--disabled: var(--theme-text-color-note);
}
@theme Snow {
--oouihelper--disabled: #666;
--oouihelper--disabled-lighter-transparent: rgba(100, 100, 100, 0.1);
--oouihelper--disabled-darker-transparent: rgba(10, 10, 10, 0.1);
}
@theme Jungle {
--oouihelper--disabled: var(--theme-text-color-note);
}
@theme Hallowed {
--oouihelper--disabled: var(--theme-text-color-note);
--oouihelper--disabled-darker-transparent: rgba(196, 196, 196, 0.5);
}
@theme Crimson {
--oouihelper--disabled: var(--theme-text-color-note);
}
@theme Corruption {
--oouihelper--disabled: var(--theme-text-color-note);
}
@theme Legacy {
--oouihelper--disabled: var(--theme-text-color-note);
--oouihelper--disabled-darker-transparent: rgba(128, 128, 128, 0.35);
}
--oouihelper--borderdark: #000;
--oouihelper--borderdark-lighter: #0e0c0c;
--oouihelper--borderdark-hover: #72777d;
--oouihelper--borderdark-focus: var(--oouihelper--progressive);
@theme Underground {
--oouihelper--borderdark: var(--theme-border-color);
--oouihelper--borderdark-lighter: rgba(var(--theme-border-color--rgb), 0.85);
--oouihelper--borderdark-hover: rgba(var(--theme-border-color--rgb), 0.9);
}
@theme Snow {
--oouihelper--borderdark: var(--theme-border-color);
--oouihelper--borderdark-lighter: rgba(var(--theme-border-color--rgb), 0.85);
--oouihelper--borderdark-hover: rgba(var(--theme-border-color--rgb), 0.9);
}
@theme Jungle {
--oouihelper--borderdark: var(--theme-border-color);
--oouihelper--borderdark-lighter: rgba(var(--theme-border-color--rgb), 0.85);
--oouihelper--borderdark-hover: rgba(var(--theme-border-color--rgb), 0.9);
}
@theme Hallowed {
--oouihelper--borderdark: var(--theme-border-color);
--oouihelper--borderdark-lighter: rgba(var(--theme-border-color--rgb), 0.85);
--oouihelper--borderdark-hover: rgba(var(--theme-border-color--rgb), 0.9);
}
@theme Crimson {
--oouihelper--borderdark: var(--theme-border-color);
--oouihelper--borderdark-lighter: rgba(var(--theme-border-color--rgb), 0.85);
--oouihelper--borderdark-hover: rgba(var(--theme-border-color--rgb), 0.9);
}
@theme Corruption {
--oouihelper--borderdark: var(--theme-border-color);
--oouihelper--borderdark-lighter: rgba(var(--theme-border-color--rgb), 0.85);
--oouihelper--borderdark-hover: rgba(var(--theme-border-color--rgb), 0.9);
}
@theme Legacy {
--oouihelper--borderdark: var(--theme-border-color);
--oouihelper--borderdark-lighter: rgba(var(--theme-border-color--rgb), 0.85);
--oouihelper--borderdark-hover: rgba(var(--theme-border-color--rgb), 0.9);
}
--oouihelper--textinput-background: rgba(20, 20, 20, 0.65);
--oouihelper--textinput-background-lighter: rgba(30, 30, 30, 0.65);
--oouihelper--textinput-background-darker: rgba(20, 20, 20, 0.9);
// @theme Underground {
// }
@theme Snow {
--oouihelper--textinput-background: rgba(100, 100, 110, 0.1);
--oouihelper--textinput-background-lighter: rgba(130, 130, 140, 0.1);
--oouihelper--textinput-background-darker: rgba(80, 80, 90, 0.2);
}
// @theme Jungle {
// }
// @theme Hallowed {
// }
// @theme Crimson {
// }
// @theme Corruption {
// }
@theme Legacy {
--oouihelper--textinput-background: rgba(90, 90, 90, 0.05);
--oouihelper--textinput-background-lighter: rgba(130, 130, 130, 0.05);
--oouihelper--textinput-background-darker: rgba(30, 30, 30, 0.05);
}
--oouihelper--placeholdertext: rgba(234, 227, 209, 0.4);
@theme Underground {
--oouihelper--placeholdertext: var(--theme-text-color-note);
}
@theme Snow {
--oouihelper--placeholdertext: var(--theme-text-color-note);
}
@theme Jungle {
--oouihelper--placeholdertext: var(--theme-text-color-note);
}
@theme Hallowed {
--oouihelper--placeholdertext: var(--theme-text-color-note);
}
@theme Crimson {
--oouihelper--placeholdertext: var(--theme-text-color-note);
}
@theme Corruption {
--oouihelper--placeholdertext: var(--theme-text-color-note);
}
@theme Legacy {
--oouihelper--placeholdertext: var(--theme-text-color-note);
}
--oouihelper--themerelated: #a58350;
--oouihelper--themerelated-lighter: #cdab78;
--oouihelper--themerelated-lighter-transparent: rgba(171, 120, 84, 0.6);
--oouihelper--themerelated-lightest: #e6dbcb;
--oouihelper--themerelated-darker: #785f3a;
--oouihelper--themerelated-darkest: #342919;
--oouihelper--themerelated-disabled: rgba(230, 219, 203, 0.25);
--oouihelper--themerelated-disabled-lighter: rgba(238, 231, 221, 0.25);
@theme Underground {
--oouihelper--themerelated: #8696b6;
--oouihelper--themerelated-lighter: #9caccc;
--oouihelper--themerelated-lighter-transparent: rgba(156, 172, 204, 0.6);
--oouihelper--themerelated-lightest: #b7c7e6;
--oouihelper--themerelated-darker: #62708a;
--oouihelper--themerelated-darkest: #4b586e;
--oouihelper--themerelated-disabled: rgba(134, 150, 182, 0.1);
--oouihelper--themerelated-disabled-lighter: rgba(156, 172, 204, 0.6);
}
@theme Snow {
--oouihelper--themerelated: #adb0b1;
--oouihelper--themerelated-lighter: #b7babd;
--oouihelper--themerelated-lighter-transparent: rgba(197, 200, 204, 0.6);
--oouihelper--themerelated-lightest: #c6c9ce;
--oouihelper--themerelated-darker: #808588;
--oouihelper--themerelated-darkest: #5e6569;
--oouihelper--themerelated-disabled: rgba(128, 133, 136, 0.1);
--oouihelper--themerelated-disabled-lighter: rgb(183, 186, 189);
}
@theme Jungle {
--oouihelper--themerelated: #aeb47b;
--oouihelper--themerelated-lighter: #c4c990;
--oouihelper--themerelated-lighter-transparent: rgba(196, 201, 144, 0.6);
--oouihelper--themerelated-lightest: #dee3a9;
--oouihelper--themerelated-darker: #838857;
--oouihelper--themerelated-darkest: #696e40;
--oouihelper--themerelated-disabled: rgba(174, 180, 123, 0.1);
--oouihelper--themerelated-disabled-lighter: rgba(196, 201, 144, 0.6);
}
@theme Hallowed {
--oouihelper--themerelated: #e2a9be;
--oouihelper--themerelated-lighter: #f3c2d4;
--oouihelper--themerelated-lighter-transparent: rgba(243, 194, 212, 0.6);
--oouihelper--themerelated-lightest: #fedae8;
--oouihelper--themerelated-darker: #bf8499;
--oouihelper--themerelated-darkest: #9e677a;
--oouihelper--themerelated-disabled: rgba(226, 169, 190, 0.1);
--oouihelper--themerelated-disabled-lighter: rgba(243, 194, 212, 0.6);
}
@theme Crimson {
--oouihelper--themerelated: #d89076;
--oouihelper--themerelated-lighter: #f4bca8;
--oouihelper--themerelated-lighter-transparent: rgba(244, 188, 168, 0.6);
--oouihelper--themerelated-lightest: #ffdfd4;
--oouihelper--themerelated-darker: #d17759;
--oouihelper--themerelated-darkest: #a14b37;
--oouihelper--themerelated-disabled: rgba(232, 171, 149, 0.1);
--oouihelper--themerelated-disabled-lighter: rgba(247, 207, 193, 0.6);
}
@theme Corruption {
--oouihelper--themerelated: #94829c;
--oouihelper--themerelated-lighter: #a693ae;
--oouihelper--themerelated-lighter-transparent: rgba(166, 147, 174, 0.6);
--oouihelper--themerelated-lightest: #c7b4cf;
--oouihelper--themerelated-darker: #7f6789;
--oouihelper--themerelated-darkest: #61496b;
--oouihelper--themerelated-disabled: rgba(148, 130, 156, 0.1);
--oouihelper--themerelated-disabled-lighter: rgba(166, 147, 174, 0.6);
}
@theme Legacy {
--oouihelper--themerelated: #134ead;
--oouihelper--themerelated-lighter: #3471d2;
--oouihelper--themerelated-lighter-transparent: rgba(52, 113, 210, 0.6);
--oouihelper--themerelated-lightest: #6599ed;
--oouihelper--themerelated-darker: #032c6f;
--oouihelper--themerelated-darkest: #012764;
--oouihelper--themerelated-disabled: rgba(19, 78, 173, 0.1);
--oouihelper--themerelated-disabled-lighter: rgba(52, 113, 210, 0.6);
}
--oouihelper--text-background: #2c2421;
@theme Underground {
--oouihelper--text-deeper: var(--theme-text-color);
}
@theme Snow {
--oouihelper--text-background: #eaeef1;
--oouihelper--text-deeper: var(--theme-text-color);
}
@theme Jungle {
--oouihelper--text-deeper: var(--theme-text-color);
}
@theme Hallowed {
--oouihelper--text-deeper: var(--theme-text-color);
}
@theme Crimson {
--oouihelper--text-deeper: var(--theme-text-color);
}
@theme Corruption {
--oouihelper--text-deeper: var(--theme-text-color);
}
@theme Legacy {
--oouihelper--text-background: #f9f9f9;
--oouihelper--text-deeper: var(--theme-text-color);
}
/* ---------------------------------------------- */
/* Actual OOUI variables, grouped by element type */
/* misc */
--ooui--inlinehelp-color: var(--theme-text-color-note);
--ooui--disabled-color: var(--oouihelper--disabled);
// @theme Underground {
// }
// @theme Snow {
// }
// @theme Jungle {
// }
// @theme Hallowed {
// }
// @theme Crimson {
// }
// @theme Corruption {
// }
// @theme Legacy {
// }
/* all buttons */
--ooui--button-background--hover: #7b573d url(https://terraria.wiki.gg/images/d/d4/Button-background-overworld.jpg) center center / cover repeat-x;
--ooui--button-background: linear-gradient(rgba(20, 20, 20, 0.2), rgba(20, 20, 20, 0.2)), var(--ooui--button-background--hover);
--ooui--button-box-shadow: rgba(10, 10, 10, 0.5) 2px 2px 3px;
--ooui--button-box-shadow--focus: inset var(--oouihelper--themerelated-lighter-transparent) 0 0 0 2px;
@theme Underground {
--ooui--button-background--hover: #7b573d url(https://terraria.wiki.gg/images/0/0a/Button-background-underground.jpg) center center / cover repeat-x;
}
@theme Snow {
--ooui--button-background--hover: #7b573d url(https://terraria.wiki.gg/images/7/71/Button-background-snow.jpg) center center / cover repeat-x;
--ooui--button-background: linear-gradient(rgba(100, 100, 100, 0.05), rgba(100, 100, 100, 0.05)), var(--ooui--button-background--hover);
--ooui--button-box-shadow: rgba(50, 50, 60, 0.15) 2px 2px 3px;
}
@theme Jungle {
--ooui--button-background--hover: #7b573d url(https://terraria.wiki.gg/images/a/a0/Button-background-jungle.jpg) center center / cover repeat-x;
}
@theme Hallowed {
--ooui--button-background--hover: #7b573d url(https://terraria.wiki.gg/images/4/4d/Button-background-hallowed.jpg) center center / cover repeat-x;
}
@theme Crimson {
--ooui--button-background--hover: #7b573d url(https://terraria.wiki.gg/images/1/17/Button-background-crimson.jpg) center center / cover repeat-x;
}
@theme Corruption {
--ooui--button-background--hover: #7b573d url(https://terraria.wiki.gg/images/4/43/Button-background-corruption.jpg) center center / cover repeat-x;
}
@theme Legacy {
--ooui--button-background--hover: rgba(200, 200, 200, 0.15);
--ooui--button-background: rgba(200, 200, 200, 0.35);
--ooui--button-box-shadow: none;
--ooui--button-box-shadow--focus: none;
}
/* "normal" button */
--ooui--button-border-top: 1px solid rgba(151, 107, 69, 0.7);
--ooui--button-border-right: 1px solid rgba(86, 47, 33, 0.7);
--ooui--button-border-bottom: var(--ooui--button-border-right);
--ooui--button-border-left: var(--ooui--button-border-top);
--ooui--button-border-top--hover: 1px solid rgb(151, 107, 69);
--ooui--button-border-right--hover: 1px solid rgb(86, 47, 33);
--ooui--button-border-bottom--hover: var(--ooui--button-border-right--hover);
--ooui--button-border-left--hover: var(--ooui--button-border-top--hover);
--ooui--button-color: var(--theme-text-color);
--ooui--button-color--hover: var(--theme-text-color-highlight);
@theme Underground {
--ooui--button-border-top: 1px solid rgba(120, 118, 162, 0.7);
--ooui--button-border-right: 1px solid rgba(63, 44, 92, 0.7);
--ooui--button-border-top--hover: 1px solid rgb(120, 118, 162);
--ooui--button-border-right--hover: 1px solid rgb(63, 44, 92);
--ooui--button-color--hover: var(--oouihelper--text-deeper);
}
@theme Snow {
--ooui--button-border-top: 1px solid rgb(191, 200, 221);
--ooui--button-border-right: 1px solid rgb(68, 51, 89);
--ooui--button-border-top--hover: 1px solid rgba(191, 200, 221, 0.5);
--ooui--button-border-right--hover: 1px solid rgba(191, 200, 221, 0.5);
--ooui--button-color--hover: var(--oouihelper--text-deeper);
}
@theme Jungle {
--ooui--button-border-top: 1px solid rgba(189, 205, 101, 0.7);
--ooui--button-border-right: 1px solid rgba(33, 86, 76, 0.7);
--ooui--button-border-top--hover: 1px solid rgb(189, 205, 101);
--ooui--button-border-right--hover: 1px solid rgb(33, 86, 76);
--ooui--button-color--hover: var(--oouihelper--text-deeper);
}
@theme Hallowed {
--ooui--button-border-top: 1px solid rgba(218, 147, 214, 0.7);
--ooui--button-border-right: 1px solid rgba(47, 28, 67, 0.7);
--ooui--button-border-top--hover: 1px solid rgb(218, 147, 214);
--ooui--button-border-right--hover: 1px solid rgb(47, 28, 67);
--ooui--button-color--hover: var(--oouihelper--text-deeper);
}
@theme Crimson {
--ooui--button-border-top: 1px solid rgba(208, 112, 162, 0.7);
--ooui--button-border-right: 1px solid rgba(76, 33, 86, 0.7);
--ooui--button-border-top--hover: 1px solid rgb(208, 112, 162);
--ooui--button-border-right--hover: 1px solid rgb(76, 33, 86);
--ooui--button-color--hover: var(--oouihelper--text-deeper);
}
@theme Corruption {
--ooui--button-border-top: 1px solid rgba(143, 119, 155, 0.7);
--ooui--button-border-right: 1px solid rgba(57, 33, 86, 0.7);
--ooui--button-border-top--hover: 1px solid rgb(143, 119, 155);
--ooui--button-border-right--hover: 1px solid rgb(57, 33, 86);
--ooui--button-color--hover: var(--oouihelper--text-deeper);
}
@theme Legacy {
--ooui--button-border-top: 1px solid var(--theme-border-color);
--ooui--button-border-right: var(--ooui--button-border-top);
--ooui--button-border-bottom: var(--ooui--button-border-top);
--ooui--button-border-top--hover: 1px solid rgba(var(--theme-border-color--rgb), 0.75);
--ooui--button-border-right--hover: var(--ooui--button-border-top--hover);
--ooui--button-border-bottom--hover: var(--ooui--button-border-top--hover);
--ooui--button-color--hover: var(--oouihelper--text-deeper);
}
/* "progressive" button */
--ooui--button-progressive-color: var(--oouihelper--progressive);
--ooui--button-progressive-color--hover: var(--oouihelper--progressive-lighter);
--ooui--button-progressive-box-shadow--focus: inset var(--oouihelper--progressive-transparent) 0 0 0 2px;
--ooui--button-progressive-primary-border-color: var(--oouihelper--progressive);
--ooui--button-progressive-primary-border-color--hover: var(--oouihelper--progressive-lighter);
// @theme Underground {
// }
// @theme Snow {
// }
// @theme Jungle {
// }
// @theme Hallowed {
// }
// @theme Crimson {
// }
// @theme Corruption {
// }
// @theme Legacy {
// }
/* "destructive" button */
--ooui--button-destructive-color: var(--oouihelper--red-lighter);
--ooui--button-destructive-color--hover: var(--oouihelper--red-lightest);
--ooui--button-destructive-box-shadow--focus: inset var(--oouihelper--red-lighter-transparent) 0 0 0 2px;
--ooui--button-destructive-primary-border-color: var(--oouihelper--red-lighter);
--ooui--button-destructive-primary-border-color--hover: var(--oouihelper--red-lightest);
// @theme Underground {
// }
// @theme Snow {
// }
// @theme Jungle {
// }
// @theme Hallowed {
// }
// @theme Crimson {
// }
// @theme Corruption {
// }
// @theme Legacy {
// }
/* disabled button */
--ooui--button-disabled-color: var(--oouihelper--disabled);
--ooui--button-disabled-background: linear-gradient(var(--oouihelper--disabled-darker-transparent), var(--oouihelper--disabled-darker-transparent)), var(--ooui--button-background--hover);
--ooui--button-disabled-border-top: 1px solid rgba(126, 109, 93, 0.7);
--ooui--button-disabled-border-right: 1px solid rgba(70, 53, 47, 0.7);
--ooui--button-disabled-border-bottom: var(--ooui--button-disabled-border-right);
--ooui--button-disabled-border-left: var(--ooui--button-disabled-border-top);
// @theme Underground {
// }
// @theme Snow {
// }
// @theme Jungle {
// }
// @theme Hallowed {
// }
// @theme Crimson {
// }
// @theme Corruption {
// }
// @theme Legacy {
// }
/* frameless button */
--ooui--button-frameless-on-color: var(--theme-text-color-highlight);
@theme Underground {
--ooui--button-frameless-on-color: var(--oouihelper--text-deeper);
}
@theme Snow {
--ooui--button-frameless-on-color: var(--oouihelper--text-deeper);
}
@theme Jungle {
--ooui--button-frameless-on-color: var(--oouihelper--text-deeper);
}
@theme Hallowed {
--ooui--button-frameless-on-color: var(--oouihelper--text-deeper);
}
@theme Crimson {
--ooui--button-frameless-on-color: var(--oouihelper--text-deeper);
}
@theme Corruption {
--ooui--button-frameless-on-color: var(--oouihelper--text-deeper);
}
@theme Legacy {
--ooui--button-frameless-on-color: var(--oouihelper--text-deeper);
}
/* textarea */
--ooui--textarea-background-color: var(--oouihelper--textinput-background);
--ooui--textarea-placeholder-color: var(--oouihelper--placeholdertext);
--ooui--textarea-border-color: var(--oouihelper--borderdark);
--ooui--textarea-border-color--hover: var(--oouihelper--borderdark-hover);
--ooui--textarea-border-color--focus: var(--oouihelper--borderdark-focus);
--ooui--textarea-invalid-border-color: var(--oouihelper--red-lighter);
--ooui--textarea-readonly-background-color: var(--oouihelper--textinput-background-darker);
--ooui--textarea-disabled-color: var(--oouihelper--disabled);
--ooui--textarea-disabled-border-color: var(--oouihelper--disabled-lighter-transparent);
--ooui--textarea-disabled-background-color: var(--oouihelper--disabled-darker-transparent);
--ooui--textarea-pending-background-color-1: rgba(20, 20, 20, 0.9);
--ooui--textarea-pending-background-color-2: #000;
// @theme Underground {
// }
// @theme Snow {
// }
// @theme Jungle {
// }
// @theme Hallowed {
// }
// @theme Crimson {
// }
// @theme Corruption {
// }
// @theme Legacy {
// }
/* checkbox */
--ooui--checkbox-border-color: var(--oouihelper--themerelated);
--ooui--checkbox-border-color--hover: var(--oouihelper--themerelated-lighter);
$ooui--checkbox-icon-hex: "a58350";
$ooui--checkbox-icon--hover-hex: "cdab78";
--ooui--checkbox-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2220%22 height=%2220%22 viewBox=%220 0 20 20%22%3E%3Ctitle%3Echeck%3C/title%3E%3Cg fill=%22%23#{$ooui--checkbox-icon-hex}%22%3E%3Cpath d=%22M7 14.17L2.83 10l-1.41 1.41L7 17 19 5l-1.41-1.42z%22/%3E%3C/g%3E%3C/svg%3E");
--ooui--checkbox-icon--hover: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2220%22 height=%2220%22 viewBox=%220 0 20 20%22%3E%3Ctitle%3Echeck%3C/title%3E%3Cg fill=%22%23#{$ooui--checkbox-icon--hover-hex}%22%3E%3Cpath d=%22M7 14.17L2.83 10l-1.41 1.41L7 17 19 5l-1.41-1.42z%22/%3E%3C/g%3E%3C/svg%3E");
--ooui--checkbox-box-shadow--focus: var(--oouihelper--themerelated-darkest);
--ooui--checkbox-disabled-background-color: var(--oouihelper--themerelated-disabled);
--ooui--checkbox-disabled-icon: var(--ooui--checkbox-icon);
@theme Underground {
$ooui--checkbox-icon-hex: "8696b6";
$ooui--checkbox-icon--hover-hex: "9caccc";
--ooui--checkbox-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2220%22 height=%2220%22 viewBox=%220 0 20 20%22%3E%3Ctitle%3Echeck%3C/title%3E%3Cg fill=%22%23#{$ooui--checkbox-icon-hex}%22%3E%3Cpath d=%22M7 14.17L2.83 10l-1.41 1.41L7 17 19 5l-1.41-1.42z%22/%3E%3C/g%3E%3C/svg%3E");
--ooui--checkbox-icon--hover: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2220%22 height=%2220%22 viewBox=%220 0 20 20%22%3E%3Ctitle%3Echeck%3C/title%3E%3Cg fill=%22%23#{$ooui--checkbox-icon--hover-hex}%22%3E%3Cpath d=%22M7 14.17L2.83 10l-1.41 1.41L7 17 19 5l-1.41-1.42z%22/%3E%3C/g%3E%3C/svg%3E");
}
@theme Snow {
$ooui--checkbox-icon-hex: "adb0b1";
$ooui--checkbox-icon--hover-hex: "b7babd";
--ooui--checkbox-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2220%22 height=%2220%22 viewBox=%220 0 20 20%22%3E%3Ctitle%3Echeck%3C/title%3E%3Cg fill=%22%23#{$ooui--checkbox-icon-hex}%22%3E%3Cpath d=%22M7 14.17L2.83 10l-1.41 1.41L7 17 19 5l-1.41-1.42z%22/%3E%3C/g%3E%3C/svg%3E");
--ooui--checkbox-icon--hover: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2220%22 height=%2220%22 viewBox=%220 0 20 20%22%3E%3Ctitle%3Echeck%3C/title%3E%3Cg fill=%22%23#{$ooui--checkbox-icon--hover-hex}%22%3E%3Cpath d=%22M7 14.17L2.83 10l-1.41 1.41L7 17 19 5l-1.41-1.42z%22/%3E%3C/g%3E%3C/svg%3E");
}
@theme Jungle {
$ooui--checkbox-icon-hex: "aeb47b";
$ooui--checkbox-icon--hover-hex: "c4c990";
--ooui--checkbox-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2220%22 height=%2220%22 viewBox=%220 0 20 20%22%3E%3Ctitle%3Echeck%3C/title%3E%3Cg fill=%22%23#{$ooui--checkbox-icon-hex}%22%3E%3Cpath d=%22M7 14.17L2.83 10l-1.41 1.41L7 17 19 5l-1.41-1.42z%22/%3E%3C/g%3E%3C/svg%3E");
--ooui--checkbox-icon--hover: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2220%22 height=%2220%22 viewBox=%220 0 20 20%22%3E%3Ctitle%3Echeck%3C/title%3E%3Cg fill=%22%23#{$ooui--checkbox-icon--hover-hex}%22%3E%3Cpath d=%22M7 14.17L2.83 10l-1.41 1.41L7 17 19 5l-1.41-1.42z%22/%3E%3C/g%3E%3C/svg%3E");
}
@theme Hallowed {
$ooui--checkbox-icon-hex: "e2a9be";
$ooui--checkbox-icon--hover-hex: "f3c2d4";
--ooui--checkbox-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2220%22 height=%2220%22 viewBox=%220 0 20 20%22%3E%3Ctitle%3Echeck%3C/title%3E%3Cg fill=%22%23#{$ooui--checkbox-icon-hex}%22%3E%3Cpath d=%22M7 14.17L2.83 10l-1.41 1.41L7 17 19 5l-1.41-1.42z%22/%3E%3C/g%3E%3C/svg%3E");
--ooui--checkbox-icon--hover: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2220%22 height=%2220%22 viewBox=%220 0 20 20%22%3E%3Ctitle%3Echeck%3C/title%3E%3Cg fill=%22%23#{$ooui--checkbox-icon--hover-hex}%22%3E%3Cpath d=%22M7 14.17L2.83 10l-1.41 1.41L7 17 19 5l-1.41-1.42z%22/%3E%3C/g%3E%3C/svg%3E");
}
@theme Crimson {
$ooui--checkbox-icon-hex: "d89076";
$ooui--checkbox-icon--hover-hex: "f4bca8";
--ooui--checkbox-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2220%22 height=%2220%22 viewBox=%220 0 20 20%22%3E%3Ctitle%3Echeck%3C/title%3E%3Cg fill=%22%23#{$ooui--checkbox-icon-hex}%22%3E%3Cpath d=%22M7 14.17L2.83 10l-1.41 1.41L7 17 19 5l-1.41-1.42z%22/%3E%3C/g%3E%3C/svg%3E");
--ooui--checkbox-icon--hover: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2220%22 height=%2220%22 viewBox=%220 0 20 20%22%3E%3Ctitle%3Echeck%3C/title%3E%3Cg fill=%22%23#{$ooui--checkbox-icon--hover-hex}%22%3E%3Cpath d=%22M7 14.17L2.83 10l-1.41 1.41L7 17 19 5l-1.41-1.42z%22/%3E%3C/g%3E%3C/svg%3E");
}
@theme Corruption {
$ooui--checkbox-icon-hex: "94829c";
$ooui--checkbox-icon--hover-hex: "a693ae";
--ooui--checkbox-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2220%22 height=%2220%22 viewBox=%220 0 20 20%22%3E%3Ctitle%3Echeck%3C/title%3E%3Cg fill=%22%23#{$ooui--checkbox-icon-hex}%22%3E%3Cpath d=%22M7 14.17L2.83 10l-1.41 1.41L7 17 19 5l-1.41-1.42z%22/%3E%3C/g%3E%3C/svg%3E");
--ooui--checkbox-icon--hover: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2220%22 height=%2220%22 viewBox=%220 0 20 20%22%3E%3Ctitle%3Echeck%3C/title%3E%3Cg fill=%22%23#{$ooui--checkbox-icon--hover-hex}%22%3E%3Cpath d=%22M7 14.17L2.83 10l-1.41 1.41L7 17 19 5l-1.41-1.42z%22/%3E%3C/g%3E%3C/svg%3E");
}
@theme Legacy {
$ooui--checkbox-icon-hex: "134ead";
$ooui--checkbox-icon--hover-hex: "3471d2";
--ooui--checkbox-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2220%22 height=%2220%22 viewBox=%220 0 20 20%22%3E%3Ctitle%3Echeck%3C/title%3E%3Cg fill=%22%23#{$ooui--checkbox-icon-hex}%22%3E%3Cpath d=%22M7 14.17L2.83 10l-1.41 1.41L7 17 19 5l-1.41-1.42z%22/%3E%3C/g%3E%3C/svg%3E");
--ooui--checkbox-icon--hover: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2220%22 height=%2220%22 viewBox=%220 0 20 20%22%3E%3Ctitle%3Echeck%3C/title%3E%3Cg fill=%22%23#{$ooui--checkbox-icon--hover-hex}%22%3E%3Cpath d=%22M7 14.17L2.83 10l-1.41 1.41L7 17 19 5l-1.41-1.42z%22/%3E%3C/g%3E%3C/svg%3E");
}
/* radiobutton */
--ooui--radiobutton-border-color: var(--oouihelper--themerelated);
--ooui--radiobutton-border-color--hover: var(--oouihelper--themerelated-lighter);
--ooui--radiobutton-box-shadow--focus: var(--oouihelper--themerelated-darkest);
--ooui--radiobutton-disabled-background-color: var(--oouihelper--themerelated-disabled);
// @theme Underground {
// }
// @theme Snow {
// }
// @theme Jungle {
// }
// @theme Hallowed {
// }
// @theme Crimson {
// }
// @theme Corruption {
// }
// @theme Legacy {
// }
/* toggleswitch */
--ooui--toggleswitch-border-color: var(--oouihelper--themerelated);
--ooui--toggleswitch-border-color--hover: var(--oouihelper--themerelated-lighter);
--ooui--toggleswitch-color--active: var(--oouihelper--themerelated-darker);
--ooui--toggleswitch-grip-color: var(--oouihelper--themerelated-lightest);
--ooui--toggleswitch-box-shadow--focus: var(--oouihelper--themerelated-darkest);
--ooui--toggleswitch-disabled-background-color: var(--oouihelper--themerelated-disabled);
--ooui--toggleswitch-disabled-grip-color: var(--oouihelper--themerelated-disabled-lighter);
// @theme Underground {
// }
// @theme Snow {
// }
// @theme Jungle {
// }
// @theme Hallowed {
// }
// @theme Crimson {
// }
// @theme Corruption {
// }
// @theme Legacy {
// }
/* dropdown */
--ooui--dropdown-background-color: var(--oouihelper--textinput-background);
--ooui--dropdown-background-color--hover: var(--oouihelper--textinput-background-lighter);
--ooui--dropdown-border-color: var(--oouihelper--borderdark);
--ooui--dropdown-border-color--hover: var(--oouihelper--borderdark-hover);
--ooui--dropdown-border-color--focus: var(--oouihelper--borderdark-focus);
--ooui--dropdown-disabled-color: var(--oouihelper--disabled);
--ooui--dropdown-disabled-border-color: var(--oouihelper--disabled-lighter-transparent);
--ooui--dropdown-disabled-background-color: var(--oouihelper--disabled-darker-transparent);
// @theme Underground {
// }
// @theme Snow {
// }
// @theme Jungle {
// }
// @theme Hallowed {
// }
// @theme Crimson {
// }
// @theme Corruption {
// }
// @theme Legacy {
// }
/* selectfile */
--ooui--selectfile-border-color: #72777d;
--ooui--selectfile-background-color: var(--oouihelper--textinput-background);
--ooui--selectfile-candrop-background-color: #514743;
// @theme Underground {
// }
// @theme Snow {
// }
// @theme Jungle {
// }
// @theme Hallowed {
// }
// @theme Crimson {
// }
// @theme Corruption {
// }
// @theme Legacy {
// }
/* tag item */
--ooui--tagitem-background-color: rgba(20, 20, 20, 0.75);
--ooui--tagitem-border-color: var(--oouihelper--borderdark);
--ooui--tagitem-border-color--hover: var(--oouihelper--borderdark-hover);
--ooui--tagitem-border-color--focus: var(--oouihelper--themerelated-darkest);
--ooui--tagitem-invalid-border-color: var(--oouihelper--red-lighter);
--ooui--tagitem-color--hover: #efeadc;
--ooui--tagitem-disabled-color: var(--oouihelper--disabled);
--ooui--tagitem-disabled-border-color: var(--oouihelper--disabled-lighter-transparent);
--ooui--tagitem-disabled-background-color: rgba(20, 20, 20, 0.5);
@theme Underground {
--ooui--tagitem-color--hover: var(--theme-link-color-hover);
}
@theme Snow {
--ooui--tagitem-background-color: rgba(20, 20, 20, 0.1);
--ooui--tagitem-color--hover: var(--theme-text-color-em);
--ooui--tagitem-disabled-background-color: rgba(20, 20, 20, 0.2);
}
@theme Jungle {
--ooui--tagitem-color--hover: var(--theme-link-color-hover);
}
@theme Hallowed {
--ooui--tagitem-color--hover: var(--theme-link-color-hover);
}
@theme Crimson {
--ooui--tagitem-color--hover: var(--theme-link-color-hover);
}
@theme Corruption {
--ooui--tagitem-color--hover: var(--theme-link-color-hover);
}
@theme Legacy {
--ooui--tagitem-background-color: rgba(255, 255, 255, 0.7);
--ooui--tagitem-color--hover: var(--theme-link-color-hover);
--ooui--tagitem-disabled-border-color: var(--oouihelper--disabled-darker-transparent);
--ooui--tagitem-disabled-background-color: rgba(20, 20, 20, 0.1);
}
/* multioption */
--ooui--multioption-disabled-color: var(--oouihelper--disabled);
// @theme Underground {
// }
// @theme Snow {
// }
// @theme Jungle {
// }
// @theme Hallowed {
// }
// @theme Crimson {
// }
// @theme Corruption {
// }
// @theme Legacy {
// }
/* progressbar */
--ooui--progressbar-border-color: var(--oouihelper--themerelated);
--ooui--progressbar-bar-background-color: var(--oouihelper--themerelated);
--ooui--progressbar-disabled-border-color: var(--oouihelper--themerelated-disabled);
--ooui--progressbar-pending-background-color-1: #7a6a52;
--ooui--progressbar-pending-background-color-2: #4d4233;
@theme Underground {
--ooui--progressbar-pending-background-color-1: rgba(var(--theme-link-color--rgb), 0.5);
--ooui--progressbar-pending-background-color-2: rgba(var(--theme-border-color--rgb), 0.5);
}
@theme Snow {
--ooui--progressbar-pending-background-color-1: rgba(var(--theme-link-color--rgb), 0.35);
--ooui--progressbar-pending-background-color-2: rgba(var(--theme-border-color--rgb), 0.2);
}
@theme Jungle {
--ooui--progressbar-pending-background-color-1: rgba(var(--theme-link-color--rgb), 0.5);
--ooui--progressbar-pending-background-color-2: rgba(var(--theme-border-color--rgb), 0.5);
}
@theme Hallowed {
--ooui--progressbar-pending-background-color-1: rgba(var(--theme-link-color--rgb), 0.5);
--ooui--progressbar-pending-background-color-2: rgba(var(--theme-border-color--rgb), 0.5);
}
@theme Crimson {
--ooui--progressbar-pending-background-color-1: rgba(var(--theme-link-color--rgb), 0.5);
--ooui--progressbar-pending-background-color-2: rgba(var(--theme-border-color--rgb), 0.5);
}
@theme Corruption {
--ooui--progressbar-pending-background-color-1: rgba(var(--theme-link-color--rgb), 0.5);
--ooui--progressbar-pending-background-color-2: rgba(var(--theme-border-color--rgb), 0.5);
}
@theme Legacy {
--ooui--progressbar-pending-background-color-1: var(--oouihelper--themerelated);
--ooui--progressbar-pending-background-color-2: rgba(var(--theme-border-color--rgb), 0.5);
}
/* messagewidget */
--ooui--messagewidget-notice-background-color: #4e3a32;
--ooui--messagewidget-notice-border-color: #2f231e;
--ooui--messagewidget-error-background-color: var(--oouihelper--red);
--ooui--messagewidget-error-border-color: var(--oouihelper--red-darker);
--ooui--messagewidget-error-color: var(--oouihelper--red-lighter);
--ooui--messagewidget-warning-background-color: var(--oouihelper--yellow);
--ooui--messagewidget-warning-border-color: var(--oouihelper--yellow-darker);
--ooui--messagewidget-success-background-color: var(--oouihelper--green);
--ooui--messagewidget-success-border-color: var(--oouihelper--green-darker);
--ooui--messagewidget-success-color: var(--oouihelper--green-lighter);
@theme Underground {
--ooui--messagewidget-notice-background-color: #343031;
--ooui--messagewidget-notice-border-color: #1f1c1e;
}
@theme Snow {
--ooui--messagewidget-notice-background-color: #eaeef1;
}
@theme Jungle {
--ooui--messagewidget-notice-background-color: #403825;
--ooui--messagewidget-notice-border-color: #2a2519;
}
// @theme Hallowed {
// }
@theme Crimson {
--ooui--messagewidget-notice-background-color: #482e35;
--ooui--messagewidget-notice-border-color: #311d22;
}
@theme Corruption {
--ooui--messagewidget-notice-background-color: #3b303b;
--ooui--messagewidget-notice-border-color: #1c151c;
}
@theme Legacy {
--ooui--messagewidget-notice-background-color: #f9f9f9;
--ooui--messagewidget-notice-border-color: #bebebe;
}
/* menuselectwidget */
--ooui--menuselect-background-color: var(--oouihelper--text-background);
--ooui--menuselect-selected-background-color: var(--oouihelper--textinput-background-darker);
--ooui--menuselect-highlighted-background-color: var(--oouihelper--textinput-background-lighter);
--ooui--menuselect-border-color: var(--oouihelper--borderdark);
--ooui--menusectionoption-color: var(--oouihelper--placeholdertext);
// @theme Underground {
// }
// @theme Snow {
// }
// @theme Jungle {
// }
// @theme Hallowed {
// }
// @theme Crimson {
// }
// @theme Corruption {
// }
// @theme Legacy {
// }
/* tabselectwidget */
--ooui--tabselect-background-color: var(--oouihelper--text-background);
--ooui--tabselect-selected-background-color: var(--theme-content-background);
--ooui--tabselect-highlighted-background-color: var(--oouihelper--textinput-background-lighter);
--ooui--tabselect-frameless-box-shadow-color: var(--oouihelper--borderdark-lighter);
--ooui--tabselect-frameless-selected-color: var(--theme-link-color);
--ooui--tabselect-frameless-selected-box-shadow-color: var(--theme-link-color);
--ooui--tabselect-frameless-highlighted-color: #bcd1d2;
--ooui--tabselect-frameless-highlighted-box-shadow-color: #bcd1d2;
--ooui--taboption-color: var(--oouihelper--placeholdertext);
// @theme Underground {
// }
// @theme Snow {
// }
// @theme Jungle {
// }
// @theme Hallowed {
// }
// @theme Crimson {
// }
// @theme Corruption {
// }
@theme Legacy {
--ooui--tabselect-frameless-highlighted-color: #a1a1a1;
--ooui--tabselect-frameless-highlighted-box-shadow-color: #8d8d8d;
}
/* outlineselectwidget */
--ooui--outlineselect-box-shadow--focus: inset var(--oouihelper--themerelated-lighter-transparent) 0 0 0 2px;
--ooui--outlineoption-background-color: var(--oouihelper--text-background);
--ooui--outlineoption-border-color: var(--oouihelper--borderdark);
--ooui--outlineoption-selected-background-color: var(--oouihelper--textinput-background-darker);
--ooui--outlineoption-highlighted-background-color: var(--oouihelper--textinput-background-lighter);
--ooui--outlineoption-pressed-background-color: #22292a;
// @theme Underground {
// }
// @theme Snow {
// }
// @theme Jungle {
// }
// @theme Hallowed {
// }
// @theme Crimson {
// }
// @theme Corruption {
// }
// @theme Legacy {
// }
/* popupwidget */
--ooui--popup-background-color: var(--oouihelper--text-background);
--ooui--popup-border-color: var(--oouihelper--borderdark);
// @theme Underground {
// }
// @theme Snow {
// }
// @theme Jungle {
// }
// @theme Hallowed {
// }
// @theme Crimson {
// }
// @theme Corruption {
// }
// @theme Legacy {
// }
/* layouts */
--ooui--bookletlayout-border-color: var(--oouihelper--borderdark);
--ooui--panellayout-border-color: var(--oouihelper--borderdark);
// @theme Underground {
// }
// @theme Snow {
// }
// @theme Jungle {
// }
// @theme Hallowed {
// }
// @theme Crimson {
// }
// @theme Corruption {
// }
// @theme Legacy {
// }
/* dialog */
--ooui--dialog-border-color: var(--oouihelper--borderdark);
--ooui--dialog-border-color--lighter: var(--oouihelper--borderdark-lighter);
// @theme Underground {
// }
// @theme Snow {
// }
// @theme Jungle {
// }
// @theme Hallowed {
// }
// @theme Crimson {
// }
// @theme Corruption {
// }
// @theme Legacy {
// }
/* window */
--ooui--window-background-color: var(--oouihelper--text-background);
--ooui--window-border-color: var(--oouihelper--borderdark);
// @theme Underground {
// }
// @theme Snow {
// }
// @theme Jungle {
// }
// @theme Hallowed {
// }
// @theme Crimson {
// }
// @theme Corruption {
// }
// @theme Legacy {
// }
/* indicators */
/* tools like https://isotropic.co/tool/hex-color-to-css-filter/ allow converting the desired color into a filter */
--ooui--indicator-filter: brightness(0) invert(90%) sepia(28%) saturate(107%) hue-rotate(5deg) brightness(96%) contrast(93%);
--ooui--indicator-invert-filter: brightness(0);
// @theme Underground {
// }
@theme Snow {
--ooui--indicator-filter: brightness(0) invert(50%) sepia(21%) saturate(662%) hue-rotate(170deg) brightness(80%) contrast(91%);
}
// @theme Jungle {
// }
// @theme Hallowed {
// }
// @theme Crimson {
// }
// @theme Corruption {
// }
@theme Legacy {
--ooui--indicator-filter: brightness(0) invert(30%);
--ooui--indicator-invert-filter: brightness(0) invert(30%);
}
/* icons */
--ooui--icon-normal-filter: brightness(0) invert(90%) sepia(28%) saturate(107%) hue-rotate(5deg) brightness(96%) contrast(93%);
--ooui--icon-progressive-filter: brightness(0) invert(90%) sepia(21%) saturate(662%) hue-rotate(140deg) brightness(99%) contrast(91%);
--ooui--icon-destructive-filter: brightness(0) invert(33%) sepia(27%) saturate(2948%) hue-rotate(329deg) brightness(116%) contrast(91%);
--ooui--icon-invert-filter: brightness(0);
--ooui--icon-success-filter: brightness(0) invert(76%) sepia(47%) saturate(4832%) hue-rotate(101deg) brightness(101%) contrast(101%); /* #00e673 */
--ooui--icon-warning-filter: brightness(0) invert(81%) sepia(89%) saturate(585%) hue-rotate(323deg) brightness(96%) contrast(112%); /* #ffcc33 */
--ooui--icon-error-filter: brightness(0) invert(56%) sepia(62%) saturate(4943%) hue-rotate(329deg) brightness(91%) contrast(108%); /* #f04848 */
@theme Underground {
--ooui--icon-progressive-filter: brightness(0) invert(90%) sepia(18%) saturate(662%) hue-rotate(140deg) brightness(99%) contrast(91%);
}
@theme Snow {
--ooui--icon-normal-filter: brightness(0) invert(0%) sepia(0%) saturate(100%) hue-rotate(5deg) brightness(100%) contrast(100%);
--ooui--icon-progressive-filter: brightness(0) invert(50%) sepia(21%) saturate(662%) hue-rotate(170deg) brightness(80%) contrast(91%);
}
@theme Jungle {
--ooui--icon-progressive-filter: brightness(0) invert(90%) sepia(18%) saturate(662%) hue-rotate(40deg) brightness(99%) contrast(91%);
}
@theme Hallowed {
--ooui--icon-progressive-filter: brightness(0) invert(90%) sepia(18%) saturate(662%) hue-rotate(140deg) brightness(99%) contrast(91%);
}
@theme Crimson {
--ooui--icon-progressive-filter: brightness(0) invert(90%) sepia(18%) saturate(662%) hue-rotate(320deg) brightness(99%) contrast(91%);
}
@theme Corruption {
--ooui--icon-progressive-filter: brightness(0) invert(90%) sepia(18%) saturate(662%) hue-rotate(180deg) brightness(99%) contrast(91%);
}
@theme Legacy {
--ooui--icon-normal-filter: brightness(0) invert(30%);
--ooui--icon-progressive-filter: invert(12%) sepia(92%) saturate(850%) hue-rotate(194deg) brightness(66%) contrast(98%);
--ooui--icon-invert-filter: brightness(0) invert(30%);
}
}