diff options
| author | Alejandro Soto <alejandro@34project.org> | 2025-09-13 14:55:15 -0600 |
|---|---|---|
| committer | Alejandro Soto <alejandro@34project.org> | 2025-09-13 14:55:15 -0600 |
| commit | a2ea06d513a5802964f8f0ef5795cec7e548ed7b (patch) | |
| tree | 8afb58e3749d19bc46cffc6473f3059d647c515b /sass/parts/_theme-switch.scss | |
Squashed 'themes/tabi-lean/' content from commit 95c8796
git-subtree-dir: themes/tabi-lean
git-subtree-split: 95c879696445ede40daa7a30a88dae5dd74d5c0c
Diffstat (limited to 'sass/parts/_theme-switch.scss')
| -rw-r--r-- | sass/parts/_theme-switch.scss | 42 |
1 files changed, 42 insertions, 0 deletions
diff --git a/sass/parts/_theme-switch.scss b/sass/parts/_theme-switch.scss new file mode 100644 index 0000000..9c5bd4f --- /dev/null +++ b/sass/parts/_theme-switch.scss @@ -0,0 +1,42 @@ +.theme-switcher { + -webkit-mask: var(--theme-switcher-svg); + position: relative; + align-self: center; + cursor: pointer; + margin-inline-start: 0.5rem; + background: var(--text-color); + width: 1rem; + height: 1rem; + &:hover { + background: var(--meta-color); + } +} + +.theme-switcher-wrapper { + position: relative; +} + +.theme-resetter { + -webkit-mask: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" %3E%3Cpath d="M295.87-193.869v-78.001h291.152q43.63 0 72.369-33.424 28.739-33.423 28.739-79.271t-28.739-79.391Q630.652-497.5 587.022-497.5H343.913l87.478 87.478-55.652 55.153L193.869-536.5l181.87-181.631 55.652 55.653-87.478 86.978h243.109q75.435 0 127.272 56.522 51.837 56.521 51.837 134.174 0 77.652-51.837 134.293-51.837 56.642-127.272 56.642H295.87Z"/%3E%3C/svg%3E'); + position: absolute; + visibility: hidden; + opacity: 0; + transition: opacity 0.3s ease, visibility 0.3s ease; + transition-delay: 0.5s; + cursor: pointer; + inset-block-start: -0.6rem; + inset-inline-end: -0.6rem; + background: var(--text-color); + width: 0.8rem; + height: 0.8rem; +} + +.theme-switcher-wrapper:hover .theme-resetter.has-custom-theme { + visibility: visible; + opacity: 1; + transition: opacity 0.1s ease, visibility 0.1s ease; + transition-delay: 0s; + &:hover { + background: var(--meta-color); + } +} |
