|
|
| (не показано 10 промежуточных версий этого же участника) |
| Строка 1: |
Строка 1: |
| <div class="customCSS" style="display:none"> | | <div class="customCSS" style="display:none"> |
| /* Основные стили для меню */
| | .mw-parser-output *:has(.сollapsible-menu) { position: relative; } |
| | | </div>{{#if: {{{1|}}}|<div class="z-index-position сollapsible-menu mw-collapsible mw-collapsed" style="--color:{{{color|#595965}}}> |
| .mw-parser-output *:has(.сollapsible-menu) { | | <div class="сollapsible-menu__content mw-collapsible-content no-margin-edges short-scrollbar">{{{1|}}}</div> |
| position: relative;
| | </div>}}<!-- |
| } | |
| | |
| .сollapsible-menu {
| |
| position: absolute !important;
| |
| top: -4px;
| |
| right: -2px;
| |
|
| |
| display: grid;
| |
| align-content: center;
| |
|
| |
| z-index: 100;
| |
| }
| |
| | |
| /* Контейнер выпадающего меню */
| |
| | |
| .сollapsible-menu__content {
| |
| position: absolute !important;
| |
| top: 18px;
| |
| right: 0;
| |
|
| |
| display: grid;
| |
| gap: 4px;
| |
|
| |
| width: clamp(16em, 50vw, 18em);
| |
| min-width: 200px;
| |
| max-height: 300px;
| |
|
| |
| padding: 6px;
| |
| border-radius: 0;
| |
| border: 2px solid #31313b;
| |
| border-top: 2px solid #474757;
| |
|
| |
| background-color: #24242a;
| |
| box-shadow: inset 0px 0px 4px 0px rgba(0, 0, 0, 0.3), 0 4px 8px rgba(0, 0, 0, 0.3);
| |
|
| |
| overflow: auto;
| |
| overflow-x: hidden;
| |
| }
| |
| | |
| /* Тоггл кнопка */
| |
| | |
| .сollapsible-menu .mw-collapsible-toggle {
| |
| position: relative;
| |
| top: 0;
| |
| right: 0;
| |
|
| |
| text-align: right;
| |
| font-size: 12px;
| |
| font-weight: bold;
| |
| color: var(--color);
| |
|
| |
| transition: all 0.05s;
| |
| } | |
| | |
| .сollapsible-menu .mw-collapsible-toggle:hover {
| |
| filter: brightness(120%);
| |
| } | |
| | |
| .сollapsible-menu .mw-collapsible-toggle-expanded {
| |
| filter: brightness(120%);
| |
| } | |
| | |
| .сollapsible-menu .mw-collapsible-toggle-default:before {
| |
| content: '▽';
| |
| }
| |
| | |
| .сollapsible-menu .mw-collapsible-toggle-default:after {
| |
| content: none !important;
| |
| }
| |
| | |
| .сollapsible-menu .mw-collapsible-text {
| |
| display: none;
| |
| }
| |
| | |
| /* Адаптивность */
| |
| @media screen and (max-width: 850px) {
| |
| .сollapsible-menu {
| |
| position: static
| |
| }
| |
|
| |
| .сollapsible-menu:hover > .сollapsible-menu__content {
| |
| display: grid !important;
| |
| transition-delay: 0.05s;
| |
| }
| |
| | |
| .сollapsible-menu .mw-collapsible-toggle {
| |
| font-size: 13px;
| |
| }
| |
| | |
| .сollapsible-menu__content {
| |
| box-shadow: 0px 0px 100vw 100vh rgb(0 0 0 / 60%);
| |
| position: fixed!important;
| |
| width: 80vw !important;
| |
| top: 40vh !important;
| |
| left: 0 !important;
| |
| margin: 0 auto !important;
| |
| right: 0!important;
| |
| }
| |
| }
| |
| </div><!-- | |
|
| |
|
| -->{{#if: {{{1|}}}|<div class="z-index-position сollapsible-menu mw-collapsible mw-collapsed" style="--color:{{{color|#595965}}}> | | --><templatestyles src="CollapsibleMenu/styles.css" /> |
| <div class="сollapsible-menu__content mw-collapsible-content no-margin-edges short-scrollbar">{{{1|}}}</div>
| |
| </div>}}
| |