File size: 7,862 Bytes
4d9d622 d9b9062 4d9d622 c821fe2 d9b9062 bb868d0 4d9d622 d9b9062 4d9d622 6dcf27a f0b8c8b bc4257c 2996ad4 bc4257c f0b8c8b bc4257c 2996ad4 bc4257c 2996ad4 bc4257c 2996ad4 bc4257c | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 | @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;750;900&family=Space+Grotesk:wght@400;500;650;700&family=JetBrains+Mono:wght@400;500&display=swap');
@import "tailwindcss";
@theme {
--font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
--font-display: "Space Grotesk", sans-serif;
--font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
}
/* Custom scrolling inside the panels */
::-webkit-scrollbar {
width: 6px;
height: 6px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background: rgba(100, 116, 139, 0.2);
border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
background: rgba(100, 116, 139, 0.4);
}
/* Custom visual pulse for iframe indicators and outlines */
@keyframes outlinePulse {
0%, 100% { outline-color: rgba(59, 130, 246, 0.8); }
50% { outline-color: rgba(99, 102, 241, 0.9); }
}
.selected-element-pulse {
outline: 2px solid rgba(59, 130, 246, 0.8);
animation: outlinePulse 2s infinite;
}
/* Ensure parsed HTML templates inherit default clean resets, presenting a crisp, clean standard white browser background by default */
.visual-user-content {
color-scheme: light;
background-color: #ffffff;
color: #0d1117;
font-family: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
/* If the visual canvas viewport has a custom dark background utility (e.g. bg-slate-900, dark backgrounds) injected, we let .visual-user-content have a transparent background to inherit the custom background correctly */
#visual-canvas-viewport[class*="bg-slate-"] .visual-user-content,
#visual-canvas-viewport[class*="bg-zinc-"] .visual-user-content,
#visual-canvas-viewport[class*="bg-gray-"] .visual-user-content,
#visual-canvas-viewport[class*="bg-[#"] .visual-user-content,
#visual-canvas-viewport[class*="bg-neutral-"] .visual-user-content,
#visual-canvas-viewport[class*="bg-black"] .visual-user-content {
background-color: transparent !important;
color: inherit !important;
}
.visual-user-content input,
.visual-user-content textarea,
.visual-user-content select {
color: inherit;
background-color: transparent;
}
/* Guard the sidebar inputs, textareas, labels and toolbar elements against user-injected style bleeding */
#sidebar-widgets-panel,
#sidebar-widgets-panel *,
#builder-top-bar,
#builder-top-bar *,
#styling-config-fields-panel,
#styling-config-fields-panel * {
/* Enforce standard dark theme color schemes */
color-scheme: dark !important;
font-family: "Inter", ui-sans-serif, system-ui, sans-serif !important;
}
/* Specific shield for input fields inside panels to guarantee text visibility (Image 2 and 3) */
#sidebar-widgets-panel input[type="text"],
#sidebar-widgets-panel input[type="number"],
#sidebar-widgets-panel input[type="color"],
#sidebar-widgets-panel textarea,
#sidebar-widgets-panel select,
#styling-config-fields-panel input[type="text"],
#styling-config-fields-panel input[type="number"],
#styling-config-fields-panel input[type="color"],
#styling-config-fields-panel textarea,
#styling-config-fields-panel select {
color: #ffffff !important;
background-color: #181a1c !important;
border: 1px solid #27272a !important;
outline: none !important;
box-shadow: none !important;
border-radius: 4px !important;
}
#sidebar-widgets-panel input[type="text"]::placeholder,
#sidebar-widgets-panel textarea::placeholder,
#styling-config-fields-panel input[type="text"]::placeholder,
#styling-config-fields-panel textarea::placeholder {
color: #52525b !important;
}
#sidebar-widgets-panel input[type="text"]:focus,
#sidebar-widgets-panel textarea:focus,
#styling-config-fields-panel input[type="text"]:focus,
#styling-config-fields-panel textarea:focus {
border-color: #ec4899 !important; /* Glow on focus mimicking tailwind focus:border-pink-500 */
}
/* Custom CSS to control floating action buttons at top-right with state triggers based on active hover */
#visual-canvas-viewport .hover-buttons-container {
position: absolute !important;
right: 0 !important;
top: 0 !important;
z-index: 50 !important;
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0) !important;
opacity: 1 !important;
transition: box-shadow 120ms ease-in-out, opacity 120ms ease-in-out !important;
}
#visual-canvas-viewport .hover-buttons-container:hover {
opacity: 0.8 !important;
}
#visual-canvas-viewport .hover-buttons-container button,
#visual-canvas-viewport .hover-buttons-container > div {
opacity: 0 !important;
transform: scale(0.95) !important;
transition: opacity 120ms ease-in-out, transform 120ms ease-in-out !important;
}
.visual-user-content:hover .hover-buttons-container button,
#visual-canvas-viewport:hover .hover-buttons-container button,
#visual-canvas-viewport .hover-buttons-container:hover button,
.visual-user-content:hover .hover-buttons-container > div,
#visual-canvas-viewport:hover .hover-buttons-container > div,
#visual-canvas-viewport .hover-buttons-container:hover > div {
opacity: 1 !important;
transform: scale(1) !important;
}
.visual-user-content:hover .hover-buttons-container,
#visual-canvas-viewport:hover .hover-buttons-container,
#visual-canvas-viewport .hover-buttons-container:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35) !important;
}
/* Custom Tooltips for hover buttons menu */
#visual-canvas-viewport .hover-buttons-container button[data-tooltip],
#visual-canvas-viewport .hover-buttons-container div[data-tooltip] {
position: relative !important;
}
#visual-canvas-viewport .hover-buttons-container button[data-tooltip]::after,
#visual-canvas-viewport .hover-buttons-container div[data-tooltip]::after {
content: attr(data-tooltip) !important;
position: absolute !important;
bottom: calc(100% + 8px) !important;
left: 50% !important;
transform: translateX(-50%) translateY(4px) scale(0.9) !important;
background: linear-gradient(135deg, #2a2b2e 0%, #151618 100%) !important;
color: #f8fafc !important;
border: 1px solid rgba(255, 255, 255, 0.08) !important;
padding: 4px 8px !important;
border-radius: 6px !important;
font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
font-size: 9.5px !important;
font-weight: 500 !important;
letter-spacing: 0.01em !important;
white-space: nowrap !important;
opacity: 0 !important;
pointer-events: none !important;
transition: opacity 120ms ease-in-out, transform 120ms ease-in-out !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
z-index: 60 !important;
}
#visual-canvas-viewport .hover-buttons-container button[data-tooltip]:hover::after,
#visual-canvas-viewport .hover-buttons-container div[data-tooltip]:hover::after {
opacity: 1 !important;
transform: translateX(-50%) translateY(0) scale(1) !important;
}
#visual-canvas-viewport .hover-buttons-container button[data-tooltip]::before,
#visual-canvas-viewport .hover-buttons-container div[data-tooltip]::before {
content: "" !important;
position: absolute !important;
bottom: calc(100% + 4px) !important;
left: 50% !important;
transform: translateX(-50%) translateY(4px) !important;
border-width: 4px 4px 0 4px !important;
border-style: solid !important;
border-color: #151618 transparent transparent transparent !important;
opacity: 0 !important;
pointer-events: none !important;
transition: opacity 120ms ease-in-out, transform 120ms ease-in-out !important;
z-index: 60 !important;
}
#visual-canvas-viewport .hover-buttons-container button[data-tooltip]:hover::before,
#visual-canvas-viewport .hover-buttons-container div[data-tooltip]:hover::before {
opacity: 1 !important;
transform: translateX(-50%) translateY(0) !important;
}
|