Files
roll20-character-sheets/d20age/d20age.css
T
2025-05-19 09:34:42 -03:00

1076 lines
22 KiB
CSS

@import url("https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&family=Mali:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;1,200;1,300;1,400;1,500;1,600;1,700&display=swap");
/* TABS */
.sheet-character,
.sheet-magic,
.sheet-equipment,
.sheet-retainers,
.sheet-notes {
display: none;
}
input[name="attr_sheetTab"][value="character"] ~ div.sheet-character,
input[name="attr_sheetTab"][value="magic"] ~ div.sheet-magic,
input[name="attr_sheetTab"][value="equipment"] ~ div.sheet-equipment,
input[name="attr_sheetTab"][value="retainers"] ~ div.sheet-retainers,
input[name="attr_sheetTab"][value="notes"] ~ div.sheet-notes {
display: flex !important;
padding: 30px 20px;
background: repeating-linear-gradient(
to bottom,
#f9f9f9,
#f9f9f9 31px,
#ddd 31px,
#ddd 33px
);
}
.sheet-button-select {
gap: 3px;
}
.sheet-button-select button {
border: unset !important;
border-radius: 8px 8px 0px 0px;
font-weight: bold;
color: #333;
background-color: #ccc;
text-transform: uppercase;
outline: unset !important;
padding: 5px 10px;
}
.sheet-button-select button:focus {
outline: unset !important;
}
input[name="attr_sheetTab"][value="character"]
~ .sheet-button-select
button[name="act_character"],
input[name="attr_sheetTab"][value="magic"]
~ .sheet-button-select
button[name="act_magic"],
input[name="attr_sheetTab"][value="equipment"]
~ .sheet-button-select
button[name="act_equipment"],
input[name="attr_sheetTab"][value="retainers"]
~ .sheet-button-select
button[name="act_retainers"],
input[name="attr_sheetTab"][value="notes"]
~ .sheet-button-select
button[name="act_notes"] {
background: #f9f9f9;
}
/* END OF TABS */
/* OVERRIDE */
.ui-dialog .charsheet {
background-color: #1f1f1f;
}
.ui-dialog .charsheet .repcontainer .repitem .itemcontrol .repcontrol_del {
font-family: "Pictos" !important;
}
/* END OF OVERRIDE */
/* GENERAL */
.sheet-character div,
.sheet-magic div,
.sheet-equipment div,
.sheet-retainers div {
display: flex;
flex-wrap: wrap;
width: 100%;
box-sizing: border-box;
}
@media (max-width: 480px) {
img {
display: none;
}
}
img {
height: 132px;
}
input {
width: 100% !important;
box-sizing: border-box !important;
accent-color: purple !important;
font-family: "Caveat";
font-size: 20px !important;
font-weight: 700 !important;
border: none !important;
background-color: transparent !important;
padding: unset !important;
min-width: 40px !important;
}
textarea {
font-size: 20px !important;
font-weight: 700 !important;
box-sizing: border-box;
line-height: 33px;
font-family: "Caveat";
margin-bottom: unset;
background: unset;
border: unset;
resize: none;
scrollbar-width: thin;
scrollbar-color: darkgray lightgray;
}
h2 {
line-height: 33px;
}
h3 {
text-align: center;
font-weight: 900;
text-transform: uppercase;
box-sizing: border-box;
font-family: "Caveat";
line-height: 33px;
}
label {
display: flex !important;
flex-direction: row !important;
padding: unset !important;
margin: unset !important;
gap: 10px;
box-sizing: border-box !important;
white-space: nowrap !important;
text-transform: uppercase !important;
box-sizing: border-box;
font-family: "Caveat";
color: #a3a3a3 !important;
font-weight: 900 !important;
height: 33px;
align-items: flex-end !important;
font-size: 18px !important;
}
fieldset {
display: flex;
flex-direction: column;
}
span {
background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/d20age/images/pencil-scribble-banner-3.png");
background-size: auto 38px;
background-position: center;
color: white;
vertical-align: middle;
text-align: center;
border-radius: 2px;
padding: 5px 10px;
box-sizing: border-box !important;
font-family: "Caveat";
font-size: 20px !important;
height: 28px;
justify-content: center !important;
align-items: center !important;
display: flex;
}
select {
margin: unset !important;
box-sizing: border-box;
font-family: "Caveat";
font-size: 18px;
padding: unset !important;
background-color: transparent !important;
border: unset !important;
}
input[type="checkbox"] {
width: 15px !important;
}
.btn {
margin: 0px !important;
font-size: 13px !important;
line-height: 18px !important;
color: #333333 !important;
text-align: center !important;
text-shadow: 0 !important;
vertical-align: middle !important;
background-image: unset !important;
background-repeat: unset !important;
box-shadow: unset !important;
cursor: pointer !important;
padding: 4px 10px !important;
border-width: 2px !important;
border-color: #333333 !important;
box-sizing: border-box;
font-family: "Caveat";
}
.attributes input,
.defenses-line input,
.movement-line input,
.thac0-grid input,
.weapons input,
.weapons select {
border-width: none;
}
.attribute-input,
.defenses-line input,
.movement-line input,
.thac0-grid input,
.weapons input,
.weapons select,
.magic-grid input {
border-color: none;
}
/* END OF GENERAL */
/* SHEETS */
.sheet-character,
.sheet-magic,
.sheet-equipment,
.sheet-retainers,
.sheet-notes {
padding: 20px 10px;
}
/* END OF SHEETS */
/* SHEET-CHARACTER */
.sheet-character {
flex-direction: column;
gap: 33px;
}
.logo-and-header {
flex-direction: row;
}
.header {
flex: 4;
flex-direction: column;
}
.header-line {
flex-direction: row !important;
align-items: flex-end;
/* gap: 5px; */
line-height: 33px;
}
.header-line label {
flex: 1;
justify-content: center;
align-items: center;
}
.attributes-saves-and-avatar {
align-items: flex-start;
gap: 33px;
}
.attributes {
flex: 1;
justify-content: center;
margin: unset !important;
}
.attributes-container {
flex: 0;
flex-direction: column;
}
.attributes-content {
flex-direction: column;
}
.attributes-line {
flex-wrap: nowrap !important;
align-items: flex-end !important;
}
.attributes input {
width: 40px !important;
text-align: center;
}
.saves {
flex: 1;
justify-content: center;
height: 264px !important;
}
.saves-container {
flex: 0;
flex-direction: column;
}
.saves-content {
flex-direction: column;
gap: 5px;
padding: 20px;
border-radius: 4px;
background: linear-gradient(
145deg,
#fffcab,
#fffb94
);
box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.3),
1px 1px 2px rgba(255, 255, 255, 0.5) inset;
transform: rotate(-1.5deg);
}
.saves-line {
align-items: center;
}
.saves-line label {
flex: 1;
}
.saves-line button {
font-size: 15.6px !important;
background-color: transparent !important;
font-weight: 700;
}
.saves-input-black-background {
background-color: #333;
display: flex;
align-items: center;
justify-content: center;
width: 45px !important;
height: 45px !important;
}
.saves-line input {
min-width: unset !important;
border-radius: 17px;
padding: 5px;
text-align: center;
width: 33px !important;
height: 33px !important;
border: 2px solid #333 !important;
}
.avatarContainer {
flex: 1;
flex-direction: column;
align-items: center;
}
.art-container {
margin-top: 33px;
height: 231px;
width: 231px !important;
padding: 15px;
border-radius: 4px;
background-color: #fff;
box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.3),
1px 1px 2px rgba(255, 255, 255, 0.5) inset;
transform: rotate(-0.5deg);
}
.art-container::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(
135deg,
rgba(0, 0, 0, 0) 0%,
rgba(0, 0, 0, 0.04) 60%,
rgba(0, 0, 0, 0.08) 100%
);
pointer-events: none;
z-index: 1;
border-radius: 4px;
}
.tape {
width: 198px !important;
height: 30px;
background: linear-gradient(
135deg,
rgba(255, 255, 255, 0.7) 0%,
rgba(200, 200, 200, 0.3) 40%,
rgba(255, 255, 255, 0.7) 70%,
rgba(200, 200, 200, 0.3) 100%
);
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 4px;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
position: absolute;
top: -18px;
transform: rotate(-1deg);
opacity: 0.9;
}
.tape::before,
.tape::after {
content: '';
position: absolute;
width: 10px;
height: 2px;
background: rgba(0, 0, 0, 0.1);
top: 5px;
}
.tape::before {
left: 10px;
transform: rotate(15deg);
}
.tape::after {
right: 10px;
transform: rotate(-15deg);
}
.art {
border-radius: 8px;
background-image: url(@{character_name|avatar});
background-position: flex-start;
background-size: cover;
background-repeat: no-repeat;
}
.defenses,
.movement,
.movement-content {
flex: 1;
flex-direction: column;
}
.defenses-line label,
.movement-line label {
flex: 1;
justify-content: space-between;
}
.defenses-line input,
.movement-line input {
width: 45px !important;
text-align: center;
}
.saves-line,
.defenses-line,
.movement-line {
flex-wrap: nowrap !important;
gap: 5px;
}
.movement-line {
align-items: flex-end;
}
.movement-line select {
width: 80px !important;
}
.movement-and-thac0 {
gap: 33px;
align-items: flex-start;
}
.languages-and-defenses {
flex: 1;
gap: 33px;
}
.abilities h3,
.languages h3 {
text-decoration: underline solid #333 2px;
text-underline-offset: 4px;
}
.abilities textarea,
.languages textarea {
height: 99px;
text-align: center;
}
.literate label {
flex: 1;
justify-content: space-around;
color: #333 !important;
}
.abilities-container,
.languages-container,
.thac0 {
flex: 1;
flex-direction: column;
}
.abilities-container,
.languages-container {
justify-content: center;
align-items: center;
}
.abilities {
justify-content: center;
}
.languages {
width: 250px !important;
justify-content: center;
}
.languages input {
margin-bottom: 5px;
}
.thac0 {
flex-direction: column;
flex: 1;
gap: 33px;
}
.thac0-and-ab {
justify-content: space-between;
}
.thac0-and-ab label {
flex: 1;
}
.thac0-grid div {
flex: 1;
flex-direction: column;
justify-content: center;
padding-top: 5px;
gap: 5px;
}
.thac0-grid span {
height: 28px !important;
width: 28px !important;
display: flex;
align-content: center !important;
justify-content: center;
align-items: center;
}
.thac0-grid input {
text-align: center;
height: 28px !important;
width: 29px !important;
min-width: unset !important;
}
#ac-option {
justify-content: flex-end;
margin-bottom: 33px !important;
}
#ac-option select {
width: 110px;
}
.weapons .repitem {
padding-bottom: 13px !important;
}
.weapons {
justify-content: center;
}
.weapon {
margin-bottom: 20px;
}
.weapon-grid div {
flex-direction: column;
height: 66px;
padding-top: 5px;
gap: 5px;
}
#weapon-roll {
flex: 1 !important;
}
#weapon-roll button {
height: 26.5px;
}
#weapon-roll span {
color: #333;
}
#weapon-name {
flex: 7 !important;
}
#weapon-attack-type {
flex: 3 !important;
}
#weapon-attack-bonus {
flex: 1 !important;
}
#weapon-damage-die {
flex: 2 !important;
}
#weapon-damage-bonus {
flex: 1 !important;
}
#weapon-weight {
flex: 1 !important;
}
#weapon-name input {
padding-left: 10px !important;
}
#weapon-attack-bonus input,
#weapon-damage-die input,
#weapon-damage-bonus input,
#weapon-weight input {
text-align: center;
}
.weapon-grid span {
line-height: 28px;
white-space: nowrap !important;
}
.weapon-grid select {
width: 100% !important;
}
#weapon-description {
height: 33px;
}
/* END OF SHEET-CHARACTER */
/* MAGIC-SHEET */
.sheet-magic {
gap: 33px;
flex-direction: column;
}
.magic-per-circle {
justify-content: space-between;
}
.magic-per-circle label {
flex: 0;
}
.magic-per-circle input {
text-align: center;
}
.sheet-magic .repitem {
margin-bottom: 33px;
}
.magic-grid {
flex-wrap: wrap !important;
}
.magic-grid span {
box-sizing: border-box !important;
padding: unset !important;
}
.magic-grid span {
margin: 4px 0px 1px;
}
.magic-grid div,
.magic-grid input {
height: 33px !important;
}
.magic-grid button {
height: 27px;
margin: 5px 0px 1px !important;
}
.sheet-magic .repcontrol button {
margin-top: 33px !important;
}
.magic-roll {
flex: 1;
}
.magic-roll button {
flex: 1 !important;
}
.magic-memorized {
flex: 1;
}
.magic-name {
flex: 4;
}
.magic-circle {
flex: 1;
}
.magic-description {
height: 66px !important;
}
.magic-effect {
flex: 1;
}
.magic-memorized,
.magic-circle,
.magic-effect {
text-align: center;
}
/* END OF MAGIC-SHEET */
/* EQUIPMENT SHEET */
.sheet-equipment {
flex-direction: column;
gap: 33px;
}
.sheet-equipment .repcontrol button {
margin-top: 33px !important;
}
.encumbrance {
margin-top: -11px;
margin-bottom: 21px;
border: 2px dashed #333;
padding: 10px;
border-radius: 4px;
justify-content: space-around;
}
.encumbrance label,
.encumbrance div {
flex: 0;
}
.encumbrance div {
flex-direction: column !important;
height: 66px;
justify-content: space-around;
align-items: center;
}
.encumbrance label {
text-transform: none !important;
}
.encumbrance input {
width: 65px !important;
text-align: center;
}
.equipment-title-and-encumbrance {
align-items: space-between;
width: 100% !important;
}
.equipment-title-and-encumbrance input {
width: 65px !important;
text-align: center;
}
.equipment-title-and-encumbrance h2,
.equipment-title-and-encumbrance div,
.equipment-title-and-encumbrance label {
flex: 1;
}
.equipment-title-and-encumbrance label {
justify-content: flex-end;
text-transform: lowercase !important;
}
.equipment-title-and-encumbrance div {
gap: 5px;
}
.equipment-grid span {
margin: 4px 0px 1px;
padding: unset !important;
}
.equipment-line input {
height: 33px !important;
}
.equipment-line input[type="checkbox"] {
width: 15px !important;
height: 15px !important;
min-width: none;
align-self: center;
}
.armor,
.items,
.retainer-items,
.mount-items,
.cart-items,
.stowed-items {
margin-bottom: 3px;
}
.armor-note {
padding: 0px 10px;
align-items: center;
justify-content: center;
border-radius: 2px;
box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.3),
1px 1px 2px rgba(255, 255, 255, 0.5) inset;
transform: rotate(-0.5deg);
background: linear-gradient(
145deg,
#fffcab,
#fffb94
);
flex: 0;
height: 33px;;
}
.armor-note label {
font-size: 15px !important;
line-height: 15px !important;
color: #333333 !important;
text-align: center !important;
text-transform: unset !important;
height: 15px !important;
}
.armor-name {
flex: 7;
}
.armor-value {
flex: 1;
text-align: center;
}
.armor-weight {
flex: 1;
text-align: center;
}
.armor-equiped {
flex: 1;
justify-content: center;
padding: 0px 5px;
}
.item-quantity {
flex: 1;
text-align: center;
}
.item-name {
flex: 4;
}
.item-description {
flex: 4;
}
.item-weight {
flex: 1;
text-align: center;
}
.coins {
margin-top: 20px;
margin-bottom: 22px;
border-radius: 4px;
border: 2px dashed #333333;
padding: 10px;
width: fit-content;
gap: 33px;
box-sizing: border-box;
}
.coins label {
flex: 1;
}
.coins input {
width: 85px !important;
text-align: center;
}
/* END OF EQUIPMENT SHEET */
/* RETAINERS SHEET */
.sheet-retainers {
flex-direction: column;
padding: 33px 20px !important;
}
.repeating-retainer {
display: flex !important;
flex-direction: column !important;
}
.sheet-retainers .repcontainer {
gap: 33px
}
.sheet-retainers .repcontrol {
margin-top: 33px;
}
.sheet-retainers .itemcontrol .btn {
position: relative;
z-index: 1;
}
.sheet-retainers .repcontainer .repitem:nth-child(odd) > div {
background: linear-gradient(145deg, #fffcab, #fffb94);
}
.sheet-retainers .repcontainer .repitem:nth-child(even) > div {
background: linear-gradient(145deg, #fff68b, #fff479);
}
#retainer {
border-radius: 4px;
box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.3),
1px 1px 2px rgba(255, 255, 255, 0.5) inset;
transform: rotate(-0.5deg);
padding: 10px;
}
#retainers-header-wrapper {
flex: 1;
}
.retainers-header {
flex: 4;
}
#retainers-header-filler {
flex: 2;
}
.retainers-header input,
.retainers-header select {
background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/d20age/images/pencil-scribble-banner-3.png");
background-size: auto 38px;
background-position: center;
color: white !important;
border: unset !important;
height: 33px !important;
}
.retainers-header input {
padding-left: 10px !important;
}
.retainers-header input::placeholder {
color: #ddd;
opacity: 0.8;
}
#retainer-name {
flex: 4;
}
#retainer-profession {
flex: 3;
}
#retainer-kind {
flex: 3;
}
#retainer-loyalty {
flex: 2;
}
.retainers-info {
flex-direction: column;
gap: 5px;
padding: 10px;
box-sizing: border-box;
}
.retainers-info {
font-weight: 700 !important;
}
.retainers-hd-moral-and-thac0 button {
background-color: unset !important;
background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/d20age/images/pencil-scribble-banner-3.png") !important;
background-size: auto 38px;
background-position: center;
color: white !important;
vertical-align: middle;
text-align: center;
border: unset !important;
border-radius: 2px;
padding: 5px 10px;
box-sizing: border-box !important;
font-family: "Caveat";
font-size: 20px !important;
height: 28px;
justify-content: center !important;
align-items: center !important;
display: flex;
font-weight: bold;
}
.retainers-hd-moral-and-thac0 button::before {
content: none !important;
}
.retainers-hd-moral-and-thac0 button:hover {
background-size: auto 38px !important;
background-position: center !important;
}
.retainers-hd-moral-thac0-and-saves {
flex: 1;
gap: 20px;
}
.retainers-hd-moral-and-thac0 div,
.retainer-saves div {
flex: 1;
flex-direction: column !important;
gap: 0px;
}
.retainer-saves label {
flex: 1;
align-items: center !important;
display: flex !important;
margin-right: 10px !important;
}
.retainers-hd-moral-thac0-and-saves input {
flex: 1;
text-align: center;
}
.retainers-hd-moral-and-thac0 {
flex: 3;
align-items: center;
gap: 10px;
}
.retainer-saves {
flex: 6;
padding: 10px;
border: 2px dashed #333;
border-radius: 4px;
gap: 10px;
align-items: center;
}
.retainer-saves button {
font-size: 20px !important;
background-color: transparent !important;
font-weight: 700;
}
/* END OF RETAINERS SHEET */
/* NOTES */
.notes {
height: 750px !important;
box-sizing: border-box;
border: unset !important;
}
/* END OF NOTES */
/* TEMPLATES*/
.sheet-rolltemplate-simple,
.sheet-rolltemplate-default {
font-family: "Caveat";
font-size: 18px;
}
.sheet-rolltemplate-simple table,
.sheet-rolltemplate-default table {
background-color: unset !important;
border: unset;
background: repeating-linear-gradient(
to bottom,
#f9f9f9,
#f9f9f9 27px,
lightgray 27px,
lightgray 29px
);
width: 100%;
}
.sheet-rolltemplate-simple table,
.sheet-rolltemplate-default table {
border-radius: 0px 0px 8px 8px;
}
.sheet-rolltemplate-simple table {
margin-bottom: 10px;
}
.sheet-rolltemplate-default caption,
.sheet-rolltemplate-simple caption {
font-weight: bold !important;
font-size: 22px !important;
text-align: center !important;
font-family: "Caveat" !important;
padding: 10px !important;
background-color: #f9f9f9 !important;
color: #333 !important;
border-bottom: 2px solid lightskyblue;
border-radius: 8px 8px 0px 0px;
}
.sheet-rolltemplate-simple tr,
.sheet-rolltemplate-default tr {
background-color: unset !important;
height: 28px;
line-height: 28px;
}
.sheet-rolltemplate-simple td,
.sheet-rolltemplate-default td {
padding: 0px 5px !important;
line-height: 29px;
font-weight: 600;
color: #a3a3a3
}
.sheet-rolltemplate-simple td:first-child,
.sheet-rolltemplate-default td:first-child {
text-align: unset !important;
padding-right: unset !important;
color: #636363;
font-weight: bold;
width: 40% !important;
}
.sheet-rolltemplate-simple td span,
.sheet-rolltemplate-default td span {
background-color: transparent !important;
border: none !important;
}
.sheet-rolltemplate-simple h3 {
color: white;
background-color: #333;
line-height: 2.2rem;
padding: 0.75rem;
text-align: center;
}
.sheet-rolltemplate-simple .inlinerollresult.fullfail,
.sheet-rolltemplate-simple .inlinerollresult.fullcrit {
border: 0 none;
}
.sheet-rolltemplate-simple .inlinerollresult {
background-color: transparent;
border: none;
}
.sheet-rolltemplate-simple .fullfail {
color: #f6474e !important;
font-weight: bold;
}
.sheet-rolltemplate-simple .fullcrit {
color:dodgerblue !important;
font-weight: bold;
}
.sheet-rolltemplate-simple .sheet-template-line,
.sheet-rolltemplate-simple .sheet-template-tac0-line,
.sheet-rolltemplate-simple .sheet-template-grid {
background-color: unset !important;
border: unset;
background: repeating-linear-gradient(
to bottom,
#f9f9f9,
#f9f9f9 27px,
lightgray 27px,
lightgray 29px
);
}
.sheet-rolltemplate-simple .sheet-template-tac0-line{
border-radius: 8px 8px 0px 0px;
}
.sheet-rolltemplate-simple .sheet-template-grid {
border-radius: 0px 0px 8px 8px;
}
.sheet-rolltemplate-simple .sheet-template-tac0-line,
.sheet-rolltemplate-simple .sheet-template-line {
justify-content: center;
align-items: center;
display: flex;
height: 29.5px;
}
.sheet-rolltemplate-simple .sheet-template-grid > div {
height: 29.5px;
display: grid;
grid-template-columns: repeat(10, 1fr);
}
.sheet-rolltemplate-simple .sheet-template-grid span {
border: 0 none;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
}
.sheet-rolltemplate-simple .sheet-grid-headers span {
font-weight: bold;
color: #333;
}
.sheet-rolltemplate-simple .sheet-template-tac0-line span,
.sheet-rolltemplate-simple .sheet-template-line span {
font-weight: bold !important;
color: #333 !important;
}
.sheet-rolltemplate-simple .sheet-grid-values {
color: #636363;
}
.sheet-rolltemplate-simple .sheet-grid-values span:last-of-type {
border-right-width: 0;
}
/* END OF TEMPLATES */