mirror of
https://github.com/Nighthawk42/roll20-character-sheets.git
synced 2026-09-10 00:52:28 +00:00
feat: Adds colour definitions for tabs and toggles
- Adds colour definitions for the page tabs and the sheet type toggles - Alphabetises CSS options inside the relevant rules
This commit is contained in:
Ian Merryweather
+43
-49
@@ -3,8 +3,11 @@
|
||||
.charsheet {
|
||||
--background: var(--color-surface1);
|
||||
--border: #000000;
|
||||
--header-text: var(--color-surface1);
|
||||
--is-player-character: #65763c;
|
||||
--not-player-character: #93537c;
|
||||
--selected-tab-background: #ab8b57;
|
||||
--unselected-tab-background: #4a6486;
|
||||
}
|
||||
|
||||
.sheet-rolltemplate-5eDefault {
|
||||
@@ -191,8 +194,7 @@ div[class="repcontainer editmode"] ~ div[class^="repcontrol"] button[class="btn
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
/* character/force button Settings */
|
||||
|
||||
/* Character/Force Button Settings */
|
||||
div.sheet-character,
|
||||
div.sheet-force {
|
||||
display: none;
|
||||
@@ -204,11 +206,11 @@ input.sheet-is-force:not(:checked) ~ div.sheet-character {
|
||||
}
|
||||
|
||||
input.sheet-is-force {
|
||||
width: 20%;
|
||||
height: 16px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
height: 16px;
|
||||
opacity: 0;
|
||||
position: relative;
|
||||
width: 20%;
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
@@ -217,32 +219,30 @@ span.sheet-is-force-tab::before {
|
||||
}
|
||||
|
||||
span.sheet-is-force-tab {
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
width: 20%;
|
||||
height: 16px;
|
||||
font-size: 9px;
|
||||
|
||||
background: var(--is-player-character);
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
border-radius: 4px;
|
||||
color: var(--header-text);
|
||||
display: inline-block;
|
||||
font-size: 9px;
|
||||
font-weight: bold;
|
||||
height: 16px;
|
||||
margin-left: -20%;
|
||||
text-align: center;
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
input.sheet-is-force:checked + span.sheet-is-force-tab {
|
||||
background: var(--not-player-character);
|
||||
color: white;
|
||||
border-radius: 4px;
|
||||
color: var(--header-text);
|
||||
}
|
||||
|
||||
input.sheet-is-force:checked + span.sheet-is-force-tab::before {
|
||||
content: "Force Sheet";
|
||||
}
|
||||
/* End Character/Force Button Settings */
|
||||
|
||||
/* END character/force button Settings */
|
||||
/* NPC button Settings */
|
||||
|
||||
/* NPC Button Settings */
|
||||
div.sheet-npcinfo {
|
||||
display: none;
|
||||
}
|
||||
@@ -252,11 +252,11 @@ input.sheet-is-npc:checked ~ div.sheet-npcinfo {
|
||||
}
|
||||
|
||||
input.sheet-is-npc {
|
||||
width: 5%;
|
||||
height: 16px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
height: 16px;
|
||||
opacity: 0;
|
||||
position: relative;
|
||||
width: 5%;
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
@@ -265,29 +265,28 @@ span.sheet-is-npc-tab::before {
|
||||
}
|
||||
|
||||
span.sheet-is-npc-tab {
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
width: 5%;
|
||||
height: 16px;
|
||||
font-size: 9px;
|
||||
background: var(--is-player-character);
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
border-radius: 4px;
|
||||
color: var(--header-text);
|
||||
display: inline-block;
|
||||
font-size: 9px;
|
||||
font-weight: bold;
|
||||
height: 16px;
|
||||
margin-left: -5%;
|
||||
text-align: center;
|
||||
width: 5%;
|
||||
}
|
||||
|
||||
input.sheet-is-npc:checked + span.sheet-is-npc-tab {
|
||||
background: var(--not-player-character);
|
||||
color: white;
|
||||
border-radius: 4px;
|
||||
color: var(--header-text);
|
||||
}
|
||||
|
||||
input.sheet-is-npc:checked + span.sheet-is-npc-tab::before {
|
||||
content: "NPC";
|
||||
}
|
||||
|
||||
/* END pc/npc button Settings */
|
||||
/* End NPC Button Settings */
|
||||
|
||||
/* Main Sheet Tabs */
|
||||
div[class^="sheet-section"] {
|
||||
@@ -299,37 +298,33 @@ input.sheet-tab2:checked ~ div.sheet-section-skills,
|
||||
input.sheet-tab3:checked ~ div.sheet-section-class,
|
||||
input.sheet-tab4:checked ~ div.sheet-section-combat,
|
||||
input.sheet-tab5:checked ~ div.sheet-section-spellbook,
|
||||
input.sheet-tab6:checked ~ div.sheet-section-inventory {
|
||||
display: block;
|
||||
}
|
||||
|
||||
input.sheet-tab6:checked ~ div.sheet-section-inventory,
|
||||
input.sheet-tab99:checked ~ div[class^="sheet-section"] {
|
||||
display: block;
|
||||
}
|
||||
|
||||
input.sheet-tab {
|
||||
width: 87px;
|
||||
height: 20px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
height: 20px;
|
||||
opacity: 0;
|
||||
position: relative;
|
||||
width: 87px;
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
span.sheet-tab {
|
||||
text-align: center;
|
||||
background: var(--unselected-tab-background);
|
||||
border-radius: 4px;
|
||||
color: var(--header-text);
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
font-size: 13px;
|
||||
background: #4a6486;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
border-radius: 4px;
|
||||
|
||||
width: 87px;
|
||||
height: 20px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
margin-left: -91px;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
width: 87px;
|
||||
}
|
||||
|
||||
input.sheet-tab1:checked + span.sheet-tab1,
|
||||
@@ -341,12 +336,11 @@ input.sheet-tab6:checked + span.sheet-tab6,
|
||||
input.sheet-tab7:checked + span.sheet-tab7,
|
||||
input.sheet-tab8:checked + span.sheet-tab8,
|
||||
input.sheet-tab99:checked + span.sheet-tab99 {
|
||||
background: #ab8b57;
|
||||
color: white;
|
||||
background: var(--selected-tab-background);
|
||||
border-radius: 4px;
|
||||
color: var(--header-text);
|
||||
}
|
||||
|
||||
/* END Main sheet tabs */
|
||||
/* End Main sheet tabs */
|
||||
|
||||
/* Spell Page Settings */
|
||||
div[class^="sheet-spell-page"] {
|
||||
|
||||
Reference in New Issue
Block a user