/* Allgemein */ input { background: transparent; width: 100%; border: 1px solid #ddd; border-radius: 3px; } input[type=number] { text-align: center; -moz-appearance: textfield; -webkit-appearance: textfield; } textarea { margin: 0; width: 100%; height: 65px; resize: vertical; box-sizing: border-box; border: 1px solid #ddd; border-radius: 3px; } span { text-transform: uppercase; } label { width: min-content; } /* Global Config */ .sheet-api-toggle[value="1"] ~ .sheet-no-api { display: none; } .sheet-api-toggle[value="0"] ~ .sheet-api { display: none; } /* Button Roll */ .sheet-container button[type="roll"] { width: 100%; height:24px; padding: 0; margin: 0; border-top-left-radius: 10px; border-bottom-right-radius: 10px; border-radius: unset; background-image: none; background-color: transparent; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } .sheet-container button[type="roll"]:hover { background: black; color: white; } .sheet-container button[type="roll"] label, .sheet-container button[type="roll"] input { line-height: 24px; font-size: 13px; text-align:center; font-weight:700; } /* Tabelle */ .sheet-container .sheet-skills .sheet-grid, .sheet-container .sheet-skills .sheet-gridplace .repcontainer .repitem, .sheet-container .sheet-skills .sheet-gridplace .sheet-repcontainer .sheet-repitem { display: grid; grid-template-columns: 405px 155px 75px 75px 55px 55px; grid-gap: 5px; height: 40px; } .sheet-container .sheet-skills .sheet-grid { height: inherit; } .sheet-container .sheet-skills .sheet-grid > div { background-color: #EEE; font-weight: bold; text-align: center; } .sheet-container .sheet-skills .sheet-gridplace .repcontainer .repitem input, .sheet-container .sheet-skills .sheet-gridplace .repcontainer .repitem select, .sheet-container .sheet-skills .sheet-gridplace .repcontainer .repitem button, .sheet-container .sheet-skills .sheet-gridplace .sheet-repcontainer .sheet-repitem input, .sheet-container .sheet-skills .sheet-gridplace .sheet-repcontainer .sheet-repitem select, .sheet-container .sheet-skills .sheet-gridplace .sheet-repcontainer .sheet-repitem button { width: -webkit-fill-available; width: -moz-available; } .sheet-container .sheet-skills .sheet-gridplace .repcontainer .repitem button.repcontrol_del { width: auto; } .sheet-container .sheet-skills .sheet-gridplace .repcontainer .repitem div, .sheet-container .sheet-skills .sheet-gridplace .sheet-repcontainer .sheet-repitem div { margin: auto 0; text-align: center; } /*.sheet-container .sheet-skills .sheet-gridplace .repcontainer .repitem div input[type="number"] { width: 50px; }*/ /* Global */ .sheet-container { width: 850px; } .sheet-container .sheet-number-20 { font-size: 20px; } .sheet-container .sheet-float { float: left; box-sizing: border-box; width: 100%; margin: 4px 0; padding-right: 5px; } .sheet-container .sheet-full { min-width: 100%; } .sheet-container .sheet-threequarters { max-width: 75%; } .sheet-container .sheet-half { max-width: 50%; } .sheet-container .sheet-quarter { max-width: 25%; } .sheet-container .sheet-textcenter { text-align: center; } .sheet-container .sheet-bottomspace { margin-bottom: 5px; } .sheet-container .sheet-formular { padding: 9px; margin-top: 15px; border: 1px solid #ddd; border-radius: 3px; } .sheet-container .sheet-formular label { display: block; float: left; height: 20px; margin-top: -19px; margin-bottom: 0px; background: #fff; padding: 2px 5px 2px 5px; color: #b9b9b9; font-weight: normal; } .sheet-container .sheet-formular input { box-sizing: border-box; border: 0; } .sheet-container .sheet-header { margin-bottom: 4px; padding: 2px 8px; background: black; color: white; font-weight: bold; border-top-left-radius: 10px; border-bottom-right-radius: 10px; } /* Head */ .sheet-container .sheet-head-logo { width: 200px; vertical-align: middle; } .sheet-container .sheet-logo { height: 200px; } .sheet-container .sheet-gmroll { text-align: center; } .sheet-container .sheet-gmroll select{ width: -webkit-fill-available; width: -moz-available; } .sheet-container .sheet-schicksal { text-align: center; } .sheet-container .sheet-schicksal .sheet-bspace { padding-bottom: 2px; } .sheet-container .sheet-schicksal .sheet-input { height: 100%; margin:0; padding:0; -webkit-appearance:none; -moz-appearance:none; appearance:none; } .sheet-container .sheet-schicksal .sheet-button { height: 25px; width: 25px; } .sheet-container .sheet-schicksal .sheet-button::before { display: none; } .sheet-container .sheet-schicksal .sheet-input { border: none; margin: 0; height: 100%; } .sheet-container .sheet-schicksal .sheet-input::after { display: block; width: 100%; height: 100%; text-align: center; font-size: 16px; line-height: normal; } .sheet-container .sheet-schicksal .sheet-input.sheet-s0::after {content:"0";} .sheet-container .sheet-schicksal .sheet-input.sheet-s1::after {content:"1";} .sheet-container .sheet-schicksal .sheet-input.sheet-s2::after {content:"2";} .sheet-container .sheet-schicksal .sheet-input.sheet-s3::after {content:"3";} .sheet-container .sheet-schicksal .sheet-input.sheet-s4::after {content:"4";} .sheet-container .sheet-schicksal .sheet-input.sheet-s5::after {content:"5";} .sheet-container .sheet-schicksal .sheet-input.sheet-s6::after {content:"6";} .sheet-container .sheet-schicksal .sheet-input.sheet-s7::after {content:"7";} .sheet-container .sheet-schicksal .sheet-input.sheet-s8::after {content:"8";} .sheet-container .sheet-schicksal .sheet-input.sheet-s9::after {content:"9";} .sheet-container .sheet-schicksal .sheet-input.sheet-s10::after {content:"10";} .sheet-container .sheet-schicksal input:checked { background-color: black; color: white; } .sheet-container .sheet-head-info { width: calc(100% - 200px); } .sheet-container .sheet-head-info-boxes { width: 100%; max-width: calc(100% - 100px); } .sheet-container .sheet-head-info-boxes > div:first-child { height: 36px; } .sheet-container .sheet-head-info-boxes input { width: 100%; box-sizing: border-box; } .sheet-container .sheet-head-info-boxes textarea { height: 64px; border: none; } .sheet-container .sheet-head-info-sideboxes { width: 100px; float: right; } .sheet-container .sheet-head-info-sideboxes > div { height: 36px; } .sheet-container .sheet-head-info-sideboxes button, .sheet-container .sheet-attribut-stats button { display: block; float: left; margin-top: -21px; background: #fff; padding: 2px 5px 2px 5px; color: #b9b9b9; border: none; } .sheet-container .sheet-head-info-sideboxes input { width: -webkit-fill-available; width: -moz-available; text-align: center; } .sheet-container .sheet-head-info-sideboxes button[type="roll"]:before, .sheet-container .sheet-attribut-stats button[type="roll"]:before { content: ""; display: none; } .sheet-container .sheet-head-stats { display: flex; width: 100%; justify-content: space-between; } .sheet-container .sheet-head-stats > div { width: min-content; height: 36px; } .sheet-container .sheet-head-stats input { max-width: 100px; float: right; text-align: center; } .sheet-container .sheet-head-stats-health, .sheet-container .sheet-head-stats-bewegung{ display: flex; width: max-content; } .sheet-container .sheet-head-stats-health input{ max-width: 80px; } .sheet-container .sheet-head-stats .sheet-formular > input { width: -webkit-fill-available; width: -moz-available; } /* First Row */ .sheet-container .sheet-attribut { display: inherit; } .sheet-container .sheet-attribut-stats { display: flex; width: 100%; justify-content: space-evenly; flex-flow: row wrap; } .sheet-container .sheet-attribut-stats .sheet-formular { width: 26%; height: 56px; } .sheet-container .sheet-attribut-stats input { width: -webkit-fill-available; width: -moz-available; text-align: center; } .sheet-container .sheet-aspects { display: inherit; } /* Second Row */ .sheet-container .sheet-skills { display: inherit; } .sheet-container .sheet-skills input, .sheet-container .sheet-skills select, .sheet-container .sheet-skills button[type="roll"] { border: none; } /* Third Row */ .sheet-container .sheet-stunts { display: inherit; } .sheet-container .sheet-inventar { display: inherit; } .sheet-container .sheet-inventar .sheet-rustung { padding-bottom: 4px; } .sheet-container .sheet-inventar input:first-child{ width: 250px; } .sheet-container .sheet-inventar input{ width: 81px; }