Nighthawk/roll20-character-sheets
1
0
Fork 0
mirror of https://github.com/Nighthawk42/roll20-character-sheets.git synced 2026-09-12 01:52:32 +00:00
Code Issues Packages Projects Releases Wiki Activity

Nav buttons at top of sheet now styled as tabs using player chosen color

Browse Source
This commit is contained in:
Mel Primus
2021-06-07 19:35:44 -05:00
parent 3af3ce93f0
commit 41143b792e
2 changed files with 33 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
World Wide Wrestling 2nd Ed/wwwrpg.css
+28
View File
@@ -16,6 +16,27 @@ div.character-sheet, div.notes-tab, div.settings-tab {
border-radius: 10px;
}
div.nav-buttons {
margin-left: 15px;
border: none;
}
button.char-button, button.notes-button, button.settings-button {
border-radius: 10px 10px 0px 0px;
border-color: var(--bordercolor);
border-style: solid;
border-width: 3px 3px 0px 3px;
padding: 5px 9px 2px 9px;
margin-right: 2px;
background: white;
}
.tabs-toggle[value="character"] ~ button.char-button,
.tabs-toggle[value="notes"] ~ button.notes-button,
.tabs-toggle[value="settings"] ~ button.settings-button {
background: var(--fillcolor);
}
div.character-sheet {
padding-bottom: 11px;
}
@@ -44,6 +65,7 @@ div.settings-tab {
.color-toggle[value="red"] ~ div.character-sheet,
.color-toggle[value="red"] ~ div.notes-tab,
.color-toggle[value="red"] ~ div.settings-tab,
.color-toggle[value="red"] ~ div.nav-buttons,
.sheet-rolltemplate-rollstat div.sheet-roll-container-red {
--bordercolor: #e24;
--fillcolor: #fcb;
@@ -52,6 +74,7 @@ div.settings-tab {
.color-toggle[value="blue"] ~ div.character-sheet,
.color-toggle[value="blue"] ~ div.notes-tab,
.color-toggle[value="blue"] ~ div.settings-tab,
.color-toggle[value="blue"] ~ div.nav-buttons,
.sheet-rolltemplate-rollstat div.sheet-roll-container-blue {
--bordercolor: #00e;
--fillcolor: #9cf
@@ -60,6 +83,7 @@ div.settings-tab {
.color-toggle[value="green"] ~ div.character-sheet,
.color-toggle[value="green"] ~ div.notes-tab,
.color-toggle[value="green"] ~ div.settings-tab,
.color-toggle[value="green"] ~ div.nav-buttons,
.sheet-rolltemplate-rollstat div.sheet-roll-container-green {
--bordercolor: #183;
--fillcolor: #ad9
@@ -68,6 +92,7 @@ div.settings-tab {
.color-toggle[value="yellow"] ~ div.character-sheet,
.color-toggle[value="yellow"] ~ div.notes-tab,
.color-toggle[value="yellow"] ~ div.settings-tab,
.color-toggle[value="yellow"] ~ div.nav-buttons,
.sheet-rolltemplate-rollstat div.sheet-roll-container-yellow {
--bordercolor: #fc0;
--fillcolor: #fe9
@@ -76,6 +101,7 @@ div.settings-tab {
.color-toggle[value="purple"] ~ div.character-sheet,
.color-toggle[value="purple"] ~ div.notes-tab,
.color-toggle[value="purple"] ~ div.settings-tab,
.color-toggle[value="purple"] ~ div.nav-buttons,
.sheet-rolltemplate-rollstat div.sheet-roll-container-purple {
--bordercolor: #b1d;
--fillcolor: #dce
@@ -84,6 +110,7 @@ div.settings-tab {
.color-toggle[value="orange"] ~ div.character-sheet,
.color-toggle[value="orange"] ~ div.notes-tab,
.color-toggle[value="orange"] ~ div.settings-tab,
.color-toggle[value="orange"] ~ div.nav-buttons,
.sheet-rolltemplate-rollstat div.sheet-roll-container-orange {
--bordercolor: #f90;
--fillcolor: #fd9
@@ -92,6 +119,7 @@ div.settings-tab {
.color-toggle[value="black"] ~ div.character-sheet,
.color-toggle[value="black"] ~ div.notes-tab,
.color-toggle[value="black"] ~ div.settings-tab,
.color-toggle[value="black"] ~ div.nav-buttons,
.sheet-rolltemplate-rollstat div.sheet-roll-container-black {
--bordercolor: #001;
--fillcolor: #ccd
World Wide Wrestling 2nd Ed/wwwrpg.html
+5 -6
View File
@@ -1,12 +1,11 @@
<div>
<button type="action" name="act_character">Character</button>
<button type="action" name="act_notes">Notes</button>
<button type="action" name="act_settings">Settings</button>
</div>
<input type="hidden" class="tabs-toggle" name="attr_sheetTab" value="character" />
<input type="hidden" class="color-toggle" name="attr_sheetColor" value="red" />
<div class="nav-buttons">
<input type="hidden" class="tabs-toggle" name="attr_sheetTab" value="character" />
<button type="action" class="char-button" name="act_character">Character</button><button type="action" class="notes-button" name="act_notes">Notes</button><button type="action" class="settings-button" name="act_settings">Settings</button>
</div>
<div class="character-sheet">
<div align="center">
<input class="gimmick-input" type="text" name="attr_gimmick_name" placeholder="gimmick" data-lpignore="true"/>