|
|
| 第69行： |
第69行： |
| } | | } |
| | | |
| .nav-card__background {
| | .nav-card__background { |
| position: absolute;
| | position: absolute; |
| top: 0;
| | top: 0; |
| right: 0;
| | right: 0; |
| bottom: 0;
| | bottom: 0; |
| left: 0;
| | left: 0; |
| background: #242a31;
| | background: #242a31; |
| border-radius: 15px;
| | border-radius: 15px; |
| }
| | } |
|
| |
|
| .nav-card__background img {
| | .nav-card__background img { |
| width: 100%;
| | width: 100%; |
| height: 100%;
| | height: 100%; |
| object-fit: cover;
| | object-fit: cover; |
| object-position: center;
| | object-position: center; |
| }
| | } |
| | | |
| .nav-card__foreground {
| | .nav-card__foreground { |
| position: absolute;
| | position: absolute; |
| }
| | } |
| | | |
| .nav-card p {
| | .nav-card p { |
| margin-top: 0.2rem;
| | margin-top: 0.2rem; |
| font-size: 0.875rem;
| | font-size: 0.875rem; |
| }
| | } |
| | | |
| .nav-card.nav-card--button {
| | .nav-card.nav-card--button { |
| overflow: hidden;
| | overflow: hidden; |
| padding: 0;
| | padding: 0; |
| background: #242a31;
| | background: #242a31; |
| }
| | } |
| | | |
| .nav-card--button a {
| | .nav-card--button a { |
| display: flex;
| | display: flex; |
| height: 100%;
| | height: 100%; |
| justify-content: center;
| | justify-content: center; |
| align-items: center;
| | align-items: center; |
| padding: 0 15px;
| | padding: 0 15px; |
| background: transparent;
| | background: transparent; |
| color: #fff;
| | color: #fff; |
| font-weight: 500;
| | font-weight: 500; |
| }
| | } |
| | | |
| .nav-card--button .nav-card__background a {
| | .nav-card--button .nav-card__background a { |
| padding: 0;
| | padding: 0; |
| }
| | } |
| | | |
| .nav-card--button img {
| | .nav-card--button img { |
| transition: transform 0.3s ease;
| | transition: transform 0.3s ease; |
| }
| | } |
| | | |
| .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 排版 */ |
