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: 36.7777778%;
padding: 0.8em 0.5em;
box-sizing: border-box;
}
aside {
background: #D0F0FF;
float: right;
width: 62.8888889%;
margin-top: 10px;
box-sizing: border-box;
padding: 0.5em;
}
#selection_form button {
margin: 3px;
}
#roll_result {
background: white;
margin: 0 0 5px;
padding: 0.5em;
width: 100%;
min-height: 60px;
box-sizing: border-box;
}
.warning {
background: #FFFF00;
}
.potential {
color: red;
}
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;
}
/* ---- score sheet ---- */
#score table {
width: 100%;
}
#score table, #score th, #score td {
border-collapse: collapse;
border: 1px solid black;
}
#score th, #score td {
padding: 3px 7px 3px 7px;
}
#score thead {
background-color: #00D0FF;
}
#score th {
background-color: #0090FF;
}
#score .subtitle {
background-color: #00F0FF;
}
#score .locked {
background-color: #A0F0FF;
}
#score tr[id].not-allowed {
cursor: not-allowed;
opacity: 0.6;
}
/* ---- history ---- */
#history_form {
margin: 0.5em 0;
}
#last_rolls {
margin: 0.5em 0;
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;
}
/* ---- leaderboard ---- */
#leaderboard {
clear: both;
margin: 0.5em 0;
}
#leaderboard_scroll {
max-height: 14em;
overflow-y: auto;
border: 1px solid black;
background: white;
}
ol#score_list {
counter-reset: li 0;
list-style: none;
margin: 0;
padding: 0;
}
ol#score_list li {
display: flex;
justify-content: space-between;
padding: 2px 7px;
border-bottom: 1px solid #ddd;
}
ol#score_list li::before {
content: counter(li) ". ";
counter-increment: li;
min-width: 2em;
}
ol#score_list li.new_score {
background: #FFFF00;
}
/* ---- 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;
}
/* ---- hold/free hover overlays (SS shape only: Yahtzee is always d6pips) ---- */
.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;
}