mirror of
https://github.com/Nighthawk42/roll20-character-sheets.git
synced 2026-08-30 11:42:29 +00:00
Spencer Moore
681d797c3f
Previous Pull Request had the wrong filenames. Those old ones can be deleted.
709 lines
15 KiB
CSS
709 lines
15 KiB
CSS
.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 */
|
|
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="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;
|
|
}
|
|
|
|
@import url('https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap');
|
|
@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
|
|
|
|
.charactersheet h2 {
|
|
font-size: 48px;
|
|
font-family: "Permanent Marker", sans-serif;
|
|
font-weight: 400;
|
|
text-align: center;
|
|
color: #ef4035;
|
|
margin-bottom: 40px;
|
|
}
|
|
|
|
.charactersheet label {
|
|
color: #ef4035;
|
|
font-weight: 400;
|
|
font-size: 24px;
|
|
font-family: "Permanent Marker", sans-serif;
|
|
}
|
|
|
|
.character-info {
|
|
font-family: "Permanent Marker", sans-serif;
|
|
display: grid;
|
|
gap: 10px;
|
|
grid-template-columns: 42% 42% 16%;
|
|
justify-items: stretch;
|
|
}
|
|
|
|
.character-info input[type="text"] {
|
|
padding: 4px 6px
|
|
}
|
|
|
|
.character-info label {
|
|
display: inline;
|
|
}
|
|
|
|
.character-playbook select {
|
|
width: 160px;
|
|
font-family: "Montserrat", sans-serif;
|
|
}
|
|
|
|
.character-info input[type="number"] {
|
|
width: auto;
|
|
max-width: 50px;
|
|
text-align: center;
|
|
}
|
|
|
|
.character-info > div {
|
|
justify-self: center;
|
|
display: inline-grid;
|
|
grid-template-columns: auto auto;
|
|
justify-items: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.character-info textarea {
|
|
height: 24px;
|
|
width: 202px;
|
|
margin: 0;
|
|
}
|
|
|
|
.charactersheet input, .charactersheet textarea {
|
|
font-family: "Montserrat", sans-serif;
|
|
}
|
|
|
|
.character-look, .character-drive {
|
|
justify-self: center;
|
|
}
|
|
|
|
input::placeholder, textarea::placeholder {
|
|
opacity: 0.6;
|
|
}
|
|
|
|
/* Stats */
|
|
|
|
.stats {
|
|
display: inline-grid;
|
|
grid-template-columns: 50% 50%;
|
|
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;
|
|
height: auto;
|
|
width: auto;
|
|
display: block;
|
|
text-align: center;
|
|
margin: 0 auto 5px;
|
|
}
|
|
|
|
.charsheet .stats .stat-armor input[type="number"]{
|
|
font-size: 24px;
|
|
width: 2em;
|
|
text-align: center;
|
|
font-family: "Permanent Marker", sans-serif;
|
|
height: 63px;
|
|
}
|
|
|
|
.stat:not(.stat-armor) span {
|
|
display: none;
|
|
}
|
|
|
|
.stat-armor>div {
|
|
width: 48%;
|
|
display: inline-block;
|
|
}
|
|
|
|
.charactersheet .condition-label {
|
|
display: inline;
|
|
font-size: 12px;
|
|
font-family: "Montserrat", sans-serif;
|
|
color: #333;
|
|
font-weight: 500;
|
|
margin-left: 5px;
|
|
}
|
|
|
|
.stat {
|
|
text-align: center;
|
|
}
|
|
|
|
.stat label {
|
|
text-align: center;
|
|
}
|
|
|
|
.character-choices {
|
|
display: grid;
|
|
grid-template-columns: 25% 41.66% calc(33.33% - 18px);
|
|
grid-template-rows: auto;
|
|
padding-top: 40px;
|
|
gap: 10px;
|
|
}
|
|
|
|
input.condition-description {
|
|
opacity: 0;
|
|
width: 100px;
|
|
font-size: 10px;
|
|
text-align: center;
|
|
display: block;
|
|
margin: 5px auto 0 auto;
|
|
}
|
|
|
|
.stat input[type="checkbox"]:checked ~ .condition-description {
|
|
opacity: 1;
|
|
}
|
|
|
|
.stat-armor span {
|
|
font-family: "Montserrat", sans-serif;
|
|
width: 50%;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.limited-levelup-choices {
|
|
display: block;
|
|
}
|
|
|
|
.advancements input[name="attr_hideadvancement"]:checked ~ .limited-levelup-choices {
|
|
display: none;
|
|
}
|
|
|
|
/* Backgrounds */
|
|
|
|
.backgrounds-top {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.backgrounds-top > label {
|
|
width: auto;
|
|
}
|
|
|
|
.bg-name {
|
|
width: 100%;
|
|
font-weight: bold;
|
|
}
|
|
|
|
|
|
.bg-trigger {
|
|
width: 100%;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.background {
|
|
position: relative;
|
|
display: flex;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.background-checkbox input {
|
|
margin: 7px 5px 0 0;
|
|
}
|
|
|
|
.backgrounds textarea {
|
|
height: 4em;
|
|
margin-bottom: 0;
|
|
width: calc(100% - 10px);
|
|
}
|
|
|
|
.bg-desc-input {
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.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-stats, .bg-equipment-div, .bg-drive-div, .risk-greater {
|
|
display: inline-grid;
|
|
grid-template-columns: 28% 72%;
|
|
align-items: center;
|
|
width: 100%;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.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 {
|
|
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 */
|
|
|
|
.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 {
|
|
display: grid;
|
|
grid-template-columns: auto auto auto auto auto;
|
|
}
|
|
|
|
.tab-menu button {
|
|
background: #777777;
|
|
border: none;
|
|
color: white;
|
|
font-family: "Montserrat", sans-serif;
|
|
font-weight: 600;
|
|
font-size: 16px;
|
|
padding: 7px 10px;
|
|
transition: background 0.2s ease-in-out;
|
|
}
|
|
|
|
.tab-menu button:hover,
|
|
.sheet-tabstoggle[value="startingmoves"] ~ .tab-menu button[name="act_startingmoves"],
|
|
.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="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;
|
|
}
|
|
|
|
.tabs-grid-sheet {
|
|
padding: 10px 15px 15px 15px;
|
|
grid-template-columns: 33.33% 33.33% 33.33%;
|
|
display: none;
|
|
}
|
|
|
|
.move-name, .asset-name {
|
|
width: calc(100% - 107px);
|
|
font-weight: bold;
|
|
}
|
|
|
|
.sheet-advancedmoves {
|
|
position: relative;
|
|
}
|
|
|
|
.sheet-advancedmoves .move-name {
|
|
width: calc(100% - 123px);
|
|
}
|
|
|
|
.move-roll {
|
|
margin: 0;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.character-moves .move-trigger, .character-extras .asset-trigger {
|
|
width: 100%;
|
|
position: relative;
|
|
margin-top: 5px;
|
|
}
|
|
|
|
.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: 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.6em;
|
|
padding: 5px 7px;
|
|
}
|
|
|
|
.sheet-rolltemplate-default table {
|
|
border-color: #ef4035;
|
|
}
|
|
|
|
.sheet-rolltemplate-default td:first-child {
|
|
font-weight: 400;
|
|
text-align: left;
|
|
}
|
|
|
|
.sheet-rolltemplate-default tr:first-child td {
|
|
font-weight: bold;
|
|
}
|