wehub-resource-sync
105 lines
2.4 KiB
Plaintext
105 lines
2.4 KiB
Plaintext
/**
|
|
* 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);
|
|
}
|
|
}
|