ouatterrir-api/src/web/themes/custom/ouatminimal_theme/scss/ouatminimal.scss

/* trying to get more vertical space for the boussole */
.adminimal .content-header {
  background-color: #434343;
  padding: 0.5rem 0 0;
}
.adminimal .page-title,
.adminimal .heading-a {
  font-size: 1.5em;
}
.toolbar-tray a {
  padding: 0.5em 1.3333em;
}

.is-horizontal .tabs.primary a {
  padding: 0 2em 0 2em;
  background-image: none;
}

/* END trying to get more vertical space for the boussole */

// toolbar
#toolbar-item-administration-tray{
  .toolbar-box{
    >button{
      display: none;
    }
  }
}

div[data-drupal-selector="edit-actions"]{
  display: flex;
  flex-direction: column;
  >*{
    width:10em;
    margin: 0 0 0.5em!important;
  }
}

.adminimal input.form-autocomplete, .adminimal input.form-text, .adminimal input.form-tel, .adminimal input.form-email, .adminimal input.form-url, .adminimal input.form-search, .adminimal input.form-number, .adminimal input.form-color, .adminimal input.form-file, .adminimal input.form-date, .adminimal input.form-time, .adminimal textarea.form-textarea{
  background-color: #fff;
  border-radius: 3px;
}

.adminimal select{
  background-color: #fff;
  border-radius: 3px;
}

.adminimal .button {
  /* background-color: #2196F3; */
  border-radius: 5px;
  padding: 0.3em 0.5em;
}
.adminimal .button,
.adminimal .image-button {
  margin-right: 0.5em;
  margin-left: 0.5em;
}
.adminimal .button:first-child,
.adminimal .image-button:first-child {
  margin-right: 0;
  margin-left: 0;
}

.js td .dropbutton-multiple{
  border-radius: 3px;
}
.views-exposed-form{
  font-size: 0.9em;
}
.views-exposed-form input[type="text"]{
  max-width:10em;
}
.views-exposed-form input[type="text"].form-autocomplete{
  max-width:14em;
}
.views-exposed-form select.form-select{
  min-height: 0;
  padding: 0.2em 0.4em 0.2em 0.5em;
}

/**
 * Node add/edit form layout
 */

/* Narrow screens */
.layout-region {
  box-sizing: border-box;
}

/* Wide screens */
@media
  screen and (min-width: 780px),
  (orientation: landscape) and (min-device-height: 780px) {
  
  .layout-region-node-center{
    display: flex;
    flex-direction: row;
    gap: 1em;
  }

  [dir="rtl"] .layout-region-node-center{
    display: flex;
    flex-direction: row-reverse;
  }

  .layout-region-node-main {
    /* reset */
    float: none;
    box-sizing: border-box;
    // width: auto;
    padding-right:0; /* LTR */
    /* custom */
    flex: 1 0 auto;
  }

  [dir="rtl"] .layout-region-node-main{
    float: none;
    padding-right: 0;
    padding-left: 0;
  }

  .layout-region-node-secondary {
    /* reset */
    float: none; /* LTR */
    width: auto;
    /* custom */
    flex: 0 0 25em;
  }

  [dir="rtl"] .layout-region-node-secondary {
    float: none;
  }

  /* @todo File an issue to add a standard class to all text-like inputs */
  .layout-region-node-secondary .form-autocomplete,
  .layout-region-node-secondary .form-text,
  .layout-region-node-secondary .form-tel,
  .layout-region-node-secondary .form-email,
  .layout-region-node-secondary .form-url,
  .layout-region-node-secondary .form-search,
  .layout-region-node-secondary .form-number,
  .layout-region-node-secondary .form-color,
  .layout-region-node-secondary textarea {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
  }
}

/**
 * The vertical toolbar mode gets triggered for narrow screens, which throws off
 * the intent of media queries written for the viewport width. When the vertical
 * toolbar is on, we need to suppress layout for the original media width + the
 * toolbar width (240px). In this case, 240px + 780px.
 */
@media
  screen and (max-width: 1020px) {
  .toolbar-vertical.toolbar-tray-open .layout-region-node-center{
    display: block;
  }
  .toolbar-vertical.toolbar-tray-open .layout-region-node-main,
  .toolbar-vertical.toolbar-tray-open .layout-region-node-footer,
  .toolbar-vertical.toolbar-tray-open .layout-region-node-secondary {
    float: none;
    width: auto;
    padding-right: 0;
  }
}


