obsqrbtz/goose-highlighter
1
0
Fork 0
mirror of https://github.com/obsqrbtz/goose-highlighter.git synced 2026-04-08 20:19:06 +03:00
Code Issues Packages Projects Releases Wiki Activity

restyled buttons

Browse Source
This commit is contained in:
Daniel Dada
2026-02-06 12:01:15 +03:00
parent 1bff2bd28d
commit b7f98912f2
3 changed files with 128 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

95
list-manager/list-manager.css
View File

@@ -84,6 +84,12 @@ body.dark .title img {
opacity: 0.6; opacity: 0.6;
} }
.topbar-actions {
display: flex;
align-items: center;
gap: 8px;
}
.topbar-actions button { .topbar-actions button {
min-height: 28px; min-height: 28px;
padding: 4px 10px; padding: 4px 10px;
@@ -95,13 +101,26 @@ body.dark .title img {
} }
.topbar-actions button.primary { .topbar-actions button.primary {
background: var(--accent); background: rgba(255, 140, 0, 0.1);
color: var(--accent-text); color: var(--accent);
border: none; border: 1px solid rgba(255, 140, 0, 0.35);
} }
.topbar-actions button.primary:hover { .topbar-actions button.primary:hover {
background: var(--accent-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 { .topbar-actions button.ghost {
@@ -188,6 +207,27 @@ body.dark .title img {
min-height: 28px; min-height: 28px;
} }
.lists-panel .panel-actions button.ghost {
background: var(--input-bg);
border: 1px solid var(--input-border);
color: var(--text-color);
}
.lists-panel .panel-actions button.ghost: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 { .panel-actions.secondary {
margin-top: 0; margin-top: 0;
gap: 6px; gap: 6px;
@@ -426,6 +466,29 @@ body.dark .list-item.selected {
flex-shrink: 0; 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);
}
.add-words button.primary:hover {
background: rgba(255, 140, 0, 0.18);
border-color: rgba(255, 140, 0, 0.5);
}
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);
}
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: action row matches popup .word-actions-row / .word-action-btn */
.word-controls .row { .word-controls .row {
display: flex; display: flex;
@@ -458,6 +521,30 @@ body.dark .list-item.selected {
background: rgba(239, 68, 68, 0.2); background: rgba(239, 68, 68, 0.2);
} }
/* Subdued primary/danger in list manager – outline style, less distracting */
.compact-btn.primary {
background: rgba(255, 140, 0, 0.1);
color: var(--accent);
border: 1px solid rgba(255, 140, 0, 0.35);
}
.compact-btn.primary:hover {
background: rgba(255, 140, 0, 0.18);
border-color: rgba(255, 140, 0, 0.5);
}
html.dark .compact-btn.primary,
body.dark .compact-btn.primary {
background: rgba(255, 140, 0, 0.12);
border-color: rgba(255, 140, 0, 0.4);
}
html.dark .compact-btn.primary:hover,
body.dark .compact-btn.primary:hover {
background: rgba(255, 140, 0, 0.2);
border-color: rgba(255, 140, 0, 0.55);
}
.word-controls input[type="text"], .word-controls input[type="text"],
.word-controls select { .word-controls select {
flex: 1; flex: 1;

4
list-manager/list-manager.html
View File

@@ -36,8 +36,8 @@
<div class="panel-header"> <div class="panel-header">
<h2 data-i18n="tab_lists">Lists</h2> <h2 data-i18n="tab_lists">Lists</h2>
<div class="panel-actions"> <div class="panel-actions">
<button id="duplicateListBtn"><i class="fa-solid fa-clone"></i> <span data-i18n="duplicate">Duplicate</span></button> <button id="duplicateListBtn" class="ghost"><i class="fa-solid fa-clone"></i> <span data-i18n="duplicate">Duplicate</span></button>
<button id="mergeListsBtn"><i class="fa-solid fa-code-merge"></i> <span data-i18n="merge">Merge</span></button> <button id="mergeListsBtn" class="ghost"><i class="fa-solid fa-code-merge"></i> <span data-i18n="merge">Merge</span></button>
<button id="deleteListsBtn" class="danger"><i class="fa-solid fa-trash"></i> <span data-i18n="delete_selected">Delete</span></button> <button id="deleteListsBtn" class="danger"><i class="fa-solid fa-trash"></i> <span data-i18n="delete_selected">Delete</span></button>
</div> </div>
</div> </div>

44
popup/popup.css
View File

@@ -590,7 +590,7 @@ body.dark .header-logo {
opacity: 0.6; opacity: 0.6;
} }
/* Apply Button */ /* Apply Button – same subdued primary style as list-manager */
.apply-button { .apply-button {
width: 100%; width: 100%;
height: 32px; height: 32px;
@@ -598,9 +598,9 @@ body.dark .header-logo {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
gap: 8px; gap: 8px;
background: var(--accent); background: rgba(255, 140, 0, 0.1);
color: var(--accent-text); color: var(--accent);
border: none; border: 1px solid rgba(255, 140, 0, 0.35);
border-radius: 6px; border-radius: 6px;
cursor: pointer; cursor: pointer;
font-size: var(--text-base); font-size: var(--text-base);
@@ -610,7 +610,20 @@ body.dark .header-logo {
} }
.apply-button:hover { .apply-button:hover {
background: var(--accent-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 { .apply-button i {
@@ -673,9 +686,9 @@ body.dark .header-logo {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background: var(--accent); background: rgba(255, 140, 0, 0.1);
color: var(--accent-text); color: var(--accent);
border: none; border: 1px solid rgba(255, 140, 0, 0.35);
border-radius: 8px; border-radius: 8px;
cursor: pointer; cursor: pointer;
font-size: var(--text-md); font-size: var(--text-md);
@@ -684,7 +697,20 @@ body.dark .header-logo {
} }
.add-words-button:hover { .add-words-button:hover {
background: var(--accent-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 { .add-words-button:disabled {