打开/关闭搜索
打开/关闭菜单
30
8
13
1.6K
陋室
打开/关闭外观设置菜单
打开/关闭个人菜单
未登录
未登录用户的IP地址会在进行任意编辑后公开展示。

MediaWiki:Common.css：修订间差异

MediaWiki界面页面
更多操作
以互动方式浏览历史
←上一编辑下一编辑→
XP-jia​（留言 | 贡献）
行政员、​界面管理员、​管理员
1,047次编辑
删除的内容 添加的内容
XP-jia​（留言 | 贡献）
行政员、​界面管理员、​管理员
1,047次编辑
改版
标签：已被回退
XP-jia​（留言 | 贡献）
行政员、​界面管理员、​管理员
1,047次编辑
ds
标签：已被回退
第1行： 第1行：
/* ===========================
/* ===========================
字体与基础设置
全局字体设置
=========================== */
=========================== */
body {
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
"Noto Sans", "Noto Sans CJK SC", "Noto Sans CJK TC", "Noto Sans JP", "Noto Sans KR",
"Noto Sans", "Noto Sans CJK SC", "Noto Sans CJK TC", "Noto Sans JP",
"PingFang SC", "Microsoft YaHei", sans-serif;
"Noto Sans KR", sans-serif, "PingFang SC", "Hiragino Sans GB",
"Microsoft YaHei", "WenQuanYi Micro Hei", "SimSun", "SimHei",
background-color: #ffffff;
"Songti SC", "KaiTi", "MingLiU", "PMingLiU", "Microsoft JhengHei", "Malgun Gothic";
line-height: 1.7;
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
color: #333;
min-height: 100vh;
}
}


