Шаблон:LinkСard: различия между версиями

Материал из Space Station 14 Вики
мНет описания правки
мНет описания правки
 
(не показано 13 промежуточных версий этого же участника)
Строка 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 brightness-overlay {{#if:{{{SideStyle|}}}|link-card__side}}" style="--background-color:{{{background-color|#383845{{{transparency|f0}}}}}}> {{#if:{{{external|}}} | [{{{external|}}} <span class="StupidButton"></span>] | {{#if:{{{link|}}} | [[{{{link|}}}|<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:
Строка 12: Строка 13:
     border: 1px outset rgb(0 0 0 / 30%);
     border: 1px outset rgb(0 0 0 / 30%);
     border-radius: 0.3em;
     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;
     overflow: hidden;
    background: var(--background-color);
     transition: all 0.15s ease;
     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;
     position: relative;
    z-index: 2;
     padding: 6px;
     padding: 6px;
}
}
Строка 38: Строка 26:
.link-card__name {
.link-card__name {
     position: relative;
     position: relative;
    z-index: 2;
     width: 100%;
     width: 100%;
     padding: 2px 4px;
     padding: 2px 4px;
Строка 47: Строка 34:


@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);
Строка 56: Строка 43:
     .link-card {
     .link-card {
         display: flex;
         display: flex;
         box-shadow: 0px 2px 1px 0px rgba(0, 0, 0, 0.3);
         box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.35);
         width: 100%;
         width: 100%;
         text-align: left;
         text-align: left;
Строка 63: Строка 50:
     .link-card__name {
     .link-card__name {
         background: #00000020;
         background: #00000020;
         padding: 4px 6px;
         padding: 4px 8px;
         font-size: 0.9em;
         font-size: 0.9em;
         display: flex;
         display: flex;
Строка 73: Строка 60:
     }
     }
}
}
}}<!--


--><div class="customCSS" style="display:none">
.link-card__side {
.link-card:hover::before {
    display: flex ;
filter: brightness(105%);
    box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.35);
    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;
}
}
</div>
 
.link-card__side img {
    width: 32px;
    height: 32px;
}
}}

Текущая версия от 21:17, 17 января 2025