skottie/modules/skottie-sk/skottie-sk.scss

@use 'node_modules/jsoneditor/dist/jsoneditor.min.css';

body.body-sk.font-sk {
  background: var(--surface);

  &.darkmode {
    --surface-1dp: #2a2a2a;
  }

  button:focus {
    outline: dashed 1px var(--on-surface);
    outline-offset: 4px;
  }

  skottie-sk {
    * {
      font-size: 16px;
    }

    app-sk {
      --sidebar-width: 200px;
      min-height: 100vh;
      height: 100vh;
      background: var(--surface);
      display: block;
    }

    .app-container {
      display: grid;
      height: 100%;
      grid-template-columns: 100%;
      grid-template-rows: 48px auto 48px;
    }

    header {
      grid-column: 1;
      grid-row: 1;
      min-height: 0;
    }

    main {
      grid-column: 1;
      grid-row: 2;
      min-height: 0;
      overflow: hidden;
      display: flex;
    }

    footer {
      grid-column: 1;
      grid-row: 3;
      min-height: 0;
    }

    spinner-sk[active] {
      display: inline-block;
    }

    header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: none;
      min-height: 48px;
      background-color: var(--surface-1dp);
      padding: 0 24px;

      h2 {
        font-size: 16px;
      }

      span a {
        margin-left: 8px;
        margin-right: 8px;
      }

      .header__button {
        margin-left: 8px;
      }

      .header__button {
        margin-left: 8px;
      }
    }

    main .threecol {
      display: flex;
      flex-flow: row;
      background-color: var(--surface);
      width: 100%;

      .left,
      .right,
      .main {
        display: flex;
        flex-flow: column;
        border-radius: 10px;
      }

      .left,
      .right {
        background: var(--surface-1dp);
        padding: 0;
        width: 329px;
        flex: 0 0 auto;

        .json-chooser {
          padding: 8px;
          border-bottom: solid var(--surface) 1px;

          .upload-download {
            display: flex;
            align-items: center;
          }

          .title {
            font-weight: bold;
          }

          .edit-config {
            display: inline-block;
            background-color: var(--surface);
            color: var(--on-surface);
            border: solid 2px var(--primary);
            padding: 6px;
            border-radius: 10px;
            margin-left: 16px;
            box-shadow: none;
            flex: 1 1 auto;
          }
        }

        .apply-button {
          margin: 16px;
          display: inline-block;
        }

        .options-container {
          margin: 8px 8px 8px 16px;
        }

        .embed {
          label {
            display: block;
            margin: 16px;

            input {
              display: block;
              margin: 16px;
            }
          }
        }
      }

      .left {
        margin: 16px 0 0 16px;
      }

      .right {
        margin: 16px 16px 0 0;
      }

      .main {
        background: var(--background);
        margin: 0;
        flex: 1 1 auto;

        .players {
          min-height: 0;

          &-container {
            width: 100%;
            height: 100%;
            margin: 0;
            flex-direction: row;

            &-player {
              display: flex;
              flex: 1 1 0;
            }
          }
        }

        .playback {
          padding: 24px;
          background-color: var(--skottie-surface);
          border-radius: 0 0 8px 8px;

          &-content {
            display: flex;
            width: 100%;
            align-items: center;

            &-frameTotal {
              border: 1px solid var(--skottie-border);
              border-top-right-radius: 5px;
              border-bottom-right-radius: 5px;
              padding: 4px 8px;
              margin: 0 0 0 -1px;
            }

            &__button {
              width: 50px;
              height: 54px;
            }

            .icon-sk-svg {
              fill: var(--skottie-on-surface-white);
              border: 2px solid var(--skottie-on-surface-white);
              border-radius: 50%;
              width: 100%;
              height: 100%;
            }

            #playpause-play {
              display: none;
            }
          }
        }
      }

      dialog.export,
      dialog.perf-chart,
      dialog.editor {
        position: absolute;
        top: 50%;
        left: 0;
        width: 100%;
        background-color: var(--surface);
        color: var(--on-surface);
        border: none;
        padding: 0;

        .top-ribbon {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin: 0 8px;
        }
      }
    }

    figure {
      display: flex;
      flex-flow: column;
      position: relative;
    }

    figure canvas,
    figure div {
      margin: 0 auto;
    }

    .wasm_loading {
      position: absolute;
      text-align: center;
      left: 0;
      right: 0;
      top: 20px;
      bottom: 0;
      border: none;
    }

    .wasm_loading > div {
      border: none;
    }

    figcaption {
      align-self: center;
      font-weight: bold;
      font-size: 18px;
      margin: 0.6em;
      text-align: center;

      div {
        border: none;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }

    button {
      text-transform: initial;
    }

    .loading {
      display: flex;
      align-items: center;
      font-size: 120%;
      font-weight: bold;
    }

    .loading span {
      margin-left: 0.5em;
    }

    .figures {
      display: flex;
      flex-flow: row wrap;
    }

    .download,
    .download a {
      display: inline-block;
      color: var(--blue);
    }

    .download a {
      margin-left: 0.6em;
    }

    #embed {
      padding: 1em;
      border: solid var(--on-surface) 1px;
      margin: 1em;
      background: var(--surface);
    }

    footer {
      display: flex;
      justify-content: flex-end;
    }

    footer div {
      padding: 1em;
    }

    .controls > * {
      display: inline-block;
      vertical-align: middle;
    }

    [hidden] {
      display: none !important;
    }

    .scrub {
      display: flex;
      margin: 8px;
      flex: 1 1 auto;
      flex-direction: column;

      input {
        width: 100%;
      }

      input[type='range'] {
        height: 26px;
        -webkit-appearance: none;
        margin: 8px 0 4px 0;
        width: 100%;
        border: none;
      }
      input[type='range']:focus {
        outline: none;
      }
      input[type='range']::-webkit-slider-runnable-track {
        width: 100%;
        height: 7px;
        cursor: pointer;
        box-shadow: 0px 0px 0px #000000;
        background: var(--skottie-range-slider);
        border-radius: 4px;
        border: 0px solid #000000;
      }
      input[type='range']::-webkit-slider-thumb {
        box-shadow: 0px 0px 0px #000000;
        border: 0px solid #000000;
        height: 20px;
        width: 20px;
        border-radius: 10px;
        background: var(--skottie-range-thumb);
        cursor: pointer;
        -webkit-appearance: none;
        margin-top: -6.5px;
      }
      input[type='range']:focus::-webkit-slider-runnable-track {
        background: var(--skottie-range-slider);
      }
    }

    .library {
      flex: 1 1 auto;
    }

    #volume-slider {
      display: block;
      margin: 8px;

      input {
        width: 10em;
      }
    }

    #frameInput {
      width: 4em;
      border: 1px solid var(--skottie-border);
      border-top-left-radius: 5px;
      border-bottom-left-radius: 5px;
      padding: 4px 8px;
    }
  }

  // The third-party jsoneditor doesn't support darkmode
  // https://github.com/josdejong/jsoneditor/issues/893 so we force the editor
  // back to light mode.
  #json_editor {
    background: white;

    // Need this rule to have higher specificity otherwise the common themes
    // button background color will override it.
    .jsoneditor-menu button {
      background-image: url(./img/jsoneditor-icons.svg);
    }

    input {
      color: black;
      background: white;
    }

    tr {
      background: var(--white);
    }

    tr:hover {
      background-color: var(--light-gray);
    }

    .jsoneditor-contextmenu .jsoneditor-menu li ul .jsoneditor-icon {
      margin-left: 0;
    }

    button {
      /* Prevent clashes with element-sk/buttons.css */
      padding: 4px;
      height: 28px;
      margin: 2px;
      width: 26px;
      min-width: initial;
      transition: initial;
      box-shadow: initial;
    }

    .jsoneditor-menu button {
      min-width: initial;
      transition: initial;
      box-shadow: initial;
    }

    .jsoneditor-contextmenu-root button {
      width: initial;
    }

    .jsoneditor-search button {
      height: 22px;
      margin: 2px;
      width: 22px;
    }
  }
}