测试:卡片测试：修订间差异

来自EaseCation Wiki
可视化wikitext
无编辑摘要
标签：手工回退
无编辑摘要
标签：
第20行： 第20行：
<!-- CSS -->
<!-- CSS -->
{{#CSS:
{{#CSS:
/* nav-card */
.nav-card {
.nav-card {
position: relative;
position: relative;
第51行： 第52行：
     font-weight: 500;
     font-weight: 500;
}
}


.nav-card__navimgtext {
.nav-card__navimgtext {
第117行： 第117行：
.nav-card--button:hover img {
.nav-card--button:hover img {
transform: scale(1.05);
transform: scale(1.05);
}
.card-button {
background: var( --color-base );
border-radius: 0 0 var( --border-radius--medium ) var( --border-radius--medium );
transition: opacity 0.2s ease;
}
.card-button:hover {
opacity: 0.8;
}
.card-button a {
display: block;
padding: 0.6rem;
/* Cancel out a styles */
background: none !important;
color: #fff!important;
font-size: 0.875rem;
font-weight: 600;
letter-spacing: 0.25px;
text-align: center;
transition: background 0.2s ease, color 0.2s ease;
}
}
/* grid 排版 */
/* grid 排版 */
.nav-grid {
.nav-grid {
display: grid;
display: grid;
grid: auto-flow dense/repeat( auto-fit, minmax( 9.375rem, 1fr ) );
grid: auto-flow dense/repeat( auto-fit, minmax( 9.375rem, 1fr ) );
grid-auto-rows: minmax( 3rem, auto );
grid-auto-rows: minmax( 3rem, auto );
grid-gap: 0.625rem;
grid-gap: 0.625rem;
margin-top: 10px;
margin-top: 10px;
}
}
.nav-grid a.external {
.nav-grid a.external {
background-image: none;
background-image: none;
}
}
}}

2024年4月5日 (五) 14:48的版本

了解我们
游戏列表
玩家攻略
人文关怀

{{#CSS: /* nav-card */ .nav-card { position: relative; padding: 15px; background: var( --color-surface-1 ); border-radius: 15px; box-shadow: 0 3px 6px rgba( 0, 0, 0, 0.04 ), 0 3px 6px rgba( 0, 0, 0, 0.0575 ); font-size: 0.875rem; }

.nav-card__background:after { position: absolute; pointer-events: none; 

   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   display: block;
   background: linear-gradient( to right,transparent,#000);
   content: "";

}

.nav-card__foreground { 

   pointer-events: none;

height: 100%; 

   width: 100%;
   display: flex;
   align-items: center;
   padding: 0 15px;
   color: #fff;
   font-weight: 500;

}

.nav-card__navimgtext { pointer-events: none; height: 100%; width: 100%; display: flex; align-items: center; padding: 0 15px; color: #fff; font-weight: 500; }

.nav-card__background { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: #242a31; border-radius: 15px; }

.nav-card__background img { width: 100%; height: 100%; object-fit: cover; object-position: center; }

.nav-card__foreground { position: absolute; }

.nav-card p { margin-top: 0.2rem; font-size: 0.875rem; }

.nav-card.nav-card--button { overflow: hidden; padding: 0; background: #242a31; }

.nav-card--button a { display: flex; height: 100%; justify-content: center; align-items: center; padding: 0 15px; background: transparent; color: #fff; font-weight: 500; }

.nav-card--button .nav-card__background a { padding: 0; }

.nav-card--button img { transition: transform 0.3s ease; }

.nav-card--button:hover img { transform: scale(1.05); }

/* grid 排版 */ .nav-grid { display: grid; grid: auto-flow dense/repeat( auto-fit, minmax( 9.375rem, 1fr ) ); grid-auto-rows: minmax( 3rem, auto ); grid-gap: 0.625rem; margin-top: 10px; }

.nav-grid a.external { background-image: none; }

取自“http://wiki.easecation.net/index.php?title=测试:卡片测试&oldid=12088”