Шаблон:LinkСard: различия между версиями
Материал из Space Station 14 Вики
Pok (обсуждение | вклад) мНет описания правки |
Pok (обсуждение | вклад) мНет описания правки |
||
| Строка 1: | Строка 1: | ||
<div class="link-card noExternal mobile-image" style="--background-color:{{{background-color|#383845{{{transparency|f0}}}}}}>{{#if:{{{external|}}}|[{{{external|https://discord.gg/corvax}}} <span class="StupidButton"></span>]|[[{{{link|MainMenuBlocks/Item}}}|<span class="StupidButton"></span>]]}} | <div class="link-card noExternal mobile-image {{#if:{{{SideStyle|}}}|link-card__side}}" style="--background-color:{{{background-color|#383845{{{transparency|f0}}}}}}> {{#if:{{{external|}}}|[{{{external|https://discord.gg/corvax}}} <span class="StupidButton"></span>]|[[{{{link|MainMenuBlocks/Item}}}|<span class="StupidButton"></span>]]}} | ||
<div class="link-card__image">[[Файл:{{{image|BikeHorn.png}}}|64x64px|link=]]</div> | <div class="link-card__image">[[Файл:{{{image|BikeHorn.png}}}|64x64px|link=]]</div> | ||
<div class="link-card__name">'''{{{name|Название}}}'''</div> | <div class="link-card__name">'''{{{name|Название}}}'''</div> | ||
</div><!-- | </div> | ||
<!-- | |||
-->{{#css: | -->{{#css: | ||
| Строка 47: | Строка 48: | ||
@media (min-width: 800px) { | @media (min-width: 800px) { | ||
.link-card:hover { | .link-card:not(.link-card__side):hover { | ||
box-shadow: 0px 4px 4px 1px rgba(0, 0, 0, 0.25); | box-shadow: 0px 4px 4px 1px rgba(0, 0, 0, 0.25); | ||
transform: translateY(-4px); | transform: translateY(-4px); | ||
| Строка 63: | Строка 64: | ||
.link-card__name { | .link-card__name { | ||
background: #00000020; | background: #00000020; | ||
padding: 4px | padding: 4px 8px; | ||
font-size: 0.9em; | font-size: 0.9em; | ||
display: flex; | display: flex; | ||
| Строка 73: | Строка 74: | ||
} | } | ||
} | } | ||
.link-card__side { | |||
display: flex ; | |||
box-shadow: 0px 2px 1px 0px rgba(0, 0, 0, 0.3); | |||
width: 100%; | |||
text-align: left; | |||
} | |||
.link-card__side .link-card__name { | |||
background: #00000020; | |||
padding: 4px 8px; | |||
font-size: 0.9em; | |||
display: flex; | |||
align-items: center; | |||
} | |||
.link-card__side .link-card__image { | |||
padding: 4px; | |||
} | |||
.link-card__side img { | |||
width: 32px; | |||
height: 32px; | |||
} | |||
}}<!-- | }}<!-- | ||
