无编辑摘要 |
无编辑摘要 |
||
| 第21行: | 第21行: | ||
/* 筛选相关 */ | /* 筛选相关 */ | ||
/* | /* 筛选器容器 */ | ||
.filter-container { | .mw-filter-container { | ||
background: #f8f9fa; | background: #f8f9fa; | ||
border: 1px solid #a2a9b1; | border: 1px solid #a2a9b1; | ||
border-radius: | border-radius: 4px; | ||
padding: 16px; | padding: 16px; | ||
margin-bottom: | margin-bottom: 20px; | ||
box-shadow: 0 | box-shadow: 0 1px 3px rgba(0,0,0,0.1); | ||
} | } | ||
/* 筛选器头部 */ | /* 筛选器头部 */ | ||
.filter-header { | .mw-filter-header { | ||
display: flex; | |||
justify-content: space-between; | |||
align-items: center; | |||
margin-bottom: 16px; | margin-bottom: 16px; | ||
border-bottom: 1px solid #eaecf0; | |||
padding-bottom: 12px; | padding-bottom: 12px; | ||
} | } | ||
.filter- | .mw-filter-header h3 { | ||
margin: 0; | margin: 0; | ||
font-size: 18px; | font-size: 18px; | ||
| 第45行: | 第48行: | ||
} | } | ||
.mw-filter-actions { | |||
.filter- | |||
display: flex; | display: flex; | ||
gap: 8px; | |||
} | |||
.mw-filter-action { | |||
padding: 6px 16px; | |||
background: #3366cc; | |||
color: white; | |||
border-radius: 2px; | |||
cursor: pointer; | |||
font-size: 14px; | |||
user-select: none; | |||
transition: background-color 0.2s; | |||
border: none; | |||
outline: none; | |||
} | |||
.mw-filter-action.mw-filter-reset { | |||
background: #72777d; | |||
} | |||
.mw-filter-action:hover { | |||
background: #2a4b8d; | |||
} | |||
.mw-filter-action.mw-filter-reset:hover { | |||
background: #54595d; | |||
} | |||
.mw-filter-action:focus { | |||
box-shadow: 0 0 0 2px rgba(51,102,204,0.3); | |||
} | } | ||
.filter-group { | /* 筛选组 */ | ||
.mw-filter-group { | |||
margin-bottom: 20px; | |||
background: white; | background: white; | ||
border: 1px solid #c8ccd1; | border: 1px solid #c8ccd1; | ||
border-radius: | border-radius: 4px; | ||
padding: 12px; | padding: 12px; | ||
position: relative; | |||
} | } | ||
.filter-group | .mw-filter-group h4 { | ||
margin: 0 0 12px 0; | |||
margin | |||
padding-bottom: 8px; | padding-bottom: 8px; | ||
border-bottom: 1px solid #f0f0f0; | border-bottom: 1px solid #f0f0f0; | ||
font-size: 16px; | |||
font- | |||
color: #54595d; | color: #54595d; | ||
padding-right: 60px; | |||
} | } | ||
.filter-group-clear { | .mw-filter-group-clear { | ||
position: absolute; | |||
right: 12px; | |||
top: 12px; | |||
color: #36c; | color: #36c; | ||
font-size: 12px; | font-size: 12px; | ||
cursor: pointer; | cursor: pointer; | ||
padding: 2px 8px; | padding: 2px 8px; | ||
border-radius: | border-radius: 2px; | ||
user-select: none; | |||
} | } | ||
.filter-group-clear:hover { | .mw-filter-group-clear:hover { | ||
background: #eaf3ff; | background: #eaf3ff; | ||
} | } | ||
/* 筛选项 */ | /* 筛选项 */ | ||
.filter-options { | .mw-filter-options { | ||
display: flex; | display: flex; | ||
flex-wrap: wrap; | flex-wrap: wrap; | ||
| 第101行: | 第124行: | ||
} | } | ||
.filter-option { | .mw-filter-option { | ||
padding: 6px 12px; | padding: 6px 12px; | ||
background: #f0f0f0; | background: #f0f0f0; | ||
| 第107行: | 第130行: | ||
border-radius: 4px; | border-radius: 4px; | ||
cursor: pointer; | cursor: pointer; | ||
font-size: 14px; | |||
user-select: none; | |||
transition: all 0.2s; | transition: all 0.2s; | ||
outline: none; | |||
} | } | ||
.filter-option:hover { | .mw-filter-option:hover { | ||
background: #e0e0e0; | background: #e0e0e0; | ||
border-color: #a2a9b1; | border-color: #a2a9b1; | ||
} | } | ||
.filter-option.selected { | .mw-filter-option:focus { | ||
box-shadow: 0 0 0 2px rgba(42,75,141,0.3); | |||
border-color: #2a4b8d; | |||
} | |||
.mw-filter-option.mw-filter-selected { | |||
background: #2a4b8d; | background: #2a4b8d; | ||
color: white; | color: white; | ||
| 第123行: | 第152行: | ||
} | } | ||
.filter-option.filter-option-all { | .mw-filter-option.mw-filter-option-all { | ||
background: #eaf3ff; | background: #eaf3ff; | ||
border-color: #36c; | border-color: #36c; | ||
| 第129行: | 第158行: | ||
} | } | ||
.filter-option.filter-option-all.selected { | .mw-filter-option.mw-filter-option-all.mw-filter-selected { | ||
background: #36c; | background: #36c; | ||
color: white; | color: white; | ||
} | } | ||
.filter-option-label { | .mw-filter-option-label { | ||
display: inline-block; | display: inline-block; | ||
} | } | ||
/* 活动筛选标签 */ | /* 活动筛选标签 */ | ||
.active-filters { | .mw-active-filters { | ||
margin-top: 16px; | margin-top: 16px; | ||
padding: 12px; | padding: 12px; | ||
| 第158行: | 第174行: | ||
border-radius: 4px; | border-radius: 4px; | ||
border: 1px solid #eaecf0; | border: 1px solid #eaecf0; | ||
display: none; | |||
} | } | ||
.active-filters-label { | .mw-active-filters-label { | ||
display: block; | display: block; | ||
font-weight: 600; | font-weight: 600; | ||
| 第168行: | 第185行: | ||
} | } | ||
.active-filters-list { | .mw-active-filters-list { | ||
display: flex; | display: flex; | ||
flex-wrap: wrap; | flex-wrap: wrap; | ||
| 第174行: | 第191行: | ||
} | } | ||
.active-filter-tag { | .mw-active-filter-tag { | ||
display: inline-flex; | display: inline-flex; | ||
align-items: center; | align-items: center; | ||
| 第182行: | 第199行: | ||
border-radius: 16px; | border-radius: 16px; | ||
font-size: 13px; | font-size: 13px; | ||
max-width: 300px; | |||
} | } | ||
.active-filter-text { | .mw-active-filter-text { | ||
margin-right: 8px; | margin-right: 8px; | ||
overflow: hidden; | |||
text-overflow: ellipsis; | |||
white-space: nowrap; | |||
} | } | ||
.active-filter-remove { | .mw-active-filter-remove { | ||
color: #36c; | color: #36c; | ||
cursor: pointer; | cursor: pointer; | ||
| 第197行: | 第216行: | ||
padding: 0 2px; | padding: 0 2px; | ||
border-radius: 2px; | border-radius: 2px; | ||
flex-shrink: 0; | |||
user-select: none; | |||
outline: none; | |||
} | } | ||
.active-filter-remove:hover { | .mw-active-filter-remove:hover { | ||
background: #36c; | background: #36c; | ||
color: white; | color: white; | ||
} | } | ||
/* | .mw-active-filter-remove:focus { | ||
.filtered-out { | box-shadow: 0 0 0 2px rgba(51,102,204,0.3); | ||
} | |||
/* 筛选统计 */ | |||
.mw-filter-stats { | |||
margin-top: 12px; | |||
padding-top: 12px; | |||
border-top: 1px solid #eaecf0; | |||
color: #54595d; | |||
font-size: 14px; | |||
display: none; | |||
} | |||
/* 被筛选元素的样式 */ | |||
.mw-filtered-out { | |||
display: none !important; | display: none !important; | ||
} | } | ||
.filtered-in { | .mw-filtered-in { | ||
animation: | animation: mwFilterFadeIn 0.3s; | ||
} | } | ||
@keyframes | @keyframes mwFilterFadeIn { | ||
from { opacity: 0.5; } | from { opacity: 0.5; } | ||
to { opacity: 1; } | to { opacity: 1; } | ||
| 第220行: | 第256行: | ||
/* 响应式设计 */ | /* 响应式设计 */ | ||
@media (max-width: 768px) { | @media (max-width: 768px) { | ||
.filter- | .mw-filter-header { | ||
flex-direction: column; | flex-direction: column; | ||
align-items: flex-start; | |||
gap: 12px; | |||
} | |||
.mw-filter-actions { | |||
align-self: stretch; | |||
} | } | ||
.filter- | .mw-filter-action { | ||
flex: 1; | |||
text-align: center; | |||
} | } | ||
.filter- | .mw-filter-group h4 { | ||
padding-right: 0; | |||
padding- | |||
} | } | ||
.filter- | .mw-filter-group-clear { | ||
position: static; | |||
display: inline-block; | |||
margin-left: 8px; | |||
} | } | ||
} | } | ||
2025年12月22日 (一) 15:44的版本
/* 这里放置的CSS将应用于所有皮肤 */
.gallery-details-tabs {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
/* 导航栏 */
#p-navigation {
display: none;
}
#p-navigation .mw-portlet-body ul li:nth-last-of-type(2) {
display: none;
}
#p-navigation .mw-portlet-body ul span:nth-last-of-type(2) {
display: none;
}
/* 筛选相关 */
/* 筛选器容器 */
.mw-filter-container {
background: #f8f9fa;
border: 1px solid #a2a9b1;
border-radius: 4px;
padding: 16px;
margin-bottom: 20px;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
/* 筛选器头部 */
.mw-filter-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
border-bottom: 1px solid #eaecf0;
padding-bottom: 12px;
}
.mw-filter-header h3 {
margin: 0;
font-size: 18px;
color: #202122;
font-weight: bold;
}
.mw-filter-actions {
display: flex;
gap: 8px;
}
.mw-filter-action {
padding: 6px 16px;
background: #3366cc;
color: white;
border-radius: 2px;
cursor: pointer;
font-size: 14px;
user-select: none;
transition: background-color 0.2s;
border: none;
outline: none;
}
.mw-filter-action.mw-filter-reset {
background: #72777d;
}
.mw-filter-action:hover {
background: #2a4b8d;
}
.mw-filter-action.mw-filter-reset:hover {
background: #54595d;
}
.mw-filter-action:focus {
box-shadow: 0 0 0 2px rgba(51,102,204,0.3);
}
/* 筛选组 */
.mw-filter-group {
margin-bottom: 20px;
background: white;
border: 1px solid #c8ccd1;
border-radius: 4px;
padding: 12px;
position: relative;
}
.mw-filter-group h4 {
margin: 0 0 12px 0;
padding-bottom: 8px;
border-bottom: 1px solid #f0f0f0;
font-size: 16px;
color: #54595d;
padding-right: 60px;
}
.mw-filter-group-clear {
position: absolute;
right: 12px;
top: 12px;
color: #36c;
font-size: 12px;
cursor: pointer;
padding: 2px 8px;
border-radius: 2px;
user-select: none;
}
.mw-filter-group-clear:hover {
background: #eaf3ff;
}
/* 筛选项 */
.mw-filter-options {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.mw-filter-option {
padding: 6px 12px;
background: #f0f0f0;
border: 1px solid #c8ccd1;
border-radius: 4px;
cursor: pointer;
font-size: 14px;
user-select: none;
transition: all 0.2s;
outline: none;
}
.mw-filter-option:hover {
background: #e0e0e0;
border-color: #a2a9b1;
}
.mw-filter-option:focus {
box-shadow: 0 0 0 2px rgba(42,75,141,0.3);
border-color: #2a4b8d;
}
.mw-filter-option.mw-filter-selected {
background: #2a4b8d;
color: white;
border-color: #2a4b8d;
}
.mw-filter-option.mw-filter-option-all {
background: #eaf3ff;
border-color: #36c;
color: #36c;
}
.mw-filter-option.mw-filter-option-all.mw-filter-selected {
background: #36c;
color: white;
}
.mw-filter-option-label {
display: inline-block;
}
/* 活动筛选标签 */
.mw-active-filters {
margin-top: 16px;
padding: 12px;
background: #f8f9fa;
border-radius: 4px;
border: 1px solid #eaecf0;
display: none;
}
.mw-active-filters-label {
display: block;
font-weight: 600;
color: #54595d;
margin-bottom: 8px;
font-size: 14px;
}
.mw-active-filters-list {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.mw-active-filter-tag {
display: inline-flex;
align-items: center;
padding: 4px 12px;
background: #eaf3ff;
border: 1px solid #36c;
border-radius: 16px;
font-size: 13px;
max-width: 300px;
}
.mw-active-filter-text {
margin-right: 8px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.mw-active-filter-remove {
color: #36c;
cursor: pointer;
font-size: 16px;
line-height: 1;
padding: 0 2px;
border-radius: 2px;
flex-shrink: 0;
user-select: none;
outline: none;
}
.mw-active-filter-remove:hover {
background: #36c;
color: white;
}
.mw-active-filter-remove:focus {
box-shadow: 0 0 0 2px rgba(51,102,204,0.3);
}
/* 筛选统计 */
.mw-filter-stats {
margin-top: 12px;
padding-top: 12px;
border-top: 1px solid #eaecf0;
color: #54595d;
font-size: 14px;
display: none;
}
/* 被筛选元素的样式 */
.mw-filtered-out {
display: none !important;
}
.mw-filtered-in {
animation: mwFilterFadeIn 0.3s;
}
@keyframes mwFilterFadeIn {
from { opacity: 0.5; }
to { opacity: 1; }
}
/* 响应式设计 */
@media (max-width: 768px) {
.mw-filter-header {
flex-direction: column;
align-items: flex-start;
gap: 12px;
}
.mw-filter-actions {
align-self: stretch;
}
.mw-filter-action {
flex: 1;
text-align: center;
}
.mw-filter-group h4 {
padding-right: 0;
}
.mw-filter-group-clear {
position: static;
display: inline-block;
margin-left: 8px;
}
}