mirror of
https://github.com/Nighthawk42/roll20-character-sheets.git
synced 2026-09-04 14:12:28 +00:00
Selanye
7b41a4adab
Fixed instructions and made them more clear Fixed the white pixels under the tab names Fixed a translation Error with Spirit Burn.
612 lines
11 KiB
CSS
612 lines
11 KiB
CSS
/*Collapsing + Hiding Sections */
|
|
|
|
/*
|
|
Kamigakuri Green: 048B84
|
|
Kamigakuri Yellow: FEFF59
|
|
Kamigakuri Brown: DEB16A
|
|
*/
|
|
|
|
/*Main Stats Bubble */
|
|
|
|
.sheet-input-statsMain input[type="number"] {
|
|
min-width: 50px;
|
|
max-width: 75%;
|
|
width: 100%;
|
|
border: 3px black;
|
|
border-radius: 25px;
|
|
margin-top: 5px;
|
|
margin-bottom: 1px;
|
|
margin-right: 15%;
|
|
margin-left: 15%;
|
|
font-size: 30px;
|
|
text-align: center;
|
|
}
|
|
|
|
|
|
/*TABS*/
|
|
div.sheet-tabs-content {
|
|
display: none;
|
|
}
|
|
|
|
input.sheet-tabs[value="1"]:checked ~ div.sheet-tabs1,
|
|
input.sheet-tabs[value="2"]:checked ~ div.sheet-tabs2,
|
|
input.sheet-tabs[value="3"]:checked ~ div.sheet-tabs3,
|
|
input.sheet-tabs[value="4"]:checked ~ div.sheet-tabs4,
|
|
input.sheet-tabs-pictos[value="5"]:checked ~ div.sheet-tabs5,
|
|
input.sheet-tabs-small[value="6"]:checked ~ div.sheet-tabs6
|
|
{
|
|
display: block;
|
|
width:100%;
|
|
}
|
|
|
|
/* TABS STYLE */
|
|
.sheet-tabs{
|
|
opacity:0;
|
|
width: 150px;
|
|
}
|
|
|
|
.sheet-tab-label{
|
|
margin-left: -150px;
|
|
width: 150px;
|
|
text-align: center;
|
|
font-size: 120%;
|
|
color: #FEFF59;
|
|
background-color: #048B84;
|
|
display:inline-block;
|
|
border-radius: 15px 15px 0px 0px;
|
|
padding-bottom: -1px;
|
|
}
|
|
|
|
.sheet-tabs-pictos{
|
|
opacity:0;
|
|
width: 50px;
|
|
}
|
|
|
|
.sheet-tab-label-pictos{
|
|
font-family: "Pictos";
|
|
margin-left: -50px;
|
|
width: 50px;
|
|
font-size: 110%;
|
|
|
|
}
|
|
|
|
|
|
.sheet-tabs-small{
|
|
opacity:0;
|
|
width: 100px;
|
|
}
|
|
|
|
.sheet-tab-label-small{
|
|
margin-left: -100px;
|
|
width: 100px;
|
|
}
|
|
|
|
.sheet-tabs-pictos:checked + div.sheet-tab-label-pictos,
|
|
.sheet-tabs-small:checked + div.sheet-tab-label-small,
|
|
.sheet-tabs:checked + div.sheet-tab-label {
|
|
font-weight:700;
|
|
background-color: #DEB16A;
|
|
color: black;
|
|
}
|
|
|
|
/*Roll Template*/
|
|
.sheet-rolltemplate-mononoke table,
|
|
.sheet-rolltemplate-talent table,
|
|
.sheet-rolltemplate-spirit table {
|
|
width: 100%;
|
|
|
|
}
|
|
|
|
.sheet-rolltemplate-mononoke td,
|
|
.sheet-rolltemplate-talent td,
|
|
.sheet-rolltemplate-spirit td {
|
|
width: auto;
|
|
text-align: center;
|
|
min-width: 20px;
|
|
padding-left: 5px;
|
|
padding-right: 5px;
|
|
}
|
|
|
|
.sheet-rolltemplate-background {
|
|
background-color: #048B84;
|
|
font-weight: bold;
|
|
color: #FEFF59;
|
|
}
|
|
|
|
.sheet-rolltemplate-mononoke td,
|
|
.sheet-rolltemplate-talent td {
|
|
border-bottom: solid 1px black;
|
|
}
|
|
|
|
.sheet-rolltemplate-mononoke div.sheet-template-container,
|
|
.sheet-rolltemplate-talent div.sheet-template-container,
|
|
.sheet-rolltemplate-spirit div.sheet-template-container {
|
|
border: 2px solid #048B84;
|
|
border-radius: 5px 5px 5px 5px;
|
|
background-color: #DCCCB9;
|
|
max-width: 400px;
|
|
}
|
|
|
|
.sheet-rolltemplate-mononoke .sheet-template-header,
|
|
.sheet-rolltemplate-talent .sheet-template-header,
|
|
.sheet-rolltemplate-spirit .sheet-template-header {
|
|
background-color: #048B84;
|
|
color: #FEFF59;
|
|
padding: 2px;
|
|
border-bottom: 1px solid black;
|
|
text-align: center;
|
|
font-variant: small-caps;
|
|
font-family: Trebuchet MS,Lucida Grande,Lucida Sans Unicode,Lucida Sans,Tahoma,sans-serif;
|
|
line-height: 1.4em;
|
|
font-size: 1.3em;
|
|
}
|
|
|
|
|
|
.sheet-rolltemplate-mononoke .sheet-template-header2,
|
|
.sheet-rolltemplate-talent .sheet-template-header2 {
|
|
line-height: 0.7em;
|
|
font-size: 0.8em;
|
|
background-color: #048B84;
|
|
color: #FEFF59;
|
|
padding: 2px;
|
|
text-align: center;
|
|
font-variant: small-caps;
|
|
font-family: Trebuchet MS,Lucida Grande,Lucida Sans Unicode,Lucida Sans,Tahoma,sans-serif;
|
|
}
|
|
|
|
}
|
|
|
|
.sheet-rolltemplate-mononoke div,
|
|
.sheet-rolltemplate-talent div,
|
|
.sheet-rolltemplate-spirit div {
|
|
padding: 5px;
|
|
border-bottom: 1px solid black;
|
|
font-family: Trebuchet MS,Lucida Grande,Lucida Sans Unicode,Lucida Sans,Tahoma,sans-serif;
|
|
}
|
|
|
|
.sheet-rolltemplate-spirit div {
|
|
font-variant: small-caps;
|
|
}
|
|
|
|
.sheet-rolltemplate-spirit .inlinerollresult {
|
|
display: inline-block;
|
|
min-width: 1.5em;
|
|
text-align: center;
|
|
border: 2px solid transparent;
|
|
background-color: #DCCCB9;
|
|
color: #DCCCB9;
|
|
font-variant: small-caps;
|
|
font-family: Trebuchet MS,Lucida Grande,Lucida Sans Unicode,Lucida Sans,Tahoma,sans-serif;
|
|
}
|
|
|
|
.sheet-rolltemplate-spirit .inlinerollresult.fullcrit {
|
|
border: 2px solid #048B84;
|
|
color: #FEFF59;
|
|
background-color: #048B84;
|
|
}
|
|
|
|
.sheet-rolltemplate-spirit .inlinerollresult.fullfail {
|
|
border: 2px solid transparent;
|
|
}
|
|
|
|
.sheet-rolltemplate-spirit .inlinerollresult.importantroll {
|
|
border: 2px solid transparent;
|
|
}
|
|
|
|
|
|
/* CHECK BOXES */
|
|
|
|
input.sheet-arrow
|
|
{
|
|
float: left;
|
|
}
|
|
|
|
input.sheet-arrow:not(:checked) ~ div.sheet-body
|
|
{
|
|
display: none;
|
|
}
|
|
|
|
input.sheet-arrow-two
|
|
{
|
|
float: right;
|
|
}
|
|
|
|
input.sheet-arrow-two:not(:checked) ~ div.sheet-body
|
|
{
|
|
display: none;
|
|
}
|
|
|
|
|
|
|
|
/* NUMBER BOX */
|
|
|
|
input[type=number]::-webkit-inner-spin-button,
|
|
input[type=number]::-webkit-outer-spin-button {
|
|
-webkit-appearance: none;
|
|
margin: 0;
|
|
}
|
|
|
|
input[type=number] {
|
|
-moz-appearance: textfield;
|
|
appearance: textfield;
|
|
margin: 0;
|
|
}
|
|
|
|
|
|
.sheet-body
|
|
{
|
|
|
|
}
|
|
|
|
/* CHECK BOXES */
|
|
|
|
input.sheet-hideopt[type="checkbox"]
|
|
{
|
|
opacity: 0;
|
|
width: 16px;
|
|
height: 16px;
|
|
position: relative;
|
|
top: 5px;
|
|
left: 9px;
|
|
margin: -10px;
|
|
cursor: pointer;
|
|
z-index: 1;
|
|
}
|
|
|
|
/* Fake checkbox */
|
|
input.sheet-hideopt[type="checkbox"] + span::before
|
|
{
|
|
margin-right: 4px;
|
|
line-height: 1px;
|
|
text-align: center;
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
|
|
content: "j";
|
|
width: 14px;
|
|
height: 3px;
|
|
font-size: 20px;
|
|
font-family: "dicefontd6";
|
|
}
|
|
input.sheet-hideopt[type="checkbox"]:checked + span::before
|
|
{
|
|
content: "J";
|
|
font-family: "dicefontd6";
|
|
color: red;
|
|
}
|
|
|
|
|
|
|
|
input.sheet-collapse[type="checkbox"]
|
|
{
|
|
opacity: 0;
|
|
width: 16px;
|
|
height: 16px;
|
|
position: relative;
|
|
top: 5px;
|
|
left: 9px;
|
|
margin: -10px;
|
|
cursor: pointer;
|
|
z-index: 1;
|
|
}
|
|
|
|
/* Fake checkbox */
|
|
input.sheet-collapse[type="checkbox"] + span::before
|
|
{
|
|
margin-right: 4px;
|
|
line-height: 1px;
|
|
text-align: center;
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
|
|
content: "+";
|
|
width: 14px;
|
|
height: 3px;
|
|
font-size: 15px;
|
|
font-family: "Pictos";
|
|
}
|
|
input.sheet-collapse[type="checkbox"]:checked + span::before
|
|
{
|
|
content: "-";
|
|
font-family: "Pictos";
|
|
}
|
|
|
|
input.sheet-equipment[type="checkbox"]
|
|
{
|
|
opacity: 0;
|
|
width: 26px;
|
|
height: 36px;
|
|
position: relative;
|
|
top: 1px;
|
|
left: 5px;
|
|
margin: -10px;
|
|
cursor: pointer;
|
|
z-index: 1;
|
|
}
|
|
|
|
input.sheet-equipment[type="checkbox"] + span::before
|
|
{
|
|
margin-right: 4px;
|
|
line-height: 1px;
|
|
text-align: center;
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
color: darkred;
|
|
content: "d";
|
|
width: 14px;
|
|
height: 5px;
|
|
font-size: 15px;
|
|
font-family: "Pictos";
|
|
}
|
|
input.sheet-equipment[type="checkbox"]:checked + span::before
|
|
{
|
|
content: "3";
|
|
font-family: "Pictos";
|
|
color: green;
|
|
}
|
|
|
|
/* RADIO BUTTONS*/
|
|
input.sheet-normal[type="radio"]
|
|
{
|
|
opacity: 0;
|
|
width: 30px;
|
|
height: 36px;
|
|
position: relative;
|
|
top: 5px;
|
|
left: 6px;
|
|
margin: -15px;
|
|
cursor: pointer;
|
|
z-index: 1;
|
|
}
|
|
|
|
input.sheet-normal[type="radio"] + span::before
|
|
{
|
|
margin-right: 2px;
|
|
border: solid 1px #a8a8a8;
|
|
line-height: 12px;
|
|
text-align: center;
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
|
|
box-shadow: 0 0 2px #ccc;
|
|
|
|
color:red;
|
|
background:#FEFF59;
|
|
|
|
content: "";
|
|
width: 21px;
|
|
height: 21px;
|
|
font-size: 3em;
|
|
text-shadow:none;
|
|
|
|
|
|
border-radius: 50%;
|
|
}
|
|
|
|
/* Clear spirit Overflow */
|
|
input.sheet-zero[type="radio"]:checked + span::before
|
|
{
|
|
opacity: 0;
|
|
}
|
|
|
|
input.sheet-zero[type="radio"]:hover + span::before
|
|
{
|
|
opacity: 1;
|
|
}
|
|
|
|
input.sheet-zero[type="radio"] + span::before
|
|
{
|
|
|
|
font-size: 25px;
|
|
content: "x";
|
|
opacity: 0.65;
|
|
background:black;
|
|
|
|
}
|
|
|
|
/* -----Remove dot from all radios _after_ selected one----- */
|
|
input.sheet-normal[type="radio"]:checked ~ input.sheet-normal[type="radio"] + span::before
|
|
{
|
|
content: "";
|
|
background:white;
|
|
}
|
|
|
|
.charsheet {
|
|
min-width: 850px;
|
|
}
|
|
|
|
.sheet-header {
|
|
|
|
}
|
|
|
|
.sheet-section {
|
|
float: left;
|
|
width: 100%;
|
|
padding-top: 15px;
|
|
background: #DCCCB9;
|
|
color: black;
|
|
font-weight: bold;
|
|
border: 15px #0f0;\
|
|
min-width: 848px;
|
|
}
|
|
|
|
.sheet-equipment-header {
|
|
width: 99%;
|
|
text-: center;
|
|
margin: 5px 2;
|
|
padding-left: 10px;
|
|
background: #048B84;
|
|
color: #FEFF59;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.sheet-section2 {
|
|
float: left;
|
|
width: 99%;
|
|
margin: 5px 2;
|
|
margin-bottom: 4px;
|
|
background: #048B84;
|
|
color: #FEFF59;
|
|
font-weight: bold;
|
|
border: 3px solid black;
|
|
min-width: 848px;
|
|
}
|
|
|
|
|
|
label,
|
|
select {
|
|
margin: 0;
|
|
}
|
|
|
|
/* TEXT AUTO EXPANDING AREA */
|
|
|
|
.sheet-expand {
|
|
position: relative;
|
|
cursor: text;
|
|
word-wrap: break-word;
|
|
min-height: 42px;
|
|
}
|
|
.sheet-expand span {
|
|
visibility: hidden;
|
|
white-space: pre-wrap;
|
|
display: block;
|
|
}
|
|
.sheet-expand textarea {
|
|
position: absolute;
|
|
z-index: 1;
|
|
top: 0;
|
|
left: 0;
|
|
margin: 0;
|
|
overflow: hidden;
|
|
resize: none;
|
|
height: 100%;
|
|
width: 100%;
|
|
display: block;
|
|
box-sizing: border-box;
|
|
border: solid 1px black;
|
|
border-radius: 0;
|
|
box-shadow: none;
|
|
padding: inherit;
|
|
}
|
|
|
|
|
|
/* Table Stuff */
|
|
.sheet-table {
|
|
display: table;
|
|
width: 100%;
|
|
border-collapse:collapse;
|
|
border-spacing: 5px;
|
|
table-layout: fixed;
|
|
}
|
|
|
|
.sheet-table-row {
|
|
display: table-row;
|
|
width: 100%;
|
|
}
|
|
|
|
.sheet-table-cell {
|
|
display: table-cell;
|
|
vertical-align: middle;
|
|
margin-right: 3px;
|
|
margin-left: 3px;
|
|
padding-right: 0px;
|
|
padding-left: 1px;
|
|
}
|
|
|
|
/* Sizes */
|
|
.sheet-section-font125{font-size: 145%;}
|
|
.sheet-section-font100{font-size: 100%;}
|
|
.sheet-section-font85{font-size: 85%;}
|
|
.sheet-section-font80{font-size: 80%;}
|
|
.sheet-section-font95{font-size: 95%;}
|
|
.sheet-section-font75{font-size: 75%;}
|
|
.sheet-tracker-font{font-size: 75%;}
|
|
.sheet-section-font45{font-size: 45%;}
|
|
|
|
.sheet-cell-a { width: auto; }
|
|
.sheet-cell-3 { width: 3%; }
|
|
.sheet-cell-5 { width: 5%; }
|
|
.sheet-cell-8 { width: 8%; }
|
|
.sheet-cell-10 { width: 10%; }
|
|
.sheet-cell-12 { width: 12%; }
|
|
.sheet-cell-15 { width: 15%; }
|
|
.sheet-cell-20 { width: 20%; }
|
|
.sheet-cell-25 { width: 25%; }
|
|
.sheet-cell-30 { width: 30%; }
|
|
.sheet-cell-35 { width: 35%; }
|
|
.sheet-cell-40 { width: 40%; }
|
|
.sheet-cell-41 { width: 41%; }
|
|
.sheet-cell-47 { width: 47%; }
|
|
.sheet-cell-50 { width: 50%; }
|
|
.sheet-cell-60 { width: 70%; }
|
|
.sheet-cell-69 { width: 69%; }
|
|
.sheet-cell-75 { width: 75%; }
|
|
.sheet-cell-95 { width: 100%; }
|
|
.sheet-cell-100 { width: 100%; }
|
|
.sheet-cell-button {width: 23px; }
|
|
.sheet-cell-check {
|
|
padding-right: 15px;
|
|
padding-left: 15px;
|
|
}
|
|
.sheet-cell-center{text-align: center;}
|
|
.sheet-cell-right{text-align: right;}
|
|
.sheet-cell-left{text-align: left;}
|
|
.sheet-cell-boarder{border: solid 1px;}
|
|
|
|
|
|
.sheet-buffer{
|
|
height: 5px;
|
|
background-color: #048B84;
|
|
}
|
|
|
|
/* Spirit Dice Pool */
|
|
|
|
select.sheet-cell-drop {
|
|
vertical-align: top;
|
|
width: 100%;
|
|
}
|
|
|
|
button[type=roll]{
|
|
background-color:#048B84 !important;
|
|
border-color: black !important;
|
|
background-image:none;
|
|
color:#FEFF59 !important;
|
|
text-shadow: #016560;
|
|
text-shadow:none;
|
|
}
|
|
|
|
|
|
input[type="number"],
|
|
input[type="text"], textarea {
|
|
|
|
background-color : #FDFDFD;
|
|
|
|
}
|
|
|
|
.sheet-input-border input[type="text"],
|
|
.sheet-input-border input[type="number"] {
|
|
min-width: 15px;
|
|
max-width: 100%;
|
|
width: 100%;
|
|
border-radius: 1px;
|
|
border: 1px solid;
|
|
}
|
|
|
|
.sheet-input-AutoCalc input[type="number"] {
|
|
min-width: 35px;
|
|
max-width: 100%;
|
|
width: 100%;
|
|
border: 2px solid #FEFF59;
|
|
border-radius: 15px;
|
|
background: #048B84;
|
|
color: #FEFF59;
|
|
}
|
|
|
|
.sheet-input-border input[type="number"] {
|
|
min-width: 15px;
|
|
max-width: 100%;
|
|
width: 100%;
|
|
text-align: center;
|
|
border: 1px solid black;
|
|
}
|