CSS Wizardry

Hi,

Is there a way to change the css according a value (with no API) ?
For instance, when the HP of a character pass a certain threshold, the color of the field is changed.

Akashan said:

Hi,

Is there a way to change the css according a value (with no API) ?
For instance, when the HP of a character pass a certain threshold, the color of the field is changed.

There is a kind of CSS hack that works in roll20, it has a few drawbacks thought:
1. you won't be abel to use the built in increase/lower buttons added by browsers to number inputs.
2. as far as I know you have to hardcode the value used for this.

HTML:
<input type="number" name="attr_hp" min="5">

CSS:
input:invalid {
    background-color:red;
}

You can enter a value manualy or using the token functions normaly, a value below 5 would color the input in red on the sheet.

You can use "min" and "max" to affect the :invalid/:valid selectors, sadly the "pattern" attribute gets stripped by roll20 for security reasons. Note thought that you can determine what caused the input to become invalid, so you can't make differen't colors for min and max values in the same input.

Hey all, I've created a post in the Suggestions & Ideas forum regarding usage of Google Webfonts in Character Sheets.
If you're hoping that Roll20 will implement this, or have an idea about how to implement this, please visit and give an upvote and/or leave a comment.
Thanks!
https://app.roll20.net/forum/post/2593284/character-sheets-make-google-webfonts-available-for-use

Swapping one area for another

This is something I stole from the Vampire: the Masquerade.  I didn't make it, so all credit goes to Matt Zaldivar.

<!-- html -->

<input type="checkbox" class="sheet-block_switch" name="attr_switch" value="1"/><span></span>
	<div class="sheet-block_a">
		<!-- Stuff in the visible area -->
	</div>
	<div class="sheet-block_b">
		<!-- Stuff in the hidden area -->
	</div>

/* css */

div.sheet-block_a {
    display: inline;
}

div.sheet-block_b {
    display: none;
}

input.sheet-block_switch:checked ~ div.sheet-block_a {
    display: none;
}

input.sheet-block_switch:checked ~ div.sheet-block_b {
    display: inline;
}

That's magical.  Thanks for that.

Anyone want to explain to me (break it down Barney-style) how to change background on radio button select?  Or is there a drop down?

Not sure if this will help CPP.  I believe I stole this(or something close to this) from GV's SW sheet.  You could easily modify it to meet your needs.  Cheers

Background Select Example:

<div class="sheet-useBackground">
<input type="radio" class="sheet-useBackground" style="display:none;" name="attr_background" value="1" checked />
<input type="radio" class="sheet-useBackground" style="display:none;" name="attr_background" value="2" />
    <div class="sheet-background">
        <div class="sheet-wrapper">
<!--content-->
    	<div>
	   Background:
	   <input type="checkbox" class="sheet-useBackground" name="attr_background" value="1" title="No background image." checked />Off
	   <input type="checkbox" class="sheet-useBackground" name="attr_background" value="2" title="Enable background image." />On
	</div>
<!--end content-->			
        </div>		
    </div>
</div>


CSS:
.sheet-wrapper {margin:5px; padding:0px}

/* background toggle*/
.sheet-useBackground input[value="1"]:checked ~ *.sheet-background { background-image:none; background-color:white;}
.sheet-useBackground input[value="2"]:checked ~ *.sheet-background { background-image:url("http://i.imgur.com/izwlEug.jpg"); background-size: cover; background-position: center top;}

It worked!  Thanks!

Coal Powered Puppet said:

Swapping one area for another

This is something I stole from the Vampire: the Masquerade.  I didn't make it, so all credit goes to Matt Zaldivar.

<!-- html -->

<input type="checkbox" class="sheet-block_switch" name="attr_switch" value="1"/><span></span>
	<div class="sheet-block_a">
		<!-- Stuff in the visible area -->
	</div>
	<div class="sheet-block_b">
		<!-- Stuff in the hidden area -->
	</div>

/* css */

div.sheet-block_a {
    display: inline;
}

div.sheet-block_b {
    display: none;
}

input.sheet-block_switch:checked ~ div.sheet-block_a {
    display: none;
}

input.sheet-block_switch:checked ~ div.sheet-block_b {
    display: inline;
}

