Шаблон:SlideMenu: различия между версиями
Материал из Space Station 14 Вики
Pok (обсуждение | вклад) мНет описания правки |
Pok (обсуждение | вклад) Нет описания правки |
||
Строка 46: | Строка 46: | ||
}} | }} | ||
| <!-- Если параметр не задан --> | | <!-- Если параметр не задан --> | ||
<div class="slide__base--container mw-collapsible mw-collapsed" | <div class="slide__base--container mw-collapsible mw-collapsed" data-expandtext="+" data-collapsetext="-" | ||
style=" | style=" | ||
margin-bottom: {{{margin-bottom|6px}}}; | margin-bottom: {{{margin-bottom|6px}}}; | ||
text-align: {{{text-align| | text-align: {{{text-align|center}}}; | ||
padding: {{{padding|0. | padding: {{{padding|1em 0.6em}}}; | ||
border: {{{border-size|3px}}} solid {{{border-color|#474754}}}; | border: {{{border-size|3px}}} solid {{{border-color|#474754}}}; | ||
border-radius: {{{border-radius|0.3em}}}; | border-radius: {{{border-radius|0.3em}}}; | ||
Строка 64: | Строка 64: | ||
<div class="customCSS" style="display:none"> | <div class="customCSS" style="display:none"> | ||
.slide__base--container { | .slide__base--container { | ||
position: relative; | |||
text-wrap: pretty; | text-wrap: pretty; | ||
background: #27272e; | background: #27272e; | ||
} | } | ||
.slide__base--title { | .slide__base--title { | ||
position: relative; | |||
z-index: 2; | |||
display: inline-block; | display: inline-block; | ||
margin: 0; | margin: 0; | ||
Строка 78: | Строка 77: | ||
} | } | ||
.slide__base--content { | .slide__base--content { | ||
padding-top: 0. | padding-top: 2em; | ||
text-align: left; | |||
} | |||
.mw-collapsible-toggle { | |||
position: absolute; | |||
top: 0; | |||
left: 0; | |||
bottom: 0; | |||
right: 0; | |||
width: 100%; | |||
height: 55px; | |||
padding: 1em 0.6em !important; | |||
text-align: center; | |||
box-sizing: border-box; | |||
display: flex; | |||
align-content: center; | |||
justify-content: flex-end; | |||
align-items: center; | |||
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25); | |||
transition: background-color 0.2s; | |||
} | |||
.mw-collapsible-toggle:hover { | |||
background-color: #22222b; | |||
} | |||
.mw-collapsible-text { | |||
color: #6259d9; | |||
font-weight: bold; | |||
font-size: 40px; | |||
margin-bottom: 10px; | |||
text-decoration: none !important; | |||
border: none !important; | |||
} | |||
.mw-collapsible-title { | |||
cursor: pointer; | |||
display: inline-block; | |||
padding: 5px; | |||
} | |||
.mw-collapsible-toggle:before { | |||
content: attr(data-expandtext); | |||
} | |||
.mw-collapsed .mw-collapsible-toggle:before { | |||
content: attr(data-expandtext); | |||
} | |||
.mw-collapsible:not(.mw-collapsed) .mw-collapsible-toggle:after { | |||
content: attr(data-collapsetext); | |||
} | |||
.mw-collapsible-toggle:after { | |||
content: attr(data-expandtext); | |||
} | |||
.mw-collapsed .mw-collapsible-toggle:after { | |||
content: attr(data-expandtext); | |||
} | |||
.mw-collapsible:not(.mw-collapsed) .mw-collapsible-toggle:after { | |||
content: attr(data-collapsetext); | |||
} | |||
.mw-collapsible-title { | |||
display: flex; | |||
align-items: center; | |||
} | |||
.mw-collapsible-toggle:before { | |||
content: attr(data-expandtext); | |||
} | |||
.mw-collapsed .mw-collapsible-toggle:before { | |||
content: attr(data-expandtext); | |||
} | |||
.mw-collapsible:not(.mw-collapsed) .mw-collapsible-toggle:before { | |||
content: attr(data-collapsetext); | |||
} | |||
.mw-collapsible-title { | |||
display: flex; | |||
align-items: center; | |||
cursor: pointer; | |||
} | |||
.mw-collapsible-title:hover + .mw-collapsible-content { | |||
display: block; | |||
} | |||
.mw-collapsible.mw-collapsed .mw-collapsible-content { | |||
display: none; | |||
} | |||
.mw-collapsible:not(.mw-collapsed) .mw-collapsible-content { | |||
display: block; | |||
} | |||
.mw-collapsible:not(.mw-collapsed) .mw-collapsible-toggle { | |||
background-color: #22222b; | |||
} | } | ||
</div> | </div> | ||
<!-- При активации чекбокса с классом open-all-menus --> | <!-- При активации чекбокса с классом open-all-menus --> |