无编辑摘要 |
无编辑摘要 |
||
| 第16行: | 第16行: | ||
#p-navigation .mw-portlet-body ul span:nth-last-of-type(2) { | #p-navigation .mw-portlet-body ul span:nth-last-of-type(2) { | ||
display: none; | display: none; | ||
} | |||
/* 筛选相关 */ | |||
/* 筛选容器 */ | |||
.filter-container { | |||
background: #f8f9fa; | |||
border: 1px solid #a2a9b1; | |||
border-radius: 8px; | |||
padding: 16px; | |||
margin-bottom: 24px; | |||
box-shadow: 0 2px 4px rgba(0,0,0,0.1); | |||
} | |||
/* 筛选器头部 */ | |||
.filter-header { | |||
margin-bottom: 16px; | |||
padding-bottom: 12px; | |||
border-bottom: 1px solid #eaecf0; | |||
} | |||
.filter-title { | |||
margin: 0; | |||
font-size: 18px; | |||
color: #202122; | |||
font-weight: bold; | |||
} | |||
/* 筛选器组 */ | |||
.filter-groups { | |||
display: flex; | |||
flex-wrap: wrap; | |||
gap: 16px; | |||
margin-bottom: 20px; | |||
} | |||
.filter-group { | |||
flex: 1; | |||
min-width: 200px; | |||
background: white; | |||
border: 1px solid #c8ccd1; | |||
border-radius: 6px; | |||
padding: 12px; | |||
} | |||
.filter-group-header { | |||
display: flex; | |||
justify-content: space-between; | |||
align-items: center; | |||
margin-bottom: 8px; | |||
padding-bottom: 8px; | |||
border-bottom: 1px solid #f0f0f0; | |||
} | |||
.filter-group-title { | |||
font-weight: 600; | |||
color: #54595d; | |||
font-size: 14px; | |||
text-transform: uppercase; | |||
letter-spacing: 0.5px; | |||
} | |||
.filter-group-clear { | |||
display: none; | |||
background: none; | |||
border: none; | |||
color: #36c; | |||
font-size: 12px; | |||
cursor: pointer; | |||
padding: 2px 8px; | |||
border-radius: 3px; | |||
} | |||
.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; | |||
transition: all 0.2s; | |||
font-size: 13px; | |||
user-select: none; | |||
} | |||
.filter-option:hover { | |||
background: #e0e0e0; | |||
border-color: #a2a9b1; | |||
} | |||
.filter-option.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.selected { | |||
background: #36c; | |||
color: white; | |||
} | |||
.filter-option-label { | |||
display: inline-block; | |||
} | |||
/* 筛选操作 */ | |||
.filter-actions { | |||
display: flex; | |||
gap: 8px; | |||
margin-top: 16px; | |||
padding-top: 16px; | |||
border-top: 1px solid #eaecf0; | |||
} | |||
.filter-actions .mw-ui-button { | |||
flex: 1; | |||
} | |||
/* 活动筛选标签 */ | |||
.active-filters { | |||
margin-top: 16px; | |||
padding: 12px; | |||
background: #f8f9fa; | |||
border-radius: 4px; | |||
border: 1px solid #eaecf0; | |||
} | |||
.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; | |||
} | |||
.active-filter-text { | |||
margin-right: 8px; | |||
} | |||
.active-filter-remove { | |||
background: none; | |||
border: none; | |||
color: #36c; | |||
cursor: pointer; | |||
font-size: 16px; | |||
line-height: 1; | |||
padding: 0 2px; | |||
border-radius: 2px; | |||
} | |||
.active-filter-remove:hover { | |||
background: #36c; | |||
color: white; | |||
} | |||
/* 被筛选内容的状态 */ | |||
.filtered-out { | |||
display: none !important; | |||
} | |||
.filtered-in { | |||
animation: fadeIn 0.3s; | |||
} | |||
@keyframes fadeIn { | |||
from { opacity: 0.5; } | |||
to { opacity: 1; } | |||
} | |||
/* 响应式设计 */ | |||
@media (max-width: 768px) { | |||
.filter-groups { | |||
flex-direction: column; | |||
} | |||
.filter-group { | |||
min-width: 100%; | |||
} | |||
.filter-options { | |||
overflow-x: auto; | |||
flex-wrap: nowrap; | |||
padding-bottom: 8px; | |||
} | |||
.filter-option { | |||
white-space: nowrap; | |||
flex-shrink: 0; | |||
} | |||
} | } | ||
2025年12月22日 (一) 15:22的版本
/* 这里放置的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;
}
/* 筛选相关 */
/* 筛选容器 */
.filter-container {
background: #f8f9fa;
border: 1px solid #a2a9b1;
border-radius: 8px;
padding: 16px;
margin-bottom: 24px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
/* 筛选器头部 */
.filter-header {
margin-bottom: 16px;
padding-bottom: 12px;
border-bottom: 1px solid #eaecf0;
}
.filter-title {
margin: 0;
font-size: 18px;
color: #202122;
font-weight: bold;
}
/* 筛选器组 */
.filter-groups {
display: flex;
flex-wrap: wrap;
gap: 16px;
margin-bottom: 20px;
}
.filter-group {
flex: 1;
min-width: 200px;
background: white;
border: 1px solid #c8ccd1;
border-radius: 6px;
padding: 12px;
}
.filter-group-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 8px;
padding-bottom: 8px;
border-bottom: 1px solid #f0f0f0;
}
.filter-group-title {
font-weight: 600;
color: #54595d;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.filter-group-clear {
display: none;
background: none;
border: none;
color: #36c;
font-size: 12px;
cursor: pointer;
padding: 2px 8px;
border-radius: 3px;
}
.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;
transition: all 0.2s;
font-size: 13px;
user-select: none;
}
.filter-option:hover {
background: #e0e0e0;
border-color: #a2a9b1;
}
.filter-option.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.selected {
background: #36c;
color: white;
}
.filter-option-label {
display: inline-block;
}
/* 筛选操作 */
.filter-actions {
display: flex;
gap: 8px;
margin-top: 16px;
padding-top: 16px;
border-top: 1px solid #eaecf0;
}
.filter-actions .mw-ui-button {
flex: 1;
}
/* 活动筛选标签 */
.active-filters {
margin-top: 16px;
padding: 12px;
background: #f8f9fa;
border-radius: 4px;
border: 1px solid #eaecf0;
}
.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;
}
.active-filter-text {
margin-right: 8px;
}
.active-filter-remove {
background: none;
border: none;
color: #36c;
cursor: pointer;
font-size: 16px;
line-height: 1;
padding: 0 2px;
border-radius: 2px;
}
.active-filter-remove:hover {
background: #36c;
color: white;
}
/* 被筛选内容的状态 */
.filtered-out {
display: none !important;
}
.filtered-in {
animation: fadeIn 0.3s;
}
@keyframes fadeIn {
from { opacity: 0.5; }
to { opacity: 1; }
}
/* 响应式设计 */
@media (max-width: 768px) {
.filter-groups {
flex-direction: column;
}
.filter-group {
min-width: 100%;
}
.filter-options {
overflow-x: auto;
flex-wrap: nowrap;
padding-bottom: 8px;
}
.filter-option {
white-space: nowrap;
flex-shrink: 0;
}
}