Fork
/
mediawiki-skins-Citizen
派生自 Mirror/mediawiki-skins-Citizen
2
0
派生 0
代码 工单 合并请求 版本发布 百科 动态

refactor: ♻️ remove pure CSS icons 

Signed-off-by: WaitSpring <me@waitspring.com>
这个提交包含在：
WaitSpring 2023-11-18 19:41:10 +08:00
父节点 5c9d6bf94d
当前提交 1ff42a703c
找不到此签名对应的密钥
共有 6 个文件被更改，包括 37 次插入 和 173 次删除
显示统计 下载 Patch 文件 下载 Diff 文件 展开所有文件 折叠所有文件

61
resources/skins.citizen.styles/Drawer__button.less
查看文件

@ -1,39 +1,5 @@
.citizen-drawer__button {
position: relative; // To make background hover state visible
&Icon {
display: grid;
place-content: center;
> div {
display: block;
width: 1.125rem;
height: 0.125rem;
border-radius: var(--border-radius--large);
margin: 0.09375rem 0;
background-color: #000;
transform-origin: 0.25rem 0;
transition: inherit;
&:first-child {
transform-origin: 0 0;
}
&:nth-child(2) {
transform-origin: 0 100%;
}
}
}
&:hover {
> .citizen-drawer__buttonIcon {
> div {
&:first-child {
transform: translate3d(-50%, 0, 0);
}
}
}
}
}
// RTL
@ -54,32 +20,5 @@
// Transform all the slices of the button into a crossmark
~ .citizen-drawer__button {
background-color: var(--background-color-primary--active);
> .citizen-drawer__buttonIcon {
> div {
&:first-child {
opacity: 0;
/* @noflip */
transform: rotate(0deg) scale(0.2, 0.2);
}
// Reflect line
&:nth-child(2) {
/* @noflip */
transform: rotate(-45deg) translate3d(-0.125rem, 0.375rem, 0);
}
// Hide line
&:last-child {
/* @noflip */
transform: rotate(45deg) translate3d(-0.3125rem, -0.4375rem, 0);
}
}
}
&:hover {
> .citizen-drawer__buttonIcon {
transform: scale(0.85);
}
}
}
}

35
resources/skins.citizen.styles/Header.less
查看文件

@ -23,7 +23,7 @@
&__button {
// Fallback
justify-content: center;
display: grid;
display: flex;
width: var(--header-button-size);
height: var(--header-button-size);
border-radius: var(--border-radius--small);
@ -32,32 +32,18 @@
// Used in checkbox hack
&Checkbox {
position: absolute;
display: block;
width: inherit;
height: inherit;
display: flex;
width: var(--header-button-size);
height: var(--header-button-size);
contain: strict;
}
// Pure CSS icons
&Icon {
overflow: hidden; // Sometimes CSS animation can clip
width: var(--header-icon-size);
height: var(--header-icon-size);
contain: strict;
}
&Icon,
.citizen-ui-icon::before {
opacity: var(--opacity-icon-base);
transition: @transition-transform, @transition-opacity;
align-items: center;
justify-content: center;
}
&:hover {
background-color: var(--background-color-quiet--hover);
.citizen-ui-icon::before,
.citizen-header__buttonIcon {
.citizen-ui-icon::before {
opacity: var(--opacity-icon-base--hover);
}
}
@ -65,8 +51,7 @@
&:active {
background-color: var(--background-color-quiet--active);
.citizen-ui-icon::before,
.citizen-header__buttonIcon {
.citizen-ui-icon::before {
opacity: var(--opacity-icon-base--active);
}
}
@ -130,10 +115,6 @@
&__button {
&:hover {
background-color: none;
.citizen-header__buttonIcon {
opacity: var(--opacity-icon-base);
}
}
}
}

49
resources/skins.citizen.styles/Search__button.less
查看文件

@ -44,32 +44,6 @@
}
}
}
&:hover {
> .citizen-search__buttonIcon {
> div {
&:first-child {
height: 0.375rem;
transform: translate3d(0.125rem, 0.125rem, 0) rotate(-45deg);
}
}
}
}
}
/* @noflip */
.rtl {
.citizen-search__buttonIcon {
> div {
&:first-child {
left: 0.125rem;
}
&:nth-child(2) {
margin-left: -0.25rem;
}
}
}
}
// Checkbox hack
@ -77,28 +51,5 @@
// Transform the magnifying glass button into a crossmark
~ .citizen-search__button {
background-color: var(--background-color-primary--active);
> .citizen-search__buttonIcon {
> div {
&:first-child {
height: 1rem;
transform: translate3d(-0.3125rem, -0.3125rem, 0) rotate(135deg);
}
&:nth-child(2) {
border-color: transparent;
}
&:last-child {
opacity: 1;
}
}
}
&:hover {
> .citizen-search__buttonIcon {
transform: scale(0.85);
}
}
}
}

1
skin.json
查看文件

@ -197,6 +197,7 @@
"lock",
"logIn",
"logOut",
"menu",
"message",
"move",
"printer",

30
templates/Drawer__button.mustache
查看文件

@ -1,18 +1,14 @@
{{!
string msg-citizen-drawer-toggle The label used by the drawer button.
}}
<div class="citizen-drawer__button citizen-header__button">
<div class="citizen-drawer__buttonIcon citizen-header__buttonIcon">
<div></div>
<div></div>
<div></div>
</div>
<label
id="citizen-drawer__buttonCheckbox"
class="mw-checkbox-hack-button citizen-header__buttonCheckbox"
for="citizen-drawer__checkbox"
title="{{msg-citizen-drawer-toggle}}"
tabindex="0">
<span>{{msg-citizen-drawer-toggle}}</span>
</label>
{{!
string msg-citizen-drawer-toggle The label used by the drawer button.
}}
<div class="citizen-drawer__button citizen-header__button">
<label
id="citizen-drawer__buttonCheckbox"
class="mw-checkbox-hack-button citizen-header__buttonCheckbox"
for="citizen-drawer__checkbox"
title="{{msg-citizen-drawer-toggle}}"
tabindex="0">
<span class="citizen-ui-icon mw-ui-icon-wikimedia-menu"></span>
<span>{{msg-citizen-drawer-toggle}}</span>
</label>
</div>

34
templates/Search__button.mustache
查看文件

@ -1,19 +1,15 @@
{{!
string msg-citizen-search-toggle-shortcut shortcut key message
string msg-citizen-search-toggle tooltip message for search toggle
}}
<div class="citizen-search__button citizen-header__button">
<div class="citizen-search__buttonIcon citizen-header__buttonIcon">
<div></div>
<div></div>
<div></div>
</div>
<label
id="citizen-search__buttonCheckbox"
class="mw-checkbox-hack-button citizen-header__buttonCheckbox"
for="citizen-search__checkbox"
title="{{msg-citizen-search-toggle}} {{msg-citizen-search-toggle-shortcut}}"
tabindex="0">
<span>{{msg-citizen-search-toggle}}</span>
</label>
</div>
{{!
string msg-citizen-search-toggle-shortcut shortcut key message
string msg-citizen-search-toggle tooltip message for search toggle
}}
<div class="citizen-search__button citizen-header__button">
<label
id="citizen-search__buttonCheckbox"
class="mw-checkbox-hack-button citizen-header__buttonCheckbox"
for="citizen-search__checkbox"
title="{{msg-citizen-search-toggle}} {{msg-citizen-search-toggle-shortcut}}"
tabindex="0">
<span class="citizen-ui-icon mw-ui-icon-wikimedia-search"></span>
<span>{{msg-citizen-search-toggle}}</span>
</label>
</div>