From 9336f789c13606703349154d4cc8ce9b44d5296f Mon Sep 17 00:00:00 2001 From: OLDREDSTONE Date: Sat, 29 Nov 2025 16:45:51 +0800 Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=94=B9=E4=BA=86=E9=A1=B5=E9=9D=A2?= =?UTF-8?q?=E5=8F=B3=E4=BE=A7=E5=8A=9F=E8=83=BD=E5=8C=BA=E7=9A=84=E6=A0=B7?= =?UTF-8?q?=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- script/switchLightDarkMode.js | 17 +++++++++++------ style/base.css | 15 +++++++++++++++ style/color.css | 7 +++++++ style/dark.css | 3 +++ style/light.css | 3 +++ 5 files changed, 39 insertions(+), 6 deletions(-) diff --git a/script/switchLightDarkMode.js b/script/switchLightDarkMode.js index 8d194ae..91b4977 100644 --- a/script/switchLightDarkMode.js +++ b/script/switchLightDarkMode.js @@ -19,16 +19,17 @@ const themeModes = ['light', 'dark', 'auto',] var switchSpan = document.createElement('span') switchSpan.id = 'switchLightDarkModeDivBeforeArticle' +switchSpan.classList.add('controlSpan') switchSpan.style.position = 'fixed' switchSpan.style.right = switchLightDarkModeOptions.right.toString() + 'px' switchSpan.style.top = switchLightDarkModeOptions.top.toString() + 'px' -const lightModeIconXml = '' -const darkModeIconXml = '' -const autoModeIconXml = '' -const zoomInIconXml = '' -const zoomOutIconXml = '' -const zoomDefaultIconXml = '' +const lightModeIconXml = '' +const darkModeIconXml = '' +const autoModeIconXml = '' +const zoomInIconXml = '' +const zoomOutIconXml = '' +const zoomDefaultIconXml = '' const ottoIconXml = ` @@ -125,6 +126,7 @@ function plugin(hook, vm) { var zoomInSpan = document.createElement('span') zoomInSpan.id = 'zoomInSpan' + zoomInSpan.classList.add('controlSpan') zoomInSpan.style.position = 'fixed' zoomInSpan.style.right = switchLightDarkModeOptions.right.toString() + 'px' zoomInSpan.style.top = (switchLightDarkModeOptions.top + 35).toString() + 'px' @@ -132,6 +134,7 @@ function plugin(hook, vm) { var zoomOutSpan = document.createElement('span') zoomOutSpan.id = 'zoomOutSpan' + zoomOutSpan.classList.add('controlSpan') zoomOutSpan.style.position = 'fixed' zoomOutSpan.style.right = switchLightDarkModeOptions.right.toString() + 'px' zoomOutSpan.style.top = (switchLightDarkModeOptions.top + 70).toString() + 'px' @@ -139,6 +142,7 @@ function plugin(hook, vm) { var zoomDefaultSpan = document.createElement('span') zoomDefaultSpan.id = 'zoomDefaultSpan' + zoomDefaultSpan.classList.add('controlSpan') zoomDefaultSpan.style.position = 'fixed' zoomDefaultSpan.style.right = switchLightDarkModeOptions.right.toString() + 'px' zoomDefaultSpan.style.top = (switchLightDarkModeOptions.top + 105).toString() + 'px' @@ -146,6 +150,7 @@ function plugin(hook, vm) { var ottoSpan = document.createElement('span') ottoSpan.id = 'ottoSpan' + ottoSpan.classList.add('controlSpan') ottoSpan.style.position = 'fixed' ottoSpan.style.right = switchLightDarkModeOptions.right.toString() + 'px' ottoSpan.style.top = (switchLightDarkModeOptions.top + 140).toString() + 'px' diff --git a/style/base.css b/style/base.css index 639d011..debabd0 100644 --- a/style/base.css +++ b/style/base.css @@ -1291,4 +1291,19 @@ del { margin: 0; border-radius: 5px; font: 300 12px 'd9c', 'd9'; +} + +.controlSpan { + border-radius: 8px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + font-family: 'd9', sans-serif; + font-size: 16px; + height: 30px; + width: 30px; + transition: background-color 0.3s, transform 0.2s; + z-index: 20; } \ No newline at end of file diff --git a/style/color.css b/style/color.css index 8f5fdb9..0061ad7 100644 --- a/style/color.css +++ b/style/color.css @@ -223,4 +223,11 @@ div.medium-zoom-overlay{ &>p{ background-color: var(--background-color); } +} + +.controlSpan{ + background-color: var(--span-color); + &>svg{ + stroke: var(--span-fill-color); + } } \ No newline at end of file diff --git a/style/dark.css b/style/dark.css index 3dd00f1..55175df 100644 --- a/style/dark.css +++ b/style/dark.css @@ -20,6 +20,9 @@ body.dark { -webkit-tap-highlight-color: rgb(0, 0, 0); --special-theme-position-backgound-color: #177500; + + --span-color: #2020203a; + --span-fill-color: #3c7e7e; } body.dark .sidebar li>a:has(>img) { diff --git a/style/light.css b/style/light.css index 9f53c88..b2f927e 100644 --- a/style/light.css +++ b/style/light.css @@ -20,6 +20,9 @@ body.light { -webkit-tap-highlight-color: rgb(255, 255, 255); --special-theme-position-backgound-color: #05a000; + + --span-color: #e0e0e03a; + --span-fill-color: #008585; } body.light .sidebar li>a:has(>img) {