roll20-character-sheets/Pokerole 1e/Pokerole.css

.charsheet{
    --background:#faf3d7;
    --section:#cfccb8; 
    --section-highlight:#a5a599;
    --foreground:#cd583c;
    --foreground-highlight:#ac4e34;
    --border:#3a3326;
    --blue:#26b7b4;
    
    --tough:#f6e584;
    --cool:#f4a678;
    --beauty:#abb4ad;
    --cute:#e6aba0;
    --smart:#b0c37c;
    
}

.sheet-tab-core,
.sheet-tab-settings{
    display:none;
}

.sheet-view[value='0'] ~ .sheet-tab-core,
.sheet-view[value='1'] ~ .sheet-tab-settings{
    display:block;
}

.sheet-rolltemplate-PMD .sheet-roll-container{
  width:233px;  
  color:black;
}
.sheet-rolltemplate-PMD .sheet-roll-container > .sheet-roll-row{
    background: #cfccb8;
    padding:2px 0;
    border:1px solid black;
    margin:2px 0;
}
.sheet-rolltemplate-PMD .sheet-roll-container > .sheet-roll-row:nth-child(1){
    background: #ac4e34;
}

.sheet-rolltemplate-PMD .sheet-roll-row > span{
    display:block;
    text-align:center;
}

.sheet-rolltemplate-PMD  .sheet-roll-container .sheet-roll-name{
    font-size:12pt;
    font-weight:bold;
    color:black;
}
.sheet-rolltemplate-PMD  .sheet-roll-container .sheet-roll-small{
    font-size:8pt;
    font-weight:bold;
}
.sheet-rolltemplate-PMD  .sheet-roll-container .sheet-roll-grey{
    color:whitesmoke;
}

.sheet-rolltemplate-PMD  .sheet-roll-type{
    font-size:8pt;
    font-weight:bold;
}

.sheet-rolltemplate-PMD  .sheet-roll-value{
    font-size:16pt;
    font-weight:bold;
}
.sheet-rolltemplate-PMD  .sheet-roll-pool{
    margin: 2px 0 0;
}

.sheet-rolltemplate-PMD .sheet-roll-value .inlinerollresult  {
	display: inline-block;
	min-width: 1.5em;
	text-align: center;
	padding: 5px 0px;
	border: 2px solid rgba(167, 168, 170,1);
}

.sheet-rolltemplate-PMD .sheet-roll-value .inlinerollresult.fullcrit {
	border: 2px solid #3FB315;
}

.sheet-rolltemplate-PMD .sheet-roll-value .inlinerollresult.fullfail {
	border: 2px solid #B31515;
}

.sheet-rolltemplate-PMD .sheet-roll-value .inlinerollresult.importantroll {
	border: 2px solid #4A57ED;
}

.sheet-rolltemplate-PMD .sheet-roll-description{
    padding:7px;
    text-align:left !important;
    white-space:pre-line;
}


.sheet-toggle-header{
    position:relative;
    display:block;
    width:100%;
    margin-bottom:20px;
}
.sheet-toggle-header .sheet-view-toggle{
    float:right;
    margin-left:2px;
}
.sheet-toggle{
    display:inline-block;
    position:relative;
    
}
.sheet-toggle input{
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    opacity:0;
}
.sheet-toggle span{
    display:block;
    padding:2px 15px;
    border:1px solid black;
    border-radius:10px;
    background:var(--section);
    color:black;
    font-weight:bold;
}
.sheet-toggle input:checked ~ span{
    background-color:var(--blue);
    color:black;
}


div.sheet-section{
    position:relative;
    width:100%;
    padding:10px;
    border:3px solid var(--border);
    border-radius:10px;
    border-color:var(-border);
    margin-bottom:10px;
    background-color:var(--section);
    
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
}

input[type="checkbox"]{
    display:inline;
}
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}
input[type="number"],select{
    
    -webkit-appearance:textfield;
    -moz-appearance:textfield;
    appearance:textfield;
    text-align:center;
}
textarea{
    resize:vertical;
    box-sizing:border-box;
    
}
button[type=roll].sheet-blank-roll-button::before 
{ 
    content: ''; 
    background:none;
    border:none;
}
button[type="roll"]{
    border-radius:15px;
    min-width:18px;
    border-color:var(--border);
    vertical-align: middle;
}
label{
    display:inline-block;
    width:auto;
    margin:0;
    vertical-align: middle;
    padding:0px;
}
select{
    vertical-align: middle;
    margin: 0;
    text-align-last:center;
}

