跳转到内容

MediaWiki:Gadget-RightToolbar.css:修订间差异

来自陋室
删除的内容 添加的内容
Maintenance script​(留言 | 贡献)
统一样式层级与 SelectionCounter
Maintenance script​(留言 | 贡献)
小 优化 RightToolbar 样式并在移动端隐藏
 
第1行: 第1行:
.mw-right-toolbar {
.mw-right-toolbar {
position: fixed;
position: fixed;
⚫
right: 24px;
bottom: 96px;
right: 24px;
bottom: 96px;
⚫
z-index: 2147483647;
display: flex;
display: flex;
flex-direction: column;
flex-direction: column;
align-items: flex-end;
align-items: flex-end;
gap: 6px;
gap: 6px;
⚫
z-index: 2147483647;
opacity: 0;
opacity: 0;
transform: translateY(12px);
transform: translateY(12px);
transition: opacity 0.4s ease, transform 0.4s ease;
transition: opacity 160ms ease, transform 160ms ease;
}
}


.mw-right-toolbar.is-visible {
.mw-right-toolbar.is-visible {
opacity: 1;
opacity: 1;
transform: translateY(0);
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 {
background: var(--color-surface-0, rgba(255, 255, 255, 0.85));
border: 1px solid var(--border-color-base, #a2a9b1);
⚫
border-radius: 4px;
⚫
border: 1px solid var(--border-color-base, #aaa);
color: var(--color-base, #333);
background: var(--color-surface-0, rgba(255, 255, 255, 0.92));
⚫
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
⚫
border-radius: 4px;
⚫
color: var(--color-base, #202122);
⚫
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
font-size: 12px;
font-size: 12px;
line-height: 1.4;
line-height: 1.4;
⚫
backdrop-filter: blur(6px);
⚫
padding: 6px 12px;
⚫
backdrop-filter: blur(4px);
}
}


.mw-right-toolbar .mw-rt-button {
.mw-right-toolbar .mw-rt-button {
min-width: 48px;
⚫
cursor: pointer;
⚫
padding: 6px 10px;
⚫
opacity: 0.8;
⚫
cursor: pointer;
⚫
transition: background 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
⚫
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:hover,
.mw-right-toolbar .mw-rt-button:focus-visible {
opacity: 1;
opacity: 1;
background: var(--background-color-progressive-subtle, #ddd);
background: var(--background-color-progressive-subtle, #eaecf0);
}
}


.mw-right-toolbar .mw-rt-button:active {
.mw-right-toolbar .mw-rt-button:active {
transform: translateY(1px);
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 {
⚫
border-color: #54595d;
background: rgba(30, 30, 30, 0.85);
background: rgba(32, 33, 34, 0.92);
⚫
border-color: #555;
color: #eee;
color: #f8f9fa;
}
}


@media (max-width: 768px) {
@media (max-width: 768px) {
.mw-right-toolbar {
.mw-right-toolbar {
display: none !important;
bottom: 72px;
}
⚫
right: 16px;
}
}
}

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;
	}
}