:root { /* Pre-defined colors */ --blk_9: #6c6c6c; --blk_8: #606060; --blk_7: #545454; --blk_6: #484848; --blk_5: #3c3c3c; --blk_4: #303030; --blk_3: #242424; --blk_2: #181818; --blk_1: #0c0c0c; --blk_0: #000000; --red_9: #ff6a76; --red_8: #ff5765; --red_7: #ff3f4f; --red_6: #df1b2c; --red_5: #b9000f; --red_4: #94000c; --red_3: #6f0009; --red_2: #4a0006; --red_1: #250003; --ora_9: #ff9a60; --ora_8: #ff8e4d; --ora_7: #ff7e33; --ora_6: #ff6811; --ora_5: #d44d00; --ora_4: #aa3e00; --ora_3: #7f2e00; --ora_2: #551f00; --ora_1: #2a0f00; --yel_9: #ffd666; --yel_8: #ffd152; --yel_7: #ffca3a; --yel_6: #ffc119; --yel_5: #d49b00; --yel_4: #aa7c00; --yel_3: #7f5d00; --yel_2: #553e00; --yel_1: #2a1f00; --grn_9: #b4ff6a; --grn_8: #abff57; --grn_7: #9efc3f; --grn_6: #79d81b; --grn_5: #5ab400; --grn_4: #489000; --grn_3: #366c00; --grn_2: #244800; --grn_1: #122400; --cya_9: #7ff2ff; --cya_8: #6ff0ff; --cya_7: #5aecfc; --cya_6: #36c8d8; --cya_5: #12a4b4; --cya_4: #008290; --cya_3: #00616c; --cya_2: #004148; --cya_1: #002024; --blu_9: #5a98ff; --blu_8: #458cff; --blu_7: #2b7bff; --blu_6: #0765ff; --blu_5: #0050d4; --blu_4: #0040aa; --blu_3: #00307f; --blu_2: #002055; --blu_1: #00102a; --mag_9: #c16aff; --mag_8: #b957ff; --mag_7: #af3fff; --mag_6: #8d1bdf; --mag_5: #6c00b9; --mag_4: #560094; --mag_3: #41006f; --mag_2: #2b004a; --mag_1: #150025; --whi_9: #ffffff; --whi_8: #ffffff; --whi_7: #ffffff; --whi_6: #ffffff; --whi_5: #d4d4d4; --whi_4: #aaaaaa; --whi_3: #7f7f7f; --whi_2: #555555; --whi_1: #2a2a2a; --pri_9: #decbb3; --pri_8: #c5b29a; --pri_7: #ac9981; --pri_6: #948169; --pri_5: #7b6850; --pri_4: #624f37; --pri_3: #4a371e; --pri_2: #311e06; --pri_1: #180d00; --alt_9: #b4c7df; --alt_8: #9baec6; --alt_7: #8295ad; --alt_6: #6a7d95; --alt_5: #51647c; --alt_4: #384b63; --alt_3: #1f324a; --alt_2: #061931; --alt_1: #000a18; --gra_000:#000000;--gra_001:#020202;--gra_002:#050505;--gra_003:#070707; --gra_004:#0a0a0a;--gra_005:#0c0c0c;--gra_006:#0f0f0f;--gra_007:#111111; --gra_008:#141414;--gra_009:#161616;--gra_010:#191919;--gra_011:#1c1c1c; --gra_012:#1e1e1e;--gra_013:#212121;--gra_014:#232323;--gra_015:#262626; --gra_016:#282828;--gra_017:#2b2b2b;--gra_018:#2d2d2d;--gra_019:#303030; --gra_020:#323232;--gra_021:#353535;--gra_022:#383838;--gra_023:#3a3a3a; --gra_024:#3d3d3d;--gra_025:#3f3f3f;--gra_026:#424242;--gra_027:#444444; --gra_028:#474747;--gra_028:#494949;--gra_030:#4c4c4c;--gra_031:#4f4f4f; --gra_032:#515151;--gra_033:#545454;--gra_034:#565656;--gra_035:#595959; --gra_036:#5b5b5b;--gra_037:#5e5e5e;--gra_038:#606060;--gra_039:#636363; --gra_040:#656565;--gra_041:#686868;--gra_042:#6b6b6b;--gra_043:#6d6d6d; --gra_044:#707070;--gra_045:#727272;--gra_046:#757575;--gra_047:#777777; --gra_048:#7a7a7a;--gra_049:#7c7c7c;--gra_050:#7f7f7f;--gra_051:#828282; --gra_052:#848484;--gra_053:#878787;--gra_054:#898989;--gra_055:#8c8c8c; --gra_056:#8e8e8e;--gra_056:#919191;--gra_057:#939393;--gra_059:#969696; --gra_060:#999999;--gra_061:#9b9b9b;--gra_062:#9e9e9e;--gra_063:#a0a0a0; --gra_064:#a3a3a3;--gra_065:#a5a5a5;--gra_066:#a8a8a8;--gra_067:#aaaaaa; --gra_068:#adadad;--gra_069:#afafaf;--gra_070:#b2b2b2;--gra_071:#b5b5b5; --gra_072:#b7b7b7;--gra_073:#bababa;--gra_074:#bcbcbc;--gra_075:#bfbfbf; --gra_076:#c1c1c1;--gra_077:#c4c4c4;--gra_078:#c6c6c6;--gra_079:#c9c9c9; --gra_080:#cccccc;--gra_081:#cecece;--gra_082:#d1d1d1;--gra_083:#d3d3d3; --gra_084:#d6d6d6;--gra_085:#d8d8d8;--gra_086:#dbdbdb;--gra_087:#dddddd; --gra_088:#e0e0e0;--gra_089:#e2e2e2;--gra_090:#e5e5e5;--gra_091:#e8e8e8; --gra_092:#eaeaea;--gra_093:#ededed;--gra_094:#efefef;--gra_095:#f2f2f2; --gra_096:#f4f4f4;--gra_097:#f7f7f7;--gra_098:#f9f9f9;--gra_099:#fcfcfc; --gra_100:#ffffff; } :root { /* Light-theme colors */ --pri_1: #7b6850; --fg_pri_1: var(--gra_100); --pri_1_contrast: var(--fg_pri_1); --pri_2: #ac9981; --fg_pri_2: var(--gra_000); --pri_2_contrast: var(--fg_pri_2); --pri_3: #decbb3; --fg_pri_3: var(--gra_000); --pri_3_contrast: var(--fg_pri_3); --alt_1: #1f324a; --fg_alt_1: var(--gra_100); --alt_1_contrast: var(--fg_alt_1); --alt_2: #51647c; --fg_alt_2: var(--gra_100); --alt_2_contrast: var(--fg_alt_2); --alt_3: #8295ad; --fg_alt_3: var(--gra_100); --alt_3_contrast: var(--fg_alt_3); --color_bg_alpha: #ffffff00; --color_bg: var(--gra_100); --color_bg_alt: var(--gra_085); --color_bg_alt2: var(--gra_075); --color_fg: var(--gra_000); --color_fg_alt: var(--gra_015); --color_fg_alt2: var(--gra_025); --fg_def: var(--color_fg); --bg_def:var(--color_bg); --fg_blk : var(--whi_5); --bg_blk :var(--blk_3); --border_blk :var(--blk_4); --shadow_blk :var(--blk_3); --fg_red : var(--red_2); --bg_red :var(--red_5); --border_red :var(--red_4); --shadow_red :var(--red_3); --fg_ora : var(--ora_2); --bg_ora :var(--ora_5); --border_ora :var(--ora_4); --shadow_ora :var(--ora_3); --fg_yel : var(--yel_2); --bg_yel :var(--yel_5); --border_yel :var(--yel_4); --shadow_yel :var(--yel_3); --fg_grn : var(--grn_2); --bg_grn :var(--grn_5); --border_grn :var(--grn_4); --shadow_grn :var(--grn_3); --fg_cya : var(--cya_2); --bg_cya :var(--cya_5); --border_cya :var(--cya_4); --shadow_cya :var(--cya_3); --fg_blu : var(--blu_2); --bg_blu :var(--blu_5); --border_blu :var(--blu_4); --shadow_blu :var(--blu_3); --fg_mag : var(--mag_2); --bg_mag :var(--mag_5); --border_mag :var(--mag_4); --shadow_mag :var(--mag_3); --fg_whi : var(--whi_1); --bg_whi :var(--whi_5); --border_whi :var(--whi_4); --shadow_whi :var(--whi_3); --hover_fg_blk: var(--whi_6); --hover_bg_blk:var(--blk_9); --hover_border_blk:var(--blk_3); --hover_shadow_blk:var(--blk_1); --hover_fg_red: var(--blk_0); --hover_bg_red:var(--red_7); --hover_border_red:var(--red_3); --hover_shadow_red:var(--red_1); --hover_fg_ora: var(--blk_0); --hover_bg_ora:var(--ora_7); --hover_border_ora:var(--ora_3); --hover_shadow_ora:var(--ora_1); --hover_fg_yel: var(--blk_0); --hover_bg_yel:var(--yel_7); --hover_border_yel:var(--yel_3); --hover_shadow_yel:var(--yel_1); --hover_fg_grn: var(--blk_0); --hover_bg_grn:var(--grn_7); --hover_border_grn:var(--grn_3); --hover_shadow_grn:var(--grn_1); --hover_fg_cya: var(--blk_0); --hover_bg_cya:var(--cya_7); --hover_border_cya:var(--cya_3); --hover_shadow_cya:var(--cya_1); --hover_fg_blu: var(--blk_0); --hover_bg_blu:var(--blu_7); --hover_border_blu:var(--blu_3); --hover_shadow_blu:var(--blu_1); --hover_fg_mag: var(--blk_0); --hover_bg_mag:var(--mag_7); --hover_border_mag:var(--mag_3); --hover_shadow_mag:var(--mag_1); --hover_fg_whi: var(--blk_0); --hover_bg_whi:var(--whi_7); --hover_border_whi:var(--whi_3); --hover_shadow_whi:var(--whi_1); } main mdi svg { fill: var(--color_fg); } div.success { border-color: var(--border_grn); background-color: var(--bg_grn); color: var(--fg_grn); } div.failure { border-color: var(--border_red); background-color: var(--bg_red); color: var(--fg_red); } @media(max-width:45em) { nav > menu > item { mdi { svg{ fill: var(--gra_000); } } } nav > menu > item:hover { mdi { svg{ fill: var(--gra_100); } } } } @media(min-width:45em) { nav > menu > item { mdi { svg{ fill: var(--gra_100); } } } nav > menu > item:hover { mdi { svg{ fill: var(--gra_000); } } } } @media (prefers-color-scheme: dark) and (max-width:45em) { nav > menu > item { mdi { svg{ fill: var(--gra_100); } } } nav > menu > item:hover { mdi { svg{ fill: var(--gra_100); } } } } @media (prefers-color-scheme: dark) and (min-width:45em) { nav > menu > item { mdi { svg{ fill: var(--gra_100); } } } nav > menu > item:hover { mdi { svg{ fill: var(--gra_100); } } } } @media print { :root { --color_bg: var(--gra_100); --color_bg_alt: var(--gra_080); --color_bg_alt2: var(--gra_060); --color_fg: var(--gra_000); --color_fg_alt: var(--gra_000); --color_fg_alt2: var(--gra_000); } /*.mdi { filter:invert(0); }*/ /*.mdi-white img.mdi { filter:invert(1); }*/ /*.mdi-black img.mdi { filter:invert(0); }*/ } @media (prefers-color-scheme: dark) { :root { --pri_1: #7b6850; --fg_pri_1: var(--gra_100); --pri_1_contrast: var(--fg_pri_1); --pri_2: #4a371e; --fg_pri_2: var(--gra_100); --pri_2_contrast: var(--fg_pri_2); --pri_3: #311e06; --fg_pri_3: var(--gra_100); --pri_3_contrast: var(--fg_pri_3); --alt_1: #384b63; --fg_alt_1: var(--gra_100); --alt_1_contrast: var(--fg_alt_1); --alt_2: #1f324a; --fg_alt_2: var(--gra_100); --alt_2_contrast: var(--fg_alt_2); --alt_3: #061931; --fg_alt_3: var(--gra_100); --alt_3_contrast: var(--fg_alt_3); --color_bg_alpha: #00000000; --color_bg: var(--gra_000); --color_bg_alt: var(--gra_015); --color_bg_alt2: var(--gra_025); --color_fg: var(--gra_100); --color_fg_alt: var(--gra_085); --color_fg_alt2: var(--gra_075); --fg_blk : var(--whi_2); --bg_blk :var(--blk_2); --border_blk :var(--whi_2); --shadow_blk :var(--blk_5); --fg_red : var(--red_6); --bg_red :var(--red_2); --border_red :var(--red_4); --shadow_red :var(--red_5); --fg_ora : var(--ora_6); --bg_ora :var(--ora_2); --border_ora :var(--ora_4); --shadow_ora :var(--ora_5); --fg_yel : var(--yel_6); --bg_yel :var(--yel_2); --border_yel :var(--yel_4); --shadow_yel :var(--yel_5); --fg_grn : var(--grn_6); --bg_grn :var(--grn_2); --border_grn :var(--grn_4); --shadow_grn :var(--grn_5); --fg_cya : var(--cya_6); --bg_cya :var(--cya_2); --border_cya :var(--cya_4); --shadow_cya :var(--cya_5); --fg_blu : var(--blu_6); --bg_blu :var(--blu_2); --border_blu :var(--blu_4); --shadow_blu :var(--blu_5); --fg_mag : var(--mag_6); --bg_mag :var(--mag_2); --border_mag :var(--mag_4); --shadow_mag :var(--mag_5); --fg_whi : var(--whi_5); --bg_whi :var(--whi_2); --border_whi :var(--whi_4); --shadow_whi :var(--whi_5); --hover_fg_blk: var(--whi_9); --hover_bg_blk:var(--blk_5); --hover_border_blk:var(--whi_4); --hover_shadow_blk:var(--whi_3); --hover_fg_red: var(--whi_9); --hover_bg_red:var(--red_3); --hover_border_red:var(--red_9); --hover_shadow_red:var(--red_6); --hover_fg_ora: var(--whi_9); --hover_bg_ora:var(--ora_3); --hover_border_ora:var(--ora_9); --hover_shadow_ora:var(--ora_6); --hover_fg_yel: var(--whi_9); --hover_bg_yel:var(--yel_3); --hover_border_yel:var(--yel_9); --hover_shadow_yel:var(--yel_6); --hover_fg_grn: var(--whi_9); --hover_bg_grn:var(--grn_3); --hover_border_grn:var(--grn_9); --hover_shadow_grn:var(--grn_6); --hover_fg_cya: var(--whi_9); --hover_bg_cya:var(--cya_3); --hover_border_cya:var(--cya_9); --hover_shadow_cya:var(--cya_6); --hover_fg_blu: var(--whi_9); --hover_bg_blu:var(--blu_3); --hover_border_blu:var(--blu_9); --hover_shadow_blu:var(--blu_6); --hover_fg_mag: var(--whi_9); --hover_bg_mag:var(--mag_3); --hover_border_mag:var(--mag_9); --hover_shadow_mag:var(--mag_6); --hover_fg_whi: var(--whi_9); --hover_bg_whi:var(--whi_3); --hover_border_whi:var(--whi_9); --hover_shadow_whi:var(--whi_6); } mdi { svg{ fill: var(--gra_100); } } } :root[data-theme="dark"] { /* This should be a copy of the above "@media (prefers-color-scheme: dark)" */ :root { --pri_1: #7b6850; --fg_pri_1: var(--gra_100); --pri_1_contrast: var(--fg_pri_1); --pri_2: #4a371e; --fg_pri_2: var(--gra_100); --pri_2_contrast: var(--fg_pri_2); --pri_3: #311e06; --fg_pri_3: var(--gra_100); --pri_3_contrast: var(--fg_pri_3); --alt_1: #384b63; --fg_alt_1: var(--gra_100); --alt_1_contrast: var(--fg_alt_1); --alt_2: #1f324a; --fg_alt_2: var(--gra_100); --alt_2_contrast: var(--fg_alt_2); --alt_3: #061931; --fg_alt_3: var(--gra_100); --alt_3_contrast: var(--fg_alt_3); --color_bg_alpha: #00000000; --color_bg: var(--gra_000); --color_bg_alt: var(--gra_015); --color_bg_alt2: var(--gra_025); --color_fg: var(--gra_100); --color_fg_alt: var(--gra_085); --color_fg_alt2: var(--gra_075); --fg_blk : var(--whi_2); --bg_blk :var(--blk_2); --border_blk :var(--whi_2); --shadow_blk :var(--blk_5); --fg_red : var(--red_6); --bg_red :var(--red_2); --border_red :var(--red_4); --shadow_red :var(--red_5); --fg_ora : var(--ora_6); --bg_ora :var(--ora_2); --border_ora :var(--ora_4); --shadow_ora :var(--ora_5); --fg_yel : var(--yel_6); --bg_yel :var(--yel_2); --border_yel :var(--yel_4); --shadow_yel :var(--yel_5); --fg_grn : var(--grn_6); --bg_grn :var(--grn_2); --border_grn :var(--grn_4); --shadow_grn :var(--grn_5); --fg_cya : var(--cya_6); --bg_cya :var(--cya_2); --border_cya :var(--cya_4); --shadow_cya :var(--cya_5); --fg_blu : var(--blu_6); --bg_blu :var(--blu_2); --border_blu :var(--blu_4); --shadow_blu :var(--blu_5); --fg_mag : var(--mag_6); --bg_mag :var(--mag_2); --border_mag :var(--mag_4); --shadow_mag :var(--mag_5); --fg_whi : var(--whi_5); --bg_whi :var(--whi_2); --border_whi :var(--whi_4); --shadow_whi :var(--whi_5); --hover_fg_blk: var(--whi_9); --hover_bg_blk:var(--blk_5); --hover_border_blk:var(--whi_4); --hover_shadow_blk:var(--whi_3); --hover_fg_red: var(--whi_9); --hover_bg_red:var(--red_3); --hover_border_red:var(--red_9); --hover_shadow_red:var(--red_6); --hover_fg_ora: var(--whi_9); --hover_bg_ora:var(--ora_3); --hover_border_ora:var(--ora_9); --hover_shadow_ora:var(--ora_6); --hover_fg_yel: var(--whi_9); --hover_bg_yel:var(--yel_3); --hover_border_yel:var(--yel_9); --hover_shadow_yel:var(--yel_6); --hover_fg_grn: var(--whi_9); --hover_bg_grn:var(--grn_3); --hover_border_grn:var(--grn_9); --hover_shadow_grn:var(--grn_6); --hover_fg_cya: var(--whi_9); --hover_bg_cya:var(--cya_3); --hover_border_cya:var(--cya_9); --hover_shadow_cya:var(--cya_6); --hover_fg_blu: var(--whi_9); --hover_bg_blu:var(--blu_3); --hover_border_blu:var(--blu_9); --hover_shadow_blu:var(--blu_6); --hover_fg_mag: var(--whi_9); --hover_bg_mag:var(--mag_3); --hover_border_mag:var(--mag_9); --hover_shadow_mag:var(--mag_6); --hover_fg_whi: var(--whi_9); --hover_bg_whi:var(--whi_3); --hover_border_whi:var(--whi_9); --hover_shadow_whi:var(--whi_6); } mdi { svg{ fill: var(--gra_100); } } } body { color: var(--color_fg); background-color: var(--color_bg); header { color: var(--pri_1_contrast); background:var(--pri_1); } footer { color: var(--color_fg_alt); background-color: var(--color_bg_alt); } .fg_def { color: var(--color_fg); } .bg_def { background-color: var(--color_bg); } .fg_alt { color: var(--color_fg_alt); } .bg_alt { background-color: var(--color_bg_alt); } .bg_alt2 { background-color: var(--color_bg_alt2); } .fg_blk { color: var(--fg_blk); } .bg_blk { background-color: var(--bg_blk); } .bg_blk_dim { background-color: var(--blk_dim); } .fg_red { color: var(--fg_red); } .bg_red { background-color: var(--bg_red); } .bg_red_dim { background-color: var(--red_dim); } .fg_grn { color: var(--fg_grn); } .bg_grn { background-color: var(--bg_grn); } .bg_grn_dim { background-color: var(--grn_dim); } .fg_yel { color: var(--fg_yel); } .bg_yel { background-color: var(--bg_yel); } .bg_yel_dim { background-color: var(--yel_dim); } .fg_blu { color: var(--fg_blu); } .bg_blu { background-color: var(--bg_blu); } .bg_blu_dim { background-color: var(--blu_dim); } .fg_mag { color: var(--fg_mag); } .bg_mag { background-color: var(--bg_mag); } .bg_mag_dim { background-color: var(--mag_dim); } .fg_cya { color: var(--fg_cya); } .bg_cya { background-color: var(--bg_cya); } .bg_cya_dim { background-color: var(--cya_dim); } .fg_whi { color: var(--fg_whi); } .bg_whi { background-color: var(--bg_whi); } .bg_whi_dim { background-color: var(--whi_dim); } .fg_ora { color: var(--fg_ora); } .bg_ora { background-color: var(--bg_ora); } .bg_ora_dim { background-color: var(--ora_dim); } /* TODO */ /*.fg_dim { color: var(--gra_033); } .bg_dim { background-color: var(--blk_bri); } .bg_dim_dim { background-color: var(--blk_bri); backdrop-filter:opacity(50%); }*/ exception { color: var(--fg_red); background-color: var(--bg_red); } svg { .fill_blk { fill: var(--fg_blk); } .stroke_blk { stroke: var(--bg_blk); } .fill_red { fill: var(--fg_red); } .stroke_red { stroke: var(--bg_red); } .fill_grn { fill: var(--fg_grn); } .stroke_grn { stroke: var(--bg_grn); } .fill_yel { fill: var(--fg_yel); } .stroke_yel { stroke: var(--bg_yel); } .fill_blu { fill: var(--fg_blu); } .stroke_blu { stroke: var(--bg_blu); } .fill_mag { fill: var(--fg_mag); } .stroke_mag { stroke: var(--bg_mag); } .fill_cya { fill: var(--fg_cya); } .stroke_cya { stroke: var(--bg_cya); } .fill_whi { fill: var(--fg_whi); } .stroke_whi { stroke: var(--bg_whi); } .fill_ora { fill: var(--fg_ora); } .stroke_ora { stroke: var(--bg_ora); } /* TODO */ /*.fill_dim { fill: #eeeeee; } .stroke_dim { stroke: #aaaaaa; }*/ } .pie_chart { svg { .stroke_00{stroke:var(--bg_blu);} .fill_00{fill:var(--bg_blu);} /* blu */ .stroke_01{stroke:var(--bg_cya);} .fill_01{fill:var(--bg_cya);} /* cya */ .stroke_02{stroke:var(--bg_grn);} .fill_02{fill:var(--bg_grn);} /* grn */ .stroke_03{stroke:var(--bg_yel);} .fill_03{fill:var(--bg_yel);} /* yel */ .stroke_04{stroke:var(--bg_ora);} .fill_04{fill:var(--bg_ora);} /* ora */ .stroke_05{stroke:var(--bg_red);} .fill_05{fill:var(--bg_red);} /* red */ .stroke_06{stroke:var(--bg_mag);} .fill_06{fill:var(--bg_mag);} /* mag */ .outer {stroke:var(--color_fg); fill:transparent;} } .key_bg_00{background-color:var(--bg_blu);} /* blu */ .key_bg_01{background-color:var(--bg_cya);} /* cya */ .key_bg_02{background-color:var(--bg_grn);} /* grn */ .key_bg_03{background-color:var(--bg_yel);} /* yel */ .key_bg_04{background-color:var(--bg_ora);} /* ora */ .key_bg_05{background-color:var(--bg_red);} /* red */ .key_bg_06{background-color:var(--bg_mag);} /* mag */ } } dim ,.dim { opacity: 50%; } faint,.faint { opacity: 25%; } svg>text.fg00 { fill: var(--blk_dim); } .fg00 { color: var(--blk_dim); } .bg00 { background-color: var(--blk_dim); } /* Black */ svg>text.fg01 { fill: var(--red_dim); } .fg01 { color: var(--red_dim); } .bg01 { background-color: var(--red_dim); } /* Red */ svg>text.fg02 { fill: var(--grn_dim); } .fg02 { color: var(--grn_dim); } .bg02 { background-color: var(--grn_dim); } /* Green */ svg>text.fg03 { fill: var(--yel_dim); } .fg03 { color: var(--yel_dim); } .bg03 { background-color: var(--yel_dim); } /* Yellow */ svg>text.fg04 { fill: var(--blu_dim); } .fg04 { color: var(--blu_dim); } .bg04 { background-color: var(--blu_dim); } /* Blue */ svg>text.fg05 { fill: var(--mag_dim); } .fg05 { color: var(--mag_dim); } .bg05 { background-color: var(--mag_dim); } /* Magenta */ svg>text.fg06 { fill: var(--cya_dim); } .fg06 { color: var(--cya_dim); } .bg06 { background-color: var(--cya_dim); } /* Cyan */ svg>text.fg07 { fill: var(--whi_dim); } .fg07 { color: var(--whi_dim); } .bg07 { background-color: var(--whi_dim); } /* White */ svg>text.fg08 { fill: var(--blk_bri); } .fg08 { color: var(--blk_bri); } .bg08 { background-color: var(--blk_bri); } /* Bright Black */ svg>text.fg09 { fill: var(--red_bri); } .fg09 { color: var(--red_bri); } .bg09 { background-color: var(--red_bri); } /* Bright Red */ svg>text.fg10 { fill: var(--grn_bri); } .fg10 { color: var(--grn_bri); } .bg10 { background-color: var(--grn_bri); } /* Bright Green */ svg>text.fg11 { fill: var(--yel_bri); } .fg11 { color: var(--yel_bri); } .bg11 { background-color: var(--yel_bri); } /* Bright Yellow */ svg>text.fg12 { fill: var(--blu_bri); } .fg12 { color: var(--blu_bri); } .bg12 { background-color: var(--blu_bri); } /* Bright Blue */ svg>text.fg13 { fill: var(--mag_bri); } .fg13 { color: var(--mag_bri); } .bg13 { background-color: var(--mag_bri); } /* Bright Magenta */ svg>text.fg14 { fill: var(--cya_bri); } .fg14 { color: var(--cya_bri); } .bg14 { background-color: var(--cya_bri); } /* Bright Cyan */ svg>text.fg15 { fill: var(--whi_bri); } .fg15 { color: var(--whi_bri); } .bg15 { background-color: var(--whi_bri); } /* Bright White */ svg>text.fg16 { fill: var(--ora_dim); } .fg16 { color: var(--ora_dim); } .bg16 { background-color: var(--ora_dim); } /* Orange */ svg>text.fg17 { fill: var(--ora_bri); } .fg17 { color: var(--ora_bri); } .bg17 { background-color: var(--ora_bri); } /* Bright Orange */ svg { fill: none; stroke: none; .fill_blk_dim { fill: var(--blk_dim); } .stroke_blk_dim { stroke: var(--blk_dim); } .fill_blk_bri { fill: var(--blk_bri); } .stroke_blk_bri { stroke: var(--blk_bri); } .fill_red_dim { fill: var(--red_dim); } .stroke_red_dim { stroke: var(--red_dim); } .fill_red_bri { fill: var(--red_bri); } .stroke_red_bri { stroke: var(--red_bri); } .fill_grn_dim { fill: var(--grn_dim); } .stroke_grn_dim { stroke: var(--grn_dim); } .fill_grn_bri { fill: var(--grn_bri); } .stroke_grn_bri { stroke: var(--grn_bri); } .fill_yel_dim { fill: var(--yel_dim); } .stroke_yel_dim { stroke: var(--yel_dim); } .fill_yel_bri { fill: var(--yel_bri); } .stroke_yel_bri { stroke: var(--yel_bri); } .fill_blu_dim { fill: var(--blu_dim); } .stroke_blu_dim { stroke: var(--blu_dim); } .fill_blu_bri { fill: var(--blu_bri); } .stroke_blu_bri { stroke: var(--blu_bri); } .fill_mag_dim { fill: var(--mag_dim); } .stroke_mag_dim { stroke: var(--mag_dim); } .fill_mag_bri { fill: var(--mag_bri); } .stroke_mag_bri { stroke: var(--mag_bri); } .fill_cya_dim { fill: var(--cya_dim); } .stroke_cya_dim { stroke: var(--cya_dim); } .fill_cya_bri { fill: var(--cya_bri); } .stroke_cya_bri { stroke: var(--cya_bri); } .fill_whi_dim { fill: var(--whi_dim); } .stroke_whi_dim { stroke: var(--whi_dim); } .fill_whi_bri { fill: var(--whi_bri); } .stroke_whi_bri { stroke: var(--whi_bri); } .fill_ora_dim { fill: var(--ora_dim); } .stroke_ora_dim { stroke: var(--ora_dim); } .fill_ora_bri { fill: var(--ora_bri); } .stroke_ora_bri { stroke: var(--ora_bri); } } lcd_mdi, lcd_dot, lcd_seg { background: var(--gra_067); color: var(--gra_006); border-color: var(--gra_050) !important; } lcd_mdi { filter:invert(0) !important; } keypad { background: var(--blk_dim); color: var(--whi_bri); } span.monochrome { .pie_chart { .key_bg_00 {background-color:var(--gra_100);} svg .stroke_00{stroke:var(--gra_100);} svg .fill_00{fill:var(--gra_100);} .key_bg_01 {background-color:var(--gra_083);} svg .stroke_01{stroke:var(--gra_083);} svg .fill_01{fill:var(--gra_083);} .key_bg_02 {background-color:var(--gra_066);} svg .stroke_02{stroke:var(--gra_066);} svg .fill_02{fill:var(--gra_066);} .key_bg_03 {background-color:var(--gra_050);} svg .stroke_03{stroke:var(--gra_050);} svg .fill_03{fill:var(--gra_050);} .key_bg_04 {background-color:var(--gra_033);} svg .stroke_04{stroke:var(--gra_033);} svg .fill_04{fill:var(--gra_033);} .key_bg_05 {background-color:var(--gra_017);} svg .stroke_05{stroke:var(--gra_017);} svg .fill_05{fill:var(--gra_017);} .key_bg_06 {background-color:var(--gra_000);} svg .stroke_06{stroke:var(--gra_000);} svg .fill_06{fill:var(--gra_000);} svg .outer {stroke:var(--gra_000); fill:transparent;} } } /*nav { border-color: var(--gra_050); }*/ main { img.border { border-color: var(--gra_050); } .notice { border-color: var(--gra_050); } section h1 { border-color: var(--gra_050); } section h2, aside h1 { border-color: var(--gra_050); } section h3, aside h2 { border-color: var(--gra_050); } section h4, aside h3 { border-color: var(--gra_050); } section h5, aside h4 { border-color: var(--gra_050); } section h6, aside h5 { border-color: var(--gra_050); } } main { h1 { background :transparent; border-color:var(--pri_1) !important; print-color-adjust: exact; } h2, aside h1 { background :transparent; border-color:var(--pri_1) !important; print-color-adjust: exact; } h3, aside h2 { background :transparent; border-color:var(--pri_2) !important; print-color-adjust: exact; } h4, aside h3 { background :transparent; border-color:var(--pri_1) !important; print-color-adjust: exact; } /* h1 { background :transparent !important; border-color:var(--pri_1) !important; print-color-adjust: exact; } h2, aside h1 { background :transparent !important; border-color:var(--pri_1) !important; print-color-adjust: exact; } h3, aside h2 { background :transparent !important; border-color:var(--pri_2) !important; print-color-adjust: exact; } h4, aside h3 { background :transparent !important; border-color:var(--pri_1) !important; print-color-adjust: exact; } */ } .notice , main aside {background:var(--pri_2) !important; print-color-adjust: exact; } .notice_alt, main aside.alt {background:var(--pri_3) !important; print-color-adjust: exact; } main aside.no_fill { background:none !important; border-color:none !important; print-color-adjust: exact; } nav .nav_icon_bar { background-color: var(--pri_1_contrast); } @media(max-width:45em) { nav > menu { border-color : var(--color_fg); background-color: var(--color_bg); } nav > menu > item { color : var(--color_fg); a:link, a:active, a:hover, a:visited { color: var(--color_fg); } } nav > menu > item:hover { color : var(--pri_1_contrast); border-color : var(--pri_1_contrast); background-color: var(--pri_1); a:link, a:active, a:hover, a:visited { color: var(--pri_1_contrast); } } } @media(min-width:45em) { nav > menu { border-color : none; background-color: none; } nav > menu > item { color : var(--pri_1_contrast); a:link, a:active, a:hover, a:visited { color: var(--pri_1_contrast); } } nav > menu > item:hover { color : var(--color_fg); border-color : var(--pri_1_contrast); background-color: var(--color_bg); a:link, a:active, a:hover, a:visited { color: var(--color_fg); } } } .toc > li { border-color : none; background-color: none; } .toc > li:hover { color : var(--color_fg); border-color : var(--pri_1_contrast); background-color: var(--color_bg); a:link, a:active, a:hover, a:visited { color: var(--color_fg); } } .toc_to_blink { background-color: var(--pri_2) !important; } tr.blk { th,td { color: var(--fg_blk); background-color: var(--bg_blk); border-color: transparent; mdi svg {fill: var(--fg_blk);} }} tr.red { th,td { color: var(--fg_red); background-color: var(--bg_red); border-color: transparent; mdi svg {fill: var(--fg_red);} }} tr.ora { th,td { color: var(--fg_ora); background-color: var(--bg_ora); border-color: transparent; mdi svg {fill: var(--fg_ora);} }} tr.yel { th,td { color: var(--fg_yel); background-color: var(--bg_yel); border-color: transparent; mdi svg {fill: var(--fg_yel);} }} tr.grn { th,td { color: var(--fg_grn); background-color: var(--bg_grn); border-color: transparent; mdi svg {fill: var(--fg_grn);} }} tr.cya { th,td { color: var(--fg_cya); background-color: var(--bg_cya); border-color: transparent; mdi svg {fill: var(--fg_cya);} }} tr.blu { th,td { color: var(--fg_blu); background-color: var(--bg_blu); border-color: transparent; mdi svg {fill: var(--fg_blu);} }} tr.mag { th,td { color: var(--fg_mag); background-color: var(--bg_mag); border-color: transparent; mdi svg {fill: var(--fg_mag);} }} tr.whi { th,td { color: var(--fg_whi); background-color: var(--bg_whi); border-color: transparent; mdi svg {fill: var(--fg_whi);} }} tr.force-fg-black,tr.force-fg-black:hover { th,td { color: var(--gra_000) !important; mdi svg {fill: var(--gra_000) !important;} }} tr.force-fg-white,tr.force-fg-white:hover { th,td { color: var(--gra_100) !important; mdi svg {fill: var(--gra_100) !important;} }} button { color: var(--pri_2_contrast); background-color: var(--pri_2 ); border-color: transparent ; box-shadow:0 0 0.25em var(--pri_2 ); mdi svg {fill: var(--pri_2_contrast);} } button:hover:not(.disabled) { color: var(--color_fg ); background-color: var(--color_bg ); border-color: var(--color_fg ); box-shadow:0 0 0.50em var(--pri_1 ); mdi svg {fill: var(--color_fg );} } .notice button { color: var(--pri_3_contrast); background-color: var(--pri_3 ); border-color: transparent ; box-shadow:0 0 0.25em var(--pri_2 ); mdi svg {fill: var(--pri_3_contrast);} } .notice button:hover:not(.disabled) { color: var(--color_fg ); background-color: var(--color_bg ); border-color: var(--color_fg ); box-shadow:0 0 0.50em var(--pri_1 ); mdi svg {fill: var(--color_fg );} } button.blk { color: var(--fg_blk ); background-color: var(--bg_blk ); border-color: var(--border_blk ); box-shadow:0 0 0.25em var(--shadow_blk ); mdi svg {fill: var(--fg_blk );} } button.red { color: var(--fg_red ); background-color: var(--bg_red ); border-color: var(--border_red ); box-shadow:0 0 0.25em var(--shadow_red ); mdi svg {fill: var(--fg_red );} } button.ora { color: var(--fg_ora ); background-color: var(--bg_ora ); border-color: var(--border_ora ); box-shadow:0 0 0.25em var(--shadow_ora ); mdi svg {fill: var(--fg_ora );} } button.yel { color: var(--fg_yel ); background-color: var(--bg_yel ); border-color: var(--border_yel ); box-shadow:0 0 0.25em var(--shadow_yel ); mdi svg {fill: var(--fg_yel );} } button.grn { color: var(--fg_grn ); background-color: var(--bg_grn ); border-color: var(--border_grn ); box-shadow:0 0 0.25em var(--shadow_grn ); mdi svg {fill: var(--fg_grn );} } button.cya { color: var(--fg_cya ); background-color: var(--bg_cya ); border-color: var(--border_cya ); box-shadow:0 0 0.25em var(--shadow_cya ); mdi svg {fill: var(--fg_cya );} } button.blu { color: var(--fg_blu ); background-color: var(--bg_blu ); border-color: var(--border_blu ); box-shadow:0 0 0.25em var(--shadow_blu ); mdi svg {fill: var(--fg_blu );} } button.mag { color: var(--fg_mag ); background-color: var(--bg_mag ); border-color: var(--border_mag ); box-shadow:0 0 0.25em var(--shadow_mag ); mdi svg {fill: var(--fg_mag );} } button.whi { color: var(--fg_whi ); background-color: var(--bg_whi ); border-color: var(--border_whi ); box-shadow:0 0 0.25em var(--shadow_whi ); mdi svg {fill: var(--fg_whi );} } button.blk:hover:not(.disabled) { color: var(--hover_fg_blk ); background-color: var(--hover_bg_blk); border-color: var(--hover_border_blk); box-shadow:0 0 0.50em var(--hover_shadow_blk); mdi svg {fill: var(--hover_fg_blk );} } button.red:hover:not(.disabled) { color: var(--hover_fg_red ); background-color: var(--hover_bg_red); border-color: var(--hover_border_red); box-shadow:0 0 0.50em var(--hover_shadow_red); mdi svg {fill: var(--hover_fg_red );} } button.ora:hover:not(.disabled) { color: var(--hover_fg_ora ); background-color: var(--hover_bg_ora); border-color: var(--hover_border_ora); box-shadow:0 0 0.50em var(--hover_shadow_ora); mdi svg {fill: var(--hover_fg_ora );} } button.yel:hover:not(.disabled) { color: var(--hover_fg_yel ); background-color: var(--hover_bg_yel); border-color: var(--hover_border_yel); box-shadow:0 0 0.50em var(--hover_shadow_yel); mdi svg {fill: var(--hover_fg_yel );} } button.grn:hover:not(.disabled) { color: var(--hover_fg_grn ); background-color: var(--hover_bg_grn); border-color: var(--hover_border_grn); box-shadow:0 0 0.50em var(--hover_shadow_grn); mdi svg {fill: var(--hover_fg_grn );} } button.cya:hover:not(.disabled) { color: var(--hover_fg_cya ); background-color: var(--hover_bg_cya); border-color: var(--hover_border_cya); box-shadow:0 0 0.50em var(--hover_shadow_cya); mdi svg {fill: var(--hover_fg_cya );} } button.blu:hover:not(.disabled) { color: var(--hover_fg_blu ); background-color: var(--hover_bg_blu); border-color: var(--hover_border_blu); box-shadow:0 0 0.50em var(--hover_shadow_blu); mdi svg {fill: var(--hover_fg_blu );} } button.mag:hover:not(.disabled) { color: var(--hover_fg_mag ); background-color: var(--hover_bg_mag); border-color: var(--hover_border_mag); box-shadow:0 0 0.50em var(--hover_shadow_mag); mdi svg {fill: var(--hover_fg_mag );} } button.whi:hover:not(.disabled) { color: var(--hover_fg_whi ); background-color: var(--hover_bg_whi); border-color: var(--hover_border_whi); box-shadow:0 0 0.50em var(--hover_shadow_whi); mdi svg {fill: var(--hover_fg_whi );} } button.force-fg-black,button.force-fg-black:hover { color: var(--gra_000) !important; mdi svg {fill: var(--gra_000) !important;} } button.force-fg-white,button.force-fg-white:hover { color: var(--gra_100) !important; mdi svg {fill: var(--gra_100) !important;} } button.forbidden { cursor : not-allowed; background : repeating-linear-gradient(-45deg, var(--gra_000)00, var(--gra_000)00 5px, #80808040 5px, #80808040 10px); } permalink { .default { color: var(--color_fg_alt); svg { fill: var(--color_fg_alt) ; } } .success { color: var(--fg_grn ); svg { fill: var(--fg_grn ) ; } } .failure { color: var(--fg_red ); svg { fill: var(--fg_red ) ; } } } .icon { .default { color: var(--color_fg_alt); svg { fill: var(--color_fg_alt) ; } } .red { color: var(--fg_red ); svg { fill: var(--fg_red ) ; } } .ora { color: var(--fg_ora ); svg { fill: var(--fg_ora ) ; } } .yel { color: var(--fg_yel ); svg { fill: var(--fg_yel ) ; } } .grn { color: var(--fg_grn ); svg { fill: var(--fg_grn ) ; } } .cya { color: var(--fg_cya ); svg { fill: var(--fg_cya ) ; } } .blu { color: var(--fg_blu ); svg { fill: var(--fg_blu ) ; } } .mag { color: var(--fg_mag ); svg { fill: var(--fg_mag ) ; } } } /* preview cards */ .preview::after { background: linear-gradient(to bottom,color-mix(in srgb, var(--color_bg ) 0%, transparent),var(--color_bg )); } button .preview::after { background: linear-gradient(to bottom,color-mix(in srgb, var(--pri_2 ) 0%, transparent),var(--pri_2 )); } button:hover:not(.disabled) .preview::after { background: linear-gradient(to bottom,color-mix(in srgb, var(--color_bg ) 0%, transparent),var(--color_bg )); } button.blk .preview::after { background: linear-gradient(to bottom,color-mix(in srgb, var(--bg_blk ) 0%, transparent),var(--bg_blk )); } button.red .preview::after { background: linear-gradient(to bottom,color-mix(in srgb, var(--bg_red ) 0%, transparent),var(--bg_red )); } button.ora .preview::after { background: linear-gradient(to bottom,color-mix(in srgb, var(--bg_ora ) 0%, transparent),var(--bg_ora )); } button.yel .preview::after { background: linear-gradient(to bottom,color-mix(in srgb, var(--bg_yel ) 0%, transparent),var(--bg_yel )); } button.grn .preview::after { background: linear-gradient(to bottom,color-mix(in srgb, var(--bg_grn ) 0%, transparent),var(--bg_grn )); } button.cya .preview::after { background: linear-gradient(to bottom,color-mix(in srgb, var(--bg_cya ) 0%, transparent),var(--bg_cya )); } button.blu .preview::after { background: linear-gradient(to bottom,color-mix(in srgb, var(--bg_blu ) 0%, transparent),var(--bg_blu )); } button.mag .preview::after { background: linear-gradient(to bottom,color-mix(in srgb, var(--bg_mag ) 0%, transparent),var(--bg_mag )); } button.whi .preview::after { background: linear-gradient(to bottom,color-mix(in srgb, var(--bg_whi ) 0%, transparent),var(--bg_whi )); } button.blk:hover:not(.disabled) .preview::after { background: linear-gradient(to bottom,color-mix(in srgb, var(--hover_bg_blk) 0%, transparent),var(--hover_bg_blk)); } button.red:hover:not(.disabled) .preview::after { background: linear-gradient(to bottom,color-mix(in srgb, var(--hover_bg_red) 0%, transparent),var(--hover_bg_red)); } button.ora:hover:not(.disabled) .preview::after { background: linear-gradient(to bottom,color-mix(in srgb, var(--hover_bg_ora) 0%, transparent),var(--hover_bg_ora)); } button.yel:hover:not(.disabled) .preview::after { background: linear-gradient(to bottom,color-mix(in srgb, var(--hover_bg_yel) 0%, transparent),var(--hover_bg_yel)); } button.grn:hover:not(.disabled) .preview::after { background: linear-gradient(to bottom,color-mix(in srgb, var(--hover_bg_grn) 0%, transparent),var(--hover_bg_grn)); } button.cya:hover:not(.disabled) .preview::after { background: linear-gradient(to bottom,color-mix(in srgb, var(--hover_bg_cya) 0%, transparent),var(--hover_bg_cya)); } button.blu:hover:not(.disabled) .preview::after { background: linear-gradient(to bottom,color-mix(in srgb, var(--hover_bg_blu) 0%, transparent),var(--hover_bg_blu)); } button.mag:hover:not(.disabled) .preview::after { background: linear-gradient(to bottom,color-mix(in srgb, var(--hover_bg_mag) 0%, transparent),var(--hover_bg_mag)); } button.whi:hover:not(.disabled) .preview::after { background: linear-gradient(to bottom,color-mix(in srgb, var(--hover_bg_whi) 0%, transparent),var(--hover_bg_whi)); } /* ----------------------------------------------------------------- * css not yet ported to variables * -------------------------------------------------------------- */ /* Light mode */ @media (prefers-color-scheme: light) { .maybe_darkify { filter:invert(0) hue-rotate(0deg); } ::cue { background-color:var(--gra_100); color:#101010; } ::cue:past { background-color:#ff114c; color:#550519; } ::cue:future { background-color:#8fdc43; color:#2f4916; } body { table { border-color: #aaaaaa; } table#indexlist>tr.indexhead>th { border-color: #aaaaaa; background-color: #c0c0c0; color: #202020; } thead>tr>th { border-color: #aaaaaa; background-color: #aaaaaa; color: #000000; } thead>tr>td { border-color: #aaaaaa; background-color: #aaaaaa; color: #000000; } tbody>tr>th { border-color: #c0c0c0; color: #101010; } tbody>tr>td { border-color: #c0c0c0; color: #101010; } tfoot>tr>th { border-color: #aaaaaa; background-color: #c0c0c0; color: #202020; } tfoot>tr>td { border-color: #c0c0c0; background-color: #e0e0e0; color: #202020; } tbody>tr.hover_highlight:hover>th, table#indexlist>tbody>tr:hover>th { background-color: #FF6C11; } tbody>tr.hover_highlight:hover>td, table#indexlist>tbody>tr:hover>td { background-color: #FF6C11; } table#indexlist { tr.odd { background-color: var(--gra_100)08; } tr.even { background-color: var(--gra_000)18; } } none ,.none { opacity: 25%; } digit,int ,.digit,.int, table#indexlist>tbody>tr>td.indexcolsize { color: #2d2650; } float ,.float { color: #2d2650; } true ,.true { color: #2f4916; } false ,.false { color: #550519; } a:link { color: #152b4d; } a:visited { color: #152b4d; } a:hover { color: #152b4d; } a:active { color: #152b4d; } a.fg_def { color: var(--color_fg); } badge { color: #303030; border-color: #eeeeee; background-color: #c0c0c0; box-shadow: 0 0 0.25em var(--gra_000); } label { color: #303030; } label:hover { color: #101010; } label>a:link,label>a:visited { color: #303030; } label>a:hover { color: #101010; } click>a:link,click>a:visited { color: #303030; } input::placeholder { color: #303030; } input,select,click { color: #303030; border-color: #eeeeee ; background-color: var(--bg_def); box-shadow: 0 0 0.25em var(--gra_000); } input:hover,select:hover,click:hover { color: var(--gra_000); border-color: #15474d ; background-color: var(--bg_cya); box-shadow: 0 0 0.25em var(--gra_000); } input>a:link,input>a:visited { color: #303030; } input.discrete::placeholder { color: var(--gra_000); } input.discrete { color: var(--gra_000); border-color: #eeeeee00; background-color: var(--gra_100)00; box-shadow: none; } input.discrete:hover { color: var(--gra_000); border-color: #552405 ; background-color: #FF6C11 ; box-shadow: 0 0 0.25em var(--gra_000); } input[type=checkbox] { filter:invert(0); box-shadow: 0 0 0.125em var(--gra_000); } main ol li:before { color: var(--gra_000); } } } /* Dark mode */ @media (prefers-color-scheme: dark) { ::cue { background-color:#101010; color:#aaaaaa; } ::cue:past { background-color:#550519; color:#ff114c; } ::cue:future { background-color:#2f4916; color:#8fdc43; } body { table { border-color: #555555; } table#indexlist>tbody>tr.indexhead { border-color: #555555; background-color: #303030; color: #e0e0e0; } thead>tr>th { border-color: #555555; background-color: #555555; color: #ffffff; } thead>tr>td { border-color: #555555; background-color: #555555; color: #ffffff; } tbody>tr>th { border-color: #303030; color: #cccccc; } tbody>tr>td { border-color: #202020; color: #cccccc; } tfoot>tr>th { border-color: #555555; background-color: #303030; color: #e0e0e0; } tfoot>tr>td { border-color: #303030; background-color: #202020; color: #e0e0e0; } tbody>tr.hover_highlight:hover>th, table#indexlist>tbody>tr:hover>th { background-color: #552405; } tbody>tr.hover_highlight:hover>td, table#indexlist>tbody>tr:hover>td { background-color: #552405; } table#indexlist { tr.odd { background-color: var(--gra_000)18; } tr.even { background-color: var(--gra_100)08; } } none ,.none { opacity: 25%; } digit,int ,.digit,.int, table#indexlist>tbody>tr>td.indexcolsize { color: #8772f2; } float ,.float { color: #8772f2; } true ,.true { color: #8fdc43; } false ,.false { color: #ff114c; } a:link { color: #4082e8; } a:visited { color: #4082e8; } a:hover { color: #4082e8; } a:active { color: #4082e8; } a.fg_def { color: var(--color_fg); } badge { color: #c0c0c0; border-color: #555555; background-color: #303030; box-shadow: 0 0 0.25em var(--gra_000); } label { color: #c0c0c0; } label:hover { color: #eeeeee; } label>a:link,label>a:visited { color: #c0c0c0; } label>a:hover { color: #eeeeee; } click>a:link,click>a:visited { color: #c0c0c0; } input::placeholder { color: #c0c0c0; } input,select,click { color: #c0c0c0; border-color: #c0c0c0; background-color: var(--bg_def); box-shadow: 0 0 0.25em var(--gra_000); } input:hover,select:hover,click:hover { color: var(--gra_100); border-color: #40d6e8; background-color: var(--bg_cya); box-shadow: 0 0 0.25em var(--gra_000); } input>a:link,input>a:visited { color: #c0c0c0; } input.discrete::placeholder { color: var(--gra_100); } input.discrete { color: var(--gra_100); border-color: #55555500; background-color: #10101000; box-shadow: none; } input.discrete:hover { color: var(--gra_100); border-color: #FF6C11 ; background-color: #552405 ; box-shadow: 0 0 0.25em var(--gra_000); } input[type=checkbox] { filter:invert(1); box-shadow: 0 0 0.125em var(--gra_100); } main ol li:before { color: var(--gra_100); } } } /* Should we try to fudge a bright image into a dark-theme image? Add the class "maybe_darkify" to it. */ @media (prefers-color-scheme: dark ) { .maybe_darkify { filter:invert(1) hue-rotate(180deg); } } @media (prefers-color-scheme: light) { .maybe_darkify { filter:invert(0) hue-rotate( 0deg); } } @media print { body { * { color: black !important; background-color: none; } tbody>tr.hover_highlight:hover>th, table#indexlist>tbody>tr:hover>th { background-color: inherit !important; } tbody>tr.hover_highlight:hover>td, table#indexlist>tbody>tr:hover>td { background-color: inherit !important; } button, button:hover { border-color: var(--gra_000); box-shadow: none; print-color-adjust: exact; } badge, badge:hover, label, label:hover, click, click:hover, input, input:hover { box-shadow: none !important; print-color-adjust: exact; } } } .toc_tree { color: var(--pri_1) }