foundryvtt-reve-de-dragon/less/roll-dialog.less

.roll-dialog {
  font-family: CaslonAntique;
  display: grid;
  grid-template-areas:
    "header header     header     header     header     header     header"
    "action action     action     action     action     action     action"
    "mode   separation separation separation separation separation separation"
    "mode   carac      carac      carac      comp       comp       resume"
    "mode   choix      choix      choix      choix      choix      modifiers"
    "mode   resolution resolution resolution resolution resolution modifiers"
    "mode   chances    chances    chances    chances    chances    buttons"
    "footer footer     footer     footer     footer     footer     footer";
  grid-template-columns: 2rem 1rem 1fr 1fr 2fr 2fr 3fr;
  gap: 0.2rem;

  roll-header { grid-area: header; }
  roll-line  { grid-area: separation; }
  roll-action { grid-area: action; }
  roll-carac { grid-area: carac; }
  roll-comp { grid-area: comp; }
  
  roll-choix { grid-area: choix; }
  
  roll-table { grid-area: resolution; }
  roll-conditions { grid-area: modifiers; }
  roll-chances { grid-area: chances; }
  roll-resume { grid-area: resume; }
  roll-buttons  { grid-area: buttons; }
  
  roll-mode {
    grid-area: mode;
    display: flex;
    flex-direction: column;
  }
  roll-conditions roll-section[name="rollmode"],
  roll-mode {
    button[data-checked="true"] {
      background-color: var(--color-text-selection-bg);
      color: var(--color-controls);
      i { filter: invert(0.8); }
      img { filter: invert(0.2); }
    }
    button {
      height: 1.8rem;
      width: 1.8rem;
      gap: 0.5rem;
      padding: 0.2rem;
      background-color: var(--button-background-color);
      color: var(--color-controls);
      i { filter: invert(0.2); }
      img { filter: invert(0.8); }
    }
  }
  
  :is(roll-carac, roll-comp) {
    display: flex;
    flex-direction: row;
    align-items: baseline;
  }
  
  roll-section,
  roll-section div {
    display: flex;
    flex-direction: row;
    align-items: anchor-center;
    margin: 0 0.2rem;
  }
  
  roll-resume {
    display: flex;
    flex-direction: row;
    img.button-effect-img {
      filter: invert(0.8);
    }
  }

  roll-choix roll-section {
    display: grid;
    grid-template-areas:
      "selection selection"
      "img roll-part";
    grid-template-columns: 3.2rem 1fr;
    gap: 0.2rem;
    align-items: start;

    subline {
      grid-area: selection;
      display: flex;
      flex-direction: row;
    }
    roll-part-img {
      display: flex;
      flex-direction: column;
      grid-area: img;
      img{
        border: 0;
        padding: 1px;
        max-height: 3rem;
        max-width: 3rem;
        object-fit: contain;
        height: 100%;
      }
    }
    roll-part-detail {
      grid-area: roll-part;
      display: flex;
      flex-direction: column;
      align-items: normal;
      
      subline {
        display: flex;
        flex-direction: row;
        div.poesie-extrait{
          display: flex;
          flex-direction: column;
        }
      }
    }
  }

  roll-section selected-numeric-value {
    display: flow;
    width: 2.5rem;
    text-align: right;
    margin: 0 0.2rem 0 0.5rem;
    padding: 0 0.2rem;
  }

  roll-action {
    flex-basis: content;
    display: flex;
    flex-direction: row;
    align-items: center;
    border-bottom: 0.2rem solid;
    font-size: 1.2rem;
    font-weight: bold;
    
    roll-section {
      display: flex;
      flex-direction: row;
      align-items: center;

      img.action-img {
        float: left;
      }
      img {
        max-width: 3rem;
        max-height: 3rem;
        margin: 0 1rem;
        padding: 0;
      }
    }
  }

  roll-conditions {
    display: flex;
    flex-direction: column;
  }
  :is(roll-action, roll-carac, roll-comp) roll-section {
    flex-basis: content;
  }  

  :is(roll-choix, roll-conditions, roll-carac, roll-comp) {
    select {
      max-height: 1.6rem;
      margin: 0 0.2rem;
      padding: 0 0.2rem;
    }
    input[type="number"] {
      max-height: 1.6rem;
      max-width: 2.5rem;
      margin: 0 0.2rem;
      padding: 0 0.2rem;
    }
    img {
          max-width: 1.8rem;
          max-height: 1.8rem;
          margin: 0 0.2rem;
          padding: 0;
    }
  }

  roll-carac select[name="select-carac"] {
    max-width: 6rem;

  }    
  roll-comp select[name="select-comp"] {
    min-width: 8rem;
    max-width: 11rem;
    margin-left: 1rem;
  }     

  roll-conditions roll-section[name="coeur"] select[name="coeur"]  {
    max-width: 4rem;
  }

  roll-conditions roll-section[name="tricher"] img {
    /* image de d100 */
    max-width: 2.5rem;
    max-height: 2.5rem;
    gap: 0;
    margin: 0;
    padding: 0;
    filter: invert(0.8);
  }

  roll-buttons { 
    display: flex;
    flex-direction: row-reverse;
  }

  roll-table {
    table tr :is(th, td) {
        padding: 0.1rem;
        width: 1.5rem;
        text-align: center;
    }
  }

}