mirror of
https://github.com/Nighthawk42/roll20-character-sheets.git
synced 2026-08-30 03:40:32 +00:00
1375 lines
30 KiB
CSS
1375 lines
30 KiB
CSS
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,900;1,900&family=Courier&family=Fondamento&family=Special+Elite&display=swap');
|
|
|
|
|
|
h1, h2, h3, h4, h5 {
|
|
font-family: 'Fondamento';
|
|
letter-spacing: 2px;
|
|
}
|
|
|
|
h6 {
|
|
font-family: 'Montserrat', sans-serif;
|
|
}
|
|
|
|
h2 {
|
|
text-transform: uppercase;
|
|
background: url('https://raw.githubusercontent.com/roll20/roll20-character-sheets/refs/heads/master/Curseborne/images/background.png');
|
|
background-repeat: no-repeat;
|
|
background-position: center center;
|
|
background-size: cover;
|
|
background-attachment: fixed;
|
|
color: #fff;
|
|
font-size: 3.2rem;
|
|
font-weight: 900;
|
|
text-align: center;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
h6 {
|
|
text-transform: uppercase;
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
input[type="checkbox"].readonly {
|
|
pointer-events: none;
|
|
}
|
|
|
|
|
|
.characterviewer label {
|
|
font-family: 'Montserrat', sans-serif;
|
|
text-transform: uppercase;
|
|
color: #333;
|
|
font-weight: 700;
|
|
margin-bottom: 0px;
|
|
padding: 0px;
|
|
font-size: 14px;
|
|
line-height: 16px;
|
|
}
|
|
|
|
.characterviewer .custom-label {
|
|
font-family: 'Montserrat', sans-serif;
|
|
text-transform: uppercase;
|
|
background: transparent;
|
|
color: #333;
|
|
font-weight: 700;
|
|
margin-left: 3px;
|
|
margin-bottom: 0px;
|
|
padding: 0px;
|
|
font-size: 14px;
|
|
line-height: 16px;
|
|
box-sizing: content-box;
|
|
max-width: 120px;
|
|
}
|
|
|
|
.characterviewer .feature-label {
|
|
font-family: 'Montserrat', sans-serif;
|
|
text-transform: uppercase;
|
|
background: transparent;
|
|
color: #333;
|
|
font-weight: 700;
|
|
margin-left: 3px;
|
|
margin-bottom: 0px;
|
|
padding: 0px;
|
|
font-size: 14px;
|
|
line-height: 16px;
|
|
box-sizing: content-box;
|
|
}
|
|
|
|
.charsheet button[type="roll"].label,
|
|
.charsheet button[type="action"].label,
|
|
.charsheet button[type="roll"].label:focus,
|
|
.charsheet button[type="action"].label:focus,
|
|
.charsheet button[type="roll"].label:hover,
|
|
.charsheet button[type="action"].label:hover {
|
|
font-family: 'Montserrat', sans-serif;
|
|
text-transform: uppercase;
|
|
color: #333;
|
|
font-weight: 700;
|
|
margin-bottom: 0px;
|
|
padding: 0px;
|
|
font-size: 14px;
|
|
line-height: 16px;
|
|
border-style: none;
|
|
border-radius: 0px;
|
|
text-shadow: none !important;
|
|
box-shadow: none !important;
|
|
background-image: none;
|
|
background-color: transparent;
|
|
}
|
|
|
|
.charsheet button[type="roll"].label::before,
|
|
.charsheet button[type="action"].label::before {
|
|
content: " ";
|
|
}
|
|
|
|
|
|
.charsheet button[type="roll"].dice-roll,
|
|
.charsheet button[type="action"].dice-roll {
|
|
border-style: none;
|
|
border-radius: 10px;
|
|
text-shadow: none !important;
|
|
box-shadow: none !important;
|
|
background-image: none;
|
|
background: transparent;
|
|
padding: 0px;
|
|
margin-right: 0px;
|
|
}
|
|
|
|
.charsheet button[type="roll"].details-roll::before {
|
|
border-style: none;
|
|
border-radius: 10px;
|
|
text-shadow: none !important;
|
|
box-shadow: none !important;
|
|
background-image: none;
|
|
background: transparent;
|
|
font-family: pictos;
|
|
font-size: 2.0rem;
|
|
color: #333;
|
|
content: "i";
|
|
padding: 0px;
|
|
margin-right: 0px;
|
|
}
|
|
|
|
.charsheet button[type="roll"].details-roll {
|
|
font-family: Pictos;
|
|
font-size: 1.2em;
|
|
content: "i";
|
|
color: #aba9a4;
|
|
}
|
|
|
|
.charsheet button[type="roll"].query-roll::before {
|
|
border-style: none;
|
|
border-radius: 10px;
|
|
text-shadow: none !important;
|
|
box-shadow: none !important;
|
|
background-image: none;
|
|
background: transparent;
|
|
font-family: pictos;
|
|
font-size: 2.0rem;
|
|
color: #333;
|
|
content: "?";
|
|
padding: 0px;
|
|
margin-right: 0px;
|
|
}
|
|
|
|
.charsheet button[type="roll"].query-roll {
|
|
font-family: Pictos;
|
|
font-size: 1.2em;
|
|
content: "?";
|
|
color: #aba9a4;
|
|
}
|
|
|
|
input.dot[value="0"] ~ button.dice-roll::before {
|
|
font-family: dicefontd10;
|
|
font-size: 2.6rem;
|
|
content: "J";
|
|
}
|
|
|
|
input.dot[value="1"] ~ button.dice-roll::before {
|
|
font-family: dicefontd10;
|
|
font-size: 2.6rem;
|
|
content: "A";
|
|
}
|
|
|
|
input.dot[value="2"] ~ button.dice-roll::before {
|
|
font-family: dicefontd10;
|
|
font-size: 2.6rem;
|
|
content: "B";
|
|
}
|
|
|
|
input.dot[value="3"] ~ button.dice-roll::before {
|
|
font-family: dicefontd10;
|
|
font-size: 2.6rem;
|
|
content: "C";
|
|
}
|
|
|
|
input.dot[value="4"] ~ button.dice-roll::before {
|
|
font-family: dicefontd10;
|
|
font-size: 2.6rem;
|
|
content: "D";
|
|
}
|
|
|
|
input.dot[value="5"] ~ button.dice-roll::before {
|
|
font-family: dicefontd10;
|
|
font-size: 2.6rem;
|
|
content: "E";
|
|
}
|
|
|
|
input.dot[value="6"] ~ button.dice-roll::before {
|
|
font-family: dicefontd10;
|
|
font-size: 2.6rem;
|
|
content: "F";
|
|
}
|
|
|
|
input.dot[value="7"] ~ button.dice-roll::before {
|
|
font-family: dicefontd10;
|
|
font-size: 2.6rem;
|
|
content: "G";
|
|
}
|
|
|
|
input.dot[value="8"] ~ button.dice-roll::before {
|
|
font-family: dicefontd10;
|
|
font-size: 2.6rem;
|
|
content: "H";
|
|
}
|
|
|
|
input.dot[value="9"] ~ button.dice-roll::before {
|
|
font-family: dicefontd10;
|
|
font-size: 2.6rem;
|
|
content: "I";
|
|
}
|
|
|
|
input.dot[value="10"] ~ button.dice-roll::before {
|
|
font-family: dicefontd10;
|
|
font-size: 2.6rem;
|
|
content: "J";
|
|
}
|
|
|
|
input.dot[value="11"] ~ button.dice-roll::before {
|
|
font-family: dicefontd10;
|
|
font-size: 2.6rem;
|
|
content: "J";
|
|
}
|
|
|
|
input.dot[value="12"] ~ button.dice-roll::before {
|
|
font-family: dicefontd10;
|
|
font-size: 2.6rem;
|
|
content: "J";
|
|
}
|
|
|
|
input[type="text"],
|
|
.input-display {
|
|
width: 100%;
|
|
border-style: solid;
|
|
border-width: 0px 0px 1px 0px;
|
|
border-color: #333;
|
|
text-align: center;
|
|
background-color: rgba(255, 255, 255, 0.6);
|
|
padding: 4px;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
input[type="number"] {
|
|
border-style: solid;
|
|
border-width: 0px 0px 1px 0px;
|
|
border-color: #333;
|
|
background-color: rgba(255, 255, 255, 0.6);
|
|
text-align: center;
|
|
}
|
|
|
|
select {
|
|
margin-bottom: 0px;
|
|
box-sizing: border-box;
|
|
background-color: rgba(255,255,255,0.6);
|
|
border-style: solid;
|
|
border-width: 0px 0px 1px 0px;
|
|
border-color: #333;
|
|
text-align: center;
|
|
}
|
|
|
|
textarea {
|
|
margin-bottom: 0px;
|
|
box-sizing: border-box;
|
|
background-color: rgba(255,255,255,0.6);
|
|
}
|
|
|
|
.ui-dialog .charsheet {
|
|
background: url('https://raw.githubusercontent.com/roll20/roll20-character-sheets/refs/heads/master/Curseborne/images/background.png');
|
|
background-repeat: no-repeat;
|
|
background-position: center center;
|
|
background-size: cover;
|
|
background-attachment: fixed;
|
|
padding: 20px;
|
|
}
|
|
|
|
.wrapper {
|
|
background: linear-gradient(rgba(255,255,255,0.6), rgba(255,255,255,0.9));
|
|
padding: 10px;
|
|
display: grid;
|
|
grid-template-rows: auto;
|
|
grid-template-columns: 2fr 2fr 2fr 2fr;
|
|
grid-template-areas:
|
|
"token logo logo logo"
|
|
"details details details details"
|
|
"skills skills skills skills"
|
|
"attributes attributes attributes attributes"
|
|
"entanglement entanglement entanglement entanglement"
|
|
"spells spells spells spells"
|
|
"damnation inheritance torments torments"
|
|
"edges edges health health"
|
|
"bonds contacts contacts contacts"
|
|
"equipment equipment equipment equipment"
|
|
"common-conditions common-conditions footer-general footer-general";
|
|
|
|
|
|
row-gap: 10px;
|
|
column-gap: 10px;
|
|
align-items: start;
|
|
}
|
|
|
|
.version {
|
|
color: #fff;
|
|
}
|
|
|
|
.token {
|
|
grid-area: token;
|
|
filter: drop-shadow(10px 10px 2px rgba(50,73,66,0.6));
|
|
align-self: center;
|
|
justify-self: left;
|
|
}
|
|
|
|
.logo {
|
|
grid-area: logo;
|
|
filter: drop-shadow(10px 10px 2px rgba(50,73,66,0.6));
|
|
align-self: center;
|
|
justify-self: left;
|
|
}
|
|
|
|
.char-details {
|
|
grid-area: details;
|
|
}
|
|
|
|
.char-details > div {
|
|
display: grid;
|
|
grid-template-rows: auto;
|
|
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
|
|
column-gap: 3px;
|
|
margin-bottom: 3px;
|
|
align-items: center;
|
|
grid-template-areas:
|
|
"name-label name-text lineage-label lineage-text short1-label short1-text"
|
|
"player-label player-text family-label family-text short2-label short2-text"
|
|
"concept-label concept-text role-label role-text longterm-label longterm-text";
|
|
row-gap: 3px;
|
|
column-gap: 3px;
|
|
}
|
|
|
|
.char-details .check {
|
|
justify-self: center;
|
|
}
|
|
|
|
.char-details label {
|
|
text-align: right;
|
|
}
|
|
|
|
.name-label {
|
|
grid-area: name-label;
|
|
}
|
|
|
|
.name-text {
|
|
grid-area: name-text;
|
|
}
|
|
|
|
.lineage-label {
|
|
grid-area: lineage-label;
|
|
}
|
|
|
|
.lineage-text {
|
|
grid-area: lineage-text;
|
|
}
|
|
|
|
.short1-label {
|
|
grid-area: short1-label;
|
|
}
|
|
|
|
.short1-text {
|
|
grid-area: short1-text;
|
|
}
|
|
|
|
.concept-label {
|
|
grid-area: concept-label;
|
|
}
|
|
|
|
.concept-text {
|
|
grid-area: concept-text;
|
|
}
|
|
|
|
.family-label {
|
|
grid-area: family-label;
|
|
}
|
|
|
|
.family-text {
|
|
grid-area: family-text;
|
|
}
|
|
|
|
.short2-label {
|
|
grid-area: short2-label;
|
|
}
|
|
|
|
.short2-text {
|
|
grid-area: short2-text;
|
|
}
|
|
|
|
.player-label {
|
|
grid-area: player-label;
|
|
}
|
|
|
|
.player-text {
|
|
grid-area: player-text;
|
|
}
|
|
|
|
.role-label {
|
|
grid-area: role-label;
|
|
}
|
|
|
|
.role-text {
|
|
grid-area: role-text;
|
|
}
|
|
|
|
.longterm-label {
|
|
grid-area: longterm-label;
|
|
}
|
|
|
|
.longterm-text {
|
|
grid-area: longterm-text;
|
|
}
|
|
|
|
.header-general {
|
|
grid-area: header-general;
|
|
display: grid;
|
|
grid-template-rows: auto;
|
|
grid-template-columns: 150px 1fr;
|
|
row-gap: 3px;
|
|
column-gap: 3px;
|
|
align-items: center;
|
|
}
|
|
|
|
.header-general label {
|
|
text-align: right;
|
|
color: #c21a1f;
|
|
}
|
|
|
|
.skills {
|
|
grid-area: skills;
|
|
}
|
|
|
|
.skill-list {
|
|
display: grid;
|
|
grid-template-rows: auto;
|
|
grid-template-columns: 1fr 1fr;
|
|
column-gap: 10px;
|
|
}
|
|
|
|
.skill-list .left > div,
|
|
.skill-list .right > div {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 3px;
|
|
}
|
|
|
|
.skill-list .left .check,
|
|
.skill-list .right .check {
|
|
min-width: 13px;
|
|
min-height: 13px;
|
|
margin: 0px;
|
|
}
|
|
|
|
.skill-list .left .label,
|
|
.skill-list .right .label {
|
|
width: auto;
|
|
margin: 0px 0px 0px 3px;
|
|
}
|
|
|
|
.skill-list .left .value,
|
|
.skill-list .right .value {
|
|
flex-grow: 1;
|
|
margin: 0px 0px 0px 3px;
|
|
}
|
|
|
|
.skill-list .left .dots,
|
|
.skill-list .right .dots {
|
|
width: 120px;
|
|
margin: 0px 0px 0px 3px;
|
|
}
|
|
|
|
.char-attributes {
|
|
grid-area: attributes;
|
|
}
|
|
|
|
.char-attributes > div {
|
|
display: grid;
|
|
grid-template-rows: auto;
|
|
grid-template-columns:1fr 1fr 1fr 1fr 1fr 1fr;
|
|
column-gap: 3px;
|
|
margin-bottom: 3px;
|
|
align-items: center;
|
|
grid-template-areas:
|
|
"intellect-label intellect-dots might-label might-dots presence-label presence-dots"
|
|
"cunning-label cunning-dots dexterity-label dexterity-dots manipulation-label manipulation-dots"
|
|
"resolve-label resolve-dots stamina-label stamina-dots composure-label composure-dots";
|
|
row-gap: 3px;
|
|
column-gap: 3px;
|
|
}
|
|
|
|
|
|
.char-attributes .check {
|
|
justify-self: center;
|
|
}
|
|
|
|
.char-attributes label {
|
|
text-align: right;
|
|
}
|
|
|
|
.intellect-label {
|
|
grid-area: intellect-label;
|
|
}
|
|
|
|
.intellect-dots {
|
|
grid-area: intellect-dots;
|
|
}
|
|
|
|
.might-label {
|
|
grid-area: might-label;
|
|
}
|
|
|
|
.might-dots {
|
|
grid-area: might-dots;
|
|
}
|
|
|
|
.presence-label {
|
|
grid-area: presence-label;
|
|
}
|
|
|
|
.presence-dots {
|
|
grid-area: presence-dots;
|
|
}
|
|
|
|
.cunning-label {
|
|
grid-area: cunning-label;
|
|
}
|
|
|
|
.cunning-dots {
|
|
grid-area: cunning-dots;
|
|
}
|
|
|
|
.dexterity-label {
|
|
grid-area: dexterity-label;
|
|
}
|
|
|
|
.dexterity-dots {
|
|
grid-area: dexterity-dots;
|
|
}
|
|
|
|
.manipulation-label {
|
|
grid-area: manipulation-label;
|
|
}
|
|
|
|
.manipulation-dots {
|
|
grid-area: manipulation-dots;
|
|
}
|
|
|
|
.resolve-label {
|
|
grid-area: resolve-label;
|
|
}
|
|
|
|
.resolve-dots {
|
|
grid-area: resolve-dots;
|
|
}
|
|
|
|
.stamina-label {
|
|
grid-area: stamina-label;
|
|
}
|
|
|
|
.stamina-dots {
|
|
grid-area: stamina-dots;
|
|
}
|
|
|
|
.composure-label {
|
|
grid-area: composure-label;
|
|
}
|
|
|
|
.composure-dots {
|
|
grid-area: composure-dots;
|
|
}
|
|
|
|
.char-entanglement {
|
|
grid-area: entanglement;
|
|
}
|
|
|
|
.char-entanglement > div {
|
|
display: grid;
|
|
grid-template-rows: auto;
|
|
grid-template-columns:1fr 2fr 1fr 2fr;
|
|
column-gap: 3px;
|
|
margin-bottom: 3px;
|
|
align-items: center;
|
|
grid-template-areas:
|
|
"entanglement-label entanglement-dots curse-label curse-dots";
|
|
row-gap: 3px;
|
|
column-gap: 3px;
|
|
}
|
|
|
|
.entanglement-label {
|
|
grid-area: entanglement-label;
|
|
}
|
|
|
|
.entanglement-dots {
|
|
grid-area: entanglement-dots;
|
|
}
|
|
|
|
.curse-label {
|
|
grid-area: curse-label;
|
|
}
|
|
|
|
.curse-dots {
|
|
grid-area: curse-dots;
|
|
}
|
|
|
|
.bonds {
|
|
grid-area: bonds;
|
|
}
|
|
|
|
.contacts {
|
|
grid-area: contacts;
|
|
}
|
|
|
|
.contacts-dots {
|
|
grid-area: contacts-dots;
|
|
}
|
|
|
|
.spells {
|
|
grid-area: spells;
|
|
}
|
|
|
|
.edges {
|
|
grid-area: edges;
|
|
}
|
|
|
|
.dreadpowers {
|
|
grid-area: dreadpowers;
|
|
}
|
|
|
|
.damnation {
|
|
grid-area: damnation;
|
|
}
|
|
|
|
.inheritence {
|
|
grid-area: inheritance;
|
|
}
|
|
|
|
.char-torments {
|
|
grid-area: torments;
|
|
}
|
|
|
|
.char-torments > div {
|
|
display: grid;
|
|
grid-template-rows: auto;
|
|
grid-template-columns:2fr 2fr;
|
|
column-gap: 3px;
|
|
margin-bottom: 3px;
|
|
align-items: center;
|
|
grid-template-areas:
|
|
"accursed-label personal-label"
|
|
"accursed-button personal-button"
|
|
row-gap: 3px;
|
|
column-gap: 3px;
|
|
}
|
|
|
|
.accursed-label {
|
|
grid-area: accursed-label;
|
|
}
|
|
|
|
.personal-label {
|
|
grid-area: personal-label;
|
|
}
|
|
|
|
.accursed-button {
|
|
grid-area: accursed-button;
|
|
}
|
|
|
|
.personal-button {
|
|
grid-area: personalbutton;
|
|
}
|
|
|
|
.common-conditions {
|
|
grid-area: common-conditions;
|
|
}
|
|
|
|
|
|
.health {
|
|
grid-area: health;
|
|
}
|
|
|
|
.armor-dots {
|
|
grid-area: armor-dots;
|
|
}
|
|
|
|
.bloodied-dots {
|
|
grid-area: bloodied-dots;
|
|
}
|
|
|
|
.wounded-dots {
|
|
grid-area: wounded-dots;
|
|
}
|
|
|
|
.maimed-dots {
|
|
grid-area: maimed-dots;
|
|
}
|
|
|
|
.neardeath-dots {
|
|
grid-area: neardeath-dots;
|
|
}
|
|
|
|
.equipment {
|
|
grid-area: equipment;
|
|
}
|
|
|
|
.footer-general {
|
|
grid-area: footer-general;
|
|
}
|
|
|
|
.adversarywrapper {
|
|
background: linear-gradient(rgba(255,255,255,0.6), rgba(255,255,255,0.9));
|
|
padding: 10px;
|
|
display: grid;
|
|
grid-template-rows: auto;
|
|
grid-template-columns: 2fr 2fr 2fr 2fr;
|
|
grid-template-areas:
|
|
"token logo logo logo"
|
|
"details details details details"
|
|
"pools pools pools pools"
|
|
"edges edges dreadpowers dreadpowers"
|
|
"equipment equipment equipment equipment"
|
|
"common-conditions common-conditions health health";
|
|
|
|
row-gap: 10px;
|
|
column-gap: 10px;
|
|
align-items: start;
|
|
}
|
|
|
|
.char-pools {
|
|
grid-area: pools;
|
|
}
|
|
|
|
.char-pools > div {
|
|
display: grid;
|
|
grid-template-rows: auto;
|
|
grid-template-columns:1fr 1fr 1fr;
|
|
column-gap: 3px;
|
|
margin-bottom: 3px;
|
|
align-items: center;
|
|
grid-template-areas:
|
|
"primary-label primary-value primary-dots"
|
|
"secondary-label secondary-value secondary-dots"
|
|
"desperation-label desperation-value desperation-dots"
|
|
"enhancement-label enhancement-value .";
|
|
row-gap: 3px;
|
|
column-gap: 3px;
|
|
}
|
|
|
|
.primary-label {
|
|
grid-area: primary-label;
|
|
}
|
|
|
|
.primary-value {
|
|
grid-area: primary-value;
|
|
}
|
|
|
|
.primary-dots {
|
|
grid-area: primary-dots;
|
|
}
|
|
|
|
.secondary-label {
|
|
grid-area: secondary-label;
|
|
}
|
|
|
|
.secondary-value {
|
|
grid-area: secondary-value;
|
|
}
|
|
|
|
.secondary-dots {
|
|
grid-area: secondary-dots;
|
|
}
|
|
|
|
.desperation-label {
|
|
grid-area: desperation-label;
|
|
}
|
|
|
|
.desperation-value {
|
|
grid-area: desperation-value;
|
|
}
|
|
|
|
.desperation-dots {
|
|
grid-area: desperation-dots;
|
|
}
|
|
|
|
.enhancement-label {
|
|
grid-area: enhancement-label;
|
|
}
|
|
|
|
.enhancement-value {
|
|
grid-area: enhancement-value;
|
|
}
|
|
|
|
/* Repeating and Expanding sections */
|
|
|
|
.repcontainer[data-groupname="repeating_bonds"] .repitem,
|
|
.repcontainer[data-groupname="repeating_edges"] .repitem,
|
|
.repcontainer[data-groupname="repeating_dreadpowers"] .repitem,
|
|
.repcontainer[data-groupname="repeating_spells"] .repitem,
|
|
.repcontainer[data-groupname="repeating_advances"] .repitem,
|
|
.repcontainer[data-groupname="repeating_commonconditions"] .repitem,
|
|
.repcontainer[data-groupname="repeating_health"] .repitem,
|
|
.repcontainer[data-groupname="repeating_contacts"] .repitem,
|
|
.repcontainer[data-groupname="repeating_relationships"] .repitem,
|
|
.repcontainer[data-groupname="repeating_equipment"] .repitem,
|
|
.repcontainer[data-groupname="repeating_equipment-tags"] .repitem,
|
|
.repcontainer[data-groupname="repeating_notes"] .repitem {
|
|
display: grid;
|
|
grid-template-rows: auto;
|
|
grid-template-columns: auto 52px;
|
|
grid-template-areas:
|
|
". ."
|
|
"expandable expandable";
|
|
row-gap: 5px;
|
|
column-gap: 3px;
|
|
}
|
|
|
|
.repcontainer[data-groupname="repeating_bonds"] .repitem .expandable,
|
|
.repcontainer[data-groupname="repeating_edges"] .repitem .expandable,
|
|
.repcontainer[data-groupname="repeating_dreadpowers"] .repitem .expandable,
|
|
.repcontainer[data-groupname="repeating_spells"] .repitem .expandable,
|
|
.repcontainer[data-groupname="repeating_advances"] .repitem .expandable,
|
|
.repcontainer[data-groupname="repeating_commonconditions"] .repitem .expandable,
|
|
.repcontainer[data-groupname="repeating_health"] .repitem .expandable,
|
|
.repcontainer[data-groupname="repeating_contacts"] .repitem .expandable,
|
|
.repcontainer[data-groupname="repeating_relationships"] .repitem .expandable,
|
|
.repcontainer[data-groupname="repeating_equipment"] .repitem .expandable,
|
|
.repcontainer[data-groupname="repeating_equipment-tags"] .repitem .expandable,
|
|
.repcontainer[data-groupname="repeating_notes"] .repitem .expandable {
|
|
grid-area: expandable;
|
|
}
|
|
|
|
/* Style the dots */
|
|
.dots {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
/* Configure the button styling to make it look like a radio button. */
|
|
button.dot {
|
|
padding: 0;
|
|
border: solid 1px #a8a8a8;
|
|
cursor: pointer;
|
|
width: 14px;
|
|
height: 14px;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
button.dot > span {
|
|
width: 6px;
|
|
height: 6px;
|
|
border-radius: 50%;
|
|
background: buttontext;
|
|
}
|
|
|
|
button.zero-dot > span {
|
|
width: auto;
|
|
height: auto;
|
|
background: none;
|
|
}
|
|
|
|
/* Hide the "checked" section of the radio if the hidden attribute value is greater than the button value */
|
|
input.dot[value="0"] ~ button.gt-0 > span.checked {
|
|
display: none;
|
|
}
|
|
input.dot[value="1"] ~ button.gt-1 > span.checked {
|
|
display: none;
|
|
}
|
|
input.dot[value="2"] ~ button.gt-2 > span.checked {
|
|
display: none;
|
|
}
|
|
input.dot[value="3"] ~ button.gt-3 > span.checked {
|
|
display: none;
|
|
}
|
|
input.dot[value="4"] ~ button.gt-4 > span.checked {
|
|
display: none;
|
|
}
|
|
input.dot[value="5"] ~ button.gt-5 > span.checked {
|
|
display: none;
|
|
}
|
|
input.dot[value="6"] ~ button.gt-6 > span.checked {
|
|
display: none;
|
|
}
|
|
input.dot[value="7"] ~ button.gt-7 > span.checked {
|
|
display: none;
|
|
}
|
|
input.dot[value="8"] ~ button.gt-8 > span.checked {
|
|
display: none;
|
|
}
|
|
input.dot[value="9"] ~ button.gt-9 > span.checked {
|
|
display: none;
|
|
}
|
|
input.dot[value="10"] ~ button.gt-10 > span.checked {
|
|
display: none;
|
|
}
|
|
input.dot[value="11"] ~ button.gt-11 > span.checked {
|
|
display: none;
|
|
}
|
|
input.dot[value="12"] ~ button.gt-12 > span.checked {
|
|
display: none;
|
|
}
|
|
|
|
/* Collapsible sections */
|
|
|
|
input.toggle-more + button {
|
|
font-family: 'Courier', cursive;
|
|
text-transform: uppercase;
|
|
color: #fff;
|
|
font-weight: 700;
|
|
margin-bottom: 0px;
|
|
padding: 2px 6px;
|
|
font-size: 12px;
|
|
font-weight: 400;
|
|
line-height: 14px;
|
|
border-style: none;
|
|
border-radius: 6px;
|
|
text-shadow: none !important;
|
|
box-shadow: none !important;
|
|
background-image: none;
|
|
background-color: #333;
|
|
}
|
|
|
|
input.toggle-more[value="0"] + button + div.expandable {
|
|
display: none;
|
|
}
|
|
|
|
input.toggle-more[value="1"] + button > span.more,
|
|
input.toggle-more[value="0"] + button > span.less {
|
|
display: none;
|
|
}
|
|
|
|
|
|
/* Roll template styling */
|
|
.sheet-rolltemplate-skillroll .sheet-outer,
|
|
.sheet-rolltemplate-path .sheet-outer,
|
|
.sheet-rolltemplate-TWD .sheet-outer,
|
|
.sheet-rolltemplate-custompath .sheet-outer {
|
|
background: url('https://raw.githubusercontent.com/roll20/roll20-character-sheets/refs/heads/master/Curseborne/images/roll_background.png');
|
|
background-repeat: no-repeat;
|
|
background-position: center center;
|
|
background-size: cover;
|
|
padding: 10px;
|
|
}
|
|
|
|
.sheet-rolltemplate-skillroll .sheet-inner,
|
|
.sheet-rolltemplate-path .sheet-inner,
|
|
.sheet-rolltemplate-TWD .sheet-inner,
|
|
.sheet-rolltemplate-custompath .sheet-inner {
|
|
background-color: rgba(255,255,255,0.7);
|
|
padding: 10px 5px;
|
|
}
|
|
|
|
.sheet-rolltemplate-skillroll .sheet-results,
|
|
.sheet-rolltemplate-path .sheet-results,
|
|
.sheet-rolltemplate-custompath .sheet-results {
|
|
display: grid;
|
|
grid-template-rows: auto;
|
|
grid-template-columns: 1fr 1fr;
|
|
grid-gap: 10px;
|
|
}
|
|
|
|
.sheet-rolltemplate-skillroll .sheet-inner p:last-child,
|
|
.sheet-rolltemplate-path .sheet-inner p:last-child,
|
|
.sheet-rolltemplate-custompath .sheet-inner p:last-child {
|
|
margin-bottom: 0px;
|
|
}
|
|
|
|
.sheet-rolltemplate-skillroll .sheet-outer .sheet-header,
|
|
.sheet-rolltemplate-path .sheet-outer .sheet-header,
|
|
.sheet-rolltemplate-TWD .sheet-outer .sheet-header,
|
|
.sheet-rolltemplate-custompath .sheet-outer .sheet-header {
|
|
background: url('https://raw.githubusercontent.com/roll20/roll20-character-sheets/refs/heads/master/Curseborne/images/roll_header.png');
|
|
background-size: contain;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
height: 220px;
|
|
padding: 3px 25px;
|
|
margin-bottom: 10px;
|
|
display: grid;
|
|
grid-template-rows: 9fr 10fr;
|
|
grid-template-columns: 1fr;
|
|
grid-template-areas:
|
|
"."
|
|
"header";
|
|
align-items: center;
|
|
}
|
|
|
|
.sheet-rolltemplate-skillroll .sheet-outer .sheet-header h4,
|
|
.sheet-rolltemplate-path .sheet-outer .sheet-header h4,
|
|
.sheet-rolltemplate-TWD .sheet-outer .sheet-header h4,
|
|
.sheet-rolltemplate-custompath .sheet-outer .sheet-header h4 {
|
|
font-family: 'Montserrat', sans-serif;
|
|
text-transform: uppercase;
|
|
color: #fff;
|
|
font-size: 1.2rem;
|
|
font-weight: 600;
|
|
line-height: 2.4rem;
|
|
grid-area: header;
|
|
}
|
|
|
|
.sheet-rolltemplate-TWD .sheet-inner h3,
|
|
.sheet-rolltemplate-TWD .sheet-inner h4 {
|
|
text-align: center;
|
|
font-weight: 400;
|
|
}
|
|
|
|
.sheet-rolltemplate-TWD .sheet-inner h3 {
|
|
margin: 20px;
|
|
font-family: 'Montserrat', sans-serif;
|
|
font-size: 2.2rem;
|
|
line-height: 2.6rem;
|
|
}
|
|
|
|
.sheet-rolltemplate-TWD .sheet-inner h4 {
|
|
margin: 20px;
|
|
color: #c21a1f;
|
|
font-family: 'Special Elite', cursive;
|
|
font-size: 1.8rem;
|
|
}
|
|
|
|
/* Responsive CSS */
|
|
@media only screen and (max-width: 480px) {
|
|
.wrapper {
|
|
grid-template-columns: 1fr 1fr;
|
|
grid-template-areas:
|
|
"logo logo"
|
|
"header-general header-general"
|
|
"skills skills"
|
|
"attributes attributes"
|
|
"entanglement entanglement"
|
|
"aspirations aspirations"
|
|
"edges edges"
|
|
"spells spells"
|
|
"spells spells"
|
|
"damnation inheritance"
|
|
"torments torments"
|
|
"health health"
|
|
"bonds bonds"
|
|
"contacts contacts"
|
|
"equipment equipment"
|
|
"footer-general footer-general";
|
|
}
|
|
|
|
.logo img {
|
|
max-width: 90%;
|
|
}
|
|
|
|
.skill-list {
|
|
grid-template-columns: auto;
|
|
}
|
|
|
|
.char-attributes > div {
|
|
grid-template-columns: 1fr 1fr;
|
|
grid-template-areas:
|
|
|
|
"intellect-label intellect-dots"
|
|
"might-label might-dots"
|
|
"presence-label presence-dots"
|
|
"cunning-label cunning-dots"
|
|
"dexterity-label dexterity-dots"
|
|
"manipulation-label manipulation-dots"
|
|
"resolve-label resolve-dots"
|
|
"stamina-label stamina-dots"
|
|
"composure-label composure-dots";
|
|
}
|
|
|
|
|
|
.char-entanglement > div {
|
|
grid-template-columns: 1fr 2fr;
|
|
grid-template-areas:
|
|
"entanglement-label entanglement-dots"
|
|
"curse-label curse-dots";
|
|
}
|
|
|
|
.footer-general {
|
|
grid-template-columns: 1fr 1fr;
|
|
grid-template-areas:
|
|
"general-button notes-button"
|
|
"general-tab general-tab"
|
|
"notes-tab notes-tab";
|
|
}
|
|
|
|
.tabstoggle[value="general"] ~ div.tab-general {
|
|
display: grid;
|
|
grid-template-rows: auto;
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.tab-general .left {
|
|
display: grid;
|
|
grid-template-rows: auto;
|
|
grid-template-columns: 1fr;
|
|
column-gap: 0px;
|
|
row-gap: 5px;
|
|
}
|
|
}
|
|
|
|
/* Hide actual dot/checkbox */
|
|
input.sheet-defaultRadioBox,
|
|
input.sheet-defaultCheckBox
|
|
{
|
|
position: absolute;
|
|
opacity: 0;
|
|
width:15px;
|
|
cursor: pointer;
|
|
z-index: 1;
|
|
margin-top: 6px;
|
|
}
|
|
|
|
/* Styles common to fake dot and checkbox */
|
|
input.sheet-defaultRadioBox + span::before,
|
|
input.sheet-defaultCheckBox + span::before
|
|
{
|
|
border: solid 1px #a8a8a8;
|
|
line-height: 14px;
|
|
text-align: middle;
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
|
|
-moz-box-shadow: 0 0 2px #ccc;
|
|
-webkit-box-shadow: 0 0 2px #ccc;
|
|
box-shadow: 0 0 2px #ccc;
|
|
|
|
background: #e4d2bd
|
|
background: -moz-radial-gradient(#f6f6f6, #dfdfdf);
|
|
background: -webkit-radial-gradient(#f6f6f6, #dfdfdf);
|
|
background: -ms-radial-gradient(#f6f6f6, #dfdfdf);
|
|
background: -o-radial-gradient(#f6f6f6, #dfdfdf);
|
|
background: radial-gradient(#f6f6f6, #dfdfdf);
|
|
}
|
|
|
|
/* Styles unique to fake dot (checked or left of checked) */
|
|
input.sheet-defaultRadioBox + span::before
|
|
{
|
|
content: "•";
|
|
width: 12px;
|
|
height: 12px;
|
|
font-size: 36px;
|
|
|
|
-moz-border-radius: 50%;
|
|
-webkit-border-radius: 50%;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
/* Styles unique to fake checkbox (unchecked) */
|
|
input.sheet-defaultCheckBox + span::before
|
|
{
|
|
position:relative;
|
|
content: "";
|
|
opacity: .25;
|
|
width: 14px;
|
|
height: 14px;
|
|
font-size: 12px;
|
|
|
|
-moz-border-radius: 3px;
|
|
-webkit-border-radius: 3px;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
/* Styles unique to fake checkbox (checked) */
|
|
input.sheet-defaultCheckBox:checked + span::before
|
|
{
|
|
content: "✖";
|
|
color: #a00;
|
|
|
|
-moz-box-shadow: 0 0 2px transparent;
|
|
-webkit-box-shadow: 0 0 2px transparent;
|
|
box-shadow: 0 0 2px transparent;
|
|
}
|
|
|
|
/* Remove dot from all radios _after_ selected one */
|
|
input.sheet-defaultRadioBox:checked ~ input.sheet-defaultRadioBox + span::before
|
|
{
|
|
content: "";
|
|
}
|
|
|
|
input.sheet-zeroo:checked + span::before
|
|
{
|
|
opacity: 0;
|
|
}
|
|
|
|
input.sheet-zeroo:hover + span::before
|
|
{
|
|
opacity: 1;
|
|
}
|
|
|
|
input.sheet-zeroo+ span::before
|
|
{
|
|
font-size: 12px;
|
|
content: "✖";
|
|
opacity: 0.25;
|
|
}
|
|
|
|
/* Horizontal Rule */
|
|
hr{
|
|
border: 1px solid black;
|
|
}
|
|
|
|
input.armor-toggle[value="0"] + div.armor-hide {
|
|
display: none;
|
|
}
|
|
|
|
input.bloodied-toggle[value="0"] + div.bloodied-hide {
|
|
display: none;
|
|
}
|
|
|
|
input.wounded-toggle[value="0"] + div.wounded-hide {
|
|
display: none;
|
|
}
|
|
|
|
input.maimed-toggle[value="0"] + div.maimed-hide {
|
|
display: none;
|
|
}
|
|
|
|
input.neardeath-toggle[value="0"] + div.neardeath-hide {
|
|
display: none;
|
|
}
|
|
|
|
/* configure the tab buttons */
|
|
.charsheet .sheet-character,
|
|
.charsheet .sheet-journal,
|
|
.charsheet .sheet-configuration {
|
|
display: none;
|
|
}
|
|
|
|
/* style the active button */
|
|
.charsheet .sheet-tabstoggle[value="character"] ~ div .sheet-button0 {font-family: 'Montserrat', sans-serif; text-transform: uppercase; background: transparent; color: #333; font-weight: 700; margin-left: 3px; margin-bottom: 0px; padding: 0px; font-size: 14px; line-height: 16px; box-sizing: content-box; outline: 2px solid red;}
|
|
.charsheet .sheet-tabstoggle[value="journal"] ~ div .sheet-button1 {font-family: 'Montserrat', sans-serif; text-transform: uppercase; background: transparent; color: #333; font-weight: 700; margin-left: 3px; margin-bottom: 0px; padding: 0px; font-size: 14px; line-height: 16px; box-sizing: content-box; outline: 2px solid red;}
|
|
.charsheet .sheet-tabstoggle[value="configuration"] ~ div .sheet-button2 {font-family: 'Montserrat', sans-serif; text-transform: uppercase; background: transparent; color: #333; font-weight: 700; margin-left: 3px; margin-bottom: 0px; padding: 0px; font-size: 14px; line-height: 16px; box-sizing: content-box; outline: 2px solid red;}
|
|
|
|
/* show the selected tab */
|
|
.charsheet .sheet-tabstoggle[value="character"] ~ div.sheet-character,
|
|
.charsheet .sheet-tabstoggle[value="journal"] ~ div.sheet-journal,
|
|
.charsheet .sheet-tabstoggle[value="configuration"] ~ div.sheet-configuration {
|
|
display: block;
|
|
}
|
|
|
|
/* --- Roll options modal --- */
|
|
|
|
.charsheet input.sheet-roll-dialog-toggle {
|
|
display: none;
|
|
}
|
|
|
|
.charsheet .sheet-roll-modal {
|
|
display: none;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: 9999;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.charsheet input.sheet-roll-dialog-toggle:checked ~ .sheet-roll-modal {
|
|
display: flex;
|
|
}
|
|
|
|
.charsheet .sheet-roll-modal-backdrop {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: rgba(0, 0, 0, 0.55);
|
|
}
|
|
|
|
.charsheet .sheet-roll-modal-content {
|
|
position: relative;
|
|
background: #f5f0ea;
|
|
border: 2px solid #333;
|
|
border-radius: 4px;
|
|
padding: 24px 28px;
|
|
min-width: 280px;
|
|
box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5);
|
|
z-index: 1;
|
|
}
|
|
|
|
.charsheet .sheet-roll-modal-title {
|
|
margin: 0 0 16px;
|
|
font-size: 1.4rem;
|
|
letter-spacing: 1px;
|
|
}
|
|
|
|
.charsheet .sheet-roll-modal-field {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 12px;
|
|
gap: 12px;
|
|
}
|
|
|
|
.charsheet .sheet-roll-modal-field label {
|
|
font-family: 'Montserrat', sans-serif;
|
|
font-weight: 700;
|
|
font-size: 13px;
|
|
text-transform: uppercase;
|
|
color: #333;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.charsheet .sheet-roll-modal-field select,
|
|
.charsheet .sheet-roll-modal-field input[type="number"] {
|
|
flex: 1;
|
|
}
|
|
|
|
.charsheet .sheet-roll-modal-buttons {
|
|
display: flex;
|
|
gap: 10px;
|
|
margin-top: 20px;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.charsheet .sheet-roll-modal-buttons button[type="action"] {
|
|
font-family: 'Montserrat', sans-serif;
|
|
font-weight: 700;
|
|
font-size: 13px;
|
|
text-transform: uppercase;
|
|
padding: 6px 16px;
|
|
border: 2px solid #333;
|
|
border-radius: 3px;
|
|
cursor: pointer;
|
|
background: #333;
|
|
color: #fff;
|
|
}
|
|
|
|
.charsheet .sheet-roll-modal-buttons button[type="action"]:last-child {
|
|
background: transparent;
|
|
color: #333;
|
|
}
|
|
|
|
/* --- Roll template result rows --- */
|
|
|
|
.sheet-rolltemplate-skillroll .sheet-roll-label {
|
|
font-family: 'Montserrat', sans-serif;
|
|
font-weight: 700;
|
|
font-size: 11px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
color: #555;
|
|
align-self: center;
|
|
}
|
|
|
|
.sheet-rolltemplate-skillroll .sheet-curse-label {
|
|
color: #8b0000;
|
|
}
|
|
|
|
.sheet-rolltemplate-skillroll .sheet-total-label {
|
|
color: #fff;
|
|
font-size: 12px;
|
|
border-top: 1px solid #ccc;
|
|
padding-top: 6px;
|
|
margin-top: 2px;
|
|
}
|
|
|
|
|
|
.sheet-rolltemplate-skillroll em.sheet-bonus-label {
|
|
font-size: 11px;
|
|
color: #666;
|
|
font-style: italic;
|
|
}
|