Files
roll20-character-sheets/d20age/d20age.css
T
Cesar Machado 7cbbd9afb9 updating images and fixing bonusDamage
Updated image urls now using the ones in roll20 master branch since they are now uploaded.
Updated character sheet preview image as requested by the game designer.
Made some adjustments to the avatar image positioning and gradient darkening effect.
2024-12-13 11:06:02 -03:00

1043 lines
21 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;
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-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 .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 {
margin-bottom: 33px;
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 */