Шаблон:RoleCollapsibleBox: различия между версиями
Нет описания правки |
Нет описания правки |
||
| Строка 1: | Строка 1: | ||
{{#css: | {{#css: | ||
.role-box | .ss220-role.tabs-togglebox {display:block; box-sizing:border-box; width:100%; max-width:100%; margin:8px 0; border:1px solid #2b3139; border-radius:8px; overflow:hidden; background:#191f26; color:#c5c9ce;} | ||
.ss220-role.tabs-togglebox > .tabs-container {position:relative; display:grid; border:0; padding:0; background:transparent;} | |||
} | |||
.role- | .ss220-role.tabs-togglebox > .tabs-container > .tabs-input {display:block !important; position:absolute; top:0; left:0; width:100%; height:104px; margin:0; padding:0; opacity:0; z-index:2; cursor:pointer;} | ||
.ss220-role.tabs-togglebox > .tabs-container > .tabs-label {display:flex; align-items:flex-end; gap:10px; box-sizing:border-box; width:100%; min-height:104px; margin:0; padding:6px 12px; border:0; border-radius:0; background:transparent; color:inherit; font:400 16px/1.3 Roboto,Arial,sans-serif; cursor:pointer; user-select:none;} | |||
.ss220-role .tabs-label::before {content:""; width:5px; height:5px; flex:none; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(-45deg); transition:transform .25s ease;} | |||
} | .ss220-role .tabs-input:checked + .tabs-label::before {transform:rotate(45deg);} | ||
.role-box-content { | .ss220-role.tabs-togglebox .tabs-input:checked + .tabs-label .tabs-open, .ss220-role .tabs-label .tabs-open {display:inline !important;} | ||
.ss220-role .tabs-label .tabs-close {display:none;} | |||
.ss220-role .tabs-input:focus + .tabs-label {outline:none; box-shadow:none;} | |||
.ss220-role.tabs-togglebox > .tabs-container > .tabs-content {display:grid; grid-template-rows:0fr; min-height:0; height:auto; max-height:none; overflow:hidden; margin:0; padding:0; border:0; opacity:0; visibility:hidden; transition:grid-template-rows .25s ease, opacity .25s ease, visibility .25s ease;} | |||
} | .ss220-role.tabs-togglebox > .tabs-container > .tabs-input:checked ~ .tabs-content {grid-template-rows:1fr; opacity:1; visibility:visible;} | ||
.role- | .ss220-role .ss220-role-body {min-height:0; overflow:hidden;} | ||
.ss220-role .ss220-role-inner {border-top:2px solid #405a75; padding:14px 16px; line-height:1.55;} | |||
.ss220-role .tabs-label::before {margin-bottom:8px;} | |||
.ss220-role-shell {position:relative; width:100%; margin:8px 0;} | |||
.ss220-role-shell > .role-header {position:absolute; top:6px; left:36px; max-width:calc(100% - 48px); height:92px; display:flex; align-items:flex-end; gap:10px; z-index:3;} | |||
} | .ss220-role.tabs-togglebox {margin:0;} | ||
.role- | .ss220-role .tabs-label .tabs-open {color:transparent; font-size:0;} | ||
.ss220-role-shell > .role-header .role-title {font-size:1.8em; font-weight:400;} | |||
.ss220-role-shell > .role-header a {position:relative; } | |||
.ss220-role .role-section-title {color:#fff; font-weight:600; font-size:1.05em; border-bottom:2px solid #3e5774; margin-top:16px; margin-bottom:1px;} | |||
.ss220-role .role-section-title:first-child {margin-top:0;} | |||
} | @media (prefers-reduced-motion:reduce) {.ss220-role.tabs-togglebox > .tabs-container, .ss220-role.tabs-togglebox > .tabs-container > .tabs-content, .ss220-role .tabs-label::before {transition:none;} | ||
.role-title { | |||
} | |||
.role-section-title { | |||
} | } | ||
}} | }} | ||
<div class="ss220-role-shell"> | |||
<div class="role-header">{{#if:{{{иконка|}}}|[[File:{{{иконка}}}|92x92px|link={{{ссылка|}}}]]}}<span class="role-title">{{#if:{{{ссылка|}}}|[[{{{ссылка}}}|{{{название|Роль}}}]]|{{{название|Роль}}}}}</span></div> | |||
{{#tag:tab| | |||
<div class="ss220-role-body"><div class="ss220-role-inner"> | |||
<div class="role-header"> | {{{содержание|}}} | ||
{{#if:{{{иконка|}}}|[[File:{{{иконка}}}|92x92px | </div></div> | ||
|class=ss220-role | |||
< | |name={{{название|Роль}}} | ||
</div> | |collapsed=collapsed | ||
}} | |||
</div> | </div> | ||
Текущая версия от 16:04, 29 сентября 2026
Роль