Шаблон:LinkCard/styles.css: различия между версиями
Pok (обсуждение | вклад) м Полностью удалено содержимое страницы Метка: очистка |
Pok (обсуждение | вклад) мНет описания правки |
||
| (не показано 13 промежуточных версий этого же участника) | |||
| Строка 1: | Строка 1: | ||
.link-card { | |||
/* --bg-color из стилей шаблона; по умолчанию: var(--theme-bg-color-300) */ | |||
/* --alpha из стилей шаблона; по умолчанию: 90% */ | |||
/* --font-size из стилей шаблона; по умолчанию: var(--font-size-xxs) */ | |||
--background-color: color-mix(in srgb, var(--bg-color) var(--alpha), var(--theme-bg-color-100)); | |||
display: inline-block; | |||
position: relative; | |||
min-width: 110px; | |||
text-align: center; | |||
border: var(--border-outset); | |||
border-radius: var(--border-radius-medium); | |||
box-shadow: var(--box-shadow-medium); | |||
background: var(--background-color); | |||
transition: all 0.1s ease; | |||
min-height: calc(32px + 4px); | |||
} | |||
.link-card__image { | |||
flex: 0 0 auto; | |||
position: relative; | |||
text-align: center; | |||
align-content: center; | |||
padding: 6px; | |||
min-width: 32px; | |||
} | |||
.link-card__name { | |||
position: relative; | |||
width: 100%; | |||
padding: 2px 4px; | |||
font-size: var(--font-size); | |||
box-sizing: border-box; | |||
background: rgba(var(--color-darkened--rgb), 0.2); | |||
font-weight: bold; | |||
} | |||
.link-card.brightness-overlay::before { | |||
border-radius: var(--border-radius-medium); | |||
} | |||
.link-card__pin { | |||
top: 0; | |||
right: 4px; | |||
} | |||
@media (min-width: 800px) { | |||
.link-card-hover:not(.link-card__side):hover { | |||
box-shadow: var(--box-shadow-high); | |||
transform: translateY(-4px); | |||
} | |||
} | |||
@media (max-width: 800px) { | |||
.link-card { | |||
display: flex; | |||
width: 100%; | |||
text-align: left; | |||
justify-content: center; | |||
box-shadow: var(--box-shadow); | |||
min-width: 0; | |||
} | |||
.link-card__name { | |||
background: rgba(var(--color-darkened--rgb), 0.13); | |||
padding: 4px 8px; | |||
font-size: var(--font-size-xs); | |||
display: flex; | |||
align-items: center; | |||
justify-content: space-between; | |||
flex-wrap: nowrap; | |||
} | |||
.link-card__image { | |||
padding: 4px; | |||
} | |||
} | |||
.link-card__side { | |||
display: flex ; | |||
width: 100%; | |||
text-align: left; | |||
justify-content: center; | |||
box-shadow: var(--box-shadow); | |||
} | |||
.link-card__side .link-card__name { | |||
background: rgba(var(--color-darkened--rgb), 0.13); | |||
padding: 4px 8px; | |||
font-size: var(--font-size-xs); | |||
display: flex; | |||
align-items: center; | |||
justify-content: space-between; | |||
flex-wrap: nowrap; | |||
} | |||
.link-card__side .link-card__image { | |||
padding: 4px; | |||
} | |||