Having an error with trying to get the character panel white background to go away. CSS Coding here: .ui-dialog .charsheet [data-groupname="repeating_moves"] >.repitem.repitembroken {
display: none;
} /* Ugly workaround for duplicated move repitems */
input[type='number']::-webkit-outer-spin-button,
input[type='number']::-webkit-inner-spin-button,
input[type='number'] {
-webkit-appearance: none;
-moz-appearance: textfield !important;
margin: 0;
} /* Remove arrows from numerical boxes */
input.sheet-oldtab11:not(:checked) ~ .sheet-oldtab11,
input.sheet-oldtab12:not(:checked) ~ .sheet-oldtab12,
input.sheet-oldtab13:not(:checked) ~ .sheet-oldtab13,
input.sheet-oldtab14:not(:checked) ~ .sheet-oldtab14,
input.sheet-oldtab15:not(:checked) ~ .sheet-oldtab15{
display: none;
}
.charsheet {
width: 750px !important;
margin: 0 auto !important;
padding: 5px;
}
.sheet-darkmode {
background-color: #111 !important;
color: #b6bcf0;
}
.sheet-darkmode .sheetform {
background-color: #111 !important;
}
.ui-dialog {
color: var(--black);
}
div.sheet-2colrow {
background-color: #111;
}
div.sheet-3colrow {
background-color: #111;
}
div.sheet-oldtab1 {
background-color: #111;
}
element.style {
background-color: #111;
color: #b6bcf0;
}
.charsheet .sheet-tab [type=radio]:checked ~ label ~ .sheet-content {
background-color: #111;
}
.charsheet .sheet-tab label {
background-color: #112;
}
.charsheet input.sheet-oldtab {
color: #000;
}
.sheet-darkmode .sheetform {
background-color: #111;
}
sheet main-header {
background-color: #111;
}
td.sheet-table-header {
background-color: #111;
color: #b6bcf0;
}
.ui-dialog .charsheet input[type=number] {
background-color: #111;
width: 4em;
text-align: center;
}
td {
background-color: #111;
}
tr {
color: #eee;
}
input {
color: #eee;
background-color: #111;
}
.charsheet .sheet-shortfield3 {
width: 66.2%;
}
.charsheet input.sheet-arrow[type="checkbox"] {
-webkit-transition: all 0.6s ease-out;
-moz-transition: all 0.6s ease-out;
-ms-transition: all 0.6s ease-out;
-o-transition: all 0.6s ease-out;
transition: all 0.6s ease-out;
}
.charsheet input:disabled, .charsheet input:disabled.sheet-inputbox, .charsheet input:read-only {
-webkit-transition: all 0.6s ease-out;
-moz-transition: all 0.6s ease-out;
-ms-transition: all 0.6s ease-out;
-o-transition: all 0.6s ease-out;
transition: all 0.6s ease-out; }
}
.charsheet .sheet-content {
padding: 20px !important;
background: #111 !important;
}
table.sheet-status-table td:nth-child(odd) {
width:40%;
}
table.sheet-status-table td:nth-child(even) {
width:10%;
}
input.sheet-oldtab {
width: calc(20% - 4px);
max-width: 150px;
outline: none !important;
position: relative;
cursor: pointer;
z-index: 1;
appearance:none; /* Allows ::before for Firefox Browsers */
}
.ui-dialog .charsheet input[type=number] {
background: #111;
width: 4em;
text-align: center;
}
.ui-dialog .charsheet input.sheet-oldtab {
height: 20px;
border: 0px;
background: #111;
} /* Necessary to override Roll20 */
input.sheet-oldtab11 {
margin-left: 1px;
}
input.sheet-oldtab::before {
content: attr(title);
display: inline-block;
background: #000;
border: solid 1px #a8a8a8;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
color: #b6bcf0 !important;
font-size: 14px;
font-weight: bold;
text-align: center;
width: 100%;
height: 20px;
}
input.sheet-oldtab:checked::before {
border-bottom-color: #112;
}
.sheet-oldtab-br {
border-bottom: 1px solid #a8a8a8;
margin-bottom: 5px;
margin-top: 1px;
}
.sheet-tabs {
position: relative;
min-height: 400px; /* This part sucks */
clear: both;
margin: 25px 0;
color: #b6bcf0 !important;
}
.sheet-tab {
/*float: left; */
-webkit-transition: all 0.6s ease-out;
-moz-transition: all 0.6s ease-out;
-ms-transition: all 0.6s ease-out;
-o-transition: all 0.6s ease-out;
transition: all 0.6s ease-out;
}
.sheet-tab label {
background: #111;
padding: 10px;
border: 1px solid #ccc;
margin-left: -1px;
position: relative;
left: 1px;
width: 80px;
display: block;
-webkit-transition: all 0.6s ease-out;
-moz-transition: all 0.6s ease-out;
-ms-transition: all 0.6s ease-out;
-o-transition: all 0.6s ease-out;
transition: all 0.6s ease-out;
}
/*.sheet-clear { clear: both; }*/
.sheet-tab [type=radio] {
display: none;
}
.sheet-content {
position: absolute;
top: 0px;
left: 102px;
background: #112;
color: #b6bcf0 !important;
overflow: auto;
height: auto;
right: 0;
bottom: 0;
padding: 0px;
border: 1px solid #ccc;
}
.sheet-tab [type=radio]:checked ~ label {
background: #000;
border-bottom: 1px solid black;
z-index: 2;
-webkit-transition: all 0.6s ease-out;
-moz-transition: all 0.6s ease-out;
-ms-transition: all 0.6s ease-out;
-o-transition: all 0.6s ease-out;
transition: all 0.6s ease-out;
}
.sheet-tab [type=radio]:checked ~ .sheet-content {
z-index: 3;
}
div.sheet-checklist {
display: none;
}
input.sheet-arrow[type="checkbox"] {
color: #E0E0E0;
opacity: 0;
width: 16px;
height: 16px;
position: relative;
top: 5px;
left: 6px;
margin: -10px;
cursor: pointer;
z-index: 1;
}
input.sheet-arrow[type="checkbox"] + span::before
{
margin-right: 4px;
line-height: 14px;
text-align: center;
display: inline-block;
vertical-align: middle;
float: left;
width: 14px;
height: 14px;
content: "▼";
color: #E0E0E0;
transform: rotate(-90deg);
-webkit-transition: all 0.6s ease-out;
-moz-transition: all 0.6s ease-out;
-ms-transition: all 0.6s ease-out;
-o-transition: all 0.6s ease-out;
transition: all 0.6s ease-out;
}
input.sheet-arrow[type="checkbox"]:checked + span::before {
width: 14px;
height: 14px;
content: "▼";
transform: rotate(0deg);
}
input.sheet-arrow[type="checkbox"]:checked + .sheet-table::before {
transform: rotate(0deg);
}
input.sheet-arrow {
float: left;
}
input.sheet-arrow:checked ~ table div.sheet-checklist {
display: block;
}
tr.sheet-featlist {
display: none;
}
input.sheet-arrow:checked ~ table tr.sheet-featlist {
display: table-row;
}
.sheet-rolltemplate-PTU table {
width: 100%;
border: 1px solid;
color: #b6bcf0 !important;
font-size: 1em;
font-family: "Helvetica Neue", Helvetica, sans-serif;
}
.sheet-rolltemplate-PTU th {
background-color: #111;
background-image: url('<a href="https://imgur.com/6xab85q.png" rel="nofollow">https://imgur.com/6xab85q.png</a>');
background-repeat: repeat;
color: #b6bcf0 !important;
padding: 2px 2px 2px 40px;
border-bottom: 1px solid black;
line-height: 1.6em;
font-size: 1.2em;
}
.sheet-rolltemplate-PTU .userscript-tcat {
font-weight: bold;
}
.sheet-rolltemplate-PTU td {
padding: 5px;
color: #b6bcf0 !important;
border-bottom: 1px solid black;
}
.sheet-rolltemplate-PTU tr:nth-child(odd) {
background-color: ##000 !important;
color: #b6bcf0 !important;
}
.sheet-rolltemplate-PTU tr:nth-child(even) {
background-color: ##000 !important;
color: #b6bcf0 !important;
}
.sheet-rolltemplate-PTU .inlinerollresult {
display: inline-block;
min-width: 1.5em;
text-align: center;
border: 2px solid rgba(167, 168, 170,1); /*Cool Gray 6 C*/
}
.sheet-rolltemplate-PTU .inlinerollresult.fullcrit {
border: 2px solid #3FB315;
}
.sheet-rolltemplate-PTU .inlinerollresult.fullfail {
border: 2px solid #B31515;
}
.sheet-rolltemplate-PTU .inlinerollresult.importantroll {
border: 2px solid #4A57ED;
}
.sheet-rolltemplate-PTU .sheet-hit {
background-color: #3ADF00;
text-align: center;
font-size: 150%;
font-family: ,Serif;
}
.sheet-rolltemplate-PTU .sheet-miss {
background-color: #DF0101;
text-align: center;
font-size: 150%;
font-family: "Courier New",Serif;
}
.sheet-table tr:nth-child(odd) {
background-color: #111;
}
.sheet-table tr:nth-child(even) {
background-color: #111;
}
.sheet-big-table tr:nth-child(even),
.sheet-left-half-table tr:nth-child(even),
.sheet-right-half-table tr:nth-child(even){
background-color: #111;
}
.sheet-shortfield{
width:100%;
background-color: #373a52 !important;
color: #b6bcf0 !important;
}
.sheet-shortfield2{
width:4em;
background-color: #373a52 !important;
color: #b6bcf0 !important;
}
.sheet-shortfield3{
width:64.5%;
background-color: #373a52 !important;
color: #b6bcf0 !important;
}
.sheet-shortfield4{
width:32%;
background-color: #373a52 !important;
color: #b6bcf0 !important;
}
.sheet-shortfield5{
width:85%;
background-color: #373a52 !important;
color: #b6bcf0 !important;
}
.sheet-shortfield6{
width:20%;
background-color: #373a52 !important;
color: #b6bcf0 !important;
}
.sheet-shortfield7{
width: 70%;
background-color: #373a52 !important;
color: #b6bcf0 !important;
}
.sheet-shortfield8{
width: 10%;
background-color: #373a52 !important;
color: #b6bcf0 !important;
}
.sheet-header{
background-color: #000;
color: #eee;
text-align: center;
}
.sheet-table-header{
font-weight: bold;
z-index: -1;
}
.sheet-table-header-1{
font-weight: bold;
width: 39%;
}
.sheet-banded{
background: #111;
}
.sheet-table,
.sheet-big-table{
width: 100%;
}
.sheet-table-1{
width: 33%;
}
.sheet-left-half-table{
width: 48%;
float: left;
}
.sheet-right-half-table{
width: 48%;
float: right;
}
.sheet-main-header{
width:100%;
}
tr.sheet-five-strike,
tr.sheet-double-strike,
tr.sheet-rollout{
display: none;
}
input.sheet-five-strike:checked ~ table tr.sheet-normal,
input.sheet-double-strike:checked ~ table tr.sheet-normal,
input.sheet-rollout:checked ~ table tr.sheet-normal{
display: none;
}
.sheet-target,
input.sheet-targeted:checked ~ div input.sheet-five-strike:checked ~ table tr.sheet-normal.sheet-target,
input.sheet-targeted:checked ~ div input.sheet-double-strike:checked ~ table tr.sheet-normal.sheet-target,
input.sheet-targeted:checked ~ div input.sheet-rollout:checked ~ table tr.sheet-normal.sheet-target,
input.sheet-targeted:checked ~ div input.sheet-five-strike:checked ~ table tr.sheet-five-strike:not(.sheet-target),
input.sheet-targeted:checked ~ div input.sheet-double-strike:checked ~ table tr.sheet-double-strike:not(.sheet-target),
input.sheet-targeted:checked ~ div input.sheet-rollout:checked ~ table tr.sheet-rollout:not(.sheet-target){
display: none;
}
input.sheet-targeted:not(:checked) ~ div input.sheet-five-strike:checked ~ table tr.sheet-five-strike:not(.sheet-target),
input.sheet-targeted:not(:checked) ~ div input.sheet-double-strike:checked ~ table tr.sheet-double-strike:not(.sheet-target),
input.sheet-targeted:not(:checked) ~ div input.sheet-rollout:checked ~ table tr.sheet-rollout:not(.sheet-target),
input.sheet-targeted:checked ~ div .sheet-target:not(.sheet-rollout):not(.sheet-double-strike):not(.sheet-five-strike),
input.sheet-targeted:checked ~ div input.sheet-five-strike:checked ~ table tr.sheet-five-strike.sheet-target,
input.sheet-targeted:checked ~ div input.sheet-double-strike:checked ~ table tr.sheet-double-strike.sheet-target,
input.sheet-targeted:checked ~ div input.sheet-rollout:checked ~ table tr.sheet-rollout.sheet-target{
display: table-row;
}
input.sheet-targeted:checked ~ div .sheet-nontarget{
display: none;
}
.sheet-center-img{
margin: 0 auto;
}
.sheet-minihead{
color: #eee;
background-color: ##3a215e !important;
text-align: center;
}
.sheet-bold{
font-weight: bold;
}
.sheet-allign-1{
float:left;
margin-top: .5%;
margin-bottom: .5%;
margin-right: 24.2%;
}
.sheet-allign-2{
float:left;
margin-top: .5%;
margin-bottom: .5%;
margin-right: 5%;
}
.sheet-allign{
float:left;
margin-top: .5%;
margin-bottom: .5%;
margin-right: .2%;
}
.sheet-textarea{
background-color: #373a52;
color: #eee;
resize: none;
border: none;
width: 100%;
-webkit-box-sizing: border-box; /* <=iOS4, <= Android 2.3 */
-moz-box-sizing: border-box; /* FF1+ */
box-sizing: border-box; /* Chrome, IE8, Opera, Safari 5.1*/
}
.sheet-textarea-b{
resize: none;
background-color: #373a52;
color: #eee;
border-width: 1px;
border-color: black;
width: 100%;
-webkit-box-sizing: border-box; /* <=iOS4, <= Android 2.3 */
-moz-box-sizing: border-box; /* FF1+ */
box-sizing: border-box; /* Chrome, IE8, Opera, Safari 5.1*/
}
select { margin-bottom: 0; background-color: #000; color: #373a52;}
:root {
--color-surface2: #000;
--color-text: #eee;
} Been tinkering around trying to get it to show up to no avail. I don't have any formal code training and am trying my best. The sheet is based off of the PTU github V1. Translation is the same sheet.json. Why can't I fix this white box? Thank you if any answers are applicable.
