diff --git a/Black-Seven/Black-Seven.css b/Black-Seven/Black-Seven.css new file mode 100644 index 0000000000..81fb2ba4b1 --- /dev/null +++ b/Black-Seven/Black-Seven.css @@ -0,0 +1,504 @@ + +.charsheet { + background:black; + width:840px; +} + +div.sheet-top, +div.sheet-middle, +div.sheet-bottom { + background:#F5F5DC; + width:830px; + border-radius: 15px; + padding:5px; +} +div.sheet-box { + border:1px solid black; + width:100%; +} +/* 3colrow */ + +.charsheet .sheet-3colrow .sheet-col { + width: calc(33% - 9px) !important; + margin-right: 5px !important; +} + +.charsheet .sheet-3colrow .sheet-col:last-child { + margin-right: 0 !important; +} +/* Grid */ +div.sheet-grid { + display: grid; + grid-template-columns: 300px 300px 200px; + grid-column-gap: 5px; +} +div.sheet-grid2 { + display: grid; + grid-template-columns: 360px 200px 200px; + grid-column-gap: 10px; +} +div.sheet-grid3 { + display: grid; + grid-template-columns: 90px 90px 90px 90px; + grid-column-gap: 1px; + grid-row-gap: 1px; + text-align:right; +} +div.sheet-grid4 { + display: grid; + grid-template-columns: 33% 34% 33%; + grid-column-gap: 0px; +} +div.sheet-grid5 { + display: grid; + grid-template-columns: 200px; + grid-row-gap: 0px; + grid-template-rows:30px 80px 80px 80px 60px; +} +div.sheet-grid_box { + border:1px solid black; +} +div.sheet-grid_box_2 { + border:1px solid black; + height:80px; + width:100%; +} +div.sheet-grid_box_2.sheet-wound_2 { + border:1px dotted black;} + +div.sheet-grid_box_3 { + height:24px; + width:195px; +} +div.align_middle { + margin-top:auto; + margin-bottom:auto; + vertical-align:middle; + +} +div.sheet-spacer { + height:20px; + width:66px; +} +/* text */ +input.sheet-name { + width:100%; + height:40px; + background: transparent; + font-variant: small-caps; + font-size: 35px; + font-family: 'Copperplate'; + border:none; +} +input.sheet-data { + width:100%; + height:20px; + background: transparent; + font-family: 'Copperplate'; + border-top:none; + border-left:none; + border-right:none; + border-bottom:1px solid black; +} +div.sheet-label { + font-family: 'Courier New'; + text-align:right; + font-size: 35px; + font-weight:bold; + +} +div.sheet-label_2 { + font-family: 'Courier New'; + text-align:center; + font-size: 1.2em; + font-weight:bold; +} +.sheet-underline { + border-top:1px solid black; + border-bottom:1px solid black; +} +.sheet-center { + text-align:center; + margin: auto; +} +/* number */ +input.sheet-number_1 { + width:79px; + height:35px; + font-size:30px; + background: transparent; + font-family: 'Copperplate'; + text-align:center; + border:none; + +} +/* Rows and Items */ +.charsheet .sheet-row { + height: 24px; + margin: 2px 0px 2px; +} +.charsheet .sheet-doublerow { + height: 48px; + margin: 2px 0px 2px; +} +.charsheet .sheet-item { + display: inline-block; + width: 100%; + height: 28px; + vertical-align: middle; + margin: 0 -2px; + text-align: left; + padding: 3px 2px; +} +.charsheet .sheet-trait { + position: relative; +} +.charsheet .sheet-item.sheet-5 { + width: 5px; +} +.charsheet .sheet-item.sheet-14 { + width: 14px; +} +.charsheet .sheet-item.sheet-20 { + width: 20px; +} +.charsheet .sheet-item.sheet-30 { + width: 30px; +} +.charsheet .sheet-item.sheet-40 { + width: 40px; +} +.charsheet .sheet-item.sheet-50 { + width: 50px; +} +.charsheet .sheet-item.sheet-60 { + width: 60px; +} +.charsheet .sheet-item.sheet-65 { + width: 65px; +} +.charsheet .sheet-item.sheet-70 { + width: 70px; +} +.charsheet .sheet-item.sheet-80 { + width: 80px; +} +.charsheet .sheet-item.sheet-85 { + width: 85px; +} +.charsheet .sheet-item.sheet-90 { + width: 90px; +} +.charsheet .sheet-item.sheet-100 { + width: 100px; +} +.charsheet .sheet-item.sheet-110 { + width: 110px; +} +.charsheet .sheet-item.sheet-120 { + width: 120px; +} +.charsheet .sheet-item.sheet-140 { + width: 140px; +} +.charsheet .sheet-item.sheet-150 { + width: 150px; +} +.charsheet .sheet-item.sheet-160 { + width: 160px; +} +.charsheet .sheet-item.sheet-180 { + width: 180px; +} +.charsheet .sheet-item.sheet-195 { + width: 195px; +} +.charsheet .sheet-item.sheet-200 { + width: 200px; +} +.charsheet .sheet-item.sheet-210 { + width: 210px; +} +.charsheet .sheet-item.sheet-230 { + width: 230px; +} +.charsheet .sheet-item.sheet-395 { + width: 395px; +} +.charsheet .sheet-item.sheet-400 { + width: 400px; +} +.sheet-real { + width: auto; +} +.charsheet .sheet-long { + width: 300px; +} +.charsheet .sheet-row label { + font-size:13px; + font-weight:900; + text-align:left; +} +/* =====Buttons ===== */ +button[type=roll].sheet-btn:before { + content: ""; +} +button[type=roll].sheet-btn { + margin:0px; + padding:0px; + background:transparent; + font-size:13px; + font-weight:bold; + box-shadow:none; + height:16px; + width:100%; + color:#333; + border:none; + text-align:center; +} +button[type=roll].sheet-btn:hover { + color:#8b0000; +} +button[type=roll].sheet-btn:active { + color: #000000; +} +/* Yes No */ +div.sheet-condition { + position: relative; + left: 0px; + top: 0px; + width: 200px; + height: 20px; + line-height:18px; + margin-left: 0px; +} +input.sheet-condition { + width: 200px; + height: 20px; + position: absolute; + left:0px; + top:0px; + z-index: 1; + opacity: 0; +} +span.sheet-condition { + margin: 0px 0 0 0px; + display: none; + position: absolute; + left:0px; + top:0px; + width:30px; +} +input.sheet-no { + z-index: 2; +} +span.sheet-no { + width: 200px; + font-weight:bold; + color:gray; + text-decoration: line-through; + line-height:18px; +} +span.sheet-yes { + width: 200px; + font-weight:bold; + color:red; + line-height:18px; + text-shadow:0px 0px 5px white, 0px 0px 15px red, 0px 0px 20px red, 0px 0px 25px red; +} +input.sheet-no:checked + input.sheet-yes, +input.sheet-yes:checked + input.sheet-no { + z-index: 3; +} +input.sheet-no:checked ~ span.sheet-no, +input.sheet-yes:checked ~ span.sheet-yes { + display: inline-block; +} +/* Hit Points */ + +/* Yes No */ +div.sheet-wounds { + position: relative; + left: 0px; + top: 0px; + width: 100%; + height: 80px; + margin-left: 0px; +} +input.sheet-wounds { + width: 100%; + height: 80px; + position: absolute; + left:0px; + top:0px; + z-index: 1; + opacity: 0; +} +span.sheet-wounds { + margin: 0px 0 0 0px; + display: none; + position: absolute; + left:0px; + top:0px; + width:66px; +} +input.sheet-no_wound { + z-index: 2; +} +span.sheet-no_wound { + width: 100%; + height: 80px; + box-shadow:inset 0px 0px 5px black; + background:none; +} +span.sheet-no_wound.sheet-wound_2 { + opacity: 0.5; + box-shadow:inset 0px 0px 5px white; +} +span.sheet-yes_wound { + width: 100%; + height: 80px; + box-shadow:inset 0px 0px 5px black; + background: url("https://66.media.tumblr.com/6742ac9ca18749792bc01f54a2dbc243/45a49b82204df087-d3/s400x600/4482fcdc67cd2bc2887f94069cf6e156fe763538.png") no-repeat 0 0; + background-size: contain; +} +span.sheet-yes_wound.sheet-wound_2 { + opacity: 0.5; + box-shadow:inset 0px 0px 5px white; +} +input.sheet-no_wound:checked + input.sheet-yes_wound, +input.sheet-yes_wound:checked + input.sheet-no_wound { + z-index: 3; +} +input.sheet-no_wound:checked ~ span.sheet-no_wound, +input.sheet-yes_wound:checked ~ span.sheet-yes_wound { + display: inline-block; +} + +/* Hide actual radio/checkbox */ +input.sheet-fancy_1[type="checkbox"] { + opacity: 0; + width: 24px; + height: 24px; + position: relative; + top: 5px; + left: 6px; + margin: -10px; + cursor: pointer; +} +/* Fake checkbox */ +input.sheet-fancy_1[type="checkbox"] + span::before { + margin-right: 4px; + line-height: 14px; + text-align: center; + display: inline-block; + vertical-align: middle; + font-family: 'Pictos'; + content: "E"; + width: 24px; + height: 24px; + font-size: 24px; + color:black; +} + +input.sheet-fancy_1[type="checkbox"]:checked + span::before { + font-family: 'Pictos'; + content: "E"; + color:red; + text-shadow:0px 0px 5px black, 0px 0px 15px red, 0px 0px 20px red, 0px 0px 25px red; +} +/* Hide actual radio/checkbox */ +input.sheet-fancy_2[type="checkbox"] { + opacity: 0; + width: 24px; + height: 24px; + position: relative; + top: 5px; + left: 6px; + margin: -10px; + cursor: pointer; +} +/* Fake checkbox */ +input.sheet-fancy_2[type="checkbox"] + span::before { + margin-right: 4px; + line-height: 14px; + text-align: center; + display: inline-block; + vertical-align: middle; + font-family: 'Pictos'; + content: "!"; + width: 24px; + height: 24px; + font-size: 24px; + color:black; +} + +input.sheet-fancy_2[type="checkbox"]:checked + span::before { + font-family: 'Pictos'; + content: "!"; + color:red; + text-shadow:0px 0px 5px black, 0px 0px 15px red, 0px 0px 20px red, 0px 0px 25px red; +} +/* %%%%% %%%%% %%%%% */ +/* b7 */ +/* %%%%% %%%%% %%%%% */ +.sheet-rolltemplate-b7 { + width: 190px; + padding: 2px; + background: white; + border-radius:8px; + border-width:1px; + border-style:solid; + color:black; + font-family: 'Courier New'; +} +.sheet-rolltemplate-b7 b.sheet-1 { + color:red; + font-size:1em; +} +.sheet-rolltemplate-b7 b.sheet-2 { + color:darkred; + font-size:1.4em; + font-variant:small-caps; +} +.sheet-rolltemplate-b7 span { + color:red; + font-size:1.2em; + background:transparent; + border:none; +} +.sheet-rolltemplate-b7 span.sheet-success { + font-family: 'Lucida Sans Typewriter'; + color:green; + font-size:1.1em; + font-weight:bold; +} +.sheet-rolltemplate-b7 span.sheet-failure { + font-family: 'Lucida Sans Typewriter'; + color:red; + font-size:1.1em; + font-weight:bold; +} +.sheet-rolltemplate-b7 .sheet-result { + font-size: 1.2em; + text-align: center; + color: rgb(112, 0, 0); + padding-bottom: 20px; +} +.sheet-rolltemplate-b7 .inlinerollresult { + background-color: transparent; + color: #000000; + border: none; +} +.sheet-rolltemplate-b7 .inlinerollresult.fullcrit { + color: #3FB315; + border: none; +} +.sheet-rolltemplate-b7 .inlinerollresult.fullfail { + color: #000000; + border: none; +} +.sheet-rolltemplate-b7 .inlinerollresult.importantroll { + color: #3FB315; + border: none; +} \ No newline at end of file diff --git a/Black-Seven/Black-Seven.html b/Black-Seven/Black-Seven.html new file mode 100644 index 0000000000..64850190c8 --- /dev/null +++ b/Black-Seven/Black-Seven.html @@ -0,0 +1,440 @@ +