/* ===========================
/* ===========================
顶部横幅
横幅标语样式
=========================== */
=========================== */
.banner {
.banner {
height: auto;
display: flex;
display: flex;
flex-direction: column;
flex-direction: column;
justify-content: center;
justify-content: center;
align-items: center;
align-items: center;
background: linear-gradient(90deg, #b30000, #e64545);
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
border-radius: 12px;
color: white;
color: white;
font-weight: bold;
padding: 24px 20px;
margin-bottom: 25px;
border-radius: 20px;
padding: 24px 32px;
text-align: center;
text-align: center;
margin: 20px 0;
box-shadow: 0 6px 14px rgba(0,0,0,0.2);
position: relative;
overflow: hidden;
}
}
.banner .chinese-text { font-size: 26px; font-weight: 700; margin-bottom: 8px; }
.banner .english-text { font-size: 16px; opacity: 0.9; }


.banner::before {
/* ===========================
content: '';
主分类模块
position: absolute;
=========================== */
top: -50%;
.main-category {
background: #fafafa;
left: -50%;
width: 200%;
border-left: 6px solid #b30000;
height: 200%;
background: radial-gradient(circle, rgba(255,255,255,0.1) 1px, transparent 1px);
background-size: 20px 20px;
animation: float 20s linear infinite;
}

@keyframes float {
0% { transform: translate(0, 0) rotate(0deg); }
100% { transform: translate(-20px, -20px) rotate(360deg); }
}

.banner-text {
margin: 0;
line-height: 1.4;
position: relative;
z-index: 2;
}

.banner .chinese-text {
font-size: 28px;
font-weight: 700;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.banner .english-text {
font-size: 18px;
font-weight: 500;
opacity: 0.95;
margin-top: 8px;
}
}


/* ===========================
/* ===========================
内容卡片
内容块样式 - 改进版
=========================== */
=========================== */
.content-box {
.content-box {
background: #ffffff;
margin: 15px;
border-radius: 12px;
padding: 25px;
border: 1px solid #e0e0e0;
border-radius: 16px;
padding: 22px;
border: none;
background: rgba(255, 255, 255, 0.9);
margin: 10px;
backdrop-filter: blur(10px);
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
transition: all 0.3s ease;
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
position: relative;
overflow: hidden;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}
}


.content-box:hover {
.content-box::before {
content: '';
transform: translateY(-6px);
position: absolute;
box-shadow: 0 8px 20px rgba(0,0,0,0.15);
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, #667eea, #764ba2);
transform: scaleX(0);
transition: transform 0.3s ease;
}

.content-box:hover::before {
transform: scaleX(1);
}
}


.content-box h2 {
.content-box h2 {
font-size: 1.25rem;
position: relative;
margin-bottom: 12px;
padding-bottom: 12px;
margin-bottom: 16px;
border-left: 5px solid #b30000;
border-bottom: 2px solid #e0e0e0;
padding-left: 10px;
color: #333;
font-size: 1.3rem;
color: #2c3e50;
display: flex;
align-items: center;
gap: 10px;
}

.content-box h2::before {
font-size: 1.5em;
}

.content-box p {
line-height: 1.7;
font-size: 0.95rem;
color: #555;
margin-bottom: 0;
}

.content-box:hover {
transform: translateY(-8px) scale(1.02);
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
background: rgba(255, 255, 255, 0.95);
}
}


/* ===========================
/* ===========================
网格布局 - 改进版
区块分色
=========================== */
=========================== */
.flex-container {
.section-think { background: #f7f6f4; padding: 30px 20px; border-radius: 12px; }
display: grid;
.section-engineering { background: #f4f8fb; padding: 30px 20px; border-radius: 12px; }
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
.section-growth { background: #f6faf6; padding: 30px 20px; border-radius: 12px; }
gap: 25px;
.section-structure { background: #ffffff; padding: 30px 20px; border-radius: 12px; }
margin: 25px 0;
}

.homepage-section {
margin: 40px 0;
}


/* ===========================
/* ===========================
特殊分类样式
Flex 布局
=========================== */
=========================== */
/* 知识掌握模型区域 */
.flex-container {
.content-box:first-of-type {
display: flex;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
flex-wrap: wrap;
color: white;
justify-content: space-between;
gap: 18px;
}
}

.flex-container .content-box {
.content-box:first-of-type h2 {
flex: 1 1 calc(33% - 18px);
min-width: 280px;
color: white;
border-bottom-color: rgba(255,255,255,0.3);
box-sizing: border-box;
}
}


.content-box:first-of-type p {
/* 让每个部分首卡更突出 */
color: rgba(255,255,255,0.9);
.flex-container .content-box:first-child {
}
flex: 2 1 calc(66% - 12px);

background: linear-gradient(135deg, #fff8f8, #ffeaea);
.content-box:first-of-type .navbox {
background: rgba(255,255,255,0.1);
border-radius: 10px;
padding: 15px;
}

/* 最近更改区域 */
.content-box:nth-of-type(2) {
border-left: 5px solid #e74c3c;
}

/* 哲学与思想区域 */
.homepage-section:nth-child(1) .content-box:nth-child(1) {
border-left: 5px solid #3498db;
}

/* 文学与艺术区域 */
.homepage-section:nth-child(1) .content-box:nth-child(2) {
border-left: 5px solid #9b59b6;
}

/* 技术与数据区域 */
.homepage-section:nth-child(1) .content-box:nth-child(3) {
border-left: 5px solid #2ecc71;
}

/* 工程与实践区域 */
.homepage-section:nth-child(2) .content-box:nth-child(1) {
border-left: 5px solid #e67e22;
}

/* 数据与智能区域 */
.homepage-section:nth-child(2) .content-box:nth-child(2) {
border-left: 5px solid #1abc9c;
}

/* 软件与系统区域 */
.homepage-section:nth-child(2) .content-box:nth-child(3) {
border-left: 5px solid #34495e;
}

/* 学习与成长区域 */
.homepage-section:nth-child(3) .content-box:nth-child(1) {
border-left: 5px solid #f39c12;
}

/* 管理与人文区域 */
.homepage-section:nth-child(3) .content-box:nth-child(2) {
border-left: 5px solid #d35400;
}

/* 竞赛与创造区域 */
.homepage-section:nth-child(3) .content-box:nth-child(3) {
border-left: 5px solid #c0392b;
}

/* 站点与结构区域 */
.content-box:last-of-type {
border-left: 5px solid #7f8c8d;
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
color: white;
}

.content-box:last-of-type h2 {
color: white;
border-bottom-color: rgba(255,255,255,0.3);
}

.content-box:last-of-type p {
color: rgba(255,255,255,0.9);
}
}


/* ===========================
/* ===========================
响应式设计
导航框样式
=========================== */
=========================== */
.navbox {
background: transparent;
border: none;
margin: 10px 0;
}

.navbox a {
color: inherit;
text-decoration: none;
padding: 4px 8px;
border-radius: 6px;
transition: all 0.3s ease;
display: inline-block;
}

.navbox a:hover {
background: rgba(255,255,255,0.2);
transform: translateY(-2px);
}

/* ===========================
特殊样式
=========================== */
.mw-redirect {
color: #00b894;
font-weight: 500;
}

/* ===========================
响应式设计 - 改进版
=========================== */

/* 平板和大屏幕设备 */
@media screen and (min-width: 1024px) {
.flex-container {
grid-template-columns: repeat(3, 1fr);
}
.banner .chinese-text {
font-size: 32px;
}

.banner .english-text {
font-size: 20px;
}
}

/* 平板设备 */
@media screen and (max-width: 1024px) and (min-width: 768px) {
.flex-container {
grid-template-columns: repeat(2, 1fr);
}
}

/* 手机设备 */
@media screen and (max-width: 768px) {
@media screen and (max-width: 768px) {
.flex-container { flex-direction: column; }
.flex-container {
grid-template-columns: 1fr;
.flex-container .content-box { flex: 1 1 100%; }
gap: 20px;
.banner .chinese-text { font-size: 22px; }
}
.banner .english-text { font-size: 14px; }

.content-box {
margin: 10px 0;
padding: 20px;
}

.banner {
padding: 20px;
margin: 15px 0;
}

.banner .chinese-text,
.banner .english-text {
text-align: center;
}
}
}

/* 小屏手机设备 */
@media screen and (max-width: 480px) {
.banner .chinese-text {
font-size: 22px;
}

.banner .english-text {
font-size: 16px;
}

.content-box {
padding: 18px;
margin: 8px 0;
}

.content-box h2 {
font-size: 1.2rem;
}
}

/* 动画增强 */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}

.content-box {
animation: fadeInUp 0.6s ease-out;
}

/* 为不同区块设置延迟动画 */
.homepage-section:nth-child(1) .content-box:nth-child(1) { animation-delay: 0.1s; }
.homepage-section:nth-child(1) .content-box:nth-child(2) { animation-delay: 0.2s; }
.homepage-section:nth-child(1) .content-box:nth-child(3) { animation-delay: 0.3s; }
.homepage-section:nth-child(2) .content-box { animation-delay: 0.4s; }
.homepage-section:nth-child(3) .content-box { animation-delay: 0.5s; }
检索自“https://learn.houjue.digital/wiki/MediaWiki:Common.css”
著作权

陋室的全部文字提供于 知识共享署名-非商业性使用-相同方式共享 4.0 协议国际版 条款之下，附加条款亦可能适用。请参阅我们的使用条款和隐私政策，使用陋室即视为同意上述条款的约束。

陋室上提及的所有公司名称、产品名称、服务名称和标识均为其各自所有者的商标或注册商标。使用这些商标仅为了识别和说明之目的，并不意味着任何形式的认可或关联。陋室与上述公司及其商标没有任何关系或隶属。

Microsoft®是Microsoft Corporation(微软公司)的商标，Google®是Google LLC的注册商标，Apple®是Apple Inc.(苹果公司)的商标。 Wikipedia®和维基百科标志是维基媒体基金会的注册商标；维基™是维基媒体基金会的商标。维基媒体基金会是按美国国内税收法501(c)(3)登记的非营利慈善机构。 所有其他商标和标识均为其各自所有者的财产。未经相应商标所有者的明确书面同意，不得以任何方式使用这些商标。