muzika-gromche/Frontend/src/style.css

@font-face {
  font-family: '3270';
  src: url('./assets/fonts/3270-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@import './reset.css' layer(base);
@import 'tailwindcss' prefix(tw);

@layer base {
  * {
    --main-background-color: #28282e;
    --inactive-text-color: #909090;
    --active-text-color: #ffffff;

    --view-separator-color: #090909;
    --view-separator-border: 1px solid var(--view-separator-color);

    --header-background-color: #17181a;
    --toolbar-background-color: #212126;
    --view-background-color: #212126;
    --card-background-color: #2a2a2d;
    --card-border-color: #000000;
    --card-border-width: 1px;
    --card-border-radius: 4px;
    --card-border: var(--card-border-width) solid var(--card-border-color);
    --card-separator-color: #212126;
    --card-separator-width: 2px;
    --card-outline-color: #929292;
    --card-outline-selected-color: #fa5b4a;
    --card-min-width: 24rem;

    --input-background-color: #1f1f1f;
    --input-outline-color: #070707;
    /* disabled */
    --input-disabled-text-color: #525256;
    --input-disabled-background-color: #242428;
    --input-disabled-outline-color: #1a1a1d;
    /* selected */
    --input-selected-outline-color: #e64b3d;
    --input-border-width: 1px;
    --input-border-radius: 4px;
    --input-selection-color: #4b4b4b;

    --timeline-background-color: var(--main-background-color);
    --timeline-background-top-color: #18181e;
    --timeline-border-top-color: var(--view-separator-color);
    --timeline-header-separator-color: #000000;
    --timeline-header-tick-edge-color: #2f3036;
    /*
    track layout:
        border-top
        ...track content...
        border-bottom
    --- border (separator) ---
        border-top
        ...track content...
        border-bottom
    */
    --timeline-track-border-color: #00000080;
    --timeline-track-border: 1px solid var(--timeline-track-border-color);
    --timeline-track-border-top-color: #00000033;
    --timeline-track-border-top: 1px solid var(--timeline-track-border-top-color);
    --timeline-track-border-bottom-color: #0000003a;
    --timeline-track-border-bottom: 1px solid var(--timeline-track-border-bottom-color);
    --timeline-text-color: #909090;
    --timeline-bar-color: #fffff0;
    --timeline-bar-opacity: 11%;
    --timeline-bar-width: 1px;

    --timeline-playhead-color: #e64b3d;
    /* TODO: playhead color has some transparency, which is hard to calculate */
    --timeline-playhead-color-1: #000000c0;
    --timeline-playhead-color-2: #00000059;
    --timeline-playhead-pressed-color: #e85c4f;

    --timeline-marker-beat-color: #ffffff1c;

    /* See ./lib/colors/markers.ts */
    --timeline-marker-color-blue: #007fe3;
    --timeline-marker-color-cyan: #00ced0;
    --timeline-marker-color-green: #00ad00;
    --timeline-marker-color-yellow: #f09d00;
    --timeline-marker-color-red: #e12401;
    --timeline-marker-color-pink: #ff44c8;
    --timeline-marker-color-purple: #9013fe;
    --timeline-marker-color-fuchsia: #c02e6f;
    --timeline-marker-color-rose: #ffa1b9;
    --timeline-marker-color-lavender: #a193c8;
    --timeline-marker-color-sky: #a193c8;
    --timeline-marker-color-mint: #72db00;
    --timeline-marker-color-lemon: #dce95a;
    --timeline-marker-color-sand: #c4915e;
    --timeline-marker-color-cocoa: #6e5143;
    --timeline-marker-color-cream: #f5ebe1;

    --timeline-clip-border-color: #15151580;
    --timeline-clip-border-color-inner: #151515;
    --timeline-clip-border-radius: 4px;

    /*
    * TODO:
    * timeline clip selected outline:
    * inner 1px black
    * outer 2px red
    */
    --timeline-clip-outline-selected-color: #e64b3d;
    --timeline-clip-outline-selected-width: 2px;
    --timeline-clip-outline-selected: var(--timeline-clip-outline-selected-width) solid
      var(--timeline-clip-outline-selected-color);

    /* See ./lib/colors/clips.ts */
    --timeline-clip-color-orange: #eb6e01;
    --timeline-clip-color-apricot: #ffa833;
    --timeline-clip-color-yellow: #d4ad1f;
    --timeline-clip-color-lime: #9fc615;
    --timeline-clip-color-olive: #5f9921;
    --timeline-clip-color-green: #448f65;
    --timeline-clip-color-teal: #019899;
    --timeline-clip-color-navy: #005278;
    --timeline-clip-color-blue: #4376a1;
    --timeline-clip-color-purple: #9972a0;
    --timeline-clip-color-violet: #d0568d;
    --timeline-clip-color-pink: #e98cb5;
    --timeline-clip-color-tan: #b9af97;
    --timeline-clip-color-beige: #c4a07c;
    --timeline-clip-color-brown: #996601;
    --timeline-clip-color-chocolate: #8c5a3f;

    --timeline-clip-label-background-color: #00000099;
    --timeline-clip-label-border-color: #00000060;

    --timeline-clip-baseline-color: #00000033;

    --player-background-color: #1a1a1a;

    --inspector-section-separator-color: #1e1e1e;

    --control-button-text-color: #929292;
    --control-button-background-color: var(--main-background-color);
    --control-button-border-color: #43474d;
    /* active */
    --control-button-active-text-color: #ffffff;
    --control-button-active-background-color: #17181a;
    --control-button-active-border-color: #ffffff;
    /* disabled */
    --control-button-disabled-text-color: #525256;
    --control-button-disabled-border-color: #33343b;
  }

  :root {
    font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
    line-height: 1.5;
    font-weight: 400;

    color-scheme: light dark;
    color: rgba(255, 255, 255, 0.87);
    background-color: var(--main-background-color);

    font-synthesis: none;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  a {
    font-weight: 500;
    color: #646cff;
    text-decoration: inherit;
  }

  a:hover {
    color: #535bf2;
  }

  body {
    padding: 0;
    min-width: 320px;
    height: 100vh;
  }

  #app {
    height: 100%;
  }
}

@theme {
  --font-3270: '3270', monospace;
  --font-mono: '3270', monospace;
}

@layer utilities {
  .toolbar-background {
    background-color: var(--toolbar-background-color);
  }

  .timeline-background {
    background-color: var(--timeline-background-color);
  }

  .scrollbar-none {
    scrollbar-width: none;
  }

  .toolbar-icon-shadow {
    filter: drop-shadow(rgb(0 0 0 / 0.75) 0px 1px);
  }
}

@layer components {
  .card-border {
    border: 1px solid var(--card-border-color);
    border-radius: var(--card-border-radius);
  }
}

@layer components {
  .input-text {
    --input-text-color: var(--active-text-color);
    color: var(--input-text-color);
    background-color: var(--input-background-color);
    border-radius: var(--input-border-radius);
    outline: var(--input-border-width) solid var(--input-outline-color);

    & input,
    & textarea {
      padding: 1px 2px;

      &:focus {
        outline: none;
      }
    }

    &:has(input:disabled),
    &:has(textarea:disabled),
    &:disabled {
      --input-text-color: var(--input-disabled-text-color);
      --input-background-color: var(--input-disabled-background-color);
      --input-outline-color: var(--input-disabled-outline-color);
    }

    &:has(input:not(:disabled):read-write:focus),
    &:has(textarea:not(:disabled):read-write:focus) {
      outline-color: var(--input-selected-outline-color);
    }

    /* Selection background for text inside input-text containers */
    & ::selection,
    & input::selection,
    & textarea::selection {
      background-color: var(--input-selection-color);
      color: inherit;
    }

    & ::-moz-selection,
    & input::-moz-selection,
    & textarea::-moz-selection {
      background-color: var(--input-selection-color);
      color: inherit;
    }
  }

  input.input-text,
  textarea.input-text {
    padding: 1px 2px;

    &:not(:disabled):read-write:focus,
    &:not(:disabled):read-write:focus {
      outline-color: var(--input-selected-outline-color);
    }

    &::selection {
      background-color: var(--input-selection-color);
      color: inherit;
    }

    &::-moz-selection {
      background-color: var(--input-selection-color);
      color: inherit;
    }
  }

  .input-number,
  input.input-number {
    text-align: center;
  }
}

@layer components {
  .control-label {
    &.control-label__disabled {
      color: var(--inactive-text-color);
    }
  }
}

@layer components {
  .control-button {
    @apply tw:inline-flex tw:items-center tw:justify-center;
    @apply tw:gap-1 tw:px-2 tw:py-0 tw:min-w-24;

    color: var(--control-button-text-color);
    border-radius: 1em;
    border-width: 1px;
    border-style: solid;
    border-color: var(--control-button-border-color);
    background-color: var(--control-button-background-color);

    & > .control-button__icon {
      @apply tw:flex-none tw:w-4 tw:h-4 tw:fill-current;
    }

    & > .control-button__text {
    }

    &:focus-visible {
      outline: none;
      --control-button-border-color: var(--control-button-active-border-color);
    }

    &:not(:disabled) {
      @variant hover {
        --control-button-text-color: var(--control-button-active-text-color);
        --control-button-border-color: var(--control-button-active-border-color);
      }
      @variant active {
        --control-button-text-color: var(--control-button-active-text-color);
        --control-button-border-color: var(--control-button-active-border-color);
        @variant hover {
          --control-button-background-color: var(--control-button-active-background-color);
        }
      }
    }
    @variant disabled {
      --control-button-text-color: var(--control-button-disabled-text-color);
      --control-button-border-color: var(--control-button-disabled-border-color);
    }
  }
}

@layer components {
  .control-select {
    --input-text-color: var(--active-text-color);
    color: var(--input-text-color);
    background-color: var(--input-background-color);
    border-radius: var(--input-border-radius);
    outline: var(--input-border-width) solid var(--input-outline-color);

    padding: 1px 16px;

    &:disabled {
      --input-text-color: var(--input-disabled-text-color);
      --input-background-color: var(--input-disabled-background-color);
      --input-outline-color: var(--input-disabled-outline-color);
    }

    /* not sure about this */
    &:not(:disabled):focus {
      outline-color: var(--input-selected-outline-color);
    }
  }
}