bytedance-flowgram/apps/docs/theme/components/logo/index.less

/**
 * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
 * SPDX-License-Identifier: MIT
 */

.flowgram-logo-container {
  position: absolute;
  top: 50px;
  width: calc(30vw - 64px);
  height: 550px;
  opacity: 0;

  // Mobile responsive: move to top on small screens to prevent text overlap
  @media (max-width: 768px) {
    top: 0;
    right: 0;
    width: 100%;
    height: 300px;
    margin-bottom: 20px;
    pointer-events: none;
  }

  // Tablet responsive: adjust size and position
  @media (min-width: 769px) and (max-width: 1024px) {
    width: calc(45vw - 32px);
    right: 16px;
  }

  // Ensure minimum width to prevent squashing
  @media (min-width: 1025px) and (max-width: 1300px) {
    width: calc(45vw - 32px);
    right: 0;
  }

  // Ensure minimum width to prevent squashing
  @media (min-width: 1301) {
    width: calc(30vw - 64px);
    right: 15vw;
  }
}

.flowgram-logo-mask {
  background-image: conic-gradient(from 180deg at 50% 50%, #4161a6, #5681bd, #4a9da3, #479590, #4161a6);
  filter: blur(120px);
  opacity: 0.4;
  z-index: 0;
  border-radius: 100%;
  width: 80%;
  height: 80%;
  animation: flowgram-logo-spin 2s linear infinite;
}

@keyframes flowgram-logo-spin {
  from {
    transform: translateX(20%) translateY(20%) rotate(0deg) scale(0.8);
  }

  50% {
    transform: translateX(20%) translateY(20%) rotate(180deg) scale(1);
  }

  to {
    transform: translateX(20%) translateY(20%) rotate(360deg) scale(0.8);
  }
}

.gedit-playground {
  background: transparent !important;
}

.gedit-playground-scroll-right-block {
  display: none;
}

.gedit-playground-scroll-bottom-block {
  display: none;
}


.flowgram-logo-node {
  width: 60px;
  min-height: 150px;
  height: auto;
  border-radius: 16px;
  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.04), 0 4px 12px 0 rgba(0, 0, 0, 0.02);
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  padding: 12px;
  cursor: move;
  transition: box-shadow 0.3s ease-in-out, transform 0.2s ease-in-out;

  &:hover {
    box-shadow:
      0 2px 6px 0 rgba(0, 0, 0, 0.04),
      0 4px 12px 0 rgba(0, 0, 0, 0.02),
      0 0 16px 2px rgba(var(--glow-color, 59, 130, 246), 0.6),
      0 0 32px 6px rgba(var(--glow-color, 59, 130, 246), 0.4),
      0 0 48px 12px rgba(var(--glow-color, 59, 130, 246), 0.25),
      0 0 64px 16px rgba(var(--glow-color, 59, 130, 246), 0.15);
    transform: scale(1.05);
  }
}