mirror of
https://github.com/Nighthawk42/roll20-character-sheets.git
synced 2026-09-08 16:12:33 +00:00
Tealk
05c8baa82f
* spelling & burst * First Release * Revert "spelling & burst" This reverts commit f322adbde0c4b0e1e155d47f1ce4343ad5e9313a. * formating error * add static skill * input fields height unified * add full logo url
419 lines
8.5 KiB
CSS
419 lines
8.5 KiB
CSS
/* 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;
|
|
}
|