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

/* 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 */


.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 */

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

#boussole-layout .form-item[data-drupal-selector="edit-field-entite"]{
  flex:0 0 31em;
}
#boussole-layout .boussole-wrapper{
  flex:1 1 auto;
}

/* drupal form optimisation */
#boussole-layout .form-item[data-drupal-selector="edit-field-entite"] table.field-multiple-table>tbody>tr{
  border: none;
}
/* #boussole-layout .form-item[data-drupal-selector="edit-field-entite"] table.field-multiple-table>tbody>tr>td.field-multiple-drag{
  
} */
#boussole-layout .form-item[data-drupal-selector="edit-field-entite"] table.field-multiple-table>tbody>tr>td:not(.field-multiple-drag)>div{
  padding:0.5em;
  border: 1px solid #bbb;
  border-radius: 5px;
}

#boussole-layout .form-item[data-drupal-selector="edit-field-entite"] table.field-multiple-table>tbody>tr>td:not(.field-multiple-drag) > div .horizontal-tabs-panes>details>.seven-details__wrapper{
  padding:0;
}
#boussole-layout .form-item[data-drupal-selector="edit-field-entite"] .field--type-entity-reference.field--name-field-entite.field--widget-inline-entity-form-complex>div>fieldset{
  border: none;
  margin:0;
  padding:0;
}
#boussole-layout .form-item[data-drupal-selector="edit-field-entite"] .field--type-entity-reference.field--name-field-entite.field--widget-inline-entity-form-complex>div>fieldset>legend{
  display:none;
}
#boussole-layout .form-item[data-drupal-selector="edit-field-entite"] .field--type-entity-reference.field--name-field-entite.field--widget-inline-entity-form-complex>div>fieldset>.fieldset-wrapper>table>thead{
  display:none;
}
#boussole-layout .form-item[data-drupal-selector="edit-field-entite"] .field--type-entity-reference.field--name-field-entite.field--widget-inline-entity-form-complex>div>fieldset>.fieldset-wrapper>table>tbody>tr{
  border: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;
}
.field--name-field-actuel-future > fieldset legend{
  display:none;
}
.field--name-field-actuel-future > fieldset > .fieldset-wrapper > .form-radios{
  display: flex; flex-direction: row; gap: 1em;
}

.field--name-field-prise > .form-item,
.field--name-field-menace-maintien-degres > .form-item{
  display:flex;
  flex-direction: row;
  gap:1em;
}

.field--name-field-prise > .form-item > label,
.field--name-field-menace-maintien-degres > .form-item > label{
  flex:0 0 auto; 
  width:9em;
}
.field--name-field-prise > .form-item > input,
.field--name-field-menace-maintien-degres > .form-item > input{
  width:7em;
  flex:0 1 auto; 
}
.field--name-field-prise > .form-item > .description,
.field--name-field-menace-maintien-degres > .form-item > .description{
  flex:0 1 auto; 
}

#boussole-layout .form-item[data-drupal-selector="edit-field-entite"] .button{
  font-size: 0.9em;
}

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