mirror of
https://github.com/Nighthawk42/roll20-character-sheets.git
synced 2026-08-30 11:42:29 +00:00
LeGurmuX
b2bfe51cd2
Make the sheet use div tags instead of table elements and update json to match filenames
924 lines
20 KiB
CSS
924 lines
20 KiB
CSS
/*----------- Tabs Setup -------------*/
|
|
|
|
h1::first-letter {
|
|
font-size:2.5em;
|
|
}
|
|
|
|
/*this hides the contents of each tab by default*/
|
|
.charsheet div[class^="sheet-section"] {
|
|
display: none;
|
|
}
|
|
|
|
|
|
/*this shows the tab content when the appropriate input field is selected*/
|
|
.charsheet input.sheet-tab1:checked~div.sheet-section-core,
|
|
.charsheet input.sheet-tab2:checked~div.sheet-section-talentsandtraits,
|
|
.charsheet input.sheet-tab3:checked~div.sheet-section-skillsandchars,
|
|
.charsheet input.sheet-tab4:checked~div.sheet-section-gear,
|
|
.charsheet input.sheet-tab5:checked~div.sheet-section-careerjournal,
|
|
.charsheet input.sheet-tab6:checked~div.sheet-section-psykana,
|
|
.charsheet input.sheet-tab7:checked~div.sheet-section-faith {
|
|
display: block;
|
|
}
|
|
|
|
.btn:focus {
|
|
border-color: red;
|
|
}
|
|
|
|
.charsheet input.sheet-tab99:checked~div[class^="sheet-section"] {
|
|
display: block;
|
|
}
|
|
|
|
/*this hides the radio button for each tab, makes it 100px wide and 40px tall and makes sure it's above everything else*/
|
|
.charsheet input.sheet-tab {
|
|
width : 90px;
|
|
height : 40px;
|
|
cursor : pointer;
|
|
position: relative;
|
|
opacity : 0;
|
|
z-index : 9999;
|
|
}
|
|
|
|
/*this styles the span with the tab information and slides to the left, so it appears underneath the radio button*/
|
|
.charsheet span.sheet-tab {
|
|
text-align : center;
|
|
display : inline-block;
|
|
font-size : 11px;
|
|
background : rgba(229, 229, 229, 0.34);
|
|
color : black;
|
|
border : solid 1px rgba(0, 0, 0, 0.21);
|
|
font-weight : bold;
|
|
border-radius : 35px;
|
|
width : 100px;
|
|
height : 40px;
|
|
cursor : pointer;
|
|
position : relative;
|
|
vertical-align: middle;
|
|
margin-left : -95px;
|
|
}
|
|
|
|
/*this modifies the span color once the radio button is selected so you know which tab is selected*/
|
|
.charsheet input.sheet-tab1:checked+span.sheet-tab1,
|
|
.charsheet input.sheet-tab2:checked+span.sheet-tab2,
|
|
.charsheet input.sheet-tab3:checked+span.sheet-tab3,
|
|
.charsheet input.sheet-tab4:checked+span.sheet-tab4,
|
|
.charsheet input.sheet-tab5:checked+span.sheet-tab5,
|
|
.charsheet input.sheet-tab6:checked+span.sheet-tab6,
|
|
.charsheet input.sheet-tab7:checked+span.sheet-tab7,
|
|
.charsheet input.sheet-tab8:checked+span.sheet-tab8,
|
|
.charsheet input.sheet-tab99:checked+span.sheet-tab99,
|
|
.charsheet input.sheet-gmroll:checked+span.sheet-gmroll {
|
|
background : #6d131b;
|
|
color : #eaeaea;
|
|
border-radius: 35px;
|
|
}
|
|
|
|
/* CSS Reset */
|
|
.charsheet .sheet-wrapper div,
|
|
.charsheet .sheet-wrapper span,
|
|
.charsheet .sheet-wrapper label,
|
|
.charsheet .sheet-wrapper h1,
|
|
.charsheet .sheet-wrapper h2,
|
|
.charsheet .sheet-wrapper h3,
|
|
.charsheet .sheet-wrapper h4,
|
|
.charsheet .sheet-wrapper h5,
|
|
.charsheet .sheet-wrapper h6,
|
|
.charsheet .sheet-wrapper p,
|
|
.charsheet .sheet-wrapper .table-container,
|
|
.charsheet .sheet-wrapper caption,
|
|
.charsheet .sheet-wrapper tbody,
|
|
.charsheet .sheet-wrapper tfoot,
|
|
.charsheet .sheet-wrapper thead,
|
|
.charsheet .sheet-wrapper tr,
|
|
.charsheet .sheet-wrapper th,
|
|
.charsheet .sheet-wrapper td {
|
|
margin : 0;
|
|
padding : 0;
|
|
border : 0;
|
|
font-size : 100%;
|
|
font : inherit;
|
|
color : #404040;
|
|
vertical-align: baseline;
|
|
box-sizing : border-box;
|
|
}
|
|
|
|
.charsheet .sheet-wrapper .table-container {
|
|
border-collapse: collapse;
|
|
border-spacing : 0;
|
|
}
|
|
|
|
|
|
|
|
.charsheet .sheet-wrapper input::-webkit-outer-spin-button,
|
|
.charsheet .sheet-wrapper input::-webkit-inner-spin-button {
|
|
-webkit-appearance: none;
|
|
margin : 0;
|
|
}
|
|
|
|
|
|
.charsheet .sheet-wrapper input[type="number"] {
|
|
-moz-appearance: textfield;
|
|
}
|
|
|
|
.charsheet .sheet-wrapper textarea {
|
|
resize: none;
|
|
}
|
|
|
|
|
|
/* Main Styles */
|
|
|
|
.charsheet {
|
|
background-image: url(http://i.imgur.com/5GbMHfg.png);
|
|
font-family : Calibri, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
|
|
font-size : 11px;
|
|
}
|
|
|
|
.charsheet .sheet-wrapper h3 {
|
|
color : black;
|
|
padding : 3px;
|
|
margin-bottom : 5px;
|
|
font-size : 12px;
|
|
font-weight : bold;
|
|
font-family : inherit;
|
|
text-transform: uppercase;
|
|
text-align : center;
|
|
}
|
|
|
|
.charsheet .sheet-wrapper h4 {
|
|
color : #bd2706;
|
|
padding : 2px;
|
|
margin-top : 2px;
|
|
font-size : 10px;
|
|
font-weight : bold;
|
|
font-family : inherit;
|
|
text-transform: uppercase;
|
|
text-align : center;
|
|
background: white;
|
|
}
|
|
|
|
.charsheet .sheet-wrapper textarea {
|
|
display : inline-block;
|
|
border : 1px solid #aaa;
|
|
padding : 2px;
|
|
height : 24px;
|
|
width : 100%;
|
|
font-size : 11px;
|
|
font-family : inherit;
|
|
line-height : 16px;
|
|
font-weight : normal;
|
|
margin : 0;
|
|
color : #555;
|
|
background-color : white;
|
|
vertical-align : middle;
|
|
cursor : auto;
|
|
letter-spacing : normal;
|
|
word-spacing : normal;
|
|
text-transform : none;
|
|
text-indent : 0px;
|
|
text-shadow : none;
|
|
text-align : start;
|
|
-webkit-rtl-ordering: logical;
|
|
-webkit-user-select : text;
|
|
box-shadow : inset 0 1px 1px rgba(0, 0, 0, 0.075);
|
|
transition : border linear .2s, box-shadow linear .2s;
|
|
border-radius : 3px;
|
|
writing-mode : horizontal-tb;
|
|
-webkit-writing-mode: horizontal-tb;
|
|
}
|
|
|
|
.charsheet .sheet-wrapper input,
|
|
.charsheet .sheet-wrapper select,
|
|
.charsheet .sheet-wrapper input[type="number"] {
|
|
display : inline-block;
|
|
border-bottom : 1px dotted gray;
|
|
border-top : none;
|
|
border-left : none;
|
|
border-right : none;
|
|
padding : 2px;
|
|
height : 24px;
|
|
width : 100%;
|
|
font-size : 11px;
|
|
font-family : inherit;
|
|
line-height : 16px;
|
|
font-weight : normal;
|
|
margin : 0;
|
|
color : #555;
|
|
background-color : transparent;
|
|
vertical-align : middle;
|
|
cursor : auto;
|
|
letter-spacing : normal;
|
|
word-spacing : normal;
|
|
text-transform : none;
|
|
text-indent : 0px;
|
|
text-shadow : none;
|
|
text-align : start;
|
|
-webkit-rtl-ordering: logical;
|
|
-webkit-user-select : text;
|
|
box-shadow : inset 0 1px 1px rgba(0, 0, 0, 0.075);
|
|
transition : border linear .2s, box-shadow linear .2s;
|
|
border-radius : 3px;
|
|
writing-mode : horizontal-tb;
|
|
-webkit-writing-mode: horizontal-tb;
|
|
}
|
|
|
|
.charsheet .sheet-wrapper input:not([type='checkbox']) {
|
|
-webkit-appearance: textfield;
|
|
}
|
|
|
|
.charsheet .sheet-wrapper input[type="checkbox"] {
|
|
height: 15px;
|
|
width : 15px;
|
|
color : #555;
|
|
border: 1px solid #aaa;
|
|
|
|
border-radius: 0;
|
|
|
|
box-shadow: inset 0 1px 1px rgba(0, 44, 44, 0.075);
|
|
transition: border linear .2s, box-shadow linear .2s;
|
|
}
|
|
|
|
.charsheet .sheet-wrapper input[disabled],
|
|
.charsheet .sheet-wrapper select[disabled],
|
|
.charsheet .sheet-wrapper textarea[disabled],
|
|
.charsheet .sheet-wrapper input[readonly],
|
|
.charsheet .sheet-wrapper select[readonly],
|
|
.charsheet .sheet-wrapper textarea[readonly] {
|
|
background-color: transparent;
|
|
border-color : #aaa;
|
|
cursor : not-allowed;
|
|
pointer-events : none;
|
|
}
|
|
|
|
.charsheet .sheet-wrapper textarea {
|
|
width : 98%;
|
|
height : 80px;
|
|
line-height: 16px;
|
|
}
|
|
|
|
.charsheet .sheet-wrapper label {
|
|
display : inline-block;
|
|
width : 100%;
|
|
font-size : 11px;
|
|
text-align : left;
|
|
font-weight : 600;
|
|
height : 24px;
|
|
line-height : 24px;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.charsheet .sheet-wrapper .sheet-3colrow .sheet-col {
|
|
width : calc(33% - 5px) !important;
|
|
margin-right: 5px !important;
|
|
|
|
}
|
|
|
|
.charsheet .sheet-wrapper .sheet-3colrow .sheet-col:last-child {
|
|
margin-right: 0 !important;
|
|
}
|
|
|
|
.charsheet .sheet-wrapper .sheet-2colrow .sheet-col {
|
|
width : calc(50% - 3px) !important;
|
|
margin-right: 2px !important;
|
|
}
|
|
|
|
.charsheet .sheet-wrapper .sheet-2colrow .sheet-col:last-child {
|
|
margin-right: 0 !important;
|
|
}
|
|
|
|
.charsheet .sheet-wrapper .sheet-1colrow .sheet-col {
|
|
width : calc(100% - 3px) !important;
|
|
margin-right: 0 !important;
|
|
|
|
}
|
|
|
|
/* Table Container */
|
|
|
|
.charsheet .sheet-wrapper .table-container {
|
|
display: table;
|
|
}
|
|
.charsheet .sheet-wrapper .table-cell {
|
|
display: table-cell;
|
|
}
|
|
.charsheet .sheet-wrapper .table-header {
|
|
display: table-cell;
|
|
}
|
|
|
|
.charsheet .sheet-wrapper .table-row {
|
|
display: table-row;
|
|
}
|
|
.charsheet .sheet-wrapper .sheet-crittable .table-header {
|
|
padding:5px;
|
|
|
|
}
|
|
|
|
.charsheet .sheet-wrapper .sheet-crittable .table-row {
|
|
border-bottom:solid 2px;
|
|
|
|
}
|
|
|
|
.charsheet .sheet-wrapper .sheet-crittable .table-cell {
|
|
|
|
padding-left:5px;
|
|
padding-right:5px;
|
|
text-align:center-left;
|
|
}
|
|
|
|
.charsheet .sheet-wrapper .sheet-item.blockheader{
|
|
background: #782112;
|
|
}
|
|
|
|
.charsheet .sheet-wrapper .sheet-item.blockheader h3 {
|
|
color : white;
|
|
padding : 2px;
|
|
margin-bottom : 5px;
|
|
margin-left : 10px;
|
|
font-size : 14px;
|
|
font-weight : bold;
|
|
font-family : inherit;
|
|
text-transform: uppercase;
|
|
text-align : left;
|
|
}
|
|
.charsheet .sheet-wrapper .sheet-input-selectbox {
|
|
font-size : 14px;
|
|
font-weight : bold;
|
|
background:#9cf7a7;
|
|
}
|
|
|
|
.charsheet .sheet-wrapper .sheet-input-advancement-type {
|
|
font-weight : bold;
|
|
background:#cadb9a;
|
|
}
|
|
|
|
.charsheet .sheet-wrapper .sheet-item.hitLocationName h3 {
|
|
background:#242624;
|
|
color:#fffaf5;
|
|
}
|
|
|
|
|
|
.charsheet input[type="checkbox"]:checked {
|
|
box-shadow: 1px 2px 0 2px hotpink;
|
|
|
|
|
|
}
|
|
|
|
.charsheet .sheet-wrapper .sheet-characteristicslist .table-header {
|
|
width:12.5%;
|
|
padding:5px;
|
|
font-size:1.5em;
|
|
font-weight:bolder;
|
|
text-align:center;
|
|
border-top:solid 2px;
|
|
border-left:solid 2px;
|
|
border-right:solid 2px;
|
|
display: table-cell;
|
|
}
|
|
|
|
.charsheet .sheet-wrapper .sheet-characteristicslist .table-cell {
|
|
padding-left:5px;
|
|
padding-right:5px;
|
|
text-align:center;
|
|
font-size:1.5em;
|
|
font-weight:bolder;
|
|
background:#fad8a7;
|
|
border-bottom:solid 2px;
|
|
border-left:solid 2px;
|
|
border-right:solid 2px;
|
|
letter-spacing : 4px;
|
|
display: table-cell;
|
|
}
|
|
|
|
.charsheet .sheet-wrapper .sheet-characteristicslist .table-cell::first-letter {
|
|
font-size:1.1em;
|
|
border:solid 1px;
|
|
border-color:red;
|
|
padding-left:3px;
|
|
margin-right:3px;
|
|
display: table-cell;
|
|
|
|
}
|
|
/* Special Styles */
|
|
|
|
.charsheet .sheet-wrapper .sheet-mastery .table-container {
|
|
border: 2px solid #c72502;
|
|
border-spacing : 0;
|
|
font-weight:bold;
|
|
}
|
|
|
|
.charsheet .sheet-wrapper .sheet-mastery .table-header {
|
|
background: #e7f7c1;
|
|
padding : 2px;
|
|
}
|
|
.charsheet .sheet-wrapper .sheet-mastery .table-cell {
|
|
|
|
padding-left :2px;
|
|
}
|
|
|
|
.charsheet .sheet-wrapper .sheet-col.sheet-skills div.table-row:nth-child(even){
|
|
background: #ebffff;
|
|
}
|
|
|
|
.charsheet .sheet-wrapper .sheet-col.sheet-skills div.table-row:nth-child(odd) {
|
|
background: #d3e0de;
|
|
}
|
|
|
|
|
|
.charsheet .sheet-wrapper .sheet-col.sheet-mastery div.table-row:nth-child(even) {
|
|
background: #ede4d5;
|
|
}
|
|
|
|
.charsheet .sheet-wrapper .sheet-col.sheet-mastery div.table-row:nth-child(odd) {
|
|
|
|
background: #fcf5ed;
|
|
}
|
|
|
|
.charsheet .sheet-wrapper .sheet-col.sheet-skills div.table-cell:first-child {
|
|
width : 50%;
|
|
height : 24px;
|
|
border-bottom: 1px solid gray;
|
|
}
|
|
|
|
.charsheet .sheet-wrapper .sheet-col.sheet-skills div.table-cell:nth-child(n+2) {
|
|
width : 5%;
|
|
height : 24px;
|
|
border : 1px solid gray;
|
|
text-align: center;
|
|
}
|
|
.charsheet .sheet-wrapper .sheet-col.sheet-skills div.table-cell:nth-child(2) {
|
|
background:white;
|
|
}
|
|
|
|
.charsheet .sheet-wrapper .sheet-col.sheet-skills div.table-cell:nth-child(3) {
|
|
background:#f3f3f3;
|
|
}
|
|
|
|
.charsheet .sheet-wrapper .sheet-col.sheet-skills div.table-cell:nth-child(4) {
|
|
background:#e8e8e8;
|
|
}
|
|
.charsheet .sheet-wrapper .sheet-col.sheet-skills div.table-cell:nth-child(5) {
|
|
background:#e0e0e0;
|
|
}
|
|
.charsheet .sheet-wrapper .sheet-col.sheet-skills div.table-cell:nth-child(6) {
|
|
background:#d8d8d8;
|
|
}
|
|
.charsheet .sheet-wrapper .sheet-col.sheet-skills div.table-cell:last-child {
|
|
width : 12%;
|
|
height : 24px;
|
|
border : 1px solid gray;
|
|
padding-right:6px;
|
|
text-align: center;
|
|
}
|
|
|
|
.charsheet .sheet-wrapper .vertical {
|
|
font-weight:bold;
|
|
writing-mode: vertical-rl;
|
|
text-align:right;
|
|
padding-bottom:4px;
|
|
}
|
|
|
|
.charsheet .sheet-wrapper .table-row .skill {
|
|
font-weight:bold;
|
|
}
|
|
|
|
.charsheet .sheet-wrapper .table-row.skill .skillname{
|
|
position: relative;
|
|
/*display: inline-block;*/
|
|
padding : 2px;
|
|
}
|
|
|
|
.charsheet .sheet-wrapper .table-row.skill .skillname:hover .skillvaluehovertext {
|
|
visibility: visible;
|
|
}
|
|
.charsheet .sheet-wrapper .table-row.skill .skillname .skillvaluehovertext input {
|
|
color:white;
|
|
text-align: center;
|
|
font-size:1.8em;
|
|
font-weight:bold;
|
|
}
|
|
|
|
.charsheet .sheet-wrapper .table-row.skill .skillname .skillvaluehovertext .specials {
|
|
color:#0aff37;
|
|
font-size:1.3em;
|
|
font-weight:bold;
|
|
}
|
|
.charsheet .sheet-wrapper .table-row.skill .skillname .skillvaluehovertext{
|
|
visibility: hidden;
|
|
width: 120px;
|
|
background-color: black;
|
|
color: #ffffff;
|
|
text-align: center;
|
|
padding: 5px 0;
|
|
border-radius: 6px;
|
|
|
|
position: absolute;
|
|
z-index: 1;
|
|
top: 5px;
|
|
left: 40%;
|
|
}
|
|
|
|
|
|
.charsheet .sheet-wrapper .sheet-item .sheet-limitfield {
|
|
background: #6e6663;
|
|
color: #ffffff;
|
|
padding:5px;
|
|
font-size:1.1em;
|
|
font-weight:bold;
|
|
}
|
|
|
|
.charsheet .sheet-wrapper .sheet-item .emphasis {
|
|
|
|
background: #325207;
|
|
color: #ffffff;
|
|
padding:4px;
|
|
font-size:1.2em;
|
|
font-weight:bold;
|
|
}
|
|
|
|
.charsheet .sheet-wrapper .weighttotalarea .weightvaluehovertext{
|
|
visibility: hidden;
|
|
width: 120px;
|
|
background-color: black;
|
|
color: #ffffff;
|
|
text-align: center;
|
|
padding: 1px 0;
|
|
border-radius: 1px;
|
|
|
|
position: absolute;
|
|
z-index: 1;
|
|
top: 5px;
|
|
left: 10%;
|
|
}
|
|
.charsheet .sheet-wrapper .table-row.skill textarea{
|
|
height:1.9em;
|
|
background:#fcffd4;
|
|
line-height:0.83;
|
|
}
|
|
|
|
|
|
.charsheet .sheet-wrapper .sheet-skills input[type="number"],
|
|
.charsheet .sheet-wrapper .sheet-quickborder input[type="number"] {
|
|
text-align: center;
|
|
}
|
|
|
|
.charsheet .sheet-wrapper .sheet-transparent {
|
|
background: transparent;
|
|
border : transparent;
|
|
}
|
|
|
|
.charsheet .sheet-wrapper .sheet-inline {
|
|
display: inline-block;
|
|
}
|
|
|
|
.charsheet .sheet-wrapper .sheet-quickborder {
|
|
border : 2px solid black;
|
|
padding : 3px;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.charsheet .sheet-wrapper .sheet-uppercase {
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.charsheet .sheet-wrapper .sheet-uppercase label {
|
|
text-align: center;
|
|
}
|
|
|
|
.charsheet .sheet-wrapper .sheet-armourblock {
|
|
text-align: center;
|
|
margin : auto auto 5px auto;
|
|
width : calc(33% - 3px);
|
|
display : inline-block;
|
|
}
|
|
|
|
.charsheet .sheet-wrapper .sheet-armourblock label {
|
|
text-align : center;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.charsheet .sheet-wrapper .sheet-armourblock input {
|
|
text-align: center;
|
|
font-size : 1.1em;
|
|
}
|
|
|
|
/* Rows and Items */
|
|
|
|
.charsheet .sheet-wrapper .sheet-row {
|
|
height: 25px;
|
|
margin: 0 0 2px;
|
|
}
|
|
|
|
.charsheet .sheet-wrapper .sheet-lowrow {
|
|
height: 18px;
|
|
margin: 0 2px 2px 0;
|
|
}
|
|
|
|
.charsheet .sheet-wrapper .content-block {
|
|
padding-left:3px;
|
|
}
|
|
|
|
.charsheet .sheet-wrapper .sheet-highrow{
|
|
height: 43px;
|
|
margin: 0 0 1px;
|
|
}
|
|
|
|
.charsheet .sheet-wrapper .sheet-doublerow{
|
|
height: 61px;
|
|
margin: 0 0 2px;
|
|
}
|
|
|
|
.charsheet .sheet-wrapper .sheet-row.highlight1{
|
|
background:#fcfcf2;
|
|
}
|
|
|
|
.charsheet .sheet-wrapper .sheet-row.highlight2{
|
|
background:#f7f1f0;
|
|
}
|
|
|
|
.charsheet .sheet-wrapper .sheet-alternative:nth-child(even) {
|
|
background-color: #DBB0B1;
|
|
}
|
|
|
|
.charsheet .sheet-wrapper .sheet-header {
|
|
height: 20px;
|
|
margin: 0;
|
|
}
|
|
|
|
.charsheet .sheet-wrapper .sheet-header label {
|
|
padding : 0;
|
|
font-size : 10px;
|
|
height : 20px;
|
|
line-height: 20px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.charsheet .sheet-wrapper .sheet-item.inputblock {
|
|
border-left:1px solid black;
|
|
border-right:1px solid black;
|
|
|
|
}
|
|
|
|
.charsheet .sheet-wrapper .sheet-item.inputblock input{
|
|
background:white;
|
|
font-weight:bold;
|
|
}
|
|
|
|
.charsheet .sheet-wrapper .sheet-item {
|
|
display : inline-block;
|
|
width : 100%;
|
|
height : 28px;
|
|
vertical-align: middle;
|
|
margin : 0 -2px;
|
|
text-align : left;
|
|
padding : 3px 2px;
|
|
}
|
|
|
|
.charsheet .sheet-wrapper .sheet-item.main {
|
|
font-size-adjust : 0.55;
|
|
background:#fcf8f2;
|
|
}
|
|
|
|
.charsheet .sheet-wrapper .sheet-item.bignum input{
|
|
font-weight : bold;
|
|
font-size : 20px;
|
|
text-align : center;
|
|
}
|
|
.charsheet .sheet-wrapper .sheet-rank-wrapper {
|
|
border: double black;
|
|
margin-top: 5px;
|
|
margin-bottom: 5px;
|
|
}
|
|
.charsheet .sheet-wrapper .sheet-item.charinput {
|
|
display : inline-block !important;
|
|
position : relative !important;
|
|
overflow : auto;
|
|
vertical-align: top;
|
|
height : 63px;
|
|
background : none;
|
|
}
|
|
|
|
|
|
.charsheet .sheet-wrapper .sheet-item.fullinput {
|
|
display : inline-block !important;
|
|
position : relative !important;
|
|
overflow : none;
|
|
vertical-align: top;
|
|
height : 63px;
|
|
background : #f2f6fc;
|
|
}
|
|
|
|
.charsheet .sheet-wrapper .sheet-item.fullinputInline {
|
|
display : inline-block !important;
|
|
position : absolute !important;
|
|
overflow : auto;
|
|
vertical-align: middle;
|
|
height : 46px;
|
|
background :#fcf8f2;
|
|
}
|
|
|
|
.charsheet .sheet-wrapper .sheet-item label.insideHeading {
|
|
float : left !important;
|
|
text-align : left !important;
|
|
padding-left : 3px;
|
|
width : 99%;
|
|
position:absolute;
|
|
|
|
}
|
|
|
|
.charsheet .sheet-wrapper .sheet-item label.characteristic-heading {
|
|
font-size: 11px;
|
|
font-weight : 800;
|
|
background: #f6fdd2;
|
|
border: 1px solid red;
|
|
margin-left: -2px;
|
|
text-align:center;
|
|
|
|
}
|
|
.charsheet .sheet-wrapper .sheet-item label.special {
|
|
font-size:0.8em;
|
|
margin-top:-27px;
|
|
|
|
}
|
|
.charsheet .sheet-wrapper .sheet-item textarea.special {
|
|
height:1.5em;
|
|
margin-top:-22px;
|
|
background:#fcffd4;
|
|
|
|
}
|
|
|
|
.charsheet .sheet-wrapper .bonusbox {
|
|
float : left !important;
|
|
text-align : left !important;
|
|
margin-left : 29%;
|
|
height : 25px;
|
|
width : 18%;
|
|
position : absolute;
|
|
border : 1px solid red;
|
|
|
|
}
|
|
|
|
.charsheet .sheet-wrapper .sheet-item label.borderedLabel {
|
|
padding-left : 3px;
|
|
height:98%;
|
|
border: 1px solid black;
|
|
background: white;
|
|
|
|
}
|
|
|
|
|
|
.charsheet .sheet-wrapper .sheet-item textarea.fullinputTextArea{
|
|
height : 80%;
|
|
background : none !important;
|
|
width : 99%;
|
|
float : left !important;
|
|
display : block !important;
|
|
text-indent : 20%;
|
|
resize: none;
|
|
position:absolute;
|
|
}
|
|
|
|
.charsheet .sheet-wrapper .sheet-item textarea.fullinputTextAreaInline{
|
|
height : 85%;
|
|
background : none !important;
|
|
width : 99%;
|
|
float : none !important;
|
|
text-indent : 0%;
|
|
resize: none;
|
|
}
|
|
|
|
.charsheet .sheet-wrapper .sheet-brackets {
|
|
border-left : 1px solid #aaa;
|
|
border-right : 1px solid #aaa;
|
|
border-radius: 12px;
|
|
}
|
|
|
|
.charsheet .sheet-wrapper .sheet-item.sheet-center {
|
|
text-align: center;
|
|
}
|
|
|
|
.charsheet .sheet-wrapper .sheet-item.sheet-multiline label {
|
|
line-height: 12px;
|
|
padding-top: 1px;
|
|
}
|
|
|
|
.charsheet .sheet-wrapper .sheet-item.sheet-puny {
|
|
width: calc(10% - 3%);
|
|
}
|
|
|
|
.charsheet .sheet-wrapper .sheet-item.sheet-little {
|
|
width: calc(12% - 0.5%);
|
|
}
|
|
|
|
.charsheet .sheet-wrapper .sheet-item.sheet-tiny {
|
|
width: calc(15% - 2%);
|
|
}
|
|
|
|
.charsheet .sheet-wrapper .sheet-item.sheet-small {
|
|
width: calc(20% - 0.5%);
|
|
}
|
|
|
|
.charsheet .sheet-wrapper textarea.sheet-small {
|
|
height: 32px;
|
|
}
|
|
|
|
.charsheet .sheet-wrapper .sheet-item.sheet-med {
|
|
width: calc(30% - 0.5%);
|
|
}
|
|
|
|
.charsheet .sheet-wrapper .sheet-item.sheet-large {
|
|
width: calc(40% - 3%);
|
|
}
|
|
|
|
.charsheet .sheet-wrapper .sheet-item.sheet-big {
|
|
width: calc(50% - 11%);
|
|
}
|
|
|
|
.charsheet .sheet-wrapper .sheet-item.sheet-morebig {
|
|
width: calc(60% - 3%);
|
|
}
|
|
|
|
.charsheet .sheet-wrapper .sheet-item.sheet-bigger {
|
|
width: calc(70% - 3%);
|
|
}
|
|
|
|
.charsheet .sheet-wrapper .sheet-item.sheet-huge {
|
|
width: calc(80% - 3%);
|
|
}
|
|
|
|
|
|
.charsheet .sheet-wrapper .sheet-characteristics select {
|
|
display : inline-block;
|
|
width : 100%;
|
|
text-align : center;
|
|
background-color: transparent;
|
|
border : 0;
|
|
font-weight : bold;
|
|
}
|
|
|
|
.charsheet .sheet-wrapper .sheet-characteristics input {
|
|
display : block;
|
|
border : 2px solid gray;
|
|
background-color: white;
|
|
width : 70%;
|
|
height : 25px;
|
|
margin : auto;
|
|
text-align : center;
|
|
font-weight : bolder;
|
|
font-family : inherit;
|
|
font-size : 2em;
|
|
letter-spacing : 5px;
|
|
|
|
}
|
|
|
|
|
|
/* Footer */
|
|
|
|
.charsheet .sheet-wrapper .sheet-footer {
|
|
display : inline-block;
|
|
padding : 5px;
|
|
vertical-align: super;
|
|
font-size : 0.8em;
|
|
line-height : 0.8em;
|
|
text-align : center;
|
|
}
|
|
|
|
.charsheet .sheet-wrapper .sheet-innerfooter {
|
|
display: inline-block;
|
|
border : inherit;
|
|
width : 47%;
|
|
padding: 2px;
|
|
}
|
|
|
|
.charsheet .sheet-wrapper .sheet-innerfooter input {
|
|
width : 100%;
|
|
margin-top: -7px;
|
|
}
|
|
|
|
.sheet-mainleft {
|
|
width : 39%;
|
|
float : left;
|
|
padding-right: 1%;
|
|
}
|
|
|
|
.sheet-mainright {
|
|
width: 39%;
|
|
float: right;
|
|
}
|
|
|
|
|
|
|
|
.charsheet .sheet-wrapper .sheet-rangehide{
|
|
display : none;
|
|
position : absolute;
|
|
top : -15px;
|
|
background-image : url(http://i.imgur.com/5GbMHfg.png);
|
|
background-position: center;
|
|
border : 1px solid #aaa;
|
|
box-shadow : inset 0 1px 1px rgba(0, 0, 0, 0.075);
|
|
border-radius : 3px;
|
|
padding : 3px;
|
|
}
|
|
|
|
.charsheet .sheet-wrapper .sheet-rangehover:hover ~ .sheet-rangehide {
|
|
display : block;
|
|
}
|
|
|