Taeluf.com

styles.css

* {
    box-sizing: border-box;
  }
  
  .container {
      /* display:flex;
      flex-wrap:wrap;
      flex-direction:row;
      justify-content:flex-start;
      align-items:stretch; */
      width:100%;
      min-height:100%;
  }
  
  #wyg {
      min-height:400px;
      border-bottom: 1px solid black;
      border-top: 1px solid black;
  }
  #elementList {
      min-height:80px;
      max-width:1024px;
      background:lightgrey;
      display:grid;
      grid-template-columns: repeat( auto-fit, minmax(250px, 1fr) );
      padding:8px;
  }
  #groupList {
      max-width:1024px;
      min-height:80px;
      background:grey;
      display:grid;
      grid-template-columns: repeat( auto-fit, minmax(250px, 1fr) );
      padding:8px;
  }
  #settings {
      max-width:1024px;
      min-height:200px;
      background:lightgrey
  }
  #settings::before {
     content: "Settings";
  }
  
  .element {
      border: 1px solid black; 
      margin:4px;
      padding:4px;
      height:2em;
      display:inline-block;
  }
  
  .group {
      height:3em;
      border: 1px solid black;
      display:inline-block;
      margin:4px;
      padding:4px;
  }

  #controlPanel {
    min-height:3em;
    background: lightgrey;
    width:100%;
    padding:0.5em;
    vertical-align:middle;
}
#editorSettings {
    min-height:3em;
    background: lightgrey;
    width:100%;
    padding:0.5em;
    vertical-align:middle;
    border-bottom:1px solid black;
}

  #templateMoveButtons {
      display: inline;
      border:none;
  }


 #wyg .wyg-highlighted{
      background:yellow;
      cursor:pointer;
  }
  #wyg .wyg-selected {
      background:lightblue;
  }