roll20-character-sheets/rapidfire_system/Mixins/_genericplaceholders.scss

@import url('https://fonts.googleapis.com/css?family=Bakbak+One|Oxanium:wght@700|Raleway:wght@500;600;700;800&display=swap');
//Mixins
@mixin borderedLabel($color:black){
	color: $color;
	padding: 5px;
	border-radius: 5px;
	border: 1px solid black;
}
@mixin selectedLabel($backColor:black, $color:white){
	background-color: $backColor;
	color: $color;
}
@mixin pseudoRadio($backColor:black, $color:white){
	input:checked+label,
	label:hover{
		@include selectedLabel($backColor, $color);
	}
}
%font-vars{
  --topHeaderFont:Bakbak One;
  --midHeaderFont:Oxanium;
  --contentFont:Raleway;
}
//Placeholders
// Clears the default Roll20 styling from all elements
.ui-dialog{
  @extend %font-vars;
  .tab-content .charsheet{
    select,
    textarea,
    input,
    .uneditable-input,
    label,
    button{
      all: initial;
    }
  }
}
%stackedGrid{
  &.stacked{
    flex-direction:column-reverse;
    &.center>*{
      text-align: center;
    }
    &:not(.center)> *{
      text-align: left;
    }
    > [name]{
      width:100%;
    }
  }
}
%inputHighlight{
  border-width: 1px 3px;
  border-style: solid;
  border-color: black;
  border-radius: 5px;
  box-sizing: border-box;
  transition: var(--focusTrans);
}
%ratio1_1{
  aspect-ratio: 1/1;
}
%grid{
  display:grid;
}
%inline-grid{
  display: inline-grid;
}
%circle{
  border-radius: 50%;
}
%split{
  display:flex;
  gap:var(--grid-gap);
  > *{
    width:0px !important;
    flex: 1 1 0;
  }
}
%base-border{
  border-width: 1px 3px;
  border-style: solid;
  border-radius: 5px;
  border-color: transparent;
  box-sizing: border-box;
}
%base-button{
	background-color: #DCDCDC33;
	border-radius: 5px;
	box-shadow: 0 2px 4px black;
	border-width: 0;
	transition:{
		property:box-shadow,backdrop-filter;
		duration:200ms;
		timing-function:ease-out;
	};
	backdrop-filter:blur(1px);
	overflow:hidden;
	&:is(:hover,:focus){
		background-color: #85858580;
		box-shadow: 0 4px 6px black;
		backdrop-filter:blur(2px);
	}
	&:active{
		background-color: #858585ff;
		box-shadow: 0 1px 2px black;
		backdrop-filter:blur(0px);
	}
}

%die-button{
	@extend %base-button;
	line-height: 14px;
	/*height to vertically center a 2rem dicefontd10*/
	font-size: 2rem;
	font-weight: normal;
	font-style: normal;
	padding: 5px 3px 7px;
}

