Меню быстрого доступа (Rodina RP)

[damitz]

Создать виджет - HTML - Список разделов: Боковая панель - Шаблон (код внизу)

<div  data-widget-id="11" data-widget-key="forum_menu_dostup" data-widget-definition="html">

<h3 class="block-minorHeader">Меню быстрого доступа</h3>
            
            <div class="block-body block-row">
                <div class="rfq-menu">
  <a class="rfq-btn" href="http://forum.rodina-rp.com/forums/526/"><span>Правила проекта</span></a>
  <a class="rfq-btn" href="http://forum.rodina-rp.com/index.php?forums/Жалобы.77/"><span>Жалобы Центральный округ</span></a>
  <a class="rfq-btn" href="http://forum.rodina-rp.com/index.php?forums/Жалобы.56/"><span>Жалобы Южный округ</span></a>
  <a class="rfq-btn" href="http://forum.rodina-rp.com/index.php?forums/Северный-округ.112/"><span>Жалобы Северный округ</span></a>
  <a class="rfq-btn" href="http://forum.rodina-rp.com/index.php?forums/Восточный-округ.154/"><span>Жалобы Восточный округ</span></a>
  <a class="rfq-btn" href="https://forum.rodina-rp.com/forums/261/"><span>Жалобы Западный округ</span></a>
  <a class="rfq-btn" href="https://forum.rodina-rp.com/forums/332/"><span>Жалобы Приморский округ</span></a>
  <a class="rfq-btn" href="https://forum.rodina-rp.com/forums/380/"><span>Жалобы Федеральный округ</span></a>
  <a class="rfq-btn" href="https://forum.rodina-rp.com/forums/481/"><span>Жалобы Москва</span></a>
                    </div>
            </div>
        </div>

В extra.less

.p-sideNav.is-active {
    width: 300px
}

.dataList-cell.dataList-cell--action.dataList-cell--action:hover {
    background: #000
}

.p-body-sidebar .rfq-menu {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0px 0px
}

.p-body-sidebar .rfq-btn {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    border-radius: 8px;
    background: #141416;
    border: 1px solid #e54545;
    color: var(--xf-textColorEmphasized, #fff);
    text-decoration: none;
    font-weight: 600;
    font-size: 13px;
    line-height: 1.28;
    transition: border-color .14s ease,background-color .14s ease,filter .14s ease
}

.p-body-sidebar .rfq-btn span {
    display: block;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.28;
    text-align: center
}

.p-body-sidebar .rfq-btn:hover {
    border-color: #ff5a5a;
    background: #16171a;
    filter: brightness(1.02)
}

.p-body-sidebar .rfq-btn:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(229,69,69,0.35)
}

@media (max-width: 420px) {
    .p-body-sidebar .rfq-btn {
        padding:9px 10px;
        font-size: 13.5px
    }
}

 

[It-Intel]

Лучше лишний раз не засорять extra.less, можно спокойно вставить css под тег <style> в html документ. Таким образом не будет ничего лишнего задеваться.

color: var(--xf-textColorEmphasized, #fff);

нужно было заменить на обычный цвет, без обращения, т.к. у всех всегда по разному цвета могут быть, это тоже нужно учитывать