settings.less

html {
  width:100%;
  height:100%;
}

body {
  width:100%;
  height:100%;
  box-sizing:border-box;
  margin:0;
  padding:0;
  font-family:sans-serif;
  & > #vue-container {
    width:100%;
    height:100%;
    box-sizing:border-box;
    display:grid;
    grid-template-columns:auto 1fr;
    grid-template-rows:1fr;
    & > ul {
      list-style:none;
      margin:0;
      padding:12px 0;
      background-color:#f5f5f5;
      & > li {
        user-select:none;
        cursor:pointer;
        padding:8px 12px;
        &[data-active=true] {
          background:#fff;
          cursor:default;
        }
      }
    }
    & > main {
      margin:16px;
      & > h1 {
        font-size:1.8rem;
        margin:.1rem 0 .5rem 0;
      }
      & > ul {
        list-style:none;
        margin:0;
        padding:0;
        & > li {
          display:flex;
          flex-direction:row;
          justify-content:stretch;
          align-items:center;
          & > span {
            margin-right:8px;
          }
          & > input {
            flex-grow:1;
            flex-shrink:1;
            margin:0;
          }
        }
      }
    }
  }
}