mirror of
https://github.com/obsqrbtz/goose-highlighter.git
synced 2026-04-08 20:19:06 +03:00
styles refactor
This commit is contained in:
@@ -1,29 +1,17 @@
|
||||
@import url('../shared/fonts.css');
|
||||
@import url('../shared/colors.css');
|
||||
@import url('../shared/base.css');
|
||||
@import url('../shared/layout.css');
|
||||
@import url('../shared/word-list.css');
|
||||
@import url('../shared/ui-components.css');
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
html {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: var(--font-sans);
|
||||
font-size: var(--text-base);
|
||||
line-height: var(--leading-normal);
|
||||
letter-spacing: var(--tracking-tight);
|
||||
margin: 0;
|
||||
background: var(--bg-color);
|
||||
color: var(--text-color);
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.app {
|
||||
@@ -43,96 +31,15 @@ body {
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.topbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
/* List-manager–specific: compact header padding; shared .app-header does the rest */
|
||||
.topbar.app-header {
|
||||
padding: 8px 16px;
|
||||
background: var(--bg-color);
|
||||
border-bottom: 1px solid var(--input-border);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.title.app-header-content {
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.title img {
|
||||
height: 28px;
|
||||
width: 28px;
|
||||
border-radius: 8px;
|
||||
background: var(--text-color);
|
||||
padding: 4px;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
html.dark .title img,
|
||||
body.dark .title img {
|
||||
background: var(--highlight-tag);
|
||||
}
|
||||
|
||||
.name {
|
||||
font-weight: 600;
|
||||
font-size: 13px;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 11px;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.topbar-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.topbar-actions button {
|
||||
min-height: 28px;
|
||||
padding: 4px 10px;
|
||||
font-size: 12px;
|
||||
border-radius: 6px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.topbar-actions button.primary {
|
||||
background: rgba(255, 140, 0, 0.1);
|
||||
color: var(--accent);
|
||||
border: 1px solid rgba(255, 140, 0, 0.35);
|
||||
}
|
||||
|
||||
.topbar-actions button.primary:hover {
|
||||
background: rgba(255, 140, 0, 0.18);
|
||||
border-color: rgba(255, 140, 0, 0.5);
|
||||
}
|
||||
|
||||
html.dark .topbar-actions button.primary,
|
||||
body.dark .topbar-actions button.primary {
|
||||
background: rgba(255, 140, 0, 0.12);
|
||||
border-color: rgba(255, 140, 0, 0.4);
|
||||
}
|
||||
|
||||
html.dark .topbar-actions button.primary:hover,
|
||||
body.dark .topbar-actions button.primary:hover {
|
||||
background: rgba(255, 140, 0, 0.2);
|
||||
border-color: rgba(255, 140, 0, 0.55);
|
||||
}
|
||||
|
||||
.topbar-actions button.ghost {
|
||||
background: var(--input-bg);
|
||||
border: 1px solid var(--input-border);
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.topbar-actions button.ghost:hover {
|
||||
background: var(--section-bg);
|
||||
}
|
||||
|
||||
.topbar-actions .icon-toggle {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
@@ -217,17 +124,6 @@ body.dark .topbar-actions button.primary:hover {
|
||||
background: var(--section-bg);
|
||||
}
|
||||
|
||||
.lists-panel .panel-actions button.danger {
|
||||
background: rgba(239, 68, 68, 0.08);
|
||||
border: 1px solid rgba(239, 68, 68, 0.3);
|
||||
color: var(--danger);
|
||||
}
|
||||
|
||||
.lists-panel .panel-actions button.danger:hover {
|
||||
background: rgba(239, 68, 68, 0.15);
|
||||
border-color: rgba(239, 68, 68, 0.45);
|
||||
}
|
||||
|
||||
.panel-actions.secondary {
|
||||
margin-top: 0;
|
||||
gap: 6px;
|
||||
@@ -441,23 +337,7 @@ body.dark .list-item.selected {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.add-words textarea {
|
||||
flex: 1;
|
||||
min-height: 56px;
|
||||
resize: vertical;
|
||||
background: var(--input-bg);
|
||||
color: var(--text-color);
|
||||
border: 1px solid var(--input-border);
|
||||
border-radius: 8px;
|
||||
padding: 6px 10px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.add-words textarea:focus {
|
||||
outline: none;
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
/* List-manager–specific: add-words button width; shared word-list.css does the rest */
|
||||
.add-words button {
|
||||
min-width: 100px;
|
||||
height: 32px;
|
||||
@@ -466,62 +346,38 @@ body.dark .list-item.selected {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.add-words button.primary {
|
||||
background: rgba(255, 140, 0, 0.1);
|
||||
color: var(--accent);
|
||||
border: 1px solid rgba(255, 140, 0, 0.35);
|
||||
.word-controls input[type="text"],
|
||||
.word-controls select {
|
||||
flex: 1;
|
||||
min-width: 140px;
|
||||
min-height: 32px;
|
||||
padding: 0 10px;
|
||||
font-size: 14px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.add-words button.primary:hover {
|
||||
background: rgba(255, 140, 0, 0.18);
|
||||
border-color: rgba(255, 140, 0, 0.5);
|
||||
/* Search/move row: align input, select and buttons to same height */
|
||||
.word-controls .row:has(#wordSearch) button {
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
html.dark .add-words button.primary,
|
||||
body.dark .add-words button.primary {
|
||||
background: rgba(255, 140, 0, 0.12);
|
||||
border-color: rgba(255, 140, 0, 0.4);
|
||||
.word-item .word-item-eye-toggle {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
html.dark .add-words button.primary:hover,
|
||||
body.dark .add-words button.primary:hover {
|
||||
background: rgba(255, 140, 0, 0.2);
|
||||
border-color: rgba(255, 140, 0, 0.55);
|
||||
}
|
||||
|
||||
/* Word controls: action row matches popup .word-actions-row / .word-action-btn */
|
||||
.word-controls .row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.word-controls .row button {
|
||||
height: 26px;
|
||||
padding: 0 8px;
|
||||
font-size: 12px;
|
||||
.app input[type="color"] {
|
||||
padding: 0;
|
||||
height: 32px;
|
||||
border-radius: 6px;
|
||||
background: var(--input-bg);
|
||||
border: 1px solid var(--input-border);
|
||||
color: var(--text-color);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.word-controls .row button:hover {
|
||||
background: var(--section-bg);
|
||||
.app input[type="color"]:hover {
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
.word-controls .row button.danger {
|
||||
background: rgba(239, 68, 68, 0.1);
|
||||
border-color: rgba(239, 68, 68, 0.3);
|
||||
color: var(--danger);
|
||||
}
|
||||
|
||||
.word-controls .row button.danger:hover {
|
||||
background: rgba(239, 68, 68, 0.2);
|
||||
}
|
||||
|
||||
/* Subdued primary/danger in list manager – outline style, less distracting */
|
||||
/* Subdued primary for compact buttons (e.g. Apply list settings) */
|
||||
.compact-btn.primary {
|
||||
background: rgba(255, 140, 0, 0.1);
|
||||
color: var(--accent);
|
||||
@@ -545,193 +401,6 @@ body.dark .compact-btn.primary:hover {
|
||||
border-color: rgba(255, 140, 0, 0.55);
|
||||
}
|
||||
|
||||
.word-controls input[type="text"],
|
||||
.word-controls select {
|
||||
flex: 1;
|
||||
min-width: 140px;
|
||||
min-height: 32px;
|
||||
padding: 0 10px;
|
||||
font-size: 14px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
#wordSearch {
|
||||
height: 32px;
|
||||
padding: 0 10px;
|
||||
font-size: 14px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
/* Search/move row: align input, select and buttons to same height */
|
||||
.word-controls .row:has(#wordSearch) button {
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
/* Word list container – matches popup .word-list-container */
|
||||
.word-list {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
background: var(--input-bg);
|
||||
border: 1px solid var(--input-border);
|
||||
border-radius: 8px;
|
||||
min-height: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.word-list .empty {
|
||||
padding: 16px;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
color: var(--text-color);
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
/* Word item – matches popup .word-item (flex row, border-bottom, left accent when selected) */
|
||||
.word-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 6px 10px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
border-bottom: 1px solid var(--input-border);
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.word-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.word-item:hover {
|
||||
background: var(--highlight-tag);
|
||||
}
|
||||
|
||||
.word-item.selected {
|
||||
background: var(--section-bg);
|
||||
border-left: 3px solid var(--accent);
|
||||
padding-left: 9px;
|
||||
}
|
||||
|
||||
.word-item.disabled {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.word-text {
|
||||
flex: 1;
|
||||
font-size: 14px;
|
||||
color: var(--text-color);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
min-width: 0;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.word-text.editing {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.word-edit-input {
|
||||
display: none;
|
||||
flex: 1;
|
||||
height: 28px;
|
||||
padding: 0 8px;
|
||||
background: var(--bg-color);
|
||||
border: 1px solid var(--accent);
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
color: var(--text-color);
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.word-edit-input:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.word-edit-input.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.word-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
flex-shrink: 0;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.word-actions > * {
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
/* Word item icon button – matches popup .word-item-icon-btn */
|
||||
.word-item .icon-btn {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
min-width: 28px;
|
||||
min-height: 28px;
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
color: var(--text-color);
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.word-item .icon-btn:hover {
|
||||
opacity: 1;
|
||||
background: var(--highlight-tag);
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.word-item .icon-btn i {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* Word item color picker – matches popup .word-item-color-picker */
|
||||
.word-item input[type="color"] {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--input-border);
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.word-item input[type="color"]::-webkit-color-swatch-wrapper {
|
||||
padding: 0;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.word-item input[type="color"]::-webkit-color-swatch {
|
||||
border: none;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.word-item input[type="color"]:hover {
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
.word-item .word-item-eye-toggle {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.app input[type="color"] {
|
||||
padding: 0;
|
||||
height: 32px;
|
||||
border-radius: 6px;
|
||||
border: 1px solid var(--input-border);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.app input[type="color"]:hover {
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
.colors input[type="color"] {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@@ -11,22 +11,24 @@
|
||||
|
||||
<body>
|
||||
<div class="app">
|
||||
<header class="topbar">
|
||||
<div class="title">
|
||||
<header class="topbar app-header">
|
||||
<div class="title app-header-content">
|
||||
<div class="app-logo">
|
||||
<img src="../img/logo-outlined.png" alt="Goose Highlighter" />
|
||||
</div>
|
||||
<div>
|
||||
<div class="name" data-i18n="extension_name">Goose Highlighter</div>
|
||||
<div class="subtitle" data-i18n="list_manager_title">List Manager</div>
|
||||
<div class="name app-title" data-i18n="extension_name">Goose Highlighter</div>
|
||||
<div class="subtitle app-subtitle" data-i18n="list_manager_title">List Manager</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="topbar-actions">
|
||||
<div class="topbar-actions app-header-actions">
|
||||
<label class="icon-toggle" data-i18n-title="toggle_dark_mode_title" title="Toggle dark mode">
|
||||
<input type="checkbox" class="hidden-toggle" id="themeToggle" />
|
||||
<i class="toggle-icon theme-icon fa-solid"></i>
|
||||
</label>
|
||||
<button id="importListBtn" class="ghost"><i class="fa-solid fa-upload"></i> <span data-i18n="import_list">Import List</span></button>
|
||||
<button id="exportListBtn" class="ghost"><i class="fa-solid fa-download"></i> <span data-i18n="export_list">Export List</span></button>
|
||||
<button id="newListBtn" class="primary"><i class="fa-solid fa-plus"></i> <span data-i18n="new_list">New List</span></button>
|
||||
<button id="newListBtn" class="btn-primary-subdued"><i class="fa-solid fa-plus"></i> <span data-i18n="new_list">New List</span></button>
|
||||
</div>
|
||||
<input type="file" id="importFileInput" accept=".json" style="display: none;" />
|
||||
</header>
|
||||
@@ -73,7 +75,7 @@
|
||||
<div class="word-controls">
|
||||
<div class="add-words">
|
||||
<textarea id="bulkAddWords" data-i18n="paste_hint" placeholder="Paste words here..."></textarea>
|
||||
<button id="addWordsBtn" class="primary"><i class="fa-solid fa-plus"></i> <span data-i18n="add_words">Add Words</span></button>
|
||||
<button id="addWordsBtn" class="btn-primary-subdued"><i class="fa-solid fa-plus"></i> <span data-i18n="add_words">Add Words</span></button>
|
||||
</div>
|
||||
<div class="row">
|
||||
<button id="selectAllWordsBtn" data-i18n="select_all">Select All</button>
|
||||
|
||||
331
popup/popup.css
331
popup/popup.css
@@ -1,27 +1,15 @@
|
||||
@import url('../shared/fonts.css');
|
||||
@import url('../shared/colors.css');
|
||||
@import url('../shared/base.css');
|
||||
@import url('../shared/layout.css');
|
||||
@import url('../shared/word-list.css');
|
||||
@import url('../shared/ui-components.css');
|
||||
|
||||
/* Reset and Base Styles */
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: var(--font-sans);
|
||||
font-size: var(--text-base);
|
||||
line-height: var(--leading-normal);
|
||||
letter-spacing: var(--tracking-tight);
|
||||
background: var(--bg-color);
|
||||
color: var(--text-color);
|
||||
width: 380px;
|
||||
min-height: 500px;
|
||||
max-height: 600px;
|
||||
overflow: hidden;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
@@ -71,57 +59,18 @@ body {
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
/* Header */
|
||||
.header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
/* Popup header uses shared .app-header; override padding only */
|
||||
.header.app-header {
|
||||
padding: 6px 12px;
|
||||
border-bottom: 1px solid var(--input-border);
|
||||
background: var(--bg-color);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.header-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.header-content.app-header-content {
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.header-logo {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 8px;
|
||||
background: var(--text-color);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
html.dark .header-logo,
|
||||
body.dark .header-logo {
|
||||
background: var(--highlight-tag);
|
||||
}
|
||||
|
||||
.header-logo img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
.header-title.app-title {
|
||||
font-size: var(--text-base);
|
||||
font-weight: 600;
|
||||
letter-spacing: var(--tracking-tight);
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.header-settings-btn,
|
||||
@@ -135,9 +84,6 @@ body.dark .header-logo {
|
||||
min-height: 28px;
|
||||
padding: 0;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.header-settings-btn {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
@@ -590,7 +536,7 @@ body.dark .header-logo {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
/* Apply Button – same subdued primary style as list-manager */
|
||||
/* Apply button uses shared .btn-primary-subdued */
|
||||
.apply-button {
|
||||
width: 100%;
|
||||
height: 32px;
|
||||
@@ -598,9 +544,6 @@ body.dark .header-logo {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
background: rgba(255, 140, 0, 0.1);
|
||||
color: var(--accent);
|
||||
border: 1px solid rgba(255, 140, 0, 0.35);
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
font-size: var(--text-base);
|
||||
@@ -609,28 +552,11 @@ body.dark .header-logo {
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.apply-button:hover {
|
||||
background: rgba(255, 140, 0, 0.18);
|
||||
border-color: rgba(255, 140, 0, 0.5);
|
||||
}
|
||||
|
||||
html.dark .apply-button,
|
||||
body.dark .apply-button {
|
||||
background: rgba(255, 140, 0, 0.12);
|
||||
border-color: rgba(255, 140, 0, 0.4);
|
||||
}
|
||||
|
||||
html.dark .apply-button:hover,
|
||||
body.dark .apply-button:hover {
|
||||
background: rgba(255, 140, 0, 0.2);
|
||||
border-color: rgba(255, 140, 0, 0.55);
|
||||
}
|
||||
|
||||
.apply-button i {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* Words Tab Styles */
|
||||
/* Words Tab Styles – layout only; shared word-list.css does the rest */
|
||||
.add-words-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -658,15 +584,25 @@ body.dark .apply-button:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.add-words-textarea {
|
||||
min-height: 56px;
|
||||
padding: 6px 8px;
|
||||
background: var(--input-bg);
|
||||
border: 1px solid var(--input-border);
|
||||
.add-words-button {
|
||||
width: 100%;
|
||||
height: 28px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
font-size: var(--text-md);
|
||||
color: var(--text-color);
|
||||
font-family: var(--font-sans);
|
||||
font-weight: 600;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.add-words-button:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.add-words-textarea {
|
||||
resize: none;
|
||||
line-height: var(--leading-relaxed);
|
||||
}
|
||||
@@ -675,50 +611,6 @@ body.dark .apply-button:hover {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.add-words-textarea:focus {
|
||||
outline: none;
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
.add-words-button {
|
||||
width: 100%;
|
||||
height: 28px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgba(255, 140, 0, 0.1);
|
||||
color: var(--accent);
|
||||
border: 1px solid rgba(255, 140, 0, 0.35);
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
font-size: var(--text-md);
|
||||
font-weight: 600;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.add-words-button:hover {
|
||||
background: rgba(255, 140, 0, 0.18);
|
||||
border-color: rgba(255, 140, 0, 0.5);
|
||||
}
|
||||
|
||||
html.dark .add-words-button,
|
||||
body.dark .add-words-button {
|
||||
background: rgba(255, 140, 0, 0.12);
|
||||
border-color: rgba(255, 140, 0, 0.4);
|
||||
}
|
||||
|
||||
html.dark .add-words-button:hover,
|
||||
body.dark .add-words-button:hover {
|
||||
background: rgba(255, 140, 0, 0.2);
|
||||
border-color: rgba(255, 140, 0, 0.55);
|
||||
}
|
||||
|
||||
.add-words-button:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* Word List Section */
|
||||
.word-list-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -733,188 +625,17 @@ body.dark .add-words-button:hover {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.word-actions-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.word-action-btn {
|
||||
height: 26px;
|
||||
padding: 0 8px;
|
||||
background: var(--input-bg);
|
||||
border: 1px solid var(--input-border);
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
font-size: var(--text-sm);
|
||||
font-weight: 500;
|
||||
color: var(--text-color);
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.word-action-btn:hover {
|
||||
background: var(--section-bg);
|
||||
}
|
||||
|
||||
.word-action-btn:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.word-action-btn.danger {
|
||||
background: rgba(239, 68, 68, 0.1);
|
||||
border-color: rgba(239, 68, 68, 0.3);
|
||||
color: var(--danger);
|
||||
}
|
||||
|
||||
.word-action-btn.danger:hover {
|
||||
background: rgba(239, 68, 68, 0.2);
|
||||
}
|
||||
|
||||
/* Word Search */
|
||||
.word-search-wrapper {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.word-search-input {
|
||||
width: 100%;
|
||||
height: 32px;
|
||||
padding: 0 12px;
|
||||
background: var(--input-bg);
|
||||
border: 1px solid var(--input-border);
|
||||
border-radius: 8px;
|
||||
font-size: var(--text-md);
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.word-search-input:focus {
|
||||
outline: none;
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
/* Word List Container */
|
||||
.word-list-container {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
background: var(--input-bg);
|
||||
border: 1px solid var(--input-border);
|
||||
border-radius: 8px;
|
||||
max-height: 200px;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.word-list-empty {
|
||||
padding: 16px;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
color: var(--text-color);
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.word-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 6px 10px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
border-bottom: 1px solid var(--input-border);
|
||||
}
|
||||
|
||||
.word-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.word-item:hover {
|
||||
background: var(--highlight-tag);
|
||||
}
|
||||
|
||||
.word-item.selected {
|
||||
background: var(--section-bg);
|
||||
border-left: 3px solid var(--accent);
|
||||
padding-left: 9px;
|
||||
}
|
||||
|
||||
.word-item-text {
|
||||
flex: 1;
|
||||
font-size: 14px;
|
||||
color: var(--text-color);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.word-item-edit-input {
|
||||
flex: 1;
|
||||
height: 28px;
|
||||
padding: 0 8px;
|
||||
background: var(--bg-color);
|
||||
border: 1px solid var(--accent);
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.word-item-edit-input:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.word-item-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.word-item-icon-btn {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
border-radius: 4px;
|
||||
transition: all 0.2s;
|
||||
color: var(--text-color);
|
||||
opacity: 0.6;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.word-item-icon-btn:hover {
|
||||
opacity: 1;
|
||||
background: var(--highlight-tag);
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.word-item-icon-btn i {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.word-item-color-picker {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--input-border);
|
||||
cursor: pointer;
|
||||
background: transparent;
|
||||
padding: 0;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.word-item-color-picker::-webkit-color-swatch-wrapper {
|
||||
padding: 0;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.word-item-color-picker::-webkit-color-swatch {
|
||||
border: none;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.word-item-color-picker:hover {
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
.word-list-hint {
|
||||
|
||||
@@ -16,14 +16,14 @@
|
||||
<div class="popup-container">
|
||||
|
||||
<!-- Header -->
|
||||
<div class="header">
|
||||
<div class="header-content">
|
||||
<div class="header-logo">
|
||||
<div class="header app-header">
|
||||
<div class="header-content app-header-content">
|
||||
<div class="header-logo app-logo">
|
||||
<img src="../img/logo-outlined.png" alt="Goose" style="width: 18px; height: 18px;">
|
||||
</div>
|
||||
<span class="header-title" data-i18n="extension_name">Goose Highlighter</span>
|
||||
<span class="header-title app-title" data-i18n="extension_name">Goose Highlighter</span>
|
||||
</div>
|
||||
<div class="header-actions">
|
||||
<div class="header-actions app-header-actions">
|
||||
<button class="icon-button header-settings-btn" id="settingsBtn" data-i18n-title="options" title="Options" aria-label="Settings">
|
||||
<i class="fa-solid fa-gear"></i>
|
||||
</button>
|
||||
@@ -137,7 +137,7 @@
|
||||
</div>
|
||||
|
||||
<!-- Apply Button -->
|
||||
<button class="apply-button" id="applyListSettingsBtn">
|
||||
<button class="apply-button btn-primary-subdued" id="applyListSettingsBtn">
|
||||
<i class="fa-solid fa-check"></i>
|
||||
<span data-i18n="apply">Apply Changes</span>
|
||||
</button>
|
||||
|
||||
18
shared/base.css
Normal file
18
shared/base.css
Normal file
@@ -0,0 +1,18 @@
|
||||
/* Shared base reset and typography – used by list-manager and popup */
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: var(--font-sans);
|
||||
font-size: var(--text-base);
|
||||
line-height: var(--leading-normal);
|
||||
letter-spacing: var(--tracking-tight);
|
||||
background: var(--bg-color);
|
||||
color: var(--text-color);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
117
shared/layout.css
Normal file
117
shared/layout.css
Normal file
@@ -0,0 +1,117 @@
|
||||
/* Shared app chrome – header/topbar used by list-manager and popup */
|
||||
|
||||
/* App header bar (use with .topbar, .header, or standalone .app-header) */
|
||||
.app-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 8px 16px;
|
||||
background: var(--bg-color);
|
||||
border-bottom: 1px solid var(--input-border);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.app-header-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.app-logo {
|
||||
height: 28px;
|
||||
width: 28px;
|
||||
border-radius: 8px;
|
||||
background: var(--text-color);
|
||||
padding: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
html.dark .app-logo,
|
||||
body.dark .app-logo {
|
||||
background: var(--highlight-tag);
|
||||
}
|
||||
|
||||
.app-logo img {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.app-title {
|
||||
font-weight: 600;
|
||||
font-size: 13px;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.app-subtitle {
|
||||
font-size: 11px;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.app-header-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.app-header-actions button {
|
||||
min-height: 28px;
|
||||
padding: 4px 10px;
|
||||
font-size: 12px;
|
||||
border-radius: 6px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
/* Subdued primary button – shared orange outline style */
|
||||
.btn-primary-subdued {
|
||||
background: rgba(255, 140, 0, 0.1);
|
||||
color: var(--accent);
|
||||
border: 1px solid rgba(255, 140, 0, 0.35);
|
||||
}
|
||||
|
||||
.btn-primary-subdued:hover {
|
||||
background: rgba(255, 140, 0, 0.18);
|
||||
border-color: rgba(255, 140, 0, 0.5);
|
||||
}
|
||||
|
||||
html.dark .btn-primary-subdued,
|
||||
body.dark .btn-primary-subdued {
|
||||
background: rgba(255, 140, 0, 0.12);
|
||||
border-color: rgba(255, 140, 0, 0.4);
|
||||
}
|
||||
|
||||
html.dark .btn-primary-subdued:hover,
|
||||
body.dark .btn-primary-subdued:hover {
|
||||
background: rgba(255, 140, 0, 0.2);
|
||||
border-color: rgba(255, 140, 0, 0.55);
|
||||
}
|
||||
|
||||
/* Ghost button in header/panels */
|
||||
.app-header-actions button.ghost,
|
||||
.panel-actions button.ghost {
|
||||
background: var(--input-bg);
|
||||
border: 1px solid var(--input-border);
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.app-header-actions button.ghost:hover,
|
||||
.panel-actions button.ghost:hover {
|
||||
background: var(--section-bg);
|
||||
}
|
||||
|
||||
/* Danger button in header/panels */
|
||||
.panel-actions button.danger {
|
||||
background: rgba(239, 68, 68, 0.08);
|
||||
border: 1px solid rgba(239, 68, 68, 0.3);
|
||||
color: var(--danger);
|
||||
}
|
||||
|
||||
.panel-actions button.danger:hover {
|
||||
background: rgba(239, 68, 68, 0.15);
|
||||
border-color: rgba(239, 68, 68, 0.45);
|
||||
}
|
||||
272
shared/word-list.css
Normal file
272
shared/word-list.css
Normal file
@@ -0,0 +1,272 @@
|
||||
/* Shared word list UI – used by list-manager and popup (class names aliased for both) */
|
||||
|
||||
/* Word list container */
|
||||
.word-list,
|
||||
.word-list-container {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
background: var(--input-bg);
|
||||
border: 1px solid var(--input-border);
|
||||
border-radius: 8px;
|
||||
min-height: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.word-list .empty,
|
||||
.word-list-empty {
|
||||
padding: 16px;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
color: var(--text-color);
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
/* Word item row */
|
||||
.word-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 6px 10px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
border-bottom: 1px solid var(--input-border);
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.word-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.word-item:hover {
|
||||
background: var(--highlight-tag);
|
||||
}
|
||||
|
||||
.word-item.selected {
|
||||
background: var(--section-bg);
|
||||
border-left: 3px solid var(--accent);
|
||||
padding-left: 9px;
|
||||
}
|
||||
|
||||
.word-item.disabled {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
/* Text label (list-manager: .word-text, popup: .word-item-text) */
|
||||
.word-text,
|
||||
.word-item-text {
|
||||
flex: 1;
|
||||
font-size: 14px;
|
||||
color: var(--text-color);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
min-width: 0;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.word-text.editing,
|
||||
.word-item-text.editing {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Inline edit input */
|
||||
.word-edit-input,
|
||||
.word-item-edit-input {
|
||||
display: none;
|
||||
flex: 1;
|
||||
height: 28px;
|
||||
padding: 0 8px;
|
||||
background: var(--bg-color);
|
||||
border: 1px solid var(--accent);
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
color: var(--text-color);
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.word-edit-input:focus,
|
||||
.word-item-edit-input:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.word-edit-input.active,
|
||||
.word-item-edit-input.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Actions container */
|
||||
.word-actions,
|
||||
.word-item-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
flex-shrink: 0;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.word-actions > *,
|
||||
.word-item-actions > * {
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
/* Icon button inside word item (list-manager: .word-item .icon-btn, popup: .word-item-icon-btn) */
|
||||
.word-item .icon-btn,
|
||||
.word-item-icon-btn {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
min-width: 28px;
|
||||
min-height: 28px;
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
color: var(--text-color);
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.word-item .icon-btn:hover,
|
||||
.word-item-icon-btn:hover {
|
||||
opacity: 1;
|
||||
background: var(--highlight-tag);
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.word-item .icon-btn i,
|
||||
.word-item-icon-btn i {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* Color picker inside word item */
|
||||
.word-item input[type="color"],
|
||||
.word-item-color-picker {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--input-border);
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.word-item input[type="color"]::-webkit-color-swatch-wrapper,
|
||||
.word-item-color-picker::-webkit-color-swatch-wrapper {
|
||||
padding: 0;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.word-item input[type="color"]::-webkit-color-swatch,
|
||||
.word-item-color-picker::-webkit-color-swatch {
|
||||
border: none;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.word-item input[type="color"]:hover,
|
||||
.word-item-color-picker:hover {
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
/* Word action row (Select All, Delete, etc.) – list-manager: .word-controls .row, popup: .word-actions-row */
|
||||
.word-controls .row,
|
||||
.word-actions-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.word-controls .row button,
|
||||
.word-action-btn {
|
||||
height: 26px;
|
||||
padding: 0 8px;
|
||||
font-size: 12px;
|
||||
border-radius: 6px;
|
||||
background: var(--input-bg);
|
||||
border: 1px solid var(--input-border);
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.word-controls .row button:hover,
|
||||
.word-action-btn:hover {
|
||||
background: var(--section-bg);
|
||||
}
|
||||
|
||||
.word-controls .row button.danger,
|
||||
.word-action-btn.danger {
|
||||
background: rgba(239, 68, 68, 0.1);
|
||||
border-color: rgba(239, 68, 68, 0.3);
|
||||
color: var(--danger);
|
||||
}
|
||||
|
||||
.word-controls .row button.danger:hover,
|
||||
.word-action-btn.danger:hover {
|
||||
background: rgba(239, 68, 68, 0.2);
|
||||
}
|
||||
|
||||
/* Add-words textarea (shared look) */
|
||||
.add-words textarea,
|
||||
.add-words-textarea {
|
||||
flex: 1;
|
||||
min-height: 56px;
|
||||
padding: 6px 10px;
|
||||
background: var(--input-bg);
|
||||
color: var(--text-color);
|
||||
border: 1px solid var(--input-border);
|
||||
border-radius: 8px;
|
||||
font-size: 13px;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
.add-words textarea:focus,
|
||||
.add-words-textarea:focus {
|
||||
outline: none;
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
/* Add-words primary button (subdued) */
|
||||
.add-words button.primary,
|
||||
.add-words-button {
|
||||
background: rgba(255, 140, 0, 0.1);
|
||||
color: var(--accent);
|
||||
border: 1px solid rgba(255, 140, 0, 0.35);
|
||||
}
|
||||
|
||||
.add-words button.primary:hover,
|
||||
.add-words-button:hover {
|
||||
background: rgba(255, 140, 0, 0.18);
|
||||
border-color: rgba(255, 140, 0, 0.5);
|
||||
}
|
||||
|
||||
html.dark .add-words button.primary,
|
||||
html.dark .add-words-button,
|
||||
body.dark .add-words button.primary,
|
||||
body.dark .add-words-button {
|
||||
background: rgba(255, 140, 0, 0.12);
|
||||
border-color: rgba(255, 140, 0, 0.4);
|
||||
}
|
||||
|
||||
html.dark .add-words button.primary:hover,
|
||||
html.dark .add-words-button:hover,
|
||||
body.dark .add-words button.primary:hover,
|
||||
body.dark .add-words-button:hover {
|
||||
background: rgba(255, 140, 0, 0.2);
|
||||
border-color: rgba(255, 140, 0, 0.55);
|
||||
}
|
||||
|
||||
/* Word search input (shared) */
|
||||
.word-search-input,
|
||||
#wordSearch {
|
||||
height: 32px;
|
||||
padding: 0 10px;
|
||||
font-size: 14px;
|
||||
border-radius: 8px;
|
||||
background: var(--input-bg);
|
||||
border: 1px solid var(--input-border);
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.word-search-input:focus,
|
||||
#wordSearch:focus {
|
||||
outline: none;
|
||||
border-color: var(--accent);
|
||||
}
|
||||
Reference in New Issue
Block a user