Roll20 uses cookies to improve your experience on our site. Cookies enable you to enjoy certain features, social sharing functionality, and tailor message and display ads to your interests on our site and others. They also help us understand how our site is being used. By continuing to use our site, you consent to our use of cookies. Update your cookie preferences .
×
Create a free account

CSS reference for Clocks in divisions of 4, 6, 8, 10, and 12

1669078005

Edited 1669078529
Seraaron
Pro
Sheet Author
I was looking on the CSS Wizardry page today to see how clocks work, and realized that the way they're presented on there pretty much doesn't cover how more modern games like Blades in the Dark use clocks. So, since I couldn't find a reference for even clock divisions, I decided to make them myself and I figured I'd share here for anyone else. Basically there's 24 possible combinations, but you'd delete the code segments of the type of clock you don't want. So if you want a clock with 10 divisions, for example, you'd just delete everything except the segments for 0, 1/10, 2/10, 3/10, 4/10, 1/2, 6/10, 7/10, 8/10, 9/10, and 1. I hope that makes sense? Just figured I'd share since the arthimetic to get the right segment angles isn't immediately inuitive, but I left a few comments in the code that should also help. Here's a JSfiddle so you can see it in action. The plus sign is just so you can see where the middle of the clock is. HTML <div class="sheet-clock-section" style="width:90%;"> <input type="radio" value="0" name="attr_clock" class="sheet-clock-cb sheet-clock-0" checked>0.0 <input type="radio" value="1" name="attr_clock" class="sheet-clock-cb sheet-clock-30">1/12 <input type="radio" value="2" name="attr_clock" class="sheet-clock-cb sheet-clock-36">1/10 <input type="radio" value="3" name="attr_clock" class="sheet-clock-cb sheet-clock-45">1/8 <input type="radio" value="4" name="attr_clock" class="sheet-clock-cb sheet-clock-60">1/6 <input type="radio" value="5" name="attr_clock" class="sheet-clock-cb sheet-clock-72">2/10 <input type="radio" value="6" name="attr_clock" class="sheet-clock-cb sheet-clock-90">1/4 <input type="radio" value="7" name="attr_clock" class="sheet-clock-cb sheet-clock-108">3/10 <input type="radio" value="8" name="attr_clock" class="sheet-clock-cb sheet-clock-120">2/6 <input type="radio" value="9" name="attr_clock" class="sheet-clock-cb sheet-clock-135">3/8 <input type="radio" value="10" name="attr_clock" class="sheet-clock-cb sheet-clock-144">4/10 <input type="radio" value="11" name="attr_clock" class="sheet-clock-cb sheet-clock-150">5/12 <input type="radio" value="12" name="attr_clock" class="sheet-clock-cb sheet-clock-180">1/2 <input type="radio" value="13" name="attr_clock" class="sheet-clock-cb sheet-clock-210">7/12 <input type="radio" value="14" name="attr_clock" class="sheet-clock-cb sheet-clock-216">6/10 <input type="radio" value="15" name="attr_clock" class="sheet-clock-cb sheet-clock-225">5/8 <input type="radio" value="16" name="attr_clock" class="sheet-clock-cb sheet-clock-240">4/6 <input type="radio" value="17" name="attr_clock" class="sheet-clock-cb sheet-clock-256">7/10 <input type="radio" value="18" name="attr_clock" class="sheet-clock-cb sheet-clock-270">3/4 <input type="radio" value="19" name="attr_clock" class="sheet-clock-cb sheet-clock-288">8/10 <input type="radio" value="20" name="attr_clock" class="sheet-clock-cb sheet-clock-300">5/6 <input type="radio" value="21" name="attr_clock" class="sheet-clock-cb sheet-clock-315">7/8 <input type="radio" value="22" name="attr_clock" class="sheet-clock-cb sheet-clock-324">9/10 <input type="radio" value="23" name="attr_clock" class="sheet-clock-cb sheet-clock-330">11/12 <input type="radio" value="24" name="attr_clock" class="sheet-clock-cb sheet-clock-360">1.0 <hr> <div class="sheet-clock"></div> </div> CSS .sheet-clock-section { display: inline-block; text-align: center; } .sheet-clock { width: 4em; height: 4em; display: inline-block; border-radius: 50%; background: white; border: 2px solid black; } .sheet-clock::after { font-family: "Pictos"; content: "&"; color: var(--cp-white); position: relative; top: 1.25em; } .sheet-clock-cb.sheet-clock-0:checked ~ .sheet-clock { background: black; } .sheet-clock-cb.sheet-clock-30:checked ~ .sheet-clock { background-image: linear-gradient(120deg, transparent 50%, black 50%), linear-gradient(90deg, black 50%, transparent 50%); /* 120 - 90 = 30*/ } .sheet-clock-cb.sheet-clock-36:checked ~ .sheet-clock { background-image: linear-gradient(126deg, transparent 50%, black 50%), linear-gradient(90deg, black 50%, transparent 50%); /* 126 - 90 = 36*/ } .sheet-clock-cb.sheet-clock-45:checked ~ .sheet-clock { background-image: linear-gradient(135deg, transparent 50%, black 50%), linear-gradient(90deg, black 50%, transparent 50%); /* 135 - 90 = 45*/ } .sheet-clock-cb.sheet-clock-60:checked ~ .sheet-clock { background-image: linear-gradient(150deg, transparent 50%, black 50%), linear-gradient(90deg, black 50%, transparent 50%); /* 150 - 90 = 60*/ } .sheet-clock-cb.sheet-clock-72:checked ~ .sheet-clock { background-image: linear-gradient(162deg, transparent 50%, black 50%), linear-gradient(90deg, black 50%, transparent 50%); /* 162 - 90 = 72*/ } .sheet-clock-cb.sheet-clock-90:checked ~ .sheet-clock { background-image: linear-gradient(180deg, transparent 50%, black 50%), linear-gradient(90deg, black 50%, transparent 50%); /* 180 - 90 = 90*/ } .sheet-clock-cb.sheet-clock-108:checked ~ .sheet-clock { background-image: linear-gradient(198deg, transparent 50%, black 50%), linear-gradient(90deg, black 50%, transparent 50%); /* 198 - 90 = 108*/ } .sheet-clock-cb.sheet-clock-108:checked ~ .sheet-clock { background-image: linear-gradient(198deg, transparent 50%, black 50%), linear-gradient(90deg, black 50%, transparent 50%); /* 198 - 90 = 108*/ } .sheet-clock-cb.sheet-clock-120:checked ~ .sheet-clock { background-image: linear-gradient(210deg, transparent 50%, black 50%), linear-gradient(90deg, black 50%, transparent 50%); /* 210 - 90 = 120*/ } .sheet-clock-cb.sheet-clock-135:checked ~ .sheet-clock { background-image: linear-gradient(225deg, transparent 50%, black 50%), linear-gradient(90deg, black 50%, transparent 50%); /* 225 - 90 = 135*/ } .sheet-clock-cb.sheet-clock-144:checked ~ .sheet-clock { background-image: linear-gradient(234deg, transparent 50%, black 50%), linear-gradient(90deg, black 50%, transparent 50%); /* 234 - 90 = 144*/ } .sheet-clock-cb.sheet-clock-150:checked ~ .sheet-clock { background-image: linear-gradient(240deg, transparent 50%, black 50%), linear-gradient(90deg, black 50%, transparent 50%); /* 240 - 90 = 150*/ } .sheet-clock-cb.sheet-clock-180:checked ~ .sheet-clock { background-image: linear-gradient(270deg, transparent 50%, black 50%), linear-gradient(90deg, black 50%, transparent 50%); /* 270 - 90 = 180 */ } .sheet-clock-cb.sheet-clock-210:checked ~ .sheet-clock { background-image: linear-gradient(120deg, transparent 50%, white 50%), linear-gradient(90deg, black 50%, transparent 50%); /* 120 + 90 = 210*/ } .sheet-clock-cb.sheet-clock-216:checked ~ .sheet-clock { background-image: linear-gradient(126deg, transparent 50%, white 50%), linear-gradient(90deg, black 50%, transparent 50%); /* 126 + 90 = 216*/ } .sheet-clock-cb.sheet-clock-225:checked ~ .sheet-clock { background-image: linear-gradient(135deg, transparent 50%, white 50%), linear-gradient(90deg, black 50%, transparent 50%); /* 135 + 90 = 225*/ } .sheet-clock-cb.sheet-clock-240:checked ~ .sheet-clock { background-image: linear-gradient(150deg, transparent 50%, white 50%), linear-gradient(90deg, black 50%, transparent 50%); /* 150 + 90 = 240*/ } .sheet-clock-cb.sheet-clock-256:checked ~ .sheet-clock { background-image: linear-gradient(166deg, transparent 50%, white 50%), linear-gradient(90deg, black 50%, transparent 50%); /* 166 + 90 = 256*/ } .sheet-clock-cb.sheet-clock-270:checked ~ .sheet-clock { background-image: linear-gradient(180deg, transparent 50%, white 50%), linear-gradient(90deg, black 50%, transparent 50%); /* 180 + 90 = 270*/ } .sheet-clock-cb.sheet-clock-288:checked ~ .sheet-clock { background-image: linear-gradient(198deg, transparent 50%, white 50%), linear-gradient(90deg, black 50%, transparent 50%); /* 198 + 90 = 288*/ } .sheet-clock-cb.sheet-clock-300:checked ~ .sheet-clock { background-image: linear-gradient(210deg, transparent 50%, white 50%), linear-gradient(90deg, black 50%, transparent 50%); /* 210 + 90 = 300*/ } .sheet-clock-cb.sheet-clock-315:checked ~ .sheet-clock { background-image: linear-gradient(225deg, transparent 50%, white 50%), linear-gradient(90deg, black 50%, transparent 50%); /* 225 + 90 = 315*/ } .sheet-clock-cb.sheet-clock-324:checked ~ .sheet-clock { background-image: linear-gradient(234deg, transparent 50%, white 50%), linear-gradient(90deg, black 50%, transparent 50%); /* 234 + 90 = 324*/ } .sheet-clock-cb.sheet-clock-330:checked ~ .sheet-clock { background-image: linear-gradient(240deg, transparent 50%, white 50%), linear-gradient(90deg, black 50%, transparent 50%); /* 240 + 90 = 330*/ } .sheet-clock-cb.sheet-clock-360:checked ~ .sheet-clock { background-color: white; } Here's a JSfiddle so you can see it in action. The plus sign is just so you can see where the middle of the clock is.
1669223886

Edited 1669224009
Seraaron
Pro
Sheet Author
Ok so after some more fiddling I found a way to get the checkboxes around in a circle so it's a more function clock, rather than just being a visual representation of a radio menu. Here it is in action <a href="https://jsfiddle.net/gxv4yapz/3/" rel="nofollow">https://jsfiddle.net/gxv4yapz/3/</a> and this is what it looks like in the character sheet for ICON that I'm currently working on The method uses a grid with an offset for each checkmark and the 'accent-color' styling to get the buttons to match my background color since I couldn't figure out how to style the buttons normally. (None of the usual methods seemed to work in this particular instance, and I have no idea why).