diff --git a/Elemental/elemental.css b/Elemental/elemental.css index 587652d1f1..131e749ee4 100644 --- a/Elemental/elemental.css +++ b/Elemental/elemental.css @@ -1,350 +1,337 @@ .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; + position:relative; + width: 800px; + background-color: #555555; + color: white; + position: relative; + display: inline-block; + border: 4px double white; + border-radius:15px; + padding: 10px; } .sheet-header { - padding-bottom: 10px; - border-bottom: 4px double gold; + padding-bottom: 10px; + border-bottom: 4px double white; } .sheet-tabs { - margin-top: 10px; - position: relative; +margin-top: 10px; +position: relative; +width: 800px; } +.sheet-tabs::after { + clear: both; + content: ''; + display: block; } +.sheet-tabs .sheet-tab { 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: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; + .sheet-tabs .sheet-tab > input[type="radio"]:hover ~ .sheet-tab-label { + background: #111111; 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; + border-bottom-color: white; } - .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 > .sheet-tab-label { + align-items: center; + background: #555555; + border-radius: 6px 6px 0 0; + border: 2px solid white; + 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: white; + border-top-color: white; + border-right-color: white; + border-bottom-color: white; + } + + .sheet-tabs .sheet-tab > input[type="radio"]:checked ~ .sheet-tab-label { + background: black; + border-color: white; + border-bottom-color: black; + color: white; + } + + .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-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-content { + padding: 5px; + border: 2px solid white; + 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; + float: left; + width: 50px; + color: white; + font-weight:bold; + font-size: 12px; + height: 12px; } .sheet-input { - float: left; - width: calc(100% - 75px); + float: left; + color: black; + width: calc(100% - 75px); } .sheet-heading { - font-size: 1.5em; - font-weight:bold; - border:0px; - border-radius:0px; - font-variant: small-caps; + font-size: 1.5em; + font-weight:bold; + border:0px; + border-radius:0px; + font-variant: small-caps; } .sheet-smallblock { - margin: 5px; - float: left; + 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; + background: #444444; + border-radius:15px; + border: 1px solid white; + padding: 5px; + color: black; + min-height: 50px; + text-align: center; } .sheet-block input { - font-size: 12px; - line-height:15px; - height: 15px; - margin-bottom:5px; + font-size: 12px; + line-height:15px; + height: 15px; + color:black; + margin-bottom:5px; } .sheet-block select { - font-size: 12px; - line-height:15px; - height: 15px; - margin-bottom:5px; - padding: 0; + font-size: 12px; + line-height:15px; + height: 15px; + color: black; + margin-bottom:5px; + padding: 0; } .sheet-block option:disabled { - font-weight: bold; + 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; + +.sheet-block input[type="checkbox"]:checked { + background-color: #EC2127; } -/* 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%; +.sheet-block input[type="checkbox"] { + margin: 5px -1px; + border-radius: 100%; + border: 2px solid #000 !important; + width: 2em; + height: 2em; + background-color: white; + vertical-align: middle; + -webkit-appearance: none; + outline: none; + cursor: pointer; } -/* 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; + width: 250px; } table.sheet-xp th{ - text-align: center; - font-weight:bold; - border:1px solid gold; - border-radius:15px; + text-align: center; + font-weight:bold; + border:1px solid white; + border-radius:15px; } table.sheet-xp td{ - text-align: center; - border:1px solid gold; - border-radius:15px; - padding:5px; - color: white; + text-align: center; + border:1px solid white; + border-radius:15px; + padding:5px; + color: white; } .sheet-attrname { - font-weight:bold; - font-size: 16px; - width:145px; - background:transparent; - border:0px; - color:White; + font-weight:bold; + font-size: 16px; + width:145px; + background:transparent; + border:0px; + color:White; } .sheet-skillblock { - margin-left:20px; + margin-left:20px; } .sheet-top { - border-bottom: 2px double gold; - display: inline-block; - width:100%; - padding-bottom: 5px; - margin-bottom: 5px; + border-bottom: 2px double white; + display: inline-block; + width:100%; + color:white; + padding-bottom: 5px; + margin-bottom: 5px; } .sheet-blocklabel { - float: left; - font-weight:bold; - background:transparent; - border:0px; - color:White; - height: 100%; - vertical-align: middle; + 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; + background: #96ACB0; + color: white; +border: 2px solid black !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; +color: white; +padding: 2px; +border-bottom: 1px solid black; +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; +padding: 5px; +border-bottom: 1px solid black; } .sheet-rolltemplate-basic .inlinerollresult { - display: inline-block; - min-width: 1.5em; - text-align: center; - border: 1px solid gold; - border-radius: 5px; - background: #333333; +display: inline-block; +min-width: 1.5em; +text-align: center; +border: 1px solid white; +border-radius: 5px; +background: #444444; } .sheet-rolltemplate-basic .inlinerollresult.fullcrit { - border: 1px solid gold; - background: green; +border: 1px solid white; +background: green; } .sheet-rolltemplate-basic .inlinerollresult.fullfail { - border: 1px solid gold; - background: red; +border: 1px solid white; +background: red; } .sheet-rolltemplate-basic .inlinerollresult.importantroll { - border: 1px solid gold; - background: blue; +border: 1px solid white; +background: blue; } .sheet-rolltemplate-stat div.sheet-template-container { - background: black; - color: white; - border: 2px solid gold !important; - border-radius: 10px; + background: #96ACB0; + color: white; +border: 2px solid black !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; +color: white; +padding: 2px; +border-bottom: 1px solid black; +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; +padding: 5px; +border-bottom: 1px solid black; } .sheet-rolltemplate-stat .inlinerollresult { - display: inline-block; - min-width: 1.5em; - text-align: center; - border: 1px solid gold; - border-radius: 5px; - background: #333333; +display: inline-block; +min-width: 1.5em; +text-align: center; +border: 1px solid black; +border-radius: 5px; +background: #444444; } .sheet-rolltemplate-stat .inlinerollresult.fullfail { - border: 1px solid gold; - background: #333333; +border: 1px solid white; +background: red; } .sheet-rolltemplate-stat .inlinerollresult.fullcrit { - border: 1px solid gold; - background: #333333; +border: 1px solid white; +background: green; } .sheet-rolltemplate-stat .inlinerollresult.importantroll { - border: 1px solid gold; - background: #333333; +border: 1px solid white; +background: blue; } .sheet-rollbutton { - background: gold; - color: black; - border: 0; - cursor: pointer; - border-radius: 10px; +background: #55555; +color: black; +border: 0; +cursor: pointer; +border-radius: 10px; } .sheet-derstat { - width: 35px; - background: transparent; - color: white; - border: 0; - text-align: center; -} + width: 35px; + background: transparent; + color: white; + border: 0; + text-align: center; +} \ No newline at end of file diff --git a/Elemental/elemental.html b/Elemental/elemental.html index 0fbad6e22d..3e9d0b7bb3 100644 --- a/Elemental/elemental.html +++ b/Elemental/elemental.html @@ -1,740 +1,739 @@
-