ontime/client/src/features/editors/Editor.module.css

.mainContainer {
  background: linear-gradient(90deg, #202020 0%, #121212 100%);
  width: 100%;
  height: 100%;
  margin: auto;
  color: #fffd;
  padding: 2vh;

  display: grid;
  grid-template-rows: 38vh 1fr 1fr;
  grid-template-columns: 1fr 25vw 25vw 5vw;
  grid-template-areas:
    'even mess play sett'
    'even prev prev sett'
    'even prev prev sett';
  gap: 2vh;
}

/* 2/3 window, hide previews */
@media (max-width: 1250px) and (min-height: 700px) {
  .mainContainer {
    grid-template-rows: 1fr 1fr;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-areas:
      'even play sett'
      'even mess sett';
  }

  .preview {
    visibility: hidden;
  }
}

/* 1/3 window, show control only */
@media (max-width: 750px) and (min-height: 500px) {
  .mainContainer {
    grid-template-rows: auto 1fr;
    grid-template-columns: 100%;
    grid-template-areas:
      'mess'
      'play';
  }

  .editor,
  .preview,
  .settings {
    visibility: hidden;
  }
}

/* 1/3 corner window, playback only */
@media (max-width: 900px) and (max-height: 500px) {
  .mainContainer {
    grid-template-rows: 1fr;
    grid-template-columns: 1fr;
    grid-template-areas: 'play';
  }

  .editor,
  .messages,
  .preview,
  .settings {
    visibility: hidden;
  }
}

.mainContainer > div {
  border-radius: 0.5em;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.13);
  padding: 0.8em 1.5em;

  display: flex;
  flex-direction: column;
}

.editor {
  grid-area: even;
}

.preview {
  grid-area: prev;
}

.messages {
  grid-area: mess;
}

.playback {
  grid-area: play;
}

.settings {
  grid-area: sett;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.6em;
}

.content {
  padding-top: 1.5em;
}

.cornerButtonContainer {
  position: relative;
  top: -4.5em;
  display: flex;
  justify-content: flex-end;
}

.buttonContainer {
  padding-bottom: 2em;
  display: flex;
  justify-content: flex-end;
}

/* width */
::-webkit-scrollbar {
  width: 0.5em;
}

/* Track */
::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.01);
  border-radius: 4px;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 4px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.35);
}