MediaWiki:Gadget-RightToolbar.css:修订间差异
外观
删除的内容 添加的内容
Maintenance script(留言 | 贡献) 统一样式层级与 SelectionCounter |
Maintenance script(留言 | 贡献) 小 优化 RightToolbar 样式并在移动端隐藏 |
||
| 第1行: | 第1行: | ||
.mw-right-toolbar { |
.mw-right-toolbar { |
||
position: fixed; |
|||
| ⚫ | |||
bottom: 96px; |
|||
bottom: 96px; |
|||
| ⚫ | |||
display: flex; |
|||
flex-direction: column; |
|||
align-items: flex-end; |
|||
gap: 6px; |
|||
| ⚫ | |||
opacity: 0; |
|||
transform: translateY(12px); |
|||
transition: opacity 160ms ease, transform 160ms ease; |
|||
} |
} |
||
.mw-right-toolbar.is-visible { |
.mw-right-toolbar.is-visible { |
||
opacity: 1; |
|||
transform: translateY(0); |
|||
} |
} |
||
.mw-right-toolbar .mw-rt-button, |
.mw-right-toolbar .mw-rt-button, |
||
.mw-right-toolbar .mw-rt-clock { |
.mw-right-toolbar .mw-rt-clock { |
||
border: 1px solid var(--border-color-base, #a2a9b1); |
|||
| ⚫ | |||
| ⚫ | |||
background: var(--color-surface-0, rgba(255, 255, 255, 0.92)); |
|||
| ⚫ | |||
| ⚫ | |||
| ⚫ | |||
| ⚫ | |||
font-size: 12px; |
|||
line-height: 1.4; |
|||
| ⚫ | |||
| ⚫ | |||
| ⚫ | |||
} |
} |
||
.mw-right-toolbar .mw-rt-button { |
.mw-right-toolbar .mw-rt-button { |
||
min-width: 48px; |
|||
| ⚫ | |||
| ⚫ | |||
| ⚫ | |||
| ⚫ | |||
| ⚫ | |||
| ⚫ | |||
| ⚫ | |||
} |
} |
||
.mw-right-toolbar .mw-rt-button:hover |
.mw-right-toolbar .mw-rt-button:hover, |
||
.mw-right-toolbar .mw-rt-button:focus-visible { |
|||
opacity: 1; |
|||
background: var(--background-color-progressive-subtle, #eaecf0); |
|||
} |
} |
||
.mw-right-toolbar .mw-rt-button:active { |
.mw-right-toolbar .mw-rt-button:active { |
||
transform: translateY(1px); |
|||
} |
|||
.mw-right-toolbar .mw-rt-button[hidden] { |
|||
display: none; |
|||
} |
|||
.mw-right-toolbar .mw-rt-clock { |
|||
min-width: 132px; |
|||
padding: 7px 10px; |
|||
text-align: right; |
|||
} |
} |
||
.skin-theme-clientpref-night .mw-right-toolbar .mw-rt-button, |
.skin-theme-clientpref-night .mw-right-toolbar .mw-rt-button, |
||
.skin-theme-clientpref-night .mw-right-toolbar .mw-rt-clock { |
.skin-theme-clientpref-night .mw-right-toolbar .mw-rt-clock { |
||
| ⚫ | |||
background: rgba(32, 33, 34, 0.92); |
|||
| ⚫ | |||
color: #f8f9fa; |
|||
} |
} |
||
@media (max-width: 768px) { |
@media (max-width: 768px) { |
||
.mw-right-toolbar { |
|||
display: none !important; |
|||
bottom: 72px; |
|||
} |
|||
| ⚫ | |||
} |
|||
} |
} |
||
2026年7月19日 (日) 20:11的最新版本
.mw-right-toolbar {
position: fixed;
right: 24px;
bottom: 96px;
z-index: 2147483647;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 6px;
opacity: 0;
transform: translateY(12px);
transition: opacity 160ms ease, transform 160ms ease;
}
.mw-right-toolbar.is-visible {
opacity: 1;
transform: translateY(0);
}
.mw-right-toolbar .mw-rt-button,
.mw-right-toolbar .mw-rt-clock {
border: 1px solid var(--border-color-base, #a2a9b1);
border-radius: 4px;
background: var(--color-surface-0, rgba(255, 255, 255, 0.92));
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
color: var(--color-base, #202122);
font-size: 12px;
line-height: 1.4;
backdrop-filter: blur(6px);
}
.mw-right-toolbar .mw-rt-button {
min-width: 48px;
padding: 6px 10px;
cursor: pointer;
opacity: 0.86;
transition: background 120ms ease, opacity 120ms ease, transform 120ms ease;
}
.mw-right-toolbar .mw-rt-button:hover,
.mw-right-toolbar .mw-rt-button:focus-visible {
opacity: 1;
background: var(--background-color-progressive-subtle, #eaecf0);
}
.mw-right-toolbar .mw-rt-button:active {
transform: translateY(1px);
}
.mw-right-toolbar .mw-rt-button[hidden] {
display: none;
}
.mw-right-toolbar .mw-rt-clock {
min-width: 132px;
padding: 7px 10px;
text-align: right;
}
.skin-theme-clientpref-night .mw-right-toolbar .mw-rt-button,
.skin-theme-clientpref-night .mw-right-toolbar .mw-rt-clock {
border-color: #54595d;
background: rgba(32, 33, 34, 0.92);
color: #f8f9fa;
}
@media (max-width: 768px) {
.mw-right-toolbar {
display: none !important;
}
}