.sheet form { display: flex; flex-direction: column; } .sheet .sheet-content { height: 100%; display: flex; flex-direction: column; } .sheet .sheet-content .editor { height: 100%; } .container { display: flex; } .actor-icon { flex-shrink: 1; } .header-container { flex-grow: 2; outline: 1px solid; /* use instead of border */ margin-top: 1px; margin-left: 1px; padding: 5px; } .header-text { display: flex; flex-direction: row; justify-content: center; } .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; } .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; } .skillcat-name, .skill-name, .item-name { font-family: Signika, sans-serif; font-size: 12px; font-weight: bold; text-align: center; } .skillcat-entry, .skill-entry, .item-entry { font-family: Signika, sans-serif; font-size: 12px; text-align: center; } .skillcat-headeritem, .skill-headeritem, .item-headeritem { text-align: center; font-weight: bold; } .skillcat-controls, .skill-controls, .item-controls { font-family: Signika, sans-serif; font-size: 12px; text-align: center; } .money-column { flex-direction: column; } .money-container { flex-direction: column; flex-shrink: 1; } .table-font { font-family: Signika, sans-serif; font-size: 12px; text-align: center; } .table-bold { font-weight: bold; } .table-center { text-align: center; } .table-controls { font-family: Signika, sans-serif; font-size: 12px; text-align: center; } .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); } .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); } .applicable-stats-grid-container { display: grid; grid-template-columns: [app-stat-1] 33% [app-stat-2] 33% [dapp-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; }