roll20-character-sheets/Legend Werx/styles.css

@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

.sheet-maindiv{
    width: 4000px;
    height: 4000px;
}

h1, h2, h3, h4{
    color: white;
}

 .border{
    font-family: 'Press Start 2p'; 
    color: white;
    text-shadow: 3px 3px 1px black, -3px -1px 0 black;
    width: 80%;
    background-image: url(https://i.imgur.com/PtkYwSB.png);
    --padding: 25px;
    float: left;
    padding: var(--padding);
    border: 7px solid black;
    box-shadow: inset 0 0 0 var(--padding) rgba(92, 62, 169, 100%); 
} 

.legend{
    position: absolute;
    left: 305px;
    top: 70px;
}

.werx{
    text-align: center;
}
/* setting input text style */
input[type=text]{
    font-family: Arial, Helvetica, sans-serif;
    border: 2px solid black;
} 

input[type=textarea]{
    font-family: Arial, Helvetica, sans-serif;
    border: 2px solid black;
} 

input[type=number]{
    font-family: Arial, Helvetica, sans-serif;
    border: 2px solid black;
}
/* setting up styling grids */
.player{
    display: grid;
    grid-template-rows: auto;
    grid-template-columns: 1fr;
    padding: 15px;
}

.topplayer{
    display: grid;
    grid-template-rows: repeat(4, 1fr);
    grid-template-columns: 1fr 2fr;
    padding: 15px;

}

.playername{
    grid-area: 1 / 1 / 1/ 1
}

.charactername{
    justify-self: center;
}

.inputcharacter{
    justify-self: center;
}

.race input{
    width: 145px;
}

.class{
  justify-self: center;
}

.class input{
    width: 132px;
}

.NextLevel{
    grid-area: 4 / 2 / 4 / 2;
    margin-left: 92px;
}

.NextLevel input{
  width: 100px;
}
/* styling character skill and general skills */
.center{
    justify-self: center;
}

.playerskills{
    display: grid;
    grid-template-rows: repeat(4, 1fr);
    grid-template-columns: repeat(4, 1fr);
    padding: 10px;
    gap: 1px 20px;
    font-size: 8.5px;
}

.stealthiness{
    justify-self: start;
}


.playergen{
    display: grid;
    grid-template-rows: repeat(4, 1fr);
    grid-template-columns: repeat(5, 1fr);
    padding: 15px;
}


.playergen input{
    width: 100px;
}

/* configure the tab buttons */
.charsheet .sheet-character,
.charsheet .sheet-actions {
    display: none;
}

/* style the active button */
.charsheet .sheet-tabstoggle[value="character"] ~ div .sheet-button0 {outline: 2px solid rgba(92, 62, 169, 70%); }
.charsheet .sheet-tabstoggle[value="actions"] ~ div .sheet-button1 {outline: 2px solid rgba(92, 62, 169, 70%); }

/* show the selected tab */
.charsheet .sheet-tabstoggle[value="character"] ~ div.sheet-character,
.charsheet .sheet-tabstoggle[value="actions"] ~ div.sheet-actions {
    display: block;
}


/* positioning tab buttons */

 button{
    color: black; 
} 


.button-position{
    margin-left: 400px;
}

/* styling the player skill buttons */

.charsheet button[type=roll].no-roll::before{
    content: '';
}

.playerskills button, .playergen button{
    font-family: 'press start 2p';
    font-size: 5px;
    color: white;
    background-image: none;
    border: none;
    background-color: transparent; 
    text-shadow: 3px 3px 1px black, -3px -1px 0 black;
    box-shadow: none;
}

.playerskills button:hover, .playergen button:hover{
    font-family: 'press start 2p';
    font-size: 5px;
    color: white;
    background-image: none;
    border: none;
    background-color: transparent; 
    text-shadow: 3px 3px 1px black, -3px -1px 0 black;
    color: orange;
    box-shadow: none;
}

.ui-dialog .charsheet .playergen button{
    font-size: 1em;
}

.playergen .onset{
    position:relative;
    bottom: 9px;
}

/* Options on the skills tab */

.charsheet .testname,
.charsheet input.show:checked ~ div.opt-select{
    display: block;
}

.charsheet .opt-select,
.charsheet input.show:checked ~ .testname{
    display: none;
}


.charsheet input.toggle-type-a:not(:checked) ~ .show-type-a{
    display:none;
}

.charsheet input.toggle-type-b:not(:checked) ~ .show-type-b{
    display:none;
}


.testname{
    color: white;
    background-image: none;
    border: none;
    background-color: transparent; 
    text-shadow: 3px 3px 1px black, -3px -1px 0 black;
    box-shadow: none;
}

.testname:hover{
    font-family: 'press start 2p';
    font-size: 5px;
    color: white;
    background-image: none;
    border: none;
    background-color: transparent; 
    text-shadow: 3px 3px 1px black, -3px -1px 0 black;
    color: orange;
    box-shadow: none;
}


.desc {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 20px;
    resize: none;
    box-sizing: border-box;
    width: 100px;
    height: 231px;
}

option{
    font-family: Arial, Helvetica, sans-serif;
}

select{
    font-family: Arial, Helvetica, sans-serif;
}


/* Styling the rows and columns of the skills tab */

.sheet-actions-style{
    display: grid;
    grid-template-rows: 50px, 100px,50px, 100px,50px, 100px,50px, 100px;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 20px;
}

.skill-level0{
    grid-area: 1/1/1/1;
}

.skill-level1{
    grid-area: 3/1/3/1;
    align-self:end;
}

.skill-level2{
    grid-area: 5/1/5/1;
    align-self:end;
}

.skill-level3{
    grid-area: 7/1/7/1;
    align-self:end;
}

.skill-level4{
    grid-area: 2/2/2/2;
    align-self:end;
}

.skill-level5{
    grid-area: 4/2/4/2;
    align-self:end;
}

.skill-level6{
    grid-area: 6/2/6/2;
    align-self:end;
}

.skill-container0{
    grid-area: 2/1/2/1;
}

.skill-container1{
    grid-area: 4/1/4/1;
}

.skill-container2{
    grid-area: 6/1/6/1;
}

.skill-container3{
    grid-area: 8/1/8/1;
}

.skill-container4{
    grid-area: 3/2/3/2;
}

.skill-container5{
    grid-area: 5/2/5/2;
}

.skill-container6{
    grid-area: 7/2/7/2;
}

/* Adjusting skill detail checkbox position */

.details{
    position: relative;
    top: 10px !important;
    left: 275px !important;
    width: 18px !important;
    height: 18px !important;
    margin-bottom: -10px !important;
}

.charsheet input.details:checked{
    top: 10px !important;
    left: 290px !important;
    width: 18px !important;
    height: 18px !important;
}

.repcontrol{
    display:flex;
    gap: 1%;
}

/* Styling the rolltemplate */

.sheet-rolltemplate-werx {
    display: grid;
    grid-template-columns: 45% 45%;
    column-gap: 10%;
    background-color: white;
    line-height: 1.9em;
}
.sheet-rolltemplate-werx .sheet-template-title {
    grid-column: 1 / -1;   
    background-color: rgba(92, 62, 169, 70%);
}

.sheet-rolltemplate-simple-roll div:nth-child(even)  {
    text-align: right; 
}
.sheet-rolltemplate-simple-roll div:nth-child(1) {
    text-align: center;
}