diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..7a73a41 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,2 @@ +{ +} \ No newline at end of file diff --git a/_locales/de/messages.json b/_locales/de/messages.json index 7a8b83f..cc9ebbd 100644 --- a/_locales/de/messages.json +++ b/_locales/de/messages.json @@ -105,7 +105,7 @@ "message": "Zu Ausnahmen hinzufügen" }, "remove_exception": { - "message": "Aus Ausnahmen entfernen" + "message": "Aktuelle entfernen" }, "manage_exceptions": { "message": "Verwalten" @@ -121,5 +121,35 @@ }, "remove": { "message": "Entfernen" + }, + "tab_lists": { + "message": "Listen" + }, + "tab_words": { + "message": "Wörter" + }, + "tab_exceptions": { + "message": "Ausnahmen" + }, + "no_exceptions": { + "message": "Keine Ausnahmen" + }, + "toggle_highlighting_title": { + "message": "Hervorhebung umschalten" + }, + "toggle_dark_mode_title": { + "message": "Dunkelmodus umschalten" + }, + "select_title": { + "message": "Auswählen" + }, + "word_placeholder": { + "message": "Wort oder Phrase" + }, + "background_color_title": { + "message": "Hintergrundfarbe" + }, + "text_color_title": { + "message": "Textfarbe" } } \ No newline at end of file diff --git a/_locales/en/messages.json b/_locales/en/messages.json index f0da996..c473afb 100644 --- a/_locales/en/messages.json +++ b/_locales/en/messages.json @@ -111,7 +111,7 @@ "message": "Add to Exceptions" }, "remove_exception": { - "message": "Remove from Exceptions" + "message": "Remove current" }, "manage_exceptions": { "message": "Manage" @@ -127,5 +127,35 @@ }, "remove": { "message": "Remove" + }, + "tab_lists": { + "message": "Lists" + }, + "tab_words": { + "message": "Words" + }, + "tab_exceptions": { + "message": "Exceptions" + }, + "no_exceptions": { + "message": "No exceptions" + }, + "toggle_highlighting_title": { + "message": "Toggle highlighting" + }, + "toggle_dark_mode_title": { + "message": "Toggle dark mode" + }, + "select_title": { + "message": "Select" + }, + "word_placeholder": { + "message": "Word or phrase" + }, + "background_color_title": { + "message": "Background color" + }, + "text_color_title": { + "message": "Text color" } } \ No newline at end of file diff --git a/_locales/es/messages.json b/_locales/es/messages.json index d2c827d..dbe49df 100644 --- a/_locales/es/messages.json +++ b/_locales/es/messages.json @@ -111,7 +111,7 @@ "message": "Agregar a excepciones" }, "remove_exception": { - "message": "Quitar de excepciones" + "message": "Eliminar actual" }, "manage_exceptions": { "message": "Gestionar" @@ -127,5 +127,35 @@ }, "remove": { "message": "Eliminar" + }, + "tab_lists": { + "message": "Listas" + }, + "tab_words": { + "message": "Palabras" + }, + "tab_exceptions": { + "message": "Excepciones" + }, + "no_exceptions": { + "message": "Sin excepciones" + }, + "toggle_highlighting_title": { + "message": "Alternar resaltado" + }, + "toggle_dark_mode_title": { + "message": "Alternar modo oscuro" + }, + "select_title": { + "message": "Seleccionar" + }, + "word_placeholder": { + "message": "Palabra o frase" + }, + "background_color_title": { + "message": "Color de fondo" + }, + "text_color_title": { + "message": "Color de texto" } } \ No newline at end of file diff --git a/_locales/fr/messages.json b/_locales/fr/messages.json index f96fa47..396818c 100644 --- a/_locales/fr/messages.json +++ b/_locales/fr/messages.json @@ -111,7 +111,7 @@ "message": "Ajouter aux exceptions" }, "remove_exception": { - "message": "Retirer des exceptions" + "message": "Supprimer l'actuel" }, "manage_exceptions": { "message": "Gérer" @@ -127,5 +127,35 @@ }, "remove": { "message": "Supprimer" + }, + "tab_lists": { + "message": "Listes" + }, + "tab_words": { + "message": "Mots" + }, + "tab_exceptions": { + "message": "Exceptions" + }, + "no_exceptions": { + "message": "Aucune exception" + }, + "toggle_highlighting_title": { + "message": "Activer/désactiver la surbrillance" + }, + "toggle_dark_mode_title": { + "message": "Activer/désactiver le mode sombre" + }, + "select_title": { + "message": "Sélectionner" + }, + "word_placeholder": { + "message": "Mot ou phrase" + }, + "background_color_title": { + "message": "Couleur d'arrière-plan" + }, + "text_color_title": { + "message": "Couleur du texte" } } \ No newline at end of file diff --git a/_locales/hi/messages.json b/_locales/hi/messages.json index 9d1e7a8..afd1d2f 100644 --- a/_locales/hi/messages.json +++ b/_locales/hi/messages.json @@ -111,7 +111,7 @@ "message": "अपवादों में जोड़ें" }, "remove_exception": { - "message": "अपवादों से हटाएं" + "message": "वर्तमान हटाएं" }, "manage_exceptions": { "message": "प्रबंधित करें" @@ -127,5 +127,35 @@ }, "remove": { "message": "हटाएं" + }, + "tab_lists": { + "message": "सूचियाँ" + }, + "tab_words": { + "message": "शब्द" + }, + "tab_exceptions": { + "message": "अपवाद" + }, + "no_exceptions": { + "message": "कोई अपवाद नहीं" + }, + "toggle_highlighting_title": { + "message": "हाइलाइटिंग टॉगल करें" + }, + "toggle_dark_mode_title": { + "message": "डार्क मोड टॉगल करें" + }, + "select_title": { + "message": "चुनें" + }, + "word_placeholder": { + "message": "शब्द या वाक्यांश" + }, + "background_color_title": { + "message": "पृष्ठभूमि रंग" + }, + "text_color_title": { + "message": "पाठ रंग" } } \ No newline at end of file diff --git a/_locales/it/messages.json b/_locales/it/messages.json index 9685477..c8ec88a 100644 --- a/_locales/it/messages.json +++ b/_locales/it/messages.json @@ -111,7 +111,7 @@ "message": "Aggiungi alle eccezioni" }, "remove_exception": { - "message": "Rimuovi dalle eccezioni" + "message": "Rimuovi corrente" }, "manage_exceptions": { "message": "Gestisci" @@ -127,5 +127,35 @@ }, "remove": { "message": "Rimuovi" + }, + "tab_lists": { + "message": "Elenchi" + }, + "tab_words": { + "message": "Parole" + }, + "tab_exceptions": { + "message": "Eccezioni" + }, + "no_exceptions": { + "message": "Nessuna eccezione" + }, + "toggle_highlighting_title": { + "message": "Attiva/disattiva evidenziazione" + }, + "toggle_dark_mode_title": { + "message": "Attiva/disattiva modalità scura" + }, + "select_title": { + "message": "Seleziona" + }, + "word_placeholder": { + "message": "Parola o frase" + }, + "background_color_title": { + "message": "Colore di sfondo" + }, + "text_color_title": { + "message": "Colore del testo" } } \ No newline at end of file diff --git a/_locales/ja/messages.json b/_locales/ja/messages.json index f82a390..1db8a45 100644 --- a/_locales/ja/messages.json +++ b/_locales/ja/messages.json @@ -111,7 +111,7 @@ "message": "例外に追加" }, "remove_exception": { - "message": "例外から削除" + "message": "現在を削除" }, "manage_exceptions": { "message": "管理" @@ -127,5 +127,35 @@ }, "remove": { "message": "削除" + }, + "tab_lists": { + "message": "リスト" + }, + "tab_words": { + "message": "単語" + }, + "tab_exceptions": { + "message": "例外" + }, + "no_exceptions": { + "message": "例外なし" + }, + "toggle_highlighting_title": { + "message": "ハイライトの切り替え" + }, + "toggle_dark_mode_title": { + "message": "ダークモードの切り替え" + }, + "select_title": { + "message": "選択" + }, + "word_placeholder": { + "message": "単語またはフレーズ" + }, + "background_color_title": { + "message": "背景色" + }, + "text_color_title": { + "message": "文字色" } } \ No newline at end of file diff --git a/_locales/ko/messages.json b/_locales/ko/messages.json index 666b0ca..0cdfc45 100644 --- a/_locales/ko/messages.json +++ b/_locales/ko/messages.json @@ -111,7 +111,7 @@ "message": "예외에 추가" }, "remove_exception": { - "message": "예외에서 제거" + "message": "현재 제거" }, "manage_exceptions": { "message": "관리" @@ -127,5 +127,35 @@ }, "remove": { "message": "제거" + }, + "tab_lists": { + "message": "리스트" + }, + "tab_words": { + "message": "단어" + }, + "tab_exceptions": { + "message": "예외" + }, + "no_exceptions": { + "message": "예외 없음" + }, + "toggle_highlighting_title": { + "message": "하이라이트 전환" + }, + "toggle_dark_mode_title": { + "message": "다크 모드 전환" + }, + "select_title": { + "message": "선택" + }, + "word_placeholder": { + "message": "단어 또는 구문" + }, + "background_color_title": { + "message": "배경색" + }, + "text_color_title": { + "message": "글자색" } } \ No newline at end of file diff --git a/_locales/nl/messages.json b/_locales/nl/messages.json index 236b844..b02a1ff 100644 --- a/_locales/nl/messages.json +++ b/_locales/nl/messages.json @@ -111,7 +111,7 @@ "message": "Toevoegen aan uitzonderingen" }, "remove_exception": { - "message": "Verwijderen uit uitzonderingen" + "message": "Huidige verwijderen" }, "manage_exceptions": { "message": "Beheren" @@ -127,5 +127,35 @@ }, "remove": { "message": "Verwijderen" + }, + "tab_lists": { + "message": "Lijsten" + }, + "tab_words": { + "message": "Woorden" + }, + "tab_exceptions": { + "message": "Uitzonderingen" + }, + "no_exceptions": { + "message": "Geen uitzonderingen" + }, + "toggle_highlighting_title": { + "message": "Markeren in-/uitschakelen" + }, + "toggle_dark_mode_title": { + "message": "Donkere modus in-/uitschakelen" + }, + "select_title": { + "message": "Selecteren" + }, + "word_placeholder": { + "message": "Woord of zin" + }, + "background_color_title": { + "message": "Achtergrondkleur" + }, + "text_color_title": { + "message": "Tekstkleur" } } \ No newline at end of file diff --git a/_locales/pl/messages.json b/_locales/pl/messages.json index bdb0f93..8b52c19 100644 --- a/_locales/pl/messages.json +++ b/_locales/pl/messages.json @@ -111,7 +111,7 @@ "message": "Dodaj do wyjątków" }, "remove_exception": { - "message": "Usuń z wyjątków" + "message": "Usuń bieżący" }, "manage_exceptions": { "message": "Zarządzaj" @@ -127,5 +127,35 @@ }, "remove": { "message": "Usuń" + }, + "tab_lists": { + "message": "Listy" + }, + "tab_words": { + "message": "Słowa" + }, + "tab_exceptions": { + "message": "Wyjątki" + }, + "no_exceptions": { + "message": "Brak wyjątków" + }, + "toggle_highlighting_title": { + "message": "Przełącz podświetlanie" + }, + "toggle_dark_mode_title": { + "message": "Przełącz tryb ciemny" + }, + "select_title": { + "message": "Zaznacz" + }, + "word_placeholder": { + "message": "Słowo lub fraza" + }, + "background_color_title": { + "message": "Kolor tła" + }, + "text_color_title": { + "message": "Kolor tekstu" } } \ No newline at end of file diff --git a/_locales/pt_BR/messages.json b/_locales/pt_BR/messages.json index 952cd9b..58660e0 100644 --- a/_locales/pt_BR/messages.json +++ b/_locales/pt_BR/messages.json @@ -105,7 +105,7 @@ "message": "Adicionar às exceções" }, "remove_exception": { - "message": "Remover das exceções" + "message": "Remover atual" }, "manage_exceptions": { "message": "Gerenciar" @@ -121,5 +121,35 @@ }, "remove": { "message": "Remover" + }, + "tab_lists": { + "message": "Listas" + }, + "tab_words": { + "message": "Palavras" + }, + "tab_exceptions": { + "message": "Exceções" + }, + "no_exceptions": { + "message": "Sem exceções" + }, + "toggle_highlighting_title": { + "message": "Alternar destaque" + }, + "toggle_dark_mode_title": { + "message": "Alternar modo escuro" + }, + "select_title": { + "message": "Selecionar" + }, + "word_placeholder": { + "message": "Palavra ou frase" + }, + "background_color_title": { + "message": "Cor de fundo" + }, + "text_color_title": { + "message": "Cor do texto" } } \ No newline at end of file diff --git a/_locales/ru/messages.json b/_locales/ru/messages.json index a97eb04..adf6014 100644 --- a/_locales/ru/messages.json +++ b/_locales/ru/messages.json @@ -127,5 +127,35 @@ }, "remove": { "message": "Удалить" + }, + "tab_lists": { + "message": "Списки" + }, + "tab_words": { + "message": "Слова" + }, + "tab_exceptions": { + "message": "Исключения" + }, + "no_exceptions": { + "message": "Нет исключений" + }, + "toggle_highlighting_title": { + "message": "Выделение(вкл/выкл)" + }, + "toggle_dark_mode_title": { + "message": "Темная/светлая тема" + }, + "select_title": { + "message": "Выбрать" + }, + "word_placeholder": { + "message": "Слово или фраза" + }, + "background_color_title": { + "message": "Цвет фона" + }, + "text_color_title": { + "message": "Цвет текста" } } \ No newline at end of file diff --git a/_locales/tr/messages.json b/_locales/tr/messages.json index fe06801..a5566b4 100644 --- a/_locales/tr/messages.json +++ b/_locales/tr/messages.json @@ -111,7 +111,7 @@ "message": "İstisnalara Ekle" }, "remove_exception": { - "message": "İstisnalardan Çıkar" + "message": "Mevcut olanı kaldır" }, "manage_exceptions": { "message": "Yönet" @@ -127,5 +127,35 @@ }, "remove": { "message": "Kaldır" + }, + "tab_lists": { + "message": "Listeler" + }, + "tab_words": { + "message": "Kelimeler" + }, + "tab_exceptions": { + "message": "İstisnalar" + }, + "no_exceptions": { + "message": "İstisna yok" + }, + "toggle_highlighting_title": { + "message": "Vurgulamayı aç/kapat" + }, + "toggle_dark_mode_title": { + "message": "Karanlık modu aç/kapat" + }, + "select_title": { + "message": "Seç" + }, + "word_placeholder": { + "message": "Kelime veya ifade" + }, + "background_color_title": { + "message": "Arka plan rengi" + }, + "text_color_title": { + "message": "Metin rengi" } } \ No newline at end of file diff --git a/_locales/zh_CN/messages.json b/_locales/zh_CN/messages.json index 8b5905e..1f84959 100644 --- a/_locales/zh_CN/messages.json +++ b/_locales/zh_CN/messages.json @@ -111,7 +111,7 @@ "message": "添加到例外" }, "remove_exception": { - "message": "从例外中移除" + "message": "移除当前" }, "manage_exceptions": { "message": "管理" @@ -127,5 +127,35 @@ }, "remove": { "message": "移除" + }, + "tab_lists": { + "message": "列表" + }, + "tab_words": { + "message": "单词" + }, + "tab_exceptions": { + "message": "例外" + }, + "no_exceptions": { + "message": "无例外" + }, + "toggle_highlighting_title": { + "message": "切换高亮" + }, + "toggle_dark_mode_title": { + "message": "切换暗黑模式" + }, + "select_title": { + "message": "选择" + }, + "word_placeholder": { + "message": "单词或短语" + }, + "background_color_title": { + "message": "背景颜色" + }, + "text_color_title": { + "message": "文字颜色" } } \ No newline at end of file diff --git a/popup/popup.css b/popup/popup.css index 0951477..0c31ce7 100644 --- a/popup/popup.css +++ b/popup/popup.css @@ -1,198 +1,290 @@ :root { - --bg-color: #0d0d0d; - --text-color: #f0f0f0; - --input-bg: #1a1a1a; - --input-border: #333; - --button-bg: #222; - --button-hover: #444; - --button-text: white; + --bg-color: #0f0f0f; + --text-color: #e8e8e8; + --input-bg: #1c1c1c; + --input-border: #2d2d2d; + --button-bg: #252525; + --button-hover: #333333; + --button-text: #e8e8e8; --accent: #ec9c23; --accent-hover: #ffb84d; --accent-text: #000; - --highlight-tag: #292929; - --highlight-tag-border: #444; - --danger: #b00020; - --success: #00c853; - --shadow: 0 2px 6px rgba(0, 0, 0, 0.5); - --border-radius: 12px; - --section-bg: #111; - --switch-bg: #444; + --highlight-tag: #222222; + --highlight-tag-border: #3a3a3a; + --danger: #ef4444; + --success: #10b981; + --shadow: 0 4px 12px rgba(0, 0, 0, 0.4); + --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3); + --border-radius: 10px; + --section-bg: #161616; + --switch-bg: #3a3a3a; --checkbox-accent: #ec9c23; - --checkbox-border: #666; - --scrollbar-bg: var(--section-bg); - --scrollbar-thumb: var(--accent); - --scrollbar-thumb-hover: var(--accent-hover); - --scrollbar-thumb-border: var(--section-bg); + --checkbox-border: #4a4a4a; } body { - font-family: 'Inter', sans-serif; + font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: var(--bg-color); color: var(--text-color); margin: 0; padding: 0; - width: 400px; - max-height: 600px; - overflow-y: auto; - transition: background 0.3s ease, color 0.3s ease; + width: 360px; + height: 600px; + overflow: hidden; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + display: flex; + flex-direction: column; } body.light { - --bg-color: #f5f5f5; - --text-color: #222; + --bg-color: #f8f9fa; + --text-color: #1a1a1a; --input-bg: #ffffff; - --input-border: #ccc; - --button-bg: #e0e0e0; - --button-hover: #d0d0d0; - --button-text: #222; + --input-border: #e0e0e0; + --button-bg: #f0f0f0; + --button-hover: #e5e5e5; + --button-text: #1a1a1a; --accent: #ec9c23; --accent-text: #000; - --highlight-tag: #f0f0f0; - --highlight-tag-border: #d0d0d0; - --danger: #b00020; - --success: #00c853; - --shadow: 0 2px 6px rgba(0, 0, 0, 0.1); - --section-bg: #fff; - --switch-bg: #ccc; + --highlight-tag: #f5f5f5; + --highlight-tag-border: #e0e0e0; + --danger: #ef4444; + --success: #10b981; + --shadow: 0 4px 12px rgba(0, 0, 0, 0.08); + --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05); + --section-bg: #ffffff; + --switch-bg: #d1d5db; --checkbox-accent: #ec9c23; - --checkbox-border: #999; + --checkbox-border: #9ca3af; } .container { - padding: 16px; + padding: 12px; display: flex; flex-direction: column; - gap: 12px; + gap: 8px; + flex: 1; + overflow: hidden; + min-height: 0; } -h1 { - font-size: 1.3em; +/* Tabs */ +.tabs { + display: flex; + gap: 4px; + border-bottom: 2px solid var(--input-border); + margin-bottom: 8px; +} + +.tab-button { + flex: 1; + background: transparent; + border: none; + border-bottom: 2px solid transparent; + padding: 8px 6px; + font-size: 0.75em; + font-weight: 500; + color: var(--text-color); + opacity: 0.6; + cursor: pointer; display: flex; align-items: center; - gap: 8px; justify-content: center; - margin-bottom: 4px; + gap: 4px; + margin-bottom: -2px; + transition: all 0.2s; } -.section { - background: var(--section-bg); - border: 1px solid var(--input-border); - border-radius: var(--border-radius); - padding: 14px; - box-shadow: var(--shadow); - transition: all 0.2s ease; +.tab-button:hover { + opacity: 0.9; + background: var(--highlight-tag); } -.section-header { +.tab-button.active { + opacity: 1; + border-bottom-color: var(--accent); + color: var(--accent); +} + +.tab-button i { + font-size: 0.9em; +} + +.tab-content { + display: none; + flex-direction: column; + gap: 8px; + flex: 1; + overflow: hidden; + min-height: 0; +} + +.tab-content.active { + display: flex; +} + +/* Header */ +.header-bar { display: flex; justify-content: space-between; align-items: center; - margin-bottom: 10px; - cursor: pointer; - padding-left: 8px; - padding-right: 8px; + padding: 10px 12px; + background: linear-gradient(135deg, var(--section-bg) 0%, var(--input-bg) 100%); + border-radius: 8px; + border: 1px solid var(--input-border); + color: var(--text-color); + font-weight: 600; + font-size: 0.95em; + margin-bottom: 0; + box-shadow: var(--shadow-sm); + letter-spacing: -0.02em; } -.section-header:hover { - background: var(--highlight-tag); - border-radius: 6px; - transition: background 0.2s ease; -} - -.collapse-toggle { - background: none !important; - border: none !important; - color: var(--text-color) !important; - padding: 4px !important; - margin: 0 !important; - cursor: pointer; - border-radius: 4px; - transition: all 0.2s ease; +.header-bar .title { display: flex; align-items: center; - justify-content: center; - width: 24px; - height: 24px; + gap: 6px; } -.collapse-toggle:hover { - background: var(--button-hover) !important; - color: var(--accent) !important; -} - -.collapse-toggle i { - transition: transform 0.2s ease; - font-size: 0.8em; -} - -.section.collapsed .collapse-toggle i { - transform: rotate(180deg); -} - -.section-content { - overflow: hidden; - max-height: 2000px; -} - -.section.collapsed .section-content { - max-height: 0; - margin-bottom: 0; - padding-bottom: 0; -} - -.section.collapsed .section-header { - margin-bottom: 0; -} - -.section h2 { +.header-bar .title i { + color: var(--accent); font-size: 1em; - margin-bottom: 10px; +} + +.icon-toggles { + display: flex; + gap: 4px; +} + +.icon-toggle { + cursor: pointer; + font-size: 16px; + color: var(--accent); + display: flex; + align-items: center; + padding: 4px; + border-radius: 4px; +} + +.icon-toggle:hover { + color: var(--accent-hover); + background: var(--highlight-tag); +} + +.hidden-toggle { + display: none; +} + +/* GLOBAL HIGHLIGHT ICON: toggle-on/off */ +.global-icon::before { + content: "\f204"; +} + +#globalHighlightToggle:checked+.global-icon::before { + content: "\f205"; +} + +/* THEME ICON: sun/moon - NO CHECKMARKS */ +.theme-icon::before { + content: "\f185"; +} + +#themeToggle:checked+.theme-icon::before { + content: "\f186"; +} + +.toggle-icon { + font-family: "Font Awesome 6 Free"; + font-weight: 900; +} + +/* Sections */ +.section { + background: var(--section-bg); + border: 1px solid var(--input-border); + border-radius: 8px; + padding: 10px; + box-shadow: var(--shadow-sm); + display: flex; + flex-direction: column; +} + +.section:hover { + box-shadow: var(--shadow); +} + +.section[data-section="wordlist"] { + flex: 1; + overflow: hidden; + min-height: 0; +} + +.section h3 { + font-size: 0.85em; + margin: 0 0 8px 0; font-weight: 600; display: flex; align-items: center; - gap: 8px; - flex: 1; + gap: 6px; + letter-spacing: -0.01em; + color: var(--text-color); + opacity: 0.9; } +/* Form Elements */ input[type="text"], textarea, select { width: 100%; - padding: 8px; + padding: 6px 8px; border-radius: 6px; border: 1px solid var(--input-border); background-color: var(--input-bg); color: var(--text-color); - font-size: 0.9em; + font-size: 0.85em; box-sizing: border-box; margin-top: 4px; margin-bottom: 6px; + font-family: inherit; +} + +input[type="text"]:focus, +textarea:focus, +select:focus { + outline: none; + border-color: var(--accent); + box-shadow: 0 0 0 3px rgba(236, 156, 35, 0.1); } textarea { - resize: vertical; - height: 80px; - font-size: 14px; + resize: none; + height: 50px; + font-size: 0.85em; line-height: 1.4; - outline-offset: -1px; + font-family: inherit; } +/* Color Inputs */ input[type="color"] { background: none; - border: 2px solid var(--input-border); - border-radius: 8px; - box-shadow: 0 1px 4px rgba(0,0,0,0.10); - width: 36px; - height: 36px; + border: 1.5px solid var(--input-border); + border-radius: 6px; + box-shadow: var(--shadow-sm); + width: 32px; + height: 32px; margin-left: 6px; cursor: pointer; padding: 0; - transition: border 0.2s, box-shadow 0.2s; appearance: none; -webkit-appearance: none; overflow: hidden; } +input[type="color"]:hover { + border-color: var(--accent); +} + input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; border-radius: 0; @@ -215,46 +307,70 @@ input[type="color"]::-moz-color-swatch { height: 100%; } -input[type="checkbox"] { - -webkit-appearance: none; - appearance: none; - background-color: var(--input-bg); - border: 1px solid var(--checkbox-border); - border-radius: 4px; - width: 12px; - height: 12px; - transform: scale(1); - cursor: pointer; - position: relative; +.color-row { + display: flex; + gap: 12px; + align-items: center; + margin-bottom: 8px; + margin-top: 4px; } -input[type="checkbox"]:checked::after { - content: ""; - position: absolute; - top: 1px; - left: 3px; - width: 3px; - height: 7px; - border: solid var(--checkbox-accent); - border-width: 0 2px 2px 0; - transform: rotate(45deg); +.color-label { + display: flex; + align-items: center; + gap: 6px; + font-size: 0.8em; + font-weight: 500; +} + +/* Checkboxes */ +input[type="checkbox"] { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + background-color: var(--input-bg); + border: 1.5px solid var(--checkbox-border); + border-radius: 3px; + width: 16px; + height: 16px; + cursor: pointer; + position: relative; + flex-shrink: 0; +} + +input[type="checkbox"]:hover { + border-color: var(--accent); } input[type="checkbox"]:checked { - background-color: var(--input-bg); + background-color: var(--accent); + border-color: var(--accent); } +input[type="checkbox"]:checked::before { + content: "✓"; + position: absolute; + top: -3px; + left: 2px; + color: white; + font-size: 12px; + font-weight: bold; +} + +/* Switch Toggle */ input[type="checkbox"].switch { + -webkit-appearance: none; + -moz-appearance: none; appearance: none; - width: 40px; + width: 36px; height: 20px; background: var(--switch-bg); - border: 0px; + border: none; border-radius: 20px; position: relative; outline: none; cursor: pointer; - transition: background 0.3s; + transition: background 0.2s; } input[type="checkbox"].switch::before { @@ -266,7 +382,8 @@ input[type="checkbox"].switch::before { height: 16px; background: white; border-radius: 50%; - transition: transform 0.3s; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); + transition: left 0.2s; } input[type="checkbox"].switch:checked { @@ -274,22 +391,48 @@ input[type="checkbox"].switch:checked { } input[type="checkbox"].switch:checked::before { - transform: translateX(20px); + left: 18px; } +input[type="checkbox"].switch:hover { + opacity: 0.9; +} + +input[type="checkbox"].switch::after { + content: none !important; +} + +label:has(input.switch) { + display: flex; + align-items: center; + gap: 8px; + cursor: pointer; + padding: 4px 0; +} + +/* Buttons */ button { background: var(--button-bg); color: var(--button-text); border: 1px solid var(--input-border); - padding: 6px 12px; - border-radius: 8px; + padding: 6px 10px; + border-radius: 6px; font-weight: 500; cursor: pointer; - transition: background 0.2s; + display: inline-flex; + align-items: center; + justify-content: center; + gap: 5px; + font-size: 0.8em; + font-family: inherit; + white-space: nowrap; + line-height: 1.2; +} + +button i { display: flex; align-items: center; - gap: 4px; - font-size: 0.9em; + font-size: 0.95em; } button:hover { @@ -299,21 +442,25 @@ button:hover { button.danger { background: var(--danger); color: white !important; + border-color: var(--danger); } button.danger:hover { - background: #d32f2f; + background: #dc2626; + border-color: #dc2626; } .button-row { display: flex; - gap: 8px; + gap: 6px; flex-wrap: wrap; - margin-top: 8px; + margin-top: 6px; + margin-bottom: 8px; + align-items: center; } -.button-row.wrap { - flex-wrap: wrap; +.button-row button { + flex-shrink: 0; } .button-row label { @@ -321,7 +468,13 @@ button.danger:hover { align-items: center; gap: 6px; cursor: pointer; - font-size: 1em; + font-size: 0.8em; + padding: 4px 8px; + border-radius: 4px; +} + +.button-row label:hover { + background: var(--highlight-tag); } .button-row input[type="checkbox"] { @@ -329,81 +482,103 @@ button.danger:hover { vertical-align: middle; } -.color-row { - display: flex; - gap: 24px; - align-items: center; - margin-bottom: 8px; -} - -.color-label { - display: flex; - align-items: center; - gap: 6px; -} - -#wordSearch{ - width:100%; - margin-bottom:8px; - margin-top: 8px; -} - -#wordList { - margin-top: 8px; - position: relative; - overflow-y: auto; - overflow-x: hidden; - flex: 1; - min-height: 200px; - max-height: 300px; -} - -#wordList>div { - position: absolute; - width: calc(100% - 8px); - left: 4px; - display: flex; - align-items: center; - gap: 6px; - padding: 4px; - box-sizing: border-box; -} - -#wordList input[type="text"] { - flex-grow: 1; - min-width: 0; - background-color: var(--input-bg) !important; - color: var(--text-color) !important; - border: 1px solid var(--input-border) !important; - padding: 4px 8px; - border-radius: 4px; -} - -#wordList input[type="color"] { - width: 24px; - height: 24px; - padding: 0; - border-radius: 4px; - flex-shrink: 0; -} - -#wordList input[type="checkbox"] { - flex-shrink: 0; -} - input[type="file"] { display: none; } -.section-header label { - display: flex; - align-items: center; - gap: 6px; - cursor: pointer; +/* Word List */ +#wordSearch { + width: 100%; + margin-bottom: 6px; + margin-top: 6px; } -.section-header input[type="checkbox"] { - margin-right: 6px; +#wordList { + margin-top: 6px; + position: relative; + overflow-y: auto; + overflow-x: hidden; + flex: 1; + min-height: 0; + border: 1px solid var(--input-border); + border-radius: 6px; + background: var(--section-bg); + padding: 4px; +} + +#wordList .word-item { + width: calc(100% - 8px); + left: 4px; + height: 32px; + display: grid; + grid-template-columns: 18px 1fr 26px 26px; + align-items: center; + gap: 6px; + padding: 4px 6px; + box-sizing: border-box; + border-radius: 4px; + background: var(--input-bg); + border: 1px solid var(--input-border); + transition: all 0.2s; +} + +#wordList .word-item:hover { + background: var(--highlight-tag); + border-color: var(--accent); + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); +} + +#wordList .word-item.disabled { + opacity: 0.5; + background: var(--section-bg); +} + +#wordList .word-item.disabled:hover { + opacity: 0.65; +} + +#wordList .word-item.disabled input[type="text"] { + color: var(--text-color) !important; + opacity: 0.6; + text-decoration: line-through; +} + +#wordList input[type="text"] { + min-width: 0; + width: 100%; + background-color: var(--section-bg) !important; + color: var(--text-color) !important; + border: 1px solid var(--input-border) !important; + padding: 4px 6px; + border-radius: 3px; + font-size: 0.8em; + transition: border-color 0.2s; + margin: 0; +} + +#wordList input[type="text"]:focus { + border-color: var(--accent) !important; + outline: none; +} + +#wordList input[type="color"] { + width: 26px; + height: 26px; + padding: 0; + border-radius: 3px; + border: 1px solid var(--input-border); + cursor: pointer; + transition: border-color 0.2s; +} + +#wordList input[type="color"]:hover { + border-color: var(--accent); +} + +#wordList input[type="checkbox"] { + margin: 0; + width: 16px; + height: 16px; } #wordCount { @@ -412,230 +587,95 @@ input[type="file"] { margin-right: -8px; } -.header-bar { - display: flex; - justify-content: space-between; - align-items: center; - padding: 12px 16px; - background: var(--bg-color); - border-radius: 12px; - color: var(--fg-color); - font-weight: bold; - font-size: 16px; - margin-bottom: 16px; -} - -.icon-toggles { - display: flex; - gap: 12px; -} - -.icon-toggle { - cursor: pointer; - font-size: 18px; - color: #ffa500; - display: flex; - align-items: center; - transition: color 0.2s; -} - -.icon-toggle:hover { - color: #ffd580; -} - -.hidden-toggle { - display: none; -} - -.icon-toggle { - cursor: pointer; - font-size: 18px; - color: #ffa500; - display: flex; - align-items: center; - transition: color 0.2s; -} - -.icon-toggle:hover { - color: #ffd580; -} - -/* GLOBAL HIGHLIGHT ICON: toggle-on/off */ -.global-icon::before { - content: "\f204"; - /* fa-toggle-off (default) */ -} - -#globalHighlightToggle:checked+.global-icon::before { - content: "\f205"; - /* fa-toggle-on */ -} - -/* THEME ICON: sun/moon */ -.theme-icon::before { - content: "\f185"; - /* fa-sun (light mode) */ -} - -#themeToggle:checked+.theme-icon::before { - content: "\f186"; - /* fa-moon (dark mode) */ -} - -/* Font Awesome fallback settings */ -.toggle-icon { - font-family: "Font Awesome 6 Free"; - font-weight: 900; -} - -label:has(input.switch) { - display: flex; - align-items: center; - gap: 8px; -} - -#wordList, -body { - scrollbar-width: thin; - scrollbar-color: var(--accent) var(--section-bg); -} - -#wordList::-webkit-scrollbar, -body::-webkit-scrollbar { - width: 8px; - background: var(--section-bg); - border-radius: 8px; -} - -#wordList::-webkit-scrollbar-thumb, -body::-webkit-scrollbar-thumb { - background: var(--accent); - border-radius: 8px; - min-height: 24px; - border: 2px solid var(--section-bg); -} - -#wordList::-webkit-scrollbar-thumb:hover, -body::-webkit-scrollbar-thumb:hover { - background: var(--accent-hover); -} - -#wordList::-webkit-scrollbar-corner, -body::-webkit-scrollbar-corner { - background: var(--section-bg); -} - -:root { - --scrollbar-bg: var(--section-bg); - --scrollbar-thumb: var(--accent); - --scrollbar-thumb-hover: var(--accent-hover); - --scrollbar-thumb-border: var(--section-bg); -} - -html, body, #wordList { - scrollbar-width: thin; - scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-bg); -} - -html::-webkit-scrollbar, -body::-webkit-scrollbar, -#wordList::-webkit-scrollbar { - width: 8px; - background: var(--scrollbar-bg); - border-radius: 8px; -} - -html::-webkit-scrollbar-thumb, -body::-webkit-scrollbar-thumb, -#wordList::-webkit-scrollbar-thumb { - background: var(--scrollbar-thumb); - border-radius: 8px; - min-height: 24px; - border: 2px solid var(--scrollbar-thumb-border); -} - -html::-webkit-scrollbar-thumb:hover, -body::-webkit-scrollbar-thumb:hover, -#wordList::-webkit-scrollbar-thumb:hover { - background: var(--scrollbar-thumb-hover); -} - -html::-webkit-scrollbar-corner, -body::-webkit-scrollbar-corner, -#wordList::-webkit-scrollbar-corner { - background: var(--scrollbar-bg); -} - -/* Exception Panel Styles */ -.exceptions-panel { - margin-top: 10px; - padding: 12px; - border: 1px solid var(--input-border); - border-radius: var(--border-radius); - background: var(--input-bg); +/* Exception Panel */ +.section[data-section="exceptions"] { + flex: 1; + overflow: hidden; + min-height: 0; } .exceptions-list { - max-height: 120px; + flex: 1; overflow-y: auto; margin: 8px 0; border: 1px solid var(--input-border); border-radius: 6px; - background: var(--section-bg); + background: var(--input-bg); + min-height: 0; } .exception-item { display: flex; justify-content: space-between; align-items: center; - padding: 8px 12px; - border-bottom: 1px solid var(--highlight-tag-border); - font-size: 12px; + gap: 10px; + padding: 6px 10px; + border-bottom: none; + font-size: 0.85em; } -.exception-item:last-child { - border-bottom: none; +.exception-item:nth-child(odd) { + background: var(--section-bg); +} + +.exception-item:nth-child(even) { + background: var(--input-bg); +} + +.exception-item:hover { + background: var(--highlight-tag) !important; } .exception-domain { flex: 1; - word-break: break-all; - margin-right: 8px; + word-break: break-word; + font-family: inherit; + font-size: 1em; + line-height: 1.4; + display: flex; + align-items: center; } .exception-remove { background: var(--danger); color: white; border: none; - padding: 4px 8px; + padding: 4px 10px; border-radius: 4px; cursor: pointer; - font-size: 10px; + font-size: 0.75em; + font-weight: 500; + white-space: nowrap; + flex-shrink: 0; + display: flex; + align-items: center; + justify-content: center; } .exception-remove:hover { - background: #d00030; + background: #dc2626; } -/* Footer Styles */ +/* Footer */ .footer { - margin-top: 16px; - padding: 12px 16px; + padding: 10px 12px; border-top: 1px solid var(--input-border); background: var(--section-bg); + flex-shrink: 0; } .footer-content { display: flex; justify-content: space-between; align-items: center; - font-size: 0.8em; + font-size: 0.75em; color: var(--text-color); - opacity: 0.7; + opacity: 0.6; } .version { font-weight: 500; + font-family: 'Courier New', monospace; } .github-link { @@ -644,11 +684,54 @@ body::-webkit-scrollbar-corner, gap: 4px; color: var(--text-color); text-decoration: none; - opacity: 0.7; - transition: opacity 0.2s ease, color 0.2s ease; + padding: 3px 6px; + border-radius: 4px; } .github-link:hover { opacity: 1; color: var(--accent); -} \ No newline at end of file + background: var(--highlight-tag); +} + +/* Scrollbars */ +html, +body, +#wordList, +.exceptions-list { + scrollbar-width: thin; + scrollbar-color: var(--accent) var(--section-bg); +} + +html::-webkit-scrollbar, +body::-webkit-scrollbar, +#wordList::-webkit-scrollbar, +.exceptions-list::-webkit-scrollbar { + width: 8px; + background: var(--section-bg); + border-radius: 8px; +} + +html::-webkit-scrollbar-thumb, +body::-webkit-scrollbar-thumb, +#wordList::-webkit-scrollbar-thumb, +.exceptions-list::-webkit-scrollbar-thumb { + background: var(--accent); + border-radius: 8px; + min-height: 24px; + border: 2px solid var(--section-bg); +} + +html::-webkit-scrollbar-thumb:hover, +body::-webkit-scrollbar-thumb:hover, +#wordList::-webkit-scrollbar-thumb:hover, +.exceptions-list::-webkit-scrollbar-thumb:hover { + background: var(--accent-hover); +} + +html::-webkit-scrollbar-corner, +body::-webkit-scrollbar-corner, +#wordList::-webkit-scrollbar-corner, +.exceptions-list::-webkit-scrollbar-corner { + background: var(--section-bg); +} diff --git a/popup/popup.html b/popup/popup.html index 390a9ba..9a47d3a 100644 --- a/popup/popup.html +++ b/popup/popup.html @@ -18,45 +18,26 @@ Goose Highlighter
-
-
-
-

Site Exceptions

- -
-
-
- - -
- -
+
+ + + +
-
-
-

Highlight Lists

- -
-
+
+
@@ -65,16 +46,9 @@ data-i18n="delete_list">Delete
-
-
-
-

List Settings

- -
-
+
+

List Settings

@@ -94,28 +68,15 @@
-
-
-

Add Words

- -
-
+
+
+

Add Words

-
-
-
-

Word List(0) -

- -
-
+
+

Word List (0)

@@ -128,14 +89,21 @@
-
-
-

Options

- +
+
+

Site Exceptions

+
+ +
+

Exception Sites:

+
+
-
+
+ +
+
+

Options

diff --git a/src/popup/PopupController.ts b/src/popup/PopupController.ts index 3cb0880..3ac1f26 100644 --- a/src/popup/PopupController.ts +++ b/src/popup/PopupController.ts @@ -13,13 +13,13 @@ export class PopupController { private matchWholeEnabled = false; private exceptionsList: string[] = []; private currentTabHost = ''; - private sectionStates: Record = {}; + private activeTab = 'lists'; async initialize(): Promise { await this.loadData(); await this.getCurrentTab(); - this.loadSectionStates(); - this.initializeSectionStates(); + this.loadActiveTab(); + this.translateTitles(); this.setupEventListeners(); this.render(); } @@ -56,32 +56,44 @@ export class PopupController { } } - private loadSectionStates(): void { - const saved = localStorage.getItem('goose-highlighter-section-states'); + private loadActiveTab(): void { + const saved = localStorage.getItem('goose-highlighter-active-tab'); if (saved) { - try { - this.sectionStates = JSON.parse(saved); - } catch { - this.sectionStates = {}; - } + this.activeTab = saved; } } - private saveSectionStates(): void { - localStorage.setItem('goose-highlighter-section-states', JSON.stringify(this.sectionStates)); - } - - private initializeSectionStates(): void { - Object.keys(this.sectionStates).forEach(sectionName => { - const section = document.querySelector(`[data-section="${sectionName}"]`); - if (section && this.sectionStates[sectionName]) { - section.classList.add('collapsed'); + private translateTitles(): void { + document.querySelectorAll('[data-i18n-title]').forEach(element => { + const key = element.getAttribute('data-i18n-title'); + if (key) { + const translation = chrome.i18n.getMessage(key); + if (translation) { + element.setAttribute('title', translation); + } } }); } + private saveActiveTab(): void { + localStorage.setItem('goose-highlighter-active-tab', this.activeTab); + } + + private switchTab(tabName: string): void { + this.activeTab = tabName; + this.saveActiveTab(); + + document.querySelectorAll('.tab-button').forEach(btn => { + btn.classList.toggle('active', btn.getAttribute('data-tab') === tabName); + }); + + document.querySelectorAll('.tab-content').forEach(content => { + content.classList.toggle('active', content.getAttribute('data-tab-content') === tabName); + }); + } + private setupEventListeners(): void { - this.setupSectionToggles(); + this.setupTabs(); this.setupListManagement(); this.setupWordManagement(); this.setupSettings(); @@ -90,44 +102,15 @@ export class PopupController { this.setupTheme(); } - private setupSectionToggles(): void { - document.querySelectorAll('.collapse-toggle').forEach(button => { - button.addEventListener('click', (e) => { - e.stopPropagation(); - const targetSection = (button as HTMLElement).getAttribute('data-target'); - if (targetSection) this.toggleSection(targetSection); + private setupTabs(): void { + document.querySelectorAll('.tab-button').forEach(button => { + button.addEventListener('click', () => { + const tabName = (button as HTMLElement).getAttribute('data-tab'); + if (tabName) this.switchTab(tabName); }); }); - document.querySelectorAll('.section-header').forEach(header => { - header.addEventListener('click', (e) => { - if ((e.target as HTMLElement).tagName === 'BUTTON' || - (e.target as HTMLElement).tagName === 'INPUT' || - (e.target as HTMLElement).closest('button')) { - return; - } - const section = (header as HTMLElement).closest('.section'); - const sectionName = section?.getAttribute('data-section'); - if (sectionName) this.toggleSection(sectionName); - }); - }); - } - - private toggleSection(sectionName: string): void { - const section = document.querySelector(`[data-section="${sectionName}"]`); - if (!section) return; - - const isCollapsed = section.classList.contains('collapsed'); - - if (isCollapsed) { - section.classList.remove('collapsed'); - this.sectionStates[sectionName] = false; - } else { - section.classList.add('collapsed'); - this.sectionStates[sectionName] = true; - } - - this.saveSectionStates(); + this.switchTab(this.activeTab); } private setupListManagement(): void { @@ -199,20 +182,14 @@ export class PopupController { private setupWordListEvents(wordList: HTMLDivElement): void { wordList.addEventListener('change', (e) => { const target = e.target as HTMLInputElement; - if (target.type === 'checkbox') { - if (target.dataset.index != null) { - const index = +target.dataset.index; - if (target.checked) { - this.selectedCheckboxes.add(index); - } else { - this.selectedCheckboxes.delete(index); - } - this.renderWords(); - } else if (target.dataset.activeEdit != null) { - const index = +target.dataset.activeEdit; - this.lists[this.currentListIndex].words[index].active = target.checked; - this.save(); + if (target.type === 'checkbox' && target.dataset.index != null) { + const index = +target.dataset.index; + if (target.checked) { + this.selectedCheckboxes.add(index); + } else { + this.selectedCheckboxes.delete(index); } + this.renderWords(); } }); @@ -334,14 +311,6 @@ export class PopupController { this.save(); }); - document.getElementById('manageExceptionsBtn')?.addEventListener('click', () => { - const panel = document.getElementById('exceptionsPanel'); - if (panel) { - const isVisible = panel.style.display !== 'none'; - panel.style.display = isVisible ? 'none' : 'block'; - } - }); - document.getElementById('clearExceptionsBtn')?.addEventListener('click', () => { if (confirm(chrome.i18n.getMessage('confirm_clear_exceptions') || 'Clear all exceptions?')) { this.exceptionsList = []; @@ -527,11 +496,13 @@ export class PopupController { } const itemHeight = 32; - const containerHeight = wordList.clientHeight; + const itemSpacing = 2; + const totalItemHeight = itemHeight + itemSpacing; + const containerHeight = wordList.clientHeight || 250; const scrollTop = wordList.scrollTop; - const startIndex = Math.floor(scrollTop / itemHeight); + const startIndex = Math.floor(scrollTop / totalItemHeight); const endIndex = Math.min( - startIndex + Math.ceil(containerHeight / itemHeight) + 2, + startIndex + Math.ceil(containerHeight / totalItemHeight) + 2, filteredWords.length ); @@ -539,7 +510,7 @@ export class PopupController { const spacer = document.createElement('div'); spacer.style.position = 'relative'; - spacer.style.height = `${filteredWords.length * itemHeight}px`; + spacer.style.height = `${filteredWords.length * totalItemHeight}px`; spacer.style.width = '100%'; for (let i = startIndex; i < endIndex; i++) { @@ -561,32 +532,22 @@ export class PopupController { private createWordItem(word: HighlightWord, realIndex: number, displayIndex: number, itemHeight: number): HTMLDivElement { const container = document.createElement('div'); + container.className = 'word-item'; + if (word.active === false) { + container.classList.add('disabled'); + } container.style.cssText = ` - height: ${itemHeight}px; position: absolute; - top: ${displayIndex * itemHeight}px; - width: calc(100% - 8px); - left: 4px; - right: 4px; - display: flex; - align-items: center; - gap: 6px; - padding: 0 4px; - box-sizing: border-box; - background: var(--highlight-tag); - border: 1px solid var(--highlight-tag-border); + top: ${displayIndex * (itemHeight + 2)}px; `; const list = this.lists[this.currentListIndex]; container.innerHTML = ` - - - - - + + + + `; return container; @@ -604,12 +565,12 @@ export class PopupController { btnText.textContent = chrome.i18n.getMessage('remove_exception') || 'Remove from Exceptions'; toggleBtn.className = 'danger'; const icon = toggleBtn.querySelector('i'); - if (icon) icon.className = 'fa-solid fa-check'; + if (icon) icon.className = 'fa-solid fa-trash'; } else { btnText.textContent = chrome.i18n.getMessage('add_exception') || 'Add to Exceptions'; toggleBtn.className = ''; const icon = toggleBtn.querySelector('i'); - if (icon) icon.className = 'fa-solid fa-ban'; + if (icon) icon.className = 'fa-solid fa-plus'; } } @@ -618,7 +579,7 @@ export class PopupController { if (!container) return; if (this.exceptionsList.length === 0) { - container.innerHTML = '
No exceptions
'; + container.innerHTML = `
${chrome.i18n.getMessage('no_exceptions') || 'No exceptions'}
`; return; }