Шаблон:RulesBox: различия между версиями
Материал из Space Station 14 Вики
Pok (обсуждение | вклад) мНет описания правки |
Pok (обсуждение | вклад) мНет описания правки |
||
| (не показаны 44 промежуточные версии этого же участника) | |||
| Строка 1: | Строка 1: | ||
<div class=" | <div class="rules__block" style="background-color:{{{background-color|#282831}}};box-shadow:{{{box-shadow|0 2px 4px rgba(0, 0, 0, 0.35)}}};margin:{{{margin|15px 5px}}};border-left:{{{border-size|5px}}} solid {{{border-color|#404053}}};padding:{{{padding|12px}}};color:{{{color|lightgrey}}};> | ||
style=" | <div class="rules__container"> | ||
{{#if: {{{title|}}} | | |||
<div class="rules__title" style="margin-bottom:{{{margin-bottom-title|8px}}};>'''{{{title}}}'''</div> | |||
}} | |||
"> | {{#if: {{{content|}}} | | ||
<div class="rules__title" | <div class="rules__content">{{{content}}}</div> | ||
style=" | }} | ||
</div> | |||
{{#ifeq: {{{1|}}} | addition | | |||
<div class="rules__container--addition mw-collapsible mw-collapsed"> | |||
<div class="rules__title--addition"><span style="white-space: nowrap;">'''{{{title-addition}}}'''</span></div> | |||
<div class="rules__content--addition mw-collapsible-content">{{{content-addition}}}</div> | |||
">{{{content}}}</div> | </div> | ||
</div> | }} | ||
< | </div><!-- | ||
<div class=" | |||
. | -->{{#css: | ||
.rules__block { | |||
position: relative; | |||
display: flex; | |||
justify-content: space-between; | |||
text-align: left; | |||
border-radius: 0.3em; | border-radius: 0.3em; | ||
box-shadow | transition: background-color 0.3s ease, box-shadow 0.3s ease; | ||
} | } | ||
. | .rules__block li { | ||
margin-top: {{{margin-li|8px}}}; | |||
} | |||
.rules__container { | |||
} | } | ||
.rules__title { | .rules__title { | ||
font-size: 1. | font-size: 1.2em; | ||
} | } | ||
.rules__content { | .rules__content { | ||
} | |||
.rules__title--addition { | |||
font-size: 1em; | |||
display: flex; | |||
align-items: center; | |||
} | |||
.rules__container--addition { | |||
position: absolute; | |||
display: flex; | |||
flex-direction: column; | |||
max-height: 90%; | |||
top: 0; | |||
right: 0; | |||
width: min(35%, 300px); | |||
padding: 12px; | |||
border-radius: 0.3em; | |||
background-color: #34343f; | |||
border-left: 4px solid #434353; | |||
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2); | |||
transition: background-color 0.3s ease; | |||
} | |||
.rules__content--addition { | |||
flex-grow: 1; | |||
overflow-y: auto; | |||
margin-top: 10px; | margin-top: 10px; | ||
} | } | ||
. | .mw-collapsible-toggle { | ||
margin- | position: absolute; | ||
top: 12px; | |||
right: 12px; | |||
} | |||
/* Адаптивные стили для мобильных устройств */ | |||
@media (max-width: 700px) { | |||
.rules__block { | |||
flex-direction: column; | |||
margin: 20px 0; | |||
} | |||
.rules__container--addition { | |||
position: static; | |||
display: block; | |||
box-sizing: border-box; | |||
width: 100%; | |||
border-left: none; | |||
box-shadow: none; | |||
margin-top: 20px; | |||
} | |||
.rules__container--addition:hover { | |||
background-color: #33333b; | |||
} | |||
.rules__block:hover { | |||
background-color: #27272e; | |||
box-shadow: 0 4px 2px rgba(0, 0, 0, 0.15); | |||
} | |||
.mw-collapsible-toggle { | |||
position: static; | |||
top: 12px; | |||
right: 12px; | |||
} | |||
} | } | ||
}} | |||
Текущая версия от 15:43, 8 декабря 2024
