Nighthawk/roll20-character-sheets
1
0
Fork 0
mirror of https://github.com/Nighthawk42/roll20-character-sheets.git synced 2026-08-30 03:40:32 +00:00
Code Issues Packages Projects Releases Wiki Activity

Styled checkboxes

Browse Source 
used custom checkboxes with AiS coloring
This commit is contained in:
Twylleth
2021-02-05 21:28:07 +01:00
parent 43a3bd2348
commit 865885a043
2 changed files with 98 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Aces-In-Space/aces_in_space.css
+86 -29
View File
@@ -1,6 +1,11 @@
@import url("https://fonts.googleapis.com/css?family=Saira+Stencil+One&display=swap|family=Orbitron");
/* === GENERAL === */
.sheet-hidden {
display: none !important;
}
.charsheet {
min-width: 800px;
}
@@ -57,6 +62,7 @@ background-image: none !important;
border: none !important;
box-shadow: none !important;
}
.repitem button {
height: 28px;
line-height: 20px;
@@ -83,6 +89,64 @@ textarea {
transition: all 0.2s, height 0.4s;
}
input[type="checkbox"],
input[type="radio"] {
opacity: 0;
z-index: 1;
-moz-appearance: none;
vertical-align: unset;
position: relative;
}
input[type="checkbox"] + span,
input[type="radio"] + span {
cursor: pointer;
display: inline-block;
transition: all 0.2s, opacity 0s;
}
label input[type="checkbox"],
label input[type="radio"] {
position: absolute;
}
label:hover input[type="checkbox"] + span,
label:hover input[type="radio"] + span {
opacity: 0.7;
}
input[type="checkbox"].sheet-squarebox {
flex: 0 0 auto;
width: 12px;
height: 12px;
margin-right: -12px;
}
input[type="checkbox"].sheet-squarebox + span {
flex: 0 0 auto;
width: 12px;
height: 12px;
border: 1px solid black;
}
input[type="checkbox"].sheet-squarebox:hover + span {
opacity: 0.7;
}
input[type="checkbox"].sheet-squarebox:last-child + span {
margin-right: 0 !important;
}
input[type="checkbox"].sheet-squarebox + span {
background: white;
}
input[type="checkbox"].sheet-squarebox:checked + span {
background: #4e7d7f;
}
/* === BASIC === */
.sheet-logo {
width: 190px;
@@ -163,7 +227,7 @@ width: calc(50% - 200px);
.sheet-character-body {
display: grid;
grid-template: auto/50% 50%
grid-template: auto/50% 50%;
}
/* === SKILLS === */
@@ -193,7 +257,7 @@ border: 1px solid gray;
grid-column: span 2;
}
.sheet-section-aspects label {
.sheet-section-aspects .sheet-content label {
text-transform: uppercase;
font-size: 14px;
font-family: "Saira Stencil One";
@@ -202,7 +266,7 @@ grid-column: span 2;
color: #4e7d7f;
}
.sheet-section-aspects input {
.sheet-section-aspects .sheet-content input {
font-size: 16px;
width: 100%;
margin: 3px;
@@ -217,17 +281,27 @@ grid-column: span 2;
.sheet-section-stress td {
text-align: left;
padding-right: 5px;
font-size: 12px;
font-size: 14px;
}
.sheet-section-stress input {
margin-left: 2px;
.sheet-section-stress input[type="checkbox"] {
margin-left: 5px;
}
.sheet-check-on {
border: 1px solid black;
.sheet-stress-descr {
width: 4.5em;
}
.sheet-check-off {
background-color: #E3E3E3;
border: 1px solid gray;
.sheet-fullwidth {
width: 99%;
margin-top: 3px;
}
.sheet-nbsb td {
text-align: right;
text-style: italic;
font-size: 10px;
vertical-align: middle;
}
/* === CONSEQUENCES === */
@@ -283,24 +357,7 @@ width: 116px;
.sheet-description-long {
width: 50%;
}
.sheet-stress-descr {
width: 4.5em;
}
.sheet-nbsb td {
text-align: right;
font-size: 10px;
vertical-align: middle;
}
.sheet-nbsb input {
text-align: left;
width: 3em;
}
.sheet-nbsb input[type=number] {
width: 3em;
}
.sheet-fullwidth {
width: 99%;
}
/* === Roll type displaying === */
button.sheet-roll_type_1,
Aces-In-Space/aces_in_space.html
+12 -12
View File
@@ -342,12 +342,12 @@
<table class="sheet-fullwidth">
<tr>
<td class="sheet-stress-descr"><span data-i18n="stress-u">Stress</span></td>
<td>1<input class="sheet-check-on" type="checkbox" name="attr_Phy1" /></td>
<td>2<input class="sheet-check-on" type="checkbox" name="attr_Phy2" /></td>
<td>1<input class="squarebox" type="checkbox" name="attr_Phy1" /><span></span></td>
<td>2<input class="squarebox" type="checkbox" name="attr_Phy2" /><span></span></td>
<td class="sheet-nbsb" data-i18n-title="nerves-3-u">(Nerves +3)</td>
<td>3<input class="sheet-check-off" type="checkbox" name="attr_Phy3" /></td>
<td>3<input class="squarebox" type="checkbox" name="attr_Phy3" /><span></span></td>
<td class="sheet-nbsb" data-i18n-title="nerves-4-u">(Nerves +4)</span></td>
<td>4<input class="sheet-check-off" type="checkbox" name="attr_Phy4" /></td>
<td>4<input class="squarebox" type="checkbox" name="attr_Phy4" /><span></span></td>
</tr>
</table>
</div>
@@ -424,17 +424,17 @@
<div class="content">
<div class="experience">
<label data-i18n="experience-u">Experience</label>
<input type="checkbox" name="attr_xp1" value="1"/><span></span>
<input type="checkbox" name="attr_xp2" value="1"/><span></span>
<input type="checkbox" name="attr_xp3" value="1"/><span></span>
<input type="checkbox" name="attr_xp4" value="1"/><span></span>
<input type="checkbox" name="attr_xp5" value="1"/><span></span>
<input class="squarebox" type="checkbox" name="attr_xp1" value="1"/><span></span>
<input class="squarebox" type="checkbox" name="attr_xp2" value="1"/><span></span>
<input class="squarebox" type="checkbox" name="attr_xp3" value="1"/><span></span>
<input class="squarebox" type="checkbox" name="attr_xp4" value="1"/><span></span>
<input class="squarebox"type="checkbox" name="attr_xp5" value="1"/><span></span>
</div>
<div class="advances">
<label data-i18n="advances-u">Advances</label>
<input type="checkbox" name="attr_advance1" value="1"/><span></span>
<input type="checkbox" name="attr_advance2" value="1"/><span></span>
<input type="checkbox" name="attr_advance3" value="1"/><span></span>
<input class="squarebox" type="checkbox" name="attr_advance1" value="1"/><span></span>
<input class="squarebox" type="checkbox" name="attr_advance2" value="1"/><span></span>
<input class="squarebox" type="checkbox" name="attr_advance3" value="1"/><span></span>
</div>
<div class="triggers">
<label data-i18n="trigger-u">Trigger</label>