Common.css:修订间差异
来自卡厄思梦境WIKI
小无编辑摘要 |
无编辑摘要 |
||
| 第9行: | 第9行: | ||
#footer-right-icons { | #footer-right-icons { | ||
display:none; | display:none; | ||
} | |||
/* 标签切换样式 */ | |||
.main-line-wrap { | |||
margin: 10px 0; | |||
font-family: Arial, sans-serif; | |||
} | |||
.resp-tabs { | |||
border: 1px solid #ddd; | |||
border-radius: 5px; | |||
background: #fff; | |||
} | |||
.resp-tabs-list { | |||
list-style: none; | |||
margin: 0; | |||
padding: 0; | |||
background: #f8f9fa; | |||
border-bottom: 1px solid #ddd; | |||
border-radius: 5px 5px 0 0; | |||
overflow: hidden; | |||
} | |||
.resp-tabs-list::after { | |||
content: ""; | |||
display: table; | |||
clear: both; | |||
} | |||
.czn-list-style { | |||
float: left; | |||
margin: 0; | |||
padding: 0; | |||
border-right: 1px solid #ddd; | |||
cursor: pointer; | |||
transition: background-color 0.3s ease; | |||
} | |||
.czn-list-style:last-child { | |||
border-right: none; | |||
} | |||
.czn-list-style:hover { | |||
background-color: #e9ecef; | |||
} | |||
.czn-list-style.active { | |||
background-color: #007bff; | |||
color: white; | |||
} | |||
.czn-list-style.active:hover { | |||
background-color: #0056b3; | |||
} | |||
.tab-panel { | |||
display: block; | |||
padding: 12px 20px; | |||
color: #333; | |||
text-decoration: none; | |||
font-weight: 500; | |||
transition: color 0.3s ease; | |||
} | |||
.czn-list-style.active .tab-panel { | |||
color: white; | |||
} | |||
.resp-tabs-container { | |||
padding: 20px; | |||
background: #fff; | |||
border-radius: 0 0 5px 5px; | |||
} | |||
.resp-tab-content { | |||
display: none; | |||
animation: fadeIn 0.3s ease-in-out; | |||
} | |||
.resp-tab-content[style*="display:block"], | |||
.resp-tab-content[style*="display: block"] { | |||
display: block !important; | |||
} | |||
@keyframes fadeIn { | |||
from { opacity: 0; } | |||
to { opacity: 1; } | |||
} | |||
/* 响应式设计 */ | |||
@media (max-width: 768px) { | |||
.czn-list-style { | |||
float: none; | |||
border-right: none; | |||
border-bottom: 1px solid #ddd; | |||
} | |||
.czn-list-style:last-child { | |||
border-bottom: none; | |||
} | |||
.tab-panel { | |||
padding: 10px 15px; | |||
} | |||
.resp-tabs-container { | |||
padding: 15px; | |||
} | |||
} | } | ||
2025年9月21日 (日) 18:24的版本
/* 这里放置的CSS将应用于所有皮肤 */
/* 隐藏通知图标 */
#echo-notifications {
display:none;
}
/* 隐藏底部图标 */
#footer-right-icons {
display:none;
}
/* 标签切换样式 */
.main-line-wrap {
margin: 10px 0;
font-family: Arial, sans-serif;
}
.resp-tabs {
border: 1px solid #ddd;
border-radius: 5px;
background: #fff;
}
.resp-tabs-list {
list-style: none;
margin: 0;
padding: 0;
background: #f8f9fa;
border-bottom: 1px solid #ddd;
border-radius: 5px 5px 0 0;
overflow: hidden;
}
.resp-tabs-list::after {
content: "";
display: table;
clear: both;
}
.czn-list-style {
float: left;
margin: 0;
padding: 0;
border-right: 1px solid #ddd;
cursor: pointer;
transition: background-color 0.3s ease;
}
.czn-list-style:last-child {
border-right: none;
}
.czn-list-style:hover {
background-color: #e9ecef;
}
.czn-list-style.active {
background-color: #007bff;
color: white;
}
.czn-list-style.active:hover {
background-color: #0056b3;
}
.tab-panel {
display: block;
padding: 12px 20px;
color: #333;
text-decoration: none;
font-weight: 500;
transition: color 0.3s ease;
}
.czn-list-style.active .tab-panel {
color: white;
}
.resp-tabs-container {
padding: 20px;
background: #fff;
border-radius: 0 0 5px 5px;
}
.resp-tab-content {
display: none;
animation: fadeIn 0.3s ease-in-out;
}
.resp-tab-content[style*="display:block"],
.resp-tab-content[style*="display: block"] {
display: block !important;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
/* 响应式设计 */
@media (max-width: 768px) {
.czn-list-style {
float: none;
border-right: none;
border-bottom: 1px solid #ddd;
}
.czn-list-style:last-child {
border-bottom: none;
}
.tab-panel {
padding: 10px 15px;
}
.resp-tabs-container {
padding: 15px;
}
}