.skillcat-grid-container { display: grid; grid-template-columns: [skill-category-name] 10% [applicable-stats] 10% [dev-cost] 8% [num-ranks] 8% [new-ranks] 8% [rank-bonus] 8% [stat-bonus] 8% [prof-bonus] 8% [special-bonus-1] 8% [special-bonus-2] 8% [total-bonus] 8% [controls] 8%; } .skillcat-grid-container > div { font-family: Signika, sans-serif; font-size: 12px; text-align: center; border-bottom: 1px solid; padding-top: 3px; padding-bottom: 3px; display: flex; justify-content: flex-end; flex-direction: column; justify-content: center; } .skillcat-grid-container > div:nth-child(24n+1), .skillcat-grid-container > div:nth-child(24n+2), .skillcat-grid-container > div:nth-child(24n+3), .skillcat-grid-container > div:nth-child(24n+4), .skillcat-grid-container > div:nth-child(24n+5), .skillcat-grid-container > div:nth-child(24n+6), .skillcat-grid-container > div:nth-child(24n+7), .skillcat-grid-container > div:nth-child(24n+8), .skillcat-grid-container > div:nth-child(24n+9), .skillcat-grid-container > div:nth-child(24n+10), .skillcat-grid-container > div:nth-child(24n+11), .skillcat-grid-container > div:nth-child(24n+12) { font-family: Signika, sans-serif; font-size: 12px; text-align: center; border-bottom: 1px solid; padding-top: 3px; padding-bottom: 3px; display: flex; justify-content: flex-end; flex-direction: column; justify-content: center; background-image: linear-gradient(rgba(0, 0, 0, 0.1) 0 0); } .skillcat-grid-heading { font-weight: bold; border-bottom: 1px solid; background-image: linear-gradient(rgba(0, 0, 0, 0.1) 0 0); } .container { display: flex; } .actor-icon { flex-shrink: 1; } .favorite-container { padding: 5px; } .header-container { flex-grow: 2; outline: 1px solid; /* use instead of border */ margin-top: 1px; margin-left: 1px; padding: 5px; } .header-text { display: flex; align-items: center; padding: 1px; } .settings-button, .playersheet-settings { font-family: Signika, sans-serif; font-size: 12px; margin-right: 6px; } .resource-container { display: flex; flex-direction: row; flex-grow: 3; text-align: -webkit-center; } .resource-container > * { flex: 1 1 0; } .resource-entry { outline: 1px solid; /* use instead of border */ margin-top: 1px; margin-left: 1px; padding: 5px; } .resource-entry input { width: 50px; border: none; } .stat-container { flex-direction: column; flex-shrink: 1; } .stat-row { align-items: center; } .equipment-container { flex-direction: column; flex-grow: 1; } .stat-block { outline: 1px solid; /* use instead of border */ margin-top: 1px; margin-left: 1px; padding: 5px; } .stat-name, .money-name { width: 75px; border: none; font-family: Signika, sans-serif; font-size: 12px; } .stat-name input { border: none; } .stat-header { font-family: Signika, sans-serif; font-size: 12px; } .fixed-info-container { flex-grow: 3; flex-direction: row; font-family: Signika, sans-serif; font-size: 12px; } .fixed-info-section { outline: 1px solid; /* use instead of border */ margin-top: 1px; margin-left: 1px; padding: 5px; } .armor-block { outline: 1px solid; /* use instead of border */ margin-top: 1px; margin-left: 1px; padding: 5px; } .race-stat-fixed-info-block { outline: 1px solid; /* use instead of border */ margin-top: 1px; margin-left: 1px; padding: 5px; } .role-traits-block { outline: 1px solid; /* use instead of border */ margin-top: 1px; margin-left: 1px; padding: 5px; } .background-info-block { outline: 1px solid; /* use instead of border */ margin-top: 1px; margin-left: 1px; padding: 5px; } .resistance-block { outline: 1px solid; /* use instead of border */ margin-top: 1px; margin-left: 1px; padding: 5px; } .red { background-color: orangered; } .blue { background-color: lightblue; } .grey { background-color: lightgrey; } .green { background-color: lightseagreen; } .skills-grid-container { display: grid; grid-template-columns: [favorite] 9% [skill-name] 11% [num-ranks] 9% [new-ranks] 9% [rank-bonus] 9% [category-bonus] 9% [item-bonus] 9% [special-bonus-1] 9% [special-bonus-2] 9% [total-bonus] 9% [controls] 8%; } .skills-grid-container > div { font-family: Signika, sans-serif; font-size: 12px; text-align: center; border-bottom: 1px solid; padding-top: 3px; padding-bottom: 3px; display: flex; justify-content: flex-end; flex-direction: column; justify-content: center; } .skills-grid-container > div:nth-child(22n+1), .skills-grid-container > div:nth-child(22n+2), .skills-grid-container > div:nth-child(22n+3), .skills-grid-container > div:nth-child(22n+4), .skills-grid-container > div:nth-child(22n+5), .skills-grid-container > div:nth-child(22n+6), .skills-grid-container > div:nth-child(22n+7), .skills-grid-container > div:nth-child(22n+8), .skills-grid-container > div:nth-child(22n+9), .skills-grid-container > div:nth-child(22n+10), .skills-grid-container > div:nth-child(22n+11) { font-family: Signika, sans-serif; font-size: 12px; text-align: center; border-bottom: 1px solid; padding-top: 3px; padding-bottom: 3px; display: flex; justify-content: flex-end; flex-direction: column; justify-content: center; background-image: linear-gradient(rgba(0, 0, 0, 0.1) 0 0); } .skills-grid-heading { font-weight: bold; border-bottom: 1px solid; background-image: linear-gradient(rgba(0, 0, 0, 0.1) 0 0); } .money-column { flex-direction: column; } .money-container { flex-direction: column; flex-shrink: 1; padding-left: 10px; } .items-grid-container { display: grid; grid-template-columns: [worn] 10% [name] 30% [quantity] 15% [weight] 15% [cost] 15% [controls] 15%; } .items-grid-container > div { font-family: Signika, sans-serif; font-size: 12px; text-align: center; border-bottom: 1px solid; padding-top: 3px; padding-bottom: 3px; display: flex; justify-content: flex-end; flex-direction: row; justify-content: center; } .items-grid-container > div:nth-child(12n+1), .items-grid-container > div:nth-child(12n+2), .items-grid-container > div:nth-child(12n+3), .items-grid-container > div:nth-child(12n+4), .items-grid-container > div:nth-child(12n+5), .items-grid-container > div:nth-child(12n+6) { font-family: Signika, sans-serif; font-size: 12px; text-align: center; border-bottom: 1px solid; padding-top: 3px; padding-bottom: 3px; display: flex; justify-content: flex-end; flex-direction: row; justify-content: center; background-image: linear-gradient(rgba(0, 0, 0, 0.1) 0 0); } .items-grid-heading { font-weight: bold; border-bottom: 1px solid; background-image: linear-gradient(rgba(0, 0, 0, 0.1) 0 0); } .weapons-grid-container { display: grid; grid-template-columns: [name] 30% [equipped] 8% [breakage_range] 9% [fumble_range] 9% [strength] 9% [quantity] 9% [weight] 9% [cost] 9% [controls] 8%; } .weapons-grid-container > div { font-family: Signika, sans-serif; font-size: 12px; text-align: center; border-bottom: 1px solid; padding-top: 3px; padding-bottom: 3px; display: flex; justify-content: flex-end; flex-direction: row; justify-content: center; } .weapons-grid-container > div:nth-child(18n+1), .weapons-grid-container > div:nth-child(18n+2), .weapons-grid-container > div:nth-child(18n+3), .weapons-grid-container > div:nth-child(18n+4), .weapons-grid-container > div:nth-child(18n+5), .weapons-grid-container > div:nth-child(18n+6), .weapons-grid-container > div:nth-child(18n+7), .weapons-grid-container > div:nth-child(18n+8), .weapons-grid-container > div:nth-child(18n+9) { font-family: Signika, sans-serif; font-size: 12px; text-align: center; border-bottom: 1px solid; padding-top: 3px; padding-bottom: 3px; display: flex; justify-content: flex-end; flex-direction: row; justify-content: center; background-image: linear-gradient(rgba(0, 0, 0, 0.1) 0 0); } .weapons-grid-heading { font-weight: bold; border-bottom: 1px solid; background-image: linear-gradient(rgba(0, 0, 0, 0.1) 0 0); } .armor-grid-container { display: grid; grid-template-columns: [name] 30% [equipped] 12% [at] 12% [quantity] 12% [weight] 12% [cost] 12% [controls] 10%; } .armor-grid-container > div { font-family: Signika, sans-serif; font-size: 12px; text-align: center; border-bottom: 1px solid; padding-top: 3px; padding-bottom: 3px; display: flex; justify-content: flex-end; flex-direction: row; justify-content: center; } .armor-grid-container > div:nth-child(14n+1), .armor-grid-container > div:nth-child(14n+2), .armor-grid-container > div:nth-child(14n+3), .armor-grid-container > div:nth-child(14n+4), .armor-grid-container > div:nth-child(14n+5), .armor-grid-container > div:nth-child(14n+6), .armor-grid-container > div:nth-child(14n+7) { font-family: Signika, sans-serif; font-size: 12px; text-align: center; border-bottom: 1px solid; padding-top: 3px; padding-bottom: 3px; display: flex; justify-content: flex-end; flex-direction: row; justify-content: center; background-image: linear-gradient(rgba(0, 0, 0, 0.1) 0 0); } .armor-grid-heading { font-weight: bold; border-bottom: 1px solid; background-image: linear-gradient(rgba(0, 0, 0, 0.1) 0 0); } .herbs-grid-container { display: grid; grid-template-columns: [name] 30% [quantity] 11% [codes] 12% [af] 12% [weight] 12% [cost] 11% [controls] 12%; } .herbs-grid-container > div { font-family: Signika, sans-serif; font-size: 12px; text-align: center; border-bottom: 1px solid; padding-top: 3px; padding-bottom: 3px; display: flex; justify-content: flex-end; flex-direction: row; justify-content: center; } .herbs-grid-container > div:nth-child(14n+1), .herbs-grid-container > div:nth-child(14n+2), .herbs-grid-container > div:nth-child(14n+3), .herbs-grid-container > div:nth-child(14n+4), .herbs-grid-container > div:nth-child(14n+5), .herbs-grid-container > div:nth-child(14n+6), .herbs-grid-container > div:nth-child(14n+7) { font-family: Signika, sans-serif; font-size: 12px; text-align: center; border-bottom: 1px solid; padding-top: 3px; padding-bottom: 3px; display: flex; justify-content: flex-end; flex-direction: row; justify-content: center; background-image: linear-gradient(rgba(0, 0, 0, 0.1) 0 0); } .herbs-grid-heading { font-weight: bold; border-bottom: 1px solid; background-image: linear-gradient(rgba(0, 0, 0, 0.1) 0 0); } .spell-grid-container { display: grid; grid-template-columns: [favorite] 9% [level] 8% [name] 30% [spell_list] 9% [area_of_effect] 9% [duration] 9% [range] 9% [type] 9% [controls] 8%; } .spell-grid-container > div { font-family: Signika, sans-serif; font-size: 12px; text-align: center; border-bottom: 1px solid; padding-top: 3px; padding-bottom: 3px; display: flex; justify-content: flex-end; flex-direction: row; justify-content: center; } .spell-grid-container > div:nth-child(18n+1), .spell-grid-container > div:nth-child(18n+2), .spell-grid-container > div:nth-child(18n+3), .spell-grid-container > div:nth-child(18n+4), .spell-grid-container > div:nth-child(18n+5), .spell-grid-container > div:nth-child(18n+6), .spell-grid-container > div:nth-child(18n+7), .spell-grid-container > div:nth-child(18n+8), .spell-grid-container > div:nth-child(18n+9) { font-family: Signika, sans-serif; font-size: 12px; text-align: center; border-bottom: 1px solid; padding-top: 3px; padding-bottom: 3px; display: flex; justify-content: flex-end; flex-direction: row; justify-content: center; background-image: linear-gradient(rgba(0, 0, 0, 0.1) 0 0); } .spell-grid-heading { font-weight: bold; border-bottom: 1px solid; background-image: linear-gradient(rgba(0, 0, 0, 0.1) 0 0); } .resistances-grid-container { outline: 1px solid; /* use instead of border */ margin-top: 1px; margin-left: 1px; padding: 5px; display: grid; grid-template-columns: [Name] 40% [Value] 20% [Race_Mod] 20% [Total] 20%; } .resistances-grid-heading { font-weight: bold; border-bottom: 1px solid; background-image: linear-gradient(rgba(0, 0, 0, 0.1) 0 0); } .resistance-input { width: 50%; } .skillcat-name, .skill-name, .item-name, .spell-name, .equipable-name { font-family: Signika, sans-serif; font-size: 12px; font-weight: bold; text-align: center; } .skillcat-entry, .skill-entry, .item-entry, .spell-entry, .equipable-entry { font-family: Signika, sans-serif; font-size: 12px; text-align: center; } .skillcat-headeritem, .skill-headeritem, .item-headeritem, .spell-headeritem, .equipable-headeritem { text-align: center; font-weight: bold; } .skillcat-controls, .skill-controls, .item-controls { font-family: Signika, sans-serif; font-size: 12px; text-align: center; } .applicable-stats-grid-container { display: grid; grid-template-columns: [app-stat-1] 33% [app-stat-2] 33% [app-stat-3] 33%; } .applicable-stats-grid-container > div { font-family: Signika, sans-serif; font-size: 12px; text-align: center; border-bottom: 1px solid; padding-top: 3px; padding-bottom: 3px; display: flex; justify-content: flex-end; flex-direction: column; justify-content: center; } .sheet form { display: flex; flex-direction: column; } .sheet .sheet-content { height: 100%; display: flex; flex-direction: column; } .sheet .sheet-content .editor { height: 100%; }