Шаблон:Smuggling/Item: различия между версиями
Материал из Space Station 14 Вики
Pok (обсуждение | вклад) мНет описания правки |
Pok (обсуждение | вклад) мНет описания правки |
||
| Строка 1: | Строка 1: | ||
<div class=" | <div class="smuggling-item noExternal mobile-image" tabindex="0" style="background-color:{{{background-color|#373743}}}f5> | ||
<div class=" | <div class="smuggling-item__level">{{AttentionLevel|{{{Уровень}}}|1}}</div> | ||
<div class=" | <div class="smuggling-item__image">{{#if:{{{id|}}}|[[Файл:{{{id}}}.png|64x64px|link=]]|[[файл:{{{Иконка|BikeHorn.png}}}|64x64px|link=]]}}</div> | ||
<div class=" | <div class="smuggling-item__name">'''{{#if:{{{id|}}}|{{#invoke:Entity Lookup|getname|{{{id}}}}}|{{{Название}}}}}'''</div> | ||
</div> | </div> | ||
<div class=" | <div class="smuggling-menu"> | ||
<div class=" | <div class="smuggling-menu__header"> | ||
<div style="display: flex;"> | <div style="display: flex;"> | ||
<div style="margin-right: 15px;">{{#if:{{{id|}}}|[[Файл:{{{id}}}.png|64x64px|link=]]|[[файл:{{{Иконка|BikeHorn.png}}}|64x64px|link=]]}}</div> | <div style="margin-right: 15px;">{{#if:{{{id|}}}|[[Файл:{{{id}}}.png|64x64px|link=]]|[[файл:{{{Иконка|BikeHorn.png}}}|64x64px|link=]]}}</div> | ||
<div>'''{{#if:{{{id|}}}|{{#invoke:Entity Lookup|getname | <div>'''{{#if:{{{id|}}}|{{#invoke:Entity Lookup|getname|{{{id}}}}}|{{{Название}}}}}'''</div> | ||
</div> | </div> | ||
<hr class=" | <hr class="smuggling-menu__header--hr"> | ||
</div> | </div> | ||
<div class=" | <div class="smuggling-menu__body"> | ||
{{#if:{{{Уровень|}}}|{{AttensionLevel|{{{Уровень}}}}}<br><br>|}} | {{#if:{{{Уровень|}}}|{{AttensionLevel|{{{Уровень}}}}}<br><br>|}} | ||
{{{Описание}}} | {{{Описание}}} | ||
| Строка 20: | Строка 20: | ||
--> | --> | ||
{{#css: | {{#css: | ||
. | .smuggling-item { | ||
display: inline-block; | display: inline-block; | ||
position: relative; | position: relative; | ||
| Строка 26: | Строка 26: | ||
transition: all 0.15s ease; | transition: all 0.15s ease; | ||
overflow: hidden; | overflow: hidden; | ||
min-width: | min-width: 130px; | ||
text-align: center; | text-align: center; | ||
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.35); | box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.35); | ||
border: 1px outset rgb(0 0 0 / 30%); | border: 1px outset rgb(0 0 0 / 30%); | ||
cursor: pointer; | |||
} | } | ||
. | .smuggling-item__level { | ||
position: absolute; | position: absolute; | ||
right: 0; | right: 0; | ||
} | } | ||
. | .smuggling-item__image { | ||
padding: 6px; | padding: 6px; | ||
} | } | ||
. | .smuggling-item__name { | ||
background: #00000040; | background: #00000040; | ||
padding: 2px 4px; | padding: 2px 4px; | ||
| Строка 47: | Строка 48: | ||
width: 100%; | width: 100%; | ||
box-sizing: border-box; | box-sizing: border-box; | ||
} | |||
.smuggling-menu { | |||
overflow-y: auto; | |||
display: flex; | |||
flex-direction: column; | |||
visibility: hidden; | |||
opacity: 0; | |||
background-color: #212126; | |||
width: 60%; | |||
height: 80%; | |||
border: 1px solid black; | |||
border-radius: 0.5rem; | |||
padding: 5px 25px; | |||
position: fixed; | |||
margin: auto; | |||
top: 0; | |||
right: 0; | |||
bottom: 0; | |||
left: 0; | |||
z-index: 100 !important; | |||
box-shadow: 0px 0px 0px 100vh rgba(0,0,0,0.6); | |||
} | |||
.smuggling-item:focus-within + .smuggling-menu { | |||
visibility: visible; | |||
opacity: 1; | |||
} | |||
.smuggling-menu:hover { | |||
visibility: visible; | |||
opacity: 1; | |||
} | |||
.smuggling-menu__header { | |||
text-align: center; | |||
font-size: 1.1em; | |||
position: relative; | |||
} | |||
.smuggling-menu__header--hr { | |||
margin: 20px 0; | |||
padding: 0; | |||
height: 0; | |||
border: none; | |||
border-top: 1px solid darkgray; | |||
} | |||
.smuggling-menu__body { | |||
height: 100%; | |||
position: relative; | |||
} | } | ||
@media (max-width: 800px) { | @media (max-width: 800px) { | ||
. | .smuggling-item { | ||
display: flex; | display: flex; | ||
width: 100%; | width: 100%; | ||
} | } | ||
. | .smuggling-item__name { | ||
background: #00000020; | background: #00000020; | ||
padding: 4px 6px; | padding: 4px 6px; | ||
| Строка 63: | Строка 115: | ||
} | } | ||
. | .smuggling-item__image { | ||
padding: 4px; | padding: 4px; | ||
} | } | ||
| Строка 69: | Строка 121: | ||
}}<!-- | }}<!-- | ||
--><div class="customCSS" style="display:none"> | --><div class="customCSS" style="display:none"> | ||
. | .smuggling-item:hover { | ||
filter: brightness(105%); | filter: brightness(105%); | ||
} | } | ||
</div> | </div> | ||
Версия от 11:02, 3 ноября 2024
❔
{{{Название}}}
{{{Название}}}
