mirror of
https://github.com/sendevia/website.git
synced 2026-03-05 23:32:45 +08:00
初始化信息流卡片样式
This commit is contained in:
333
.vitepress/theme/styles/_components/card.scss
Normal file
333
.vitepress/theme/styles/_components/card.scss
Normal file
@@ -0,0 +1,333 @@
|
||||
@use "../mixin";
|
||||
|
||||
// https://m3.material.io/components/cards/
|
||||
|
||||
.card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
position: relative;
|
||||
|
||||
overflow: hidden;
|
||||
transition: var(--md-sys-motion-duration-medium4) var(--md-sys-motion-easing-standard);
|
||||
|
||||
.card-impression {
|
||||
img {
|
||||
display: block;
|
||||
|
||||
max-width: unset;
|
||||
|
||||
object-fit: cover;
|
||||
transition: var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
|
||||
}
|
||||
}
|
||||
|
||||
.card-supporting {
|
||||
color: var(--md-sys-color-on-surface);
|
||||
|
||||
pointer-events: none;
|
||||
|
||||
h3 {
|
||||
transition: var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
|
||||
}
|
||||
}
|
||||
|
||||
&[spec="feed"] {
|
||||
margin-block-end: 24px;
|
||||
padding-block-end: 12px;
|
||||
|
||||
border-radius: var(--md-sys-shape-corner-extra-large);
|
||||
|
||||
background-color: var(--md-sys-color-surface-container-lowest);
|
||||
|
||||
transform: translateY(0px);
|
||||
|
||||
& > a {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.card-impression {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
flex-direction: column;
|
||||
|
||||
.impression-image img {
|
||||
height: 240px;
|
||||
width: 100%;
|
||||
|
||||
border-radius: var(--md-sys-shape-corner-large);
|
||||
outline: 1px solid var(--md-sys-color-outline-variant);
|
||||
}
|
||||
|
||||
.impression-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: row;
|
||||
gap: 12px;
|
||||
|
||||
padding-inline: 12px;
|
||||
|
||||
.author-mugshot {
|
||||
position: relative;
|
||||
|
||||
img {
|
||||
height: 48px;
|
||||
width: 48px;
|
||||
|
||||
border-radius: var(--md-sys-shape-corner-full);
|
||||
}
|
||||
|
||||
span {
|
||||
@include mixin.material-symbols($size: 18);
|
||||
|
||||
padding: 3px;
|
||||
|
||||
position: absolute;
|
||||
right: -3px;
|
||||
bottom: -3px;
|
||||
|
||||
background-color: var(--md-sys-color-surface-container);
|
||||
|
||||
border-radius: 100%;
|
||||
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.article-title {
|
||||
h4 {
|
||||
font-family: "Josefin Sans", sans-serif;
|
||||
font-optical-sizing: auto;
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-supporting {
|
||||
padding-inline: 12px;
|
||||
|
||||
h4 {
|
||||
letter-spacing: 0.6rem;
|
||||
}
|
||||
}
|
||||
|
||||
.card-action {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
|
||||
padding-inline: 12px;
|
||||
|
||||
p {
|
||||
padding: 8px 12px;
|
||||
|
||||
color: var(--md-sys-color-on-surface);
|
||||
|
||||
background-color: var(--md-sys-color-surface-bright);
|
||||
|
||||
border-radius: var(--md-sys-shape-corner-medium);
|
||||
}
|
||||
|
||||
div {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
&[size="large"] {
|
||||
gap: 12px;
|
||||
|
||||
.card-supporting h3 {
|
||||
min-height: 150px;
|
||||
}
|
||||
}
|
||||
|
||||
&[size="medium"] {
|
||||
gap: 12px;
|
||||
|
||||
padding-block: 12px;
|
||||
|
||||
.card-impression {
|
||||
flex-direction: row-reverse;
|
||||
justify-content: space-between;
|
||||
|
||||
.impression-image img {
|
||||
width: 140px;
|
||||
height: 140px;
|
||||
}
|
||||
|
||||
.impression-title {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
|
||||
h5 {
|
||||
min-height: 120px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&[size="small"] {
|
||||
align-items: center;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
|
||||
padding-block: 6px;
|
||||
padding-inline: 18px 6px;
|
||||
|
||||
.card-action button {
|
||||
justify-content: end;
|
||||
}
|
||||
|
||||
$colors: ("red", "blue", "green", "yellow", "purple");
|
||||
|
||||
@each $color in $colors {
|
||||
&[color="#{$color}"] {
|
||||
color: var(--md-sys-color-on-#{$color}-container);
|
||||
|
||||
background-color: var(--md-sys-color-#{$color}-container);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
&[size="large"],
|
||||
&[size="medium"] {
|
||||
background-color: var(--md-sys-color-surface-container);
|
||||
}
|
||||
|
||||
&[size="small"] {
|
||||
border-radius: var(--md-sys-shape-corner-large);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&[spec="clear"] {
|
||||
border-radius: var(--md-sys-shape-corner-extra-large);
|
||||
|
||||
background-color: var(--md-sys-color-surface-bright);
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
background-color: var(--md-sys-color-surface-dim);
|
||||
}
|
||||
|
||||
.card-impression {
|
||||
position: relative;
|
||||
|
||||
border-radius: var(--md-sys-shape-corner-extra-large-bottom);
|
||||
|
||||
background-color: var(--md-sys-color-inverse-primary);
|
||||
|
||||
overflow: hidden;
|
||||
|
||||
img {
|
||||
height: 240px;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.card-supporting {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
|
||||
padding-block: 20px 18px;
|
||||
padding-inline: 20px;
|
||||
|
||||
#card-supporting--weaken {
|
||||
text-align: end;
|
||||
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: var(--md-sys-color-on-secondary-container);
|
||||
|
||||
background-color: var(--md-sys-color-secondary-container);
|
||||
|
||||
.card-supporting h3 {
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
border-radius: calc(2 * var(--md-sys-shape-corner-extra-large));
|
||||
|
||||
transition: var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-emphasized);
|
||||
|
||||
.card-supporting h3 {
|
||||
font-weight: 200;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&[spec="focus"] {
|
||||
height: 240px;
|
||||
|
||||
border-radius: var(--md-sys-shape-corner-extra-large);
|
||||
outline: 1px solid var(--md-sys-color-outline-variant);
|
||||
|
||||
background-color: var(--md-sys-color-primary);
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
.card-impression {
|
||||
height: 100%;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.card-supporting {
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
|
||||
margin: 20px;
|
||||
|
||||
color: var(--md-sys-color-on-primary);
|
||||
|
||||
transform: translateY(calc(100% + 20px));
|
||||
transition: var(--md-sys-motion-duration-medium4) var(--md-sys-motion-easing-emphasized);
|
||||
|
||||
h3 {
|
||||
font-weight: 100;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
img {
|
||||
opacity: 0.5;
|
||||
|
||||
transition: opacity var(--md-sys-motion-duration-medium2);
|
||||
}
|
||||
|
||||
.card-supporting {
|
||||
transform: translateY(0%);
|
||||
|
||||
h3 {
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user