mirror of
https://github.com/Nighthawk42/roll20-character-sheets.git
synced 2026-08-30 11:42:29 +00:00
LilLiteralist
5a3a55be04
Fixed the label in the title changing colors in dark mode Fixed the appearance of the shield characteristics for Firefox
985 lines
35 KiB
CSS
985 lines
35 KiB
CSS
/* GRID
|
|
============================= */
|
|
@import url("https://fonts.googleapis.com/css?family=El+Messiri:wght@500&display=swap");
|
|
div.sheet-tabs div.sheet-col, div.sheet-npc div.sheet-row, div.sheet-character div.sheet-row,
|
|
div.sheet-character div.sheet-col, div.sheet-holdings div.sheet-row,
|
|
div.sheet-holdings div.sheet-col {
|
|
display: inline-grid;
|
|
overflow: hidden;
|
|
grid-auto-rows: min-content;
|
|
grid-column-gap: 1%; }
|
|
|
|
/* Mixins
|
|
============================= */
|
|
/* GLOBALS
|
|
============================= */
|
|
* {
|
|
box-sizing: border-box;
|
|
font-family: sans-serif; }
|
|
|
|
.charsheet button, .charsheet h1, .charsheet h2, .charsheet h3, .sheet-ellipse {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap; }
|
|
|
|
.charsheet {
|
|
padding: 1% 1.5%;
|
|
min-width: 825px;
|
|
width: 97%;
|
|
background-color: white; }
|
|
.charsheet button {
|
|
font-family: serif;
|
|
font-variant: small-caps; }
|
|
.charsheet button:before {
|
|
display: none; }
|
|
.charsheet button:focus, .charsheet button:hover, .charsheet button:active {
|
|
background: none;
|
|
background-color: #ab0f14 !important;
|
|
color: #fff; }
|
|
.charsheet button[type="roll"], .charsheet button[type="action"] {
|
|
background-color: whitesmoke;
|
|
border-bottom: 0.01em solid #666;
|
|
border-bottom-right-radius: 0.01em;
|
|
border-color: #b3b3b3;
|
|
border-radius: 0.25em;
|
|
border-right: 0.02em solid #333333;
|
|
border-style: outset;
|
|
margin: 0.2em !important;
|
|
padding: 0.1em !important;
|
|
box-shadow: 2px 2px 3px 1px #4c4c4c; }
|
|
.charsheet div {
|
|
background-color: transparent;
|
|
width: 100%; }
|
|
.charsheet fieldset {
|
|
background-color: transparent; }
|
|
.charsheet h1 {
|
|
color: #ab0f14;
|
|
font-family: "El Messiri", sans-serif;
|
|
font-size: 1.9em;
|
|
line-height: 1em;
|
|
text-transform: capitalize; }
|
|
.charsheet h2 {
|
|
font-size: 1em;
|
|
line-height: 1.4em;
|
|
text-transform: capitalize;
|
|
margin: auto 0; }
|
|
.charsheet h2.sheet-label {
|
|
border-bottom: 0.15em solid #240202;
|
|
text-align: center;
|
|
margin-left: 3%; }
|
|
.charsheet h3 {
|
|
font-size: 0.9em;
|
|
line-height: 18px;
|
|
text-transform: capitalize; }
|
|
.charsheet img.sheet-logo {
|
|
min-width: 200px;
|
|
width: 50%; }
|
|
.charsheet input[type="text"], .charsheet input[type="number"] {
|
|
background-color: transparent;
|
|
border-bottom: 0.15em solid #240202;
|
|
border-left: 0em;
|
|
border-radius: 0em;
|
|
border-right: 0em;
|
|
border-top: 0em;
|
|
height: 2.1em;
|
|
width: 100%; }
|
|
.charsheet input[type="text"]::placeholder, .charsheet input[type="number"]::placeholder {
|
|
background-color: #fffde7;
|
|
border: 0.1em dotted #ab0f14;
|
|
padding-left: 2px; }
|
|
.charsheet input[type="number"] {
|
|
text-align: center;
|
|
width: 100%; }
|
|
.charsheet input::-webkit-outer-spin-button, .charsheet input::-webkit-inner-spin-button {
|
|
margin: 0; }
|
|
.charsheet label {
|
|
margin-bottom: 0px;
|
|
padding-right: 0px;
|
|
vertical-align: middle; }
|
|
.charsheet select {
|
|
border: 2px solid #ab0f14;
|
|
margin-bottom: 0px;
|
|
text-transform: capitalize;
|
|
vertical-align: bottom;
|
|
width: 100%; }
|
|
.charsheet span {
|
|
word-break: break-word; }
|
|
.charsheet textarea {
|
|
border-bottom: 0.2em dotted #fffde7;
|
|
font-size: 12px;
|
|
font-weight: normal;
|
|
line-height: 18px;
|
|
min-height: 50px;
|
|
overflow-wrap: break-word;
|
|
overflow: hidden;
|
|
overflow: scroll;
|
|
padding: 2px;
|
|
resize: vertical;
|
|
text-align: left;
|
|
vertical-align: top;
|
|
margin-bottom: 0px; }
|
|
|
|
/* GENERIC CLASSES
|
|
============================= */
|
|
div.sheet-personality-traits div.sheet-repeating-container div.sheet-row, div.sheet-character div.sheet-passions div.sheet-repeating-container div.sheet-row, div.sheet-character div.sheet-skills div.sheet-repeating-container div.sheet-row, div.sheet-character div.sheet-squire div.sheet-repeating-container div.sheet-row {
|
|
grid-template-columns: 15px 1fr 3.5em 2.5em; }
|
|
|
|
div.sheet-grid {
|
|
display: inline-grid;
|
|
grid-column-gap: 1%;
|
|
grid-row-gap: 5px; }
|
|
|
|
div.sheet-background {
|
|
background-color: rgba(77, 77, 77, 0.0784314); }
|
|
|
|
.sheet-border {
|
|
border: 0.15em solid #4c4c4c; }
|
|
|
|
.sheet-bottom-border {
|
|
border-bottom: 2px solid #240202; }
|
|
|
|
.sheet-pictos {
|
|
font-family: "pictos"; }
|
|
|
|
.sheet-d20 {
|
|
font-family: "dicefontd20"; }
|
|
|
|
.sheet-font-medium {
|
|
font-size: medium; }
|
|
|
|
.sheet-font-small {
|
|
font-size: small; }
|
|
|
|
.sheet-text-center {
|
|
text-align: center; }
|
|
|
|
.sheet-text-left {
|
|
text-align: left; }
|
|
|
|
.sheet-text-right {
|
|
text-align: right; }
|
|
|
|
.sheet-flex-center {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center; }
|
|
|
|
.sheet-centered {
|
|
align-items: center;
|
|
justify-content: center; }
|
|
|
|
.sheet-align-center {
|
|
align-items: center; }
|
|
|
|
.sheet-align-start {
|
|
align-items: start; }
|
|
|
|
.sheet-align-end {
|
|
align-items: end; }
|
|
|
|
.sheet-bold {
|
|
font-weight: bold; }
|
|
|
|
.sheet-italic {
|
|
font-style: italic; }
|
|
|
|
.sheet-text-primary {
|
|
color: #ab0f14; }
|
|
|
|
.sheet-text-accent {
|
|
color: #1274bd; }
|
|
|
|
.sheet-small-caps {
|
|
font-variant: small-caps; }
|
|
|
|
.sheet-uppercase {
|
|
text-transform: uppercase; }
|
|
|
|
.sheet-capitalize {
|
|
text-transform: capitalize; }
|
|
|
|
div.sheet-2column {
|
|
grid-template-columns: repeat(2, 1fr); }
|
|
|
|
div.sheet-3column {
|
|
grid-template-columns: repeat(3, 1fr); }
|
|
|
|
div.sheet-4column {
|
|
grid-template-columns: repeat(4, 1fr); }
|
|
|
|
div.sheet-5column {
|
|
grid-template-columns: repeat(5, 1fr); }
|
|
|
|
div.sheet-6column {
|
|
grid-template-columns: repeat(6, 1fr); }
|
|
|
|
div.sheet-2autocolumn {
|
|
grid-template-columns: auto 1fr; }
|
|
|
|
div.sheet-3autocolumn {
|
|
grid-template-columns: auto 1fr 10%; }
|
|
|
|
div.sheet-4autocolumn {
|
|
grid-template-columns: auto 1fr auto 1fr; }
|
|
|
|
div.sheet-col-3 {
|
|
grid-template-columns: 15px minmax(150px, 1fr) 3.5em; }
|
|
|
|
div.sheet-gold-left-border {
|
|
border-left: 0.2em solid #ba892c;
|
|
padding-left: 1%; }
|
|
|
|
div.sheet-gold-bottom-border {
|
|
border-bottom: 0.2em solid #ba892c;
|
|
padding-bottom: 2%; }
|
|
|
|
div.sheet-header {
|
|
background-color: #fffde7;
|
|
background-image: url("https://www.transparenttextures.com/patterns/arches.png");
|
|
border-bottom: 2px solid #ab0f14;
|
|
border-top: 2px solid #ab0f14;
|
|
display: grid;
|
|
justify-content: center;
|
|
padding: 4px;
|
|
text-align: center; }
|
|
|
|
div.sheet-collapsible {
|
|
grid-template-columns: 1fr 30px; }
|
|
|
|
.sheet-mt {
|
|
margin-top: 2%; }
|
|
|
|
.sheet-mb {
|
|
margin-bottom: 2%; }
|
|
|
|
.sheet-ml {
|
|
margin-left: 2%; }
|
|
|
|
.sheet-mr {
|
|
margin-right: 2%; }
|
|
|
|
.sheet-auto-flow-col {
|
|
grid-auto-flow: column; }
|
|
|
|
/* TABS
|
|
============================= */
|
|
div.sheet-tabs {
|
|
margin-bottom: 2%;
|
|
grid-template-columns: 1fr 10%; }
|
|
div.sheet-tabs div.sheet-type,
|
|
div.sheet-tabs div.sheet-settings {
|
|
padding: 2% 1%; }
|
|
div.sheet-tabs div.sheet-type {
|
|
grid-template-columns: repeat(4, 1fr); }
|
|
div.sheet-tabs label {
|
|
display: grid; }
|
|
div.sheet-tabs input {
|
|
grid-column: 1;
|
|
height: auto;
|
|
opacity: 0;
|
|
height: 100%;
|
|
width: 80%; }
|
|
div.sheet-tabs input:hover ~ span {
|
|
background-color: #fffde7; }
|
|
div.sheet-tabs input:checked ~ span {
|
|
background-color: #ab0f14;
|
|
color: whitesmoke; }
|
|
div.sheet-tabs span {
|
|
border: 2px solid #ab0f14;
|
|
display: inline-block;
|
|
grid-column: 1;
|
|
min-height: 20px;
|
|
width: 80%;
|
|
padding-top: 1.5%;
|
|
cursor: pointer;
|
|
box-shadow: 2px 2px 3px 1px #4c4c4c;
|
|
border-radius: 5px; }
|
|
div.sheet-tabs div.sheet-settings {
|
|
justify-self: end;
|
|
align-self: center; }
|
|
div.sheet-tabs div.sheet-settings label {
|
|
max-width: 80px;
|
|
justify-self: end; }
|
|
div.sheet-tabs div.sheet-settings span {
|
|
margin: 2%; }
|
|
|
|
input[name="attr_settings_toggle"][value="settings"] ~ div.sheet-tabs div.sheet-type {
|
|
cursor: not-allowed; }
|
|
input[name="attr_settings_toggle"][value="settings"] ~ div.sheet-tabs div.sheet-type label > span {
|
|
cursor: not-allowed;
|
|
opacity: 0.4; }
|
|
.charsheet .sheet-tabs label {
|
|
color: #333; }
|
|
/* `PAGES
|
|
============================= */
|
|
input[name="attr_sheet_type"][value="npc"] ~ div.sheet-tabs {
|
|
margin-bottom: -3%;
|
|
width: 85%; }
|
|
|
|
div.sheet-npc {
|
|
width: 600px; }
|
|
div.sheet-npc div.sheet-name {
|
|
grid-template-columns: 2fr 1fr; }
|
|
div.sheet-npc div.sheet-name h2 {
|
|
margin: 0px; }
|
|
div.sheet-npc input[name="attr_character_name"] {
|
|
font-size: 1.2em;
|
|
font-weight: bolder;
|
|
color: #ab0f14; }
|
|
div.sheet-npc div.sheet-move {
|
|
grid-template-columns: minmax(auto, 145px) 1fr; }
|
|
div.sheet-npc div.sheet-stat-col {
|
|
grid-template-columns: 1fr 5em;
|
|
grid-gap: 1rem; }
|
|
div.sheet-npc div.sheet-3columns {
|
|
grid-template-columns: 1fr 3.5em 2.5em; }
|
|
div.sheet-npc div.sheet-combat-skills {
|
|
grid-gap: 1rem;
|
|
grid-template-columns: repeat(auto-fit, 145px);
|
|
width: 100%; }
|
|
div.sheet-npc div.sheet-combat-skills div.sheet-row {
|
|
grid-template-columns: 1fr 3.5em; }
|
|
div.sheet-npc div.sheet-abilities div.sheet-repeating-container div.sheet-flags {
|
|
grid-template-columns: 1fr 25px; }
|
|
div.sheet-npc div.sheet-abilities div.sheet-repeating-container div.sheet-notes {
|
|
grid-area: 2 / 1 / 3 / -1; }
|
|
div.sheet-npc div.sheet-abilities div.sheet-repeating-container input.sheet-flag + span.sheet-pictos,
|
|
div.sheet-npc div.sheet-abilities div.sheet-repeating-container input.sheet-flag {
|
|
grid-area: 1 / 2 / 2/ 3; }
|
|
div.sheet-npc div.sheet-abilities div.sheet-repeating-container .repitem {
|
|
margin-bottom: 1%; }
|
|
div.sheet-npc div.sheet-description {
|
|
grid-template-columns: 1fr 25px; }
|
|
div.sheet-npc div.sheet-description input[name="attr_flag_description"],
|
|
div.sheet-npc div.sheet-description input[name="attr_flag_description"] + span.sheet-pictos {
|
|
grid-area: 1/2/1/3;
|
|
align-self: start;
|
|
width: 100%;
|
|
height: 25px; }
|
|
div.sheet-npc div.sheet-description textarea[name="attr_description"],
|
|
div.sheet-npc div.sheet-description span[name="attr_description"] {
|
|
grid-area: 1/1/2/2; }
|
|
div.sheet-npc .repcontainer[data-groupname="repeating_skills"],
|
|
div.sheet-npc .repcontainer[data-groupname="repeating_passions"],
|
|
div.sheet-npc .repcontainer[data-groupname="repeating_traits"] {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, 193px);
|
|
gap: 1rem; }
|
|
div.sheet-npc div.sheet-personality-traits .sheet-styled-checkbox {
|
|
visibility: hidden; }
|
|
|
|
div.sheet-attacks input[name="attr_damage"],
|
|
div.sheet-attacks span[name*="damage"] {
|
|
text-align: center; }
|
|
|
|
div.sheet-attacks div.sheet-table.sheet-damage div.sheet-header,
|
|
div.sheet-attacks div.sheet-table.sheet-damage div.sheet-body div.sheet-row {
|
|
grid-template-columns: 2fr 1fr 2.5em; }
|
|
|
|
div.sheet-attacks div.sheet-repeating-container div.sheet-row,
|
|
div.sheet-attacks div.sheet-repeating-container div.sheet-header {
|
|
grid-template-columns: 2fr 1fr 5em 2.5em; }
|
|
|
|
div.sheet-attacks label[data-i18n-title="target value"] {
|
|
visibility: hidden; }
|
|
|
|
div.sheet-attacks input[name="attr_skill"][value*="target"] + label {
|
|
visibility: visible; }
|
|
|
|
div.sheet-attacks select[name="attr_skill"] {
|
|
margin-left: -5px; }
|
|
|
|
div.sheet-attacks h3,
|
|
div.sheet-attacks span[data-i18n*="brawling"],
|
|
div.sheet-attacks span[name*="damage"] {
|
|
color: #000; }
|
|
|
|
div.sheet-personality-traits div.sheet-traits {
|
|
grid-template-columns: 15px 1fr 3.5em 5px 3.5em 1fr 15px; }
|
|
div.sheet-personality-traits div.sheet-traits div.sheet-bold {
|
|
padding: 100% 2%; }
|
|
|
|
div.sheet-equipment span[name="attr_value"],
|
|
div.sheet-equipment input[name="attr_value"] {
|
|
text-align: center; }
|
|
|
|
div.sheet-equipment div.sheet-col {
|
|
grid-template-rows: min-content 1fr; }
|
|
|
|
div.sheet-equipment div.sheet-2autocolumn {
|
|
align-content: end; }
|
|
|
|
div.sheet-equipment span[name="attr_equipment"],
|
|
div.sheet-equipment span[name="attr_category"] {
|
|
min-height: 20px; }
|
|
|
|
div.sheet-equipment div.sheet-category {
|
|
grid-template-columns: 3fr 1fr; }
|
|
|
|
div.sheet-equipment div.sheet-repeating-container div.sheet-flags {
|
|
grid-template-columns: 1fr 25px; }
|
|
|
|
div.sheet-equipment div.sheet-repeating-container div.sheet-notes {
|
|
grid-area: 3 / 1 / 4 / -1; }
|
|
|
|
div.sheet-equipment div.sheet-repeating-container input.sheet-flag + span.sheet-pictos,
|
|
div.sheet-equipment div.sheet-repeating-container input.sheet-flag {
|
|
grid-area: 1 / 2 / 2/ 3; }
|
|
|
|
div.sheet-equipment div.sheet-repeating-container .repitem {
|
|
background-color: #e5dbd4;
|
|
padding: 2% 1%; }
|
|
div.sheet-equipment div.sheet-repeating-container .repitem:nth-of-type(even) {
|
|
background-color: #baa595; }
|
|
|
|
div.sheet-character div.sheet-horse input[type="text"],
|
|
div.sheet-character div.sheet-horse input[type="number"] {
|
|
text-align: center;
|
|
width: 100%; }
|
|
|
|
div.sheet-character div.sheet-horse div.sheet-body {
|
|
grid-template-columns: 1fr 1fr; }
|
|
|
|
div.sheet-character div.sheet-horse div.sheet-attributes {
|
|
grid-column-gap: 5%; }
|
|
|
|
div.sheet-character div.sheet-horse div.sheet-repeating-container div.sheet-row {
|
|
grid-template-columns: 3fr auto 1fr; }
|
|
|
|
div.sheet-character div.sheet-horse input[name="attr_warhorse_armor"] {
|
|
text-align: center; }
|
|
|
|
div.sheet-character div.sheet-horse div.sheet-notes {
|
|
grid-template-columns: 1fr 10px;
|
|
padding: 1% 2%; }
|
|
div.sheet-character div.sheet-horse div.sheet-notes input.sheet-flag,
|
|
div.sheet-character div.sheet-horse div.sheet-notes span.sheet-pictos {
|
|
grid-area: 1/2/2/3; }
|
|
div.sheet-character div.sheet-horse div.sheet-notes textarea,
|
|
div.sheet-character div.sheet-horse div.sheet-notes span.sheet-display {
|
|
grid-area: 1/1/2/2; }
|
|
|
|
div.sheet-character div.sheet-passions div.sheet-row {
|
|
grid-template-columns: 1fr 45% 5%; }
|
|
|
|
div.sheet-character div.sheet-skills {
|
|
grid-row-gap: 5px; }
|
|
div.sheet-character div.sheet-skills div.sheet-body {
|
|
grid-row-gap: 5px;
|
|
grid-auto-flow: column; }
|
|
div.sheet-character div.sheet-skills div.sheet-body div.sheet-subheader {
|
|
grid-column: 1/-1; }
|
|
div.sheet-character div.sheet-skills div.sheet-core-skills {
|
|
grid-template-rows: repeat(10, 1fr); }
|
|
div.sheet-character div.sheet-skills div.sheet-combat-skills {
|
|
grid-template-rows: repeat(7, 1fr); }
|
|
|
|
div.sheet-character div.sheet-squire div.sheet-age {
|
|
grid-template-columns: 1fr 2fr;
|
|
grid-auto-flow: column; }
|
|
|
|
div.sheet-character div.sheet-squire div.sheet-skill {
|
|
grid-template-columns: auto 1fr 30px; }
|
|
|
|
div.sheet-character div.sheet-squire input[name="attr_squire_age"] {
|
|
text-align: center; }
|
|
|
|
div.sheet-character div.sheet-squire div.sheet-notes {
|
|
grid-template-columns: 1fr 10px;
|
|
padding: 1% 2%; }
|
|
div.sheet-character div.sheet-squire div.sheet-notes input.sheet-flag,
|
|
div.sheet-character div.sheet-squire div.sheet-notes span.sheet-pictos {
|
|
grid-area: 1/2/2/3; }
|
|
div.sheet-character div.sheet-squire div.sheet-notes textarea,
|
|
div.sheet-character div.sheet-squire div.sheet-notes span.sheet-display {
|
|
grid-area: 1/1/2/2; }
|
|
|
|
div.sheet-character div.sheet-characteristics div.sheet-core {
|
|
grid-auto-flow: column;
|
|
grid-column-gap: 2%; }
|
|
|
|
div.sheet-character div.sheet-characteristics div.sheet-statistic span {
|
|
color: #000; }
|
|
|
|
div.sheet-character h2 {
|
|
text-overflow: ellipsis;
|
|
width: fit-content; }
|
|
|
|
div.sheet-character textarea {
|
|
height: 50px;
|
|
margin-bottom: 0px; }
|
|
|
|
div.sheet-character div.sheet-info {
|
|
grid-auto-flow: column;
|
|
grid-template-columns: min-content 1fr; }
|
|
|
|
div.sheet-character div.sheet-personal-data div.sheet-age {
|
|
grid-template-columns: 1fr 10% 25%; }
|
|
|
|
div.sheet-character div.sheet-character-body {
|
|
grid-template-columns: 1.65fr 2fr; }
|
|
|
|
div.sheet-character span.sheet-knight {
|
|
display: grid;
|
|
align-content: center; }
|
|
|
|
div.sheet-character div.sheet-current-hit-points {
|
|
grid-row-gap: 5px; }
|
|
div.sheet-character div.sheet-current-hit-points input[name="attr_current_hp"] {
|
|
border: 2px solid #ba892c;
|
|
margin-top: 2%; }
|
|
div.sheet-character div.sheet-current-hit-points input[name="attr_wound"] {
|
|
font-weight: bold; }
|
|
div.sheet-character div.sheet-current-hit-points div.sheet-current-hp div.sheet-headers {
|
|
grid-row-gap: 5%; }
|
|
div.sheet-character div.sheet-current-hit-points div.sheet-debilitated {
|
|
align-content: center;
|
|
gap: 2%; }
|
|
div.sheet-character div.sheet-current-hit-points div.sheet-wounds div.sheet-headers {
|
|
justify-items: center; }
|
|
div.sheet-character div.sheet-current-hit-points div.sheet-wounds div.sheet-headers,
|
|
div.sheet-character div.sheet-current-hit-points div.sheet-wounds div.sheet-repeating-container div.sheet-row {
|
|
grid-template-columns: 1fr 3.5em 3fr; }
|
|
|
|
div.sheet-holdings {
|
|
grid-template-columns: 1fr 2.5fr; }
|
|
div.sheet-holdings div.sheet-family-history div.sheet-row {
|
|
grid-auto-flow: column; }
|
|
div.sheet-holdings div.sheet-family-history textarea {
|
|
margin-top: 1%; }
|
|
div.sheet-holdings div.sheet-character-history div.sheet-events {
|
|
grid-template-columns: 1fr 3em 3.5em 3.5em; }
|
|
div.sheet-holdings div.sheet-character-history input[name*="glory"] {
|
|
text-align: center; }
|
|
|
|
div.sheet-settings h1 {
|
|
padding: 0px; }
|
|
|
|
div.sheet-settings select {
|
|
width: 200px; }
|
|
|
|
div.sheet-settings input[name="attr_settings_toggle"],
|
|
div.sheet-settings input[name="attr_settings_toggle"] + span {
|
|
grid-area: 1 / 1 / 1 / 1; }
|
|
|
|
div.sheet-settings div.sheet-row {
|
|
margin-bottom: 2%; }
|
|
|
|
/* FOOTER
|
|
============================= */
|
|
div.sheet-footer {
|
|
margin-top: 5%;
|
|
font-style: italic;
|
|
font-size: 0.8em;
|
|
text-align: center;
|
|
display: block; }
|
|
div.sheet-footer img {
|
|
margin-right: 5px;
|
|
height: 25px;
|
|
width: 25px; }
|
|
|
|
/* SHOW & HIDE SHEETS
|
|
============================= */
|
|
input[name="attr_sheet_type"]:not([value="character"]) ~ div.sheet-character,
|
|
input[name="attr_settings_toggle"][value="settings"] ~ div.sheet-character, input[name="attr_sheet_type"]:not([value="holdings"]) ~ div.sheet-holdings,
|
|
input[name="attr_settings_toggle"][value="settings"] ~ div.sheet-holdings, input[name="attr_sheet_type"]:not([value="feast record"]) ~ div.sheet-feast-record,
|
|
input[name="attr_settings_toggle"][value="settings"] ~ div.sheet-feast-record, input[name="attr_sheet_type"]:not([value="gamemaster characters"]) ~ div.sheet-gamemaster-characters,
|
|
input[name="attr_settings_toggle"][value="settings"] ~ div.sheet-gamemaster-characters, input[name="attr_sheet_type"]:not([value="npc"]) ~ div.sheet-npc,
|
|
input[name="attr_settings_toggle"][value="settings"] ~ div.sheet-npc, input[name="attr_sheet_type"]:not([value="entourage"]) ~ div.sheet-entourage,
|
|
input[name="attr_settings_toggle"][value="settings"] ~ div.sheet-entourage, input[name="attr_sheet_type"]:not([value="treasure record"]) ~ div.sheet-treasure-record,
|
|
input[name="attr_settings_toggle"][value="settings"] ~ div.sheet-treasure-record, input[name="attr_sheet_type"]:not([value="income worksheet"]) ~ div.sheet-income-worksheet,
|
|
input[name="attr_settings_toggle"][value="settings"] ~ div.sheet-income-worksheet, input[name="attr_sheet_type"]:not([value="land record"]) ~ div.sheet-land-record,
|
|
input[name="attr_settings_toggle"][value="settings"] ~ div.sheet-land-record, input[name='attr_sheet_type'][value='character'] ~ div.sheet-tabs div.sheet-type label.sheet-manor, input[name='attr_sheet_type'][value='holdings'] ~ div.sheet-tabs div.sheet-type label.sheet-manor, input[name='attr_sheet_type'][value='entourage'] ~ div.sheet-tabs div.sheet-type label.sheet-manor, input[name='attr_sheet_type'][value='treasure record'] ~ div.sheet-tabs div.sheet-type label.sheet-character, input[name='attr_sheet_type'][value='income worksheet'] ~ div.sheet-tabs div.sheet-type label.sheet-character, input[name='attr_sheet_type'][value='land record'] ~ div.sheet-tabs div.sheet-type label.sheet-character, input[name="attr_character_type"]:not([value="knight"]) ~ div.sheet-character div.sheet-col div.sheet-row .sheet-knight,
|
|
input[name="attr_character_type"]:not([value="knight"]) ~ div.sheet-character div.sheet-col div.sheet-personal-data div.sheet-row .sheet-knight,
|
|
input[name="attr_character_type"]:not([value="knight"]) ~ div.sheet-character div.sheet-col div.sheet-personality-traits .sheet-knight,
|
|
input[name="attr_character_type"]:not([value="knight"]) ~ div.sheet-character div.sheet-col div.sheet-personality-traits div.sheet-row .sheet-knight,
|
|
input[name="attr_character_type"]:not([value="knight"]) ~ div.sheet-character div.sheet-col div.sheet-equipment-carried .sheet-knight,
|
|
input[name="attr_character_type"]:not([value="knight"]) ~ div.sheet-character div.sheet-col div.sheet-skills .sheet-knight,
|
|
input[name="attr_character_type"]:not([value="knight"]) ~ div.sheet-character div.sheet-col div.sheet-squire .sheet-knight,
|
|
input[name="attr_character_type"]:not([value="knight"]) ~ div.sheet-character div.sheet-col .sheet-knight,
|
|
input[name="attr_character_type"]:not([value="knight"]) ~ div.sheet-character div.sheet-col div.sheet-combat-skills .sheet-knight,
|
|
input[name="attr_character_type"]:not([value="knight"]) ~ div.sheet-character div.sheet-col div.sheet-horse div.sheet-row .sheet-knight,
|
|
input[name="attr_character_type"]:not([value="knight"]) ~ div.sheet-character div.sheet-col div.sheeet-family-history div.sheet-row,
|
|
input[name="attr_character_type"]:not([value="knight"]) ~ div.sheet-character div.sheet-col div.sheet-col .sheet-knight,
|
|
input[name="attr_character_type"]:not([value="knight"]) ~ div.sheet-holdings div.sheet-col div.sheet-row .sheet-knight,
|
|
input[name="attr_character_type"]:not([value="knight"]) ~ div.sheet-holdings div.sheet-col div.sheet-personal-data div.sheet-row .sheet-knight,
|
|
input[name="attr_character_type"]:not([value="knight"]) ~ div.sheet-holdings div.sheet-col div.sheet-personality-traits .sheet-knight,
|
|
input[name="attr_character_type"]:not([value="knight"]) ~ div.sheet-holdings div.sheet-col div.sheet-personality-traits div.sheet-row .sheet-knight,
|
|
input[name="attr_character_type"]:not([value="knight"]) ~ div.sheet-holdings div.sheet-col div.sheet-equipment-carried .sheet-knight,
|
|
input[name="attr_character_type"]:not([value="knight"]) ~ div.sheet-holdings div.sheet-col div.sheet-skills .sheet-knight,
|
|
input[name="attr_character_type"]:not([value="knight"]) ~ div.sheet-holdings div.sheet-col div.sheet-squire .sheet-knight,
|
|
input[name="attr_character_type"]:not([value="knight"]) ~ div.sheet-holdings div.sheet-col .sheet-knight,
|
|
input[name="attr_character_type"]:not([value="knight"]) ~ div.sheet-holdings div.sheet-col div.sheet-combat-skills .sheet-knight,
|
|
input[name="attr_character_type"]:not([value="knight"]) ~ div.sheet-holdings div.sheet-col div.sheet-horse div.sheet-row .sheet-knight,
|
|
input[name="attr_character_type"]:not([value="knight"]) ~ div.sheet-holdings div.sheet-col div.sheeet-family-history div.sheet-row,
|
|
input[name="attr_character_type"]:not([value="knight"]) ~ div.sheet-holdings div.sheet-col div.sheet-col .sheet-knight,
|
|
input[name="attr_character_type"]:not([value="knight"]) ~ div.sheet-entourage div.sheet-row div.sheet-row .sheet-knight,
|
|
input[name="attr_character_type"]:not([value="knight"]) ~ div.sheet-entourage div.sheet-row div.sheet-personal-data div.sheet-row .sheet-knight,
|
|
input[name="attr_character_type"]:not([value="knight"]) ~ div.sheet-entourage div.sheet-row div.sheet-personality-traits .sheet-knight,
|
|
input[name="attr_character_type"]:not([value="knight"]) ~ div.sheet-entourage div.sheet-row div.sheet-personality-traits div.sheet-row .sheet-knight,
|
|
input[name="attr_character_type"]:not([value="knight"]) ~ div.sheet-entourage div.sheet-row div.sheet-equipment-carried .sheet-knight,
|
|
input[name="attr_character_type"]:not([value="knight"]) ~ div.sheet-entourage div.sheet-row div.sheet-skills .sheet-knight,
|
|
input[name="attr_character_type"]:not([value="knight"]) ~ div.sheet-entourage div.sheet-row div.sheet-squire .sheet-knight,
|
|
input[name="attr_character_type"]:not([value="knight"]) ~ div.sheet-entourage div.sheet-row .sheet-knight,
|
|
input[name="attr_character_type"]:not([value="knight"]) ~ div.sheet-entourage div.sheet-row div.sheet-combat-skills .sheet-knight,
|
|
input[name="attr_character_type"]:not([value="knight"]) ~ div.sheet-entourage div.sheet-row div.sheet-horse div.sheet-row .sheet-knight,
|
|
input[name="attr_character_type"]:not([value="knight"]) ~ div.sheet-entourage div.sheet-row div.sheeet-family-history div.sheet-row,
|
|
input[name="attr_character_type"]:not([value="knight"]) ~ div.sheet-entourage div.sheet-row div.sheet-col .sheet-knight, input[name="attr_settings_toggle"]:not([value="settings"]) ~ div.sheet-settings {
|
|
display: none; }
|
|
|
|
div.sheet-character, div.sheet-holdings, div.sheet-feast-record, div.sheet-gamemaster-characters, div.sheet-npc, div.sheet-entourage, div.sheet-treasure-record, div.sheet-income-worksheet, div.sheet-land-record, div.sheet-settings {
|
|
display: inline-grid; }
|
|
|
|
input[name="attr_sheet_type"][value="character"] ~ div.sheet-tabs div.sheet-type {
|
|
grid-template-columns: repeat(4, 1fr); }
|
|
|
|
input[name="attr_sheet_type"][value="holdings"] ~ div.sheet-tabs div.sheet-type {
|
|
grid-template-columns: repeat(4, 1fr); }
|
|
|
|
input[name="attr_sheet_type"][value="entourage"] ~ div.sheet-tabs div.sheet-type {
|
|
grid-template-columns: repeat(4, 1fr); }
|
|
|
|
input[name="attr_sheet_type"][value="treasure record"] ~ div.sheet-tabs div.sheet-type {
|
|
grid-template-columns: repeat(3, 1fr); }
|
|
|
|
input[name="attr_sheet_type"][value="income worksheet"] ~ div.sheet-tabs div.sheet-type {
|
|
grid-template-columns: repeat(3, 1fr); }
|
|
|
|
input[name="attr_sheet_type"][value="land record"] ~ div.sheet-tabs div.sheet-type {
|
|
grid-template-columns: repeat(3, 1fr); }
|
|
|
|
input[name="attr_sheet_type"][value="npc"] ~ div.sheet-tabs div.sheet-type {
|
|
visibility: hidden; }
|
|
|
|
input.sheet-flag {
|
|
z-index: 10;
|
|
opacity: 0; }
|
|
|
|
input.sheet-flag + span.sheet-pictos {
|
|
align-self: center;
|
|
justify-self: center; }
|
|
|
|
input.sheet-flag:checked + span.sheet-pictos {
|
|
color: #832219; }
|
|
|
|
input.sheet-flag:checked ~ span.sheet-display,
|
|
input.sheet-flag:not(checked) ~ textarea,
|
|
input.sheet-flag:not(checked) ~ div.sheet-row input,
|
|
input.sheet-flag:not(checked) ~ div.sheet-notes textarea,
|
|
input.sheet-flag:checked ~ div.sheet-row span.sheet-display {
|
|
display: none; }
|
|
|
|
input.sheet-flag:not(checked) ~ span.sheet-display,
|
|
input.sheet-flag:checked ~ textarea,
|
|
input.sheet-flag:not(checked) ~ div.sheet-row span.sheet-display,
|
|
input.sheet-flag:checked ~ div.sheet-row input,
|
|
input.sheet-flag:checked ~ div.sheet-notes textarea {
|
|
display: inherit; }
|
|
|
|
input[name*="attr_hide_"][value*="hide"] + div,
|
|
input[name*="attr_hide_"][value*="on"] ~ div.sheet-hide {
|
|
display: none; }
|
|
|
|
/* COMPONENTS
|
|
============================= */
|
|
div.sheet-shield {
|
|
border-radius: 50% 50% 50% 50% / 12% 12% 88% 88%;
|
|
border: 5px solid #240202;
|
|
height: 50px;
|
|
width: 50px; }
|
|
div.sheet-shield input[type="number"] {
|
|
font-weight: bolder;
|
|
width: 3em; }
|
|
div.sheet-shield input[type="number"]:placeholder-shown, div.sheet-shield input[type="number"]:hover {
|
|
background-color: #fffde7; }
|
|
div.sheet-shield input[type="number"]::-webkit-outer-spin-button, div.sheet-shield input[type="number"]::-webkit-inner-spin-button {
|
|
-webkit-appearance: none;
|
|
margin: 0; }
|
|
.sheet-shield input[type="number"] {
|
|
/* Necessary for Firefox, which doesn't have the spin button functionality */
|
|
appearance: textfield; }
|
|
|
|
label.sheet-styled-checkbox {
|
|
display: grid;
|
|
align-self: center;
|
|
justify-content: center;
|
|
grid-template-columns: 1fr; }
|
|
label.sheet-styled-checkbox input,
|
|
label.sheet-styled-checkbox span {
|
|
grid-area: 1 / 1 / 1 / 1;
|
|
height: 15px;
|
|
width: 15px;
|
|
position: relative; }
|
|
label.sheet-styled-checkbox span {
|
|
align-content: center;
|
|
border: 2px solid #ab0f14;
|
|
color: transparent;
|
|
display: grid;
|
|
font-size: 0.6em;
|
|
text-align: center; }
|
|
label.sheet-styled-checkbox input {
|
|
opacity: 0;
|
|
z-index: 2; }
|
|
label.sheet-styled-checkbox input[type="checkbox"]:checked + span {
|
|
background-color: #ab0f14;
|
|
color: whitesmoke; }
|
|
|
|
.sheet-switch {
|
|
position: relative;
|
|
display: inline-block;
|
|
width: 50px;
|
|
height: 24px; }
|
|
|
|
/* Hide default HTML checkbox */
|
|
.sheet-switch input {
|
|
opacity: 0;
|
|
width: 0;
|
|
height: 0; }
|
|
|
|
/* The slider */
|
|
.sheet-slider {
|
|
-webkit-transition: .4s;
|
|
background-color: #ccc;
|
|
border-radius: 34px;
|
|
bottom: 0;
|
|
cursor: pointer;
|
|
left: 0;
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
transition: .4s; }
|
|
|
|
.sheet-slider:before {
|
|
-webkit-transition: .4s;
|
|
background-color: white;
|
|
border-radius: 50%;
|
|
bottom: 4px;
|
|
content: "";
|
|
height: 16px;
|
|
left: 4px;
|
|
position: absolute;
|
|
transition: .4s;
|
|
width: 16px; }
|
|
|
|
input:checked + .sheet-slider {
|
|
background-color: black; }
|
|
|
|
input:focus + .sheet-slider {
|
|
box-shadow: 0 0 1px black; }
|
|
|
|
input:checked + .sheet-slider:before {
|
|
-webkit-transform: translateX(26px);
|
|
-ms-transform: translateX(26px);
|
|
transform: translateX(26px); }
|
|
|
|
div.sheet-table {
|
|
display: grid; }
|
|
div.sheet-table input[type="text"],
|
|
div.sheet-table input[type="number"] {
|
|
border-bottom: none;
|
|
color: #240202; }
|
|
div.sheet-table input:placeholder-shown {
|
|
border-bottom: 0.15em solid #240202; }
|
|
div.sheet-table div.sheet-header {
|
|
display: grid;
|
|
background-color: #240202;
|
|
display: grid;
|
|
padding: 2px 5px;
|
|
grid-auto-flow: column; }
|
|
div.sheet-table div.sheet-header h3 {
|
|
color: #fffde7; }
|
|
div.sheet-table div.sheet-body {
|
|
display: grid;
|
|
background-color: #e5dbd4; }
|
|
div.sheet-table div.sheet-body h3 {
|
|
padding-left: 4px;
|
|
padding-right: 4px; }
|
|
div.sheet-table div.sheet-body input[type="text"] {
|
|
height: 100%;
|
|
padding: 0px;
|
|
text-align: center; }
|
|
div.sheet-table div.sheet-body div.sheet-row {
|
|
align-content: center;
|
|
min-height: 25px;
|
|
height: 100%; }
|
|
div.sheet-table div.sheet-body div:nth-of-type(even) {
|
|
background-color: #baa595; }
|
|
div.sheet-table .repitem {
|
|
background-color: #e5dbd4; }
|
|
div.sheet-table .repitem:nth-of-type(even) {
|
|
background-color: #baa595; }
|
|
div.sheet-table .repitem select {
|
|
background-color: transparent;
|
|
border: none;
|
|
color: #240202;
|
|
padding: 0px 2px; }
|
|
div.sheet-table .repitem input[name="attr_name"] {
|
|
color: #240202;
|
|
font-weight: bold; }
|
|
div.sheet-table .repitem input[type="text"] {
|
|
border: none; }
|
|
|
|
.sheet-chevron {
|
|
display: grid;
|
|
grid-auto-flow: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 100%;
|
|
width: 100%; }
|
|
.sheet-chevron input[type="checkbox"],
|
|
.sheet-chevron span {
|
|
grid-column: 1;
|
|
height: 30px;
|
|
position: absolute;
|
|
width: 30px; }
|
|
.sheet-chevron input[type="checkbox"] {
|
|
opacity: 0;
|
|
z-index: 10; }
|
|
.sheet-chevron span {
|
|
color: #832219;
|
|
font-size: 2.5em;
|
|
transform: rotate(180deg);
|
|
transition: transform 0.3s;
|
|
z-index: 1; }
|
|
.sheet-chevron input[type="checkbox"]:checked ~ span {
|
|
grid-column: 1;
|
|
transform: rotate(0deg); }
|
|
|
|
/* ROLL TEMPLATE STYLE
|
|
----------------------------- */
|
|
.sheet-rolltemplate-rolls div.sheet-template-container {
|
|
border: 2px solid #240202;
|
|
border-radius: 0.3em;
|
|
box-shadow: inset 0px 0px 3px 1px #ab0f14;
|
|
text-align: center;
|
|
font-family: "fantasy";
|
|
/* DICE ROLL STYLES
|
|
----------------------------- */ }
|
|
.sheet-rolltemplate-rolls div.sheet-template-container .inlinerollresult.fullfail,
|
|
.sheet-rolltemplate-rolls div.sheet-template-container .inlinerollresult.fullcrit,
|
|
.sheet-rolltemplate-rolls div.sheet-template-container .inlinerollresult.importantroll {
|
|
border: none; }
|
|
.sheet-rolltemplate-rolls div.sheet-template-container .inlinerollresult.fullfail,
|
|
.sheet-rolltemplate-rolls div.sheet-template-container .inlinerollresult.fullcrit {
|
|
color: #240202; }
|
|
.sheet-rolltemplate-rolls div.sheet-template-container .inlinerollresult {
|
|
background-color: transparent;
|
|
border: none;
|
|
font-size: 2em;
|
|
padding: unset; }
|
|
.sheet-rolltemplate-rolls div.sheet-template-container div.sheet-template-header {
|
|
background-color: #fffde7;
|
|
background-image: url("https://www.transparenttextures.com/patterns/arches.png");
|
|
border-bottom: 2px solid #240202;
|
|
color: #ab0f14;
|
|
font-size: 1.5em;
|
|
font-weight: bold;
|
|
padding: 3% 2%;
|
|
text-align: center;
|
|
text-transform: capitalize; }
|
|
.sheet-rolltemplate-rolls div.sheet-template-container div.sheet-template-body {
|
|
color: #240202; }
|
|
.sheet-rolltemplate-rolls div.sheet-template-container div.sheet-template-row {
|
|
background-color: whitesmoke; }
|
|
.sheet-rolltemplate-rolls div.sheet-template-container div.sheet-template-row span.sheet-inlinerollresult {
|
|
color: #ab0f14;
|
|
font-size: 2em;
|
|
font-weight: bold;
|
|
cursor: help;
|
|
padding: 0 3px 0 3px;
|
|
font-weight: bold; }
|
|
.sheet-rolltemplate-rolls div.sheet-template-container div.sheet-template-row span.sheet-percent, .sheet-rolltemplate-rolls div.sheet-template-container div.sheet-template-row span.sheet-template-desc {
|
|
color: #ab0f14;
|
|
font-size: 1em; }
|
|
.sheet-rolltemplate-rolls div.sheet-template-container div.sheet-template-damage {
|
|
grid-column: 1 /3;
|
|
background-color: whitesmoke;
|
|
padding: 3% 2%;
|
|
border-top: 2px solid #240202;
|
|
text-transform: capitalize; }
|
|
.sheet-rolltemplate-rolls div.sheet-template-container div.sheet-result-row {
|
|
grid-column: 1 / 3; }
|
|
.sheet-rolltemplate-rolls div.sheet-template-container div.sheet-template-roll {
|
|
display: inline-grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
width: 100%; }
|
|
.sheet-rolltemplate-rolls div.sheet-template-container div.sheet-template-roll div.sheet-template-col {
|
|
padding: 5%; }
|
|
.sheet-rolltemplate-rolls div.sheet-template-container div.sheet-template-roll div.sheet-template-col:nth-of-type(2) {
|
|
border-left: 2px solid #240202; }
|
|
.sheet-rolltemplate-rolls div.sheet-template-container div.sheet-template-roll div.sheet-template-col span {
|
|
display: block; }
|
|
.sheet-rolltemplate-rolls div.sheet-template-container div.sheet-template-roll div.sheet-template-col span:last-child {
|
|
margin-top: 5%; }
|
|
|
|
.sheet-rolltemplate-rolls div.sheet-rollResult {
|
|
padding: 5px;
|
|
text-align: center;
|
|
font-size: large;
|
|
border-top: 2px solid #240202; }
|
|
.sheet-rolltemplate-rolls div.sheet-rollResult span[data-i18n="Critical"] {
|
|
color: #ba892c; }
|
|
|
|
.sheet-rolltemplate-rolls div.sheet-season {
|
|
padding-top: 2%; }
|
|
|
|
.sheet-rolltemplate-rolls span[data-i18n="rolled"],
|
|
.sheet-rolltemplate-rolls span[data-i18n="threshold"],
|
|
.sheet-rolltemplate-rolls span[data-i18n="spring"],
|
|
.sheet-rolltemplate-rolls span[data-i18n="summer"],
|
|
.sheet-rolltemplate-rolls span[data-i18n="autum"],
|
|
.sheet-rolltemplate-rolls span[data-i18n="autumn"],
|
|
.sheet-rolltemplate-rolls span[data-i18n="luck"] {
|
|
text-transform: capitalize; }
|
|
|
|
/* REPEATING SECTIONS
|
|
----------------------------- */
|
|
div.sheet-repeating-container button {
|
|
font-variant: none; }
|
|
|
|
div.sheet-repeating-container div.sheet-display {
|
|
padding: 4px; }
|
|
|
|
div.sheet-repeating-container div.sheet-notes {
|
|
padding: 1% 2%; }
|
|
|
|
.repcontrol {
|
|
margin-top: 2%;
|
|
margin-bottom: 2%; }
|
|
|
|
.itemcontrol .repcontrol_del {
|
|
background-color: #832219;
|
|
font-family: "pictos";
|
|
z-index: 100;
|
|
position: absolute;
|
|
right: 1.5%; }
|
|
|
|
/* DRAG & DROP
|
|
============================= */
|
|
.sheet-dropzone.active-drop-target.dropping {
|
|
-moz-transition: opacity 0.15s ease-in-out;
|
|
-webkit-transition: opacity 0.15s ease-in-out;
|
|
background-color: transparent;
|
|
opacity: 0.5;
|
|
transition: opacity 0.15s ease-in-out; }
|
|
|
|
.sheet-compendium_warning {
|
|
display: none; }
|
|
|
|
.sheet-dropzone.active-drop-target.dropping ~ .sheet-compendium_warning {
|
|
position: absolute;
|
|
background: white;
|
|
border-radius: 0.5em;
|
|
border: 2px solid #000;
|
|
box-shadow: 0 0 50px #000;
|
|
display: block;
|
|
height: 100px;
|
|
left: 50%;
|
|
margin: -70px 0 0 -170px;
|
|
min-height: max-content;
|
|
padding: 2em;
|
|
text-align: center;
|
|
top: 50%;
|
|
width: 300px;
|
|
z-index: 100; }
|