%text-button{
	padding: 5px 7px;
	@extend %base-button;
}
%adaptiveText{
  @extend %grid;
  grid-template-columns: auto;
  grid-template-rows: auto;
  grid-template-areas: "content";
  >*{
    grid-area: content;
  }
  >span{
    opacity: 0;
    z-index: -10;
    white-space: pre-wrap;
    @extend %base-border;
    text-transform: initial;
  }
  textarea{
    resize: none;
  }
}
%pictos{
  font-family: pictos;
  text-transform: initial;
}
%pictos3{
  font-family: pictos three;
  text-transform: initial;
}
%pictosCustom{
  font-family: pictos custom;
  text-transform: initial;
}
%uppercase{
  text-transform:uppercase;
}
%roller{
  display: inline-flex;
  align-items: center;
  align-self:start;
  gap: var(--half-gap);
  &:before{
    content:'L';
    font-family:dicefontd6;
  }
}
%hidden{
  display: none!important;
}
%italics{
  font-style: italic;
}
%baseText{
  line-height: normal;
}
%baseHeader{
  @extend %baseText;
  color:black;
  display: block;
  white-space: nowrap;
  margin-top: 0px;
  margin-bottom: 0px;
  font-weight:normal;
}
%importantHeader{
  text-transform: uppercase;
  font-weight: normal;
}
%midHeader{
  &:not(input){
    text-transform:capitalize;
  }
}
%h1-style{
  @extend %baseHeader;
  @extend %importantHeader;
  font-size: 2rem;
  font-family: var(--topHeaderFont);
  &:not(input){
    text-align: center;
  }
}
%h1{
  @extend %h1-style;
  *{
    @extend %h1-style;
  }
}
%h2-style{
  @extend %baseHeader;
  @extend %importantHeader;
  font-size: 1.75rem;
  font-family: var(--topHeaderFont);
  grid-area:header;
  &:not(input){
    text-align: center;
  }
}
%h2{
  @extend %h2-style;
  *{
    @extend %h2-style;
  }
}
%h3-style{
  @extend %baseHeader;
  @extend %importantHeader;
  font-size: 1.5rem;
  font-family: var(--topHeaderFont);
  &:not(input){
    text-align: center;
  }
}
%h3{
  @extend %h3-style;
  *{
    @extend %h3-style;
  }
}
%h4-style{
  @extend %baseHeader;
  @extend %midHeader;
  font-size: 1.25rem;
  font-family: var(--midHeaderFont);
  &:not(input){
    text-align: center;
  }
}
%h4{
  @extend %h4-style;
  *{
    @extend %h4-style;
  }
}
%h5-style{
  @extend %baseHeader;
  @extend %midHeader;
  font-size: 1rem;
  font-style:normal;
  font-family: var(--midHeaderFont);
  &:not(input){
    text-align: center;
  }
}
%h5{
  @extend %h5-style;
  *{
    @extend %h5-style;
  }
}
%contents{
	display:contents;
}
%checked{
  background-color: var(--selectedColor);
}
%boxed{
  border: 1px solid black;
  border-radius:0;
  box-sizing:border-box;
}
//- Default styles
%defaultStyles{
  --grid-gap: 1rem;
  --half-gap: calc(var(--grid-gap) / 2);
  --tiny-gap: calc(var(--half-gap) / 2);
  --big-gap: calc(var(--grid-gap) * 2);
  --revealTime: 500ms;
  --delayTime: 200ms;
  --inputSwap: opacity var(--revealTime) ease var(--delayTime);
  --focusTiming: 500ms ease;
  --focusTrans: all var(--focusTiming);
  --borderColor: black;
  --fontColor: black;
  --backColor: #ffffff;
  --spanSectionColumn:1/-1;
  --displayBorderWidth: 2px;
  --subHeadBackColor:grey;
  --unselectedColor:lightgrey;
  --selectedColor:black;
  //Images
  --topCorner:url('https://s3.amazonaws.com/files.d20.io/images/258525471/MZYT-HjOvfJOqUXufyBkww/original.png');
  --bottomCorner:url('https://s3.amazonaws.com/files.d20.io/images/258525472/d7gSQyNdXW4tfBUa3osltQ/original.png');
  --headerBottom:url('https://s3.amazonaws.com/files.d20.io/images/258525865/9moWl3pE8miL8gqQC2UPRw/original.png');
  --footerTop:url('https://s3.amazonaws.com/files.d20.io/images/258525864/dzZKV6kH_fltY8yH9D-ptA/original.png');
  position: relative;
  gap: var(--grid-gap);
  button{
    cursor: pointer;
  }
  textarea{
    resize: vertical;
    min-height: 3.5rem;
    white-space: pre-wrap;
    &.fixed{
      resize: none;
      overflow: auto;
    }
  }
  .span-2{
    grid-column:span 2;
  }
  .span-all{
    grid-column:1/-1;
  }
  select,
  .pseudo-select span,
  textarea,
  input:not(:is([type='radio'],[type='checkbox'])),
  .uneditable-input{
    padding: 2px;
    font-size:1rem;
  }
  input:is([type="text"],[type="number"]),textarea{
    cursor:auto;
  }
  select,
  .pseudo-select span,
  input:not(:where([type='checkbox'], [type='radio'])),
  .uneditable-input,
  textarea{
    @extend %base-border;
  }
  select,
  .pseudo-select span{
    -webkit-apperance: none;
    appearance: none;
    text-transform: capitalize;
    overflow: hidden!important;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-align: center;
  }
  input{
    width: auto;
    &:placeholder{
      color: #ededed80;
    }
    &.plus-control:not([value*="-"])+span:before{
      content: '+';
    }
  }
  span,
  input,
  textarea{
    font-size: 1rem;
    @extend %baseText;
  }
  span,input,textarea,button,select{
    font-family:var(--contentFont);
    --fontWght: 600;
    font-weight: var(--fontWght);
    font-variation-settings: "wght" var(--fontWght);
  }
  .hidden,
  *[hidden]{
    @extend %hidden;
  }
  .italics{
    @extend %italics;
  }
  h1,
  *[aria-level='1']{
    @extend %h1;
  }
  h2,
  *[aria-level='2']{
    @extend %h2;
  }
  h3,
  *[aria-level='3']{
    @extend %h3;
  }
  h4,
  *[aria-level='4']{
    @extend %h4;
  }
  h5,
  *[aria-level='5']{
    @extend %h5;
  }
  input{
    &[type='checkbox']{
      align-self: center;
      border: 1px solid black;
      cursor: pointer;
      &:checked{
        @extend %checked;
      }
    }
    &[type='radio']{
      appearance: radio;
    }
    &[type='number']{
      width: 3rem;
      -moz-appearance: textfield !important;
      text-align: center;
      &::-webkit-inner-spin-button,
      &::-webkit-outer-spin-button{
        -webkit-appearance: none;
        margin: 0;
      }
    }
  }
  .number{
    width:2rem;
    box-sizing:border-box;
  }
  section{
    @extend %grid;
    gap:var(--half-gap);
    align-self:start;
    &.page{
      display: none;
    }
    &.inactive{
      display:none !important;
    }
  }
  .pictos{
    @extend %pictos;
  }
  .pictos3{
    @extend %pictos3;
  }
  .pictoscustom{
    @extend %pictosCustom;
  }
  .pseudo-button{
    display: inline;
    cursor: pointer;
    border-radius: 5px;
    text-transform: uppercase;
    border: 1px solid black;
    text-align: center;
    padding: 0 5px;
  }
  .input-label{
    display: inline-flex;
    gap: var(--half-gap);
    align-items:center;
    @extend %stackedGrid;
    &:not(.stacked){
      > [name]:not([type="number"],[type="checkbox"],[type='radio']){
        width:0;
        flex:1 1 0;
      }
      >:not([name]){
        flex:0 0 auto;
      }
      &.large > [name]{
        @extend h2;
      }
    }
  }
  .input-label--dual{
    grid-template-columns: 1fr auto 1fr;
    grid-template-areas: 'over 	over 	over' 'under 	under 	under';
    >span:last-of-type{
      grid-column: 1 / -1;
    }
    >input{
      width: 100%;
    }
    >.slash{
      line-height: 0rem;
      font-weight: normal;
    }
  }
  .headed-textarea{
    @extend %grid;
    grid-template-rows: auto 1fr;
    grid-template-columns: auto;
    h5{
      justify-self: start;
    }
  }
  .contents,
  .sheet-contents{
    @extend %contents;
  }
  .boxed,
  .sheet-boxed{
    @extend %boxed;
    &.thick-left{
      border-left-width: 5px;
    }
    &.thick-bottom{
      border-bottom-width: 5px;
    }
    &.thick-right{
      border-right-width: 5px;
    }
    &.thick-top{
      border-top-width: 5px;
    }
  }
  .underlined,
  .sheet-underlined{
    border-radius: 0;
    border-bottom: 1px solid black;
    transition: var(--focusTrans);
  }
  :is(.underlined,.boxed){
    &:not([readonly]):is(:hover, :focus,:focus-within){
      @extend %inputHighlight;
    }
    &:not([readonly]):is(:focus,:focus-within){
      background-color: #DCDCDC;
      transition: var(--focusTrans);
    }
  }
  .ratio1-1{
    @extend %ratio1_1;
  }
  .small-scale-grid,
  fieldset.small-scale-grid+.repcontainer{
    @extend %grid;
    grid-template-columns: [header-start]repeat(auto-fit, minmax(15rem, 1fr))[header-end];
    grid-template-rows: [header-start]auto[header-end];
    gap: var(--half-gap);
    >.repitem{
      display: flex;
      gap: var(--half-gap);
      > :is(.dot-row,input[type='text']){
        flex: 1 1 0;
        width: 100%;
      }
    }
    .repcontrol_move{
      display: none;
    }
  }
  .short-text{
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    text-transform: initial;
  }
  .roll-container{
		@extend %grid;
    align-self:center;
    opacity:0;
    grid-row:1 / 2;
  }
  .repitem{
    > input:not([type='checkbox']){
      width:100%;
    }
    .headed-textarea{
      grid-column:1/-1;
    }
    .collapse{
      opacity:0;
      position:absolute;
      right:-10px;
      top:0px;
      border:0px solid black;
      border-radius:0;
      color:var(--selectedColor);
      text-transform:none;
      &:before{
        content:'y';
        font-family:pictos;
      }
      &:checked{
        background-color:transparent;
        color:var(--unselectedColor);
        ~ .expanded{
          display:none;
        }
        ~ .expanded--empty:is(:not([value]),[value='']) + *{
          display:none
        }
      }
      &:hover{
        color:var(--selectedColor);
      }
    }
    &:hover{
      .collapse,.roll-container{
        opacity:1;
      }
    }
  }
  .repcontainer.editmode{
    .collapse{
      display:none;
    }
  }
  .repcontainer{
    display:grid;
    row-gap:var(--grid-gap);
  }
  .repeating-container{
    &:is(:hover,:focus-within,:focus) .repcontrol-button{
      opacity:1;
    }
  }
  .repcontrol-button{
    @extend %text-button;
    grid-area:header;
    align-self:center;
    text-transform:none;
    opacity:0;
    transition:opacity var(--revealTime);
    ~ .repcontrol{
      display:none;
    }
  }
  .repcontrol-button--add{
    justify-self:start;
    &:before{
      font-family:pictos;
      content:'&';
    }
  }
  .repcontrol-button--edit{
    justify-self:end;
    &:before{
      font-family:pictos;
      content:'p';
    }
  }
  .box{
    border-radius:0;
    width:10px;
    height:10px;
  }
}
#main{
  .uppercase{
    @extend %uppercase;
  }
}