mirror of
https://github.com/Nighthawk42/roll20-character-sheets.git
synced 2026-08-30 11:42:29 +00:00
Merge pull request #12654 from SpencerMoore/patch-1
Chasing Adventure Update CSS
This commit is contained in:
Lucas Hall
+434
-55
@@ -1,9 +1,11 @@
|
||||
.sheet-startingmoves,
|
||||
.sheet-advancedmoves,
|
||||
.sheet-adventuremoves,
|
||||
.sheet-peripheralmoves,
|
||||
.sheet-chasefavormoves{
|
||||
display: none;
|
||||
.charactersheet .label-small {
|
||||
color: #555;
|
||||
font-family: "Montserrat", sans-serif;
|
||||
font-weight: 600;
|
||||
font-size: 12px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: inline;
|
||||
}
|
||||
|
||||
/* show the selected tab */
|
||||
@@ -11,7 +13,12 @@ input.sheet-tabstoggle[value="startingmoves"] ~ div.sheet-startingmoves,
|
||||
.sheet-tabstoggle[value="advancedmoves"] ~ div.sheet-advancedmoves,
|
||||
.sheet-tabstoggle[value="adventuremoves"] ~ div.sheet-adventuremoves,
|
||||
.sheet-tabstoggle[value="peripheralmoves"] ~ div.sheet-peripheralmoves,
|
||||
.sheet-tabstoggle[value="chasefavormoves"] ~ div.sheet-chasefavormoves{
|
||||
.sheet-tabstoggle[value="chasefavormoves"] ~ div.sheet-chasefavormoves,
|
||||
.sheet-tabstoggle[value="assets"] ~ div.sheet-assets,
|
||||
.sheet-tabstoggle[value="creatures"] ~ div.sheet-creatures,
|
||||
.sheet-tabstoggle[value="followers"] ~ div.sheet-followers,
|
||||
.sheet-tabstoggle[value="invocations"] ~ div.sheet-invocations,
|
||||
.sheet-tabstoggle[value="spells"] ~ div.sheet-spells{
|
||||
display: block;
|
||||
}
|
||||
|
||||
@@ -21,6 +28,7 @@ input.sheet-tabstoggle[value="startingmoves"] ~ div.sheet-startingmoves,
|
||||
.charactersheet h2 {
|
||||
font-size: 48px;
|
||||
font-family: "Permanent Marker", sans-serif;
|
||||
font-weight: 400;
|
||||
text-align: center;
|
||||
color: #ef4035;
|
||||
margin-bottom: 40px;
|
||||
@@ -49,8 +57,9 @@ input.sheet-tabstoggle[value="startingmoves"] ~ div.sheet-startingmoves,
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.character-playbook input {
|
||||
.character-playbook select {
|
||||
width: 160px;
|
||||
font-family: "Montserrat", sans-serif;
|
||||
}
|
||||
|
||||
.character-info input[type="number"] {
|
||||
@@ -82,7 +91,7 @@ input.sheet-tabstoggle[value="startingmoves"] ~ div.sheet-startingmoves,
|
||||
}
|
||||
|
||||
input::placeholder, textarea::placeholder {
|
||||
opacity: 0.75;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
/* Stats */
|
||||
@@ -90,10 +99,24 @@ input::placeholder, textarea::placeholder {
|
||||
.stats {
|
||||
display: inline-grid;
|
||||
grid-template-columns: 50% 50%;
|
||||
grid-template-rows: 150px 150px 150px;
|
||||
grid-template-rows: 155px 155px 155px;
|
||||
justify-content: start;
|
||||
}
|
||||
|
||||
.stat-btn::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ui-dialog .charsheet .stat .stat-btn {
|
||||
border: none;
|
||||
background: none;
|
||||
box-shadow: none;
|
||||
font-family: "Permanent Marker", sans-serif;
|
||||
color: #ef4035;
|
||||
font-size: 24px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.stats select {
|
||||
font-family: "Permanent Marker", sans-serif;
|
||||
font-size: 36px;
|
||||
@@ -140,16 +163,16 @@ input::placeholder, textarea::placeholder {
|
||||
|
||||
.character-choices {
|
||||
display: grid;
|
||||
grid-template-columns: 25% 41.66% 33.33%;
|
||||
grid-template-columns: 25% 41.66% calc(33.33% - 18px);
|
||||
grid-template-rows: auto;
|
||||
padding-top: 40px;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.condition-description {
|
||||
input.condition-description {
|
||||
opacity: 0;
|
||||
width: 100px;
|
||||
font-size: 12px;
|
||||
font-size: 10px;
|
||||
text-align: center;
|
||||
display: block;
|
||||
margin: 5px auto 0 auto;
|
||||
@@ -165,17 +188,33 @@ input::placeholder, textarea::placeholder {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.limited-levelup-choices {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.advancements input[name="attr_hideadvancement"]:checked ~ .limited-levelup-choices {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Backgrounds */
|
||||
|
||||
.bg-name {
|
||||
width: calc(69% - 11px);
|
||||
margin-right: 10px;
|
||||
.backgrounds-top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.bg-stats {
|
||||
width: 30%;
|
||||
.backgrounds-top > label {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.bg-name {
|
||||
width: 100%;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
|
||||
.bg-trigger {
|
||||
width: 100%;
|
||||
margin-bottom: 10px;
|
||||
@@ -183,34 +222,38 @@ input::placeholder, textarea::placeholder {
|
||||
|
||||
.background {
|
||||
position: relative;
|
||||
display: flex;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.background-checkbox input {
|
||||
margin: 7px 5px 0 0;
|
||||
}
|
||||
|
||||
.backgrounds textarea {
|
||||
height: 4em;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 5px;
|
||||
margin-bottom: 0;
|
||||
width: calc(100% - 10px);
|
||||
}
|
||||
|
||||
.backgrounds .background label {
|
||||
color: #333;
|
||||
font-family: "Montserrat", sans-serif;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
margin-bottom: 0;
|
||||
display: inline;
|
||||
.bg-desc-input {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.backgrounds button {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
.backgrounds .background label {
|
||||
color: #555;
|
||||
font-family: "Montserrat", sans-serif;
|
||||
font-weight: 600;
|
||||
font-size: 12px;
|
||||
margin-bottom: 0;
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.backgrounds .bg-trigger {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.bg-equipment-div, .bg-drive-div {
|
||||
.bg-stats, .bg-equipment-div, .bg-drive-div, .risk-greater {
|
||||
display: inline-grid;
|
||||
grid-template-columns: 28% 72%;
|
||||
align-items: center;
|
||||
@@ -218,32 +261,244 @@ input::placeholder, textarea::placeholder {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.bg-equipment-div input, .bg-drive-div input {
|
||||
.risk-greater {
|
||||
grid-template-columns: 21% 79%;
|
||||
gap: 5px 0;
|
||||
}
|
||||
|
||||
.risk-greater input {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.bg-stats input, .bg-equipment-div input, .bg-drive-div input {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.bg-move-label {
|
||||
width: calc(100% - 27px);
|
||||
.bg-move {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
label.bg-move-label {
|
||||
width: auto;
|
||||
display: inline-block;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.bg-move-roll {
|
||||
margin: 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.bg-move textarea {
|
||||
margin-top: 5px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.hidebackgrounds:checked ~ .background, .hidebackgrounds:checked ~ .add-backgrounds, .hidebackgrounds:checked + .add-backgrounds {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.bg1chosen:checked ~ .background-1, .bg2chosen:checked ~ .background-2, .bg3chosen:checked ~ .background-3 {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
/* Equipment */
|
||||
|
||||
.wealth-items {
|
||||
padding-left: 18px;
|
||||
}
|
||||
|
||||
.wealth {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
margin-bottom: 10px;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.wealth label {
|
||||
width: auto;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.equipment {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.equipment .repcontainer {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.equipment-top {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin-bottom: 7px;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.equipment-bottom {
|
||||
width: 100%;
|
||||
margin-top: 10px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.item-minimize:checked + .equipment-bottom {
|
||||
display:block;
|
||||
}
|
||||
|
||||
.equipment .repcontainer label {
|
||||
color: #555;
|
||||
font-family: "Montserrat", sans-serif;
|
||||
font-weight: 600;
|
||||
font-size: 12px;
|
||||
margin-bottom: 0;
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.equipment .repitem:not(:first-child) {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.item-name {
|
||||
font-weight: bold;
|
||||
width: calc(100% - 42px);
|
||||
}
|
||||
|
||||
.item-uses {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.charactersheet .item-uses label {
|
||||
width: auto;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.equipment textarea {
|
||||
width: calc(100% - 10px);
|
||||
height: calc(100% - 57px);
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.equipment textarea{
|
||||
height: 56px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.wealth-items > textarea {
|
||||
width: calc(100% - 10px);
|
||||
}
|
||||
|
||||
/* Moves */
|
||||
|
||||
.character-moves {
|
||||
.sheet-startingmoves > .playbook-startingmoves {
|
||||
display: none;
|
||||
grid-template-columns: calc(33.33% - 10px) calc(33.33% - 10px) calc(33.33% - 10px);
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.sheet-startingmoves > .playbook[value="barbarian"] ~ .barbarian-startingmoves, .sheet-startingmoves > .playbook[value="bard"] ~ .bard-startingmoves, .sheet-startingmoves > .playbook[value="cleric"] ~ .cleric-startingmoves, .sheet-startingmoves > .playbook[value="druid"] ~ .druid-startingmoves, .sheet-startingmoves > .playbook[value="fighter"] ~ .fighter-startingmoves, .sheet-startingmoves > .playbook[value="immolator"] ~ .immolator-startingmoves, .sheet-startingmoves > .playbook[value="paladin"] ~ .paladin-startingmoves, .sheet-startingmoves > .playbook[value="ranger"] ~ .ranger-startingmoves, .sheet-startingmoves > .playbook[value="thief"] ~ .thief-startingmoves, .sheet-startingmoves > .playbook[value="wizard"] ~ .wizard-startingmoves {
|
||||
display: grid;
|
||||
|
||||
}
|
||||
|
||||
.startingfavor {
|
||||
display: block;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.hideaskanswer:checked ~ .startingfavor {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.askanswerfavor {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.askanswerfavor h4 {
|
||||
color: #555;
|
||||
margin-bottom:3px;
|
||||
}
|
||||
|
||||
.playbook[value="barbarian"] ~ .askanswerfavor.barbarian, .playbook[value="bard"] ~ .askanswerfavor.bard, .playbook[value="cleric"] ~ .askanswerfavor.cleric, .playbook[value="druid"] ~ .askanswerfavor.druid, .playbook[value="fighter"] ~ .askanswerfavor.fighter, .playbook[value="immolator"] ~ .askanswerfavor.immolator, .playbook[value="paladin"] ~ .askanswerfavor.paladin, .playbook[value="ranger"] ~ .askanswerfavor.ranger, .playbook[value="thief"] ~ .askanswerfavor.thief, .playbook[value="wizard"] ~ .askanswerfavor.wizard {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.favor, .startingfavor {
|
||||
padding-left: 18px;
|
||||
}
|
||||
|
||||
.hideaskanswer {
|
||||
margin-left: 18px;
|
||||
}
|
||||
|
||||
.favor textarea {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.repeating_startingmoves + .repcontainer {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.startingmovecolumn input[type="text"]{
|
||||
width:100%;
|
||||
}
|
||||
|
||||
.startingmovetitle {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items:center;
|
||||
}
|
||||
|
||||
.startingmovetitle:not(:first-child) {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.ui-dialog .charsheet .character-moves .startingmovetitle button[type=roll] {
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.startingmovecolumn h4 {
|
||||
font-size: 16px;
|
||||
margin-bottom:3px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.charactersheet ul.checkbox-list {
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
padding: 0 0 1em 20px
|
||||
}
|
||||
|
||||
.charactersheet ul.checkbox-list li {
|
||||
position: relative;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.charactersheet ul.checkbox-list input[type="checkbox"] {
|
||||
position: absolute;
|
||||
left: -20px;
|
||||
top: 2px;
|
||||
}
|
||||
|
||||
.input-list li{
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.input-list input {
|
||||
margin-top: 3px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.character-moves, .character-extras {
|
||||
background: #d1d2d4;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.tab-menu {
|
||||
@@ -267,52 +522,180 @@ input::placeholder, textarea::placeholder {
|
||||
.sheet-tabstoggle[value="advancedmoves"] ~ .tab-menu button[name="act_advancedmoves"],
|
||||
.sheet-tabstoggle[value="adventuremoves"] ~ .tab-menu button[name="act_adventuremoves"],
|
||||
.sheet-tabstoggle[value="peripheralmoves"] ~ .tab-menu button[name="act_peripheralmoves"],
|
||||
.sheet-tabstoggle[value="chasefavormoves"] ~ .tab-menu button[name="act_chasefavormoves"] {
|
||||
.sheet-tabstoggle[value="chasefavormoves"] ~ .tab-menu button[name="act_chasefavormoves"],
|
||||
.sheet-tabstoggle[value="assets"] ~ .tab-menu button[name="act_assets"],
|
||||
.sheet-tabstoggle[value="creatures"] ~ .tab-menu button[name="act_creatures"],
|
||||
.sheet-tabstoggle[value="followers"] ~ .tab-menu button[name="act_followers"],
|
||||
.sheet-tabstoggle[value="invocations"] ~ .tab-menu button[name="act_invocations"],
|
||||
.sheet-tabstoggle[value="spells"] ~ .tab-menu button[name="act_spells"]{
|
||||
background: #ee4035;
|
||||
}
|
||||
|
||||
.sheet-startingmoves, .sheet-advancedmoves, .sheet-adventuremoves,.sheet-peripheralmoves, .sheet-chasefavormoves {
|
||||
padding: 10px 10px;
|
||||
.tabs-grid-sheet {
|
||||
padding: 10px 15px 15px 15px;
|
||||
grid-template-columns: 33.33% 33.33% 33.33%;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.move-name {
|
||||
.move-name, .asset-name {
|
||||
width: calc(100% - 107px);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.ui-dialog .charsheet .character-moves button[type=roll] {
|
||||
margin: 0;
|
||||
.sheet-advancedmoves {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.sheet-advancedmoves .move-name {
|
||||
width: calc(100% - 123px);
|
||||
}
|
||||
|
||||
.move-roll {
|
||||
width: auto;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.move-trigger {
|
||||
.creature-name, .follower-name {
|
||||
width: calc(100% - 28px);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.invocation-name, .spell-name {
|
||||
width: calc(100% - 44px);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
input.creature-instinct {
|
||||
width: 100%;
|
||||
margin: 5px 0;
|
||||
}
|
||||
|
||||
.ui-dialog .charsheet .character-extras .creature-btn[type=roll], .ui-dialog .charsheet .character-extras .follower-btn[type=roll] {
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.ui-dialog .charsheet .character-moves button[type=roll], .ui-dialog .charsheet .character-extras button[type=roll] {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.move-roll, .asset-roll, .creature-roll, .follower-roll, .invocation-roll, .spell-roll {
|
||||
width: auto;
|
||||
position: relative;
|
||||
top: 1px;
|
||||
}
|
||||
|
||||
textarea.move-effect {
|
||||
width: calc(100% - 29px);
|
||||
margin-top: 10px;
|
||||
margin-bottom: 0;
|
||||
.character-moves .move-trigger, .character-extras .asset-trigger {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.character-moves .repcontainer {
|
||||
grid-template-columns: calc(33.33% - 7px) calc(33.33% - 7px) calc(33.33% - 7px);
|
||||
.character-moves textarea, .character-extras select {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.character-moves textarea, .character-extras textarea {
|
||||
width: calc(100% - 10px);
|
||||
margin-top: 5px;
|
||||
margin-bottom: 0;
|
||||
height: 120px;
|
||||
}
|
||||
|
||||
.character-extras .sheet-followers textarea {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.character-moves .repcontainer, .character-extras .repcontainer {
|
||||
grid-template-columns: calc(33.33% - 10px) calc(33.33% - 10px) calc(33.33% - 10px);
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
gap: 15px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.charactersheet .label-small.follower-qualities-label {
|
||||
margin-top: 5px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.sheet-invocations > p, .sheet-spells > p {
|
||||
font-family: "Montserrat",sans-serif;
|
||||
line-height: 1.2;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.sheet-spells > p button, .sheet-invocations > p button {
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.repeating_invocations + .repcontainer, .sheet-spells > label {
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.sheet-spells > label {
|
||||
font-family: "Montserrat",sans-serif;
|
||||
font-weight: bold;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.spell-stat {
|
||||
font-weight: bold;
|
||||
margin-left: 5px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.btn-row {
|
||||
display: flex;
|
||||
align-items: end;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.btn-add {
|
||||
border: none;
|
||||
background: #777;
|
||||
color: white;
|
||||
font-family: "montserrat",sans-serif;
|
||||
padding: 5px 12px;
|
||||
margin-bottom: 10px;
|
||||
transition: all 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.btn-add:hover {
|
||||
background: #ef4035;
|
||||
}
|
||||
|
||||
.hideadvancedmoves:checked ~ .repcontainer .advancedmove {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.hideadvancedmoves:checked ~ .repcontainer .advancedmovechosenhidden:checked ~ .advancedmove {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.hideadvancedmoves {
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
}
|
||||
|
||||
.hidemoveslabel {
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
left: 33px;
|
||||
font-weight: bold;
|
||||
font-family: "Montserrat", sans-serif;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
/* Roll Template */
|
||||
|
||||
.sheet-rolltemplate-default caption {
|
||||
background-color: #ef4035;
|
||||
font-family: "Permanent Marker", sans-serif;
|
||||
font-size: 1.5em;
|
||||
font-size: 1.6em;
|
||||
padding: 5px 7px;
|
||||
}
|
||||
|
||||
.sheet-rolltemplate-default table {
|
||||
border-color: #ef4035;
|
||||
}
|
||||
|
||||
.sheet-rolltemplate-default td:first-child {
|
||||
@@ -323,7 +706,3 @@ textarea.move-effect {
|
||||
.sheet-rolltemplate-default tr:first-child td {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.sheet-rolltemplate-default td {
|
||||
font-family: "Montserrat", sans-serif;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user