itch.io

omg thank u so much!!

For the content sections, Toggle component in this version can only have two contents TwT”

But! in the next update, you can have as many Toggle contents as you want (It is actually done, and I’m sitting on it rn. Hopefully I can push this update today.)

Here’s the new Toggle’s CSS, it can have up to 5 contents (content-a → content-e), which you can still add by tweaking the CSS a bit if you need more!

/* Styling for the toggles container */
.custom-toggles {
  display: inline-flex;
  background: var(--itchio_bg2_color);
  border: 1px solid var(--itchio_bg2_sub, currentColor);
  border-radius: 24px;
}


/* Styling for the individual toggle */
.custom-toggle {
  padding: .1em .8em;
  margin: 2px;
  border-radius: inherit;
  transition: .3s;
}
.custom-toggle:not(:hover) {
  text-decoration: none;
}


/* Initial state of the content (hidden) */
[class^="custom-content-"] {
  display: none;
}


:is(#wrapper, .primary_column):not(:has(a.custom-toggle:target))

/* Default visible content ( .custom-content-a ) */
.custom-content-a,
/* Make sure to match the rule below */

  :is(#wrapper, .primary_column):has(a.custom-toggle:target[name="toggle-a"]) .custom-content-a
, :is(#wrapper, .primary_column):has(a.custom-toggle:target[name="toggle-b"]) .custom-content-b
, :is(#wrapper, .primary_column):has(a.custom-toggle:target[name="toggle-c"]) .custom-content-c
, :is(#wrapper, .primary_column):has(a.custom-toggle:target[name="toggle-d"]) .custom-content-d
, :is(#wrapper, .primary_column):has(a.custom-toggle:target[name="toggle-e"]) .custom-content-e
  /* Add as much as you want. Just change the toggle-* and the .custom-content-* accordingly */
{
  display: block;
}


.custom-toggles:not(:has(a.custom-toggle:target))

/* Default clicked button ( toggle-a ) */
a.custom-toggle[name="toggle-a"],
/* Make sure to match the rule above */

/* Styling for the individual toggle when clicked/activated */
.custom-toggles > a.custom-toggle:target
{
  color: var(--itchio_button_fg_color) !important;
  background: var(--itchio_button_color);
}

Use this instead of the one copied from the app in the current version.