input, select, textarea{
    background-color: var(--background);
    border-color:#3a3326;
}

.sheet-wrapper{
    display:block;
    width:800px;
    margin:50px auto 0;
}

.sheet-creature-toggle-wrapper{
    position:absolute;
    top: -20px;
    right: -70px;
}
.sheet-creature-toggle-wrapper input[type="checkbox"]{
    position:relative;
    display:inline-block;
    width:50px;
    height:50px;
    opacity:0;
    z-index:1;
}
.sheet-creature-toggle-wrapper img{
    position:relative;
    left:-50px;
    width:50px;
    height:50px;
}


.sheet-creature-toggle[value="1"] ~ .sheet-pokemon-only,
.sheet-creature-toggle[value="0"] ~ .sheet-trainer-only{
    display:none;
}

.sheet-PMD-toggle[value="1"] ~ .sheet-Core-only,
.sheet-PMD-toggle[value="0"] ~ .sheet-PMD-only{
    display:none !important;
}

/***************************
    Fields
***************************/

.sheet-field-labeled{
    position:relative;
    display: inline-block;
    vertical-align: middle;
}
.sheet-field-labeled > span:first-child{
    border: 1px solid;
    border-radius: 10px;
    padding: 10px 15px 2px 15px;
    text-align: inherit;
    width: 100% !important;
    color: black;
    background-color: var(--background);
    display: inline-block;
    box-sizing: border-box;

}

.sheet-field-labeled > select{
    display:inline-block;
    text-align:center;
    width:100% ;
    padding-top: 7px;
    margin: 0;
    padding-bottom: 2px;
    padding-top: 8px;
}
.sheet-field-labeled > input{
    border:1px solid;
    border-radius:10px;
    padding:10px 15px 2px 15px;
    text-align:inherit;
    width:100% !important;
    height:100% !important;
    color:black;
}
.sheet-field-labeled > textarea{
    border:1px solid;
    border-radius:10px;
    padding:10px 15px 2px 15px;
    text-align:inherit;
    width:100% !important;
    color:black;
}
.sheet-field-labeled > select + span,
.sheet-field-labeled > input + span,
.sheet-field-labeled > span:first-child + span{
    position:absolute;
    top:0px;
    left:10px;
    font-size:x-small;
    font-weight:bold;
    color:grey;
    pointer-events: none;
}

.sheet-field-labeled > input[disabled="true"],
.sheet-field-labeled > span:first-child{
    border-radius:5px;
    border:1px black solid;
    background-color:#e8e1c5;
}

.sheet-field-labeled > input[disabled="true"] + span,
.sheet-field-labeled > span:first-child + span{
    width:100%;
    left:0px;
    text-align:center;
    color:black;
}


/***************************
    Character Info
***************************/

.sheet-character-info .sheet-header{
    position:relative;
    top:-30px;
    left:0px;
}
.sheet-character-info .sheet-header input{
    border:2px solid #3a3326;
}
.sheet-character-info .sheet-left-col,
.sheet-character-info .sheet-right-col{
    display:block;
}
.sheet-character-info .sheet-right-col{
    background-color:var(--border);
    border-radius:10px;
    padding:15px 10px;
}

.sheet-character-info .sheet-grid{
    display:grid;
    grid-template-columns: 400px auto;
    column-gap: 10px;
}
/***************************
    Trainer Character Info
***************************/


.sheet-party-pokeball{
    position: relative;
}
.sheet-party-pokeball > input[type="radio"]{
    position:absolute;
    top:-5px;
    left:0px;
    width:30px !important;
    height:30px  !important;
    z-index:1;
    opacity:0;
}
.sheet-party-pokeball > input[type="text"]{
    border-radius: 20px;
    padding-left: 30px;
    width: 170px;
}

.sheet-party-pokeball > img{
    position:absolute;
    top:-6px;
    left:0px;
    width:30px !important;
    height:30px  !important;
    margin:0;
    
}

.sheet-pokeball-state[value="0"] ~ .sheet-pokeball-state-opened,
.sheet-pokeball-state[value="0"] ~ .sheet-pokeball-state-locked,
.sheet-pokeball-state[value="1"] ~ .sheet-pokeball-state-locked,
.sheet-pokeball-state[value="1"] ~ .sheet-pokeball-state-closed,
.sheet-pokeball-state[value="2"] ~ .sheet-pokeball-state-closed,
.sheet-pokeball-state[value="2"] ~ .sheet-pokeball-state-opened{
    display:none;
}

