@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 */