无编辑摘要 |
无编辑摘要 |
||
| 第28行: | 第28行: | ||
/* 筛选相关 */ | /* 筛选相关 */ | ||
/* 筛选器容器 */ | /* 筛选器容器 */ | ||
. | .filter-container { | ||
background: #f8f9fa; | background: #f8f9fa; | ||
border: 1px solid #a2a9b1; | border: 1px solid #a2a9b1; | ||
| 第38行: | 第38行: | ||
/* 筛选器头部 */ | /* 筛选器头部 */ | ||
. | .filter-header { | ||
display: flex; | display: flex; | ||
justify-content: space-between; | justify-content: space-between; | ||
| 第47行: | 第47行: | ||
} | } | ||
. | .filter-header h3 { | ||
margin: 0; | margin: 0; | ||
font-size: 18px; | font-size: 18px; | ||
| 第54行: | 第54行: | ||
} | } | ||
. | .filter-actions { | ||
display: flex; | display: flex; | ||
gap: 8px; | gap: 8px; | ||
} | } | ||
. | .filter-action { | ||
padding: 6px 16px; | padding: 6px 16px; | ||
background: #3366cc; | background: #3366cc; | ||
| 第72行: | 第72行: | ||
} | } | ||
. | .filter-action.filter-reset { | ||
background: #72777d; | background: #72777d; | ||
} | } | ||
. | .filter-action:hover { | ||
background: #2a4b8d; | background: #2a4b8d; | ||
} | } | ||
. | .filter-action.filter-reset:hover { | ||
background: #54595d; | background: #54595d; | ||
} | } | ||
. | .filter-action:focus { | ||
box-shadow: 0 0 0 2px rgba(51,102,204,0.3); | box-shadow: 0 0 0 2px rgba(51,102,204,0.3); | ||
} | } | ||
/* 筛选组 */ | /* 筛选组 */ | ||
. | .filter-group { | ||
margin-bottom: 20px; | margin-bottom: 20px; | ||
background: white; | background: white; | ||
| 第98行: | 第98行: | ||
} | } | ||
. | .filter-group h4 { | ||
margin: 0 0 12px 0; | margin: 0 0 12px 0; | ||
padding-bottom: 8px; | padding-bottom: 8px; | ||
| 第107行: | 第107行: | ||
} | } | ||
. | .filter-group-clear { | ||
position: absolute; | position: absolute; | ||
right: 12px; | right: 12px; | ||
| 第119行: | 第119行: | ||
} | } | ||
. | .filter-group-clear:hover { | ||
background: #eaf3ff; | background: #eaf3ff; | ||
} | } | ||
/* 筛选项 */ | /* 筛选项 */ | ||
. | .filter-options { | ||
display: flex; | display: flex; | ||
flex-wrap: wrap; | flex-wrap: wrap; | ||
| 第130行: | 第130行: | ||
} | } | ||
. | .filter-option { | ||
padding: 6px 12px; | padding: 6px 12px; | ||
background: #f0f0f0; | background: #f0f0f0; | ||
| 第142行: | 第142行: | ||
} | } | ||
. | .filter-option:hover { | ||
background: #e0e0e0; | background: #e0e0e0; | ||
border-color: #a2a9b1; | border-color: #a2a9b1; | ||
} | } | ||
. | .filter-option:focus { | ||
box-shadow: 0 0 0 2px rgba(42,75,141,0.3); | box-shadow: 0 0 0 2px rgba(42,75,141,0.3); | ||
border-color: #2a4b8d; | border-color: #2a4b8d; | ||
} | } | ||
. | .filter-option.filter-selected { | ||
background: #2a4b8d; | background: #2a4b8d; | ||
color: white; | color: white; | ||
| 第158行: | 第158行: | ||
} | } | ||
. | .filter-option.filter-option-all { | ||
background: #eaf3ff; | background: #eaf3ff; | ||
border-color: #36c; | border-color: #36c; | ||
| 第164行: | 第164行: | ||
} | } | ||
. | .filter-option.filter-option-all.filter-selected { | ||
background: #36c; | background: #36c; | ||
color: white; | color: white; | ||
} | } | ||
. | .filter-option-label { | ||
display: inline-block; | display: inline-block; | ||
} | } | ||
/* 活动筛选标签 */ | /* 活动筛选标签 */ | ||
. | .active-filters { | ||
margin-top: 16px; | margin-top: 16px; | ||
padding: 12px; | padding: 12px; | ||
| 第183行: | 第183行: | ||
} | } | ||
. | .active-filters-label { | ||
display: block; | display: block; | ||
font-weight: 600; | font-weight: 600; | ||
| 第191行: | 第191行: | ||
} | } | ||
. | .active-filters-list { | ||
display: flex; | display: flex; | ||
flex-wrap: wrap; | flex-wrap: wrap; | ||
| 第197行: | 第197行: | ||
} | } | ||
. | .active-filter-tag { | ||
display: inline-flex; | display: inline-flex; | ||
align-items: center; | align-items: center; | ||
| 第208行: | 第208行: | ||
} | } | ||
. | .active-filter-text { | ||
margin-right: 8px; | margin-right: 8px; | ||
overflow: hidden; | overflow: hidden; | ||
| 第215行: | 第215行: | ||
} | } | ||
. | .active-filter-remove { | ||
color: #36c; | color: #36c; | ||
cursor: pointer; | cursor: pointer; | ||
| 第227行: | 第227行: | ||
} | } | ||
. | .active-filter-remove:hover { | ||
background: #36c; | background: #36c; | ||
color: white; | color: white; | ||
} | } | ||
. | .active-filter-remove:focus { | ||
box-shadow: 0 0 0 2px rgba(51,102,204,0.3); | box-shadow: 0 0 0 2px rgba(51,102,204,0.3); | ||
} | } | ||
/* 筛选统计 */ | /* 筛选统计 */ | ||
. | .filter-stats { | ||
margin-top: 12px; | margin-top: 12px; | ||
padding-top: 12px; | padding-top: 12px; | ||
| 第247行: | 第247行: | ||
/* 被筛选元素的样式 */ | /* 被筛选元素的样式 */ | ||
. | .filtered-out { | ||
display: none !important; | display: none !important; | ||
} | } | ||
. | .filtered-in { | ||
animation: | animation: filterFadeIn 0.3s; | ||
} | } | ||
@keyframes | @keyframes filterFadeIn { | ||
from { opacity: 0.5; } | from { opacity: 0.5; } | ||
to { opacity: 1; } | to { opacity: 1; } | ||
| 第262行: | 第262行: | ||
/* 响应式设计 */ | /* 响应式设计 */ | ||
@media (max-width: 768px) { | @media (max-width: 768px) { | ||
. | .filter-header { | ||
flex-direction: column; | flex-direction: column; | ||
align-items: flex-start; | align-items: flex-start; | ||
| 第268行: | 第268行: | ||
} | } | ||
. | .filter-actions { | ||
align-self: stretch; | align-self: stretch; | ||
} | } | ||
. | .filter-action { | ||
flex: 1; | flex: 1; | ||
text-align: center; | text-align: center; | ||
} | } | ||
. | .filter-group h4 { | ||
padding-right: 0; | padding-right: 0; | ||
} | } | ||
. | .filter-group-clear { | ||
position: static; | position: static; | ||
display: inline-block; | display: inline-block; | ||
2025年12月22日 (一) 16:25的版本
/* 这里放置的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;
}
/* 目录相关 */
#toc {
display: none;
}
/* 筛选相关 */
/* 筛选器容器 */
.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);
}
/* 筛选器头部 */
.filter-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
border-bottom: 1px solid #eaecf0;
padding-bottom: 12px;
}
.filter-header h3 {
margin: 0;
font-size: 18px;
color: #202122;
font-weight: bold;
}
.filter-actions {
display: flex;
gap: 8px;
}
.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;
}
.filter-action.filter-reset {
background: #72777d;
}
.filter-action:hover {
background: #2a4b8d;
}
.filter-action.filter-reset:hover {
background: #54595d;
}
.filter-action:focus {
box-shadow: 0 0 0 2px rgba(51,102,204,0.3);
}
/* 筛选组 */
.filter-group {
margin-bottom: 20px;
background: white;
border: 1px solid #c8ccd1;
border-radius: 4px;
padding: 12px;
position: relative;
}
.filter-group h4 {
margin: 0 0 12px 0;
padding-bottom: 8px;
border-bottom: 1px solid #f0f0f0;
font-size: 16px;
color: #54595d;
padding-right: 60px;
}
.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;
}
.filter-group-clear:hover {
background: #eaf3ff;
}
/* 筛选项 */
.filter-options {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.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;
}
.filter-option:hover {
background: #e0e0e0;
border-color: #a2a9b1;
}
.filter-option:focus {
box-shadow: 0 0 0 2px rgba(42,75,141,0.3);
border-color: #2a4b8d;
}
.filter-option.filter-selected {
background: #2a4b8d;
color: white;
border-color: #2a4b8d;
}
.filter-option.filter-option-all {
background: #eaf3ff;
border-color: #36c;
color: #36c;
}
.filter-option.filter-option-all.filter-selected {
background: #36c;
color: white;
}
.filter-option-label {
display: inline-block;
}
/* 活动筛选标签 */
.active-filters {
margin-top: 16px;
padding: 12px;
background: #f8f9fa;
border-radius: 4px;
border: 1px solid #eaecf0;
display: none;
}
.active-filters-label {
display: block;
font-weight: 600;
color: #54595d;
margin-bottom: 8px;
font-size: 14px;
}
.active-filters-list {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.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;
}
.active-filter-text {
margin-right: 8px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.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;
}
.active-filter-remove:hover {
background: #36c;
color: white;
}
.active-filter-remove:focus {
box-shadow: 0 0 0 2px rgba(51,102,204,0.3);
}
/* 筛选统计 */
.filter-stats {
margin-top: 12px;
padding-top: 12px;
border-top: 1px solid #eaecf0;
color: #54595d;
font-size: 14px;
display: none;
}
/* 被筛选元素的样式 */
.filtered-out {
display: none !important;
}
.filtered-in {
animation: filterFadeIn 0.3s;
}
@keyframes filterFadeIn {
from { opacity: 0.5; }
to { opacity: 1; }
}
/* 响应式设计 */
@media (max-width: 768px) {
.filter-header {
flex-direction: column;
align-items: flex-start;
gap: 12px;
}
.filter-actions {
align-self: stretch;
}
.filter-action {
flex: 1;
text-align: center;
}
.filter-group h4 {
padding-right: 0;
}
.filter-group-clear {
position: static;
display: inline-block;
margin-left: 8px;
}
}