37 lines
3.2 KiB
CSS
37 lines
3.2 KiB
CSS
body { background:black; font-family: 'input_mono_regular',monospace; overflow-y: hidden; user-select: none; cursor: default; -webkit-app-region: drag; padding:30px;}
|
|
|
|
#wrapper { display: block;max-width: 900px; height: calc(25vw * 1.25 + 90px);max-height:400px;margin:0px auto;position: relative;width:100%; min-width: 430px; -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 > * { 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 div#timeline { display: inline-block;color:white; transition: opacity 250ms; opacity: 0 }
|
|
#player div#timeline b { font-family: 'input_mono_medium',monospace; }
|
|
|
|
#player.locked a.escape { display:none;}
|
|
|
|
#board, #table { display:block; position: absolute; width: calc(100% + 15px)}
|
|
#board card, #table card { display: inline-block !important;height: calc(25vw * 1.25);max-height:300px;max-width:200px;width: calc(25% - 15px);margin-right: 15px;border-radius: 7px; position:relative; overflow:hidden;min-height: 300px; min-width:200px;}
|
|
#board card { top:10px; opacity:0.01; z-index:900; transition: opacity 250ms, top 150ms }
|
|
#board card:hover { cursor:pointer; top:5px !important;}
|
|
#board card .face { display:block;width: 100%;height: calc(100% - 5px);border-radius: 7px;}
|
|
#board card .face img { width:100%; position: absolute;bottom:0px; }
|
|
#board card .face .value { display: block;position: absolute;width: 30px;height: 30px;left: 15px;top: 60px;font-size: 12px;text-align: center;}
|
|
#board card .face .graphic svg { display: block;position: absolute;left: calc(50% - 100px);bottom: calc(50% - 150px);}
|
|
#board card .face .icon { display: block;position: absolute;width: 30px;height: 30px;left: 15px;top: 15px;font-size: 11px; z-index:900;}
|
|
#board card .face .name { display: block;position: absolute;bottom: 20px;text-align: center;font-size: 11px;width: 100%;}
|
|
|
|
#table card { }
|
|
#table card .shortcut { position:absolute; right:20px; bottom:15px; color:#555;}
|
|
|
|
#board card:nth-child(2), #table card:nth-child(2) { position:relative;}
|
|
#board card:nth-child(3), #table card:nth-child(3) { position:relative;}
|
|
#board card:nth-child(4), #table card:nth-child(4) { position:relative;}
|
|
|
|
#difficulty:hover { text-decoration: underline; cursor: pointer; }
|