30 lines
960 B
CSS
30 lines
960 B
CSS
|
@layer root {
|
||
|
|
body:has(fieldset#ruby-controls > input[value=NONE]:checked) rt { display: none; }
|
||
|
|
|
||
|
|
/* When ruby-controls is set to hidden, hide the ruby base and only show the <rt> */
|
||
|
|
body:has(fieldset#ruby-controls > input[value=HIDDEN]:checked) ruby > span { display: none; }
|
||
|
|
|
||
|
|
body:has(fieldset#ruby-controls > input[value=HIDDEN]:checked) rt {
|
||
|
|
color: inherit;
|
||
|
|
display: inline;
|
||
|
|
font-size: inherit;
|
||
|
|
white-space: inherit;
|
||
|
|
}
|
||
|
|
|
||
|
|
body:has(fieldset#ruby-controls > input[value=HIDDEN]:checked) :is(h1, h2, h3, h4, h5, h6) rt {
|
||
|
|
font-family: var(--font-family-heading);
|
||
|
|
font-weight: bold;
|
||
|
|
}
|
||
|
|
|
||
|
|
fieldset#ruby-controls input[type=radio] {
|
||
|
|
margin-inline-end: calc(var(--body-item-spacing) / 6);
|
||
|
|
}
|
||
|
|
|
||
|
|
fieldset#ruby-controls label {
|
||
|
|
margin-inline-end: calc(var(--body-item-spacing));
|
||
|
|
}
|
||
|
|
|
||
|
|
rt { transition: color 0.3s; }
|
||
|
|
ruby:hover rt { transition: color 0.3s; }
|
||
|
|
}
|