stephen/donsol-js
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add Settings panel with a button to change themes

Browse source 
Only 2 themes besides the default are implemented for now.
More to come!
This commit is contained in:
Stephen Jianu 2023-12-31 16:29:17 -06:00
commit 729c71fac0
6 changed files with 74 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

8
sources/links/main.css
View file

@ -2,15 +2,17 @@ body { background:black; font-family: 'input_mono_regular',monospace; min-width:
#wrapper { display: block;max-width: 900px; height: calc(25vw * 1.25 + 90px);max-height:400px;margin:0px auto;position: relative;width:100%; -webkit-app-region: drag;}
#player { display: block; font-size:12px; height:30px; line-height:20px; max-width:890px; -webkit-user-select: none;-webkit-app-region: drag; position: fixed; bottom:30px; width:calc(100% - 60px);}
#player { display: block; font-size:12px; height:30px; line-height:20px; max-width:890px; -webkit-user-select: none;-webkit-app-region: drag; position: fixed; bottom:60px; width:calc(100% - 60px);}
#player > * { vertical-align: top }
#player .gage { width: 120px;display: block;height:30px;position: relative; float:right; margin-left:2px;width:70px; padding-right: 50px; text-align: right}
#player .gage .value { display: inline-block;line-height: 20px;font-family: 'input_mono_medium';padding-left: 5px;}
#player .gage .event { display: inline-block;position: absolute;top: -20px;left: 0px; transition: all 250ms; opacity: 0; margin-left:5px; display: none}
#player .gage .progress { display: block;width: 40px;position: absolute; top:7px;overflow: hidden;height: 4px;border-radius: 20px;right:0px;}
#player .gage .progress .bar{ height:5px; display:block !important; transition: width 300ms}
#player a.escape { -webkit-app-region: no-drag;padding: 0px 8px;border-radius: 20px;display: inline-block;margin-right: 10px;line-height: 20px; border:2px solid white; margin-top:0px; color:white;}
#player a.escape:hover { cursor: pointer; }
#player .button { -webkit-app-region: no-drag;padding: 0px 8px;border-radius: 20px;display: inline-block;margin-right: 10px;line-height: 20px; border:2px solid white; margin-top:0px; color:white;}
#player .button:hover { cursor: pointer; }
#player select.button { appearance: none;-webkit-appearance: none;background-color: transparent; }
#player .settings { text-align: right; }
#player div#timeline { display: inline-block;color:white; transition: opacity 250ms; opacity: 0 }
#player div#timeline b { font-family: 'input_mono_medium',monospace; }

4
sources/links/theme.css
View file

@ -29,8 +29,8 @@ svg .fill_grey { opacity:0.25; fill:var(--f_low) !important }
/* White */
svg .fill_white { fill:var(--b_high) !important }
#player a.escape { border:2px solid var(--b_high) !important; color: var(--b_high); }
#player a.escape:hover { background-color:var(--b_high) !important; color:var(--background); }
#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) }