.sheet-pokeball-state[value="0"] ~ .sheet-pokeball-state-closed,
.sheet-pokeball-state[value="1"] ~ .sheet-pokeball-state-opened,
.sheet-pokeball-state[value="2"] ~ .sheet-pokeball-state-locked{
    display:inline-block;
}

.sheet-trainer-party{
    display:inline-block;
    width:auto;
    margin: 5px auto 0px;
}


/***************************
    Pokemon Character Info
***************************/
.sheet-name-wrapper{
    position:relative;
    top:-25px;
}



/***************************
    Attributes
***************************/

.sheet-attributes .sheet-grid{
    display:grid;
    grid-template-columns:auto 300px;
    column-gap:5px;
}

.sheet-attributes .sheet-attribute-row{
    display:block;
    margin-top:13px;
}
.sheet-attributes .sheet-battle,
.sheet-attributes .sheet-contest{
    display:inline-block;
    padding:5px;
    border:2px solid;
    border-radius:10px;
}
.sheet-attributes .sheet-battle > label  {
    width: 70px;
    text-align: right;
}
.sheet-attributes .sheet-contest > label {
    width: 70px;
    text-align: right;
}

.sheet-attributes .sheet-battle .sheet-field-labeled{
    width:70px;
    text-align:center;
}
.sheet-attributes .sheet-battle{
    background-color:var(--blue);
}

.sheet-attributes .sheet-right{
    border-radius:10px;
    background-color:var(--border);
    padding:5px;
    
}
.sheet-attributes .sheet-hp-will{
    color:var(--section);
    padding: 0 5px;
}
.sheet-attributes .sheet-hp-will .sheet-field-labeled{
    width:70px;
}

.sheet-attributes .sheet-hp-will strong{
    font-size: 15pt;
    vertical-align: middle;
}

.sheet-attributes .sheet-bonuses{
    display:grid;
    grid-template-columns: 60% auto;
    column-gap:5px;
    padding:5px 10px;
}
.sheet-attributes .sheet-bonuses strong{
    color:var(--section);
    font-size: 9pt;
}
.sheet-attributes .sheet-bonuses button{
    padding:2px 5px;
    width:90px;
}


.sheet-attributes .sheet-bonuses{
    margin-top:5px;
    border-radius:10px;
    background-color:var(--border);
    padding:5px 10px;
    
}
.sheet-generic-roll{
    margin-top:10px;
}
.sheet-generic-roll strong{color:var(--section);}
.sheet-generic-roll button[type="roll"]{
    width:70px;
    padding:2px 10px;
}

/***************************
    Conditions
***************************/
.sheet-conditions{
    margin-top:10px;
}
.sheet-conditions .sheet-conditions-row{
    background-color:var(--section);
    padding:2px 10px;
    margin-bottom:2px;
    border-radius:10px;
}

.sheet-conditions .sheet-condition-collapse{padding-left:5px;}
.sheet-conditions .sheet-condition-collapse label{
    font-size: 9pt;
}
.sheet-conditions .sheet-collapse-input[value="1"] ~ .sheet-condition-collapse{
    display:inline-block;
    
}
.sheet-conditions .sheet-collapse-input[value="0"] ~ .sheet-condition-collapse{
    display:none;
}

/***************************
    Attitude
***************************/
.sheet-attitudes{
    position:relative;
    margin-top:20px;
}
.sheet-attitude-grid{
    display:grid;
    grid-template-columns:auto auto auto;
    justify-content:space-between;
    column-gap:10px;
    
}
.sheet-PMD-swap-wrapper{
    position:absolute;
    top:-30px;
    left: calc(50% - 25px);
}
.sheet-PMD-swap-wrapper input{
    display:inline-block;
    width:50px;
    height:50px;
    position:relative;
    z-index:1;
    opacity:0;
}
.sheet-PMD-swap-wrapper img{
    display:inline-block;
    width:50px;
    height:50px;
    position:relative;
    left:-50px;
}

/***************************
    Skills
***************************/

.sheet-skills .sheet-skills-main{
    display:block;
    width:max-content;
    margin:0 auto 2px;
    border-radius:10px;
    background-color:var(--blue);
    padding: 5px 0px;
}
.sheet-skills .sheet-skills-sub{
    display:block;
    width:max-content;
    margin:0 auto;
    background-color:var(--foreground-highlight);
    border-radius:10px;
    padding:5px 0px;
    color: var(--background);
    text-shadow: 0px 0px 5px black;
}
.sheet-skills .sheet-skills-col > *{
    margin-top:3px;
}
.sheet-skills .sheet-skills-col{
    display:inline-block;
    width:180px;
}
.sheet-skills .sheet-skills-col strong{
    display:inline-block;   
    width:100px;
    text-align:right;
}
.sheet-skills .sheet-skills-col label{
    display:block;
    text-align:center
}
.sheet-skills .sheet-skills-col .sheet-field-labeled{
    display:block;
    width:100px;
    margin:0 auto;
    text-align:center;
}

