html, body {
margin: 0;
padding: 0;
min-height: 100%;
}
main {
background: #18E5FF;
margin: 0;
width: 100%;
min-height: 100vh;
box-sizing: border-box;
}
section {
margin: 0 auto 53px;
width: 96%;
overflow: hidden;
}
article {
float: left;
width: 62.8888889%;
padding: 0.8em 0.5em;
box-sizing: border-box;
}
aside {
background: #D0F0FF;
float: right;
width: 36.7777778%;
margin-top: 10px;
box-sizing: border-box;
padding: 0.5em;
}
#roll_result {
background: white;
margin: 0 0 5px;
padding: 0.5em;
width: 100%;
min-height: 60px;
box-sizing: border-box;
}
.warning {
background: #FFFF00;
}
hr.fancyHR {
height: 10px;
border: 0;
box-shadow: 0 10px 10px -10px #8c8b8b inset;
margin: 20px 0px 20px 0px;
}
hr.divider {
height: 4px;
border: 0;
background: #999;
margin: 20px 0px 20px 0px;
}
/* ---- tabs ---- */
#form_tabs {
background: white;
border: 1px solid #999;
box-sizing: border-box;
}
#form_tabs .tab_bar {
display: flex;
border-bottom: 1px solid #999;
}
#form_tabs .tab_link {
background: #ADCEFF;
border: none;
border-right: 1px solid #999;
margin: 0;
padding: 0.4em 0.8em;
cursor: pointer;
font: inherit;
}
#form_tabs .tab_link:last-child {
border-right: none;
}
#form_tabs .tab_link.active {
background: white;
font-weight: bold;
}
#form_tabs .tab_panel {
display: none;
padding: 0.8em;
}
#form_tabs .tab_panel.active {
display: block;
}
/* ---- help dialog ---- */
#help_dialog_backdrop {
display: none;
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.4);
z-index: 10;
}
#help_dialog_backdrop.open {
display: block;
}
#help_dialog {
display: none;
position: fixed;
top: 5%;
left: 50%;
transform: translateX(-50%);
max-height: 90%;
overflow-y: auto;
background: white;
border: 1px solid #999;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
padding: 1em 1.5em;
width: min(700px, 90%);
z-index: 11;
}
#help_dialog.open {
display: block;
}
#help_close {
float: right;
font-size: 1.5em;
line-height: 1;
border: none;
background: none;
cursor: pointer;
}
/* ---- custom dice slots ---- */
input.orange {
background: #FFD9A0;
}
input.blue {
background: #A0D9FF;
}
/* ---- statistics sidebar ---- */
#side_header {
width: 100%;
overflow: hidden;
}
#side_header h2 {
float: left;
}
#history_form {
float: right;
}
#last_rolls {
margin: 0.5em;
clear: both;
}
ol#last_list {
counter-reset: li -1;
padding-left: 0.5em;
}
ol#last_list li {
list-style: none;
}
ol#last_list li::before {
content: "L-" counter(li) " : ";
counter-increment: li;
}
#stats_tab {
clear: both;
}
#stats_tab details {
border: 1px solid #999;
margin-bottom: 0.3em;
}
#stats_tab summary {
background: #ADCEFF;
padding: 0.4em 0.8em;
cursor: pointer;
font-weight: bold;
}
table {
width: 100%;
}
table, th, td {
border-collapse: collapse;
border: 1px solid black;
}
th, td {
padding: 3px 7px 3px 7px;
}
thead {
background-color: #CDE1FF;
}
th {
background-color: #ADCEFF;
}
/* ---- die sizes ---- */
.Q { width: 13px; height: 13px; }
.H { width: 25px; height: 25px; }
.T { width: 37px; height: 37px; }
.F { width: 49px; height: 49px; }
.die {
position: relative;
display: inline-block;
}
.die span {
position: absolute;
width: 49px;
height: 49px;
}
.die span.loading {
position: static;
display: inline-block;
}
/* ---- hold/free hover overlays, per die-back shape ---- */
/* BEGIN GENERATED HOLD_FREE_CSS */
.SS span.hold {
display: none;
background: url('data:image/svg+xml;utf8,') no-repeat;
background-size: cover;
}
.SS span.free:hover {
background: url('data:image/svg+xml;utf8,') no-repeat;
background-size: cover;
}
.SR span.hold {
display: none;
background: url('data:image/svg+xml;utf8,') no-repeat;
background-size: cover;
}
.SR span.free:hover {
background: url('data:image/svg+xml;utf8,') no-repeat;
background-size: cover;
}
.TS span.hold {
display: none;
background: url('data:image/svg+xml;utf8,') no-repeat;
background-size: cover;
}
.TS span.free:hover {
background: url('data:image/svg+xml;utf8,') no-repeat;
background-size: cover;
}
.KS span.hold {
display: none;
background: url('data:image/svg+xml;utf8,') no-repeat;
background-size: cover;
}
.KS span.free:hover {
background: url('data:image/svg+xml;utf8,') no-repeat;
background-size: cover;
}
.PS span.hold {
display: none;
background: url('data:image/svg+xml;utf8,') no-repeat;
background-size: cover;
}
.PS span.free:hover {
background: url('data:image/svg+xml;utf8,') no-repeat;
background-size: cover;
}
/* END GENERATED HOLD_FREE_CSS */