styles.cssβ’2.88 kB
.diagram-zoom-drag-settings {
padding: 16px;
overflow-y: scroll;
height: 100%;
width: 100%;
}
.diagram-zoom-drag-settings .invalid {
border: 2px solid #ef4444 !important;
background-color: rgba(239, 68, 68, 0.08) !important;
box-shadow: inset 0 1px 3px rgba(239, 68, 68, 0.2) !important;
transition: all 0.2s ease !important;
animation: error-pulse 0.5s ease-out !important;
}
.diagram-zoom-drag-settings .invalid:focus {
outline: none !important;
box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.3) !important;
}
@keyframes error-pulse {
0% {
transform: scale(1);
}
50% {
transform: scale(1.02);
}
100% {
transform: scale(1);
}
}
.diagram-container {
transition: all 0.3s ease;
position: relative;
overflow: hidden;
cursor: grab;
}
.diagram-container[data-diagram-zoom-drag-rendering-mode='preview'] {
margin-bottom: 40px;
}
.diagram-container.is-fullscreen {
background-color: var(--background-primary);
}
.diagram-content {
position: relative;
transform-origin: center;
cursor: grab;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.diagram-zoom-drag-panel {
position: absolute;
display: grid;
gap: 5px;
background: rgba(var(--background-primary-rgb), 0.7);
padding: 5px;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
transition:
opacity 0.3s ease,
transform 0.3s ease;
transform: translateY(0);
opacity: 1;
}
.diagram-zoom-drag-panel.visible {
visibility: visible;
opacity: 1;
transform: translateY(0);
}
.diagram-zoom-drag-panel.hidden {
visibility: hidden;
opacity: 0;
transform: translateY(10px);
cursor: grab;
}
.diagram-zoom-drag-panel.hidden > button {
cursor: grab;
pointer-events: none;
}
.diagram-container.folded
.diagram-service-panel.diagram-zoom-drag-panel.hidden
#fullscreen-button {
visibility: visible;
pointer-events: all;
}
.live-preview-parent {
all: unset !important; /* ΠΠΎΠ»Π½ΡΠΉ ΡΠ±ΡΠΎΡ ΡΡΠΈΠ»Π΅ΠΉ */
display: block !important; /* ΠΠ»ΠΎΡΠ½ΡΠΉ ΠΏΠΎΡΠΎΠΊ */
width: auto !important; /* ΠΠΎΠ΄ΡΡΡΠ°ΠΈΠ²Π°Π΅ΡΡΡ ΠΏΠΎΠ΄ Π΄Π΅ΡΠ΅ΠΉ */
height: auto !important; /* ΠΠΎΠ΄ΡΡΡΠ°ΠΈΠ²Π°Π΅ΡΡΡ ΠΏΠΎΠ΄ Π΄Π΅ΡΠ΅ΠΉ */
min-width: 0 !important; /* Π Π°Π·ΡΠ΅ΡΠ°Π΅Ρ ΡΠΆΠ°ΡΠΈΠ΅ */
min-height: 0 !important; /* Π Π°Π·ΡΠ΅ΡΠ°Π΅Ρ ΡΠΆΠ°ΡΠΈΠ΅ */
overflow: visible !important; /* ΠΡΠΊΠ»ΡΡΠ°Π΅Ρ ΠΎΠ±ΡΠ΅Π·ΠΊΡ */
contain: style !important; /* ΠΠ»ΠΎΠΊΠΈΡΡΠ΅Ρ Π²Π»ΠΈΡΠ½ΠΈΠ΅ Π²Π½Π΅ΡΠ½ΠΈΡ
ΡΡΠΈΠ»Π΅ΠΉ */
padding-bottom: 28px !important;
transition: all 0.3s ease;
}
.live-preview {
margin-top: 28px;
}
.diagram-zoom-drag-settings .invalid {
border: 2px solid red !important;
}