/***************************
    Inventory
***************************/

.sheet-inventory label,
.sheet-inventory strong{
    color:var(--background);
}
.sheet-inventory .sheet-header{
    display:block;
    
    text-align:center;
    
    border-width:0 0 3px;
    border-radius:10px;
    border-style:solid;
    border-color:black;
    margin-bottom:5px;
}
.sheet-inventory-divide{
    display:grid;
    grid-template-columns: 350px auto;
    column-gap:10px;
    margin-bottom:10px;
}
.sheet-inventory .sheet-PMD-gear,
.sheet-inventory .sheet-inventory-potions,
.sheet-inventory .sheet-inventory-quick,
.sheet-inventory .sheet-inventory-large,
.sheet-inventory .sheet-inventory-notes{
    display:block;
    background-color:var(--border);
    padding:5px;
    border-radius:10px;
}
.sheet-inventory .sheet-inventory-potions input{
    text-align:center;
}
.sheet-inventory .sheet-inventory-quick{
    min-height:70px;
}

.sheet-inventory .sheet-inventory-item{
    display:block;
    width:90%;
    margin:0 auto 2px;
}
.sheet-inventory  input.sheet-item-name{
    display:inline-block;
}
.sheet-inventory input.sheet-item-count{
    display:inline-block;
    width: 40px;
    margin-right:5px;
    border-radius:15px;
    font-weight:bold;
}


/***************************
    Move
***************************/

.sheet-moves .sheet-move-item{
    position:relative;
}
.sheet-moves .sheet-header{
    display:block;
    width:80%;
    margin:10px auto;
    text-align:center;
    border: solid black;
    border-width:0 0 3px 0;
    border-radius:10px;
}

.sheet-moves .sheet-move-item{
    display:block;
    width: 700px;
    margin: 0px auto 3px;
}

.sheet-moves select{
    display:inline-block;
    width:120px;
}

.sheet-moves .sheet-move-header{
    border-radius:10px 10px 0 0;
    background-color:var(--foreground-highlight);
    padding:3px 10px ;
}
.sheet-moves .sheet-move-body{
    border-radius:0 0 10px 10px;
    background-color:var(--section-highlight);
    padding: 3px 15px;

}
.sheet-moves .sheet-move-known-wrapper{
    position: absolute;
    left: -25px;
    top: 20px
}
.sheet-moves .sheet-move-known-wrapper input{
    position:relative;
    display:inline-block;
    width:20px;
    height:20px;
    z-index:1;
    opacity:0;
}
.sheet-moves .sheet-move-known-wrapper input+ span{
    position:relative;
    left: -25px;
    top: 7px;
    display:inline-block;
    width:20px;
    height:20px;
    border-radius:50%;
    background-color:grey;
    border:1px solid;
}
.sheet-moves .sheet-move-known-wrapper input:checked + span {
    background-color:var(--foreground);   
}


.sheet-moves .sheet-move-display-mode[value="1"] ~ .sheet-move-edit,
.sheet-moves .sheet-move-display-mode[value="0"] ~ .sheet-move-display{
    display:none;
}

.sheet-move-display span.sheet-move-accuracy,
.sheet-move-display span.sheet-move-damage{
    display:inline-block;
    width:100px;
    font-size:10pt;
}
.sheet-move-display span.sheet-move-effect{
    display:inline-block;
    width:50px;
    border-bottom:2px solid black;
}
.sheet-move-display span.sheet-move-effect-chance{
    display:inline-block;
    text-align:center;
    width:20px;
}
.sheet-move-body{position:relative;}
.sheet-move-body .sheet-move-edit .sheet-move-experience{
    position:absolute;
    top:0px;
    right:40px;
}
.sheet-move-body .sheet-move-display .sheet-move-experience{
    position: absolute;
    top: 3px;
    right: 3px;
}

.sheet-move-display span.sheet-move-descr{
    display:block;
    width:80%;
    height:auto;
    min-height:25px;
    margin:0 auto;
}




.sheet-move-display-toggle[value="1"] ~ .sheet-move-edit,
.sheet-move-display-toggle[value="0"] ~ .sheet-move-display{
    display:none;
}