[AWAM] Improvement: hide radio button

Hide radio button on dice scores and replace with highlighting.

Signed-off-by: Choco Lanoar <e.lachaud@gmail.com>
This commit is contained in:
Choco Lanoar
2023-12-25 12:07:05 +01:00
parent 132900ef8b
commit c3e702c94c
2 changed files with 64 additions and 29 deletions
+36 -1
View File
@@ -213,7 +213,7 @@ select {
select.select-blessures {
width: 48px;
margin-right: 20px;
margin-right: 18px;
}
select.select-dice {
@@ -283,6 +283,41 @@ input[type="text"].field-desc {
width: 35%;
}
input[type="radio"].check-score {
margin: 0;
padding: 0;
display: inline-block;
opacity: 0;
width: 70px;
height: 28px;
z-index: 2;
}
input[type="radio"].check-score + span {
font-weight: bold;
font-family: 'Zen Dots', cursive;
font-size: 1.3em;
text-align: center;
display: inline-block;
width: 70px;
height: 28px;
margin: 0 -5px -2px -70px;
padding: 0;
z-index: 1;
}
.sheet-darkmode input[type="radio"].check-score + span {
color:white;
}
input[type="radio"].check-score:checked + span {
border: 2px solid darkmagenta;
border-radius: 10px;
}
.sheet-darkmode input[type="radio"].check-score:checked + span {
border: 2px solid pink;
}
/* --------------------- */
/* ------ ONGLETS ------ */
/* --------------------- */
+28 -28
View File
@@ -115,8 +115,8 @@
<input type="radio" name="attr_onglet" value="1" class="sheet-onglet2" /><span>Atouts PNJ</span>
<input type="radio" name="attr_onglet" value="2" class="sheet-onglet3" /><span>Onglet 3</span>
<input type="radio" name="attr_onglet" value="3" class="sheet-onglet4" /><span>Onglet 4</span>
<div class="sheet-onglet1">
<!-- ONGLET PRINCIPAL -->
<div class="sheet-onglet1">
<div class="sheet-myCol sheet-half">
<!-- SCORES -->
<div class="sheet-textTitle">Scores</div>
@@ -126,13 +126,13 @@
<span class="score-type">(Physique)</span>
</div>
<div class="sheet-myRow">
<input type="radio" id="d4" name="attr_phyDie" value="D4"><span class="score-de" for="d4">D4</span>
<input type="radio" id="d6" name="attr_phyDie" value="D6" checked><span class="score-de" for="d6">D6</span>
<input type="radio" id="d8" name="attr_phyDie" value="D8"><span class="score-de" for="d8">D8</span>
<input type="radio" id="d10" name="attr_phyDie" value="D10"><span class="score-de" for="d10">D10</span>
<input type="radio" id="d12" name="attr_phyDie" value="D12"><span class="score-de" for="d12">D12</span>
<input type="radio" id="d4" name="attr_phyDie" value="D4" class="check-score"><span for="d4">D4</span>
<input type="radio" id="d6" name="attr_phyDie" value="D6" class="check-score" checked><span for="d6">D6</span>
<input type="radio" id="d8" name="attr_phyDie" value="D8" class="check-score"><span for="d8">D8</span>
<input type="radio" id="d10" name="attr_phyDie" value="D10" class="check-score"><span for="d10">D10</span>
<input type="radio" id="d12" name="attr_phyDie" value="D12" class="check-score"><span for="d12">D12</span>
</div>
<div class="sheet-myRow">
<div class="sheet-myRow" style="padding-left: 10px;">
<select class="select-blessures" name="attr_phyBless1">
<option value=" " selected="selected"> </option>
<option value="pf">Pf</option>
@@ -171,13 +171,13 @@
<span class="score-type">(Intelligence)</span>
</div>
<div class="sheet-myRow">
<input type="radio" id="d4" name="attr_intDie" value="D4"><span class="score-de" for="d4">D4</span>
<input type="radio" id="d6" name="attr_intDie" value="D6" checked><span class="score-de" for="d6">D6</span>
<input type="radio" id="d8" name="attr_intDie" value="D8"><span class="score-de" for="d8">D8</span>
<input type="radio" id="d10" name="attr_intDie" value="D10"><span class="score-de" for="d10">D10</span>
<input type="radio" id="d12" name="attr_intDie" value="D12"><span class="score-de" for="d12">D12</span>
<input type="radio" id="d4" name="attr_intDie" value="D4" class="check-score"><span for="d4">D4</span>
<input type="radio" id="d6" name="attr_intDie" value="D6" class="check-score" checked><span for="d6">D6</span>
<input type="radio" id="d8" name="attr_intDie" value="D8" class="check-score"><span for="d8">D8</span>
<input type="radio" id="d10" name="attr_intDie" value="D10" class="check-score"><span for="d10">D10</span>
<input type="radio" id="d12" name="attr_intDie" value="D12" class="check-score"><span for="d12">D12</span>
</div>
<div class="sheet-myRow">
<div class="sheet-myRow" style="padding-left: 10px;">
<select class="select-blessures" name="attr_intBless1">
<option value=" " selected="selected"> </option>
<option value="pf">Pf</option>
@@ -216,13 +216,13 @@
<span class="score-type">(Perception)</span>
</div>
<div class="sheet-myRow">
<input type="radio" id="d4" name="attr_perDie" value="D4"><span class="score-de" for="d4">D4</span>
<input type="radio" id="d6" name="attr_perDie" value="D6" checked><span class="score-de" for="d6">D6</span>
<input type="radio" id="d8" name="attr_perDie" value="D8"><span class="score-de" for="d8">D8</span>
<input type="radio" id="d10" name="attr_perDie" value="D10"><span class="score-de" for="d10">D10</span>
<input type="radio" id="d12" name="attr_perDie" value="D12"><span class="score-de" for="d12">D12</span>
<input type="radio" id="d4" name="attr_perDie" value="D4" class="check-score"><span for="d4">D4</span>
<input type="radio" id="d6" name="attr_perDie" value="D6" class="check-score" checked><span for="d6">D6</span>
<input type="radio" id="d8" name="attr_perDie" value="D8" class="check-score"><span for="d8">D8</span>
<input type="radio" id="d10" name="attr_perDie" value="D10" class="check-score"><span for="d10">D10</span>
<input type="radio" id="d12" name="attr_perDie" value="D12" class="check-score"><span for="d12">D12</span>
</div>
<div class="sheet-myRow">
<div class="sheet-myRow" style="padding-left: 10px;">
<select class="select-blessures" name="attr_perBless1">
<option value=" " selected="selected"> </option>
<option value="pf">Pf</option>
@@ -261,13 +261,13 @@
<span class="score-type">(Social)</span>
</div>
<div class="sheet-myRow">
<input type="radio" id="d4" name="attr_socDie" value="D4"><span class="score-de" for="d4">D4</span>
<input type="radio" id="d6" name="attr_socDie" value="D6" checked><span class="score-de" for="d6">D6</span>
<input type="radio" id="d8" name="attr_socDie" value="D8"><span class="score-de" for="d8">D8</span>
<input type="radio" id="d10" name="attr_socDie" value="D10"><span class="score-de" for="d10">D10</span>
<input type="radio" id="d12" name="attr_socDie" value="D12"><span class="score-de" for="d12">D12</span>
<input type="radio" id="d4" name="attr_socDie" value="D4" class="check-score"><span for="d4">D4</span>
<input type="radio" id="d6" name="attr_socDie" value="D6" class="check-score" checked><span for="d6">D6</span>
<input type="radio" id="d8" name="attr_socDie" value="D8" class="check-score"><span for="d8">D8</span>
<input type="radio" id="d10" name="attr_socDie" value="D10" class="check-score"><span for="d10">D10</span>
<input type="radio" id="d12" name="attr_socDie" value="D12" class="check-score"><span for="d12">D12</span>
</div>
<div class="sheet-myRow">
<div class="sheet-myRow" style="padding-left: 10px;">
<select class="select-blessures" name="attr_socBless1">
<option value=" " selected="selected"> </option>
<option value="pf">Pf</option>
@@ -350,8 +350,8 @@
</div>
</div>
</div>
<div class="sheet-onglet2">
<!-- ONGLET ATOUTS PNJ -->
<div class="sheet-onglet2">
<div class="sheet-myCol sheet-full">
<div class="sheet-textTitle">Atouts PNJ</div>
<div class="sheet-myRow sheet-full">
@@ -516,12 +516,12 @@
</div>
</div>
</div>
<div class="sheet-onglet3">
<!-- ONGLET NOTES1 -->
<div class="sheet-onglet3">
<textarea name="attr_Notes1" class='sheet-textFullCol'>Notes</textarea>
</div>
<div class="sheet-onglet4">
<!-- ONGLET NOTES2 -->
<div class="sheet-onglet4">
<textarea name="attr_cercle4" class='sheet-textFullCol'>Notes</textarea>
</div>
</div>