|
|
| (не показано 36 промежуточных версий этого же участника) |
| Строка 1: |
Строка 1: |
| <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>]] }} }} | | <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="link-card__image">[[Файл:{{{image|BikeHorn.png}}}|{{{pixel|64x64px}}}|link=]]</div> | | --bg-color:{{{фон|var(--theme-bg-color-300)}}}; |
| <div class="link-card__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> }} |
| .link-card {
| | </div><noinclude>{{doc}}</noinclude> |
| display: inline-block;
| |
| position: relative;
| |
| min-width: 110px;
| |
| text-align: center;
| |
| border: 1px outset rgb(0 0 0 / 30%);
| |
| border-radius: 0.3em;
| |
| box-shadow: 0px 2px 1px 0px rgba(0, 0, 0, 0.2);
| |
| background: var(--background-color);
| |
| transition: all 0.15s ease;
| |
| } | |
| | |
| .link-card__image {
| |
| position: relative;
| |
| padding: 6px;
| |
| align-content: center;
| |
| } | |
| | |
| .link-card__name {
| |
| position: relative;
| |
| width: 100%;
| |
| padding: 2px 4px;
| |
| font-size: 0.8em;
| |
| box-sizing: border-box;
| |
| background: #00000040;
| |
| font-weight: bold;
| |
| }
| |
| | |
| @media (min-width: 800px) {
| |
| .link-card:not(.link-card__side):hover {
| |
| box-shadow: 0px 4px 4px 1px rgba(0, 0, 0, 0.2);
| |
| transform: translateY(-4px);
| |
| }
| |
| }
| |
| | |
| @media (max-width: 800px) {
| |
| .link-card {
| |
| display: flex;
| |
| box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.4);
| |
| width: 100%;
| |
| text-align: left;
| |
| }
| |
| | |
| .link-card__name {
| |
| background: #00000020;
| |
| padding: 4px 8px;
| |
| font-size: 0.9em;
| |
| display: flex;
| |
| align-items: center;
| |
| justify-content: space-between;
| |
| flex-wrap: wrap;
| |
| }
| |
| | |
| .link-card__image {
| |
| padding: 4px;
| |
| }
| |
| } | |
| | |
| .link-card__side {
| |
| display: flex ;
| |
| box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.4);
| |
| 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;
| |
| justify-content: space-between;
| |
| flex-wrap: wrap;
| |
| } | |
| | |
| .link-card__side .link-card__image {
| |
| padding: 4px;
| |
| }
| |
| | |
| .link-card__side img {
| |
| width: 32px;
| |
| height: 32px;
| |
| }
| |
| }} | |