MediaWiki:Common.css

注意：在保存之后，您可能需要清除浏览器缓存才能看到所作出的变更的影响。

• Firefox/Safari：按住“Shift”的同时单击“刷新”，或按“Ctrl-F5”或“Ctrl-R”（Mac为“⌘-R”）
• Google Chrome：按“Ctrl-Shift-R”（Mac为“⌘-Shift-R”）
• Internet Explorer：按住“Ctrl”的同时单击“刷新”，或按“Ctrl-F5”
• Opera：在“工具→首选项”中清除缓存

/* 此处的 CSS 将影响所有的界面外观 */
 
 div.patrollink {
   font-size: 75%;
   text-align: right;
   position: absolute;
   top: 1.5em;
   right: 3em;
 }
 
 .allpagesredirect { font-style: italic; }
 .allpagesredirect:before {content: "↳"}
 
 /* hiddenStructure es una técnica SUCIA, preferible usar PHP
 .hiddenStructure { display: none; speak: none; }
 */
 
 /* Remove padding from external links displayed without icon */
 #bodyContent .plainlinks a {padding: 0 !important}
 
 /* Follow external links */
 a.external {rel: follow !important}
 
 /* Class for links with loudspeaker icon next to them */
 
 .audiolink a{
  /* esta imagen todavía no la tenemos
     background: url("http://pool.wikifur.com/w/images/8/8a/Loudspeaker.svg") center left no-repeat !important; */
     padding-left: 16px !important;
     padding-right: 0 !important;
 }
 
 /* Icons for medialist templates [[模板:Listen]], [[模板:Multi-listen_start]], [[模板:Video]], [[模板:Multi-video_start]] */
 
 div.listenlist {
 /*  esta imagen todavía no la tenemos
     background: url("http://pool.wikifur.com/w/images/a/a6/Gnome-speakernotes.png"); */
     padding-left: 40px;
 }
 
 /* Style rules for media list templates */
 
 div.medialist {
     min-height: 50px;
     margin: 1em;
     background-position: top left;
     background-repeat: no-repeat;
 }
 
 div.medialist ul {
     list-style-type: none; 
     list-style-image: none;
     margin: 0;
 }
 
 div.medialist ul li {
     padding-bottom: 0.5em;
 }
 
 div.medialist ul li li {
     font-size: 91%;
     padding-bottom: 0;
 }
 
 /* wikitable/prettytable class for skinning normal tables */
 
 table.wikitable,
 table.prettytable {
   margin: 1em 1em 1em 0;
   background: #f9f9f9;
   border: 1px #aaa solid;
   border-collapse: collapse;
 }
 
 table.wikitable th, table.wikitable td,
 table.prettytable th, table.prettytable td {
   border: 1px #aaa solid;
   padding: 0.2em;
 }
 
 table.wikitable th,
 table.prettytable th {
   background: #f2f2f2;
   text-align: center;
 }
 
 table.wikitable caption,
 table.prettytable caption {
   margin-left: inherit;
   margin-right: inherit;
   font-weight: bold;
 }
 
 /* **** Begin import from Wikipedia's Common.css **** */
 
 /* let's make a class that deals with tables better Any complaints, please message Ta bu shi da yu */
 
 table.prettytable { 
   border-collapse: collapse; 
   background: #f9f9f9; 
   margin-left: 10px; 
   margin-right: 10px; 
   margin-top: 5px; 
   margin-bottom: 5px; 
   padding: 5px;
   vertical-align: top;
 } 
 
 table.prettytable td,
 table.prettytable th 
 { 
   border: 1px solid #ccc; 
   text-align: left;
 }
 
 table.prettytable th
 {
   background: #FFCC99;
   font-weight: bold;
   text-align: center;
 }
 
 /* Style for "notices" */
 .notice {
     text-align: justify;
     margin: 1em;
     padding: 0.2em;
 }
 
 #disambig {
     border-top: 3px double #cccccc; 
     border-bottom: 3px double #cccccc;
 }
 
 #spoiler {
     border-top: 2px solid #ddd;
     border-bottom:2px solid #ddd;
 }
 
 /* Standard talk template style */
 
 .Talk-Notice  {
     border: 1px solid #C0C090;
     background-color: #F8EABA;
     margin-bottom: 3px;
     width: 85%;
     border-spacing: 3px;
     margin-left: auto;
     margin-right: auto;
 }
 
 /* Make template background appear correctly on all browsers */
 .Talk-Notice td {
     background: inherit;
 }
 
 /* Merge template style */
 
 .messagebox {
    border: 1px solid #aaaaaa;
    background-color: #f9f9f9;
    width: 85%;
    margin: 0 auto 1em auto;
    padding: .2em;
    text-align: justify;
 }
 .messagebox.merge {
    border: 1px solid #cf9fff;
    background-color: #f5edf5;
    text-align: center;
 }
 .messagebox.cleanup {
    border: 1px solid #9f9fff;
    background-color: #efefff;
    text-align: center;
 }
 .messagebox.standard-talk {
    border: 1px solid #c0c090;
    background-color: #f8eaba;
 }
 
 .infobox {
    border: 1px solid #aaaaaa;
    background-color: #f9f9f9;
    margin-bottom: 0.5em;
    margin-left: 1em; 
    padding: .2em;
    float: right;
    clear: right;
 }
 .infobox tr {
    vertical-align: top;
 }
 .infobox caption {
    margin-left: inherit;
 }
 .infobox.bordered {
    border-collapse: collapse;
 }
 .infobox.bordered td, .infobox.bordered th {
    border: 1px solid #aaaaaa;
 }
 .infobox.sisterproject {
    width: 22em;
 }
 
 /* **** End import **** */
 
 /* Classes for MU logos */
 pre.MU-logo { float:right; font-size:5pt; line-height: 5pt; padding-left: 5px; padding:0px; border:none; background-color:transparent;}
 
 /* Classes for LJ icon links */
 #bodyContent .lj-link a.external {
   text-decoration: underline;
   text-transform: lowercase;
   font-weight: bold;
   color: blue;
 }
 #bodyContent .lj-userinfo a.external {
   text-decoration:none;
   /* Important needed to override external link icon removing background, from class=plainlinks */
   background: transparent url(http://pool.wikifur.com/w/images/2/27/Userinfo.gif) no-repeat center center !important;
   padding-left:6px !important;
   padding-right:6px !important;
 }
 #bodyContent .lj-community a.external {
   text-decoration:none;
   /* Important needed to override external link icon removing background, from class=plainlinks */
   background: transparent url(http://pool.wikifur.com/w/images/0/01/Community.gif) no-repeat center center !important;
   padding-left:6px !important;
   padding-right:6px !important;
 }
 
