|
|
| Строка 1: |
Строка 1: |
| {{#css: | | {{#css: |
| .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 {box-sizing:border-box; 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;} | | .ss220-role .role-header {display:flex; align-items:flex-end; gap:10px; min-height:104px; padding:6px 12px; box-sizing:border-box;} |
| | | .ss220-role .role-title {font-size:1.8em; font-weight:400;} |
| .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 .mw-collapsible-toggle {float:none; position:absolute; top:8px; right:12px;} |
| .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 {position:relative;} |
| .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);} | |
| .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;} | |
| .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 .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;}
| |
| .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 {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;} | | .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;}
| |
| }
| |
| }} | | }} |
| <div class="ss220-role-shell"> | | <div class="ss220-role mw-collapsible mw-collapsed"> |
| <div class="role-header">{{#if:{{{иконка|}}}|[[File:{{{иконка}}}|92x92px|link={{{ссылка|}}}]]}}<span class="role-title">{{#if:{{{ссылка|}}}|[[{{{ссылка}}}|{{{название|Роль}}}]]|{{{название|Роль}}}}}</span></div> | | <div class="role-header">{{#if:{{{иконка|}}}|[[File:{{{иконка}}}|92x92px|link={{{ссылка|}}}]]}}<span class="role-title">{{#if:{{{ссылка|}}}|[[{{{ссылка}}}|{{{название|Роль}}}]]|{{{название|Роль}}}}}</span></div> |
| {{#tag:tab|
| | <div class=" mw- collapsible- content"><div class="ss220-role-inner"> |
| <div class=" ss220- role- body"><div class="ss220-role-inner"> | |
| {{{содержание|}}} | | {{{содержание|}}} |
| </div></div> | | </div></div> |
| |class=ss220-role
| |
| |name={{{название|Роль}}}
| |
| |collapsed=collapsed
| |
| }}
| |
| </div> | | </div> |
