mirror of
https://github.com/obsqrbtz/goose-highlighter.git
synced 2026-04-08 20:19:06 +03:00
style: new year theme
This commit is contained in:
@@ -1,14 +1,14 @@
|
||||
:root {
|
||||
--bg-color: #0f0f0f;
|
||||
--bg-color: #0d0f13;
|
||||
--text-color: #e8e8e8;
|
||||
--input-bg: #1c1c1c;
|
||||
--input-bg: #171b22;
|
||||
--input-border: #2d2d2d;
|
||||
--button-bg: #252525;
|
||||
--button-hover: #333333;
|
||||
--button-text: #e8e8e8;
|
||||
--accent: #ec9c23;
|
||||
--accent-hover: #ffb84d;
|
||||
--accent-text: #000;
|
||||
--accent: #7dc7ff;
|
||||
--accent-hover: #a9ddff;
|
||||
--accent-text: #000000;
|
||||
--highlight-tag: #222222;
|
||||
--highlight-tag-border: #3a3a3a;
|
||||
--danger: #ef4444;
|
||||
@@ -16,7 +16,7 @@
|
||||
--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;
|
||||
--section-bg: #13161c;
|
||||
--switch-bg: #3a3a3a;
|
||||
--checkbox-accent: #ec9c23;
|
||||
--checkbox-border: #4a4a4a;
|
||||
@@ -73,22 +73,23 @@ body {
|
||||
}
|
||||
|
||||
body.light {
|
||||
--bg-color: #f8f9fa;
|
||||
--bg-color: #eef6ff;
|
||||
--text-color: #1a1a1a;
|
||||
--input-bg: #ffffff;
|
||||
--input-border: #e0e0e0;
|
||||
--button-bg: #f0f0f0;
|
||||
--button-hover: #e5e5e5;
|
||||
--input-bg: #f3f8ff;
|
||||
--input-border: #d0e4ff;
|
||||
--button-bg: #e0f0ff;
|
||||
--button-hover: #cde8ff;
|
||||
--button-text: #1a1a1a;
|
||||
--accent: #ec9c23;
|
||||
--accent: #5ab6ff;
|
||||
--accent-text: #000;
|
||||
--highlight-tag: #f5f5f5;
|
||||
--highlight-tag-border: #e0e0e0;
|
||||
--accent-hover: #8ccfff;
|
||||
--highlight-tag: #d8edff;
|
||||
--highlight-tag-border: #c0e0ff;
|
||||
--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;
|
||||
--section-bg: #f3f8ff;
|
||||
--switch-bg: #d1d5db;
|
||||
--checkbox-accent: #ec9c23;
|
||||
--checkbox-border: #9ca3af;
|
||||
@@ -872,3 +873,25 @@ body::-webkit-scrollbar-corner,
|
||||
opacity: 0.5;
|
||||
font-size: 0.85em;
|
||||
}
|
||||
|
||||
.snow {
|
||||
pointer-events: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.snowflake {
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
color: #d0e7ff;
|
||||
font-size: 6px;
|
||||
opacity: 0.5;
|
||||
user-select: none;
|
||||
pointer-events: none;
|
||||
will-change: transform;
|
||||
}
|
||||
@@ -11,6 +11,7 @@
|
||||
</head>
|
||||
|
||||
<body class="dark">
|
||||
<div class="snow" id="snowContainer"></div>
|
||||
<div class="loading-overlay">
|
||||
<div class="loading-spinner"></div>
|
||||
</div>
|
||||
@@ -18,7 +19,8 @@
|
||||
|
||||
<div class="header-bar">
|
||||
<span class="title">
|
||||
<img src="../img/logo-outlined.png" alt="Goose Highlighter" style="height: 28px; vertical-align: middle; margin-right: 8px;"> Goose Highlighter
|
||||
<img src="../img/logo-outlined-winter.png" alt="Goose Highlighter"
|
||||
style="height: 28px; vertical-align: middle; margin-right: 8px;"> Goose Highlighter
|
||||
</span>
|
||||
<div class="icon-toggles">
|
||||
<label class="icon-toggle" data-i18n-title="toggle_highlighting_title" title="Toggle highlighting">
|
||||
@@ -33,11 +35,16 @@
|
||||
</div>
|
||||
|
||||
<div class="tabs">
|
||||
<button class="tab-button active" data-tab="lists"><i class="fa-solid fa-list"></i> <span data-i18n="tab_lists">Lists</span></button>
|
||||
<button class="tab-button" data-tab="words"><i class="fa-solid fa-tags"></i> <span data-i18n="tab_words">Words</span></button>
|
||||
<button class="tab-button" data-tab="page-highlights"><i class="fa-solid fa-location-dot"></i> <span data-i18n="tab_page_highlights">On Page</span></button>
|
||||
<button class="tab-button" data-tab="exceptions"><i class="fa-solid fa-ban"></i> <span data-i18n="tab_exceptions">Exceptions</span></button>
|
||||
<button class="tab-button" data-tab="options"><i class="fa-solid fa-sliders"></i> <span data-i18n="options">Options</span></button>
|
||||
<button class="tab-button active" data-tab="lists"><i class="fa-solid fa-list"></i> <span
|
||||
data-i18n="tab_lists">Lists</span></button>
|
||||
<button class="tab-button" data-tab="words"><i class="fa-solid fa-tags"></i> <span
|
||||
data-i18n="tab_words">Words</span></button>
|
||||
<button class="tab-button" data-tab="page-highlights"><i class="fa-solid fa-location-dot"></i> <span
|
||||
data-i18n="tab_page_highlights">On Page</span></button>
|
||||
<button class="tab-button" data-tab="exceptions"><i class="fa-solid fa-ban"></i> <span
|
||||
data-i18n="tab_exceptions">Exceptions</span></button>
|
||||
<button class="tab-button" data-tab="options"><i class="fa-solid fa-sliders"></i> <span
|
||||
data-i18n="options">Options</span></button>
|
||||
</div>
|
||||
|
||||
<div class="tab-content active" data-tab-content="lists">
|
||||
@@ -68,7 +75,8 @@
|
||||
<span data-i18n="enable_highlight">Enable Highlighting</span>
|
||||
<input type="checkbox" class="switch" id="listActive" />
|
||||
</label>
|
||||
<button id="applyListSettingsBtn"><i class="fa-solid fa-check"></i> <span data-i18n="apply">Apply</span></button>
|
||||
<button id="applyListSettingsBtn"><i class="fa-solid fa-check"></i> <span
|
||||
data-i18n="apply">Apply</span></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -80,7 +88,8 @@
|
||||
</div>
|
||||
|
||||
<div class="section" data-section="wordlist">
|
||||
<h3><i class="fa-solid fa-tags"></i> <span data-i18n="word_list">Word List</span> (<span id="wordCount">0</span>)</h3>
|
||||
<h3><i class="fa-solid fa-tags"></i> <span data-i18n="word_list">Word List</span> (<span
|
||||
id="wordCount">0</span>)</h3>
|
||||
<div class="button-row wrap">
|
||||
<button id="selectAllBtn"><span data-i18n="select_all">Select All</span></button>
|
||||
<button id="deselectAllBtn"><span data-i18n="deselect_all">Clear</span></button>
|
||||
@@ -95,11 +104,13 @@
|
||||
|
||||
<div class="tab-content" data-tab-content="page-highlights">
|
||||
<div class="section" data-section="page-highlights">
|
||||
<h3><i class="fa-solid fa-location-dot"></i> <span data-i18n="highlights_on_page">Highlights on This Page</span></h3>
|
||||
<h3><i class="fa-solid fa-location-dot"></i> <span data-i18n="highlights_on_page">Highlights on This Page</span>
|
||||
</h3>
|
||||
<div class="page-highlights-info">
|
||||
<span data-i18n="total_highlights">Total:</span> <strong id="totalHighlightsCount">0</strong>
|
||||
</div>
|
||||
<button id="refreshHighlightsBtn"><i class="fa-solid fa-rotate"></i> <span data-i18n="refresh">Refresh</span></button>
|
||||
<button id="refreshHighlightsBtn"><i class="fa-solid fa-rotate"></i> <span
|
||||
data-i18n="refresh">Refresh</span></button>
|
||||
<div id="pageHighlightsList" class="page-highlights-list"></div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -108,11 +119,13 @@
|
||||
<div class="section" data-section="exceptions">
|
||||
<h3><i class="fa-solid fa-ban"></i> <span data-i18n="site_exceptions">Site Exceptions</span></h3>
|
||||
<div class="button-row">
|
||||
<button id="toggleExceptionBtn"><i class="fa-solid fa-plus"></i> <span id="exceptionBtnText" data-i18n="add_exception">Add to Exceptions</span></button>
|
||||
<button id="toggleExceptionBtn"><i class="fa-solid fa-plus"></i> <span id="exceptionBtnText"
|
||||
data-i18n="add_exception">Add to Exceptions</span></button>
|
||||
</div>
|
||||
<h3 data-i18n="exceptions_list">Exception Sites:</h3>
|
||||
<div id="exceptionsList" class="exceptions-list"></div>
|
||||
<button id="clearExceptionsBtn" class="danger"><i class="fa-solid fa-trash"></i> <span data-i18n="clear_all">Clear All</span></button>
|
||||
<button id="clearExceptionsBtn" class="danger"><i class="fa-solid fa-trash"></i> <span
|
||||
data-i18n="clear_all">Clear All</span></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -126,7 +139,8 @@
|
||||
<div class="button-row">
|
||||
<button id="importBtn"><i class="fa-solid fa-upload"></i> <span data-i18n="import_list">Import</span></button>
|
||||
<input type="file" id="importInput" accept="application/json" hidden />
|
||||
<button id="exportBtn"><i class="fa-solid fa-download"></i> <span data-i18n="export_list">Export</span></button>
|
||||
<button id="exportBtn"><i class="fa-solid fa-download"></i> <span
|
||||
data-i18n="export_list">Export</span></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user