roll20-character-sheets-tester/Dragon Ball Universe/DragonBallV2.css

/*----------------- GENERAL CSS ------------------*/

/*Configure the tab buttons*/
.sheet-banner{
    background-image: url(https://i.pinimg.com/564x/ad/ce/f3/adcef371d608bdabd95fca1ee9a37ec4.jpg);
    background-color: white;
    background-size: 50% 100%;
    background-position: center top;
    background-repeat: no-repeat;
    text-align: center;
}
.sheet-attributes,
.sheet-attacks,
.sheet-abilities,
.sheet-transformations {
	display: none;
}

/* show the selected tab */
.sheet-tabstoggle[value="attributes"] ~ div.sheet-attributes,
.sheet-tabstoggle[value="attacks"] ~ div.sheet-attacks,
.sheet-tabstoggle[value="abilities"] ~ div.sheet-abilities,
.sheet-tabstoggle[value="transformations"] ~ div.sheet-transformations {
	display: block;
}

.sheet-equipmentTable{
    display: grid;
    border: 1px solid seagreen;
    border-top: none;
    grid-template-areas: 
    'gear1 gear2 gear3';
}

.sheet-abilities{
    background-image: url(https://i.pinimg.com/564x/72/f0/30/72f0303e2a534937e94d4390269d13d4.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-color: #0A0A0A;
    text-align: center;
}

.sheet-transformations-table{
    display: grid;
    border: 2px solid silver;
    justify-content: space-around;
    grid-template-areas: 
    'tname tagi tins tper tpot tsch tspi tstr tten';
}

.sheet-tten{
    grid-area: tten;
}

.sheet-tstr{
    grid-area: tstr;
}

.sheet-tspi{
    grid-area: tspi;
}

.sheet-tsch{
    grid-area: tsch;
}

.sheet-tpot{
    grid-area: tpot;
}

.sheet-tper{
    grid-area: tper;
}

.sheet-tins{
    grid-area: tins;
}

.sheet-tagi{
    grid-area: tagi;
}

.sheet-ttype{
    grid-area: ttype;
}

.sheet-tname{
    grid-area: tname;
}

.sheet-transformations-bot{
    grid-area: transformations-bot;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.sheet-transformations-top{
    grid-area: transformations-top;
    display: grid;
    grid-template-areas: 
    'tn ta ti tpe tpo tsc tsp tst tte';
}

.sheet-transformations-page{
    display: grid;
    border: 3px solid silver;
    grid-template-areas: 
    'transformations-top'
    'transformations-bot';
}

button[type="roll"].sheet-stress-button:before{
    content: ' ';
  }
  
button[type="roll"].sheet-stress-button:hover{
    background-position: 0;
  }

button[type="roll"].sheet-stress-button{
    background-image: url(https://i.pinimg.com/564x/e2/3d/e8/e23de8081ca4de637306e28c58f521e4.jpg);
    background-size: 30px 30px;
    background-repeat: no-repeat;
    width: 30px;
    height: 30px;
    border-style: none;
    background-color: transparent;
    margin-left: 5px;
} 

button[type="roll"].sheet-attack-button:before{
    content: ' ';
  }
  
button[type="roll"].sheet-attack-button:hover{
    background-position: 0;
  }

button[type="roll"].sheet-attack-button{
    background-image: url(https://i.pinimg.com/564x/24/79/d7/2479d70c7483283648c3af85b1da948d.jpg);
    background-size: 30px 30px;
    background-repeat: no-repeat;
    width: 30px;
    height: 30px;
    border-style: none;
    background-color: transparent;
    margin-left: 5px;
}

.sheet-transformations{
    background-image: url(https://i.pinimg.com/564x/75/a2/d4/75a2d435cf7687fc839860f45cc4ac1e.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-color: #070602;
    text-align: center;
}

.sheet-ccol7{
    grid-area: ccol7;
}

.sheet-ccol6{
    grid-area: ccol6;
}

.sheet-ccol5{
    grid-area: ccol5;
    justify-content: center;
}

.sheet-ccol4{
    grid-area: ccol4;
    justify-content: center;
}

.sheet-ccol3{
    grid-area: ccol3;
    justify-content: center;
}

.sheet-ccol2{
    grid-area: ccol2;
    justify-content: center;
}
.sheet-ccol1{
    grid-area: ccol1;
    justify-content: center;
}
.sheet-saves{
    display: grid;
    grid-template-areas: 
    'save1 save2 save3 save4';
}
.sheet-custom-attack-table{
    display: grid;
    border: 2px solid rgb(156, 155, 155);
    justify-content: space-around;
    grid-template-areas: 
    'ccol1 ccol2 ccol3 ccol4 ccol5';
}

.sheet-custom-attacks-hcol7{
    grid-area: hcol7;
}


.sheet-custom-attacks-hcol6{
    grid-area: hcol6;
}


.sheet-custom-attacks-hcol5{
    grid-area: hcol5;
}


.sheet-custom-attacks-hcol4{
    grid-area: hcol4;
}


.sheet-custom-attacks-hcol3{
    grid-area: hcol3;
}


.sheet-custom-attacks-hcol2{
    grid-area: hcol2;
}


.sheet-custom-attacks-hcol1{
    grid-area: hcol1;
}

.sheet-custom-attacks-top{
    display: grid;
    grid-area: custom-attacks-top;
    grid-column: auto;
    grid-template-areas: 
    'hcol1 hcol2 hcol3 hcol4 hcol5';
}

.sheet-custom-attack-bottom{
    grid-area: custom-attacks-bottom;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.sheet-custom-attacks{
    display: grid;
    grid-row: auto;
    grid-template-areas:
    'custom-attacks-top'
    'custom-attacks-bottom';
    border: 3px solid rgb(156, 155, 155);
}

.sheet-basic-attacks-row{
    border: 1px inset rgb(156, 155, 155);
    border-left-style: none;
    border-right-style: none;
    height: 35px;
}

.sheet-basic-attack-col4{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center top;
    border: 1px inset rgb(156, 155, 155);
    grid-area: col4;
}

.sheet-basic-attack-col3{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center top;
    border: 1px inset rgb(156, 155, 155);
    grid-area: col3;
}

.sheet-basic-attack-col2{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center top;
    border: 1px inset rgb(156, 155, 155);
    grid-area: col2;
}

.sheet-basic-attack-col1{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center top;
    border: 1px inset rgb(156, 155, 155);
    grid-area: col1;
}

.sheet-basic-attack{
    display: grid;
    grid-template-areas: 
    'col1 col2 col3 col4';
    border: 3px solid rgb(156, 155, 155);
}

.sheet-attacks{
    background-image: url(https://i.pinimg.com/564x/cf/db/99/cfdb99728dfe48c17957810e9c65f23a.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-color: rgb(38, 44, 58);
    text-align: center;
}

.sheet-character{
    background-image: url(https://i.pinimg.com/564x/90/77/29/9077291c252a3177ae7f138c7ad718aa.jpg);
    background-position: center;
    background-color: rgb(237, 109, 0);
    background-repeat: no-repeat;
    text-align: center;
}

.sheet-skill2{
    grid-area: skill2;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding-left: 6px;
    border: 1px inset darkred;
}

.sheet-skill1{
    grid-area: skill1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding-left: 6px;
    border: 1px inset darkred;
}

.sheet-skill-label{
    color: rgb(27, 92, 129);
}

button[type="roll"].sheet-skill:before{
    content: ' ';
  }
  
button[type="roll"].sheet-skill:hover{
    background-position: 0;
  }

button[type="roll"].sheet-skill{
    background-image: url(https://i.pinimg.com/564x/c4/79/b1/c479b192840cbf0bebedd912fde8b53f.jpg);
    background-size: 20px 20px;
    background-repeat: no-repeat;
    width: 20px;
    height: 20px;
    border-style: none;
    background-color: transparent;
    margin-left: 5px;
}

.sheet-stat-ten{
    display: flex;
    grid-area: stat-ten;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 1px inset darkred;
}

.sheet-stat-pot{
    display: flex;
    grid-area: stat-pot;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 1px inset darkred;
}

.sheet-stat-per{
    display: flex;
    grid-area: stat-per;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 1px inset darkred;
}

.sheet-stat-spi{
    display: flex;
    grid-area: stat-spi;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 1px inset darkred;
}

.sheet-stat-str{
    display: flex;
    grid-area: stat-str;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 1px inset darkred;
}

.sheet-stat-sch{
    display: flex;
    grid-area: stat-sch;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 1px inset darkred;
}

.sheet-stat-agi{
    display: flex;
    grid-area: stat-agi;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 1px inset darkred;
}

.sheet-stat-ins{
    grid-area: stat-ins;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 1px inset darkred;
}

.sheet-all-stats{
    grid-area: all-stats;
}

.sheet-all-skills{
    grid-area: all-skills;
    display: grid;
    grid-template-areas: 
    'skill1' 'skill2';
}

.sheet-stats{
    display: grid;
    border: 2px solid darkred;
    grid-template-areas: 
    'all-stats skill1 skill2';
}

.sheet-attr-head{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    grid-area: attr-head;
}

.sheet-attr-top{
    display: flex;
    justify-content: center;
    align-content: space-between;
    grid-area: attr-top;
}

.sheet-attr-bot{
    display: flex;
    justify-content: center;
    align-content: space-between;
    grid-area: attr-bottom;
}
.sheet-info{
    display: grid;
    border: 3px solid darkred;
    grid-row: 25px;
    grid-template-areas:
    'attr-head'
    'attr-top'
    'attr-bottom';
}

.sheet-j-label{
    color: rgb(15, 56, 80);
}

.sheet-j-h3{
    color: rgb(15, 56, 80);
    font-size: 1.5em;
}

h1{
    font-size: 3em;
    color: navy;
}

h2{
    font-size: 2em;
    color: navy;
}

h3{
    font-size: 1.5em;
    text-align: center;
    color: navy;
}

h4{
    font-size: 1em;
    color: navy;
}

label{
    color: navy;
    display: inline-block;
}