Skills, clean up top inputs a bit
This commit is contained in:
Salvador Melo
+152
-1
@@ -7,6 +7,7 @@
|
||||
font: inherit
|
||||
}
|
||||
|
||||
/* radios and checks from blades, replace with nwod official below
|
||||
.charsheet label input[type=checkbox],
|
||||
.charsheet label input[type=radio] {
|
||||
position: absolute
|
||||
@@ -19,12 +20,14 @@
|
||||
-moz-appearance: none;
|
||||
position: relative
|
||||
}
|
||||
*/
|
||||
|
||||
.charsheet input[type=checkbox]+span,
|
||||
.charsheet input[type=radio]+span {
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
transition: all .2s, opacity 0s
|
||||
transition: all .2s, opacity 0s;
|
||||
width: 0;
|
||||
}
|
||||
|
||||
.sheet-hider[value="0"]+li,
|
||||
@@ -80,4 +83,152 @@
|
||||
|
||||
.sheet-flex-container > input[type=text] {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.sheet-input-label {
|
||||
line-height: 2;
|
||||
margin-right: .4em;
|
||||
}
|
||||
|
||||
.sheet-header{
|
||||
font-size: x-large;
|
||||
}
|
||||
|
||||
.sheet-line{
|
||||
border-bottom: 1px solid black;
|
||||
flex-grow: 1;
|
||||
height: 1em;
|
||||
}
|
||||
|
||||
/* radios/boxes from nwod official */
|
||||
|
||||
/* Hide actual dot/checkbox */
|
||||
input[type="radio"].sheet-normal,
|
||||
input.sheet-weapon,
|
||||
input[type="checkbox"].sheet-normal,
|
||||
.sheet-settings-checkbox input
|
||||
{
|
||||
position: relative;
|
||||
opacity: 0.0;
|
||||
width: 15px;
|
||||
cursor: pointer;
|
||||
z-index: 10;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
/* Styles common to fake dot and checkbox */
|
||||
input[type="radio"].sheet-normal + span::before,
|
||||
input[type="checkbox"].sheet-normal + span::before,
|
||||
.sheet-permadot::before
|
||||
{
|
||||
border: solid 1px #000000;
|
||||
line-height: 11px;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
|
||||
-moz-box-shadow: 0 0 0px #000;
|
||||
-webkit-box-shadow: 0 0 0px #000;
|
||||
box-shadow: 0 0 0px #000;
|
||||
|
||||
background: #000000;
|
||||
background: -moz-radial-gradient(#f6f6f6, #dfdfdf);
|
||||
background: -webkit-radial-gradient(#f6f6f6, #dfdfdf);
|
||||
background: -ms-radial-gradient(#f6f6f6, #dfdfdf);
|
||||
background: -o-radial-gradient(#f6f6f6, #dfdfdf);
|
||||
background: radial-gradient(#f6f6f6, #dfdfdf);
|
||||
|
||||
position: relative;
|
||||
left: -13px;
|
||||
}
|
||||
|
||||
/* Styles unique to fake dot (checked or left of checked) */
|
||||
input[type="radio"].sheet-normal + span::before,
|
||||
.sheet-permadot::before
|
||||
{
|
||||
content: "•";
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
font-size: 41.9px;
|
||||
font-family: "Arial";
|
||||
text-indent: -2px;
|
||||
font-weight: normal;
|
||||
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-border-radius: 50%;
|
||||
-webkit-border-radius: 50%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
/* Styles unique to fake checkbox (unchecked) */
|
||||
input[type="checkbox"].sheet-normal + span::before
|
||||
{
|
||||
position:relative;
|
||||
content: "";
|
||||
opacity: 1.0;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
font-size: 12px;
|
||||
|
||||
-moz-border-radius: 1px;
|
||||
-webkit-border-radius: 1px;
|
||||
border-radius: 1px;
|
||||
}
|
||||
|
||||
/* Styles unique to fake checkbox (checked) */
|
||||
input[type="checkbox"].sheet-normal:checked + span::before
|
||||
{
|
||||
background:
|
||||
linear-gradient(to top left,
|
||||
rgba(0,0,0,0) 0%,
|
||||
rgba(0,0,0,0) calc(50% - 0.8px),
|
||||
rgba(0,0,0,1) 50%,
|
||||
rgba(0,0,0,0) calc(50% + 0.8px),
|
||||
rgba(0,0,0,0) 100%),
|
||||
linear-gradient(to top right,
|
||||
rgba(0,0,0,0) 0%,
|
||||
rgba(0,0,0,0) calc(50% - 0.8px),
|
||||
rgba(0,0,0,1) 50%,
|
||||
rgba(0,0,0,0) calc(50% + 0.8px),
|
||||
rgba(0,0,0,0) 100%);
|
||||
|
||||
-moz-box-shadow: 0 0 2px transparent;
|
||||
-webkit-box-shadow: 0 0 2px transparent;
|
||||
box-shadow: 0 0 2px transparent;
|
||||
}
|
||||
|
||||
/* Remove dot from all radios _after_ selected one */
|
||||
input[type="radio"].sheet-normal:checked ~ input[type="radio"] + span::before
|
||||
{
|
||||
content: "";
|
||||
}
|
||||
|
||||
input.sheet-used+span::before
|
||||
{
|
||||
content: "✖";
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
font-size: 12px;
|
||||
|
||||
-moz-border-radius: 0%;
|
||||
-webkit-border-radius: 0%;
|
||||
border-radius: 0%;
|
||||
}
|
||||
|
||||
input.sheet-zero:checked + span::before
|
||||
{
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
input.sheet-zero:hover + span::before
|
||||
{
|
||||
opacity: 0.25;
|
||||
font-size: 12px;
|
||||
content: "✖";
|
||||
text-indent: 0.5px;
|
||||
}
|
||||
|
||||
input.sheet-zero + span::before
|
||||
{
|
||||
opacity: 0;
|
||||
}
|
||||
+224
-5
@@ -1,14 +1,233 @@
|
||||
<div><span style="font-size: larger">Scion</span><label class="settings-checkbox" style="float: right;"><input
|
||||
<div><span style="font-size: xx-large">Scion</span><label class="settings-checkbox" style="float: right;"><input
|
||||
type="checkbox" name="attr_show_settings" value="1" /><span>y</span></label></div>
|
||||
<input class="sheet-hider" type="hidden" name="attr_show_settings" value="0">
|
||||
<div class="sheet-settings">Test</div>
|
||||
<div class="2colrow">
|
||||
<div class="col">
|
||||
<div class="flex-container">Name: <input type="text" name="attr_character_name"/></div>
|
||||
<div class="flex-container">Player: <input type="text" name="attr_player"/></div>
|
||||
<div class="flex-container"><label class="input-label">Name:</label> <input type="text" name="attr_character_name"/></div>
|
||||
<div class="flex-container"><label class="input-label">Player:</label> <input type="text" name="attr_player"/></div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="flex-container">Chronicle: <input type="text" name="attr_chronicle"/></div>
|
||||
<div class="flex-container">Patron: <input type="text" name="attr_patron"/></div>
|
||||
<div class="flex-container"><label class="input-label">Chronicle:</label> <input type="text" name="attr_chronicle"/></div>
|
||||
<div class="flex-container"><label class="input-label">Patron:</label> <input type="text" name="attr_patron"/></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col header">
|
||||
Skills
|
||||
</div>
|
||||
</div>
|
||||
<div class="2colrow">
|
||||
<div class="col">
|
||||
<div class="flex-container">
|
||||
<label>
|
||||
<input class="normal" type="checkbox" name="attr_academics_path"/><span></span>
|
||||
Academics
|
||||
</label>
|
||||
<span class="line"></span>
|
||||
<input class="normal zero" type="radio" name="attr_academics" value="0" checked/><span></span>
|
||||
<input class="normal" type="radio" name="attr_academics" value="1" /><span></span>
|
||||
<input class="normal" type="radio" name="attr_academics" value="2" /><span></span>
|
||||
<input class="normal" type="radio" name="attr_academics" value="3" /><span></span>
|
||||
<input class="normal" type="radio" name="attr_academics" value="4" /><span></span>
|
||||
<input class="normal" type="radio" name="attr_academics" value="5" /><span></span>
|
||||
</div>
|
||||
<div class="flex-container">
|
||||
<label>
|
||||
<input class="normal" type="checkbox" name="attr_athletics_path"/><span></span>
|
||||
Athletics
|
||||
</label>
|
||||
<span class="line"></span>
|
||||
<input class="normal zero" type="radio" name="attr_athletics" value="0" checked/><span></span>
|
||||
<input class="normal" type="radio" name="attr_athletics" value="1" /><span></span>
|
||||
<input class="normal" type="radio" name="attr_athletics" value="2" /><span></span>
|
||||
<input class="normal" type="radio" name="attr_athletics" value="3" /><span></span>
|
||||
<input class="normal" type="radio" name="attr_athletics" value="4" /><span></span>
|
||||
<input class="normal" type="radio" name="attr_athletics" value="5" /><span></span>
|
||||
</div>
|
||||
<div class="flex-container">
|
||||
<label>
|
||||
<input class="normal" type="checkbox" name="attr_closecombat_path"/><span></span>
|
||||
Close Combat
|
||||
</label>
|
||||
<span class="line"></span>
|
||||
<input class="normal zero" type="radio" name="attr_closecombat" value="0" checked/><span></span>
|
||||
<input class="normal" type="radio" name="attr_closecombat" value="1" /><span></span>
|
||||
<input class="normal" type="radio" name="attr_closecombat" value="2" /><span></span>
|
||||
<input class="normal" type="radio" name="attr_closecombat" value="3" /><span></span>
|
||||
<input class="normal" type="radio" name="attr_closecombat" value="4" /><span></span>
|
||||
<input class="normal" type="radio" name="attr_closecombat" value="5" /><span></span>
|
||||
</div>
|
||||
<div class="flex-container">
|
||||
<label>
|
||||
<input class="normal" type="checkbox" name="attr_culture_path"/><span></span>
|
||||
Culture
|
||||
</label>
|
||||
<span class="line"></span>
|
||||
<input class="normal zero" type="radio" name="attr_culture" value="0" checked/><span></span>
|
||||
<input class="normal" type="radio" name="attr_culture" value="1" /><span></span>
|
||||
<input class="normal" type="radio" name="attr_culture" value="2" /><span></span>
|
||||
<input class="normal" type="radio" name="attr_culture" value="3" /><span></span>
|
||||
<input class="normal" type="radio" name="attr_culture" value="4" /><span></span>
|
||||
<input class="normal" type="radio" name="attr_culture" value="5" /><span></span>
|
||||
</div>
|
||||
<div class="flex-container">
|
||||
<label>
|
||||
<input class="normal" type="checkbox" name="attr_empathy_path"/><span></span>
|
||||
Empathy
|
||||
</label>
|
||||
<span class="line"></span>
|
||||
<input class="normal zero" type="radio" name="attr_empathy" value="0" checked/><span></span>
|
||||
<input class="normal" type="radio" name="attr_empathy" value="1" /><span></span>
|
||||
<input class="normal" type="radio" name="attr_empathy" value="2" /><span></span>
|
||||
<input class="normal" type="radio" name="attr_empathy" value="3" /><span></span>
|
||||
<input class="normal" type="radio" name="attr_empathy" value="4" /><span></span>
|
||||
<input class="normal" type="radio" name="attr_empathy" value="5" /><span></span>
|
||||
</div>
|
||||
<div class="flex-container">
|
||||
<label>
|
||||
<input class="normal" type="checkbox" name="attr_firearms_path"/><span></span>
|
||||
Firearms
|
||||
</label>
|
||||
<span class="line"></span>
|
||||
<input class="normal zero" type="radio" name="attr_firearms" value="0" checked/><span></span>
|
||||
<input class="normal" type="radio" name="attr_firearms" value="1" /><span></span>
|
||||
<input class="normal" type="radio" name="attr_firearms" value="2" /><span></span>
|
||||
<input class="normal" type="radio" name="attr_firearms" value="3" /><span></span>
|
||||
<input class="normal" type="radio" name="attr_firearms" value="4" /><span></span>
|
||||
<input class="normal" type="radio" name="attr_firearms" value="5" /><span></span>
|
||||
</div>
|
||||
<div class="flex-container">
|
||||
<label>
|
||||
<input class="normal" type="checkbox" name="attr_integrity_path"/><span></span>
|
||||
Integrity
|
||||
</label>
|
||||
<span class="line"></span>
|
||||
<input class="normal zero" type="radio" name="attr_integrity" value="0" checked/><span></span>
|
||||
<input class="normal" type="radio" name="attr_integrity" value="1" /><span></span>
|
||||
<input class="normal" type="radio" name="attr_integrity" value="2" /><span></span>
|
||||
<input class="normal" type="radio" name="attr_integrity" value="3" /><span></span>
|
||||
<input class="normal" type="radio" name="attr_integrity" value="4" /><span></span>
|
||||
<input class="normal" type="radio" name="attr_integrity" value="5" /><span></span>
|
||||
</div>
|
||||
<div class="flex-container">
|
||||
<label>
|
||||
<input class="normal" type="checkbox" name="attr_leadership_path"/><span></span>
|
||||
Leadership
|
||||
</label>
|
||||
<span class="line"></span>
|
||||
<input class="normal zero" type="radio" name="attr_leadership" value="0" checked/><span></span>
|
||||
<input class="normal" type="radio" name="attr_leadership" value="1" /><span></span>
|
||||
<input class="normal" type="radio" name="attr_leadership" value="2" /><span></span>
|
||||
<input class="normal" type="radio" name="attr_leadership" value="3" /><span></span>
|
||||
<input class="normal" type="radio" name="attr_leadership" value="4" /><span></span>
|
||||
<input class="normal" type="radio" name="attr_leadership" value="5" /><span></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="flex-container">
|
||||
<label>
|
||||
<input class="normal" type="checkbox" name="attr_medicine_path"/><span></span>
|
||||
Medicine
|
||||
</label>
|
||||
<span class="line"></span>
|
||||
<input class="normal zero" type="radio" name="attr_medicine" value="0" checked/><span></span>
|
||||
<input class="normal" type="radio" name="attr_medicine" value="1" /><span></span>
|
||||
<input class="normal" type="radio" name="attr_medicine" value="2" /><span></span>
|
||||
<input class="normal" type="radio" name="attr_medicine" value="3" /><span></span>
|
||||
<input class="normal" type="radio" name="attr_medicine" value="4" /><span></span>
|
||||
<input class="normal" type="radio" name="attr_medicine" value="5" /><span></span>
|
||||
</div>
|
||||
<div class="flex-container">
|
||||
<label>
|
||||
<input class="normal" type="checkbox" name="attr_occult_path"/><span></span>
|
||||
Occult
|
||||
</label>
|
||||
<span class="line"></span>
|
||||
<input class="normal zero" type="radio" name="attr_occult" value="0" checked/><span></span>
|
||||
<input class="normal" type="radio" name="attr_occult" value="1" /><span></span>
|
||||
<input class="normal" type="radio" name="attr_occult" value="2" /><span></span>
|
||||
<input class="normal" type="radio" name="attr_occult" value="3" /><span></span>
|
||||
<input class="normal" type="radio" name="attr_occult" value="4" /><span></span>
|
||||
<input class="normal" type="radio" name="attr_occult" value="5" /><span></span>
|
||||
</div>
|
||||
<div class="flex-container">
|
||||
<label>
|
||||
<input class="normal" type="checkbox" name="attr_persuasion_path"/><span></span>
|
||||
Persuasion
|
||||
</label>
|
||||
<span class="line"></span>
|
||||
<input class="normal zero" type="radio" name="attr_persuasion" value="0" checked/><span></span>
|
||||
<input class="normal" type="radio" name="attr_persuasion" value="1" /><span></span>
|
||||
<input class="normal" type="radio" name="attr_persuasion" value="2" /><span></span>
|
||||
<input class="normal" type="radio" name="attr_persuasion" value="3" /><span></span>
|
||||
<input class="normal" type="radio" name="attr_persuasion" value="4" /><span></span>
|
||||
<input class="normal" type="radio" name="attr_persuasion" value="5" /><span></span>
|
||||
</div>
|
||||
<div class="flex-container">
|
||||
<label>
|
||||
<input class="normal" type="checkbox" name="attr_pilot_path"/><span></span>
|
||||
Pilot
|
||||
</label>
|
||||
<span class="line"></span>
|
||||
<input class="normal zero" type="radio" name="attr_pilot" value="0" checked/><span></span>
|
||||
<input class="normal" type="radio" name="attr_pilot" value="1" /><span></span>
|
||||
<input class="normal" type="radio" name="attr_pilot" value="2" /><span></span>
|
||||
<input class="normal" type="radio" name="attr_pilot" value="3" /><span></span>
|
||||
<input class="normal" type="radio" name="attr_pilot" value="4" /><span></span>
|
||||
<input class="normal" type="radio" name="attr_pilot" value="5" /><span></span>
|
||||
</div>
|
||||
<div class="flex-container">
|
||||
<label>
|
||||
<input class="normal" type="checkbox" name="attr_science_path"/><span></span>
|
||||
Science
|
||||
</label>
|
||||
<span class="line"></span>
|
||||
<input class="normal zero" type="radio" name="attr_science" value="0" checked/><span></span>
|
||||
<input class="normal" type="radio" name="attr_science" value="1" /><span></span>
|
||||
<input class="normal" type="radio" name="attr_science" value="2" /><span></span>
|
||||
<input class="normal" type="radio" name="attr_science" value="3" /><span></span>
|
||||
<input class="normal" type="radio" name="attr_science" value="4" /><span></span>
|
||||
<input class="normal" type="radio" name="attr_science" value="5" /><span></span>
|
||||
</div>
|
||||
<div class="flex-container">
|
||||
<label>
|
||||
<input class="normal" type="checkbox" name="attr_subterfuge_path"/><span></span>
|
||||
Subterfuge
|
||||
</label>
|
||||
<span class="line"></span>
|
||||
<input class="normal zero" type="radio" name="attr_subterfuge" value="0" checked/><span></span>
|
||||
<input class="normal" type="radio" name="attr_subterfuge" value="1" /><span></span>
|
||||
<input class="normal" type="radio" name="attr_subterfuge" value="2" /><span></span>
|
||||
<input class="normal" type="radio" name="attr_subterfuge" value="3" /><span></span>
|
||||
<input class="normal" type="radio" name="attr_subterfuge" value="4" /><span></span>
|
||||
<input class="normal" type="radio" name="attr_subterfuge" value="5" /><span></span>
|
||||
</div>
|
||||
<div class="flex-container">
|
||||
<label>
|
||||
<input class="normal" type="checkbox" name="attr_survival_path"/><span></span>
|
||||
Survival
|
||||
</label>
|
||||
<span class="line"></span>
|
||||
<input class="normal zero" type="radio" name="attr_survival" value="0" checked/><span></span>
|
||||
<input class="normal" type="radio" name="attr_survival" value="1" /><span></span>
|
||||
<input class="normal" type="radio" name="attr_survival" value="2" /><span></span>
|
||||
<input class="normal" type="radio" name="attr_survival" value="3" /><span></span>
|
||||
<input class="normal" type="radio" name="attr_survival" value="4" /><span></span>
|
||||
<input class="normal" type="radio" name="attr_survival" value="5" /><span></span>
|
||||
</div>
|
||||
<div class="flex-container">
|
||||
<label>
|
||||
<input class="normal" type="checkbox" name="attr_technology_path"/><span></span>
|
||||
Technology
|
||||
</label>
|
||||
<span class="line"></span>
|
||||
<input class="normal zero" type="radio" name="attr_technology" value="0" checked/><span></span>
|
||||
<input class="normal" type="radio" name="attr_technology" value="1" /><span></span>
|
||||
<input class="normal" type="radio" name="attr_technology" value="2" /><span></span>
|
||||
<input class="normal" type="radio" name="attr_technology" value="3" /><span></span>
|
||||
<input class="normal" type="radio" name="attr_technology" value="4" /><span></span>
|
||||
<input class="normal" type="radio" name="attr_technology" value="5" /><span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Reference in New Issue
Block a user