|
|
| Строка 4: |
Строка 4: |
| |category1-paragraph2 = Пункт 1.2 | | |category1-paragraph2 = Пункт 1.2 |
| |category1-paragraph3 = Пункт 1.3 | | |category1-paragraph3 = Пункт 1.3 |
| |category1-paragraph1-content = Контент для пункта 1.1 {{GameModesHeader}} | | |category1-paragraph1-content = {{GameModesHeader}} Контент для пункта 1.1 |
| |category1-paragraph2-content = Контент для пункта 1.2 | | |category1-paragraph2-content = Контент для пункта 1.2 |
| |category1-paragraph3-content = Контент для пункта 1.3 | | |category1-paragraph3-content = Контент для пункта 1.3 |
| Строка 14: |
Строка 14: |
| |category2-paragraph2-content = Контент для пункта 2.2 | | |category2-paragraph2-content = Контент для пункта 2.2 |
| |category2-paragraph3-content = Контент для пункта 2.3 | | |category2-paragraph3-content = Контент для пункта 2.3 |
| }}
| |
| {{#css:
| |
| .category-menu {
| |
| border: 2px solid #4a4a55;
| |
| border-radius: 0.3em;
| |
| background-color: #37373d;
| |
| overflow: hidden;
| |
| padding: 12px 10px;
| |
| box-sizing: border-box;
| |
| }
| |
|
| |
| /* Категории */
| |
| .main-container {
| |
| display: flex;
| |
| width: 100%;
| |
| }
| |
|
| |
| .categories {
| |
| display: flex;
| |
| justify-content: center;
| |
| padding: 6px;
| |
|
| |
| display: none;
| |
| }
| |
|
| |
| .categories div {
| |
| cursor: pointer;
| |
| padding: 10px 20px;
| |
| margin: 0 8px;
| |
| background-color: #43434d;
| |
| border-radius: 0.3em;
| |
| }
| |
|
| |
| .categories .active {
| |
| background-color: #717483; /* Выделение активного пункта меню */
| |
| }
| |
|
| |
| /* Меню слева */
| |
| .menu-container {
| |
| width: 300px;
| |
| }
| |
|
| |
| .menu div {
| |
| cursor: pointer;
| |
| padding: 10px;
| |
| background-color: #53535f;
| |
| border-radius: 0.3em;
| |
| font-size: 16px;
| |
| font-weight: bold;
| |
| overflow-y: auto;
| |
| box-sizing: border-box;
| |
| max-height: 400px;
| |
| transition: all 0.05s;
| |
| box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.3);
| |
| }
| |
| .menu div:not(:last-child) {
| |
| margin-bottom: 8px;
| |
| }
| |
|
| |
| .menu {
| |
| display: none; /* Скрываем меню, если категория не выбрана */
| |
| }
| |
|
| |
| .menu div:hover {
| |
| background-color: #5d5d6b;
| |
| }
| |
|
| |
| .menu.active {
| |
| display: block; /* Отображаем активное меню */
| |
| }
| |
|
| |
| .menu .active {
| |
| outline: 2px solid #7b7e8f;
| |
| }
| |
|
| |
| /* Контент */
| |
| .content {
| |
| padding: 10px;
| |
| width: 100%;
| |
| background-color: #52525d;
| |
| border-radius: 0.3em;
| |
| min-height: 150px;
| |
| max-height: 400px;
| |
| overflow: auto;
| |
| box-sizing: border-box;
| |
| margin-left: 12px;
| |
| box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.4);
| |
| overflow-x: hidden;
| |
| }
| |
|
| |
| .content > div {
| |
| display: none;
| |
| }
| |
|
| |
| .content .active {
| |
| display: block;
| |
| }
| |
| }} | | }} |
|
| |
|