From 383f020d3f448b61560ab5b359a9dae3f101ddb0 Mon Sep 17 00:00:00 2001 From: CoalPoweredPuppet Date: Wed, 5 Sep 2018 06:47:24 -0400 Subject: [PATCH] Atomic Highway To match html update --- Atomic Highway/Atomic Highway.css | 117 ++++++++++++++++++++++++++---- 1 file changed, 102 insertions(+), 15 deletions(-) diff --git a/Atomic Highway/Atomic Highway.css b/Atomic Highway/Atomic Highway.css index f28df41289..edaebdad71 100644 --- a/Atomic Highway/Atomic Highway.css +++ b/Atomic Highway/Atomic Highway.css @@ -199,7 +199,19 @@ select.sheet-skillname { -webkit-padding-end: 00px; -moz-padding-end: 00px; } - +.sheet-tiny { + font-size:10px; + width:20px; + height:12px; + line-height:12px; + border-top:none; + border-left:none; + border-right:none; + background:#BEBEBE; + color:black; + border-radius:5px; + +} table.sheet-armored { background:white; border-collapse: separate; /* IE7 and lower */ @@ -209,7 +221,7 @@ table.sheet-armored { border:1px solid black; text-align:right; width:100%; - font-size:0.8em; + font-size:10px; padding:0px; } table.sheet-armored th { @@ -345,8 +357,11 @@ input.sheet-fortune[type="checkbox"] height: 20px; position: relative; top: 0px; - left: 10px; - margin: -8px; + left: -10px; + margin-right: -18px; + margin-left: -18px; + margin-top: -8px; + margin-bottom: -8px; cursor: pointer; z-index: 1; } @@ -354,12 +369,9 @@ input.sheet-fortune[type="checkbox"] /* ----Fake sheet-fortune checkbox---- */ input.sheet-fortune[type="checkbox"] + span::before { - display:inline-block; -} - -input.sheet-fortune[type="checkbox"] + span::before -{ - margin-right: 0px; + position: relative; + top: 0px; + left: -10px; line-height: 20px; text-align: center; display: inline-block; @@ -474,6 +486,55 @@ input.sheet-bigcheck[type="checkbox"]:checked + span::before content: "✓"; } /*--------------End of Big Check checkbox--------------*/ +/* ----Hide actual chipped Checkbox---- */ +input.sheet-refresh[type="checkbox"] { + opacity: 0; + width: 50px; + height: 14px; + position: relative; + top: 0px; + left: 0px; + cursor: pointer; + z-index: 1; + +} + +/* ----Fake Big Checkbox-- .sheet-bigcheck -- */ +input.sheet-refresh[type="checkbox"] + span::before { + position: relative; + top: 5px; + left: -50px; + + margin-bottom: 6px; + margin-left: 0px; + border: solid none; + line-height: 14px; + text-align: center; + display: inline-block; + vertical-align: middle; + + -moz-box-shadow: none; + -webkit-box-shadow: none; + box-shadow: none; + + background: none; + + content: "Health"; + color:black; + width: 34px; + height: 14px; + font-size: 14px; + + -moz-border-radius: 3px; + -webkit-border-radius: 3px; + border-radius: 3px; +} + +input.sheet-refresh[type="checkbox"]:active + span::before { + color: red; + content: "Health"; /* "?" */ + text-shadow: 0px 0px 0.5em #A52A2A; +} /*=====Buttons=====*/ /*=====Sheet Big=====*/ button[type=roll].sheet-big:before { @@ -578,34 +639,60 @@ span.sheet-health { display: none; } -input.sheet-square { z-index: 2; } +input.sheet-blank { z-index: 2; } +input.sheet-blank:checked + input.sheet-square, input.sheet-square:checked + input.sheet-slash, -input.sheet-slash:checked + input.sheet-exe { z-index: 3; } +input.sheet-slash:checked + input.sheet-exe{ z-index: 3; } +input.sheet-blank:checked ~ span.sheet-blank, input.sheet-square:checked ~ span.sheet-square, input.sheet-slash:checked ~ span.sheet-slash, input.sheet-exe:checked ~ span.sheet-exe { display: inline-block; } -.sheet-square { +.sheet-blank { width: 20px; height: 20px; background: url("http://ylwebsite.com/uploads/grey-box-shadow-418px-ylwebsite-transparent.png") no-repeat 0 0; background-size: 100%; } +.sheet-square { + width: 18px; + height: 18px; + background: none; + background-size: 100%; + border:1px solid black; + margin:2px; +} .sheet-slash { width: 20px; height: 20px; - background: url("http://images.clipartpanda.com/line-clipart-1194994615287196054line.svg.med.png") no-repeat 0 0; + position:relative; + top:-5px; + left:0px; + background: none; background-size: 100%; + font-weight:bold; + color:red; + text-align:center; + vertical-align:top; + font-size:20px; } .sheet-exe { width: 20px; height: 20px; - background: url("http://www.iconpng.com/png/vista-software/red-x.png") no-repeat 0 0; + position:relative; + top:-5px; + left:0px; + background: none; background-size: 100%; + font-weight:bold; + color:red; + text-align:center; + vertical-align:top; + font-size:20px; } .sheet-grid {