@@ -336,6 +336,7 @@
336336}
337337338338.topbar-theme-mode__btn {
339+position: relative;
339340width: 30px;
340341height: 30px;
341342display: inline-flex;
@@ -379,6 +380,90 @@
379380stroke-linejoin: round;
380381}
381382383+.topbar-theme-mode__btn[data-tooltip]::before,
384+.topbar-theme-mode__btn[data-tooltip]::after {
385+position: absolute;
386+left: 50%;
387+pointer-events: none;
388+opacity: 0;
389+transition:
390+ opacity var(--duration-fast) var(--ease-out),
391+ transform var(--duration-fast) var(--ease-out);
392+z-index: 60;
393+}
394+395+.topbar-theme-mode__btn[data-tooltip]::before {
396+content: "";
397+top: calc(100% + 4px);
398+border-width: 6px;
399+border-style: solid;
400+border-color: transparent transparent color-mix(in srgb, var(--card) 94%, black 6%) transparent;
401+transform: translate(-50%, -3px);
402+}
403+404+.topbar-theme-mode__btn[data-tooltip]::after {
405+content: attr(data-tooltip);
406+top: calc(100% + 10px);
407+max-width: min(220px, 60vw);
408+padding: 7px 9px;
409+border: 1px solid color-mix(in srgb, var(--border-strong) 84%, transparent);
410+border-radius: var(--radius-md);
411+background: color-mix(in srgb, var(--card) 94%, black 6%);
412+box-shadow:
413+0 10px 28px rgba(0, 0, 0, 0.24),
414+0 0 0 1px rgba(255, 255, 255, 0.04);
415+color: var(--text);
416+font-size: 11px;
417+font-weight: 500;
418+line-height: 1.35;
419+text-align: center;
420+white-space: normal;
421+transform: translate(-50%, -4px);
422+}
423+424+.topbar-theme-mode__btn:last-child[data-tooltip]::before,
425+.topbar-theme-mode__btn:last-child[data-tooltip]::after {
426+left: auto;
427+}
428+429+.topbar-theme-mode__btn:last-child[data-tooltip]::before {
430+right: 9px;
431+transform: translateY(-3px);
432+}
433+434+.topbar-theme-mode__btn:last-child[data-tooltip]::after {
435+right: 0;
436+transform: translateY(-4px);
437+}
438+439+@media (hover: hover) {
440+ .topbar-theme-mode__btn[data-tooltip]:hover::before,
441+ .topbar-theme-mode__btn[data-tooltip]:hover::after {
442+opacity: 1;
443+ }
444+445+ .topbar-theme-mode__btn[data-tooltip]:hover::before,
446+ .topbar-theme-mode__btn[data-tooltip]:hover::after {
447+transform: translate(-50%, 0);
448+ }
449+450+ .topbar-theme-mode__btn:last-child[data-tooltip]:hover::before,
451+ .topbar-theme-mode__btn:last-child[data-tooltip]:hover::after {
452+transform: translateY(0);
453+ }
454+}
455+456+.topbar-theme-mode__btn[data-tooltip]:focus-visible::before,
457+.topbar-theme-mode__btn[data-tooltip]:focus-visible::after {
458+opacity: 1;
459+transform: translate(-50%, 0);
460+}
461+462+.topbar-theme-mode__btn:last-child[data-tooltip]:focus-visible::before,
463+.topbar-theme-mode__btn:last-child[data-tooltip]:focus-visible::after {
464+transform: translateY(0);
465+}
466+382467/* ===========================================
383468 Navigation Sidebar
384469 =========================================== */
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。