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

Материал из Space Station 14 Вики
мНет описания правки
мНет описания правки
 
(не показаны 63 промежуточные версии этого же участника)
Строка 1: Строка 1:
<div class="main-menu-frame">[[{{{link|MainMenuBlocks/Item}}}|<span class="StupidButton"></span>]]<div class="main-menu-frame__image">[[файл:{{{image|BikeHorn.png}}}|64x64px|link=]]</div><div class="main-menu-frame__name">'''{{{name|Название}}}'''</div></div><!--
<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__name">'''{{{name|Название}}}'''</div>
</div>
<!--
 
-->{{#css:
-->{{#css:
.main-menu-frame {
.link-card {
    display: inline-block;
     position: relative;
     position: relative;
    min-width: 110px;
    text-align: center;
    border: 1px outset rgb(0 0 0 / 30%);
     border-radius: 0.3em;
     border-radius: 0.3em;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.35);
    overflow: hidden;
    background: var(--background-color);
     transition: all 0.15s ease;
     transition: all 0.15s ease;
    overflow: hidden;
    min-width: 100px;
    text-align: center;
    box-shadow: 0px 0.2em 0.3em 0px rgba(0, 0, 0, 0.25);
}
}


.main-menu-frame__image {
.link-card__image {
     background: #3c3c47;
    position: relative;
     padding: 0.3em;
    padding: 6px;
}
 
.link-card__name {
    position: relative;
    width: 100%;
    padding: 2px 4px;
    font-size: 0.8em;
    box-sizing: border-box;
     background: #00000040;
}
 
@media (min-width: 800px) {
    .link-card:not(.link-card__side):hover {
        box-shadow: 0px 4px 4px 1px rgba(0, 0, 0, 0.25);
        transform: translateY(-4px);
    }
}
 
@media (max-width: 800px) {
    .link-card {
        display: flex;
        box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.35);
        width: 100%;
        text-align: left;
    }
 
    .link-card__name {
        background: #00000020;
        padding: 4px 8px;
        font-size: 0.9em;
        display: flex;
        align-items: center;
    }
 
    .link-card__image {
        padding: 4px;
    }
}
 
.link-card__side {
    display: flex ;
    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;
}
}


.main-menu-frame__name {
.link-card__side .link-card__image {
    background: #2f2f37;
     padding: 4px;
     padding: 2px 6px;
    font-size: 12px;
}
}
}}<!--
 
--><div class="customCSS" style="display:none">
.link-card__side img {
.main-menu-frame:hover {
     width: 32px;  
     filter: brightness(105%);
     height: 32px;  
     box-shadow: 0px 0.4em 0.4em 0.1em rgba(0, 0, 0, 0.25);
    transform: translateY(-0.3em);
}
}
</div>
}}

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