Aurora Lemon(讨论 | 贡献) (创建页面,内容为“ .card { display: flex; min-width: 240px; max-width: 100%; box-sizing: border-box; flex-direction: column; flex-grow: 1; justify-content: space-between; margin: 0 0.2rem 0.4rem 0.2rem; background-color: var( --color-surface-1 ); border-radius: var( --border-radius--medium ); box-shadow: 0 1px 3px rgba( 0, 0, 0, 0.03 ), 0 1px 2px rgba( 0, 0, 0, 0.06 ); font-size: 0.875rem; transition: box-shadow 0.2s ease; } .card-col4 { width:…”) |
Aurora Lemon(讨论 | 贡献) 小无编辑摘要 |
||
(未显示同一用户的4个中间版本) | |||
第1行: | 第1行: | ||
.card { | /* | ||
本 CSS 基于星际公民维基修改。 | |||
Source: https://starcitizen.tools/Template:Card/styles.css | |||
*/ | |||
.card { | |||
display: flex; | |||
min-width: 240px; | |||
max-width: 100%; | |||
box-sizing: border-box; | |||
flex-direction: column; | |||
flex-grow: 1; | |||
justify-content: space-between; | |||
margin: 0 0.2rem 0.4rem 0.2rem; | |||
background-color: var( --color-surface-1 ); | |||
border-radius: var( --border-radius--medium ); | |||
box-shadow: 0 1px 3px rgba( 0, 0, 0, 0.03 ), 0 1px 2px rgba( 0, 0, 0, 0.06 ); | |||
font-size: 0.875rem; | |||
transition: box-shadow 0.2s ease; | |||
} | |||
.card-col4 { | |||
width: calc(100%/4 - 0.4rem); | |||
} | |||
.card-top, .mw-parser-output .card-bottom { | |||
padding: 1.2rem; | |||
} | |||
.card-button { | |||
background: var(--color-base); | |||
border-radius: 0 0 var(--border-radius--medium)var(--border-radius--medium); | |||
transition: opacity 0.2s ease; | |||
} | |||
.card:hover { | |||
box-shadow: var(--box-shadow-cardhover); | |||
} | |||
.card-col2 { | |||
width: calc( 100% / 2 - 0.4rem ); | |||
} | |||
.card-col3 { | |||
width: calc( 100% / 3 - 0.4rem ); | |||
} | |||
.card-col4 { | |||
width: calc( 100% / 4 - 0.4rem ); | |||
} | |||
.card-col5 { | |||
width: calc( 100% / 5 - 0.4rem ); | |||
} | |||
.card-col6 { | |||
width: calc( 100% / 6 - 0.4rem ); | |||
} | |||
.card-container { | |||
margin-top: 1.6rem !important; | |||
margin-right: -0.2rem; | |||
margin-bottom: 1.6rem !important; | |||
margin-left: -0.2rem; | |||
border-radius: 0 0 12px 12px; | |||
} | |||
.card-container.floatnone { | |||
padding: 0 20px; | |||
} | |||
.card-row { | |||
display: flex; | |||
width: 100%; | |||
flex-wrap: wrap; | |||
} | |||
.card-caption { | |||
font-size: 0.875rem; | |||
font-weight: 600; | |||
} | |||
.card-image a { | |||
display: flex; | |||
overflow: hidden; | |||
justify-content: center; | |||
background: none !important; | |||
} | |||
.card-image a img { | |||
transition: transform 0.2s cubic-bezier( 0.77, 0.2, 0.05, 1 ); | |||
} | |||
.card:hover .card-image a img { | |||
transform: scale( 1.1 ); | |||
} | |||
} | .card .card-title { | ||
margin-top: 0; | |||
margin-bottom: 0.8rem; | |||
color: var( --color-base--emphasized ); | |||
font-size: 1.25rem; | |||
line-height: 1.2; | |||
} | |||
.card .card-title + .byline-bottom { | |||
margin-top: -0.6rem; | |||
} | |||
.card ol, | |||
.card ul { | |||
padding-left: 1.6rem; | |||
margin: 0; | |||
} | |||
.card .byline-top, | |||
.card .byline-bottom { | |||
color: var( --color-base ); | |||
font-size: 0.825rem; | |||
} | |||
.card .byline-top { | |||
margin: 0 0 0.2rem 0; | |||
} | |||
.card .byline-bottom { | |||
margin: 0.2rem 0 1.6rem 0; | |||
} | |||
.card .byline-bottom + p { | |||
margin-top: 0.8rem; | |||
} | |||
.card .numdata { | |||
margin-top: 0.8rem; | |||
} | |||
.card-top, | |||
.card-bottom { | |||
padding: 1.2rem; | |||
} | |||
.card-bottom { | |||
background: var( --color-surface-2 ); | |||
} | |||
@media only screen and ( max-width: 720px ) { | |||
.card-row { | |||
overflow: auto; | |||
width: auto; | |||
padding: 0 20px; | |||
margin: 0 -20px; | |||
} | } | ||
} |
2023年8月14日 (一) 02:42的最新版本
/*
本 CSS 基于星际公民维基修改。
Source: https://starcitizen.tools/Template:Card/styles.css
*/
.card {
display: flex;
min-width: 240px;
max-width: 100%;
box-sizing: border-box;
flex-direction: column;
flex-grow: 1;
justify-content: space-between;
margin: 0 0.2rem 0.4rem 0.2rem;
background-color: var( --color-surface-1 );
border-radius: var( --border-radius--medium );
box-shadow: 0 1px 3px rgba( 0, 0, 0, 0.03 ), 0 1px 2px rgba( 0, 0, 0, 0.06 );
font-size: 0.875rem;
transition: box-shadow 0.2s ease;
}
.card-col4 {
width: calc(100%/4 - 0.4rem);
}
.card-top, .mw-parser-output .card-bottom {
padding: 1.2rem;
}
.card-button {
background: var(--color-base);
border-radius: 0 0 var(--border-radius--medium)var(--border-radius--medium);
transition: opacity 0.2s ease;
}
.card:hover {
box-shadow: var(--box-shadow-cardhover);
}
.card-col2 {
width: calc( 100% / 2 - 0.4rem );
}
.card-col3 {
width: calc( 100% / 3 - 0.4rem );
}
.card-col4 {
width: calc( 100% / 4 - 0.4rem );
}
.card-col5 {
width: calc( 100% / 5 - 0.4rem );
}
.card-col6 {
width: calc( 100% / 6 - 0.4rem );
}
.card-container {
margin-top: 1.6rem !important;
margin-right: -0.2rem;
margin-bottom: 1.6rem !important;
margin-left: -0.2rem;
border-radius: 0 0 12px 12px;
}
.card-container.floatnone {
padding: 0 20px;
}
.card-row {
display: flex;
width: 100%;
flex-wrap: wrap;
}
.card-caption {
font-size: 0.875rem;
font-weight: 600;
}
.card-image a {
display: flex;
overflow: hidden;
justify-content: center;
background: none !important;
}
.card-image a img {
transition: transform 0.2s cubic-bezier( 0.77, 0.2, 0.05, 1 );
}
.card:hover .card-image a img {
transform: scale( 1.1 );
}
.card .card-title {
margin-top: 0;
margin-bottom: 0.8rem;
color: var( --color-base--emphasized );
font-size: 1.25rem;
line-height: 1.2;
}
.card .card-title + .byline-bottom {
margin-top: -0.6rem;
}
.card ol,
.card ul {
padding-left: 1.6rem;
margin: 0;
}
.card .byline-top,
.card .byline-bottom {
color: var( --color-base );
font-size: 0.825rem;
}
.card .byline-top {
margin: 0 0 0.2rem 0;
}
.card .byline-bottom {
margin: 0.2rem 0 1.6rem 0;
}
.card .byline-bottom + p {
margin-top: 0.8rem;
}
.card .numdata {
margin-top: 0.8rem;
}
.card-top,
.card-bottom {
padding: 1.2rem;
}
.card-bottom {
background: var( --color-surface-2 );
}
@media only screen and ( max-width: 720px ) {
.card-row {
overflow: auto;
width: auto;
padding: 0 20px;
margin: 0 -20px;
}
}