Khác biệt giữa bản sửa đổi của “Bản mẫu:Trang chính/styles.css”
Một thế giới nơi chỉ có đam mê, niềm vui và sắc màu...
Nội dung được thêm vào Nội dung được xóa
(Pisces đã thay đổi kiểu nội dung của trang Bản mẫu:Trang chính/styles.css từ “văn bản thuần” thành “CSS sạch sẽ”) Thẻ: thay đổi kiểu nội dung |
Không có tóm lược sửa đổi |
||
Dòng 43: | Dòng 43: | ||
.home-card--row8 { |
.home-card--row8 { |
||
grid-row: span 8 / auto; |
grid-row: span 8 / auto; |
||
} |
|||
.home-card__badge, |
|||
.home-card__label { |
|||
color: var( --color-base--subtle ); |
|||
font-size: var( --font-size-x-small ); |
|||
letter-spacing: 0.05em; |
|||
} |
|||
.home-card__badge { |
|||
padding: var( --space-xxs ) var( --space-xs ); |
|||
border-radius: var( --border-radius--small ); |
|||
background: var( --color-surface-2 ); |
|||
} |
} |
||
Phiên bản lúc 02:13, ngày 30 tháng 5 năm 2024
.home-grid {
display: grid;
grid: auto-flow dense/repeat( auto-fit, minmax( 9.375rem, 1fr ) );
grid-auto-rows: minmax( 3rem, auto );
grid-gap: var( --space-xs );
}
.home-grid--col2 {
grid-template-columns: 1fr 1fr;
}
.home-grid a.external {
background-image: none;
}
.home-card {
position: relative;
padding: var( --space-md );
background: var( --color-surface-1 );
border: 1px solid var( --border-color-base );
border-radius: 8px;
box-shadow: 0 3px 6px rgba( 0, 0, 0, 0.04 ), 0 3px 6px rgba( 0, 0, 0, 0.0575 );
font-size: 1rem;
font-family: 'Signika Negative', sans-serif !important;
}
.home-card table.timeline {
margin-top: 0.2rem;
}
.home-card--col2 {
grid-column: span 2;
}
.home-card--row3 {
grid-row: span 3;
}
.home-card--row4 {
grid-row: span 4;
}
.home-card--row8 {
grid-row: span 8 / auto;
}
.home-card__badge,
.home-card__label {
color: var( --color-base--subtle );
font-size: var( --font-size-x-small );
letter-spacing: 0.05em;
}
.home-card__badge {
padding: var( --space-xxs ) var( --space-xs );
border-radius: var( --border-radius--small );
background: var( --color-surface-2 );
}
.home-card__label {
color: var( --color-base--subtle );
font-size: 1rem;
letter-spacing: 0.75px;
font-family: 'Signika Negative', sans-serif !important;
}
.home-card__header {
color: var( --color-base--emphasized );
font-size: 1rem;
font-weight: var( --font-weight-semibold );
line-height: var( --line-height-xs );
font-family: 'Signika Negative', sans-serif !important;
}
.home-card__header a {
display: flex;
align-items: center;
justify-content: space-between;
font-family: 'Signika Negative', sans-serif !important;
}
.home-card__header a:after {
content: '▶';
font-size: 0.8125rem;
font-family: 'Signika Negative', sans-serif !important;
}
.home-card__background {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: #242a31;
border-radius: 8px;
}
.home-card__background:after {
position: absolute;
pointer-events: none;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: block;
background: linear-gradient(to right,#000,transparent);
content: "";
}
.home-card__background img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.home-card__foreground {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
padding: var( --space-md );
display: flex;
flex-direction: column;
justify-content: center;
gap: var( --space-xxs );
color: #fff;
line-height: var( --line-height-xs );
pointer-events: none;
}
.home-card__foreground .home-card__header {
color: #fff;
}
.home-card__foreground .home-card__label {
color: #bababa;
}
.home-card p {
margin-top: var( --space-xs );
font-size: 0.875rem;
}
.home-card.home-card--button {
overflow: hidden;
padding: 0;
background: #242a31;
border: 0;
}
.home-card--button a {
display: flex;
height: 100%;
justify-content: center;
align-items: center;
padding: 0 var( --space-md );
background: transparent;
color: #fff;
font-weight: 500;
font-family: 'Signika Negative', sans-serif !important;
}
.home-card--button .home-card__background a {
padding: 0;
}
.home-card--button img {
transition: transform 0.2s ease;
}
.home-card--button:hover img {
transform: scale(1.1);
}
.home-link {
display: grid;
margin-top: var( --space-xs );
font-size: 0.875rem;
font-weight: 500;
grid-gap: var( --space-xs );
text-align: center;
font-family: 'Signika Negative', sans-serif !important;
}
.home-link__button {
display: flex;
}
.home-link__button a {
flex-grow: 1;
padding: var( --space-xs );
border: 1px solid var( --border-color-base );
background: var( --color-surface-2 );
border-radius: var( --border-radius--medium );
color: var( --color-base--emphasized ) !important;
line-height: var( --line-height-xs );
text-decoration: none !important;
font-family: 'Signika Negative', sans-serif !important;
}
.home-link__button a:hover {
background: var( --color-surface-2--hover );
}
.home-link__button a:active {
background: var( --color-surface-2--active );
}
#home-content {
margin-top: var( --space-lg );
}
.home-card .template-statsbar {
margin: 0;
}
#home-card-discord {
background: #5865f2;
}
#home-card-facebook {
background: #1178f2;
}
#home-card-kofi {
background: #ff5e5b;
}
#home-card-patreon {
background: #ff4500;
}
.home-footer {
font-size: 0.8125rem;
font-family: 'Signika Negative', sans-serif !important;
text-align: center;
}