Шаблон:RulesBox

{{{title}}}

{{{content}}}

{{{title-addition}}}

{{{content-addition}}}

.rules__block { position: relative; display: flex; justify-content: space-between; text-align: left; margin: 20px 8px; padding: 12px; background: #27272e; border-left: 4px solid #2B30BD; border-radius: 0.3em; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); } .rules__block li { margin-top: 12px; } .rules__container {

} .rules__title { font-size: 1.3em; } .rules__title--addition { font-size: 1em; display: flex; align-items: center; } .rules__content { margin-top: 10px; } .rules__container--addition { position: absolute; display: flex; flex-direction: column; max-height: 90%; top: 0; right: 0; width: min(35%, 300px); padding: 12px; border-radius: 0.3em; background-color: #303038; border-left: 4px solid #494953; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); } .rules__container--addition:hover { background-color: #33333b; } .rules__content--addition { flex-grow: 1; overflow-y: auto; margin-top: 10px; } .mw-collapsible-toggle { position: absolute; top: 12px; right: 12px; } /* Адаптивные стили для мобильных устройств */ @media (max-width: 700px) { .rules__block { flex-direction: column; margin: 20px 0; } .rules__container--addition { position: static; display: block; box-sizing: border-box; width: 100%; border-left: none; box-shadow: none; margin-top: 20px; } .rules__container--addition:hover { background-color: #33333b; } .mw-collapsible-toggle { position: static; top: 12px; right: 12px; } }