Working on  a starship sheet mode for my Alternity sheet and I'm wondering can this trick be used in conjunction with a repeating field set?

I ask this because in Alternity ships and the associated sheet is kind of modular in design. I've already figured a way to represent the ship compartments using the repeating field set but where I'm stumbling is a way to make the compartment name and health disappear when there is no compartment. This would mostly be done for aesthetics purposes only as one can technically just type "empty" for the compartment name field.

If screenshots would help, i can provide later. Currently on cell and just browsing for ideas to try when i get home :)

Not really.  I would use Brian's Hide Areas code (scroll down a bit) and put the checkbox and hidden area inside the repeating field.  Ned a compartment?  Click add, and open it up to edit the information.  

...while thinking about it, you might be able to two with the css using a...um...I don't know what they are called.  Pseudo-elements?  Anyhow, your css can look for a specific value and make slight alternations to the css (its an on/off" thing opposed to a "if/then" thing).  Perhaps replacing the value searched for with a wildcard entry would allow this.  And/or using sheet-workers.  Maybe.  I haven't the slightest clue where to start.

On/off would be sufficient. I must have missed Brian's hide area thing. That's more along the lines of what I'm looking for. I'll give it a shot tonight and report back my findings :)

Brian's hide area is working perfectly, just gotta do a little more fidgeting.  Thanks Coal!

Modifying Repeating Section Buttons

So, in an earlier post, Brian mentioned being able to modify the Add, Modify, Delete buttons within a limited set of options.  If you were wondering how this could be done:

[data-groupname=repeating_skills] > button.btn.repcontrol_add::after {
	content: " Non-core Skills";
}

The above will make the +Add button for the repeating_skills repeating section ready: "+Add Non-core Skills"

If you wanted to change the styling of those buttons:

.charsheet .repcontrol_add,
.charsheet .repcontrol_edit,
.charsheet .repcontrol_del {
    display: block;
    background: #000;
    color: white;
    box-shadow:none;
    font-size:0.9em;
    height:2.2em;
}

The above will cause the +Add, Modify, and Delete buttons to be black with white text.

Now we just have to figure out how to completely replace the text inside of the repeating control buttons....

Very sexy, GV.  Thanks!

Coal Powered Puppet said:

Now we just have to figure out how to completely replace the text inside of the repeating control buttons....

Make it invisible, and put something else underneath it, similar to styling radio/checkbox buttons?

Brian said:

Coal Powered Puppet said:

Now we just have to figure out how to completely replace the text inside of the repeating control buttons....

Make it invisible, and put something else underneath it, similar to styling radio/checkbox buttons?

I remember you wrote that (earlier in this thread, actually), but I hadn't tinkered with it to figure it out the specifics.I was hoping some one would show off the code to do so.  Instead, we get Vince putting little teasing images out...

Yea, yea...  I was able to hide the repitem buttons and overlay some text, no problems and it works, but I got stuck on what to do after "modify's" hotspot gets selected.  Because I'm hiding the buttons (opacity:0), the "Done" button is also hidden and my overlay text gets shifted out of the way.  You can click in the spot if you know where it is... but the button is still hidden.  So, I still need to play around with it.  If anyone else gets the solution first, I won't be sad.   ;-)

While not perfect, here's one option...

.charsheet .repcontrol_add {
	background: transparent;
	background-image: url("http://dynamicglobalsoft.com/easts2015/program2/img/download.png");
	width: 425px;
	height: 130px;
	color: transparent;

You can still see the text a little bit (and the admittedly, the image size is HUGE), but it's getting a little better. :)

And the image was just something to see if it would work...

Vince said:

Yea, yea...  I was able to hide the repitem buttons and overlay some text, no problems and it works, but I got stuck on what to do after "modify's" hotspot gets selected.  Because I'm hiding the buttons (opacity:0), the "Done" button is also hidden and my overlay text gets shifted out of the way.  You can click in the spot if you know where it is... but the button is still hidden.  So, I still need to play around with it.  If anyone else gets the solution first, I won't be sad.   ;-)

When "Modify" gets turned into "Done", the container gains the "editmode" class, so you can create another selector based on that.

Brian said:

Vince said:

Yea, yea...  I was able to hide the repitem buttons and overlay some text, no problems and it works, but I got stuck on what to do after "modify's" hotspot gets selected.  Because I'm hiding the buttons (opacity:0), the "Done" button is also hidden and my overlay text gets shifted out of the way.  You can click in the spot if you know where it is... but the button is still hidden.  So, I still need to play around with it.  If anyone else gets the solution first, I won't be sad.   ;-)

When "Modify" gets turned into "Done", the container gains the "editmode" class, so you can create another selector based on that.

I'll have to change my test case then.  I added a div with spans that are used as a placeholder for my text.  This is placed just after the the fieldset and floated up/over the repitem buttons and doesn't sit in the container.  ;-(  Must try harder...

Replace/hide the repcontrol button text and replace it with your own:

This just adds on to what GV presented with Modifying Repeating Section Buttons from above. (Very cool!)

1. Add content text with a background-color to match the repcontrol buttons. 
2. Use a negative margin-left to hide the repcontrol button text.  

note:  Since the Modify/Done button swaps text on state, there's a little jump in margin if you use this text trick.  I couldn't figure out how to prevent that so you may want to only use this on the "+Add" button.
Please improve!

/* Overlay the +Add button with content text. */
[data-groupname=repeating_class-ability] > button.btn.repcontrol_add::after {
    content: "Add Another Class Ability for CPP";
    background-color:#000;
    margin-left:-30px;
}

/* Overlay the Modify/Done button.  Overlying text is static */
[data-groupname=repeating_class-ability] > button.btn.repcontrol_edit::after {
    content: "Adjust Class Abilities for CPP";
    background-color:#000;
    margin-left:-36px;
}

/* this sets the formatting for all repcontrol buttons */
.charsheet .repcontrol_add,
.charsheet .repcontrol_edit,
.charsheet .repcontrol_del {
    display: block;
    background: #000;
    color: white;
    box-shadow:none;
    font-size:0.9em;
    height:2.2em;
}

Vince said:

    content: "Add Another Class Ability for CPP";

Nice!

You can also change the content of the edit button if you are in editmode - which actually just allows deleting at the moment - to allow for something like "Save". The css obviously have to come after the above css code.

[data-groupname=repeating_class-ability] > .editmode + button.btn.repcontrol_edit::after {
    content: "Save";
}

Hello i am very new to all this and i was wondering how would i make a note section next to a table that holds my stats??

chris n. said:

Hello i am very new to all this and i was wondering how would i make a note section next to a table that holds my stats??

You'd probably want to use a <textarea></textarea> set of tags.

how do i make it sit next to my list of stats?

chris n. said:

how do i make it sit next to my list of stats?

Brian maybe able to answer that without the code, but I'm not that good. It may better to take this conversation to a different thread. The subject should contain [Help] and the body a description of what you want to accomplish with the HTML and CSS code provided. It also helps if the HTML and CSS are formatted using the code style (from the paragraph icon in the upper left corner of the entry box 

I want to expand/collapse all repeating rows with a class="sheet-sect-show" name="attr_class-show" and within a given fieldset, if possible.  Currently I'm using hidden checkboxes to hide and show sections of each repeating row.  Works great in or out of a fieldset, and I'm sure I can target a single row by id and/or index from outside of a fieldset, but what about toggling ALL repeating items within a fieldset?  Suggestions/help?  Thanks

Are you looking to hide the entire contents of the repeating section? Then it would be best to just hide div.repcontainer[data-groupname=repeating_my-fieldset-name] with some checkbox that's a sibling to the fieldset. You could also hide just the .repitem children of that div, but the appearance should be basically the same either way.

If you want to only collapse a portion of each row, you'll get a little more complicated. A theorycrafting example:

<input type="checkbox" name="attr_collapse-example" class="sheet-collapse-example" value="1">
<fieldset class="repeating_example">
    <input type="text" name="attr_row-title" placeholder="Foo Bar" class="sheet-repeating-title">
    <div class="repeating-content">
        <textarea name="attr_row-content"></textarea>
    </div>
</fieldset>

input.sheet-repeating-title {
    font-size: 16pt;
    font-weight: bold;
}

div.repeating-content > textarea { min-height: 200px; }

input.sheet-collapse-example::checked ~ .repcontainer[data-groupname=repeating_example] .repeating-content {
    display: none;
}

Should hide just the repeating-content div (of every row in the repeating section) when the checkbox is checked, while leaving the row-title input visible.

As written, the example wouldn't work for me  ;-(
a couple small changes and all is well.  That's exactly what I needed Brian! Thank you.

<input type="checkbox" name="attr_collapse-example" class="sheet-collapse-example" value="1">
<fieldset class="repeating_example">
    <input type="text" name="attr_row-title" placeholder="Foo Bar" class="sheet-repeating-title">
    <div class="sheet-repeating-content">
        <textarea name="attr_row-content"></textarea>
    </div>
</fieldset>

input.sheet-repeating-title {
    font-size: 16pt;
    font-weight: bold;
}

div.sheet-repeating-content > textarea { min-height: 200px; }

input.sheet-collapse-example:checked ~ .repcontainer[data-groupname=repeating_example] .sheet-repeating-content {
    display: none;
}

That would be because I derped and forgot the sheet- prefix on the repeating-content class =P

The examples above are working great. One issue that I can't seem to overcome is once I collapse All repeating sub-sections using the "master" toggle from outside the fieldset, the sub-section toggles(found within each row) can't expand their individual rows. Is this possible?  TIA

example code:

<span class="sheet-table-name">Class Features and Abilities (+/- All rows) </span>
<input type="checkbox" class="sheet-expand-show" name="attr_expand-show" value="1" checked="checked" />
<div class="sheet-repeating-fields">
    <fieldset class="repeating_class-ability">
        <span>Description (+/- rows) </span>
        <input type="checkbox" class="sheet-sect-show" name="attr_sect-show" value="1" checked="checked" />
        <div class="sheet-sect sheet-expand">					
            <textarea class="sheet-desc" name="attr_description"></textarea>            
        </div>
    </fieldset>
</div>

.sheet-sect-show:not(:checked)~.sheet-sect {
    display: none;
}

input.sheet-expand-show:checked ~ div .repcontainer[data-groupname=repeating_class-ability] .sheet-expand {
    display: none;
}  

example of what's not working  ;-(

There are several methods that should work. I think this might be the simplest (ought to work, haven't tested):

.sheet-expand-show:not(:checked) + div .sheet-sect-show:not(:checked) + .sheet-expand,
.sheet-expand-show:checked + div .sheet-sect-show:checked + .sheet-expand { display: none; }

In other words, hide .sheet-expand if the checkbox outside the repeating section matches the state of the checkbox inside the repeating section.

As explanation what happens Vince: Once you toggle the master checkbox, your sheet-sect settings are applied, then later in the css file your master simply overwrites whatever settings you had before.

Did I understand it correctly, that the master should toggle all and force them to be uncollapsed and then the sect should collapse them. Do you want to show the sect if sect OR master is checked or do you want to show it if master AND sect is checked?

The AND logic can easily be achieved by simply wrapping the sect in another div with a class that is hidden. The OR is also possible by simply first hiding the element and in the css file and then having two css styles which show it. The first of those which will be applied is therefore sufficient to show it.

Thanks guys.  I think I'm looking for an AND/OR situation.  ;-P

My example above is a simplified version of my actual use case... On the PF sheet each repeating row includes an incremental counter with a hide/show option (both are included in one button using the content:' ' property) and they are seen regardless of the row's sub-section state (hide/show).  If the master button has hidden all sub-sections I would like to still be able to go to any row and hide/show it's sub-section using the row's button without having to first toggle the master back to show.
Summary:

1. Use the master button to hide/show all repeating row sub-sections  (This is working correctly in my example.)
2. If all repeaitng row sub-sections are hidden, use the row's button to hide/show it's sub-section. (This isn't working for me.)

Hey guys, I'm working on my first character sheet, trying to have four different types and use Brian's hide technique above to change what displays.  It seems to break though if a div class="hide" is within another div.  I've tested this with the div classes [character, combat, and spacecraft] within the div class [main], with them inside of a div with no class defined, and with no div wrapper.  Having a div wrapper, class defined or not, breaks it.  Any thoughts?

HTML

<div style="display:inline-block;font-size:11px;color: #888888;text-align:left;font-weight: bold;">Sheet:</div>
<input type="radio" name="attr_sheetStyle" value="0" class="sheet-styleCharacter" checked="checked" title="Character Sheet" /><span>Character</span>
<input type="radio" name="attr_sheetStyle" value="0" class="sheet-styleCombat" title="Character Sheet" /><span>Combat</span>
<input type="radio" name="attr_sheetStyle" value="1" class="sheet-styleSpacecraft" title="Spacecraft Sheet" /><span>Spacecraft</span>
<input type="radio" name="attr_sheetStyle" value="4" class="sheet-styleNpc" title="NPC"/><span>NPC</span>
<div class="sheet-main">
    <h3>
        This Section Should Display for Character, Combat, and Spacecraft
    </h3>
    <div class="sheet-character">
        This section should only display for Character.
    </div>
    <div class="sheet-combat">
        This section should only display for Combat.
    </div>
    <div class="sheet-spacecraft">
        This section should only display for Spacecraft.
    </div>
</div>
<div class="sheet-npc">
    <h3> This Section Should Display for NPC Only</h3>
</div>

CSS

input[type=radio].sheet-styleCharacter,
input[type=radio].sheet-styleCombat,
input[type=radio].sheet-styleSpacecraft,
input[type=radio].sheet-styleNpc{
    display: inline-block;
}
input[type=radio].sheet-styleNpc:checked ~ .sheet-npc{
    display: inherit;
}
input[type=radio].sheet-styleNpc:checked ~ .sheet-main{
    display: none;
}
input[type=radio].sheet-styleCharacter:checked ~ .sheet-npc,
input[type=radio].sheet-styleCombat:checked ~ .sheet-npc,
input[type=radio].sheet-styleSpacecraft:checked ~ .sheet-npc{
    display: none;
}
input[type=radio].sheet-styleCombat:checked ~ .sheet-character,
input[type=radio].sheet-styleSpacecraft:checked ~ .sheet-character{
    display: none;
}
input[type=radio].sheet-styleCharacter:checked ~ .sheet-combat,
input[type=radio].sheet-styleSpacecraft:checked ~ .sheet-combat{
    display: none;
}
input[type=radio].sheet-styleCharacter:checked ~ .sheet-spacecraft,
input[type=radio].sheet-styleCombat:checked ~ .sheet-spacecraft{
    display: none;
}

The ~ is the sibling selector. input[type=radio].sheet-styleCombat:checked ~ .sheet-character is going to look for something like this:

<input type="radio" name="attr_sheetStyle" value="0" class="sheet-styleCombat" title="Character Sheet" /><span>Combat</span>
<div class="sheet-character">
    This section should only display for Character.
</div>

If you want something like a nephew relation, you'll have to go through the sibling, like this:

input[type=radio].sheet-styleCombat:checked ~ .sheet-main .sheet-character {
    /* ... */
}

Brian - thanks, that works.  Been a couple years since I've messed with HTML/CSS, so inheritance/relations throws me off.

Hello.

I'm working at having hideable repeatable section entries, which hide or show depending on a value set in a select entry within.

Something like :

<fieldset>
	<div class="sheet-repeating-spell">
		<select name ="attr_spell-level">
			<option value ="1">1</option>
			<option value ="2">2</option>
			<option value ="3">3</option>
		</select>
		<!-- other repeating things -->
	</div>
</fieldset>

As you may have guess, the intent here is to have repeating spells, which can be displayed by level (buttons outside the fieldset allow to chose the level or to display all spells).

As roll20 does not allow to use DOM navigation in javascript, and as CSS does not have "parent" selector, the only solution I've found is:
- modify CSS so that repitem class* does not have a border (otherwise hidden repeating entries would still show a thin, blank bow with a border),
- use well known Brian's CSS technique to hide siblings of the select tag,
- the div is here to restrict this to repeating spells (otherwise it would apply the trick to all repeating fields).

Here's my problem : while this is working, I do love the border on repeating entries (the repitem class one).
When there's a bunch of repeating entries, it makes things easier to read.
Your (fucking awesomeness we all love) ideas and (damn genius solutions) comments are welcome!

* For those who may ignore, roll20 creates a repitem div for each repeating section actually created on a sheet.

Clarify for me- I am a big fan of crayons and small words- but you want each repeating entry to be able to be shown or hide, right?  So you can chose to show the Fireball spell, the Face Melter spell, the Flowersflowersflowerseverywhere spell, each controlled by a separate switch?

In my sheets, I build a repeating sections with a hide/show switch (from this very thread), arranged to have the buttons to cast the spell in every shown all the time, and a button on the side to open up the details.  Its cleaner, yet keeps all the spells available to use.  I use a lot of tables, and the show/hide button does not affect anything outside the table, so I end up making a hidden checkbox above what is suppose to be hidden to activate the hide/show area.

For the border: put the border inside the repeating area (and around the subject matter..  Or inside the hidden area.  That should prevent you from seeing it at all, unless its expanded.

I could be very easily misunderstanding your question, so feel free to elaborate.  

My aim was to have my spells hidden or shown, depending on their level.
For example: in the spell lists, each spells has a "spell level" entry (that the user can edit), and in my spell list section, I have tabs to select "All", "Level 1", "Level 2" and so on. I have entered, let's say, 3 spells from the Level 1, 2 from the Level 2 and 2 from Level 3. When I click on the "All", all spells are shown. When I click on "Level 1", all spells excepted Level 1 spells are hidden.

Actually, I've found a solution, entirely with CSS. I have to clean the CSS architecture so I can paste here an example.

Is it possible to alter CSS colorations via a value in a character sheet?

So for example, my roll template's background color is #FFFFFF

Is there a way to change that instead to something like @{BackgroundColorHex} and have an input on my sheet to alter that as the player desires?

That would be handy, but I don't think it's possible.  You can add a container around your roll template though and include a color property and value that can be set from within your macro. Then you would just need to add {{color=foo}} Aaron just added this feature to the AD&D 1e sheet.  Have a look. https://app.roll20.net/forum/permalink/3061879/
I might be persuaded to include this on the PF sheet...

Another question:

Is it possible to pull the token image through CSS? I know powercards can do this, but it would be nice to have it built in without addon.

Not currently, no

Dang, that would be nice.

Filter Repeating section displays according to criteria within the repeating items itself.
Note: This technique was put together by Fenrhir, I have just been polishing it and implementing it in my sheet. 

I have a tabbed section to organize/display spells. All the 1st circle spells are displayed under tab 1, all the 2nd circle spells under tab 2, Etc.
There were several downsides, among them was that the 10 circles involved 10 separate lists and code repeated 10 times. It was also not possible to see all the spells at once. 
I experimented with hiding entries, but the small narrow border frame appears for each item not displayed. 
Fenrhir came up with a way to combine all these lists, but filter the display so that only certain ones appear. The ones that do display appear normal. The ones that do not display don't leave any unwanted artifacts.

The HTML looks something like this. 

    <span class="sheet-fixed-width" style="width: 11em;"><b> Spell List </b></span><br>
    <input type="radio" name="attr_tab-spells" class="sheet-tab sheet-spells-tab0" value="0" title="All circles" checked style="margin-left:1px;"/>
    <span class="sheet-tab sheet-spells-tab0">All</span>
    <input type="radio" name="attr_tab-spells" class="sheet-tab sheet-spells-tab1" value="1" title="Circle 1"/>
    <span class="sheet-tab sheet-spells-tab1">Circle 1</span>
    <input type="radio" name="attr_tab-spells" class="sheet-tab sheet-spells-tab2" value="2" title="Circle 2"/>
    <span class="sheet-tab sheet-spells-tab2">Circle 2</span>
    <input type="radio" name="attr_tab-spells" class="sheet-tab sheet-spells-tab3" value="3" title="Circle 3"/>
    <span class="sheet-tab sheet-spells-tab3">Circle 3</span>

    <div class="sheet-section sheet-section-sp-list">
        <fieldset class="repeating_spell">
            <input type="radio" name="attr_SP_Circle" class="sheet-hidden sheet-spells-tab0" value="0" checked />
            <input type="radio" name="attr_SP_Circle" class="sheet-hidden sheet-spells-tab1" value="1"/>
            <input type="radio" name="attr_SP_Circle" class="sheet-hidden sheet-spells-tab2" value="2"/>
            <input type="radio" name="attr_SP_Circle" class="sheet-hidden sheet-spells-tab3" value="3"/>
            <div class="sheet-filtered-box">
                <span><select name="attr_SP_Circle" class="sheet-nowrap sheet-label-down" style="width:5em;">
                    <option value="0" selected title"Please choose the circle for this spell.">-</option>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                </select>Circle</span>
                <span class="sheet-nowrap">
                        <input name="attr_SP_Name" type="text" style="width:12em;" placeholder="Spell Name" ></span>

More fields.
            </div>
        </fieldset>
    </div>

The relevant part of the css looks like this.

div.sheet-section-sp-list {
	max-height: 999999px;
	visibility: visible;
	opacity: 1;
	transition: opacity 0.5s linear 0s;
	overflow: hidden;
}

.charsheet .repcontainer .repitem,          /* A filterbox should look exactly like a repitem.  */
.sheet-filtered-box {
    padding: 5px 5px 2px 5px;
    margin: 5px;
	border: 2px solid #CCCCCC;
	border-radius: 3px;
}

.repcontainer .repitem {
    overflow: hidden;
}

.sheet-section-sp-list>fieldset.repeating_spell+.repcontainer>.repitem {     /* A repitem within a spellslist should functionally not exist, it's place is taken by a filterbox. */
    padding: 0px;
    margin: 0px;
    border: none;
	border-radius:;
}

.sheet-filtered-box {       /* By default, display no items of a filter box */
    display: none;
}
            /* Decide which specific repitems to display.  */
input.sheet-spells-tab0:checked~.sheet-filtered-box,      /* Always display all spells of circle zero.  */
.sheet-spells-tab0:checked~.sheet-section-sp-list>fieldset.repeating_spell+.repcontainer>.repitem .sheet-filtered-box,  /* When tab0 is checked, display everything no matter what which of the inner boxes are checked. */
.sheet-spells-tab1:checked~.sheet-section-sp-list>fieldset.repeating_spell+.repcontainer>.repitem input.sheet-spells-tab1:checked~.sheet-filtered-box,
.sheet-spells-tab2:checked~.sheet-section-sp-list>fieldset.repeating_spell+.repcontainer>.repitem input.sheet-spells-tab2:checked~.sheet-filtered-box,
.sheet-spells-tab3:checked~.sheet-section-sp-list>fieldset.repeating_spell+.repcontainer>.repitem input.sheet-spells-tab3:checked~.sheet-filtered-box {
	display: block;
} 

So basically what this does is it makes a filterbox look exactly like a repitem.
By default, no filterboxes are displayed. 
The last css entries basically say where tabX above the repeating field is checked, and the same radio button inside a specific repitem is checked, then display that item.

Edit: Modified css above to get rid of an extra set of delete buttons. 

Every time I place my checkboxes/radio buttons inside any wrapper, the connected objects just stop displaying completely as if they are no longer linked.  I see people put this stuff inside all sorts of wrappers and tables, so what is going on here?

I only know enough to be dangerous.  ;-)
Without seeing your code, your css is probably set to target a given element and once you placed that element within another element (wrapper), your css can no longer find the element you were targeting.  You need to adjust your css (using the appropriate combinators, elements, classes, etc. ) to account for the additional wrapper.  Truthfully, this is the exact issue that I often struggle with.  ;-)

simple example:
the check box below toggles the display of .sheet-box

html:
<input class="sheet-box-toggle" type="checkbox" name="attr_box-show" value="1" /><br>
<div class="sheet-box">Hello World</div>

css:
.sheet-box-toggle:checked .sheet-box {display:none;}
.sheet-box {border: 1px solid blue;}

If I place a wrapper around .sheet-box, the toggle will no longer work because I have to be more precise about the location of .sheet-box

html:
<input class="sheet-box-toggle" type="checkbox" name="attr_box-show" value="1" /><br>
<div class="sheet-wrapper">
    <div class="sheet-box">Hello World</div>
</div>

css:
.sheet-box-toggle:checked ~div .sheet-box {display:none;}
.sheet-box {border: 1px solid blue;}