diff --git a/Shadowdark-Unofficial/Shadowdark-Unofficial.css b/Shadowdark-Unofficial/Shadowdark-Unofficial.css index 981ab1710f..a04eb88176 100644 --- a/Shadowdark-Unofficial/Shadowdark-Unofficial.css +++ b/Shadowdark-Unofficial/Shadowdark-Unofficial.css @@ -169,18 +169,7 @@ input::placeholder { resize: vertical; } -/* Options toggle */ -.sheet-toggle-options[value="0"]~.sheet-section-options { - display: none; -} -.sheet-toggle-options:not([value="0"])~.sheet-section-options { - display: block; -} - -.sheet-section-options .sheet-form-group { - margin-bottom: 8px; -} /* Pulp mode toggle */ .sheet-toggle-pulp-mode[value="0"]~.sheet-pulp-mode { @@ -816,6 +805,59 @@ label.sheet-form-checkbox { content: 'y'; /* y = Pictos font Gear icon */ } +/* Sheet options button in top right */ +.sheet-options-button { + position: absolute; + right: 8px; + top: -4px; + width: 24px; + height: 24px; + cursor: pointer; +} + +.sheet-options-button input { + width: 100%; + height: 100%; + opacity: 0; + position: absolute; + z-index: 1; + margin: 0; +} + +.sheet-options-button span { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + font-size: 16px; + background-color: rgba(255, 255, 255, 0.8); + border: 1px solid #999; + border-radius: 3px; +} + +.sheet-options-button:hover span { + background-color: rgba(255, 255, 255, 0.9); + border-color: #333; +} + +.sheet-darkmode .sheet-options-button span { + background-color: rgba(0, 0, 0, 0.8); + border-color: #666; +} + +.sheet-darkmode .sheet-options-button:hover span { + background-color: rgba(0, 0, 0, 0.9); + border-color: #ccc; +} + +.sheet-section-roll-advantage { + position: relative; +} + .sheet-sd .sheet-field-toggle:not([value])+*, .sheet-sd .sheet-field-toggle[value=""]+*, .sheet-sd .sheet-field-toggle[value="0"]+*, @@ -1279,6 +1321,16 @@ input[type=checkbox].atk-fixed:checked { min-height: 420px; width: 100%; } + + /* Sheet options button in top right */ + .sheet-options-button { + position: absolute; + right: 8px; + top: 8px; + width: 24px; + height: 24px; + cursor: pointer; + } } @media (max-width: 420px) {