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) {