Шаблон:LinkСard: различия между версиями
Материал из Space Station 14 Вики
Pok (обсуждение | вклад) мНет описания правки |
Pok (обсуждение | вклад) мНет описания правки |
||
| Строка 1: | Строка 1: | ||
<div class="link-card noExternal mobile-image" style="background-color:{{{background-color|#383845}}} | <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__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: | |||
.link-card { | .link-card { | ||
display: inline-block; | display: inline-block; | ||
position: relative; | position: relative; | ||
min-width: 110px; | min-width: 110px; | ||
text-align: center; | text-align: center; | ||
border: 1px outset rgb(0 0 0 / 30%); | |||
border-radius: 0.3em; | |||
background: var(--background-color); | |||
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.35); | box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.35); | ||
overflow: hidden; | |||
transition: all 0.15s ease; | |||
} | |||
.link-card::before { | |||
content: ""; | |||
position: absolute; | |||
top: 0; | |||
left: 0; | |||
right: 0; | |||
bottom: 0; | |||
background: var(--background-color); | |||
z-index: 1; | |||
transition: filter 0.01s; | |||
} | } | ||
.link-card__image { | .link-card__image { | ||
position: relative; | |||
z-index: 2; | |||
padding: 6px; | padding: 6px; | ||
} | } | ||
.link-card__name { | .link-card__name { | ||
position: relative; | |||
z-index: 2; | |||
width: 100%; | |||
padding: 2px 4px; | padding: 2px 4px; | ||
font-size: 0.8em; | font-size: 0.8em; | ||
box-sizing: border-box; | box-sizing: border-box; | ||
background: #00000040; | |||
} | } | ||
| Строка 38: | Строка 54: | ||
@media (max-width: 800px) { | @media (max-width: 800px) { | ||
.link-card | .link-card { | ||
display: flex; | display: flex; | ||
box-shadow: 0px 2px 1px 0px rgba(0, 0, 0, 0.3); | box-shadow: 0px 2px 1px 0px rgba(0, 0, 0, 0.3); | ||
| Строка 60: | Строка 76: | ||
--><div class="customCSS" style="display:none"> | --><div class="customCSS" style="display:none"> | ||
.link-card:hover { | .link-card:hover::before { | ||
filter: brightness(105%); | filter: brightness(105%); | ||
} | } | ||
</div> | </div> | ||
