diff --git a/Elemental/elemental.css b/Elemental/elemental.css new file mode 100644 index 0000000000..587652d1f1 --- /dev/null +++ b/Elemental/elemental.css @@ -0,0 +1,350 @@ +.sheet-container { + position:relative; + width: 800px; + background-color: black; + color: green; + position: relative; + display: inline-block; + border: 4px double gold; + border-radius:15px; + padding: 10px; +} + +.sheet-header { + padding-bottom: 10px; + border-bottom: 4px double gold; +} + +.sheet-tabs { + margin-top: 10px; + position: relative; + width: 800px; } + .sheet-tabs::after { + clear: both; + content: ''; + display: block; } + .sheet-tabs .sheet-tab { + width: 800px; } + .sheet-tabs .sheet-tab:nth-of-type(2) > input[type="radio"], .sheet-tabs .sheet-tab:nth-of-type(2) > .sheet-tab-label { + margin-left: 20%; } + .sheet-tabs .sheet-tab:nth-of-type(3) > input[type="radio"], .sheet-tabs .sheet-tab:nth-of-type(3) > .sheet-tab-label { + margin-left: 40%; } + .sheet-tabs .sheet-tab:nth-of-type(4) > input[type="radio"], .sheet-tabs .sheet-tab:nth-of-type(4) > .sheet-tab-label { + margin-left: 60%; } + .sheet-tabs .sheet-tab:nth-of-type(5) > input[type="radio"], .sheet-tabs .sheet-tab:nth-of-type(5) > .sheet-tab-label { + margin-left: 80%; } + .sheet-tabs .sheet-tab > input[type="radio"] { + height: 30px; + margin: 0; + opacity: 0; + position: absolute; + top: 0; + width: 20%; + z-index: 1; } + + .sheet-tabs .sheet-tab > input[type="radio"]:hover ~ .sheet-tab-label { + background: #111111; + color: white; + border-bottom-color: gold; + } + + .sheet-tabs .sheet-tab > .sheet-tab-label { + align-items: center; + background: #555555; + border-radius: 6px 6px 0 0; + border: 2px solid gold; + color: white; + display: flex; + font-size: 11px; + font-variant: small-caps; + font-weight: bold; + height: 30px; + justify-content: center; + margin: 0; + position: absolute; + text-transform: uppercase; + top: 0; + width: 20%; + border-left-color: gold; + border-top-color: gold; + border-right-color: gold; + border-bottom-color: gold; + } + + .sheet-tabs .sheet-tab > input[type="radio"]:checked ~ .sheet-tab-label { + background: black; + border-color: gold; + border-bottom-color: black; + color: green; + } + + .sheet-tabs .sheet-tab > input[type="radio"]:checked { + cursor: auto; } + .sheet-tabs .sheet-tab > input[type="radio"]:checked ~ .sheet-tab-content { + display: block; + } + + .sheet-tabs .sheet-tab .sheet-tab-content { + display: none; + min-height: 300px; + padding-top: 32px; + width: 100%; + z-index: 10; + } + + .sheet-content { + padding: 5px; + border: 2px solid gold; + border-radius: 0 10px 10px 10px; + min-height:300px; + } + +.sheet-label { + float: left; + width: 50px; + color: white; + font-weight:bold; + font-size: 12px; + height: 12px; +} + +.sheet-input { + float: left; + width: calc(100% - 75px); +} + +.sheet-heading { + font-size: 1.5em; + font-weight:bold; + border:0px; + border-radius:0px; + font-variant: small-caps; +} + +.sheet-smallblock { + margin: 5px; + float: left; +} +.sheet-block { + background: #333333; + border-radius:15px; + border: 1px solid gold; + padding: 5px; + color: lightgrey; + min-height: 50px; + text-align: center; +} + +.sheet-block input { + font-size: 12px; + line-height:15px; + height: 15px; + margin-bottom:5px; +} + +.sheet-block select { + font-size: 12px; + line-height:15px; + height: 15px; + margin-bottom:5px; + padding: 0; +} + +.sheet-block option:disabled { + font-weight: bold; +} + +/* Hide actual radio */ +.sheet-block input[type="radio"] { + opacity: 0; + width: 16px; + height: 16px; + position: relative; + top: 5px; + left: 6px; + margin: -10px; + cursor: pointer; + z-index: 1; +} + +/* Fake radio */ +.sheet-block input[type="radio"] + span::before { + margin-right: 4px; + border: solid 1px #a8a8a8; + line-height: 14px; + text-align: center; + display: inline-block; + vertical-align: middle; + box-shadow: 0 0 2px #ccc; + background: #f6f6f6; + background: radial-gradient(black, black); + content: "•"; + width: 12px; + height: 12px; + font-size: 24px; + border-radius: 50%; +} + +/* Remove dot from all radios _after_ selected one */ +.sheet-block input[type="radio"]:checked ~ input[type="radio"] + span::before { + content: ""; +} + +table.sheet-xp { + width: 250px; +} +table.sheet-xp th{ + text-align: center; + font-weight:bold; + border:1px solid gold; + border-radius:15px; +} +table.sheet-xp td{ + text-align: center; + border:1px solid gold; + border-radius:15px; + padding:5px; + color: white; +} + +.sheet-attrname { + font-weight:bold; + font-size: 16px; + width:145px; + background:transparent; + border:0px; + color:White; +} + +.sheet-skillblock { + margin-left:20px; +} + +.sheet-top { + border-bottom: 2px double gold; + display: inline-block; + width:100%; + padding-bottom: 5px; + margin-bottom: 5px; +} + +.sheet-blocklabel { + float: left; + font-weight:bold; + background:transparent; + border:0px; + color:White; + height: 100%; + vertical-align: middle; +} + + +.sheet-rolltemplate-basic div.sheet-template-container { + background: black; + color: white; + border: 2px solid gold !important; + border-radius: 10px; +} + +.sheet-rolltemplate-basic .sheet-template-header { + color: green; + padding: 2px; + border-bottom: 1px solid gold; + line-height: 1.6em; + font-size: 1.2em; + font-weight: bold; + font-variant: small-caps; + text-align: center; +} + +.sheet-rolltemplate-basic div { + padding: 5px; + border-bottom: 1px solid gold; +} + +.sheet-rolltemplate-basic .inlinerollresult { + display: inline-block; + min-width: 1.5em; + text-align: center; + border: 1px solid gold; + border-radius: 5px; + background: #333333; +} + +.sheet-rolltemplate-basic .inlinerollresult.fullcrit { + border: 1px solid gold; + background: green; +} + +.sheet-rolltemplate-basic .inlinerollresult.fullfail { + border: 1px solid gold; + background: red; +} + +.sheet-rolltemplate-basic .inlinerollresult.importantroll { + border: 1px solid gold; + background: blue; +} + +.sheet-rolltemplate-stat div.sheet-template-container { + background: black; + color: white; + border: 2px solid gold !important; + border-radius: 10px; +} + +.sheet-rolltemplate-stat .sheet-template-header { + color: green; + padding: 2px; + border-bottom: 1px solid gold; + line-height: 1.6em; + font-size: 1.2em; + font-weight: bold; + font-variant: small-caps; + text-align: center; +} + +.sheet-rolltemplate-stat div { + padding: 5px; + border-bottom: 1px solid gold; +} + +.sheet-rolltemplate-stat .inlinerollresult { + display: inline-block; + min-width: 1.5em; + text-align: center; + border: 1px solid gold; + border-radius: 5px; + background: #333333; +} + +.sheet-rolltemplate-stat .inlinerollresult.fullfail { + border: 1px solid gold; + background: #333333; +} + +.sheet-rolltemplate-stat .inlinerollresult.fullcrit { + border: 1px solid gold; + background: #333333; +} + +.sheet-rolltemplate-stat .inlinerollresult.importantroll { + border: 1px solid gold; + background: #333333; +} + +.sheet-rollbutton { + background: gold; + color: black; + border: 0; + cursor: pointer; + border-radius: 10px; +} + +.sheet-derstat { + width: 35px; + background: transparent; + color: white; + border: 0; + text-align: center; +} diff --git a/Elemental/elemental.html b/Elemental/elemental.html new file mode 100644 index 0000000000..0fbad6e22d --- /dev/null +++ b/Elemental/elemental.html @@ -0,0 +1,763 @@ +
+