roll20-character-sheets/backbone/source/assets/scss/_generalsetup.scss

//This file will store all of our generic styling for the sheet. Styling for specific sections will be done in individual scss files to make the code easier to read.
@use 'mixinsandplaceholders';
@use 'systemVariables';
@use 'placeholders/systemPlaceholders';
@import url('https://fonts.googleapis.com/css?family=IM+Fell+English+SC|Trade+Winds|Material+Icons&display=swap');

html{
  font-size:16px;
}
.ui-dialog{
  @extend %systemVariables;
  .tab-content .charsheet{
    .repitem{
      .roller:nth-last-child(3){
        padding-right:var(--half-gap);
      }
    }
    .large-parentheses {
      align-items: center;
      font-size: 2rem;
    }
    .fill-left__radio[data-value]:checked:before{
      font-family:var(--contentFont);
    }
    .parentheses{
      font-family:var(--topHeaderFont);
    }
    .text-center{
      text-align: center;
    }
    .input-controls{
      display:grid;
      grid-template-columns: [input-start increment-start] auto [increment-end] 1fr [decrement-start] auto [input-end decrement-end];
      grid-template-rows: [increment-start input-start decrement-start] auto [increment-end input-end decrement-end];
      > input{
        grid-area:input;
      }
    }
    .input-control--button{
      font-family:var(--topHeaderFont);
      z-index:100;
      &:first-of-type{
        grid-area:increment;
      }
      &:last-of-type{
        grid-area:decrement;
      }
    }
    .even-flow{
      gap:inherit;
      display:flex;
    }
    /*
      First of all we apply our default styles.
      Note that because we are using the placeholder, these styles would be first up in the cascade even if we put the extend declaration last.
      This is done first so that when we read the code, we can easily see that it is applied, and anything after it will overwrite those default styles.
    */

    // Clears the default Roll20 styling from all elements so that we can style them as we want more easily. We are using 3 classes here because we have to use at least that level of specificity to overcome many of the default Roll20 styles.
    @extend %defaultStyles;
    padding-top:0;
    .roller{
      &:not([role]){
        @extend %h4;
      }
      display:flex;
      gap:var(--half-gap);
      align-items:center;
      &:before{
        font-family:dicefontd20;
        content:'T'
      }
    }
    button{
      color:var(--fontColor);
      cursor:pointer;
    }
    h3{
      grid-area:header;
    }
    
    .styled-button{
      @extend %sectionBoxShadow;
      background-color: var(--backColor);
      border: 0;
      border-radius: .5rem;
      box-sizing: border-box;
      cursor:pointer;
      transition: {
        property:background-color,color;
        duration:var(--revealTime);
      };
      padding-inline:var(--half-gap);
      text-align:center;
  
      &:hover {
        background-color: var(--selectedColor);
        &,
        & *{
          color:var(--dark-secondarytext);
        }
      }
  
      &:focus {
        outline: 2px solid transparent;
        outline-offset: 2px;
      }
  
      &:focus-visible {
        box-shadow: none;
      }
    }
    .styled-button--controlled,
    .styled-button--controlled *{
      @extend %h4;
    }
    .styled-button-control:is(:checked,[type='hidden']:not([value='']):not([value='0'])) + .styled-button--controlled{
      background-color:var(--selectedColor);
      &,
      & *{
        color:var(--dark-secondarytext);
      }
    }
    .parens-holder{
      display:flex;
      align-items:center;
      > .input-label{
        gap:0;
        span{
          font-size:.8rem;
        }
      }
    }
    .stat-container{
      --shadowSize: 1px;
      border:2px solid var(--fontColor);
      display:flex;
      flex-direction:column;
      align-items:center;
      break-inside:avoid;
      aspect-ratio: 1 / 1;
      justify-content: center;
      &:not(.circle){
        border-radius:20px;
      }
    }
    :is(.stat-container,.overlay-content){
      .input-label__text,
      .roller{
        text-shadow:
          var(--shadowSize) 0 var(--backColor),
          calc( var(--shadowSize) * -1 ) 0 var(--backColor),
          0px var(--shadowSize) var(--backColor),
          0px calc( var(--shadowSize) * -1 ) var(--backColor);
      }
    }
    .circle{
      @extend %circle;
    }
    .overlay-content{
      display:grid;
      grid-template-areas:content;
      place-items:center;
      > * {
        grid-area:content !important;
      }
      > .overlaid-content{
        z-index: 100;
      }
    }
    .basic-border{
      border: 2px solid var(--fontColor);
    }
    .avoid-break{
      break-inside: avoid;
    }
    article{
      position:relative;
    }
    .text-check{
      span{
        transition: {
          duration:var(--revealTime);
          property:color,background-color;
        };
      }
      > input:checked{
        + span{
          background-color:var(--selectedColor);
          color:var(--backColor);
        }
      }
    }
  }
}
.ui-dialog .sheetform{
  background-color:var(--backColor);
  transition: {
    property:background-color;
    duration:var(--revealTime);
  };
}
.sheet-darkmode .ui-dialog{
  @extend %darkmodeStyle;
  --imgInvert:invert(0.9);
}
//the declarations for styles specifically applying to our main element.
#main{
  display:grid;
  grid-area:content;
}