/** * Frontend CSS for CMS ADMINS Feedback Capture. * Styles for the feedback tool interface, ensuring theme compatibility. * @version 2.0.0 - Ember Glass CI */ /* ===== EMBER GLASS CSS VARIABLES ===== */ :root { /* Ember Accent */ --ember-accent: #ff6800; --ember-accent-hover: #ff8533; --ember-accent-dark: #cc5300; --ember-accent-glow: rgba(255, 104, 0, 0.3); --ember-accent-subtle: rgba(255, 104, 0, 0.15); /* Glass - Darker for better contrast */ --glass-bg: rgba(15, 23, 42, 0.95); --glass-bg-solid: #0f172a; --glass-bg-lighter: rgba(30, 41, 59, 0.95); --glass-blur: blur(12px); --glass-border: rgba(255, 255, 255, 0.12); --glass-border-accent: rgba(255, 104, 0, 0.3); /* Slate Palette */ --slate-50: #f8fafc; --slate-100: #f1f5f9; --slate-200: #e2e8f0; --slate-300: #cbd5e1; --slate-400: #94a3b8; --slate-500: #64748b; --slate-600: #475569; --slate-700: #334155; --slate-800: #1e293b; --slate-900: #0f172a; /* Marker Colors */ --marker-negative: #ef4444; --marker-positive: #22c55e; --marker-note: #ff6800; /* Text */ --text-primary: #f8fafc; --text-secondary: #cbd5e1; --text-muted: #94a3b8; /* Shadows */ --shadow-glow: 0 4px 20px rgba(255, 104, 0, 0.4); --shadow-glass: 0 8px 32px rgba(0, 0, 0, 0.3); } /* Base styles to override theme styles */ .cms-admins-feedback-overlay, .cms-admins-feedback-protection-layer, .cms-admins-feedback-toolbar, .cms-admins-feedback-marker, .cms-admins-feedback-notification { box-sizing: border-box !important; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif !important; line-height: 1.4 !important; color: var(--text-primary) !important; text-align: left !important; direction: ltr !important; } /* Disable body scroll when in feedback mode */ body.cms-admins-feedback-no-scroll { overflow: hidden !important; } /* Protection Layer - invisible layer that blocks website interactions */ .cms-admins-feedback-protection-layer { position: fixed !important; top: 0 !important; left: 0 !important; width: 100vw !important; height: 100vh !important; background: transparent !important; z-index: 2147483644 !important; /* Below toolbar/markers but above website content */ pointer-events: auto !important; cursor: crosshair !important; user-select: none !important; -webkit-user-select: none !important; -moz-user-select: none !important; -ms-user-select: none !important; } /* Tool-specific cursors for the protection layer */ body.tool-negative .cms-admins-feedback-protection-layer { cursor: url('data:image/svg+xml;utf8,') 16 16, crosshair !important; } body.tool-positive .cms-admins-feedback-protection-layer { cursor: url('data:image/svg+xml;utf8,') 16 16, crosshair !important; } body.tool-note .cms-admins-feedback-protection-layer { cursor: url('data:image/svg+xml;utf8,!') 16 16, crosshair !important; } /* Overlay - highest z-index to ensure it's always on top */ .cms-admins-feedback-overlay { position: fixed !important; top: 0 !important; left: 0 !important; width: 100vw !important; height: 100vh !important; background: rgba(255, 104, 0, 0.05) !important; z-index: 2147483647 !important; /* Maximum z-index */ pointer-events: auto !important; cursor: crosshair !important; backdrop-filter: blur(1px) !important; -webkit-backdrop-filter: blur(1px) !important; display: none !important; /* Hidden by default, shown via JS */ } .cms-admins-feedback-overlay.active { display: block !important; } .cms-admins-feedback-overlay-content { position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; text-align: center !important; background: var(--glass-bg) !important; backdrop-filter: var(--glass-blur) !important; -webkit-backdrop-filter: var(--glass-blur) !important; padding: 30px !important; border-radius: 16px !important; box-shadow: var(--shadow-glass), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important; border: 1px solid var(--glass-border) !important; max-width: 400px !important; pointer-events: none !important; } .cms-admins-feedback-overlay-logo img { width: 80px !important; height: auto !important; margin-bottom: 15px !important; display: block !important; margin-left: auto !important; margin-right: auto !important; } .cms-admins-feedback-overlay-text { font-size: 18px !important; font-weight: 600 !important; color: var(--ember-accent) !important; margin: 0 !important; text-shadow: none !important; } /* Tool-specific cursors for the main overlay (if different from protection layer) */ .cms-admins-feedback-overlay.tool-negative { cursor: url('data:image/svg+xml;utf8,') 16 16, crosshair !important; } .cms-admins-feedback-overlay.tool-positive { cursor: url('data:image/svg+xml;utf8,') 16 16, crosshair !important; } .cms-admins-feedback-overlay.tool-note { cursor: url('data:image/svg+xml;utf8,!') 16 16, crosshair !important; } /* Floating Toolbar */ .cms-admins-feedback-toolbar { position: fixed !important; width: 320px !important; background: var(--glass-bg) !important; border: 1px solid var(--glass-border) !important; border-radius: 16px !important; box-shadow: var(--shadow-glass), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important; z-index: 2147483646 !important; /* Just below overlay */ font-size: 14px !important; overflow: hidden !important; backdrop-filter: var(--glass-blur) !important; -webkit-backdrop-filter: var(--glass-blur) !important; } /* Initial position - can be overridden by JavaScript */ .cms-admins-feedback-toolbar:not([style*="top"]):not([style*="left"]) { top: 20px !important; right: 20px !important; } .cms-admins-feedback-toolbar.cms-admins-feedback-dragging { cursor: move !important; box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4), 0 0 30px var(--ember-accent-glow) !important; transform: scale(1.02) !important; } /* Toolbar Header */ .cms-admins-feedback-toolbar-header { background: linear-gradient(135deg, var(--ember-accent) 0%, var(--ember-accent-dark) 100%) !important; color: #ffffff !important; padding: 12px 16px !important; display: flex !important; align-items: center !important; cursor: w-resize !important; user-select: none !important; -webkit-user-select: none !important; -moz-user-select: none !important; -ms-user-select: none !important; border-radius: 15px 15px 0 0 !important; } /* Toolbar Logo - IMG (legacy) */ .cms-admins-feedback-toolbar-logo { width: 24px !important; height: 24px !important; margin-right: 10px !important; border-radius: 4px !important; } /* Toolbar Logo - SVG */ .cms-admins-feedback-toolbar-logo-svg { width: 26px !important; height: 26px !important; margin-right: 10px !important; color: #ffffff !important; flex-shrink: 0 !important; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3)) !important; animation: toolbar-logo-glow 3s ease-in-out infinite !important; } @keyframes toolbar-logo-glow { 0%, 100% { filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3)) !important; } 50% { filter: drop-shadow(0 2px 8px rgba(255, 104, 0, 0.4)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3)) !important; } } .cms-admins-feedback-toolbar-title { flex: 1 !important; font-weight: 600 !important; font-size: 16px !important; color: #ffffff !important; } /* Tool indicator - shows active tool in header (visible when minimized) */ .cms-admins-feedback-toolbar-tool-indicator { display: none !important; width: 20px !important; height: 20px !important; border-radius: 50% !important; margin-right: 8px !important; border: 2px solid rgba(255, 255, 255, 0.9) !important; flex-shrink: 0 !important; } .cms-admins-feedback-toolbar.minimized .cms-admins-feedback-toolbar-tool-indicator { display: block !important; } /* Make header elements clickable when minimized */ .cms-admins-feedback-toolbar.minimized .cms-admins-feedback-toolbar-title, .cms-admins-feedback-toolbar.minimized .cms-admins-feedback-toolbar-logo, .cms-admins-feedback-toolbar.minimized .cms-admins-feedback-toolbar-logo-svg, .cms-admins-feedback-toolbar.minimized .cms-admins-feedback-toolbar-tool-indicator { cursor: pointer !important; } .cms-admins-feedback-toolbar-tool-indicator.tool-negative { background-color: var(--marker-negative) !important; } .cms-admins-feedback-toolbar-tool-indicator.tool-positive { background-color: var(--marker-positive) !important; } .cms-admins-feedback-toolbar-tool-indicator.tool-note { background-color: var(--marker-note) !important; } .cms-admins-feedback-toolbar-close { background: none !important; border: none !important; color: #ffffff !important; cursor: pointer !important; padding: 4px !important; border-radius: 4px !important; transition: background-color 0.2s ease !important; display: flex !important; align-items: center !important; justify-content: center !important; } /* Toolbar Close Button Hover State */ .cms-admins-feedback-toolbar-close:hover { background: rgba(255, 255, 255, 0.2) !important; } /* Toolbar Tools */ .cms-admins-feedback-toolbar-tools { padding: 15px !important; border-bottom: 1px solid var(--glass-border) !important; } .cms-admins-feedback-tool { display: flex !important; align-items: center !important; width: 100% !important; padding: 12px 15px !important; margin-bottom: 8px !important; background: rgba(255, 255, 255, 0.05) !important; border: 1px solid var(--glass-border) !important; border-radius: 8px !important; cursor: pointer !important; transition: all 0.2s ease !important; font-size: 14px !important; font-weight: 500 !important; color: var(--slate-200) !important; text-align: left !important; } .cms-admins-feedback-tool:last-child { margin-bottom: 0 !important; } .cms-admins-feedback-tool:hover { background: rgba(255, 255, 255, 0.1) !important; border-color: var(--glass-border-accent) !important; transform: translateY(-1px) !important; box-shadow: 0 4px 12px rgba(255, 104, 0, 0.15) !important; } /* Active Tool State */ .cms-admins-feedback-tool.active { background: var(--ember-accent-subtle) !important; border-color: var(--ember-accent) !important; color: var(--ember-accent) !important; box-shadow: 0 4px 12px var(--ember-accent-glow) !important; } .cms-admins-feedback-tool svg { margin-right: 10px !important; flex-shrink: 0 !important; } .cms-admins-feedback-tool[data-tool="negative"] { border-left: 3px solid var(--marker-negative) !important; } .cms-admins-feedback-tool[data-tool="positive"] { border-left: 3px solid var(--marker-positive) !important; } .cms-admins-feedback-tool[data-tool="note"] { border-left: 3px solid var(--marker-note) !important; } /* Toolbar Actions */ .cms-admins-feedback-toolbar-actions { padding: 15px !important; display: flex !important; gap: 10px !important; border-bottom: 1px solid var(--glass-border) !important; } .cms-admins-feedback-action { flex: 1 !important; padding: 10px 12px !important; background: linear-gradient(135deg, var(--ember-accent) 0%, var(--ember-accent-hover) 100%) !important; color: #ffffff !important; border: none !important; border-radius: 8px !important; cursor: pointer !important; font-size: 13px !important; font-weight: 600 !important; transition: all 0.2s ease !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; box-shadow: 0 4px 14px var(--ember-accent-glow) !important; } .cms-admins-feedback-action:hover:not(:disabled) { background: linear-gradient(135deg, var(--ember-accent-hover) 0%, var(--ember-accent) 100%) !important; transform: translateY(-1px) !important; box-shadow: 0 6px 20px rgba(255, 104, 0, 0.5) !important; } .cms-admins-feedback-action:disabled { background: var(--slate-600) !important; cursor: not-allowed !important; opacity: 0.6 !important; box-shadow: none !important; } /* Specific Action Button Styles */ .cms-admins-feedback-action-screenshot { background: linear-gradient(135deg, var(--marker-positive) 0%, #1db954 100%) !important; box-shadow: 0 4px 14px rgba(34, 197, 94, 0.4) !important; } .cms-admins-feedback-action-screenshot:hover:not(:disabled) { background: linear-gradient(135deg, #1db954 0%, var(--marker-positive) 100%) !important; box-shadow: 0 6px 20px rgba(34, 197, 94, 0.5) !important; } .cms-admins-feedback-action-send { background: linear-gradient(135deg, var(--ember-accent) 0%, var(--ember-accent-dark) 100%) !important; } .cms-admins-feedback-action-send:hover:not(:disabled) { background: linear-gradient(135deg, var(--ember-accent-hover) 0%, var(--ember-accent) 100%) !important; box-shadow: 0 6px 20px var(--ember-accent-glow) !important; } /* Toolbar Counter */ .cms-admins-feedback-toolbar-counter { padding: 12px 15px !important; text-align: center !important; font-size: 13px !important; color: var(--text-muted) !important; background: rgba(255, 255, 255, 0.03) !important; } .cms-admins-feedback-counter { font-weight: 700 !important; color: var(--ember-accent) !important; font-size: 16px !important; display: inline-block !important; transition: transform 0.3s ease !important; } /* Counter animation on change */ .cms-admins-feedback-counter.counter-changed { animation: counter-bounce 0.3s ease !important; } @keyframes counter-bounce { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.3); } } /* Toolbar Minimize Button */ .cms-admins-feedback-toolbar-minimize { background: none !important; border: none !important; color: #ffffff !important; cursor: pointer !important; padding: 4px !important; border-radius: 4px !important; transition: background-color 0.2s ease !important; display: flex !important; align-items: center !important; justify-content: center !important; margin-right: 8px !important; } .cms-admins-feedback-toolbar-minimize:hover { background: rgba(255, 255, 255, 0.2) !important; } /* Toolbar Body (for minimize animation) */ .cms-admins-feedback-toolbar-body { overflow: hidden !important; } .cms-admins-feedback-toolbar.minimized { width: auto !important; min-width: 200px !important; } /* Mobile: Minimized toolbar stays compact and out of the way */ @media (max-width: 768px) { .cms-admins-feedback-toolbar.minimized { min-width: 160px !important; width: auto !important; } } /* Tool Hint */ .cms-admins-feedback-toolbar-hint { background: var(--ember-accent-subtle) !important; border: 1px solid var(--glass-border-accent) !important; color: var(--ember-accent) !important; padding: 10px 15px !important; margin: 0 15px 10px 15px !important; border-radius: 6px !important; font-size: 13px !important; display: flex !important; align-items: center !important; gap: 8px !important; animation: hint-pulse 2s ease-in-out infinite !important; } .cms-admins-feedback-toolbar-hint.hidden { display: none !important; } @keyframes hint-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } } /* Tool hint shake animation when user clicks without tool selected */ .cms-admins-feedback-toolbar-hint.shake { animation: hint-shake 0.5s ease !important; } @keyframes hint-shake { 0%, 100% { transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); } 20%, 40%, 60%, 80% { transform: translateX(5px); } } /* Keyboard shortcut badges */ .cms-admins-feedback-tool kbd { background: rgba(255, 255, 255, 0.1) !important; border: 1px solid var(--glass-border) !important; border-radius: 3px !important; padding: 2px 6px !important; font-size: 11px !important; font-family: monospace !important; margin-left: auto !important; color: var(--text-muted) !important; } .cms-admins-feedback-tool.active kbd { background: rgba(255, 104, 0, 0.2) !important; border-color: var(--glass-border-accent) !important; color: var(--ember-accent) !important; } /* Undo/Redo buttons */ .cms-admins-feedback-toolbar-history { display: flex !important; justify-content: center !important; gap: 8px !important; padding: 8px 15px !important; border-bottom: 1px solid var(--glass-border) !important; } .cms-admins-feedback-undo-btn, .cms-admins-feedback-redo-btn { background: rgba(255, 255, 255, 0.05) !important; border: 1px solid var(--glass-border) !important; border-radius: 6px !important; padding: 8px 12px !important; cursor: pointer !important; transition: all 0.2s ease !important; display: flex !important; align-items: center !important; justify-content: center !important; color: var(--slate-300) !important; } .cms-admins-feedback-undo-btn:hover:not(:disabled), .cms-admins-feedback-redo-btn:hover:not(:disabled) { background: rgba(255, 255, 255, 0.1) !important; border-color: var(--ember-accent) !important; color: var(--ember-accent) !important; } .cms-admins-feedback-undo-btn:disabled, .cms-admins-feedback-redo-btn:disabled { opacity: 0.4 !important; cursor: not-allowed !important; } /* Feedback Markers */ .cms-admins-feedback-marker { position: absolute !important; z-index: 2147483645 !important; pointer-events: auto !important; transition: all 0.2s ease !important; cursor: grab !important; animation: marker-pop-in 0.2s ease-out !important; } .cms-admins-feedback-marker:hover { transform: scale(1.1) !important; } .cms-admins-feedback-marker.dragging { cursor: grabbing !important; transform: scale(1.15) !important; z-index: 2147483647 !important; opacity: 0.9 !important; } /* Marker dragging body state */ body.cms-admins-feedback-marker-dragging { cursor: grabbing !important; user-select: none !important; } /* Marker pop-in animation */ @keyframes marker-pop-in { 0% { transform: scale(0); opacity: 0; } 50% { transform: scale(1.2); } 100% { transform: scale(1); opacity: 1; } } /* Marker removing animation */ .cms-admins-feedback-marker.removing { animation: marker-pop-out 0.2s ease-in forwards !important; } @keyframes marker-pop-out { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(0); opacity: 0; } } /* Negative Marker Style - Screenshot-optimized */ .cms-admins-feedback-marker-negative { color: var(--marker-negative) !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 32px !important; height: 32px !important; border-radius: 50% !important; background-color: var(--marker-negative) !important; border: 3px solid rgba(255, 255, 255, 0.9) !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), 0 0 0 2px rgba(0, 0, 0, 0.1) !important; } /* Positive Marker Style - Screenshot-optimized */ .cms-admins-feedback-marker-positive { color: var(--marker-positive) !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 32px !important; height: 32px !important; border-radius: 50% !important; background-color: var(--marker-positive) !important; border: 3px solid rgba(255, 255, 255, 0.9) !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), 0 0 0 2px rgba(0, 0, 0, 0.1) !important; } /* Number style for positive/negative markers - Screenshot-optimized */ .cms-admins-feedback-marker-negative .cms-admins-feedback-marker-number, .cms-admins-feedback-marker-positive .cms-admins-feedback-marker-number { font-size: 16px !important; font-weight: 700 !important; color: #ffffff !important; line-height: 1 !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important; letter-spacing: 0 !important; } /* Note Marker Style (Container for Icon and Editor) - Screenshot-optimized */ .cms-admins-feedback-marker-note { padding: 0 !important; border: none !important; background: transparent !important; width: 40px !important; height: 40px !important; display: flex !important; align-items: center !important; justify-content: center !important; } .cms-admins-feedback-note-icon { width: 32px !important; height: 32px !important; background-color: var(--marker-note) !important; border: 3px solid rgba(255, 255, 255, 0.9) !important; border-radius: 50% !important; color: #ffffff !important; display: flex !important; align-items: center !important; justify-content: center !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), 0 0 0 2px rgba(0, 0, 0, 0.1) !important; margin: 0 !important; cursor: pointer !important; transition: all 0.2s ease !important; } .cms-admins-feedback-marker-note:hover .cms-admins-feedback-note-icon { transform: scale(1.1) !important; background-color: var(--ember-accent-hover) !important; } /* Note Marker Number - Screenshot-optimized */ .cms-admins-feedback-note-number { font-size: 14px !important; font-weight: 700 !important; line-height: 1 !important; color: #ffffff !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important; letter-spacing: 0 !important; } .cms-admins-feedback-note-text { /* This class seems unused if editor is primary */ display: none !important; } /* Note Editor Popup */ .cms-admins-feedback-note-editor { position: absolute !important; bottom: calc(100% + 8px) !important; left: 50% !important; transform: translateX(-50%) !important; width: 200px !important; background: var(--glass-bg-solid) !important; backdrop-filter: var(--glass-blur) !important; -webkit-backdrop-filter: var(--glass-blur) !important; border: 1px solid var(--glass-border-accent) !important; border-radius: 10px !important; box-shadow: var(--shadow-glass) !important; padding: 10px !important; opacity: 0 !important; visibility: hidden !important; transition: opacity 0.15s ease, visibility 0.15s ease !important; z-index: 2147483646 !important; /* Same as toolbar to be above protection layer */ pointer-events: none !important; } .cms-admins-feedback-marker-note:hover .cms-admins-feedback-note-editor, .cms-admins-feedback-marker-note.editing .cms-admins-feedback-note-editor { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; } /* Position editor below marker if near top of viewport */ .cms-admins-feedback-marker-note.editor-below .cms-admins-feedback-note-editor { bottom: auto !important; top: calc(100% + 8px) !important; } /* Position editor to the right when near left edge */ .cms-admins-feedback-marker-note.editor-right .cms-admins-feedback-note-editor { left: 0 !important; transform: none !important; } /* Position editor to the left when near right edge */ .cms-admins-feedback-marker-note.editor-left .cms-admins-feedback-note-editor { left: auto !important; right: 0 !important; transform: none !important; } .cms-admins-feedback-note-textarea { width: 100% !important; height: 60px !important; min-height: 50px !important; max-height: 120px !important; padding: 8px 10px !important; border: 1px solid var(--glass-border) !important; border-radius: 6px !important; font-size: 13px !important; line-height: 1.4 !important; resize: vertical !important; background: rgba(255, 255, 255, 0.08) !important; color: var(--text-primary) !important; font-family: inherit !important; box-sizing: border-box !important; } .cms-admins-feedback-note-textarea:focus { outline: none !important; border-color: var(--ember-accent) !important; box-shadow: 0 0 0 3px var(--ember-accent-glow) !important; } .cms-admins-feedback-note-textarea::placeholder { color: var(--text-muted) !important; } /* Character counter for note textarea */ .cms-admins-feedback-note-counter { font-size: 11px !important; color: var(--text-muted) !important; text-align: right !important; margin-top: 4px !important; padding-right: 2px !important; } .cms-admins-feedback-note-counter.limit-reached { color: var(--marker-negative) !important; font-weight: 600 !important; } /* Has-note indicator for all marker types (positioned left to avoid remove button) */ .cms-admins-feedback-marker.has-note::after { content: '' !important; position: absolute !important; top: -4px !important; left: -4px !important; width: 10px !important; height: 10px !important; background: var(--ember-accent) !important; border-radius: 50% !important; border: 2px solid white !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important; z-index: 1 !important; } /* Note editor for negative/positive markers */ .cms-admins-feedback-marker-negative .cms-admins-feedback-note-editor, .cms-admins-feedback-marker-positive .cms-admins-feedback-note-editor { position: absolute !important; bottom: calc(100% + 8px) !important; left: 50% !important; transform: translateX(-50%) !important; width: 200px !important; background: var(--glass-bg-solid) !important; backdrop-filter: var(--glass-blur) !important; -webkit-backdrop-filter: var(--glass-blur) !important; border: 1px solid var(--glass-border-accent) !important; border-radius: 10px !important; box-shadow: var(--shadow-glass) !important; padding: 10px !important; opacity: 0 !important; visibility: hidden !important; transition: opacity 0.15s ease, visibility 0.15s ease !important; z-index: 2147483646 !important; /* Same as toolbar to be above protection layer */ pointer-events: none !important; } .cms-admins-feedback-marker-negative:hover .cms-admins-feedback-note-editor, .cms-admins-feedback-marker-negative.editing .cms-admins-feedback-note-editor, .cms-admins-feedback-marker-positive:hover .cms-admins-feedback-note-editor, .cms-admins-feedback-marker-positive.editing .cms-admins-feedback-note-editor { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; } /* Position editor below marker if near top of viewport */ .cms-admins-feedback-marker-negative.editor-below .cms-admins-feedback-note-editor, .cms-admins-feedback-marker-positive.editor-below .cms-admins-feedback-note-editor { bottom: auto !important; top: calc(100% + 8px) !important; } /* Position editor to the right when near left edge */ .cms-admins-feedback-marker-negative.editor-right .cms-admins-feedback-note-editor, .cms-admins-feedback-marker-positive.editor-right .cms-admins-feedback-note-editor { left: 0 !important; transform: none !important; } /* Position editor to the left when near right edge */ .cms-admins-feedback-marker-negative.editor-left .cms-admins-feedback-note-editor, .cms-admins-feedback-marker-positive.editor-left .cms-admins-feedback-note-editor { left: auto !important; right: 0 !important; transform: none !important; } .cms-admins-feedback-marker-remove { position: absolute !important; top: -8px !important; right: -8px !important; width: 20px !important; height: 20px !important; background: #dc3545 !important; color: #ffffff !important; border: 2px solid #ffffff !important; border-radius: 50% !important; cursor: pointer !important; font-size: 12px !important; font-weight: bold !important; display: flex !important; align-items: center !important; justify-content: center !important; transition: all 0.2s ease !important; line-height: 1 !important; } .cms-admins-feedback-marker-remove:hover { background: #c82333 !important; transform: scale(1.1) !important; } /* Notification Banners */ .cms-admins-feedback-notification { position: fixed !important; top: 20px !important; left: 50% !important; transform: translateX(-50%) !important; z-index: 2147483647 !important; /* Same as overlay */ max-width: 400px !important; width: auto !important; animation: cms-admins-feedback-slideIn 0.3s ease-out !important; } @keyframes cms-admins-feedback-slideIn { from { opacity: 0 !important; transform: translateX(-50%) translateY(-20px) !important; } to { opacity: 1 !important; transform: translateX(-50%) translateY(0) !important; } } /* Floating Feedback Button - Increased size from 50px to 60px */ .cms-admins-feedback-floating-button { position: fixed !important; bottom: 20px !important; left: 20px !important; width: 56px !important; height: 56px !important; background: linear-gradient(135deg, var(--ember-accent) 0%, var(--ember-accent-dark) 100%) !important; border-radius: 50% !important; box-shadow: var(--shadow-glow), 0 0 40px rgba(255, 104, 0, 0.2) !important; display: flex !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; z-index: 2147483640 !important; transition: all 0.3s ease !important; opacity: 1 !important; border: none !important; /* Ensure button is above mobile menus */ isolation: isolate !important; transform: translateZ(0) !important; } .cms-admins-feedback-floating-button:hover { transform: scale(1.05) !important; box-shadow: 0 6px 28px rgba(255, 104, 0, 0.5), 0 0 60px rgba(255, 104, 0, 0.3) !important; } .cms-admins-feedback-floating-button:focus-visible { outline: 3px solid var(--ember-accent) !important; outline-offset: 3px !important; } .cms-admins-feedback-floating-button.hidden { opacity: 0 !important; pointer-events: none !important; transform: scale(0.8) !important; } .cms-admins-feedback-floating-button.dismissing { animation: floating-button-dismiss 0.3s ease-out forwards !important; } @keyframes floating-button-dismiss { 0% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.1); } 100% { transform: scale(0); opacity: 0; } } .cms-admins-feedback-floating-button-icon { width: 24px !important; height: 24px !important; color: #ffffff !important; flex-shrink: 0 !important; } /* Floating button tooltip */ .cms-admins-feedback-floating-button-tooltip { position: absolute !important; left: calc(100% + 10px) !important; top: 50% !important; transform: translateY(-50%) !important; background: var(--glass-bg) !important; backdrop-filter: var(--glass-blur) !important; -webkit-backdrop-filter: var(--glass-blur) !important; color: var(--text-primary) !important; padding: 8px 14px !important; border-radius: 8px !important; font-size: 12px !important; white-space: nowrap !important; opacity: 0 !important; visibility: hidden !important; transition: opacity 0.2s ease, visibility 0.2s ease !important; pointer-events: none !important; border: 1px solid var(--glass-border) !important; box-shadow: var(--shadow-glass) !important; } .cms-admins-feedback-floating-button-tooltip::before { content: '' !important; position: absolute !important; right: 100% !important; top: 50% !important; transform: translateY(-50%) !important; border: 6px solid transparent !important; border-right-color: var(--glass-bg-solid) !important; } .cms-admins-feedback-floating-button:hover .cms-admins-feedback-floating-button-tooltip { opacity: 1 !important; visibility: visible !important; } .cms-admins-feedback-floating-button-dismiss { position: absolute !important; top: -4px !important; right: -4px !important; width: 18px !important; height: 18px !important; background: rgba(0, 0, 0, 0.5) !important; color: #ffffff !important; border: none !important; border-radius: 50% !important; cursor: pointer !important; display: flex !important; align-items: center !important; justify-content: center !important; transition: all 0.2s ease !important; padding: 0 !important; opacity: 0 !important; transform: scale(0.8) !important; z-index: 2147483641 !important; /* Above floating button */ } .cms-admins-feedback-floating-button:hover .cms-admins-feedback-floating-button-dismiss { opacity: 1 !important; transform: scale(1) !important; } .cms-admins-feedback-floating-button-dismiss:hover { background: rgba(220, 53, 69, 0.9) !important; } .cms-admins-feedback-floating-button-dismiss svg { width: 8px !important; height: 8px !important; } .cms-admins-feedback-notification-content { background: var(--glass-bg) !important; backdrop-filter: var(--glass-blur) !important; -webkit-backdrop-filter: var(--glass-blur) !important; border: 1px solid var(--glass-border) !important; border-radius: 12px !important; padding: 15px 20px !important; box-shadow: var(--shadow-glass) !important; display: flex !important; align-items: center !important; justify-content: space-between !important; } .cms-admins-feedback-notification-success .cms-admins-feedback-notification-content { border-left: 4px solid var(--marker-positive) !important; } .cms-admins-feedback-notification-error .cms-admins-feedback-notification-content { border-left: 4px solid var(--marker-negative) !important; } .cms-admins-feedback-notification-warning .cms-admins-feedback-notification-content { border-left: 4px solid #f59e0b !important; } .cms-admins-feedback-notification-info .cms-admins-feedback-notification-content { border-left: 4px solid var(--ember-accent) !important; } .cms-admins-feedback-notification-message { font-size: 14px !important; font-weight: 600 !important; color: var(--text-primary) !important; margin: 0 !important; flex: 1 !important; word-wrap: break-word !important; overflow-wrap: break-word !important; } .cms-admins-feedback-notification-close { background: none !important; border: none !important; color: var(--text-muted) !important; cursor: pointer !important; font-size: 18px !important; font-weight: bold !important; margin-left: 15px !important; padding: 0 !important; line-height: 1 !important; transition: color 0.2s ease !important; } .cms-admins-feedback-notification-close:hover { color: var(--text-primary) !important; } /* Notification visibility animation */ .cms-admins-feedback-notification { opacity: 0 !important; transform: translateX(-50%) translateY(-20px) !important; transition: opacity 0.3s ease, transform 0.3s ease !important; } .cms-admins-feedback-notification.visible { opacity: 1 !important; transform: translateX(-50%) translateY(0) !important; } /* Notification icon */ .cms-admins-feedback-notification-icon { flex-shrink: 0 !important; margin-right: 10px !important; } .cms-admins-feedback-notification-success .cms-admins-feedback-notification-icon { color: var(--marker-positive) !important; } .cms-admins-feedback-notification-error .cms-admins-feedback-notification-icon { color: var(--marker-negative) !important; } .cms-admins-feedback-notification-warning .cms-admins-feedback-notification-icon { color: #f59e0b !important; } .cms-admins-feedback-notification-info .cms-admins-feedback-notification-icon { color: var(--ember-accent) !important; } /* Responsive Design */ @media (max-width: 768px) { .cms-admins-feedback-toolbar { width: 280px !important; right: 10px !important; top: 10px !important; } .cms-admins-feedback-floating-button { bottom: 10px !important; left: 10px !important; right: auto !important; top: auto !important; } .cms-admins-feedback-overlay-content { padding: 20px !important; max-width: 300px !important; } .cms-admins-feedback-overlay-text { font-size: 16px !important; } .cms-admins-feedback-notification { max-width: calc(100% - 20px) !important; width: auto !important; left: 10px !important; right: 10px !important; top: auto !important; bottom: 80px !important; /* Über dem Floating Button */ transform: none !important; } .cms-admins-feedback-notification.visible { transform: none !important; } /* Wenn Toolbar minimiert ist, Notification noch weiter unten */ body.cms-admins-feedback-active .cms-admins-feedback-notification { bottom: 20px !important; } /* Dialog tablet styles */ #cms-admins-feedback-dialog { width: 90% !important; max-width: 450px !important; } /* Floating button tooltip - hide on tablet/mobile to prevent overflow */ .cms-admins-feedback-floating-button-tooltip { display: none !important; } /* Marker editor width on tablet */ .cms-admins-feedback-note-editor { width: 180px !important; } } @media (max-width: 480px) { .cms-admins-feedback-toolbar { width: calc(100vw - 20px) !important; right: 10px !important; left: 10px !important; } .cms-admins-feedback-toolbar-actions { flex-direction: column !important; } .cms-admins-feedback-action { width: 100% !important; } } /* High contrast mode support */ @media (prefers-contrast: high) { .cms-admins-feedback-overlay { background: rgba(0, 0, 0, 0.8) !important; } .cms-admins-feedback-toolbar { border-width: 3px !important; } .cms-admins-feedback-tool { border-width: 3px !important; } .cms-admins-feedback-marker-negative, .cms-admins-feedback-marker-positive { border-width: 4px !important; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.6), 0 0 0 2px rgba(0, 0, 0, 0.3) !important; } .cms-admins-feedback-note-icon { border-width: 4px !important; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.6), 0 0 0 2px rgba(0, 0, 0, 0.3) !important; } } /* Reduced motion support */ @media (prefers-reduced-motion: reduce) { .cms-admins-feedback-toolbar, .cms-admins-feedback-tool, .cms-admins-feedback-action, .cms-admins-feedback-marker, .cms-admins-feedback-notification { transition: none !important; animation: none !important; } .cms-admins-feedback-tool:hover, .cms-admins-feedback-action:hover, .cms-admins-feedback-marker:hover { transform: none !important; } } /* Print styles */ @media print { .cms-admins-feedback-overlay, .cms-admins-feedback-toolbar, .cms-admins-feedback-notification { display: none !important; } .cms-admins-feedback-marker { position: absolute !important; z-index: 1 !important; } } /* Styles for screenshot process - Ensure markers render well in screenshots */ body.screenshot-in-progress .cms-admins-feedback-marker-remove { display: none !important; } body.screenshot-in-progress .cms-admins-feedback-marker { transition: none !important; animation: none !important; transform: none !important; } body.screenshot-in-progress .cms-admins-feedback-marker-negative, body.screenshot-in-progress .cms-admins-feedback-marker-positive { /* Force solid rendering for screenshot capture */ -webkit-transform: translateZ(0) !important; transform: translateZ(0) !important; } body.screenshot-in-progress .cms-admins-feedback-note-icon { -webkit-transform: translateZ(0) !important; transform: translateZ(0) !important; } body.screenshot-in-progress .cms-admins-feedback-note-editor { display: none !important; } /* Screenshot Progress Overlay */ #cms-admins-feedback-progress-overlay { position: fixed !important; top: 0 !important; left: 0 !important; width: 100vw !important; height: 100vh !important; background: rgba(15, 23, 42, 0.7) !important; z-index: 2147483647 !important; display: flex !important; align-items: center !important; justify-content: center !important; backdrop-filter: blur(4px) !important; -webkit-backdrop-filter: blur(4px) !important; opacity: 0; transition: opacity 0.3s ease !important; } #cms-admins-feedback-progress-overlay.visible { opacity: 1; } #cms-admins-feedback-progress-box { background: var(--glass-bg) !important; backdrop-filter: var(--glass-blur) !important; -webkit-backdrop-filter: var(--glass-blur) !important; padding: 30px 40px !important; border-radius: 20px !important; box-shadow: 0 24px 48px rgba(0, 0, 0, 0.4) !important; text-align: center !important; width: 90% !important; max-width: 450px !important; border: 1px solid var(--glass-border) !important; border-top: none !important; } #cms-admins-feedback-progress-box h3 { font-size: 20px !important; color: var(--ember-accent) !important; margin-top: 0 !important; margin-bottom: 15px !important; font-weight: 600 !important; } #cms-admins-feedback-progress-status { font-size: 16px !important; color: var(--text-secondary) !important; margin-top: 0 !important; margin-bottom: 20px !important; min-height: 24px; } #cms-admins-feedback-progress-bar-container { width: 100%; background-color: var(--slate-700); border-radius: 8px; overflow: hidden; height: 16px; } #cms-admins-feedback-progress-bar { width: 0%; height: 100%; background: linear-gradient(135deg, var(--ember-accent) 0%, var(--ember-accent-hover) 100%); border-radius: 8px; transition: width 0.5s ease-in-out; box-shadow: 0 0 10px var(--ember-accent-glow); } /* Success Layer */ .cms-admins-feedback-success-layer { position: fixed !important; top: 0 !important; left: 0 !important; width: 100vw !important; height: 100vh !important; background: rgba(15, 23, 42, 0.7) !important; z-index: 2147483647 !important; display: flex !important; align-items: center !important; justify-content: center !important; backdrop-filter: blur(4px) !important; -webkit-backdrop-filter: blur(4px) !important; } .cms-admins-feedback-success-content { background: var(--glass-bg) !important; backdrop-filter: var(--glass-blur) !important; -webkit-backdrop-filter: var(--glass-blur) !important; padding: 30px 40px !important; border-radius: 20px !important; box-shadow: 0 24px 48px rgba(0, 0, 0, 0.4), 0 0 40px rgba(34, 197, 94, 0.15) !important; text-align: center !important; max-width: 450px !important; border: 1px solid var(--glass-border) !important; } .cms-admins-feedback-success-content h3 { font-size: 22px !important; color: var(--marker-positive) !important; margin-top: 0 !important; margin-bottom: 15px !important; font-weight: 600 !important; } .cms-admins-feedback-success-content p { font-size: 16px !important; color: var(--text-secondary) !important; margin-top: 0 !important; margin-bottom: 25px !important; } .cms-admins-feedback-success-button { display: inline-block !important; padding: 12px 25px !important; background: linear-gradient(135deg, var(--ember-accent) 0%, var(--ember-accent-dark) 100%) !important; color: #ffffff !important; text-decoration: none !important; border-radius: 8px !important; font-weight: 600 !important; transition: all 0.2s ease !important; margin-right: 10px !important; box-shadow: var(--shadow-glow) !important; } .cms-admins-feedback-success-button:hover { background: linear-gradient(135deg, var(--ember-accent-hover) 0%, var(--ember-accent) 100%) !important; transform: translateY(-2px) !important; box-shadow: 0 6px 20px rgba(255, 104, 0, 0.5) !important; } .cms-admins-feedback-success-close { padding: 12px 25px !important; background: rgba(255, 255, 255, 0.1) !important; color: var(--text-primary) !important; border: 1px solid var(--glass-border) !important; border-radius: 8px !important; cursor: pointer !important; font-weight: 600 !important; transition: all 0.2s ease !important; } .cms-admins-feedback-success-close:hover { background: rgba(255, 255, 255, 0.15) !important; border-color: rgba(255, 255, 255, 0.2) !important; } /* Recipient/Message Dialog */ #cms-admins-feedback-dialog-layer, .cms-admins-feedback-dialog-layer { position: fixed !important; top: 0 !important; left: 0 !important; width: 100vw !important; height: 100vh !important; background: rgba(15, 23, 42, 0.8) !important; z-index: 2147483647 !important; display: flex !important; align-items: center !important; justify-content: center !important; backdrop-filter: blur(6px) !important; -webkit-backdrop-filter: blur(6px) !important; opacity: 0 !important; transition: opacity 0.3s ease !important; } #cms-admins-feedback-dialog-layer, .cms-admins-feedback-dialog-layer.visible { opacity: 1 !important; } .cms-admins-feedback-dialog-layer .cms-admins-feedback-dialog { transform: scale(0.95) translateY(-10px) !important; transition: transform 0.3s ease !important; } .cms-admins-feedback-dialog-layer.visible .cms-admins-feedback-dialog { transform: scale(1) translateY(0) !important; } #cms-admins-feedback-dialog { background: var(--glass-bg) !important; backdrop-filter: var(--glass-blur) !important; -webkit-backdrop-filter: var(--glass-blur) !important; padding: 0 !important; border-radius: 20px !important; box-shadow: 0 24px 48px rgba(0, 0, 0, 0.4) !important; width: 90% !important; max-width: 500px !important; border: 1px solid var(--glass-border) !important; overflow: hidden !important; } #cms-admins-feedback-dialog .cms-admins-feedback-dialog-header { background: linear-gradient(135deg, var(--ember-accent) 0%, var(--ember-accent-dark) 100%) !important; padding: 20px 24px !important; margin-bottom: 0 !important; } #cms-admins-feedback-dialog h3 { font-size: 20px !important; color: #ffffff !important; margin-top: 0 !important; margin-bottom: 0 !important; font-weight: 600 !important; } #cms-admins-feedback-dialog .cms-admins-feedback-dialog-body { padding: 24px !important; } #cms-admins-feedback-dialog h4 { font-size: 16px !important; color: var(--text-primary) !important; margin-top: 0 !important; margin-bottom: 10px !important; font-weight: 600 !important; } .cms-admins-feedback-dialog-section { margin-bottom: 20px !important; } .recipients-list { display: flex; flex-direction: column; gap: 8px; } .recipients-list label { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text-secondary) !important; } #cms-admins-feedback-custom-message { width: 100% !important; height: 70px !important; min-height: 50px !important; max-height: 150px !important; padding: 10px 12px !important; border: 1px solid var(--glass-border) !important; border-radius: 8px !important; font-size: 14px !important; line-height: 1.4 !important; resize: vertical !important; background: rgba(255, 255, 255, 0.05) !important; color: var(--text-primary) !important; box-sizing: border-box !important; } #cms-admins-feedback-custom-message:focus { outline: none !important; border-color: var(--ember-accent) !important; box-shadow: 0 0 0 3px var(--ember-accent-glow) !important; } #cms-admins-feedback-custom-message::placeholder { color: var(--text-muted) !important; } .cms-admins-feedback-dialog-actions { display: flex !important; justify-content: flex-end !important; gap: 10px !important; margin-top: 20px !important; padding: 0 24px 24px 24px !important; } #cms-admins-feedback-dialog-cancel, #cms-admins-feedback-dialog-confirm { padding: 10px 20px !important; border: none !important; border-radius: 8px !important; cursor: pointer !important; font-weight: 600 !important; transition: all 0.2s ease !important; } #cms-admins-feedback-dialog-cancel { background: rgba(255, 255, 255, 0.1) !important; color: var(--text-primary) !important; border: 1px solid var(--glass-border) !important; } #cms-admins-feedback-dialog-cancel:hover { background: rgba(255, 255, 255, 0.15) !important; border-color: rgba(255, 255, 255, 0.2) !important; } #cms-admins-feedback-dialog-confirm { background: linear-gradient(135deg, var(--ember-accent) 0%, var(--ember-accent-dark) 100%) !important; color: #ffffff !important; box-shadow: var(--shadow-glow) !important; } #cms-admins-feedback-dialog-confirm:hover { background: linear-gradient(135deg, var(--ember-accent-hover) 0%, var(--ember-accent) 100%) !important; transform: translateY(-1px) !important; box-shadow: 0 6px 20px rgba(255, 104, 0, 0.5) !important; } #cms-admins-feedback-dialog-confirm:disabled { background: var(--slate-600) !important; cursor: not-allowed !important; opacity: 0.7 !important; box-shadow: none !important; } #cms-admins-feedback-dialog-confirm.loading { background: linear-gradient(135deg, var(--ember-accent-dark) 0%, var(--ember-accent) 100%) !important; cursor: wait !important; pointer-events: none !important; position: relative !important; } #cms-admins-feedback-dialog-confirm.loading:hover { background: linear-gradient(135deg, var(--ember-accent-dark) 0%, var(--ember-accent) 100%) !important; transform: none !important; } /* Base Dialog Styles (for class-based dialogs) */ .cms-admins-feedback-dialog { background: var(--glass-bg) !important; backdrop-filter: var(--glass-blur) !important; -webkit-backdrop-filter: var(--glass-blur) !important; padding: 0 !important; border-radius: 20px !important; box-shadow: 0 24px 48px rgba(0, 0, 0, 0.4) !important; width: 90% !important; max-width: 500px !important; border: 1px solid var(--glass-border) !important; overflow: hidden !important; } .cms-admins-feedback-dialog .cms-admins-feedback-dialog-header { background: linear-gradient(135deg, var(--ember-accent) 0%, var(--ember-accent-dark) 100%) !important; padding: 20px 24px !important; margin-bottom: 0 !important; display: flex !important; align-items: center !important; justify-content: space-between !important; } .cms-admins-feedback-dialog .cms-admins-feedback-dialog-header h3 { font-size: 18px !important; color: #ffffff !important; margin: 0 !important; font-weight: 600 !important; } .cms-admins-feedback-dialog .cms-admins-feedback-dialog-close { background: rgba(255, 255, 255, 0.15) !important; border: none !important; color: #ffffff !important; cursor: pointer !important; padding: 6px !important; border-radius: 6px !important; display: flex !important; align-items: center !important; justify-content: center !important; transition: all 0.2s ease !important; } .cms-admins-feedback-dialog .cms-admins-feedback-dialog-close:hover { background: rgba(255, 255, 255, 0.25) !important; } .cms-admins-feedback-dialog .cms-admins-feedback-dialog-body { padding: 24px !important; } /* Confirmation Dialog (Exit Mode) */ .cms-admins-feedback-confirm-dialog { max-width: 420px !important; } .cms-admins-feedback-confirm-dialog .cms-admins-feedback-dialog-header { background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important; border-bottom: none !important; } .cms-admins-feedback-confirm-dialog .cms-admins-feedback-dialog-header h3 { display: flex !important; align-items: center !important; gap: 10px !important; color: #ffffff !important; font-size: 18px !important; } .cms-admins-feedback-confirm-dialog .cms-admins-feedback-dialog-header h3 svg { stroke: #ffffff !important; flex-shrink: 0 !important; } .cms-admins-feedback-confirm-message { color: var(--text-primary) !important; font-size: 15px !important; line-height: 1.5 !important; margin: 0 0 16px 0 !important; } .cms-admins-feedback-confirm-message strong { color: var(--ember-accent) !important; } .cms-admins-feedback-confirm-warning { color: var(--text-secondary) !important; font-size: 13px !important; margin: 0 !important; padding: 12px 14px !important; background: rgba(239, 68, 68, 0.1) !important; border-radius: 8px !important; border: 1px solid rgba(239, 68, 68, 0.2) !important; } .cms-admins-feedback-dialog-footer { display: flex !important; justify-content: flex-end !important; gap: 12px !important; padding: 20px 24px 24px 24px !important; background: rgba(0, 0, 0, 0.1) !important; border-top: 1px solid var(--glass-border) !important; } .cms-admins-feedback-dialog-footer button { padding: 12px 20px !important; border: none !important; border-radius: 8px !important; cursor: pointer !important; font-weight: 600 !important; font-size: 14px !important; transition: all 0.2s ease !important; } .button-secondary { background: rgba(255, 255, 255, 0.1) !important; color: var(--text-primary) !important; border: 1px solid var(--glass-border) !important; } .button-secondary:hover { background: rgba(255, 255, 255, 0.15) !important; border-color: rgba(255, 255, 255, 0.25) !important; } .button-danger { background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important; color: #ffffff !important; box-shadow: 0 4px 14px rgba(239, 68, 68, 0.4) !important; } .button-danger:hover { background: linear-gradient(135deg, #f87171 0%, #ef4444 100%) !important; transform: translateY(-1px) !important; box-shadow: 0 6px 20px rgba(239, 68, 68, 0.5) !important; } /* Loading Spinner - Base */ .cms-loading-spinner, span.cms-loading-spinner { display: inline-block !important; width: 16px !important; height: 16px !important; border: 2px solid rgba(255, 255, 255, 0.3) !important; border-radius: 50% !important; border-top: 2px solid #ffffff !important; border-right: 2px solid #ffffff !important; animation: cms-spin 1s linear infinite !important; margin-right: 8px !important; margin-left: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; flex-shrink: 0 !important; vertical-align: middle !important; box-sizing: border-box !important; } @keyframes cms-spin { 0% { transform: rotate(0deg) !important; } 100% { transform: rotate(360deg) !important; } } /* Für Buttons - spezielle Variante */ button .cms-loading-spinner, #cms-admins-feedback-dialog-confirm .cms-loading-spinner { border: 2px solid rgba(255, 255, 255, 0.3) !important; border-top: 2px solid #ffffff !important; border-right: 2px solid #ffffff !important; } /* Für Notifications - orange Variante */ .cms-admins-feedback-notification .cms-loading-spinner { border: 2px solid var(--ember-accent-glow) !important; border-top: 2px solid var(--ember-accent) !important; border-right: 2px solid var(--ember-accent) !important; } /* Fallback für Browser ohne Animation-Support */ @media (prefers-reduced-motion: reduce) { .cms-loading-spinner { animation: none !important; border: 2px solid #ffffff !important; } } /* Enhanced notification styles for loading states */ .cms-admins-feedback-notification.loading { background: linear-gradient(90deg, var(--slate-800) 0%, var(--slate-700) 50%, var(--slate-800) 100%) !important; background-size: 200% 100% !important; animation: cms-loading-gradient 2s ease-in-out infinite !important; } @keyframes cms-loading-gradient { 0%, 100% { background-position: 200% 0 !important; } 50% { background-position: -200% 0 !important; } } .cms-admins-feedback-notification.loading .cms-admins-feedback-notification-content { border-left: 4px solid var(--ember-accent) !important; background: transparent !important; } /* ===== ONBOARDING OVERLAY ===== */ .cms-feedback-onboarding { position: fixed !important; top: 0 !important; left: 0 !important; width: 100vw !important; height: 100vh !important; z-index: 2147483648 !important; display: flex !important; align-items: center !important; justify-content: center !important; opacity: 0 !important; visibility: hidden !important; transition: opacity 0.3s ease, visibility 0.3s ease !important; } .cms-feedback-onboarding.visible { opacity: 1 !important; visibility: visible !important; } .cms-feedback-onboarding-backdrop { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; background: rgba(15, 23, 42, 0.7) !important; backdrop-filter: blur(4px) !important; -webkit-backdrop-filter: blur(4px) !important; } .cms-feedback-onboarding-content { position: relative !important; background: var(--glass-bg) !important; backdrop-filter: var(--glass-blur) !important; -webkit-backdrop-filter: var(--glass-blur) !important; padding: 25px 30px !important; border-radius: 20px !important; box-shadow: 0 24px 48px rgba(0, 0, 0, 0.4) !important; max-width: 420px !important; width: 90% !important; border: 1px solid var(--glass-border) !important; transform: translateY(-20px) !important; transition: transform 0.3s ease !important; } .cms-feedback-onboarding.visible .cms-feedback-onboarding-content { transform: translateY(0) !important; } .cms-feedback-onboarding-header { display: flex !important; align-items: center !important; gap: 10px !important; margin-bottom: 20px !important; } .cms-feedback-onboarding-icon { color: var(--ember-accent) !important; flex-shrink: 0 !important; } .cms-feedback-onboarding-content h4 { font-size: 20px !important; color: var(--ember-accent) !important; margin: 0 !important; font-weight: 600 !important; } .cms-feedback-onboarding-steps { margin: 0 0 20px 0 !important; padding: 0 !important; list-style: none !important; color: var(--text-secondary) !important; } .cms-feedback-onboarding-steps li { display: flex !important; align-items: flex-start !important; gap: 12px !important; margin-bottom: 12px !important; line-height: 1.5 !important; font-size: 14px !important; } .cms-feedback-onboarding-steps .step-number { display: flex !important; align-items: center !important; justify-content: center !important; width: 24px !important; height: 24px !important; background: var(--ember-accent) !important; color: #fff !important; border-radius: 50% !important; font-size: 12px !important; font-weight: 600 !important; flex-shrink: 0 !important; } .cms-feedback-onboarding-steps .step-text { flex: 1 !important; padding-top: 2px !important; } .cms-feedback-onboarding-shortcuts { display: flex !important; flex-wrap: wrap !important; gap: 12px !important; margin-bottom: 20px !important; padding: 12px !important; background: rgba(255, 255, 255, 0.05) !important; border-radius: 8px !important; font-size: 12px !important; color: var(--text-muted) !important; border: 1px solid var(--glass-border) !important; } .cms-feedback-onboarding-shortcuts .shortcut { display: flex !important; align-items: center !important; gap: 4px !important; } .cms-feedback-onboarding-shortcuts kbd { background: rgba(255, 255, 255, 0.1) !important; border: 1px solid var(--glass-border) !important; border-radius: 3px !important; padding: 2px 6px !important; font-family: monospace !important; font-size: 11px !important; color: var(--text-secondary) !important; box-shadow: none !important; } .cms-feedback-onboarding-footer { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 15px !important; flex-wrap: wrap !important; } .cms-feedback-onboarding-dismiss-label { display: flex !important; align-items: center !important; gap: 6px !important; font-size: 13px !important; color: var(--text-muted) !important; cursor: pointer !important; } .cms-feedback-onboarding-dismiss-label input { cursor: pointer !important; width: 16px !important; height: 16px !important; accent-color: var(--ember-accent) !important; } .cms-feedback-onboarding-close { background: linear-gradient(135deg, var(--ember-accent) 0%, var(--ember-accent-dark) 100%) !important; color: #ffffff !important; border: none !important; padding: 10px 20px !important; border-radius: 8px !important; font-weight: 600 !important; cursor: pointer !important; transition: all 0.2s ease !important; font-size: 14px !important; box-shadow: var(--shadow-glow) !important; } .cms-feedback-onboarding-close:hover { transform: translateY(-2px) !important; box-shadow: 0 6px 20px rgba(255, 104, 0, 0.5) !important; } .cms-feedback-onboarding-close:focus-visible { outline: 3px solid var(--ember-accent) !important; outline-offset: 2px !important; } /* ===== DIALOG HEADER ===== */ .cms-admins-feedback-dialog-header { display: flex !important; align-items: center !important; justify-content: space-between !important; margin-bottom: 20px !important; } .cms-admins-feedback-dialog-header h3 { margin: 0 !important; } .cms-admins-feedback-dialog-close { background: none !important; border: none !important; color: rgba(255, 255, 255, 0.7) !important; cursor: pointer !important; padding: 4px !important; border-radius: 4px !important; display: flex !important; align-items: center !important; justify-content: center !important; transition: all 0.2s ease !important; } .cms-admins-feedback-dialog-close:hover { background: rgba(255, 255, 255, 0.2) !important; color: #ffffff !important; } .cms-admins-feedback-dialog-body h4 { display: flex !important; align-items: center !important; gap: 8px !important; } .cms-admins-feedback-dialog-body h4 svg { color: var(--ember-accent) !important; flex-shrink: 0 !important; } /* Recipient styling */ .recipient-info { display: flex !important; flex-direction: column !important; gap: 2px !important; } .recipient-name { font-weight: 500 !important; color: var(--text-primary) !important; } .recipient-email { font-size: 12px !important; color: var(--text-muted) !important; } .no-recipients { color: var(--text-muted) !important; font-style: italic !important; } /* Dialog confirm button with icon */ #cms-admins-feedback-dialog-confirm { display: flex !important; align-items: center !important; gap: 8px !important; } #cms-admins-feedback-dialog-confirm svg { flex-shrink: 0 !important; } /* ===== DIALOG WARNING ===== */ .cms-admins-feedback-dialog-warning { background: rgba(245, 158, 11, 0.15) !important; border: 1px solid rgba(245, 158, 11, 0.3) !important; color: #f59e0b !important; padding: 12px 15px !important; margin: 0 24px 15px 24px !important; border-radius: 8px !important; align-items: center !important; gap: 10px !important; font-size: 14px !important; /* Hidden by default, jQuery manages visibility */ } /* Empty warning should not take space */ .cms-admins-feedback-dialog-warning:empty { display: none !important; margin: 0 !important; padding: 0 !important; } .cms-admins-feedback-dialog-warning svg { flex-shrink: 0 !important; color: #f59e0b !important; } /* ===== SUCCESS LAYER ICON ===== */ .cms-admins-feedback-success-icon-wrapper { margin-bottom: 15px !important; } .cms-admins-feedback-success-icon { animation: success-checkmark 0.5s ease-out !important; } @keyframes success-checkmark { 0% { transform: scale(0); opacity: 0; } 50% { transform: scale(1.2); } 100% { transform: scale(1); opacity: 1; } } .cms-admins-feedback-success-actions { display: flex !important; gap: 10px !important; justify-content: center !important; flex-wrap: wrap !important; } .cms-admins-feedback-success-button { display: inline-flex !important; align-items: center !important; gap: 8px !important; } .cms-admins-feedback-success-button svg { flex-shrink: 0 !important; } /* Success layer visibility animation */ .cms-admins-feedback-success-layer { opacity: 0 !important; visibility: hidden !important; transition: opacity 0.3s ease, visibility 0.3s ease !important; } .cms-admins-feedback-success-layer.visible { opacity: 1 !important; visibility: visible !important; } /* ===== ACCESSIBILITY - FOCUS STYLES ===== */ .cms-admins-feedback-tool:focus-visible { outline: 3px solid var(--ember-accent) !important; outline-offset: 2px !important; } .cms-admins-feedback-action:focus-visible { outline: 3px solid #fff !important; outline-offset: 2px !important; } .cms-admins-feedback-toolbar-close:focus-visible, .cms-admins-feedback-toolbar-minimize:focus-visible { outline: 2px solid #fff !important; outline-offset: 2px !important; } .cms-admins-feedback-undo-btn:focus-visible, .cms-admins-feedback-redo-btn:focus-visible { outline: 3px solid var(--ember-accent) !important; outline-offset: 2px !important; } .cms-admins-feedback-marker:focus-visible { outline: 3px solid var(--ember-accent) !important; outline-offset: 3px !important; } .cms-admins-feedback-marker-remove:focus-visible { outline: 2px solid #fff !important; outline-offset: 1px !important; } #cms-admins-feedback-dialog-cancel:focus-visible, #cms-admins-feedback-dialog-confirm:focus-visible { outline: 3px solid var(--ember-accent) !important; outline-offset: 2px !important; } .cms-admins-feedback-recipient-label:focus-within { outline: 2px solid var(--ember-accent) !important; outline-offset: 2px !important; border-radius: 4px !important; } #cms-admins-feedback-custom-message:focus-visible { outline: none !important; border-color: var(--ember-accent) !important; box-shadow: 0 0 0 3px var(--ember-accent-glow) !important; } .cms-admins-feedback-notification-close:focus-visible { outline: 2px solid var(--ember-accent) !important; outline-offset: 2px !important; } /* Skip focus ring for mouse clicks (keyboard only) */ .cms-admins-feedback-tool:focus:not(:focus-visible), .cms-admins-feedback-action:focus:not(:focus-visible), .cms-admins-feedback-toolbar-close:focus:not(:focus-visible), .cms-admins-feedback-toolbar-minimize:focus:not(:focus-visible), .cms-admins-feedback-marker:focus:not(:focus-visible) { outline: none !important; } /* ===== PUBLIC FEEDBACK MODE STYLES ===== */ /* Honeypot field - hidden from users but visible to bots */ .cms-admins-feedback-hp { position: absolute !important; left: -9999px !important; top: -9999px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; opacity: 0 !important; pointer-events: none !important; visibility: hidden !important; } .cms-admins-feedback-hp input, .cms-admins-feedback-hp textarea { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; } /* Public Dialog - Email Input Section */ .cms-admins-feedback-email-section { margin-bottom: 20px !important; } .cms-admins-feedback-email-section label { display: flex !important; align-items: center !important; gap: 8px !important; font-size: 16px !important; font-weight: 600 !important; color: var(--text-primary) !important; margin-bottom: 10px !important; } .cms-admins-feedback-email-section label svg { color: var(--ember-accent) !important; flex-shrink: 0 !important; } #cms-admins-feedback-submitter-email { width: 100% !important; padding: 12px 16px !important; border: 1px solid var(--glass-border) !important; border-radius: 8px !important; font-size: 14px !important; background: rgba(255, 255, 255, 0.05) !important; color: var(--text-primary) !important; transition: all 0.2s ease !important; } #cms-admins-feedback-submitter-email:focus { outline: none !important; border-color: var(--ember-accent) !important; box-shadow: 0 0 0 3px var(--ember-accent-glow) !important; } #cms-admins-feedback-submitter-email::placeholder { color: var(--text-muted) !important; } #cms-admins-feedback-submitter-email.invalid { border-color: var(--marker-negative) !important; box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2) !important; } .cms-admins-feedback-email-hint { font-size: 12px !important; color: var(--text-muted) !important; margin-top: 6px !important; } .cms-admins-feedback-email-hint.required::after { content: ' *' !important; color: var(--marker-negative) !important; } /* Privacy Notice - Inline hint style */ .cms-admins-feedback-privacy-notice { background: transparent !important; border: none !important; padding: 4px 0 0 0 !important; margin: 0 !important; font-size: 11px !important; color: var(--text-muted) !important; line-height: 1.4 !important; font-style: italic !important; } .cms-admins-feedback-privacy-notice svg { display: none !important; } .cms-admins-feedback-privacy-notice a { color: var(--ember-accent) !important; text-decoration: underline !important; } .cms-admins-feedback-privacy-notice a:hover { color: var(--ember-accent-hover) !important; } /* DSGVO Checkbox Section */ .cms-admins-feedback-dsgvo-section { padding-top: 0 !important; } .cms-admins-feedback-dsgvo-label { display: flex !important; align-items: flex-start !important; gap: 10px !important; cursor: pointer !important; padding: 12px 14px !important; background: rgba(255, 255, 255, 0.03) !important; border: 1px solid var(--glass-border) !important; border-radius: 8px !important; transition: all 0.2s ease !important; } .cms-admins-feedback-dsgvo-label:hover { background: rgba(255, 255, 255, 0.05) !important; border-color: var(--ember-accent-glow) !important; } .cms-admins-feedback-dsgvo-label input[type="checkbox"] { width: 18px !important; height: 18px !important; margin-top: 2px !important; flex-shrink: 0 !important; accent-color: var(--ember-accent) !important; cursor: pointer !important; } .cms-admins-feedback-dsgvo-text { font-size: 13px !important; color: var(--text-secondary) !important; line-height: 1.5 !important; } .cms-admins-feedback-dsgvo-label input[type="checkbox"]:checked + .cms-admins-feedback-dsgvo-text { color: var(--text-primary) !important; } /* CAPTCHA Section */ .cms-admins-feedback-captcha-section { margin-bottom: 20px !important; display: flex !important; justify-content: center !important; } .cms-admins-feedback-captcha-container { min-height: 78px !important; display: flex !important; align-items: center !important; justify-content: center !important; } /* reCAPTCHA v2 specific */ .cms-admins-feedback-captcha-container .g-recaptcha { transform-origin: center !important; } /* hCaptcha specific */ .cms-admins-feedback-captcha-container .h-captcha { transform-origin: center !important; } /* Cloudflare Turnstile specific */ .cms-admins-feedback-captcha-container .cf-turnstile { transform-origin: center !important; } /* CAPTCHA loading state */ .cms-admins-feedback-captcha-loading { display: flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important; padding: 20px !important; color: var(--text-muted) !important; font-size: 13px !important; } .cms-admins-feedback-captcha-loading .cms-loading-spinner { border-color: var(--ember-accent-glow) !important; border-top-color: var(--ember-accent) !important; border-right-color: var(--ember-accent) !important; } /* CAPTCHA error state */ .cms-admins-feedback-captcha-error { color: var(--marker-negative) !important; font-size: 13px !important; text-align: center !important; padding: 10px !important; } /* Public Mode - Recipient List (Names only, no emails shown) */ .cms-admins-feedback-dialog.public-mode .recipient-email { display: none !important; } .cms-admins-feedback-dialog.public-mode .recipient-info { flex-direction: row !important; align-items: center !important; } .cms-admins-feedback-dialog.public-mode .recipient-name { font-size: 14px !important; } /* Public Mode - Dialog Badge */ .cms-admins-feedback-public-badge { display: inline-flex !important; align-items: center !important; gap: 4px !important; background: var(--ember-accent-subtle) !important; color: var(--ember-accent) !important; font-size: 11px !important; font-weight: 600 !important; padding: 3px 8px !important; border-radius: 4px !important; margin-left: 10px !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; } .cms-admins-feedback-public-badge svg { width: 12px !important; height: 12px !important; } /* Public Mode - Validation Error Messages */ .cms-admins-feedback-field-error { color: var(--marker-negative) !important; font-size: 12px !important; margin-top: 4px !important; display: flex !important; align-items: center !important; gap: 4px !important; } .cms-admins-feedback-field-error svg { flex-shrink: 0 !important; width: 14px !important; height: 14px !important; } /* Rate Limit Warning in Dialog */ .cms-admins-feedback-rate-limit-warning { background: rgba(239, 68, 68, 0.15) !important; border: 1px solid rgba(239, 68, 68, 0.3) !important; color: var(--marker-negative) !important; padding: 12px 15px !important; margin-bottom: 15px !important; border-radius: 8px !important; display: flex !important; align-items: center !important; gap: 10px !important; font-size: 14px !important; } .cms-admins-feedback-rate-limit-warning svg { flex-shrink: 0 !important; color: var(--marker-negative) !important; } /* Responsive adjustments for public dialog */ @media (max-width: 480px) { .cms-admins-feedback-captcha-container { transform: scale(0.9) !important; transform-origin: center !important; } .cms-admins-feedback-captcha-container .g-recaptcha, .cms-admins-feedback-captcha-container .h-captcha, .cms-admins-feedback-captcha-container .cf-turnstile { transform: scale(0.9) !important; } } /* ===== PUBLIC SUCCESS MODAL ===== */ #cms-admins-feedback-success-layer { position: fixed !important; top: 0 !important; left: 0 !important; width: 100vw !important; height: 100vh !important; background: rgba(15, 23, 42, 0.85) !important; z-index: 2147483647 !important; display: flex !important; align-items: center !important; justify-content: center !important; backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important; opacity: 0 !important; transition: opacity 0.3s ease !important; } #cms-admins-feedback-success-layer.visible { opacity: 1 !important; } #cms-admins-feedback-success-modal { background: var(--glass-bg) !important; backdrop-filter: var(--glass-blur) !important; -webkit-backdrop-filter: var(--glass-blur) !important; padding: 40px 50px !important; border-radius: 24px !important; box-shadow: 0 24px 48px rgba(0, 0, 0, 0.5) !important; width: 90% !important; max-width: 420px !important; border: 1px solid var(--glass-border) !important; text-align: center !important; transform: scale(0.9) translateY(20px) !important; transition: transform 0.3s ease !important; } #cms-admins-feedback-success-layer.visible #cms-admins-feedback-success-modal { transform: scale(1) translateY(0) !important; } .cms-admins-feedback-success-icon { width: 80px !important; height: 80px !important; margin: 0 auto 24px !important; background: linear-gradient(135deg, var(--marker-positive) 0%, #16a34a 100%) !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; box-shadow: 0 8px 32px rgba(34, 197, 94, 0.4) !important; animation: successPulse 2s ease-in-out infinite !important; } .cms-admins-feedback-success-icon svg { width: 44px !important; height: 44px !important; color: #ffffff !important; stroke-width: 2.5 !important; } @keyframes successPulse { 0%, 100% { box-shadow: 0 8px 32px rgba(34, 197, 94, 0.4); } 50% { box-shadow: 0 8px 48px rgba(34, 197, 94, 0.6); } } #cms-admins-feedback-success-modal h2 { font-size: 28px !important; font-weight: 700 !important; color: var(--text-primary) !important; margin: 0 0 16px 0 !important; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important; } .cms-admins-feedback-success-message { font-size: 16px !important; color: var(--text-secondary) !important; margin: 0 0 8px 0 !important; line-height: 1.5 !important; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important; } .cms-admins-feedback-success-submessage { font-size: 14px !important; color: var(--text-muted) !important; margin: 0 0 28px 0 !important; line-height: 1.5 !important; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important; } #cms-admins-feedback-success-close { background: linear-gradient(135deg, var(--ember-accent) 0%, var(--ember-accent-dark) 100%) !important; color: #ffffff !important; border: none !important; padding: 14px 40px !important; font-size: 15px !important; font-weight: 600 !important; border-radius: 10px !important; cursor: pointer !important; transition: all 0.2s ease !important; box-shadow: 0 4px 14px rgba(255, 104, 0, 0.4) !important; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important; } #cms-admins-feedback-success-close:hover { transform: translateY(-2px) !important; box-shadow: 0 6px 20px rgba(255, 104, 0, 0.5) !important; } #cms-admins-feedback-success-close:active { transform: translateY(0) !important; } #cms-admins-feedback-success-close:focus-visible { outline: none !important; box-shadow: 0 0 0 3px var(--ember-accent-glow), 0 4px 14px rgba(255, 104, 0, 0.4) !important; } /* Mobile responsive */ @media (max-width: 480px) { #cms-admins-feedback-success-modal { padding: 32px 24px !important; margin: 16px !important; } .cms-admins-feedback-success-icon { width: 64px !important; height: 64px !important; } .cms-admins-feedback-success-icon svg { width: 36px !important; height: 36px !important; } #cms-admins-feedback-success-modal h2 { font-size: 24px !important; } .cms-admins-feedback-success-message { font-size: 15px !important; } .cms-admins-feedback-success-submessage { font-size: 13px !important; } } /* ===== MOBILE OPTIMIZATION ===== */ /* iOS Auto-Zoom Prevention - Inputs must be 16px+ */ .cms-admins-feedback-note-textarea, #cms-admins-feedback-custom-message, #cms-admins-feedback-submitter-email, .cms-admins-feedback-toolbar input, .cms-admins-feedback-toolbar textarea, .cms-admins-feedback-toolbar select, #cms-admins-feedback-dialog input, #cms-admins-feedback-dialog textarea, #cms-admins-feedback-dialog select { font-size: 16px !important; } /* Touch-friendly targets - use pseudo-elements for larger touch area on mobile only */ @media (max-width: 768px) { /* Dismiss button: Klickbereich = sichtbare Button-Größe (kein erweiterter Touch-Bereich) */ .cms-admins-feedback-floating-button-dismiss::before { display: none !important; } /* Invisible touch area expansion for marker remove button on mobile */ .cms-admins-feedback-marker-remove::before { content: '' !important; position: absolute !important; top: 50% !important; left: 50% !important; width: 44px !important; height: 44px !important; transform: translate(-50%, -50%) !important; background: transparent !important; border: none !important; box-shadow: none !important; pointer-events: auto !important; } /* Marker touch area expansion on mobile */ .cms-admins-feedback-marker::before { content: '' !important; position: absolute !important; top: -6px !important; left: -6px !important; right: -6px !important; bottom: -6px !important; background: transparent !important; border: none !important; box-shadow: none !important; } } /* Touch-action for better touch handling */ .cms-admins-feedback-toolbar-header { touch-action: none !important; } .cms-admins-feedback-marker { touch-action: none !important; } .cms-admins-feedback-protection-layer { touch-action: none !important; } .cms-admins-feedback-tool, .cms-admins-feedback-action, .cms-admins-feedback-undo-btn, .cms-admins-feedback-redo-btn, .cms-admins-feedback-floating-button { touch-action: manipulation !important; -webkit-tap-highlight-color: transparent !important; } /* Safe Area Support - iPhone Notch */ @supports (padding: env(safe-area-inset-bottom)) { .cms-admins-feedback-floating-button { bottom: calc(20px + env(safe-area-inset-bottom)) !important; left: calc(20px + env(safe-area-inset-left)) !important; } .cms-admins-feedback-toolbar:not([style*="top"]):not([style*="left"]) { top: calc(20px + env(safe-area-inset-top)) !important; right: calc(20px + env(safe-area-inset-right)) !important; } .cms-admins-feedback-notification { top: calc(20px + env(safe-area-inset-top)) !important; } #cms-admins-feedback-dialog, #cms-admins-feedback-success-modal, #cms-admins-feedback-progress-box { padding-bottom: calc(24px + env(safe-area-inset-bottom)) !important; } } /* Small smartphones (360px) */ @media (max-width: 360px) { .cms-admins-feedback-toolbar { width: calc(100% - 16px) !important; right: 8px !important; left: 8px !important; } .cms-admins-feedback-toolbar-header { padding: 10px 12px !important; } .cms-admins-feedback-toolbar-title { font-size: 14px !important; } .cms-admins-feedback-toolbar-tools { padding: 10px !important; } .cms-admins-feedback-tool { padding: 10px 12px !important; font-size: 13px !important; } .cms-admins-feedback-toolbar-actions { padding: 10px !important; } .cms-admins-feedback-floating-button { width: 52px !important; height: 52px !important; bottom: 12px !important; left: 12px !important; } #cms-admins-feedback-dialog { width: calc(100% - 16px) !important; max-width: none !important; margin: 8px !important; } #cms-admins-feedback-dialog .cms-admins-feedback-dialog-header { padding: 14px 16px !important; } #cms-admins-feedback-dialog .cms-admins-feedback-dialog-body { padding: 16px !important; } #cms-admins-feedback-dialog h3 { font-size: 18px !important; } .cms-admins-feedback-dialog-actions { padding: 0 16px 16px 16px !important; flex-direction: column !important; } #cms-admins-feedback-dialog-cancel, #cms-admins-feedback-dialog-confirm { width: 100% !important; } #cms-admins-feedback-success-modal { padding: 24px 16px !important; margin: 8px !important; width: calc(100% - 16px) !important; } .cms-admins-feedback-success-icon { width: 56px !important; height: 56px !important; margin-bottom: 16px !important; } .cms-admins-feedback-success-icon svg { width: 28px !important; height: 28px !important; } #cms-admins-feedback-success-modal h2 { font-size: 20px !important; } #cms-admins-feedback-success-close { width: 100% !important; padding: 12px 24px !important; } .cms-admins-feedback-note-editor { width: 160px !important; } .cms-feedback-onboarding-content { padding: 20px !important; width: calc(100% - 16px) !important; } #cms-admins-feedback-progress-box { padding: 20px !important; width: calc(100% - 16px) !important; } } /* Very small screens (iPhone SE, 320px) */ @media (max-width: 320px) { .cms-admins-feedback-toolbar { width: calc(100% - 12px) !important; right: 6px !important; left: 6px !important; } .cms-admins-feedback-toolbar-logo { width: 20px !important; height: 20px !important; } .cms-admins-feedback-toolbar-logo-svg { width: 22px !important; height: 22px !important; } .cms-admins-feedback-toolbar-title { font-size: 13px !important; } .cms-admins-feedback-tool span { font-size: 12px !important; } .cms-admins-feedback-tool kbd { display: none !important; } .cms-admins-feedback-action { font-size: 12px !important; padding: 10px 8px !important; } .cms-admins-feedback-floating-button { width: 48px !important; height: 48px !important; bottom: 10px !important; left: 10px !important; } .cms-admins-feedback-floating-button-icon { width: 20px !important; height: 20px !important; } .cms-admins-feedback-floating-button-tooltip { display: none !important; } #cms-admins-feedback-dialog { width: calc(100% - 12px) !important; margin: 6px !important; } #cms-admins-feedback-dialog .cms-admins-feedback-dialog-body { padding: 12px !important; } .recipients-list label { font-size: 13px !important; } .cms-admins-feedback-note-editor { width: 140px !important; } } /* Landscape orientation with limited height */ @media (orientation: landscape) and (max-height: 500px) { .cms-admins-feedback-toolbar { max-height: calc(100vh - 20px) !important; overflow-y: auto !important; width: 280px !important; } .cms-admins-feedback-toolbar-body { max-height: calc(100vh - 80px) !important; overflow-y: auto !important; } .cms-admins-feedback-toolbar-tools { padding: 8px !important; } .cms-admins-feedback-tool { padding: 8px 10px !important; margin-bottom: 4px !important; } .cms-admins-feedback-toolbar-actions { padding: 8px !important; } .cms-admins-feedback-toolbar-counter { padding: 8px 10px !important; } #cms-admins-feedback-dialog { max-height: calc(100vh - 20px) !important; overflow-y: auto !important; } #cms-admins-feedback-dialog .cms-admins-feedback-dialog-body { max-height: calc(100vh - 160px) !important; overflow-y: auto !important; } .cms-feedback-onboarding-content { max-height: calc(100vh - 20px) !important; overflow-y: auto !important; padding: 15px 20px !important; } .cms-feedback-onboarding-steps li { margin-bottom: 8px !important; } #cms-admins-feedback-success-modal { padding: 20px 24px !important; max-height: calc(100vh - 20px) !important; } .cms-admins-feedback-success-icon { width: 48px !important; height: 48px !important; margin-bottom: 12px !important; } .cms-admins-feedback-success-icon svg { width: 24px !important; height: 24px !important; } #cms-admins-feedback-success-modal h2 { font-size: 20px !important; margin-bottom: 8px !important; } .cms-admins-feedback-success-submessage { margin-bottom: 16px !important; } .cms-admins-feedback-floating-button { bottom: 10px !important; left: 10px !important; width: 48px !important; height: 48px !important; } } /* Enhanced 480px breakpoint for dialog */ @media (max-width: 480px) { #cms-admins-feedback-dialog { width: calc(100vw - 32px) !important; max-width: none !important; max-height: calc(100vh - 100px) !important; max-height: calc(100dvh - 100px) !important; overflow-y: auto !important; } #cms-admins-feedback-dialog .cms-admins-feedback-dialog-body { max-height: none !important; overflow-y: visible !important; } .recipients-list { max-height: 150px !important; overflow-y: auto !important; } .cms-admins-feedback-toolbar-hint { padding: 8px 12px !important; margin: 0 10px 8px 10px !important; font-size: 12px !important; } /* Floating button with larger dismiss on mobile - weiter weg vom Button */ .cms-admins-feedback-floating-button-dismiss { width: 24px !important; height: 24px !important; top: -12px !important; right: -12px !important; opacity: 1 !important; transform: scale(1) !important; } .cms-admins-feedback-floating-button-dismiss svg { width: 12px !important; height: 12px !important; } /* Progress overlay mobile */ #cms-admins-feedback-progress-box { padding: 24px !important; width: calc(100% - 32px) !important; } #cms-admins-feedback-progress-box h3 { font-size: 18px !important; } #cms-admins-feedback-progress-status { font-size: 14px !important; } } /* Use dvh for better mobile viewport handling */ @supports (height: 100dvh) { #cms-admins-feedback-dialog-layer, #cms-admins-feedback-success-layer, #cms-admins-feedback-progress-overlay, .cms-feedback-onboarding, .cms-admins-feedback-protection-layer { height: 100dvh !important; } } /* ===== MOBILE EXPAND BUTTON ===== */ /* Shown when toolbar is minimized on mobile to help users expand it */ .cms-admins-feedback-mobile-expand-btn { position: fixed !important; bottom: 20px !important; right: 20px !important; z-index: 2147483645 !important; display: flex !important; align-items: center !important; gap: 8px !important; background: linear-gradient(135deg, var(--ember-accent) 0%, var(--ember-accent-dark) 100%) !important; color: #ffffff !important; border: none !important; border-radius: 50px !important; padding: 12px 20px !important; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important; font-size: 14px !important; font-weight: 600 !important; box-shadow: 0 4px 20px rgba(255, 104, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.2) !important; cursor: pointer !important; opacity: 0 !important; transform: translateY(20px) !important; transition: opacity 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease !important; touch-action: manipulation !important; -webkit-tap-highlight-color: transparent !important; } .cms-admins-feedback-mobile-expand-btn.visible { opacity: 1 !important; transform: translateY(0) !important; } .cms-admins-feedback-mobile-expand-btn:active { transform: scale(0.96) !important; box-shadow: 0 2px 12px rgba(255, 104, 0, 0.4), 0 1px 4px rgba(0, 0, 0, 0.2) !important; } .cms-admins-feedback-mobile-expand-btn svg { width: 20px !important; height: 20px !important; flex-shrink: 0 !important; } .cms-admins-feedback-mobile-expand-btn span { white-space: nowrap !important; } /* Safe area for mobile expand button */ @supports (padding: env(safe-area-inset-bottom)) { .cms-admins-feedback-mobile-expand-btn { bottom: calc(20px + env(safe-area-inset-bottom)) !important; right: calc(20px + env(safe-area-inset-right)) !important; } } /* Smaller screens adjustments */ @media (max-width: 360px) { .cms-admins-feedback-mobile-expand-btn { bottom: 12px !important; right: 12px !important; padding: 10px 16px !important; font-size: 13px !important; } } @media (max-width: 320px) { .cms-admins-feedback-mobile-expand-btn { bottom: 10px !important; right: 10px !important; padding: 10px 14px !important; font-size: 12px !important; } .cms-admins-feedback-mobile-expand-btn svg { width: 18px !important; height: 18px !important; } }