Space Station 14 Вики

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

Интерактивная навигация по истории
← Предыдущая правка
ВизуальныйВики-текст
Нет описания правки
мНет описания правки
 
(не показано 36 промежуточных версий 2 участников)
Строка 1: Строка 1:
{{#if: {{{1|}}}
<div class="slide-menu__container mw-collapsible mw-collapsed"
|
style="
{{#ifeq: {{{1}}} | overlay
margin: {{{margin|20px 0}}};
|
border: 2px solid {{{border-color|var(--theme-border-color-100)}}};
  <div class="slide__overlay--page z_index_position" >
    border-radius: var(--border-radius-low);
  <div class="slide__overlay--container mw-collapsible mw-collapsed"
">
  style="
<div class="slide-menu__title" style="color:{{{color}}}; font-size:{{{font-size|1.05em}}};>{{{title}}}</div>
margin: {{{margin|4px 2px}}};
<div class="slide-menu__content mw-collapsible-content">{{{content}}}</div>
text-align: {{{text-align|left}}};
</div><!--  
padding: {{{padding|clamp(8px, 1vw, 12px)}}};
 
background: {{{background-color|#27272e}}};
-->{{#css:
border: {{{border-size|2px}}} solid {{{border-color|#141414}}};
.slide-menu__container {
border-radius: {{{border-radius|0.5em}}};
  ">
  <div class="slide__overlay--title"
  style="
color: {{{color|lightgrey}}};
font-size: {{{font-size|1em}}};
  "><span style="white-space:nowrap;">{{{title}}}</span></div>
  <div class="slide__overlay--content mw-collapsible-content">{{{content}}}</div>
  </div></div>
  <!-- Не изменяемый CSS -->
  <div class="customCSS" style="display:none">
  .slide__overlay--page {
position: relative;
position: relative;
  }
background: var(--theme-bg-color-150);
  .slide__overlay--container {
padding: 0.6em;
/* position: absolute; */
}
/* top: -30px; */
 
left: 0;
.slide-menu__title {
right: 0;
  }
  .slide__overlay--title {
font-weight: 500;
  }
  .slide__overlay--content {
text-wrap: pretty;
  }
  @media (max-width:850px) {
.slide__overlay--container {
position: relative;
top: 0;
}
  }
  </div>
}}
| <!-- Если параметр не задан -->
  <div class="slide__base--container mw-collapsible mw-collapsed" data-expandtext="+" data-collapsetext="-"
  style="
margin-bottom: {{{margin-bottom|6px}}};
text-align: {{{text-align|center}}};
padding: {{{padding|1em 0.6em}}};
border: {{{border-size|3px}}} solid {{{border-color|#474754}}};
border-radius: {{{border-radius|0.3em}}};
  ">
  <div class="slide__base--title"
  style="
color: {{{color|lightgrey}}};
font-size: {{{font-size|1.1em}}};
  ">{{{title}}}</div>
  <div class="slide__base--content mw-collapsible-content">{{{content}}}</div>
  </div>
  <!-- Не изменяемый CSS -->
  <div class="customCSS" style="display:none">
  .slide__base--container {
position: relative;
text-wrap: pretty;
background: #27272e;
  }
  .slide__base--title {
position: relative;
z-index: 2;
display: inline-block;
display: inline-block;
margin: 0;
margin: 0;
font-family: 'Arial', sans-serif;
font-family: 'noto sans';
font-weight: bold;
font-weight: bold;
  }
}
  .slide__base--content {
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>
.slide-menu__content {
  <!-- При активации чекбокса с классом open-all-menus -->
padding-top: 0.5em;
  <div class="customCSS" style="display:none">
}
  /* Скрытие названия */
  .toggle-checked .slide__overlay--title {
display: none !important;
  }
  /* Скрытие кнопки свернуть/развернуть */
  .toggle-checked .mw-collapsible-toggle {
display: none !important;
  }
  /* Показывать содержимое */
  .toggle-checked .mw-collapsible .mw-collapsible-content {
display: block !important;
  }
  .toggle-checked .slide__overlay--page {
padding: 7px !important;
  }
  .toggle-checked .slide__overlay--container {
position: relative !important;
max-height: none !important;
  }
  </div>
}}
}}
Источник — https://station14.ru/wiki/Шаблон:SlideMenu