/* BOUSSOLE FORM */
#node-concernement-edit-form{
  .layout-region-node-secondary{
    position: fixed;
    background-color: #fff;
    bottom:0; left:2.5em;
    width:200px;

    >*{
      font-size: 0.765em;
    }
    #edit-actions{
      display: flex;
      flex-direction: column;
      gap: 1em;
    }
    #edit-actions input,
    #edit-actions a{
      font-size: 1em;
      margin: 0;
    }
    /*  #edit-actions a.button--danger{
      margin-top: 2em;
    } */
    
  }

  .vertical-tabs__menu{
    /* width: auto; */
    max-width:200px;
  }
  .vertical-tabs__panes{
    margin-left: 200px;
  }

  &,
  #node-concernement-form{
    .field--name-title label,
    .field--name-field-description label,
    .field--name-field-caillou label{
      display: none;
    }
    .field--name-title>.form-item>div,
    .field--name-field-description>.form-item>div,
    .field--name-field-caillou>.form-item>div{
      font-weight: 600;
    }
    
  }

  .ief-entity-operations input[type="submit"].ief-submit-remove{
    display: none;
  }

  .field--name-field-date{
    >*{
      display: inline-block;
    }
  }

  .field--name-field-reponse{
    >.field__item{
      padding-top: 1em;
      &:not(:last-of-type){
        padding-bottom: 1em;
        border-bottom: #ccc 1px solid;
        margin-bottom: 1em;
      }
    }
  }

  .field--type-text-long{
    .filter-wrapper{
      display: none;
    }
  }
}




#boussole-layout{
  display: flex;
  flex-direction: row;
  gap: 1em;

  textarea{
    resize: vertical;
    // width:30%;
    // max-width: 30%;
  }

  >.form-item[data-drupal-selector="edit-field-entite"]{
    flex:0 0 50em;
    max-height: calc(100vh - 150px);
    overflow-y: auto;
    // outline: red 1px solid;
    >table.field-multiple-table{
      &, >tbody, >tbody>tr{
        width: 100%;
        word-break: break-all;
        overflow-wrap: break-word;
      }
      >tbody{
      }
      >tbody>tr{
        border: none;
      
        >td:not(.field-multiple-drag)>div{
          padding:0.5em;
          border: 1px solid #bbb;
          border-radius: 5px;
          transition: all 2s ease-in-out;
          
          &.entite-over{
            border-color: #01ffe2;
            transition: all 0.2s ease-in-out;
          }
  
          .horizontal-tabs-panes>details>.seven-details__wrapper{
            padding:0;
          }
        }
      }
    }
    .field--type-entity-reference.field--name-field-entite.field--widget-inline-entity-form-complex>div>fieldset{
      border: none;
      margin:0;
      padding:0;
      
      >legend{
        display:none;
      }
      
      .fieldset-wrapper>table{
        >thead{
          display:none;
        }
        >tbody>tr{
          border:none;
        }
      }
    
    }
    
    // input[type="text"],
    // input[type="url"]{
    //   max-width: 80%;
    // }
    
    td.field-multiple-drag {
      min-width: 0;
      width: 25px;
    }
    
    div.field--type-image,
    div.field--type-file{
      thead{
        display: none;
      }
      
      .form-managed-file{
        width:420px;
        input[type="text"]{
          width:90%;
        }
      }

    }
   
    .button{
      font-size: 0.9em;
    }












  }
  .boussole-wrapper{
    flex:1 1 auto;
    min-width: 800px;
  
    /* boussole */
    .boussole{
      background-image: url(../images/boussole.svg);
      background-clip: padding-box;
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
      position: relative;
      padding: 8%;
      box-sizing: border-box;
      // aspect-ratio: 1 / 1;
      /* width:100%; */
      // max-height: calc(100vh - 150px);
      
      .entity{
        position: absolute;
        width:10px; height:10px;
        border-radius: 5px;
        background-color: black;
        transform: translate(-5px, -5px);
        cursor:move;
        
        &.entite-over{
          background-color: #01ffe2;
        }
        &.ajax-new{
          background-color: #fff;
          border: 1px solid black;
        }
        &.ajax-new.entite-over{
          border: 1px solid 01ffe2;
        }
      
        &.hide{
          display: none;
        }
      }
    }
    
  
  }


}


div.field--name-field-actuel-future.form-wrapper,
div.field--name-field-prise.form-wrapper,
div.field--name-field-menace-maintien-degres.form-wrapper{
  display: none;
}

div.field--name-field-action.form-wrapper label,
div.field--name-field-menace-maintien label{
  display: none;
}


// BESOIN

fieldset[data-drupal-selector="edit-field-besoin"] {
  border:none;
  margin: 0;
  padding: 0;
  >legend{
    display: none;
  }
  >div.fieldset-wrapper>table>tbody>tr.ief-row-form{
    border: 1px #ccc solid;
  }
}

// Reponse
.field--name-field-besoin-on-reponses.field__item {
  // font-size: large;
  // padding: 1em 0;
}