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

мНет описания правки
мНет описания правки
 
(не показано 68 промежуточных версий этого же участника)
Строка 1: Строка 1:
<div class="main-menu-frame noExternal mobile-image" style="background-color:{{{background-color|#373743}}}f5>{{#if: {{{external|}}}|[{{{external|https://discord.gg/corvax}}} <span class="StupidButton"></span>]|[[{{{link|MainMenuBlocks/Item}}}|<span class="StupidButton"></span>]]}}
<templatestyles src="LinkCard/styles.css" /><div class="link-card noExternal mobile-image brightness-overlay {{#if:{{{горизонт_стиль|}}}|link-card__side}} {{#if:{{{ссылка|}}}{{{внешняя_ссылка|}}}|link-card-hover}}" style="
<div class="main-menu-frame__image">[[файл:{{{image|BikeHorn.png}}}|64x64px|link=]]</div>
--bg-color:{{{фон|var(--theme-bg-color-300)}}};
<div class="main-menu-frame__name">'''{{{name|Название}}}'''</div>
--alpha:{{{прозрачность|95%}}};
</div><!--
--font-size:{{{размер_текста|var(--font-size-xxs)}}}
 
">{{#if: {{{внешняя_ссылка|}}} | [{{{внешняя_ссылка|}}} <span class="StupidButton"></span>] | {{#if: {{{ссылка|}}} | [[{{{ссылка|}}}|<span class="StupidButton"></span>]] }} }}
-->
<div class="link-card__image">{{{изображение|}}}</div>
{{#css:
{{#if: {{{название|}}} | <div class="link-card__name">{{{название}}}</div> }}{{#if: {{{пин|}}} | <div class="link-card__pin" style="position:absolute;">{{{пин}}}</div> }}
.main-menu-frame {
</div><noinclude>{{doc}}</noinclude>
    display: inline-block;
    position: relative;
    border-radius: 0.3em;
    transition: all 0.15s ease;
    overflow: hidden;
    min-width: 110px;
    text-align: center;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.35);
    border: 1px outset rgb(0 0 0 / 30%);
}
 
.main-menu-frame__image {
    padding: 6px;
}
 
.main-menu-frame__name {
    background: #00000040;
    padding: 2px 4px;
    font-size: 0.8em;
    width: 100%;
    box-sizing: border-box;
}
 
@media (max-width: 800px) {
    .main-menu-frame  {
        display: flex;
        width: 100%;
    }
 
    .main-menu-frame__name {
        background: #00000020;
        padding: 4px 6px;
        font-size: 0.9em;
        display: flex;
        align-items: center;
    }
 
    .main-menu-frame__image {
        padding: 4px;
    }
}
}}<!--
--><div class="customCSS" style="display:none">
.main-menu-frame:hover {
    filter: brightness(105%);
    box-shadow: 0px 4px 4px 1px rgba(0, 0, 0, 0.25);
    transform: translateY(-4px);
}
</div>