Spaces:
Running
Running
| /* ===== Mubashra Studio - Premium Admin Editor ===== */ | |
| :root { | |
| --primary: #2D6A4F; | |
| --primary-light: #40916C; | |
| --primary-dark: #1B4332; | |
| --accent: #52B788; | |
| /* Pastel Theme */ | |
| --bg-main: #F7FAF9; | |
| --bg-canvas: #FFFFFF; | |
| --bg-sidebar: #FFFFFF; | |
| --bg-header: rgba(255, 255, 255, 0.95); | |
| /* Pastel accents */ | |
| --pastel-green: #D8E9E1; | |
| --pastel-green-light: #E8F3EE; | |
| --pastel-mint: #E2EFDE; | |
| /* Text Colors */ | |
| --text-primary: #111418; | |
| --text-secondary: #4A5568; | |
| --text-muted: #718096; | |
| /* Borders */ | |
| --border-light: #E2E8F0; | |
| --border-medium: #CBD5E0; | |
| /* Shadows */ | |
| --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06); | |
| --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); | |
| --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.12); | |
| --shadow-primary: 0 4px 20px rgba(45, 106, 79, 0.25); | |
| /* Sizing */ | |
| --header-height: 60px; | |
| --sidebar-width: 260px; | |
| --mobile-toolbar-height: 56px; | |
| /* Transitions */ | |
| --transition-fast: 0.15s ease; | |
| --transition-normal: 0.25s ease; | |
| --transition-slow: 0.4s cubic-bezier(0.4, 0, 0.2, 1); | |
| } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; | |
| background: var(--bg-main); | |
| color: var(--text-primary); | |
| overflow: hidden; | |
| -webkit-tap-highlight-color: transparent; | |
| } | |
| /* ===== Auth Overlay ===== */ | |
| .auth-overlay { | |
| position: fixed; | |
| inset: 0; | |
| z-index: 9999; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| background: var(--bg-main); | |
| padding: 1rem; | |
| } | |
| .auth-overlay.hidden { | |
| display: none; | |
| } | |
| .auth-background { | |
| position: absolute; | |
| inset: 0; | |
| overflow: hidden; | |
| } | |
| .blob { | |
| position: absolute; | |
| border-radius: 50%; | |
| filter: blur(100px); | |
| animation: float 15s infinite ease-in-out; | |
| } | |
| .blob-1 { | |
| top: -10%; | |
| left: 10%; | |
| width: 45%; | |
| height: 45%; | |
| background: var(--pastel-green); | |
| } | |
| .blob-2 { | |
| bottom: -5%; | |
| right: 5%; | |
| width: 50%; | |
| height: 50%; | |
| background: var(--pastel-mint); | |
| animation-delay: 2s; | |
| } | |
| .blob-3 { | |
| top: 20%; | |
| right: 15%; | |
| width: 30%; | |
| height: 30%; | |
| background: var(--pastel-green-light); | |
| animation-delay: 4s; | |
| } | |
| @keyframes float { | |
| 0% { | |
| transform: translate(0, 0) scale(1); | |
| } | |
| 33% { | |
| transform: translate(30px, -50px) scale(1.1); | |
| } | |
| 66% { | |
| transform: translate(-20px, 20px) scale(0.9); | |
| } | |
| 100% { | |
| transform: translate(0, 0) scale(1); | |
| } | |
| } | |
| .auth-card { | |
| position: relative; | |
| z-index: 1; | |
| background: var(--bg-canvas); | |
| padding: 2rem; | |
| border-radius: 24px; | |
| border: 1px solid var(--border-light); | |
| box-shadow: var(--shadow-lg); | |
| text-align: center; | |
| width: 100%; | |
| max-width: 420px; | |
| } | |
| @media (min-width: 768px) { | |
| .auth-card { | |
| padding: 3rem; | |
| } | |
| } | |
| .auth-logo { | |
| width: 48px; | |
| height: 48px; | |
| margin: 0 auto 1.5rem; | |
| color: var(--primary); | |
| } | |
| .auth-logo svg { | |
| width: 100%; | |
| height: 100%; | |
| } | |
| .auth-title { | |
| font-size: 1.5rem; | |
| font-weight: 700; | |
| color: var(--text-primary); | |
| margin-bottom: 0.5rem; | |
| } | |
| @media (min-width: 768px) { | |
| .auth-title { | |
| font-size: 1.75rem; | |
| } | |
| } | |
| .auth-subtitle { | |
| font-size: 0.9rem; | |
| color: var(--text-muted); | |
| margin-bottom: 1.5rem; | |
| } | |
| @media (min-width: 768px) { | |
| .auth-subtitle { | |
| font-size: 0.95rem; | |
| margin-bottom: 2rem; | |
| } | |
| } | |
| .auth-input-group { | |
| position: relative; | |
| margin-bottom: 1.5rem; | |
| } | |
| .auth-input-group .material-symbols-outlined { | |
| position: absolute; | |
| left: 1rem; | |
| top: 50%; | |
| transform: translateY(-50%); | |
| color: var(--text-muted); | |
| font-size: 1.25rem; | |
| } | |
| .auth-input-group input { | |
| width: 100%; | |
| padding: 1rem 1rem 1rem 3rem; | |
| font-size: 1rem; | |
| font-family: inherit; | |
| border: 1px solid var(--border-light); | |
| border-radius: 12px; | |
| background: var(--pastel-green-light); | |
| color: var(--text-primary); | |
| transition: var(--transition-fast); | |
| } | |
| .auth-input-group input:focus { | |
| outline: none; | |
| border-color: var(--primary); | |
| box-shadow: 0 0 0 3px rgba(45, 106, 79, 0.1); | |
| } | |
| .auth-btn { | |
| width: 100%; | |
| padding: 1rem 2rem; | |
| font-size: 1rem; | |
| font-weight: 600; | |
| font-family: inherit; | |
| background: var(--primary); | |
| color: white; | |
| border: none; | |
| border-radius: 12px; | |
| cursor: pointer; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 0.5rem; | |
| transition: var(--transition-normal); | |
| } | |
| .auth-btn:hover { | |
| background: var(--primary-light); | |
| box-shadow: var(--shadow-primary); | |
| } | |
| .auth-btn:active { | |
| transform: scale(0.98); | |
| } | |
| .error-msg { | |
| color: #E53E3E; | |
| font-size: 0.875rem; | |
| margin-top: 1rem; | |
| min-height: 1.25rem; | |
| } | |
| /* ===== Admin Workspace ===== */ | |
| .admin-workspace { | |
| width: 100%; | |
| height: 100vh; | |
| height: 100dvh; | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .admin-workspace.hidden { | |
| display: none; | |
| } | |
| /* ===== Studio Header ===== */ | |
| .studio-header { | |
| height: var(--header-height); | |
| background: var(--bg-header); | |
| backdrop-filter: blur(12px); | |
| border-bottom: 1px solid var(--border-light); | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| padding: 0 0.75rem; | |
| position: relative; | |
| z-index: 100; | |
| flex-shrink: 0; | |
| } | |
| @media (min-width: 768px) { | |
| .studio-header { | |
| padding: 0 1.25rem; | |
| } | |
| } | |
| .header-left, | |
| .header-right { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| } | |
| @media (min-width: 768px) { | |
| .header-left, | |
| .header-right { | |
| gap: 0.75rem; | |
| } | |
| } | |
| .menu-toggle { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| width: 40px; | |
| height: 40px; | |
| background: transparent; | |
| border: none; | |
| border-radius: 8px; | |
| cursor: pointer; | |
| color: var(--text-secondary); | |
| } | |
| .menu-toggle:hover { | |
| background: var(--pastel-green-light); | |
| } | |
| @media (min-width: 992px) { | |
| .menu-toggle { | |
| display: none; | |
| } | |
| } | |
| .header-center { | |
| display: none; | |
| } | |
| @media (min-width: 768px) { | |
| .header-center { | |
| display: block; | |
| position: absolute; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| } | |
| } | |
| .logo { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| color: var(--primary); | |
| font-weight: 700; | |
| font-size: 1rem; | |
| } | |
| @media (min-width: 768px) { | |
| .logo { | |
| font-size: 1.1rem; | |
| } | |
| } | |
| .logo svg { | |
| width: 24px; | |
| height: 24px; | |
| } | |
| @media (min-width: 768px) { | |
| .logo svg { | |
| width: 28px; | |
| height: 28px; | |
| } | |
| } | |
| .logo-text { | |
| display: none; | |
| } | |
| @media (min-width: 640px) { | |
| .logo-text { | |
| display: inline; | |
| } | |
| } | |
| .title-input { | |
| font-size: 1rem; | |
| font-weight: 600; | |
| font-family: inherit; | |
| background: transparent; | |
| border: 1px solid transparent; | |
| padding: 0.5rem 1rem; | |
| border-radius: 8px; | |
| text-align: center; | |
| color: var(--text-primary); | |
| min-width: 200px; | |
| transition: var(--transition-fast); | |
| } | |
| .title-input:hover { | |
| background: var(--pastel-green-light); | |
| } | |
| .title-input:focus { | |
| outline: none; | |
| background: var(--pastel-green-light); | |
| border-color: var(--primary); | |
| } | |
| /* Zoom Controls */ | |
| .zoom-controls { | |
| display: none; | |
| align-items: center; | |
| gap: 0.25rem; | |
| background: var(--pastel-green-light); | |
| border-radius: 8px; | |
| padding: 0.25rem; | |
| margin-right: 0.5rem; | |
| } | |
| @media (min-width: 768px) { | |
| .zoom-controls { | |
| display: flex; | |
| } | |
| } | |
| .zoom-btn { | |
| width: 32px; | |
| height: 32px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| background: transparent; | |
| border: none; | |
| border-radius: 6px; | |
| cursor: pointer; | |
| color: var(--text-secondary); | |
| transition: var(--transition-fast); | |
| } | |
| .zoom-btn:hover { | |
| background: var(--pastel-green); | |
| color: var(--primary); | |
| } | |
| .zoom-btn .material-symbols-outlined { | |
| font-size: 1.1rem; | |
| } | |
| .zoom-level { | |
| font-size: 0.75rem; | |
| font-weight: 600; | |
| color: var(--text-secondary); | |
| min-width: 40px; | |
| text-align: center; | |
| } | |
| .header-btn { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 0.5rem; | |
| padding: 0.5rem; | |
| font-size: 0.875rem; | |
| font-weight: 600; | |
| font-family: inherit; | |
| border-radius: 8px; | |
| cursor: pointer; | |
| transition: var(--transition-fast); | |
| text-decoration: none; | |
| min-width: 40px; | |
| min-height: 40px; | |
| } | |
| @media (min-width: 768px) { | |
| .header-btn { | |
| padding: 0.5rem 1rem; | |
| } | |
| } | |
| .btn-text { | |
| display: none; | |
| } | |
| @media (min-width: 768px) { | |
| .btn-text { | |
| display: inline; | |
| } | |
| } | |
| .header-btn.primary { | |
| background: var(--primary); | |
| color: white; | |
| border: none; | |
| } | |
| .header-btn.primary:hover { | |
| background: var(--primary-light); | |
| box-shadow: var(--shadow-primary); | |
| } | |
| .header-btn.secondary { | |
| background: var(--pastel-green-light); | |
| color: var(--primary); | |
| border: 1px solid var(--pastel-green); | |
| } | |
| .header-btn.secondary:hover { | |
| background: var(--pastel-green); | |
| } | |
| .header-btn.ghost { | |
| background: transparent; | |
| color: var(--text-muted); | |
| border: none; | |
| } | |
| .header-btn.ghost:hover { | |
| background: var(--pastel-green-light); | |
| color: var(--text-primary); | |
| } | |
| .header-btn .material-symbols-outlined { | |
| font-size: 1.25rem; | |
| } | |
| /* ===== Mobile Toolbar ===== */ | |
| .mobile-toolbar { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-around; | |
| height: var(--mobile-toolbar-height); | |
| background: var(--bg-sidebar); | |
| border-bottom: 1px solid var(--border-light); | |
| padding: 0 0.5rem; | |
| flex-shrink: 0; | |
| } | |
| @media (min-width: 992px) { | |
| .mobile-toolbar { | |
| display: none; | |
| } | |
| } | |
| .mobile-tool-btn { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| width: 44px; | |
| height: 44px; | |
| background: var(--pastel-green-light); | |
| border: none; | |
| border-radius: 12px; | |
| cursor: pointer; | |
| color: var(--primary); | |
| transition: var(--transition-fast); | |
| } | |
| .mobile-tool-btn:hover, | |
| .mobile-tool-btn:active { | |
| background: var(--pastel-green); | |
| } | |
| .mobile-tool-btn .material-symbols-outlined { | |
| font-size: 1.5rem; | |
| } | |
| /* ===== Studio Layout ===== */ | |
| .studio-layout { | |
| display: flex; | |
| height: calc(100vh - var(--header-height) - var(--mobile-toolbar-height)); | |
| height: calc(100dvh - var(--header-height) - var(--mobile-toolbar-height)); | |
| overflow: hidden; | |
| position: relative; | |
| } | |
| @media (min-width: 992px) { | |
| .studio-layout { | |
| height: calc(100vh - var(--header-height)); | |
| height: calc(100dvh - var(--header-height)); | |
| } | |
| } | |
| /* ===== Sidebars ===== */ | |
| .sidebar { | |
| width: var(--sidebar-width); | |
| background: var(--bg-sidebar); | |
| overflow-y: auto; | |
| flex-shrink: 0; | |
| position: fixed; | |
| top: var(--header-height); | |
| height: calc(100vh - var(--header-height)); | |
| height: calc(100dvh - var(--header-height)); | |
| z-index: 200; | |
| transition: var(--transition-normal); | |
| } | |
| .sidebar-left { | |
| left: 0; | |
| border-right: 1px solid var(--border-light); | |
| transform: translateX(-100%); | |
| } | |
| .sidebar-left.open { | |
| transform: translateX(0); | |
| } | |
| .sidebar-right { | |
| right: 0; | |
| border-left: 1px solid var(--border-light); | |
| transform: translateX(100%); | |
| } | |
| .sidebar-right.open { | |
| transform: translateX(0); | |
| } | |
| @media (min-width: 992px) { | |
| .sidebar { | |
| position: relative; | |
| top: auto; | |
| height: auto; | |
| transform: none ; | |
| } | |
| } | |
| .sidebar-header { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| padding: 1rem 1.25rem; | |
| border-bottom: 1px solid var(--border-light); | |
| } | |
| @media (min-width: 992px) { | |
| .sidebar-header { | |
| display: none; | |
| } | |
| } | |
| .sidebar-header h3 { | |
| font-size: 1rem; | |
| font-weight: 600; | |
| } | |
| .close-sidebar { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| width: 36px; | |
| height: 36px; | |
| background: transparent; | |
| border: none; | |
| border-radius: 8px; | |
| cursor: pointer; | |
| color: var(--text-muted); | |
| } | |
| .close-sidebar:hover { | |
| background: var(--pastel-green-light); | |
| } | |
| .sidebar-overlay { | |
| display: none; | |
| position: fixed; | |
| inset: 0; | |
| background: rgba(0, 0, 0, 0.3); | |
| z-index: 150; | |
| } | |
| .sidebar-overlay.visible { | |
| display: block; | |
| } | |
| @media (min-width: 992px) { | |
| .sidebar-overlay { | |
| display: none ; | |
| } | |
| } | |
| .sidebar-section { | |
| padding: 1.25rem; | |
| border-bottom: 1px solid var(--border-light); | |
| } | |
| .sidebar-section:last-child { | |
| border-bottom: none; | |
| } | |
| .sidebar-title { | |
| font-size: 0.7rem; | |
| font-weight: 700; | |
| text-transform: uppercase; | |
| letter-spacing: 0.08em; | |
| color: var(--text-muted); | |
| margin-bottom: 1rem; | |
| } | |
| /* ===== Element Grid ===== */ | |
| .element-grid { | |
| display: grid; | |
| grid-template-columns: repeat(2, 1fr); | |
| gap: 0.5rem; | |
| } | |
| .element-btn { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| gap: 0.5rem; | |
| padding: 1rem 0.5rem; | |
| background: var(--pastel-green-light); | |
| border: 1px solid transparent; | |
| border-radius: 12px; | |
| cursor: pointer; | |
| transition: var(--transition-fast); | |
| font-family: inherit; | |
| } | |
| .element-btn:hover, | |
| .element-btn:active { | |
| background: var(--pastel-green); | |
| border-color: var(--primary); | |
| } | |
| .element-btn .material-symbols-outlined { | |
| font-size: 1.5rem; | |
| color: var(--primary); | |
| } | |
| .element-btn span:last-child { | |
| font-size: 0.75rem; | |
| font-weight: 500; | |
| color: var(--text-secondary); | |
| } | |
| /* ===== Layers List ===== */ | |
| .layers-list { | |
| max-height: 200px; | |
| overflow-y: auto; | |
| } | |
| .empty-layers, | |
| .empty-properties { | |
| font-size: 0.85rem; | |
| color: var(--text-muted); | |
| text-align: center; | |
| padding: 1rem; | |
| } | |
| .layer-item { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.75rem; | |
| padding: 0.75rem; | |
| background: var(--pastel-green-light); | |
| border-radius: 8px; | |
| margin-bottom: 0.5rem; | |
| cursor: pointer; | |
| transition: var(--transition-fast); | |
| font-size: 0.85rem; | |
| } | |
| .layer-item:hover { | |
| background: var(--pastel-green); | |
| } | |
| .layer-item.active { | |
| background: var(--primary); | |
| color: white; | |
| } | |
| /* ===== Properties Panel ===== */ | |
| .property-group { | |
| margin-bottom: 1rem; | |
| } | |
| .property-group label { | |
| display: block; | |
| font-size: 0.75rem; | |
| font-weight: 600; | |
| color: var(--text-secondary); | |
| margin-bottom: 0.5rem; | |
| } | |
| .property-row { | |
| display: flex; | |
| gap: 0.75rem; | |
| } | |
| .property-group.half { | |
| flex: 1; | |
| } | |
| .property-select { | |
| width: 100%; | |
| padding: 0.625rem 0.75rem; | |
| font-size: 0.875rem; | |
| font-family: inherit; | |
| border: 1px solid var(--border-light); | |
| border-radius: 8px; | |
| background: var(--pastel-green-light); | |
| color: var(--text-primary); | |
| cursor: pointer; | |
| } | |
| .property-select:focus { | |
| outline: none; | |
| border-color: var(--primary); | |
| } | |
| .input-with-unit { | |
| display: flex; | |
| align-items: center; | |
| background: var(--pastel-green-light); | |
| border: 1px solid var(--border-light); | |
| border-radius: 8px; | |
| overflow: hidden; | |
| } | |
| .input-with-unit input { | |
| width: 100%; | |
| padding: 0.625rem 0.75rem; | |
| font-size: 0.875rem; | |
| font-family: inherit; | |
| border: none; | |
| background: transparent; | |
| color: var(--text-primary); | |
| } | |
| .input-with-unit input:focus { | |
| outline: none; | |
| } | |
| .input-with-unit span { | |
| padding-right: 0.75rem; | |
| font-size: 0.75rem; | |
| color: var(--text-muted); | |
| } | |
| .color-picker-row { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.75rem; | |
| } | |
| .color-picker-row input[type="color"] { | |
| width: 40px; | |
| height: 40px; | |
| padding: 0; | |
| border: none; | |
| border-radius: 8px; | |
| cursor: pointer; | |
| background: none; | |
| } | |
| .color-picker-row input[type="color"]::-webkit-color-swatch-wrapper { | |
| padding: 0; | |
| } | |
| .color-picker-row input[type="color"]::-webkit-color-swatch { | |
| border: 2px solid var(--border-light); | |
| border-radius: 8px; | |
| } | |
| .color-hex-input { | |
| flex: 1; | |
| padding: 0.625rem 0.75rem; | |
| font-size: 0.875rem; | |
| font-family: inherit; | |
| border: 1px solid var(--border-light); | |
| border-radius: 8px; | |
| background: var(--pastel-green-light); | |
| color: var(--text-primary); | |
| text-transform: uppercase; | |
| } | |
| .slider-row { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.75rem; | |
| } | |
| .slider-row input[type="range"] { | |
| flex: 1; | |
| -webkit-appearance: none; | |
| height: 6px; | |
| background: var(--pastel-green); | |
| border-radius: 3px; | |
| outline: none; | |
| } | |
| .slider-row input[type="range"]::-webkit-slider-thumb { | |
| -webkit-appearance: none; | |
| width: 16px; | |
| height: 16px; | |
| background: var(--primary); | |
| border-radius: 50%; | |
| cursor: pointer; | |
| } | |
| .slider-row span { | |
| font-size: 0.75rem; | |
| font-weight: 500; | |
| color: var(--text-muted); | |
| min-width: 40px; | |
| text-align: right; | |
| } | |
| .button-group { | |
| display: flex; | |
| gap: 0.25rem; | |
| } | |
| .icon-btn { | |
| width: 40px; | |
| height: 40px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| background: var(--pastel-green-light); | |
| border: 1px solid transparent; | |
| border-radius: 8px; | |
| cursor: pointer; | |
| transition: var(--transition-fast); | |
| } | |
| .icon-btn:hover { | |
| background: var(--pastel-green); | |
| } | |
| .icon-btn.active { | |
| background: var(--primary); | |
| color: white; | |
| } | |
| .property-divider { | |
| height: 1px; | |
| background: var(--border-light); | |
| margin: 1rem 0; | |
| } | |
| .upload-btn { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 0.5rem; | |
| width: 100%; | |
| padding: 0.75rem 1rem; | |
| background: var(--pastel-green-light); | |
| border: 2px dashed var(--pastel-green); | |
| border-radius: 12px; | |
| cursor: pointer; | |
| font-size: 0.85rem; | |
| font-weight: 500; | |
| color: var(--text-secondary); | |
| } | |
| .upload-btn:hover { | |
| background: var(--pastel-green); | |
| border-color: var(--primary); | |
| color: var(--primary); | |
| } | |
| .delete-btn { | |
| width: 100%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 0.5rem; | |
| padding: 0.75rem 1rem; | |
| background: #FED7D7; | |
| color: #C53030; | |
| border: none; | |
| border-radius: 8px; | |
| font-size: 0.875rem; | |
| font-weight: 600; | |
| font-family: inherit; | |
| cursor: pointer; | |
| } | |
| .delete-btn:hover { | |
| background: #FEB2B2; | |
| } | |
| /* ===== Canvas Area ===== */ | |
| .canvas-area { | |
| flex: 1; | |
| overflow: auto; | |
| background: | |
| linear-gradient(90deg, var(--border-light) 1px, transparent 1px), | |
| linear-gradient(var(--border-light) 1px, transparent 1px); | |
| background-size: 20px 20px; | |
| display: flex; | |
| align-items: flex-start; | |
| justify-content: center; | |
| padding: 1rem; | |
| min-width: 0; | |
| } | |
| @media (min-width: 768px) { | |
| .canvas-area { | |
| padding: 2rem; | |
| } | |
| } | |
| .canvas-wrapper { | |
| position: relative; | |
| transform-origin: center top; | |
| transition: transform 0.2s ease; | |
| } | |
| .blog-canvas { | |
| width: 100%; | |
| max-width: 900px; | |
| min-width: 320px; | |
| min-height: 600px; | |
| background: var(--bg-canvas); | |
| box-shadow: var(--shadow-lg); | |
| border-radius: 8px; | |
| position: relative; | |
| overflow: visible; | |
| touch-action: none; | |
| } | |
| @media (min-width: 768px) { | |
| .blog-canvas { | |
| width: 900px; | |
| min-height: 1200px; | |
| } | |
| } | |
| .canvas-placeholder { | |
| position: absolute; | |
| inset: 0; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| color: var(--text-muted); | |
| pointer-events: none; | |
| padding: 2rem; | |
| text-align: center; | |
| } | |
| .canvas-placeholder .material-symbols-outlined { | |
| font-size: 3rem; | |
| margin-bottom: 1rem; | |
| color: var(--pastel-green); | |
| } | |
| @media (min-width: 768px) { | |
| .canvas-placeholder .material-symbols-outlined { | |
| font-size: 4rem; | |
| } | |
| } | |
| .canvas-placeholder p { | |
| font-size: 0.9rem; | |
| line-height: 1.6; | |
| } | |
| @media (min-width: 768px) { | |
| .canvas-placeholder p { | |
| font-size: 1rem; | |
| } | |
| } | |
| .canvas-placeholder.hidden { | |
| display: none; | |
| } | |
| /* ===== Draggable Elements ===== */ | |
| .draggable-element { | |
| position: absolute; | |
| cursor: move; | |
| user-select: none; | |
| min-width: 50px; | |
| min-height: 30px; | |
| touch-action: none; | |
| } | |
| .draggable-element:hover { | |
| outline: 2px solid var(--accent); | |
| outline-offset: 2px; | |
| } | |
| .draggable-element.selected { | |
| outline: 2px solid var(--primary); | |
| outline-offset: 2px; | |
| } | |
| .draggable-element.dragging { | |
| opacity: 0.8; | |
| cursor: grabbing; | |
| z-index: 1000; | |
| } | |
| /* Resize Handles */ | |
| .resize-handle { | |
| position: absolute; | |
| width: 16px; | |
| height: 16px; | |
| background: var(--primary); | |
| border: 2px solid white; | |
| border-radius: 4px; | |
| z-index: 10; | |
| opacity: 0; | |
| pointer-events: none; | |
| transition: var(--transition-fast); | |
| } | |
| .draggable-element.selected .resize-handle { | |
| opacity: 1; | |
| pointer-events: auto; | |
| } | |
| .resize-handle.nw { | |
| top: -8px; | |
| left: -8px; | |
| cursor: nwse-resize; | |
| } | |
| .resize-handle.ne { | |
| top: -8px; | |
| right: -8px; | |
| cursor: nesw-resize; | |
| } | |
| .resize-handle.sw { | |
| bottom: -8px; | |
| left: -8px; | |
| cursor: nesw-resize; | |
| } | |
| .resize-handle.se { | |
| bottom: -8px; | |
| right: -8px; | |
| cursor: nwse-resize; | |
| } | |
| .resize-handle.n { | |
| top: -8px; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| cursor: ns-resize; | |
| } | |
| .resize-handle.s { | |
| bottom: -8px; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| cursor: ns-resize; | |
| } | |
| .resize-handle.e { | |
| right: -8px; | |
| top: 50%; | |
| transform: translateY(-50%); | |
| cursor: ew-resize; | |
| } | |
| .resize-handle.w { | |
| left: -8px; | |
| top: 50%; | |
| transform: translateY(-50%); | |
| cursor: ew-resize; | |
| } | |
| /* Element Content Styles */ | |
| .draggable-element .element-content { | |
| width: 100%; | |
| height: 100%; | |
| padding: 0.5rem; | |
| } | |
| .draggable-element h1, | |
| .draggable-element h2, | |
| .draggable-element h3, | |
| .draggable-element p { | |
| margin: 0; | |
| outline: none; | |
| cursor: text; | |
| } | |
| .draggable-element h1 { | |
| font-size: 2rem; | |
| font-weight: 700; | |
| font-family: 'Playfair Display', serif; | |
| } | |
| @media (min-width: 768px) { | |
| .draggable-element h1 { | |
| font-size: 2.5rem; | |
| } | |
| } | |
| .draggable-element h2 { | |
| font-size: 1.5rem; | |
| font-weight: 600; | |
| } | |
| @media (min-width: 768px) { | |
| .draggable-element h2 { | |
| font-size: 2rem; | |
| } | |
| } | |
| .draggable-element h3 { | |
| font-size: 1.25rem; | |
| font-weight: 600; | |
| } | |
| @media (min-width: 768px) { | |
| .draggable-element h3 { | |
| font-size: 1.5rem; | |
| } | |
| } | |
| .draggable-element p { | |
| font-size: 1rem; | |
| line-height: 1.7; | |
| } | |
| .draggable-element blockquote { | |
| margin: 0; | |
| padding: 1rem 1.5rem; | |
| border-left: 4px solid var(--primary); | |
| background: var(--pastel-green-light); | |
| font-style: italic; | |
| font-size: 1.1rem; | |
| } | |
| .draggable-element img { | |
| width: 100%; | |
| height: 100%; | |
| object-fit: cover; | |
| display: block; | |
| pointer-events: none; | |
| } | |
| .draggable-element .element-divider { | |
| width: 100%; | |
| height: 2px; | |
| background: linear-gradient(90deg, transparent, var(--primary), transparent); | |
| margin: 1rem 0; | |
| } | |
| .draggable-element .element-button { | |
| display: inline-block; | |
| padding: 0.75rem 1.5rem; | |
| background: var(--primary); | |
| color: white; | |
| font-weight: 600; | |
| border-radius: 8px; | |
| cursor: pointer; | |
| outline: none; | |
| } | |
| /* Image element specific */ | |
| .draggable-element[data-type="image"] { | |
| cursor: move; | |
| overflow: hidden; | |
| } | |
| .draggable-element[data-type="image"] .element-content { | |
| padding: 0; | |
| width: 100%; | |
| height: 100%; | |
| } | |
| /* ===== Modal ===== */ | |
| .modal { | |
| position: fixed; | |
| inset: 0; | |
| z-index: 9999; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| padding: 1rem; | |
| } | |
| .modal.hidden { | |
| display: none; | |
| } | |
| .modal-backdrop { | |
| position: absolute; | |
| inset: 0; | |
| background: rgba(0, 0, 0, 0.5); | |
| backdrop-filter: blur(4px); | |
| } | |
| .modal-content { | |
| position: relative; | |
| background: white; | |
| border-radius: 20px; | |
| width: 100%; | |
| max-width: 500px; | |
| max-height: 90vh; | |
| overflow-y: auto; | |
| box-shadow: var(--shadow-lg); | |
| } | |
| .modal-header { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| padding: 1.25rem 1.5rem; | |
| border-bottom: 1px solid var(--border-light); | |
| } | |
| .modal-header h2 { | |
| font-size: 1.25rem; | |
| font-weight: 700; | |
| } | |
| .modal-close { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| width: 36px; | |
| height: 36px; | |
| background: transparent; | |
| border: none; | |
| border-radius: 8px; | |
| cursor: pointer; | |
| color: var(--text-muted); | |
| } | |
| .modal-close:hover { | |
| background: var(--pastel-green-light); | |
| } | |
| .modal-body { | |
| padding: 1.5rem; | |
| } | |
| .form-group { | |
| margin-bottom: 1.5rem; | |
| } | |
| .form-group label { | |
| display: block; | |
| font-size: 0.875rem; | |
| font-weight: 600; | |
| color: var(--text-secondary); | |
| margin-bottom: 0.5rem; | |
| } | |
| .form-group input[type="text"] { | |
| width: 100%; | |
| padding: 0.75rem 1rem; | |
| font-size: 1rem; | |
| font-family: inherit; | |
| border: 1px solid var(--border-light); | |
| border-radius: 10px; | |
| background: var(--pastel-green-light); | |
| color: var(--text-primary); | |
| } | |
| .form-group input[type="text"]:focus { | |
| outline: none; | |
| border-color: var(--primary); | |
| } | |
| .cover-upload-area { | |
| width: 100%; | |
| min-height: 200px; | |
| border: 2px dashed var(--pastel-green); | |
| border-radius: 12px; | |
| overflow: hidden; | |
| cursor: pointer; | |
| transition: var(--transition-fast); | |
| } | |
| .cover-upload-area:hover { | |
| border-color: var(--primary); | |
| background: var(--pastel-green-light); | |
| } | |
| .upload-placeholder { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| height: 200px; | |
| color: var(--text-muted); | |
| } | |
| .upload-placeholder .material-symbols-outlined { | |
| font-size: 3rem; | |
| color: var(--primary); | |
| margin-bottom: 0.5rem; | |
| } | |
| .upload-placeholder p { | |
| font-weight: 500; | |
| } | |
| .upload-hint { | |
| font-size: 0.75rem; | |
| margin-top: 0.25rem; | |
| } | |
| .upload-preview { | |
| position: relative; | |
| width: 100%; | |
| } | |
| .upload-preview img { | |
| width: 100%; | |
| height: 200px; | |
| object-fit: cover; | |
| } | |
| .remove-cover { | |
| position: absolute; | |
| top: 0.5rem; | |
| right: 0.5rem; | |
| width: 32px; | |
| height: 32px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| background: rgba(0, 0, 0, 0.5); | |
| color: white; | |
| border: none; | |
| border-radius: 50%; | |
| cursor: pointer; | |
| } | |
| .remove-cover:hover { | |
| background: rgba(0, 0, 0, 0.7); | |
| } | |
| .modal-footer { | |
| display: flex; | |
| gap: 1rem; | |
| padding: 1rem 1.5rem; | |
| border-top: 1px solid var(--border-light); | |
| } | |
| .modal-btn { | |
| flex: 1; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 0.5rem; | |
| padding: 0.875rem 1.5rem; | |
| font-size: 1rem; | |
| font-weight: 600; | |
| font-family: inherit; | |
| border-radius: 10px; | |
| cursor: pointer; | |
| transition: var(--transition-fast); | |
| } | |
| .modal-btn.primary { | |
| background: var(--primary); | |
| color: white; | |
| border: none; | |
| } | |
| .modal-btn.primary:hover { | |
| background: var(--primary-light); | |
| } | |
| .modal-btn.secondary { | |
| background: transparent; | |
| color: var(--text-secondary); | |
| border: 1px solid var(--border-light); | |
| } | |
| .modal-btn.secondary:hover { | |
| background: var(--pastel-green-light); | |
| } | |
| /* Hidden class */ | |
| .hidden { | |
| display: none ; | |
| } | |
| /* ===== Scrollbar ===== */ | |
| ::-webkit-scrollbar { | |
| width: 8px; | |
| height: 8px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: var(--pastel-green-light); | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: var(--pastel-green); | |
| border-radius: 4px; | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: var(--primary-light); | |
| } |