Spaces:
Sleeping
Sleeping
| /* styles/WordToPdf.css | |
| Colors: blue (#0b74ff), darker blue (#04518a), yellow (#f2c200), black and white | |
| Matching the Privacy Policy page style pattern | |
| */ | |
| :root { | |
| --fud-bg: #ffffff; | |
| --fud-text: #0b0b0b; | |
| --fud-blue: #0b74ff; | |
| --fud-blue-dark: #04518a; | |
| --fud-yellow: #f2c200; | |
| --fud-muted: #6b7280; | |
| --fud-gap: 20px; | |
| --fud-radius: 10px; | |
| --fud-ease: cubic-bezier(.2,.9,.3,1); | |
| } | |
| .fud-page-container { | |
| background: var(--fud-bg); | |
| color: var(--fud-text); | |
| min-height: auto; | |
| display: flex; | |
| flex-direction: column; | |
| font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; | |
| -webkit-font-smoothing: antialiased; | |
| -moz-osx-font-smoothing: grayscale; | |
| } | |
| /* decorative header icon */ | |
| .fud-header { | |
| display: flex; | |
| justify-content: flex-start; | |
| align-items: center; | |
| padding: 18px 28px 0 28px; | |
| } | |
| .fud-header-icon { | |
| color: var(--fud-blue); | |
| font-size: 36px; | |
| opacity: 0.92; | |
| animation: fud-icon-pop 420ms var(--fud-ease) both; | |
| } | |
| /* main layout */ | |
| .fud-main { | |
| width: 90%; | |
| max-width: 96%; | |
| margin: 12px auto 36px; | |
| padding: 0 18px; | |
| display: grid; | |
| grid-template-columns: 1fr; | |
| gap: var(--fud-gap); | |
| box-sizing: border-box; | |
| } | |
| /* each section card */ | |
| .fud-card { | |
| background: #fff; | |
| border: 1px solid rgba(4,81,138,0.06); | |
| border-radius: var(--fud-radius); | |
| padding: 18px 20px; | |
| box-shadow: 0 6px 18px rgba(4,81,138,0.04); | |
| transform: translateY(8px); | |
| opacity: 0; | |
| animation: fud-card-appear 420ms var(--fud-ease) forwards; | |
| } | |
| /* card stagger animation */ | |
| .fud-card:nth-child(1) { animation-delay: 0ms; } | |
| .fud-card:nth-child(2) { animation-delay: 70ms; } | |
| .fud-card:nth-child(3) { animation-delay: 130ms; } | |
| .fud-card:nth-child(4) { animation-delay: 190ms; } | |
| .fud-card:nth-child(5) { animation-delay: 250ms; } | |
| .fud-card:nth-child(6) { animation-delay: 310ms; } | |
| .fud-card:nth-child(7) { animation-delay: 370ms; } | |
| /* intro card accent */ | |
| .fud-intro { | |
| border-left: 4px solid var(--fud-blue); | |
| position: relative; | |
| } | |
| .fud-tool-number { | |
| position: absolute; | |
| top: 14px; | |
| right: 18px; | |
| font-size: 48px; | |
| font-weight: 800; | |
| color: rgba(11,116,255,0.1); | |
| line-height: 1; | |
| } | |
| /* section header with icon */ | |
| .fud-section-header { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| margin-bottom: 14px; | |
| } | |
| .fud-section-icon { | |
| color: var(--fud-blue); | |
| font-size: 22px; | |
| flex-shrink: 0; | |
| } | |
| /* titles & typography */ | |
| .fud-title { | |
| color: var(--fud-blue); | |
| font-size: 28px; | |
| margin: 0 0 6px 0; | |
| line-height: 1.05; | |
| } | |
| .fud-subtitle { | |
| color: var(--fud-blue-dark); | |
| font-size: 18px; | |
| margin: 0; | |
| } | |
| /* paragraphs */ | |
| .fud-plain { | |
| color: var(--fud-text); | |
| font-size: 15px; | |
| line-height: 1.7; | |
| margin: 0 0 12px 0; | |
| } | |
| .fud-plain:last-child { | |
| margin-bottom: 0; | |
| } | |
| .fud-meta { | |
| color: rgba(11,11,11,0.6); | |
| font-size: 13px; | |
| margin-top: 8px; | |
| } | |
| /* Tool body section */ | |
| .fud-tool-body { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 16px; | |
| margin-top: 18px; | |
| padding-top: 18px; | |
| border-top: 1px solid rgba(4,81,138,0.08); | |
| } | |
| /* File input styling */ | |
| .fud-file-input { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 14px; | |
| cursor: pointer; | |
| border: 2px dashed rgba(11,116,255,0.25); | |
| padding: 28px 24px; | |
| border-radius: var(--fud-radius); | |
| background: rgba(11,116,255,0.02); | |
| transition: all 280ms var(--fud-ease); | |
| text-align: center; | |
| } | |
| .fud-file-input:hover { | |
| border-color: var(--fud-blue); | |
| background: rgba(11,116,255,0.05); | |
| transform: translateY(-2px); | |
| box-shadow: 0 8px 24px rgba(11,116,255,0.08); | |
| } | |
| .fud-file-input input[type="file"] { | |
| display: none; | |
| } | |
| .fud-upload-icon { | |
| color: var(--fud-blue); | |
| font-size: 32px; | |
| flex-shrink: 0; | |
| opacity: 0.85; | |
| } | |
| .fud-file-choose { | |
| font-size: 15px; | |
| color: var(--fud-blue-dark); | |
| font-weight: 600; | |
| max-width: 100%; | |
| word-break: break-word; | |
| } | |
| .fud-file-hint { | |
| font-size: 13px; | |
| color: var(--fud-muted); | |
| margin-top: -6px; | |
| } | |
| /* Text input */ | |
| .fud-text-input { | |
| width: 100%; | |
| padding: 14px 18px; | |
| border: 2px solid rgba(4,81,138,0.1); | |
| border-radius: var(--fud-radius); | |
| font-size: 15px; | |
| font-family: inherit; | |
| background: rgba(11,116,255,0.02); | |
| transition: all 260ms var(--fud-ease); | |
| box-sizing: border-box; | |
| } | |
| .fud-text-input:focus { | |
| outline: none; | |
| border-color: var(--fud-blue); | |
| box-shadow: 0 0 0 4px rgba(11,116,255,0.08); | |
| } | |
| .fud-text-input::placeholder { | |
| color: var(--fud-muted); | |
| } | |
| /* Actions */ | |
| .fud-actions { | |
| display: flex; | |
| gap: 12px; | |
| align-items: center; | |
| flex-wrap: wrap; | |
| } | |
| .fud-btn { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 8px; | |
| padding: 10px 18px; | |
| border-radius: 8px; | |
| font-weight: 600; | |
| font-size: 14px; | |
| border: 0; | |
| cursor: pointer; | |
| background: transparent; | |
| transition: transform 180ms var(--fud-ease), box-shadow 180ms var(--fud-ease); | |
| } | |
| .fud-btn:disabled { | |
| opacity: 0.6; | |
| cursor: not-allowed; | |
| transform: none; | |
| } | |
| .fud-btn-primary { | |
| background: var(--fud-blue); | |
| color: #fff; | |
| box-shadow: 0 4px 14px rgba(11,116,255,0.18); | |
| } | |
| .fud-btn-primary:hover:not(:disabled) { | |
| transform: translateY(-2px); | |
| box-shadow: 0 6px 20px rgba(11,116,255,0.25); | |
| } | |
| .fud-btn-ghost { | |
| border: 1px solid rgba(4,81,138,0.12); | |
| color: var(--fud-text); | |
| background: #fff; | |
| } | |
| .fud-btn-ghost:hover:not(:disabled) { | |
| background: rgba(4,81,138,0.04); | |
| } | |
| .fud-btn-full { | |
| width: 100%; | |
| justify-content: center; | |
| } | |
| .fud-btn-icon { | |
| font-size: 16px; | |
| } | |
| /* Mini buttons for file actions */ | |
| .fud-btn-mini { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 4px; | |
| padding: 6px 10px; | |
| border-radius: 6px; | |
| font-weight: 500; | |
| font-size: 12px; | |
| border: 1px solid rgba(4,81,138,0.12); | |
| cursor: pointer; | |
| background: #fff; | |
| color: var(--fud-blue-dark); | |
| transition: all 180ms var(--fud-ease); | |
| } | |
| .fud-btn-mini:hover:not(:disabled) { | |
| background: rgba(11,116,255,0.06); | |
| border-color: var(--fud-blue); | |
| } | |
| .fud-btn-mini:disabled { | |
| opacity: 0.5; | |
| cursor: not-allowed; | |
| } | |
| .fud-btn-danger { | |
| color: #dc2626; | |
| border-color: rgba(220,38,38,0.2); | |
| } | |
| .fud-btn-danger:hover:not(:disabled) { | |
| background: rgba(220,38,38,0.06); | |
| border-color: #dc2626; | |
| } | |
| /* File ID box */ | |
| .fud-file-id-box { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| padding: 14px 16px; | |
| background: rgba(242, 194, 0, 0.08); | |
| border: 1px solid rgba(242, 194, 0, 0.25); | |
| border-radius: 8px; | |
| flex-wrap: wrap; | |
| } | |
| .fud-file-id-code { | |
| font-family: 'SF Mono', Monaco, Consolas, monospace; | |
| font-size: 13px; | |
| background: rgba(11,116,255,0.06); | |
| padding: 4px 8px; | |
| border-radius: 4px; | |
| word-break: break-all; | |
| } | |
| /* Last upload section */ | |
| .fud-last-upload { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: 14px 16px; | |
| background: rgba(11,116,255,0.04); | |
| border-radius: 8px; | |
| margin-bottom: 14px; | |
| flex-wrap: wrap; | |
| gap: 12px; | |
| } | |
| .fud-last-upload-info { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| } | |
| .fud-file-icon { | |
| color: var(--fud-blue); | |
| font-size: 20px; | |
| } | |
| .fud-last-upload-info strong { | |
| font-size: 14px; | |
| display: block; | |
| } | |
| .fud-last-upload-info .fud-meta { | |
| margin: 0; | |
| font-size: 12px; | |
| } | |
| .fud-last-upload-actions { | |
| display: flex; | |
| gap: 8px; | |
| flex-wrap: wrap; | |
| } | |
| /* Files list */ | |
| .fud-files-list { | |
| margin-top: 14px; | |
| border: 1px solid rgba(4,81,138,0.08); | |
| border-radius: 8px; | |
| max-height: 240px; | |
| overflow-y: auto; | |
| } | |
| .fud-file-item { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: 12px 14px; | |
| border-bottom: 1px solid rgba(4,81,138,0.06); | |
| gap: 12px; | |
| } | |
| .fud-file-item:last-child { | |
| border-bottom: none; | |
| } | |
| .fud-file-item-info { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| min-width: 0; | |
| } | |
| .fud-file-icon-sm { | |
| color: var(--fud-blue); | |
| font-size: 16px; | |
| flex-shrink: 0; | |
| } | |
| .fud-file-name { | |
| font-size: 14px; | |
| font-weight: 500; | |
| white-space: nowrap; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| } | |
| .fud-file-item-actions { | |
| display: flex; | |
| gap: 6px; | |
| flex-shrink: 0; | |
| } | |
| .fud-empty { | |
| padding: 20px; | |
| text-align: center; | |
| color: var(--fud-muted); | |
| font-size: 14px; | |
| } | |
| /* Status messages */ | |
| .fud-status { | |
| padding: 14px 18px; | |
| border-radius: 8px; | |
| font-size: 14px; | |
| font-weight: 500; | |
| text-align: center; | |
| background: rgba(11,116,255,0.06); | |
| color: var(--fud-blue-dark); | |
| } | |
| .fud-status-success { | |
| background: rgba(16,185,129,0.1); | |
| color: #059669; | |
| } | |
| .fud-status-error { | |
| background: rgba(239,68,68,0.1); | |
| color: #dc2626; | |
| } | |
| /* Hover micro-interaction */ | |
| .fud-card:hover { | |
| transform: translateY(-2px); | |
| transition: transform 260ms var(--fud-ease), box-shadow 260ms var(--fud-ease); | |
| box-shadow: 0 12px 30px rgba(4,81,138,0.08); | |
| } | |
| /* focus outlines for accessibility */ | |
| .fud-card :focus, | |
| .fud-btn:focus, | |
| .fud-title:focus { | |
| outline: 3px solid rgba(11,116,255,0.12); | |
| outline-offset: 3px; | |
| border-radius: 8px; | |
| } | |
| /* very small screens: full width */ | |
| @media (max-width: 500px) { | |
| .fud-main { | |
| width: 100%; | |
| max-width: 100%; | |
| padding: 0 8px; | |
| gap: 12px; | |
| } | |
| .fud-card { padding: 12px; border-radius: 6px; } | |
| .fud-title { font-size: 20px; } | |
| .fud-subtitle { font-size: 15px; } | |
| .fud-section-icon { font-size: 16px; } | |
| .fud-header { padding: 12px 16px 0 16px; } | |
| .fud-header-icon { font-size: 28px; } | |
| .fud-file-input { padding: 20px 16px; } | |
| .fud-actions { flex-direction: column; align-items: stretch; } | |
| .fud-btn { justify-content: center; } | |
| .fud-last-upload { flex-direction: column; align-items: flex-start; } | |
| .fud-file-item { flex-direction: column; align-items: flex-start; } | |
| .fud-file-item-actions { width: 100%; justify-content: flex-end; } | |
| } | |
| /* small screens */ | |
| @media (min-width: 501px) and (max-width: 640px) { | |
| .fud-main { padding: 0 12px; gap: 14px; } | |
| .fud-card { padding: 14px; border-radius: 8px; } | |
| .fud-title { font-size: 22px; } | |
| .fud-subtitle { font-size: 16px; } | |
| .fud-section-icon { font-size: 18px; } | |
| } | |
| /* larger screens */ | |
| @media (min-width: 1100px) { | |
| .fud-main { | |
| width: 90%; | |
| max-width: 96%; | |
| gap: 22px; | |
| } | |
| } | |
| /* keyframes */ | |
| @keyframes fud-card-appear { | |
| from { opacity: 0; transform: translateY(8px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| @keyframes fud-icon-pop { | |
| from { transform: scale(.95) translateY(6px); opacity: 0; } | |
| to { transform: scale(1) translateY(0); opacity: 1; } | |
| } | |
| /* ========== DRAG AND DROP OVERLAY ========== */ | |
| .fud-drag-overlay { | |
| position: fixed; | |
| inset: 0; | |
| z-index: 9999; | |
| background: linear-gradient(135deg, #e0f4ff 0%, #87ceeb 40%, #b0e0e6 70%, #fffde7 100%); | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 0; | |
| opacity: 0; | |
| visibility: hidden; | |
| transition: opacity 0.3s ease, visibility 0.3s ease; | |
| pointer-events: none; | |
| overflow: hidden; | |
| } | |
| /* Animated background circles */ | |
| .fud-drag-overlay::before, | |
| .fud-drag-overlay::after { | |
| content: ''; | |
| position: absolute; | |
| border-radius: 50%; | |
| opacity: 0.4; | |
| animation: fud-circle-float 4s ease-in-out infinite; | |
| } | |
| .fud-drag-overlay::before { | |
| width: 300px; | |
| height: 300px; | |
| background: radial-gradient(circle, #f2c200 0%, transparent 70%); | |
| top: -80px; | |
| right: -80px; | |
| animation-delay: 0s; | |
| } | |
| .fud-drag-overlay::after { | |
| width: 250px; | |
| height: 250px; | |
| background: radial-gradient(circle, #87ceeb 0%, transparent 70%); | |
| bottom: -60px; | |
| left: -60px; | |
| animation-delay: 2s; | |
| } | |
| .fud-page-container.fud-dragging .fud-drag-overlay { | |
| opacity: 1; | |
| visibility: visible; | |
| } | |
| /* Main drop zone container */ | |
| .fud-drop-zone { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| padding: 50px 60px; | |
| background: rgba(255, 255, 255, 0.85); | |
| border: 3px dashed #87ceeb; | |
| border-radius: 24px; | |
| box-shadow: | |
| 0 20px 60px rgba(135, 206, 235, 0.3), | |
| 0 0 0 8px rgba(135, 206, 235, 0.15), | |
| inset 0 2px 20px rgba(255, 255, 255, 0.8); | |
| position: relative; | |
| z-index: 1; | |
| animation: fud-zone-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; | |
| max-width: 90%; | |
| } | |
| /* Icon container with glow */ | |
| .fud-drag-icon-wrapper { | |
| position: relative; | |
| margin-bottom: 20px; | |
| } | |
| .fud-drag-overlay-icon { | |
| font-size: 80px; | |
| color: #0b74ff; | |
| animation: fud-icon-float 2s ease-in-out infinite; | |
| filter: drop-shadow(0 8px 20px rgba(11, 116, 255, 0.35)); | |
| position: relative; | |
| z-index: 2; | |
| } | |
| /* Glowing ring behind icon */ | |
| .fud-icon-glow { | |
| position: absolute; | |
| width: 120px; | |
| height: 120px; | |
| background: radial-gradient(circle, rgba(242, 194, 0, 0.4) 0%, transparent 70%); | |
| border-radius: 50%; | |
| top: 50%; | |
| left: 50%; | |
| transform: translate(-50%, -50%); | |
| animation: fud-glow-pulse 2s ease-in-out infinite; | |
| z-index: 1; | |
| } | |
| /* Secondary decorative icons */ | |
| .fud-drag-decorations { | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| pointer-events: none; | |
| } | |
| .fud-decor-icon { | |
| position: absolute; | |
| opacity: 0.6; | |
| animation: fud-decor-float 3s ease-in-out infinite; | |
| } | |
| .fud-decor-icon:nth-child(1) { | |
| top: 15%; | |
| left: 10%; | |
| font-size: 32px; | |
| color: #f2c200; | |
| animation-delay: 0s; | |
| } | |
| .fud-decor-icon:nth-child(2) { | |
| top: 20%; | |
| right: 12%; | |
| font-size: 28px; | |
| color: #87ceeb; | |
| animation-delay: 0.5s; | |
| } | |
| .fud-decor-icon:nth-child(3) { | |
| bottom: 18%; | |
| left: 15%; | |
| font-size: 26px; | |
| color: #0b74ff; | |
| animation-delay: 1s; | |
| } | |
| .fud-decor-icon:nth-child(4) { | |
| bottom: 15%; | |
| right: 10%; | |
| font-size: 30px; | |
| color: #f2c200; | |
| animation-delay: 1.5s; | |
| } | |
| .fud-drag-overlay-text { | |
| font-size: 32px; | |
| font-weight: 800; | |
| color: #0b0b0b; | |
| letter-spacing: -0.5px; | |
| margin-bottom: 8px; | |
| text-align: center; | |
| } | |
| .fud-drag-overlay-hint { | |
| font-size: 15px; | |
| color: #555; | |
| font-weight: 500; | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| } | |
| .fud-drag-overlay-hint svg { | |
| color: #f2c200; | |
| } | |
| /* File type badges */ | |
| .fud-file-badges { | |
| display: flex; | |
| gap: 10px; | |
| margin-top: 20px; | |
| } | |
| .fud-file-badge { | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| padding: 8px 16px; | |
| background: linear-gradient(135deg, #87ceeb, #b0e0e6); | |
| border-radius: 20px; | |
| font-size: 13px; | |
| font-weight: 600; | |
| color: #0b0b0b; | |
| box-shadow: 0 4px 12px rgba(135, 206, 235, 0.4); | |
| } | |
| .fud-file-badge svg { | |
| font-size: 16px; | |
| color: #0b74ff; | |
| } | |
| /* Animations */ | |
| @keyframes fud-zone-pop { | |
| 0% { | |
| opacity: 0; | |
| transform: scale(0.8); | |
| } | |
| 100% { | |
| opacity: 1; | |
| transform: scale(1); | |
| } | |
| } | |
| @keyframes fud-icon-float { | |
| 0%, 100% { | |
| transform: translateY(0); | |
| } | |
| 50% { | |
| transform: translateY(-15px); | |
| } | |
| } | |
| @keyframes fud-glow-pulse { | |
| 0%, 100% { | |
| transform: translate(-50%, -50%) scale(1); | |
| opacity: 0.4; | |
| } | |
| 50% { | |
| transform: translate(-50%, -50%) scale(1.3); | |
| opacity: 0.7; | |
| } | |
| } | |
| @keyframes fud-circle-float { | |
| 0%, 100% { | |
| transform: translate(0, 0) scale(1); | |
| } | |
| 50% { | |
| transform: translate(20px, 20px) scale(1.1); | |
| } | |
| } | |
| @keyframes fud-decor-float { | |
| 0%, 100% { | |
| transform: translateY(0) rotate(0deg); | |
| opacity: 0.6; | |
| } | |
| 50% { | |
| transform: translateY(-10px) rotate(10deg); | |
| opacity: 0.9; | |
| } | |
| } | |
| /* Add border highlight effect to input area when dragging */ | |
| .fud-page-container.fud-dragging .fud-file-input { | |
| border-color: #87ceeb; | |
| background: rgba(135, 206, 235, 0.1); | |
| } | |
| /* mobile responsive overlay */ | |
| @media (max-width: 600px) { | |
| .fud-drop-zone { | |
| padding: 35px 30px; | |
| border-radius: 18px; | |
| } | |
| .fud-drag-overlay-icon { | |
| font-size: 60px; | |
| } | |
| .fud-icon-glow { | |
| width: 90px; | |
| height: 90px; | |
| } | |
| .fud-drag-overlay-text { | |
| font-size: 24px; | |
| } | |
| .fud-drag-overlay-hint { | |
| font-size: 13px; | |
| } | |
| .fud-file-badges { | |
| flex-direction: column; | |
| gap: 8px; | |
| } | |
| .fud-file-badge { | |
| padding: 6px 14px; | |
| font-size: 12px; | |
| } | |
| .fud-decor-icon { | |
| font-size: 20px ; | |
| } | |
| .fud-drag-overlay::before { | |
| width: 200px; | |
| height: 200px; | |
| } | |
| .fud-drag-overlay::after { | |
| width: 180px; | |
| height: 180px; | |
| } | |
| } | |
| /* ========== TOAST NOTIFICATION ========== */ | |
| .fud-toast { | |
| position: fixed; | |
| top: 20px; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| z-index: 9999; | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| padding: 14px 20px; | |
| border-radius: 12px; | |
| background: #fff; | |
| box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18), 0 2px 8px rgba(0, 0, 0, 0.08); | |
| min-width: 280px; | |
| max-width: 90vw; | |
| animation: fud-toast-slide-in 0.4s var(--fud-ease); | |
| border: 1px solid rgba(0, 0, 0, 0.08); | |
| } | |
| @keyframes fud-toast-slide-in { | |
| from { | |
| opacity: 0; | |
| transform: translateX(-50%) translateY(-20px) scale(0.95); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateX(-50%) translateY(0) scale(1); | |
| } | |
| } | |
| .fud-toast-icon { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| width: 28px; | |
| height: 28px; | |
| border-radius: 50%; | |
| font-size: 16px; | |
| flex-shrink: 0; | |
| } | |
| .fud-toast-message { | |
| flex: 1; | |
| font-size: 14px; | |
| font-weight: 500; | |
| line-height: 1.4; | |
| color: #1f2937; | |
| } | |
| .fud-toast-close { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| width: 28px; | |
| height: 28px; | |
| border: none; | |
| background: transparent; | |
| color: #6b7280; | |
| cursor: pointer; | |
| border-radius: 6px; | |
| transition: all 0.2s ease; | |
| flex-shrink: 0; | |
| } | |
| .fud-toast-close:hover { | |
| background: rgba(0, 0, 0, 0.05); | |
| color: #374151; | |
| } | |
| /* Toast type variants */ | |
| .fud-toast-success { | |
| border-left: 4px solid #22c55e; | |
| } | |
| .fud-toast-success .fud-toast-icon { | |
| background: rgba(34, 197, 94, 0.15); | |
| color: #16a34a; | |
| } | |
| .fud-toast-error { | |
| border-left: 4px solid #ef4444; | |
| } | |
| .fud-toast-error .fud-toast-icon { | |
| background: rgba(239, 68, 68, 0.15); | |
| color: #dc2626; | |
| } | |
| .fud-toast-info { | |
| border-left: 4px solid var(--fud-blue); | |
| } | |
| .fud-toast-info .fud-toast-icon { | |
| background: rgba(11, 116, 255, 0.15); | |
| color: var(--fud-blue); | |
| } | |
| /* Toast responsive */ | |
| @media (max-width: 600px) { | |
| .fud-toast { | |
| top: 12px; | |
| left: 12px; | |
| right: 12px; | |
| transform: none; | |
| min-width: auto; | |
| max-width: none; | |
| padding: 12px 16px; | |
| } | |
| @keyframes fud-toast-slide-in { | |
| from { | |
| opacity: 0; | |
| transform: translateY(-20px) scale(0.95); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0) scale(1); | |
| } | |
| } | |
| .fud-toast-message { | |
| font-size: 13px; | |
| } | |
| } | |