style: new year theme

This commit is contained in:
2025-12-11 16:56:55 +03:00
parent 3de4190ad7
commit 7a50d24a9d
5 changed files with 152 additions and 32 deletions

View File

@@ -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;
}

View File

@@ -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>