/* 此处开始的 CSS 为 用户:Dg 使用 DeepSeek 编写 */
 
/* ================= 卡片容器 ================= */
.card-container {
    display: flex;
    flex-wrap: wrap;     /* 允许卡片换行 */
    gap: 20px;          /* 卡片间距 */
    margin: 15px 0;
    padding: 10px;
}
 
/* ================= 卡片基础样式 ================= */
.card {
	/*  物理动画模拟  */
	transition: 
        transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 0.3s ease-out;
    /* 浏览器性能优化  */
    will-change: transform; /* 预告知浏览器可能的变化 */
    transform: translateZ(0); /* 触发GPU加速层 */
    transition: transform 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
    /* 卡片定位  */
    box-sizing: border-box; /* 边框计入元素尺寸 */
    position: relative;/* 相对定位 */
    z-index: 1; /* 建立层级上下文 */
 
    flex: 1 0 calc(14.28% - 20px); /* 7列布局计算(100%/7) */
    min-width: 140px;   /* 最小卡片宽度 */
    max-width: calc(14% - 20px);   /* 最大宽度限制 */
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    transition: all 0.3s cubic-bezier(0.4,0,0.2,1); /* 平滑过渡动画 */
    overflow: hidden;    /* 隐藏溢出内容 */
}
 
/* ================= 卡片悬停状态 ================= */
.card:hover {
	/*  物理动画模拟  */
	box-shadow: 
        0 12px 24px rgba(0,0,0,0.15),
        0 6px 12px rgba(0,0,0,0.1); /* 多层阴影增强立体感 */
 
 
    /* 浏览器性能优化  */
     transform: 
        scale(1.08) 
        translateZ(0); /* 触发GPU加速，保持3D加速连续性 */
	z-index: 2; /* 悬停时提升层级 */
    border: 2px solid blue; /* 选中卡片的蓝色边框 */
    box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}
 
.card:hover p {
    color: blue !important; /* 悬停时字体变色 */
}
 
/* ================= 卡片图片样式 ================= */
.card img {
    width: 100%;         /* 关键修改：填满容器宽度 */
    height: 140px;
    object-fit: cover;   /* 保持图片比例 */
    border-radius: 12px 12px 0 0; /* 仅顶部圆角 */
    transition: transform 0.3s;
}
 
/* 悬停时图片缩放（受容器overflow:hidden限制） */
.card:hover img {
    transform: scale(1.1);
}
 
 
 
/* ================= 卡片内容区域 ================= */
.card-content {
    padding: 15px;
    position: relative;
    z-index: 2;          /* 确保内容在上层 */
}
 
 
 
 
/* ================= 响应式断点：大平板 (1024px) ================= */
@media (max-width: 1024px) {
    .card {
        flex: 1 0 calc(33.33% - 20px); /* 3列布局 */
        max-width: calc(33.33% - 20px);
    }
}
 
/* ================= 响应式断点：平板 (768px) ================= */
@media (max-width: 768px) {
    .card {
        flex: 1 0 calc(50% - 20px);  /* 2列布局 */
        max-width: calc(50% - 20px);
    }
 
    /* 移动端文字优化 */
    .card-content {
        white-space: nowrap;     /* 禁止换行 */
        overflow: hidden;        /* 隐藏溢出 */
        text-overflow: ellipsis; /* 显示省略号 */
    }
}
 
/* ================= 响应式断点：手机 (480px) ================= */
@media (max-width: 480px) {
    .card {
        flex: 1 0 100%;         /* 单列布局 */
        max-width: 100%;
        min-width: auto;        /* 移除最小宽度限制 */
    }
 
    /* 移动端图片高度优化 */
    .card img {
        height: 120px;         /* 缩小图片高度 */
    }
}
 
/* 滚动文字容器 */
.marquee-container {
  overflow: hidden;
  white-space: nowrap;
  position: relative;
}
 
/* 滚动内容 */
.marquee-content {
  display: inline-block;
  padding-left: 100%; /* 让内容从右边进入 */
  animation: marquee 15s linear infinite;
}
 
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}