More actions
mBez shrnutí editace značka: ruční vrácení zpět |
Bez shrnutí editace |
||
| Řádek 1: | Řádek 1: | ||
. | .homeP-event { | ||
border: 1px solid var( --border-color-base ); | border: 1px solid var( --border-color-base ); | ||
border-radius: var( --border-radius-medium ); | border-radius: var( --border-radius-medium ); | ||
| Řádek 5: | Řádek 5: | ||
} | } | ||
. | .homeP-gameinfo { | ||
display: flex; | display: flex; | ||
align-items: center; | align-items: center; | ||
| Řádek 17: | Řádek 17: | ||
} | } | ||
. | .homeP-gameinfo-label { | ||
color: var( --color-subtle ); | color: var( --color-subtle ); | ||
} | } | ||
. | .homeP-gameinfo-list { | ||
display: flex; | display: flex; | ||
} | } | ||
. | .homeP-gameinfo-list-item { | ||
display: flex; | display: flex; | ||
align-items: center; | align-items: center; | ||
| Řádek 32: | Řádek 32: | ||
} | } | ||
. | .homeP-gameinfo-list-item + .homeP-gameinfo-list-item { | ||
margin-left: var( --space-sm ); | margin-left: var( --space-sm ); | ||
border-left: 1px solid var( --border-color-base ); | border-left: 1px solid var( --border-color-base ); | ||
| Řádek 38: | Řádek 38: | ||
} | } | ||
. | .homeP-event .homeP-card { | ||
height: 5rem; | height: 5rem; | ||
border-top-left-radius: 0; | border-top-left-radius: 0; | ||
| Řádek 44: | Řádek 44: | ||
} | } | ||
. | .homeP-card { | ||
position: relative; | position: relative; | ||
padding: var( --space-md ); | padding: var( --space-md ); | ||
| Řádek 53: | Řádek 53: | ||
} | } | ||
. | .homeP-card.homeP-card--button { | ||
overflow: hidden; | overflow: hidden; | ||
padding: 0; | padding: 0; | ||
| Řádek 59: | Řádek 59: | ||
} | } | ||
. | .homeP-card--button a { | ||
display: flex; | display: flex; | ||
height: 100%; | height: 100%; | ||
| Řádek 70: | Řádek 70: | ||
} | } | ||
. | .homeP-card--button .homeP-card__background a { | ||
padding: 0; | padding: 0; | ||
} | } | ||
. | .homeP-card--button img { | ||
transition: transform 250ms ease; | transition: transform 250ms ease; | ||
} | } | ||
. | .homeP-card--button:hover img { | ||
transform: scale( 1.1 ); | transform: scale( 1.1 ); | ||
} | } | ||
. | .homeP-card__header { | ||
color: var( --color-emphasized ); | color: var( --color-emphasized ); | ||
font-size: 1rem; | font-size: 1rem; | ||
| Řádek 89: | Řádek 89: | ||
} | } | ||
. | .homeP-card__header a { | ||
display: flex; | display: flex; | ||
align-items: center; | align-items: center; | ||
| Řádek 95: | Řádek 95: | ||
} | } | ||
. | .homeP-card__header a:after { | ||
content: '▶'; | content: '▶'; | ||
font-size: var( --font-size-small ); | font-size: var( --font-size-small ); | ||
} | } | ||
. | .homeP-card__background { | ||
position: absolute; | position: absolute; | ||
inset: 0; | inset: 0; | ||
} | } | ||
. | .homeP-card__background:after { | ||
position: absolute; | position: absolute; | ||
pointer-events: none; | pointer-events: none; | ||
| Řádek 115: | Řádek 115: | ||
} | } | ||
. | .homeP-card__background picture, | ||
. | .homeP-card__background img { | ||
width: 100%; | width: 100%; | ||
height: 100%; | height: 100%; | ||
} | } | ||
. | .homeP-card__background img { | ||
object-fit: cover; | object-fit: cover; | ||
object-position: center; | object-position: center; | ||
} | } | ||
. | .homeP-card__foreground { | ||
position: absolute; | position: absolute; | ||
top: 0; | top: 0; | ||
Verze z 9. 12. 2025, 11:58
.homeP-event {
border: 1px solid var( --border-color-base );
border-radius: var( --border-radius-medium );
background: var( --color-surface-1 );
}
.homeP-gameinfo {
display: flex;
align-items: center;
justify-content: space-between;
padding: var( --space-xs ) var( --space-md );
white-space: nowrap;
line-height: 1;
overflow-x: auto;
font-size: var( --font-size-small );
gap: var( --space-xl );
}
.homeP-gameinfo-label {
color: var( --color-subtle );
}
.homeP-gameinfo-list {
display: flex;
}
.homeP-gameinfo-list-item {
display: flex;
align-items: center;
gap: var( --space-xs );
font-weight: var( --font-weight-medium );
}
.homeP-gameinfo-list-item + .homeP-gameinfo-list-item {
margin-left: var( --space-sm );
border-left: 1px solid var( --border-color-base );
padding-left: var( --space-sm );
}
.homeP-event .homeP-card {
height: 5rem;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.homeP-card {
position: relative;
padding: var( --space-md );
border: 1px solid var( --border-color-base );
background: var( --color-surface-1 );
border-radius: var( --border-radius-medium );
font-size: var( --font-size-small );
}
.homeP-card.homeP-card--button {
overflow: hidden;
padding: 0;
border: 0;
}
.homeP-card--button a {
display: flex;
height: 100%;
justify-content: center;
align-items: center;
padding: 0 var( --space-md );
background: transparent;
color: #fff;
font-weight: var( --font-weight-medium );
}
.homeP-card--button .homeP-card__background a {
padding: 0;
}
.homeP-card--button img {
transition: transform 250ms ease;
}
.homeP-card--button:hover img {
transform: scale( 1.1 );
}
.homeP-card__header {
color: var( --color-emphasized );
font-size: 1rem;
font-weight: var( --font-weight-semi-bold );
line-height: var( --line-height-xxx-small );
}
.homeP-card__header a {
display: flex;
align-items: center;
justify-content: space-between;
}
.homeP-card__header a:after {
content: '▶';
font-size: var( --font-size-small );
}
.homeP-card__background {
position: absolute;
inset: 0;
}
.homeP-card__background:after {
position: absolute;
pointer-events: none;
inset: 0;
display: block;
background: linear-gradient(to right,#000,transparent);
content: "";
transition: transform 250ms ease;
}
.homeP-card__background picture,
.homeP-card__background img {
width: 100%;
height: 100%;
}
.homeP-card__background img {
object-fit: cover;
object-position: center;
}
.homeP-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-xxx-small );
pointer-events: none;
}