donsol-js/sources/links/theme.css
Stephen Jianu 729c71fac0 Add Settings panel with a button to change themes
Only 2 themes besides the default are implemented for now.
More to come!
2023-12-31 16:29:17 -06:00

54 lines
No EOL
2.5 KiB
CSS

body { background-color:var(--background) !important };
.fh { color:var(--f_high) !important; stroke:var(--f_high) !important };
.fm { color:var(--f_med) !important ; stroke:var(--f_med) !important };
.fl { color:var(--f_low) !important ; stroke:var(--f_low) !important };
.f_inv { color:var(--f_inv) !important ; stroke:var(--f_inv) !important };
.bh { background-color:var(--b_high) !important; fill:var(--b_high) !important };
.bm { background-color:var(--b_med) !important ; fill:var(--b_med) !important };
.bl { background-color:var(--b_low) !important ; fill:var(--b_low) !important };
.b_inv { background-color:var(--b_inv) !important ; fill:var(--b_inv) !important };
.b { background-color:var(--background) !important; }
/* Donsol Theme Scheme */
/* Red */
svg .fill_red { fill:var(--f_med) !important }
#board card.heart .face { color:var(--f_med) !important;}
#board card.diamond .face { color:var(--f_med) !important;}
/* Black */
svg .fill_black { fill:var(--f_high) !important }
#board card.clove .face { color:var(--f_high) !important;}
#board card.spade .face { color:var(--f_high) !important;}
#board card.joker .face { color:var(--f_high) !important;}
svg .stroke_black { stroke:var(--f_high) !important }
/* Grey */
svg .stroke_grey { stroke:var(--f_low) !important }
svg .fill_grey { opacity:0.25; fill:var(--f_low) !important }
/* White */
svg .fill_white { fill:var(--b_high) !important }
#player .button { border:2px solid var(--b_high) !important; color: var(--b_high); }
#player .button:hover { background-color:var(--b_high) !important; color:var(--background); }
#board card .face { background-color:var(--b_high)}
.card_11 .face .name,.card_13 .face .name,.card_15 .face .name,.card_17 .face .name { color:var(--b_high);}
#player .gage { color:var(--b_high) }
svg .stroke_white { stroke:var(--b_high) !important }
/* Dark Grey */
#table card { background-color:var(--b_low) !important}
#player .gage .value .unit { color:var(--b_low) !important}
#player .gage .progress { background-color:var(--b_low) !important }
/* EXTRAS*/
#player .gage.health .progress .bar { background-color:var(--b_inv) !important }
#player .gage.shield .progress .bar { background-color:var(--b_high) !important }
#player .gage.experience .progress .bar { background-color:var(--b_med) !important }
#table card .shortcut { color:var(--background) !important}
#difficulty { color:var(--f_high) !important }
/* DEATH*/
#player.death a.escape { border-color:var(--b_inv) !important; }
#player.death a.escape:hover { background-color:var(--b_inv) !important; }