roll20-character-sheets/Mazes FRP/mazesFRP.css

/*----------------- Main Layout ------------------*/

/* A CSS Grid example using "grid-template-areas"
  https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas
*/
main {
  display: grid;
  width: 750px;
  height: 550px;
  grid-gap: 0px;
  grid-template-columns: 150px 150px 150px 150px 150px;
  grid-template-rows: 50px 50px 50px 50px 50px 200px 50px;
  grid-template-areas:"zroll zhearts zlogo zlogo zlogo"
                      "zroll zhearts zlogo zlogo zlogo"  
                      "zroll zstars zname zname zname"
                      "zrole zstars zname zname zname"
                      "zaspect zaspect zclass zclass zclass"
                      "zlifestyle zedges zedges zresolver zresolver"
                      "zwealth zedges zedges zresolver zresolver"
                      "zconditions zconditions zconditions zresolver zresolver";
  background-color: black;
  border-style: solid;
  background-image: url();
}

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

section {
    padding: 0px;
    border-style: none;
}

/* CSS Flexbox styling, used for adjusting how content inside section behaves */
.f-col {
  display: flex;
  flex-direction: column;
}
.f-row {
  display: flex;
  flex-direction: row;
}
.wrap {
  display: flex;
  flex-wrap: wrap;
}
.nowrap {
  display: flex;
  flex-wrap: nowrap;
}
.f-center {
  align-items: center;
  justify-content: center;
}

/*----------------- Text & Input styling -----------------*/

@import url('https://fonts.googleapis.com/css?family=Ruslan+Display|Grenze+Gotisch|Trade+Winds|Open+Sans&display=swap');

/* these are for overwriting default CSS that comes from Roll20 */

.charsheet * {
  font-family: "Ruslan Display", "Open Sans", Arial, sans-serif;
}

.charsheet h1 {
    text-align: center;
}

.charsheet h2 {
    text-align: center;
}

.charsheet h3{
  text-align: center;
}
.charsheet label[type="text"]{
  color:  gold;
}

.charsheet input[type="text"] {
  color: gold;
  font-size: 3em;
  text-align: center;
  width: 90%;
  border: none;
  border-bottom: 2px;
  border-bottom-style: inset;
  background-color: transparent;
    border-bottom-color: orange;
}

.charsheet input[type="text"]:focus {
  background-color: gold;
  color: burlywood;
  outline: none;
}

.charsheet input[type="number"]{
   color: black;
  font-size: 3em;
  text-align: center;
  width: 90%;
  border: none;
  background-color: transparent;
}

.charsheet input[type="number"]:focus {
  background-color: gold;
  color: burlywood;
  border-style: none;
  border-color: transparent;
}


.charsheet input[type="checkbox"]{
  width: 2em;
  height: 2em;
  color:  gold;

}

.charsheet input[type="checkbox"]:checked {
  background-color: orange;
}

.charsheet select {
  font-size: 1.5em;
  text-align:  center;
  width:  90%;
  border: none;
  border-bottom: 2px;
  border-bottom-style: inset;
  border-bottom-color: orange;
  background-color: black;
  color: gold;
}

.charsheet select.hover {
  background-color: darkorange;
}










.charsheet textarea {
  width: 100%;
  height: 100%;
}



/*-------Condition change to Clickable Text -----*/

.sheet-hidden {
    display:none;
}
label.link:hover {
  cursor: pointer;
  text-decoration: overline underline;
  color: papayawhip;
}
input[type="checkbox"]:checked + label.link {
  color: orange;
}



/*------------- Rolls and Roles CSS -------------*/


.zroll {
    grid-area: zroll;
}

.zrole {
  grid-area: zrole;
}

.sheet-divd4, .sheet-divd6, .sheet-divd8, .sheet-divd10 {
    display: none;
}

input[value="d4"].sheet-roleselect ~ div.sheet-divd4,
input[value="d6"].sheet-roleselect ~ div.sheet-divd6,
input[value="d8"].sheet-roleselect ~ div.sheet-divd8,
input[value="d10"].sheet-roleselect ~ div.sheet-divd10
{
    display: block;

}

.zresolver {
  grid-area: zresolver;
}

.sheet-crown4, .sheet-crown6, .sheet-crown8, .sheet-crown10 {
    display: none;
}

input[value="d4"].sheet-roleselect ~ div.sheet-crown4,
input[value="d6"].sheet-roleselect ~ div.sheet-crown6,
input[value="d8"].sheet-roleselect ~ div.sheet-crown8,
input[value="d10"].sheet-roleselect ~ div.sheet-crown10
{
    display: block;

}




/*------------- Section-specific CSS -------------*/

.zlogo {
  grid-area: zlogo;
  background-image: url("https://raw.githubusercontent.com/9thLevel/roll20/main/mazeslogo.png");
  background-size: cover;

}


.zname {
  display:  flex;
  grid-area: zname;
  align-items: center;
  justify-content: center;
}

.zhearts {
  grid-area: zhearts;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url("https://raw.githubusercontent.com/9thLevel/roll20/main/heart.png");
  background-size: cover;
}

.zstars {
  grid-area: zstars;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url("https://raw.githubusercontent.com/9thLevel/roll20/main/star.png");
  background-size: cover;
}

.zaspect {
  grid-area: zaspect;
}

.zclass {
  grid-area: zclass;
}

.zedges {
  grid-area: zedges;
  padding: 20px;
}

.zwealth {
  grid-area: zwealth;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url("https://raw.githubusercontent.com/9thLevel/roll20/main/wealthbox.png");  background-size: cover;
}

.zlifestyle {
  grid-area: zlifestyle;
  background-image: url("https://raw.githubusercontent.com/9thLevel/roll20/main/wealthplaceholder.png");   background-size: cover;
}

.zconditions {
  grid-area: zconditions;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  margin: 5px;
}


/* Hide the Class Selection and Open Options based on ASPECT Select*/

.sheet-swords, .sheet-sorcerys, .sheet-shadows, .sheet-specials {
    display: none;
}

input[value*="sword"].sheet-aspect ~ select.sheet-swords,
input[value*="sorcery"].sheet-aspect ~ select.sheet-sorcerys,
input[value*="shadow"].sheet-aspect ~ select.sheet-shadows,
input[value*="special"].sheet-aspect ~ select.sheet-specials
{
    display: block;
}