diff --git a/style.css b/style.css deleted file mode 100644 index b0c1935..0000000 --- a/style.css +++ /dev/null @@ -1,699 +0,0 @@ -/* Root variables for light theme */ -:root { - --primary: #f5f5f5; - --primary-hover: #e0e0e0; - --background: #ffffff; - --surface: #fafafa; - --border: #eaeaea; - --text: #1a1a1a; - --text-secondary: #666666; - --shadow: rgba(0, 0, 0, 0.08); - --modal-backdrop: rgba(0, 0, 0, 0.5); - --scrollbar-thumb: #e0e0e0; - --scrollbar-track: #f5f5f5; - --modal-background: #ffffff; -} - -/* Dark theme variables */ -[data-theme="dark"] { - --primary: #1a1a1a; - --primary-hover: #2a2a2a; - --background: #000000; - --surface: #111111; - --border: #333333; - --text: #ffffff; - --text-secondary: #999999; - --shadow: rgba(0, 0, 0, 0.3); - --modal-backdrop: rgba(255, 255, 255, 0.1); - --scrollbar-thumb: #333333; - --scrollbar-track: #1a1a1a; - --modal-background: #1a1a1a; -} - -/* Dark theme button styles */ -[data-theme="dark"] .btn-primary { - background: var(--primary-hover); - color: var(--text); -} - -[data-theme="dark"] .btn-primary:hover { - background: #3a3a3a; -} - -/* Global styles */ -* { - margin: 0; - padding: 0; - box-sizing: border-box; - font-family: 'Inter', -apple-system, sans-serif; -} - -body { - background: var(--background); - color: var(--text); - min-height: 100vh; -} - -.hidden { - display: none !important; -} - -/* Modal styles */ -.modal { - position: fixed; - inset: 0; - display: flex; - align-items: center; - justify-content: center; - z-index: 1000; - opacity: 0; - visibility: hidden; - transition: all 0.3s ease; - background: var(--modal-backdrop); -} - -.modal-actions { - display: flex; - gap: 1rem; - margin-top: 1rem; -} - -.modal-actions button { - flex: 1; -} - -.modal.active { - opacity: 1; - visibility: visible; -} - -.modal-content { - background: var(--modal-background); - border-radius: 24px; - padding: 2rem; - width: 90%; - max-width: 480px; - transform: translateY(20px); - opacity: 0; - transition: all 0.3s ease; - box-shadow: 0 10px 25px var(--shadow); -} - -/* Modal animations */ -@keyframes slideIn { - from { - opacity: 0; - transform: translateY(20px); - } - to { - opacity: 1; - transform: translateY(0); - } -} - -.modal.active .modal-content { - transform: translateY(0); - opacity: 1; - animation: modalSlideIn 0.3s ease forwards; -} - -@keyframes modalSlideIn { - from { - opacity: 0; - transform: translateY(20px); - } - to { - opacity: 1; - transform: translateY(0); - } -} - -/* Form element styles */ -select { - width: 100%; - padding: 0.75rem 1rem; - border: 2px solid var(--border); - border-radius: 12px; - background: var(--surface); - color: var(--text); - font-size: 1rem; - cursor: pointer; - appearance: none; - background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23666666%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.4-12.8z%22%2F%3E%3C%2Fsvg%3E"); - background-repeat: no-repeat; - background-position: right 1rem center; - background-size: 0.65em auto; -} - -select:focus { - outline: none; - border-color: var(--text); -} - -/* Step styles */ -.step h2 { - font-size: 1.75rem; - margin-bottom: 1rem; - font-weight: 700; -} - -.step p { - color: var(--text-secondary); - margin-bottom: 2rem; -} - -.input-group { - margin-bottom: 1.5rem; -} - -input[type="text"] { - width: 100%; - padding: 1rem; - border: 2px solid var(--border); - border-radius: 12px; - background: var(--surface); - color: var(--text); - font-size: 1rem; -} - -input[type="text"]:focus { - outline: none; - border-color: var(--text); -} - -/* Main content styles */ -.center-container { - min-height: 100vh; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - gap: 3rem; - padding: 2rem; - position: relative; -} - -#greeting { - font-size: 2rem; - font-weight: 700; - margin: 0; - opacity: 0; - animation: fadeIn 0.5s ease forwards; - height: 48px; - visibility: hidden; -} - -#greeting:not([style*="visibility"]) { - visibility: visible; -} - -.search-container { - width: 100%; - max-width: 640px; - height: 56px; - visibility: visible; -} - -/* Search engine options */ -.search-engine-options { - display: grid; - grid-template-columns: repeat(3, 1fr); - gap: 1rem; - margin: 2rem 0; -} - -.search-engine-option { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - gap: 0.5rem; - padding: 1.5rem; - border-radius: 16px; - background: var(--surface); - cursor: pointer; - transition: all 0.2s ease; - box-shadow: 0 2px 8px var(--shadow); - border: 2px solid transparent; - width: 100%; - height: 100%; - box-sizing: border-box; -} - -.search-engine-option:hover { - transform: translateY(-2px); - box-shadow: 0 4px 12px var(--shadow); -} - -.search-engine-option.selected { - background: var(--surface); - border: 2px solid var(--border); -} - -.search-engine-option img { - width: 32px; - height: 32px; - border-radius: 4px; -} - -.search-engine-option span { - font-size: 0.875rem; - color: var(--text); - text-align: center; -} - -/* Search bar styles */ -.search-wrapper { - position: relative; -} - -#search-bar { - width: 100%; - padding: 1.25rem 1.5rem; - border: none; - border-radius: 16px; - background: var(--surface); - color: var(--text); - font-size: 1rem; - box-shadow: 0 4px 24px var(--shadow); -} - -.search-icon { - position: absolute; - right: 1.5rem; - top: 50%; - transform: translateY(-50%); - background: none; - border: none; - color: var(--text); - cursor: pointer; - padding: 0.5rem; -} - -/* Shortcuts styles */ -.shortcuts-container { - width: 100%; - max-width: 640px; -} - -#add-shortcut { - width: 40px; - height: 40px; - border-radius: 50%; - padding: 0; - display: flex; - align-items: center; - justify-content: center; - margin: 0 auto; - background: var(--primary); - color: var(--text); - border: none; - cursor: pointer; - transition: background 0.2s ease; -} - -#add-shortcut:hover { - background: var(--primary-hover); -} - -#shortcuts-grid { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); - gap: 1rem; - margin-bottom: 1.5rem; -} - -.shortcut { - background: var(--surface); - border-radius: 12px; - padding: 1rem; - cursor: pointer; - transition: all 0.2s ease; - display: flex; - flex-direction: column; - align-items: center; - gap: 0.5rem; - box-shadow: 0 2px 10px var(--shadow); -} - -.shortcut:hover { - transform: translateY(-2px); - box-shadow: 0 4px 15px var(--shadow); -} - -.shortcut img { - width: 24px; - height: 24px; - border-radius: 6px; -} - -.shortcut span { - font-size: 0.75rem; - text-align: center; - color: var(--text-secondary); - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - max-width: 100%; -} - -.shortcut.blurred { - filter: blur(4px); - opacity: 0.7; -} - -.shortcut.blurred:hover { - filter: blur(0); - opacity: 1; -} - -/* Settings styles */ -.settings-button { - position: fixed; - bottom: 2rem; - right: 2rem; - width: 48px; - height: 48px; - border-radius: 50%; - background: var(--surface); - border: none; - cursor: pointer; - display: flex; - align-items: center; - justify-content: center; - font-size: 1.25rem; - color: var(--text); - box-shadow: 0 4px 24px var(--shadow); -} - -.settings-button:hover { - transform: translateY(-2px); - box-shadow: 0 8px 32px var(--shadow); -} - -.settings-panel { - max-height: 80vh; - overflow-y: auto; - scrollbar-width: thin; - scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); -} - -.settings-panel::-webkit-scrollbar { - width: 8px; -} - -.settings-panel::-webkit-scrollbar-track { - background: var(--scrollbar-track); - border-radius: 0 24px 24px 0; -} - -.settings-panel::-webkit-scrollbar-thumb { - background-color: var(--scrollbar-thumb); - border-radius: 4px; -} - -.modal-header { - display: flex; - align-items: center; - justify-content: space-between; - margin-bottom: 2rem; -} - -.modal-header h2 { - font-size: 1.5rem; - font-weight: 600; -} - -.btn-icon { - background: none; - border: none; - color: var(--text); - cursor: pointer; - padding: 0.5rem; - font-size: 1.25rem; - opacity: 0.6; -} - -.btn-icon:hover { - opacity: 1; -} - -.settings-section { - padding: 1.5rem 0; - border-bottom: 1px solid var(--border); -} - -.settings-section:last-child { - border-bottom: none; -} - -.settings-section h3 { - margin-bottom: 1.5rem; - font-weight: 600; -} - -.setting-item { - display: flex; - align-items: center; - justify-content: space-between; - padding: 0.75rem 0; -} - -.setting-label { - font-weight: 500; -} - -.data-management-buttons { - display: flex; - flex-direction: column; - gap: 1rem; -} - -.btn-danger { - background: #dc3545 !important; - color: white !important; -} - -.btn-danger:hover { - background: #c82333 !important; -} - -/* Toggle switch styles */ -.toggle { - position: relative; - display: inline-block; - width: 50px; - height: 26px; -} - -.toggle input { - opacity: 0; - width: 0; - height: 0; -} - -.toggle-slider { - position: absolute; - cursor: pointer; - top: 0; - left: 0; - right: 0; - bottom: 0; - background-color: var(--border); - border-radius: 34px; -} - -.toggle-slider:before { - position: absolute; - content: ""; - height: 20px; - width: 20px; - left: 3px; - bottom: 3px; - background-color: var(--background); - border-radius: 50%; -} - -input:checked + .toggle-slider { - background-color: var(--text); -} - -input:checked + .toggle-slider:before { - transform: translateX(24px); -} - -/* Button styles */ -.btn-primary { - background: var(--primary); - color: var(--text); - border: none; - padding: 1rem 2rem; - border-radius: 12px; - font-size: 1rem; - font-weight: 500; - cursor: pointer; - transition: all 0.2s ease; - width: 100%; -} - -.btn-primary:hover { - background: var(--primary-hover); -} - -/* Notification styles */ -#notification-container { - position: fixed; - top: 1.5rem; - right: 1.5rem; - z-index: 1000; - display: flex; - flex-direction: column; - gap: 1rem; - pointer-events: none; -} - -.notification { - background: var(--surface); - color: var(--text); - padding: 1.25rem 1.5rem; - border-radius: 16px; - box-shadow: 0 8px 32px rgba(var(--shadow-rgb), 0.1); - display: flex; - align-items: center; - gap: 1.25rem; - pointer-events: auto; - position: relative; - overflow: hidden; - animation: slideInRight 0.4s cubic-bezier(0.16, 1, 0.3, 1), fadeIn 0.4s ease; - max-width: 420px; - border: 1px solid rgba(var(--text-rgb), 0.1); -} - -.notification-content { - flex: 1; - font-size: 0.95rem; - line-height: 1.5; -} - -.notification-close { - background: none; - border: none; - color: var(--text); - cursor: pointer; - padding: 0.5rem; - opacity: 0.6; -} - -.notification-close:hover { - opacity: 1; - background: rgba(var(--text-rgb), 0.1); -} - -.notification-progress { - position: absolute; - bottom: 0; - left: 0; - height: 3px; - background: var(--primary); - opacity: 0.8; - transition: width 0.1s linear; -} - -@keyframes slideInRight { - from { - opacity: 0; - transform: translateX(100%); - } - to { - opacity: 1; - transform: translateX(0); - } -} - -/* About section styles */ -.about-content { - text-align: center; - color: var(--text-secondary); - padding: 1rem 0; -} - -.about-content a { - color: var(--text); - text-decoration: none; -} - -.about-content a:hover { - text-decoration: underline; -} - -.about-content .version { - font-size: 1.1rem; - font-weight: 600; - color: var(--text); - margin-bottom: 0.5rem; -} - -.about-content .description { - margin-bottom: 1rem; -} - -.about-content .features { - font-size: 0.9rem; - margin-bottom: 1rem; -} - -.about-content .copyright { - font-size: 0.8rem; - margin-top: 1rem; -} - -.made-with { - margin-top: 0.5rem; - font-size: 0.875rem; -} - -.made-with i { - color: #ff6b6b; -} - -/* Context menu styles */ -.context-menu { - position: fixed; - background: var(--surface); - border-radius: 8px; - padding: 0.5rem; - box-shadow: 0 2px 10px var(--shadow); - z-index: 1000; -} - -.context-menu.hidden { - display: none; -} - -.context-menu-item { - padding: 0.75rem 1rem; - cursor: pointer; - display: flex; - align-items: center; - gap: 0.5rem; - border-radius: 4px; -} - -.context-menu-item:hover { - background: var(--primary); -} - -.context-menu-item i { - width: 16px; -} - -/* Hidden element styles */ -.search-container.hidden, -#greeting.hidden, -#shortcuts-grid.hidden, -#add-shortcut.hidden { - visibility: hidden !important; - opacity: 0 !important; - position: absolute !important; - pointer-events: none !important; -} \ No newline at end of file