src/app/devtools/devtools-tabs/devtools-tabs.component.scss - 1.x/develop - 3axapp/ext-js-3-devtools

src/app/devtools/devtools-tabs/devtools-tabs.component.scss
185 строк3 KB
Zakharov A.
issue-13
08 сен 2025, 18:19
08 сен 2025, 18:199bf328b
:host {
  position: relative;
  width: 100%;
  height: 100%;
  display: block;
}

mat-icon {
  font-size: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.nav-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid var(--color-separator);
  height: 26px;

  &__settings {
    text-align: right;
  }

  button {
    border: none;
    cursor: pointer;
    opacity: 0.8;

    &:active {
      opacity: 1;
    }

    &:not(:hover) {
      background: none;
    }
  }
}

.tab-content {
  position: relative;
  height: calc(100% - 31px);
}

.inspector-active {
  color: var(--color-inspector-active) !important;
}

::ng-deep {

  // https://web.dev/articles/building/a-theme-switch-component?hl=ru
  .sun-and-moon {
    width: 16px;
    margin-right: -2px;

    > :is(.moon,.sun,.sun-beams) {
      transform-origin: center center
    }

    > :is(.moon,.sun) {
      fill: var(--icon-fill)
    }

    > .sun-beams {
      stroke: var(--icon-fill);
      stroke-width: 2px
    }
  }

  .theme-toggle:is(:hover,:focus-visible) {
    > .sun-and-moon {
      > :is(.moon,.sun) {
        fill: var(--icon-fill-hover)
      }

      > .sun-beams {
        stroke: var(--icon-fill-hover)
      }
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    .sun-and-moon {
      > .sun {
        transition: transform .5s cubic-bezier(.5, 1.25, .75, 1.25)
      }

      > .sun-beams {
        transition: transform .5s cubic-bezier(.5, 1.5, .75, 1.25), opacity .5s cubic-bezier(.25, 0, .3, 1)
      }

      .moon > circle {
        transition: transform .25s cubic-bezier(0, 0, 0, 1)
      }

    }
    @supports (cx: 1) {
      .sun-and-moon .moon {
        > circle {
          transition: cx .25s cubic-bezier(0, 0, 0, 1)
        }
      }
    }
  }

  .theme-toggle {
    --icon-fill: var(--mat-app-text-color, var(--mat-sys-on-background, inherit));
    --icon-fill-hover: hsl(210 10% 15%);
    //background: none;
    //border: none;
    //padding: 0;
    //aspect-ratio: 1;
    //border-radius: 50%;
    //cursor: pointer;
    //touch-action: manipulation;
    //-webkit-tap-highlight-color: transparent;
    //outline-offset: 5px

    svg {
      //inline-size: 100%;
      block-size: 100%;
      stroke-linecap: round
    }
  }


  .dark-theme {
    @supports (cx: 1) {
      .sun-and-moon {
        > .moon {
          > circle {
            transform: translate(0);
            cx: 17
          }
        }
      }
    }

    .theme-toggle {
      --icon-fill: hsl(210 10% 70%);
      --icon-fill-hover: hsl(210 15% 90%)
    }

    .sun-and-moon {
      > .sun {
        transform: scale(1.75)
      }

      > .sun-beams {
        opacity: 0
      }

      > .moon {
        > circle {
          transform: translate(-7px)
        }
      }
    }

  }

  @media (prefers-reduced-motion: no-preference) {
    .dark-theme {
      .sun-and-moon {
        > .sun {
          transform: scale(1.75);
          transition-timing-function: cubic-bezier(.25, 0, .3, 1);
          transition-duration: .25s
        }

        > .sun-beams {
          transform: rotate(-25deg);
          transition-duration: .15s
        }

        > .moon {
          > circle {
            transition-delay: .25s;
            transition-duration: .5s
          }
        }
      }
    }
  }
}