LIVE SAMP

Меню быстрого доступа для Arizona RP

Добро пожаловать!

Зарегистрировавшись у нас, вы сможете обсуждать, делиться и отправлять личные сообщения другим участникам нашего сообщества.

Зарегистрироваться!
Jack_Mithel

Jack_Mithel

Активный
Регистрация
3 Янв 2025
Сообщения
1,412
1759408016206.png

CSS: 
<div class="quick-menu-container" data-widget-key="horizontal_social_menu">
    <div class="quick-menu">
        <div class="menu-item">
            <a href="https://t.me/arizona_hype_rp" class="menu-link">
                <i class="fab fa-telegram"></i>
                <span class="text">Telegram</span>
                <span class="menu-badge">Новое</span>
            </a>
        </div>
        <div class="menu-item">
            <a href="https://discord.com/invite/STnK4YjySF" class="menu-link">
                <i class="fab fa-discord"></i>
                <span class="text">Discord</span>
            </a>
        </div>
        <div class="menu-item">
            <a href="https://vk.com/arizonarphype" class="menu-link">
                <i class="fab fa-vk"></i>
                <span class="text">VK</span>
            </a>
        </div>
        <div class="menu-item">
            <a href="https://vk.com/id241326393" class="menu-link">
                <i class="fas fa-crown"></i>
                <span class="text">VK Заместителя</span>
            </a>
        </div>
        <div class="menu-item">
            <a href="https://vk.me/join/gq0DLwS/LK62NDWqu6ca/lVNyBQGb0tcqzc=" class="menu-link">
                <i class="fas fa-comments"></i>
                <span class="text">Беседа VK</span>
            </a>
        </div>
        <div class="menu-item">
            <a href="https://vk.com/mkaplin2016" class="menu-link">
                <i class="fas fa-crown"></i>
                <span class="text">VK Владельца</span>
            </a>
        </div>
    </div>
</div>

1759408058698.png

CSS: 
<div class="block-container" data-widget-key="forum_menu_dostup">
    <div class="block-minorHeader">Меню быстрого доступа</div>
    <div class="block-body block-row">
        <div class="quick-access-container">
            <div class="quick-access">
                <div><a href="https://forum.arizonarphype.ru/forums/Правила-проекта.41/" class="button"><span class="button-text"><span>Правила проекта</span></span></a></div>
                <div><a href="https://forum.arizonarphype.ru/forums/Жалобы-на-администрацию.25/" class="button"><span class="button-text"><span>Жалобы на админов</span></span></a></div>
                <div><a href="https://forum.arizonarphype.ru/forums/Жалобы-на-игроков.31/" class="button"><span class="button-text"><span>Жалобы на игроков</span></span></a></div>
                <div><a href="https://forum.arizonarphype.ru/forums/Жалобы-на-лидеров.30/" class="button"><span class="button-text"><span>Жалобы на лидеров</span></span></a></div>
                <div><a href="https://forum.arizonarphype.ru/forums/rp-Администрация.66/" class="button"><span class="button-text"><span>Раздел для Админов</span></span></a></div>
            </div>
        </div>
    </div>
</div>

После переходим в шаблон extra.less и вставляем туда:

CSS: 
.block-container[data-widget-key="forum_menu_dostup"] {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
    margin-bottom: 10px
}

.block-container[data-widget-key="forum_menu_dostup"] .block-minorHeader {
    background: linear-gradient(135deg, #6a3bb5 0%, #4a2385 100%);
    padding: 10px 15px;
    font-size: 1.1rem;
    font-weight: 600;
    color: #fff;
    text-shadow: 0 0 8px rgba(187,134,252,0.4);
    border-bottom: 1px solid #8a53c6;
    border-radius: 6px 6px 0 0
}

.block-container[data-widget-key="forum_menu_dostup"] .block-body {
    padding: 10px;
    background: rgba(31,43,59,0.3);
    border-radius: 0 0 6px 6px
}

.block-container[data-widget-key="forum_menu_dostup"] .quick-access-container {
    max-height: 250px;
    overflow-y: auto;
    padding-right: 5px;
    scrollbar-width: thin;
    scrollbar-color: #6a3bb5 #2a1a4a
}

.block-container[data-widget-key="forum_menu_dostup"] .quick-access-container::-webkit-scrollbar {
    width: 4px
}

.block-container[data-widget-key="forum_menu_dostup"] .quick-access-container::-webkit-scrollbar-track {
    background: #2a1a4a;
    border-radius: 2px
}

.block-container[data-widget-key="forum_menu_dostup"] .quick-access-container::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #6a3bb5, #8a53c6);
    border-radius: 2px
}

.block-container[data-widget-key="forum_menu_dostup"] .quick-access-container::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #8a53c6, #6a3bb5)
}

.block-container[data-widget-key="forum_menu_dostup"] .quick-access {
    list-style: none;
    padding: 0;
    margin: 0
}

.block-container[data-widget-key="forum_menu_dostup"] .quick-access div {
    margin-bottom: 6px;
    animation: fadeIn .4s ease forwards;
    opacity: 0;
    transform: translateY(8px)
}

.block-container[data-widget-key="forum_menu_dostup"] .button {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid #5a2f9d;
    white-space: nowrap;
    transition: all .2s ease;
    font-size: 12px;
    border-radius: 6px;
    padding: 8px 12px;
    font-weight: 400;
    text-align: center;
    color: #e0d6ff;
    background: #2a1a4a;
    margin: 0;
    position: relative;
    overflow: hidden;
    min-height: 32px
}

.block-container[data-widget-key="forum_menu_dostup"] .button::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(270deg, #4a2385, #6a3bb5, #8a53c6, #6a3bb5, #4a2385);
    background-size: 300% 300%;
    transition: left .3s ease;
    z-index: 0
}

.block-container[data-widget-key="forum_menu_dostup"] .button:hover::before {
    left: 0;
    animation: gradientMove 2.5s ease infinite
}

.block-container[data-widget-key="forum_menu_dostup"] .button:hover {
    box-shadow: 0 2px 8px rgba(106,59,181,0.3);
    border-color: #bb86fc;
    color: #ffffff;
    transform: translateY(-1px)
}

.block-container[data-widget-key="forum_menu_dostup"] .button span {
    position: relative;
    z-index: 1
}

.block-container[data-widget-key="forum_menu_dostup"] .button-text {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%
}

@media (max-width: 768px) {
    .block-container[data-widget-key="forum_menu_dostup"] .block-minorHeader {
        padding:8px 12px;
        font-size: 1rem
    }

    .block-container[data-widget-key="forum_menu_dostup"] .button {
        font-size: 11px;
        padding: 6px 10px;
        min-height: 28px
    }

    .block-container[data-widget-key="forum_menu_dostup"] .quick-access-container {
        max-height: 200px
    }
}

@keyframes gradientMove {
    0% {
        background-position: 0% 50%
    }

    50% {
        background-position: 100% 50%
    }

    100% {
        background-position: 0% 50%
    }
}

@keyframes fadeIn {
    to {
        opacity: 1;
        transform: translateY(0)
    }
}

.quick-menu-container[data-widget-key="horizontal_social_menu"] {
    background: transparent;
    border-radius: 15px;
    padding: 15px 20px;
    max-width: 95%;
    overflow-x: auto;
    margin: 20px 0
}

.quick-menu-container[data-widget-key="horizontal_social_menu"] .quick-menu {
    list-style: none;
    display: flex;
    gap: 15px;
    margin: 0;
    padding: 0;
    justify-content: center;
    flex-wrap: wrap
}

.quick-menu-container[data-widget-key="horizontal_social_menu"] .menu-item {
    position: relative;
    transition: all .3s ease;
    white-space: nowrap;
    animation: slideIn .5s ease forwards
}

.quick-menu-container[data-widget-key="horizontal_social_menu"] .menu-item:nth-child(1) {
    animation-delay: 0.05s
}

.quick-menu-container[data-widget-key="horizontal_social_menu"] .menu-item:nth-child(2) {
    animation-delay: 0.1s
}

.quick-menu-container[data-widget-key="horizontal_social_menu"] .menu-item:nth-child(3) {
    animation-delay: 0.15s
}

.quick-menu-container[data-widget-key="horizontal_social_menu"] .menu-item:nth-child(4) {
    animation-delay: 0.2s
}

.quick-menu-container[data-widget-key="horizontal_social_menu"] .menu-item:nth-child(5) {
    animation-delay: 0.25s
}

.quick-menu-container[data-widget-key="horizontal_social_menu"] .menu-item:nth-child(6) {
    animation-delay: 0.3s
}

.quick-menu-container[data-widget-key="horizontal_social_menu"] .menu-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 15px 18px;
    color: #d8c7ff;
    text-decoration: none;
    font-weight: 500;
    position: relative;
    z-index: 2;
    transition: all .3s ease;
    border-radius: 12px;
    font-size: 14px;
    min-width: 90px;
    background: transparent !important;
    border: 1px solid rgba(106,59,181,0.4);
    backdrop-filter: blur(5px)
}

.quick-menu-container[data-widget-key="horizontal_social_menu"] .menu-link i {
    font-size: 24px;
    margin-bottom: 8px;
    transition: all .3s ease;
    color: #9d7ad6
}

.quick-menu-container[data-widget-key="horizontal_social_menu"] .menu-link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 50%;
    width: 0;
    height: 2px;
    background: #bb86fc;
    transition: all .3s ease;
    transform: translateX(-50%)
}

.quick-menu-container[data-widget-key="horizontal_social_menu"] .menu-item:hover .menu-link {
    background: transparent !important;
    color: #ffffff;
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(106,59,181,0.4);
    border-color: #bb86fc
}

.quick-menu-container[data-widget-key="horizontal_social_menu"] .menu-item:hover .menu-link i {
    transform: scale(1.3);
    color: #ffffff;
    text-shadow: 0 0 15px rgba(255,255,255,0.8)
}

.quick-menu-container[data-widget-key="horizontal_social_menu"] .menu-item:hover .menu-link::after {
    width: 70%
}

.quick-menu-container[data-widget-key="horizontal_social_menu"] .menu-item:hover .menu-badge {
    transform: scale(1.1) translateY(-2px);
    box-shadow: 0 5px 12px rgba(106,59,181,0.5)
}

.quick-menu-container[data-widget-key="horizontal_social_menu"] .menu-badge {
    position: absolute;
    top: 5px;
    right: 5px;
    background: linear-gradient(135deg, #6a3bb5 0%, #8a53c6 100%);
    color: #fff;
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 10px;
    font-weight: bold;
    min-width: 45px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .3s ease;
    z-index: 3;
    box-shadow: 0 3px 8px rgba(106,59,181,0.4);
    border: 1px solid rgba(255,255,255,0.2);
    white-space: nowrap
}

@media (max-width: 900px) {
    .quick-menu-container[data-widget-key="horizontal_social_menu"] .quick-menu {
        gap:10px
    }

    .quick-menu-container[data-widget-key="horizontal_social_menu"] .menu-link {
        padding: 12px 15px;
        font-size: 13px;
        min-width: 80px
    }

    .quick-menu-container[data-widget-key="horizontal_social_menu"] .menu-link i {
        font-size: 22px;
        margin-bottom: 6px
    }

    .quick-menu-container[data-widget-key="horizontal_social_menu"] .menu-badge {
        font-size: 9px;
        min-width: 40px;
        height: 16px;
        padding: 2px 6px
    }
}

@media (max-width: 768px) {
    .quick-menu-container[data-widget-key="horizontal_social_menu"] .quick-menu {
        gap:8px
    }

    .quick-menu-container[data-widget-key="horizontal_social_menu"] .menu-link {
        padding: 10px 12px;
        font-size: 12px;
        min-width: 70px
    }

    .quick-menu-container[data-widget-key="horizontal_social_menu"] .menu-link i {
        font-size: 20px;
        margin-bottom: 5px
    }

    .quick-menu-container[data-widget-key="horizontal_social_menu"] .menu-badge {
        top: 4px;
        right: 4px;
        font-size: 8px;
        min-width: 35px;
        height: 15px;
        padding: 2px 5px
    }
}

@media (max-width: 600px) {
    .quick-menu-container[data-widget-key="horizontal_social_menu"] .quick-menu {
        gap:5px
    }

    .quick-menu-container[data-widget-key="horizontal_social_menu"] .menu-link {
        padding: 8px 10px;
        min-width: 60px
    }

    .quick-menu-container[data-widget-key="horizontal_social_menu"] .menu-link .text {
        font-size: 11px
    }

    .quick-menu-container[data-widget-key="horizontal_social_menu"] .menu-link i {
        font-size: 18px;
        margin-bottom: 4px
    }

    .quick-menu-container[data-widget-key="horizontal_social_menu"] .menu-badge {
        display: none
    }
}

@media (max-width: 480px) {
    .quick-menu-container[data-widget-key="horizontal_social_menu"] .menu-link {
        padding:8px;
        min-width: 50px
    }

    .quick-menu-container[data-widget-key="horizontal_social_menu"] .menu-link .text {
        display: none
    }

    .quick-menu-container[data-widget-key="horizontal_social_menu"] .menu-link i {
        margin-bottom: 0;
        font-size: 20px
    }
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-15px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}
 
Санек

Санек

Пользователь
Регистрация
17 Ноя 2024
Сообщения
86
годный ресурс советую
 
Kasper

Kasper

Активный из XenForo
Активный
Регистрация
20 Мар 2025
Сообщения
717
Jack_Mithel написал(а):
Посмотреть вложение 13356

CSS: 
<div class="quick-menu-container" data-widget-key="horizontal_social_menu">
    <div class="quick-menu">
        <div class="menu-item">
            <a href="https://t.me/arizona_hype_rp" class="menu-link">
                <i class="fab fa-telegram"></i>
                <span class="text">Telegram</span>
                <span class="menu-badge">Новое</span>
            </a>
        </div>
        <div class="menu-item">
            <a href="https://discord.com/invite/STnK4YjySF" class="menu-link">
                <i class="fab fa-discord"></i>
                <span class="text">Discord</span>
            </a>
        </div>
        <div class="menu-item">
            <a href="https://vk.com/arizonarphype" class="menu-link">
                <i class="fab fa-vk"></i>
                <span class="text">VK</span>
            </a>
        </div>
        <div class="menu-item">
            <a href="https://vk.com/id241326393" class="menu-link">
                <i class="fas fa-crown"></i>
                <span class="text">VK Заместителя</span>
            </a>
        </div>
        <div class="menu-item">
            <a href="https://vk.me/join/gq0DLwS/LK62NDWqu6ca/lVNyBQGb0tcqzc=" class="menu-link">
                <i class="fas fa-comments"></i>
                <span class="text">Беседа VK</span>
            </a>
        </div>
        <div class="menu-item">
            <a href="https://vk.com/mkaplin2016" class="menu-link">
                <i class="fas fa-crown"></i>
                <span class="text">VK Владельца</span>
            </a>
        </div>
    </div>
</div>

Посмотреть вложение 13357

CSS: 
<div class="block-container" data-widget-key="forum_menu_dostup">
    <div class="block-minorHeader">Меню быстрого доступа</div>
    <div class="block-body block-row">
        <div class="quick-access-container">
            <div class="quick-access">
                <div><a href="https://forum.arizonarphype.ru/forums/Правила-проекта.41/" class="button"><span class="button-text"><span>Правила проекта</span></span></a></div>
                <div><a href="https://forum.arizonarphype.ru/forums/Жалобы-на-администрацию.25/" class="button"><span class="button-text"><span>Жалобы на админов</span></span></a></div>
                <div><a href="https://forum.arizonarphype.ru/forums/Жалобы-на-игроков.31/" class="button"><span class="button-text"><span>Жалобы на игроков</span></span></a></div>
                <div><a href="https://forum.arizonarphype.ru/forums/Жалобы-на-лидеров.30/" class="button"><span class="button-text"><span>Жалобы на лидеров</span></span></a></div>
                <div><a href="https://forum.arizonarphype.ru/forums/rp-Администрация.66/" class="button"><span class="button-text"><span>Раздел для Админов</span></span></a></div>
            </div>
        </div>
    </div>
</div>

После переходим в шаблон extra.less и вставляем туда:

CSS: 
.block-container[data-widget-key="forum_menu_dostup"] {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
    margin-bottom: 10px
}

.block-container[data-widget-key="forum_menu_dostup"] .block-minorHeader {
    background: linear-gradient(135deg, #6a3bb5 0%, #4a2385 100%);
    padding: 10px 15px;
    font-size: 1.1rem;
    font-weight: 600;
    color: #fff;
    text-shadow: 0 0 8px rgba(187,134,252,0.4);
    border-bottom: 1px solid #8a53c6;
    border-radius: 6px 6px 0 0
}

.block-container[data-widget-key="forum_menu_dostup"] .block-body {
    padding: 10px;
    background: rgba(31,43,59,0.3);
    border-radius: 0 0 6px 6px
}

.block-container[data-widget-key="forum_menu_dostup"] .quick-access-container {
    max-height: 250px;
    overflow-y: auto;
    padding-right: 5px;
    scrollbar-width: thin;
    scrollbar-color: #6a3bb5 #2a1a4a
}

.block-container[data-widget-key="forum_menu_dostup"] .quick-access-container::-webkit-scrollbar {
    width: 4px
}

.block-container[data-widget-key="forum_menu_dostup"] .quick-access-container::-webkit-scrollbar-track {
    background: #2a1a4a;
    border-radius: 2px
}

.block-container[data-widget-key="forum_menu_dostup"] .quick-access-container::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #6a3bb5, #8a53c6);
    border-radius: 2px
}

.block-container[data-widget-key="forum_menu_dostup"] .quick-access-container::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #8a53c6, #6a3bb5)
}

.block-container[data-widget-key="forum_menu_dostup"] .quick-access {
    list-style: none;
    padding: 0;
    margin: 0
}

.block-container[data-widget-key="forum_menu_dostup"] .quick-access div {
    margin-bottom: 6px;
    animation: fadeIn .4s ease forwards;
    opacity: 0;
    transform: translateY(8px)
}

.block-container[data-widget-key="forum_menu_dostup"] .button {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid #5a2f9d;
    white-space: nowrap;
    transition: all .2s ease;
    font-size: 12px;
    border-radius: 6px;
    padding: 8px 12px;
    font-weight: 400;
    text-align: center;
    color: #e0d6ff;
    background: #2a1a4a;
    margin: 0;
    position: relative;
    overflow: hidden;
    min-height: 32px
}

.block-container[data-widget-key="forum_menu_dostup"] .button::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(270deg, #4a2385, #6a3bb5, #8a53c6, #6a3bb5, #4a2385);
    background-size: 300% 300%;
    transition: left .3s ease;
    z-index: 0
}

.block-container[data-widget-key="forum_menu_dostup"] .button:hover::before {
    left: 0;
    animation: gradientMove 2.5s ease infinite
}

.block-container[data-widget-key="forum_menu_dostup"] .button:hover {
    box-shadow: 0 2px 8px rgba(106,59,181,0.3);
    border-color: #bb86fc;
    color: #ffffff;
    transform: translateY(-1px)
}

.block-container[data-widget-key="forum_menu_dostup"] .button span {
    position: relative;
    z-index: 1
}

.block-container[data-widget-key="forum_menu_dostup"] .button-text {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%
}

@media (max-width: 768px) {
    .block-container[data-widget-key="forum_menu_dostup"] .block-minorHeader {
        padding:8px 12px;
        font-size: 1rem
    }

    .block-container[data-widget-key="forum_menu_dostup"] .button {
        font-size: 11px;
        padding: 6px 10px;
        min-height: 28px
    }

    .block-container[data-widget-key="forum_menu_dostup"] .quick-access-container {
        max-height: 200px
    }
}

@keyframes gradientMove {
    0% {
        background-position: 0% 50%
    }

    50% {
        background-position: 100% 50%
    }

    100% {
        background-position: 0% 50%
    }
}

@keyframes fadeIn {
    to {
        opacity: 1;
        transform: translateY(0)
    }
}

.quick-menu-container[data-widget-key="horizontal_social_menu"] {
    background: transparent;
    border-radius: 15px;
    padding: 15px 20px;
    max-width: 95%;
    overflow-x: auto;
    margin: 20px 0
}

.quick-menu-container[data-widget-key="horizontal_social_menu"] .quick-menu {
    list-style: none;
    display: flex;
    gap: 15px;
    margin: 0;
    padding: 0;
    justify-content: center;
    flex-wrap: wrap
}

.quick-menu-container[data-widget-key="horizontal_social_menu"] .menu-item {
    position: relative;
    transition: all .3s ease;
    white-space: nowrap;
    animation: slideIn .5s ease forwards
}

.quick-menu-container[data-widget-key="horizontal_social_menu"] .menu-item:nth-child(1) {
    animation-delay: 0.05s
}

.quick-menu-container[data-widget-key="horizontal_social_menu"] .menu-item:nth-child(2) {
    animation-delay: 0.1s
}

.quick-menu-container[data-widget-key="horizontal_social_menu"] .menu-item:nth-child(3) {
    animation-delay: 0.15s
}

.quick-menu-container[data-widget-key="horizontal_social_menu"] .menu-item:nth-child(4) {
    animation-delay: 0.2s
}

.quick-menu-container[data-widget-key="horizontal_social_menu"] .menu-item:nth-child(5) {
    animation-delay: 0.25s
}

.quick-menu-container[data-widget-key="horizontal_social_menu"] .menu-item:nth-child(6) {
    animation-delay: 0.3s
}

.quick-menu-container[data-widget-key="horizontal_social_menu"] .menu-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 15px 18px;
    color: #d8c7ff;
    text-decoration: none;
    font-weight: 500;
    position: relative;
    z-index: 2;
    transition: all .3s ease;
    border-radius: 12px;
    font-size: 14px;
    min-width: 90px;
    background: transparent !important;
    border: 1px solid rgba(106,59,181,0.4);
    backdrop-filter: blur(5px)
}

.quick-menu-container[data-widget-key="horizontal_social_menu"] .menu-link i {
    font-size: 24px;
    margin-bottom: 8px;
    transition: all .3s ease;
    color: #9d7ad6
}

.quick-menu-container[data-widget-key="horizontal_social_menu"] .menu-link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 50%;
    width: 0;
    height: 2px;
    background: #bb86fc;
    transition: all .3s ease;
    transform: translateX(-50%)
}

.quick-menu-container[data-widget-key="horizontal_social_menu"] .menu-item:hover .menu-link {
    background: transparent !important;
    color: #ffffff;
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(106,59,181,0.4);
    border-color: #bb86fc
}

.quick-menu-container[data-widget-key="horizontal_social_menu"] .menu-item:hover .menu-link i {
    transform: scale(1.3);
    color: #ffffff;
    text-shadow: 0 0 15px rgba(255,255,255,0.8)
}

.quick-menu-container[data-widget-key="horizontal_social_menu"] .menu-item:hover .menu-link::after {
    width: 70%
}

.quick-menu-container[data-widget-key="horizontal_social_menu"] .menu-item:hover .menu-badge {
    transform: scale(1.1) translateY(-2px);
    box-shadow: 0 5px 12px rgba(106,59,181,0.5)
}

.quick-menu-container[data-widget-key="horizontal_social_menu"] .menu-badge {
    position: absolute;
    top: 5px;
    right: 5px;
    background: linear-gradient(135deg, #6a3bb5 0%, #8a53c6 100%);
    color: #fff;
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 10px;
    font-weight: bold;
    min-width: 45px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .3s ease;
    z-index: 3;
    box-shadow: 0 3px 8px rgba(106,59,181,0.4);
    border: 1px solid rgba(255,255,255,0.2);
    white-space: nowrap
}

@media (max-width: 900px) {
    .quick-menu-container[data-widget-key="horizontal_social_menu"] .quick-menu {
        gap:10px
    }

    .quick-menu-container[data-widget-key="horizontal_social_menu"] .menu-link {
        padding: 12px 15px;
        font-size: 13px;
        min-width: 80px
    }

    .quick-menu-container[data-widget-key="horizontal_social_menu"] .menu-link i {
        font-size: 22px;
        margin-bottom: 6px
    }

    .quick-menu-container[data-widget-key="horizontal_social_menu"] .menu-badge {
        font-size: 9px;
        min-width: 40px;
        height: 16px;
        padding: 2px 6px
    }
}

@media (max-width: 768px) {
    .quick-menu-container[data-widget-key="horizontal_social_menu"] .quick-menu {
        gap:8px
    }

    .quick-menu-container[data-widget-key="horizontal_social_menu"] .menu-link {
        padding: 10px 12px;
        font-size: 12px;
        min-width: 70px
    }

    .quick-menu-container[data-widget-key="horizontal_social_menu"] .menu-link i {
        font-size: 20px;
        margin-bottom: 5px
    }

    .quick-menu-container[data-widget-key="horizontal_social_menu"] .menu-badge {
        top: 4px;
        right: 4px;
        font-size: 8px;
        min-width: 35px;
        height: 15px;
        padding: 2px 5px
    }
}

@media (max-width: 600px) {
    .quick-menu-container[data-widget-key="horizontal_social_menu"] .quick-menu {
        gap:5px
    }

    .quick-menu-container[data-widget-key="horizontal_social_menu"] .menu-link {
        padding: 8px 10px;
        min-width: 60px
    }

    .quick-menu-container[data-widget-key="horizontal_social_menu"] .menu-link .text {
        font-size: 11px
    }

    .quick-menu-container[data-widget-key="horizontal_social_menu"] .menu-link i {
        font-size: 18px;
        margin-bottom: 4px
    }

    .quick-menu-container[data-widget-key="horizontal_social_menu"] .menu-badge {
        display: none
    }
}

@media (max-width: 480px) {
    .quick-menu-container[data-widget-key="horizontal_social_menu"] .menu-link {
        padding:8px;
        min-width: 50px
    }

    .quick-menu-container[data-widget-key="horizontal_social_menu"] .menu-link .text {
        display: none
    }

    .quick-menu-container[data-widget-key="horizontal_social_menu"] .menu-link i {
        margin-bottom: 0;
        font-size: 20px
    }
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-15px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}
Нажмите для раскрытия...
Имба
 
friskovikov_

friskovikov_

Заблокированный
Регистрация
1 Сен 2022
Сообщения
207
Обратите внимание, пользователь заблокирован на форуме. Не рекомендуется проводить сделки. Мы не несем ответственности за действия пользователя вне форума.
Jack_Mithel написал(а):
Посмотреть вложение 13356

CSS: 
<div class="quick-menu-container" data-widget-key="horizontal_social_menu">
    <div class="quick-menu">
        <div class="menu-item">
            <a href="https://t.me/arizona_hype_rp" class="menu-link">
                <i class="fab fa-telegram"></i>
                <span class="text">Telegram</span>
                <span class="menu-badge">Новое</span>
            </a>
        </div>
        <div class="menu-item">
            <a href="https://discord.com/invite/STnK4YjySF" class="menu-link">
                <i class="fab fa-discord"></i>
                <span class="text">Discord</span>
            </a>
        </div>
        <div class="menu-item">
            <a href="https://vk.com/arizonarphype" class="menu-link">
                <i class="fab fa-vk"></i>
                <span class="text">VK</span>
            </a>
        </div>
        <div class="menu-item">
            <a href="https://vk.com/id241326393" class="menu-link">
                <i class="fas fa-crown"></i>
                <span class="text">VK Заместителя</span>
            </a>
        </div>
        <div class="menu-item">
            <a href="https://vk.me/join/gq0DLwS/LK62NDWqu6ca/lVNyBQGb0tcqzc=" class="menu-link">
                <i class="fas fa-comments"></i>
                <span class="text">Беседа VK</span>
            </a>
        </div>
        <div class="menu-item">
            <a href="https://vk.com/mkaplin2016" class="menu-link">
                <i class="fas fa-crown"></i>
                <span class="text">VK Владельца</span>
            </a>
        </div>
    </div>
</div>

Посмотреть вложение 13357

CSS: 
<div class="block-container" data-widget-key="forum_menu_dostup">
    <div class="block-minorHeader">Меню быстрого доступа</div>
    <div class="block-body block-row">
        <div class="quick-access-container">
            <div class="quick-access">
                <div><a href="https://forum.arizonarphype.ru/forums/Правила-проекта.41/" class="button"><span class="button-text"><span>Правила проекта</span></span></a></div>
                <div><a href="https://forum.arizonarphype.ru/forums/Жалобы-на-администрацию.25/" class="button"><span class="button-text"><span>Жалобы на админов</span></span></a></div>
                <div><a href="https://forum.arizonarphype.ru/forums/Жалобы-на-игроков.31/" class="button"><span class="button-text"><span>Жалобы на игроков</span></span></a></div>
                <div><a href="https://forum.arizonarphype.ru/forums/Жалобы-на-лидеров.30/" class="button"><span class="button-text"><span>Жалобы на лидеров</span></span></a></div>
                <div><a href="https://forum.arizonarphype.ru/forums/rp-Администрация.66/" class="button"><span class="button-text"><span>Раздел для Админов</span></span></a></div>
            </div>
        </div>
    </div>
</div>

После переходим в шаблон extra.less и вставляем туда:

CSS: 
.block-container[data-widget-key="forum_menu_dostup"] {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
    margin-bottom: 10px
}

.block-container[data-widget-key="forum_menu_dostup"] .block-minorHeader {
    background: linear-gradient(135deg, #6a3bb5 0%, #4a2385 100%);
    padding: 10px 15px;
    font-size: 1.1rem;
    font-weight: 600;
    color: #fff;
    text-shadow: 0 0 8px rgba(187,134,252,0.4);
    border-bottom: 1px solid #8a53c6;
    border-radius: 6px 6px 0 0
}

.block-container[data-widget-key="forum_menu_dostup"] .block-body {
    padding: 10px;
    background: rgba(31,43,59,0.3);
    border-radius: 0 0 6px 6px
}

.block-container[data-widget-key="forum_menu_dostup"] .quick-access-container {
    max-height: 250px;
    overflow-y: auto;
    padding-right: 5px;
    scrollbar-width: thin;
    scrollbar-color: #6a3bb5 #2a1a4a
}

.block-container[data-widget-key="forum_menu_dostup"] .quick-access-container::-webkit-scrollbar {
    width: 4px
}

.block-container[data-widget-key="forum_menu_dostup"] .quick-access-container::-webkit-scrollbar-track {
    background: #2a1a4a;
    border-radius: 2px
}

.block-container[data-widget-key="forum_menu_dostup"] .quick-access-container::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #6a3bb5, #8a53c6);
    border-radius: 2px
}

.block-container[data-widget-key="forum_menu_dostup"] .quick-access-container::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #8a53c6, #6a3bb5)
}

.block-container[data-widget-key="forum_menu_dostup"] .quick-access {
    list-style: none;
    padding: 0;
    margin: 0
}

.block-container[data-widget-key="forum_menu_dostup"] .quick-access div {
    margin-bottom: 6px;
    animation: fadeIn .4s ease forwards;
    opacity: 0;
    transform: translateY(8px)
}

.block-container[data-widget-key="forum_menu_dostup"] .button {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid #5a2f9d;
    white-space: nowrap;
    transition: all .2s ease;
    font-size: 12px;
    border-radius: 6px;
    padding: 8px 12px;
    font-weight: 400;
    text-align: center;
    color: #e0d6ff;
    background: #2a1a4a;
    margin: 0;
    position: relative;
    overflow: hidden;
    min-height: 32px
}

.block-container[data-widget-key="forum_menu_dostup"] .button::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(270deg, #4a2385, #6a3bb5, #8a53c6, #6a3bb5, #4a2385);
    background-size: 300% 300%;
    transition: left .3s ease;
    z-index: 0
}

.block-container[data-widget-key="forum_menu_dostup"] .button:hover::before {
    left: 0;
    animation: gradientMove 2.5s ease infinite
}

.block-container[data-widget-key="forum_menu_dostup"] .button:hover {
    box-shadow: 0 2px 8px rgba(106,59,181,0.3);
    border-color: #bb86fc;
    color: #ffffff;
    transform: translateY(-1px)
}

.block-container[data-widget-key="forum_menu_dostup"] .button span {
    position: relative;
    z-index: 1
}

.block-container[data-widget-key="forum_menu_dostup"] .button-text {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%
}

@media (max-width: 768px) {
    .block-container[data-widget-key="forum_menu_dostup"] .block-minorHeader {
        padding:8px 12px;
        font-size: 1rem
    }

    .block-container[data-widget-key="forum_menu_dostup"] .button {
        font-size: 11px;
        padding: 6px 10px;
        min-height: 28px
    }

    .block-container[data-widget-key="forum_menu_dostup"] .quick-access-container {
        max-height: 200px
    }
}

@keyframes gradientMove {
    0% {
        background-position: 0% 50%
    }

    50% {
        background-position: 100% 50%
    }

    100% {
        background-position: 0% 50%
    }
}

@keyframes fadeIn {
    to {
        opacity: 1;
        transform: translateY(0)
    }
}

.quick-menu-container[data-widget-key="horizontal_social_menu"] {
    background: transparent;
    border-radius: 15px;
    padding: 15px 20px;
    max-width: 95%;
    overflow-x: auto;
    margin: 20px 0
}

.quick-menu-container[data-widget-key="horizontal_social_menu"] .quick-menu {
    list-style: none;
    display: flex;
    gap: 15px;
    margin: 0;
    padding: 0;
    justify-content: center;
    flex-wrap: wrap
}

.quick-menu-container[data-widget-key="horizontal_social_menu"] .menu-item {
    position: relative;
    transition: all .3s ease;
    white-space: nowrap;
    animation: slideIn .5s ease forwards
}

.quick-menu-container[data-widget-key="horizontal_social_menu"] .menu-item:nth-child(1) {
    animation-delay: 0.05s
}

.quick-menu-container[data-widget-key="horizontal_social_menu"] .menu-item:nth-child(2) {
    animation-delay: 0.1s
}

.quick-menu-container[data-widget-key="horizontal_social_menu"] .menu-item:nth-child(3) {
    animation-delay: 0.15s
}

.quick-menu-container[data-widget-key="horizontal_social_menu"] .menu-item:nth-child(4) {
    animation-delay: 0.2s
}

.quick-menu-container[data-widget-key="horizontal_social_menu"] .menu-item:nth-child(5) {
    animation-delay: 0.25s
}

.quick-menu-container[data-widget-key="horizontal_social_menu"] .menu-item:nth-child(6) {
    animation-delay: 0.3s
}

.quick-menu-container[data-widget-key="horizontal_social_menu"] .menu-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 15px 18px;
    color: #d8c7ff;
    text-decoration: none;
    font-weight: 500;
    position: relative;
    z-index: 2;
    transition: all .3s ease;
    border-radius: 12px;
    font-size: 14px;
    min-width: 90px;
    background: transparent !important;
    border: 1px solid rgba(106,59,181,0.4);
    backdrop-filter: blur(5px)
}

.quick-menu-container[data-widget-key="horizontal_social_menu"] .menu-link i {
    font-size: 24px;
    margin-bottom: 8px;
    transition: all .3s ease;
    color: #9d7ad6
}

.quick-menu-container[data-widget-key="horizontal_social_menu"] .menu-link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 50%;
    width: 0;
    height: 2px;
    background: #bb86fc;
    transition: all .3s ease;
    transform: translateX(-50%)
}

.quick-menu-container[data-widget-key="horizontal_social_menu"] .menu-item:hover .menu-link {
    background: transparent !important;
    color: #ffffff;
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(106,59,181,0.4);
    border-color: #bb86fc
}

.quick-menu-container[data-widget-key="horizontal_social_menu"] .menu-item:hover .menu-link i {
    transform: scale(1.3);
    color: #ffffff;
    text-shadow: 0 0 15px rgba(255,255,255,0.8)
}

.quick-menu-container[data-widget-key="horizontal_social_menu"] .menu-item:hover .menu-link::after {
    width: 70%
}

.quick-menu-container[data-widget-key="horizontal_social_menu"] .menu-item:hover .menu-badge {
    transform: scale(1.1) translateY(-2px);
    box-shadow: 0 5px 12px rgba(106,59,181,0.5)
}

.quick-menu-container[data-widget-key="horizontal_social_menu"] .menu-badge {
    position: absolute;
    top: 5px;
    right: 5px;
    background: linear-gradient(135deg, #6a3bb5 0%, #8a53c6 100%);
    color: #fff;
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 10px;
    font-weight: bold;
    min-width: 45px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .3s ease;
    z-index: 3;
    box-shadow: 0 3px 8px rgba(106,59,181,0.4);
    border: 1px solid rgba(255,255,255,0.2);
    white-space: nowrap
}

@media (max-width: 900px) {
    .quick-menu-container[data-widget-key="horizontal_social_menu"] .quick-menu {
        gap:10px
    }

    .quick-menu-container[data-widget-key="horizontal_social_menu"] .menu-link {
        padding: 12px 15px;
        font-size: 13px;
        min-width: 80px
    }

    .quick-menu-container[data-widget-key="horizontal_social_menu"] .menu-link i {
        font-size: 22px;
        margin-bottom: 6px
    }

    .quick-menu-container[data-widget-key="horizontal_social_menu"] .menu-badge {
        font-size: 9px;
        min-width: 40px;
        height: 16px;
        padding: 2px 6px
    }
}

@media (max-width: 768px) {
    .quick-menu-container[data-widget-key="horizontal_social_menu"] .quick-menu {
        gap:8px
    }

    .quick-menu-container[data-widget-key="horizontal_social_menu"] .menu-link {
        padding: 10px 12px;
        font-size: 12px;
        min-width: 70px
    }

    .quick-menu-container[data-widget-key="horizontal_social_menu"] .menu-link i {
        font-size: 20px;
        margin-bottom: 5px
    }

    .quick-menu-container[data-widget-key="horizontal_social_menu"] .menu-badge {
        top: 4px;
        right: 4px;
        font-size: 8px;
        min-width: 35px;
        height: 15px;
        padding: 2px 5px
    }
}

@media (max-width: 600px) {
    .quick-menu-container[data-widget-key="horizontal_social_menu"] .quick-menu {
        gap:5px
    }

    .quick-menu-container[data-widget-key="horizontal_social_menu"] .menu-link {
        padding: 8px 10px;
        min-width: 60px
    }

    .quick-menu-container[data-widget-key="horizontal_social_menu"] .menu-link .text {
        font-size: 11px
    }

    .quick-menu-container[data-widget-key="horizontal_social_menu"] .menu-link i {
        font-size: 18px;
        margin-bottom: 4px
    }

    .quick-menu-container[data-widget-key="horizontal_social_menu"] .menu-badge {
        display: none
    }
}

@media (max-width: 480px) {
    .quick-menu-container[data-widget-key="horizontal_social_menu"] .menu-link {
        padding:8px;
        min-width: 50px
    }

    .quick-menu-container[data-widget-key="horizontal_social_menu"] .menu-link .text {
        display: none
    }

    .quick-menu-container[data-widget-key="horizontal_social_menu"] .menu-link i {
        margin-bottom: 0;
        font-size: 20px
    }
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-15px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}
Нажмите для раскрытия...
OFFTOP

не красиво, что делать?

 
friskovikov_

friskovikov_

Заблокированный
Регистрация
1 Сен 2022
Сообщения
207
Обратите внимание, пользователь заблокирован на форуме. Не рекомендуется проводить сделки. Мы не несем ответственности за действия пользователя вне форума.
Jack_Mithel написал(а):
OFFTOP

Снимать штаны и бегать. А так не ставить на свой форум это

Нажмите для раскрытия...
OFFTOP

тудааа

 
narushago

narushago

Пользователь
Регистрация
30 Авг 2025
Сообщения
118
можно ли изменить фиолетовый цвет на синий обычный который стоит на форуме примерно такой цвет , где его можно изменить?
 
It-Intel

It-Intel

Активный
Регистрация
17 Июн 2025
Сообщения
1,650
narushago написал(а):
можно ли изменить фиолетовый цвет на синий обычный который стоит на форуме примерно такой цвет , где его можно изменить?
Нажмите для раскрытия...
Можно конечно, какой виджет тебе надо изменить
 
It-Intel

It-Intel

Активный
Регистрация
17 Июн 2025
Сообщения
1,650
@narushago,
extra.less: 
.block-container[data-widget-key="forum_menu_dostup"] {
border: none !important;
outline: none !important;
box-shadow: none !important;
background: transparent !important;
margin-bottom: 10px
}
.block-container[data-widget-key="forum_menu_dostup"] .block-minorHeader {
background: linear-gradient(135deg, #1f2b3b 0%, #0f1419 100%);
padding: 10px 15px;
font-size: 1.1rem;
font-weight: 600;
color: #fff;
text-shadow: 0 0 8px rgba(189,195,199,0.4);
border-bottom: 1px solid #2c3e50;
border-radius: 6px 6px 0 0
}
.block-container[data-widget-key="forum_menu_dostup"] .block-body {
padding: 10px;
background: rgba(31,43,59,0.3);
border-radius: 0 0 6px 6px
}
.block-container[data-widget-key="forum_menu_dostup"] .quick-access-container {
max-height: 250px;
overflow-y: auto;
padding-right: 5px;
scrollbar-width: thin;
scrollbar-color: #1f2b3b #0f1419
}
.block-container[data-widget-key="forum_menu_dostup"] .quick-access-container::-webkit-scrollbar {
width: 4px
}
.block-container[data-widget-key="forum_menu_dostup"] .quick-access-container::-webkit-scrollbar-track {
background: #0f1419;
border-radius: 2px
}
.block-container[data-widget-key="forum_menu_dostup"] .quick-access-container::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, #1f2b3b, #2c3e50);
border-radius: 2px
}
.block-container[data-widget-key="forum_menu_dostup"] .quick-access-container::-webkit-scrollbar-thumb:hover {
background: linear-gradient(180deg, #2c3e50, #1f2b3b)
}
.block-container[data-widget-key="forum_menu_dostup"] .quick-access {
list-style: none;
padding: 0;
margin: 0
}
.block-container[data-widget-key="forum_menu_dostup"] .quick-access div {
margin-bottom: 6px;
animation: fadeIn .4s ease forwards;
opacity: 0;
transform: translateY(8px)
}
.block-container[data-widget-key="forum_menu_dostup"] .button {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
cursor: pointer;
border: 1px solid #1a202c;
white-space: nowrap;
transition: all .2s ease;
font-size: 12px;
border-radius: 6px;
padding: 8px 12px;
font-weight: 400;
text-align: center;
color: #ecf0f1;
background: #0f1419;
margin: 0;
position: relative;
overflow: hidden;
min-height: 32px
}
.block-container[data-widget-key="forum_menu_dostup"] .button::before {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(270deg, #0f1419, #1f2b3b, #2c3e50, #1f2b3b, #0f1419);
background-size: 300% 300%;
transition: left .3s ease;
z-index: 0
}
.block-container[data-widget-key="forum_menu_dostup"] .button:hover::before {
left: 0;
animation: gradientMove 2.5s ease infinite
}
.block-container[data-widget-key="forum_menu_dostup"] .button:hover {
box-shadow: 0 2px 8px rgba(31,43,59,0.3);
border-color: #5d6d7e;
color: #ffffff;
transform: translateY(-1px)
}
.block-container[data-widget-key="forum_menu_dostup"] .button span {
position: relative;
z-index: 1
}
.block-container[data-widget-key="forum_menu_dostup"] .button-text {
display: flex;
align-items: center;
justify-content: center;
width: 100%
}
@media (max-width: 768px) {
.block-container[data-widget-key="forum_menu_dostup"] .block-minorHeader {
padding:8px 12px;
font-size: 1rem
}
.block-container[data-widget-key="forum_menu_dostup"] .button {
font-size: 11px;
padding: 6px 10px;
min-height: 28px
}
.block-container[data-widget-key="forum_menu_dostup"] .quick-access-container {
max-height: 200px
}
}
@keyframes gradientMove {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}
@keyframes fadeIn {
to {
opacity: 1;
transform: translateY(0)
}
}
.quick-menu-container[data-widget-key="horizontal_social_menu"] {
background: transparent;
border-radius: 15px;
padding: 15px 20px;
max-width: 95%;
overflow-x: auto;
margin: 20px 0
}
.quick-menu-container[data-widget-key="horizontal_social_menu"] .quick-menu {
list-style: none;
display: flex;
gap: 15px;
margin: 0;
padding: 0;
justify-content: center;
flex-wrap: wrap
}
.quick-menu-container[data-widget-key="horizontal_social_menu"] .menu-item {
position: relative;
transition: all .3s ease;
white-space: nowrap;
animation: slideIn .5s ease forwards
}
.quick-menu-container[data-widget-key="horizontal_social_menu"] .menu-item:nth-child(1) {
animation-delay: 0.05s
}
.quick-menu-container[data-widget-key="horizontal_social_menu"] .menu-item:nth-child(2) {
animation-delay: 0.1s
}
.quick-menu-container[data-widget-key="horizontal_social_menu"] .menu-item:nth-child(3) {
animation-delay: 0.15s
}
.quick-menu-container[data-widget-key="horizontal_social_menu"] .menu-item:nth-child(4) {
animation-delay: 0.2s
}
.quick-menu-container[data-widget-key="horizontal_social_menu"] .menu-item:nth-child(5) {
animation-delay: 0.25s
}
.quick-menu-container[data-widget-key="horizontal_social_menu"] .menu-item:nth-child(6) {
animation-delay: 0.3s
}
.quick-menu-container[data-widget-key="horizontal_social_menu"] .menu-link {
display: flex;
flex-direction: column;
align-items: center;
padding: 15px 18px;
color: #ecf0f1;
text-decoration: none;
font-weight: 500;
position: relative;
z-index: 2;
transition: all .3s ease;
border-radius: 12px;
font-size: 14px;
min-width: 90px;
background: transparent !important;
border: 1px solid rgba(31,43,59,0.4);
backdrop-filter: blur(5px)
}
.quick-menu-container[data-widget-key="horizontal_social_menu"] .menu-link i {
font-size: 24px;
margin-bottom: 8px;
transition: all .3s ease;
color: #34495e
}
.quick-menu-container[data-widget-key="horizontal_social_menu"] .menu-link::after {
content: '';
position: absolute;
bottom: -2px;
left: 50%;
width: 0;
height: 2px;
background: #5d6d7e;
transition: all .3s ease;
transform: translateX(-50%)
}
.quick-menu-container[data-widget-key="horizontal_social_menu"] .menu-item:hover .menu-link {
background: transparent !important;
color: #ffffff;
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(31,43,59,0.4);
border-color: #5d6d7e
}
.quick-menu-container[data-widget-key="horizontal_social_menu"] .menu-item:hover .menu-link i {
transform: scale(1.3);
color: #ffffff;
text-shadow: 0 0 15px rgba(255,255,255,0.8)
}
.quick-menu-container[data-widget-key="horizontal_social_menu"] .menu-item:hover .menu-link::after {
width: 70%
}
.quick-menu-container[data-widget-key="horizontal_social_menu"] .menu-item:hover .menu-badge {
transform: scale(1.1) translateY(-2px);
box-shadow: 0 5px 12px rgba(31,43,59,0.5)
}
.quick-menu-container[data-widget-key="horizontal_social_menu"] .menu-badge {
position: absolute;
top: 5px;
right: 5px;
background: linear-gradient(135deg, #1f2b3b 0%, #2c3e50 100%);
color: #fff;
padding: 3px 8px;
border-radius: 12px;
font-size: 10px;
font-weight: bold;
min-width: 45px;
height: 18px;
display: flex;
align-items: center;
justify-content: center;
transition: all .3s ease;
z-index: 3;
box-shadow: 0 3px 8px rgba(31,43,59,0.4);
border: 1px solid rgba(255,255,255,0.2);
white-space: nowrap
}
@media (max-width: 900px) {
.quick-menu-container[data-widget-key="horizontal_social_menu"] .quick-menu {
gap:10px
}
.quick-menu-container[data-widget-key="horizontal_social_menu"] .menu-link {
padding: 12px 15px;
font-size: 13px;
min-width: 80px
}
.quick-menu-container[data-widget-key="horizontal_social_menu"] .menu-link i {
font-size: 22px;
margin-bottom: 6px
}
.quick-menu-container[data-widget-key="horizontal_social_menu"] .menu-badge {
font-size: 9px;
min-width: 40px;
height: 16px;
padding: 2px 6px
}
}
@media (max-width: 768px) {
.quick-menu-container[data-widget-key="horizontal_social_menu"] .quick-menu {
gap:8px
}
.quick-menu-container[data-widget-key="horizontal_social_menu"] .menu-link {
padding: 10px 12px;
font-size: 12px;
min-width: 70px
}
.quick-menu-container[data-widget-key="horizontal_social_menu"] .menu-link i {
font-size: 20px;
margin-bottom: 5px
}
.quick-menu-container[data-widget-key="horizontal_social_menu"] .menu-badge {
top: 4px;
right: 4px;
font-size: 8px;
min-width: 35px;
height: 15px;
padding: 2px 5px
}
}
@media (max-width: 600px) {
.quick-menu-container[data-widget-key="horizontal_social_menu"] .quick-menu {
gap:5px
}
.quick-menu-container[data-widget-key="horizontal_social_menu"] .menu-link {
padding: 8px 10px;
min-width: 60px
}
.quick-menu-container[data-widget-key="horizontal_social_menu"] .menu-link .text {
font-size: 11px
}
.quick-menu-container[data-widget-key="horizontal_social_menu"] .menu-link i {
font-size: 18px;
margin-bottom: 4px
}
.quick-menu-container[data-widget-key="horizontal_social_menu"] .menu-badge {
display: none
}
}
@media (max-width: 480px) {
.quick-menu-container[data-widget-key="horizontal_social_menu"] .menu-link {
padding:8px;
min-width: 50px
}
.quick-menu-container[data-widget-key="horizontal_social_menu"] .menu-link .text {
display: none
}
.quick-menu-container[data-widget-key="horizontal_social_menu"] .menu-link i {
margin-bottom: 0;
font-size: 20px
}
}
@keyframes slideIn {
from {
opacity: 0;
transform: translateY(-15px)
}
to {
opacity: 1;
transform: translateY(0)
}
}

Это переписка от ИИ, выглядит даже лучше
 
narushago

narushago

Пользователь
Регистрация
30 Авг 2025
Сообщения
118
It-Intel написал(а):
@narushago,
extra.less: 
.block-container[data-widget-key="forum_menu_dostup"] {
border: none !important;
outline: none !important;
box-shadow: none !important;
background: transparent !important;
margin-bottom: 10px
}
.block-container[data-widget-key="forum_menu_dostup"] .block-minorHeader {
background: linear-gradient(135deg, #1f2b3b 0%, #0f1419 100%);
padding: 10px 15px;
font-size: 1.1rem;
font-weight: 600;
color: #fff;
text-shadow: 0 0 8px rgba(189,195,199,0.4);
border-bottom: 1px solid #2c3e50;
border-radius: 6px 6px 0 0
}
.block-container[data-widget-key="forum_menu_dostup"] .block-body {
padding: 10px;
background: rgba(31,43,59,0.3);
border-radius: 0 0 6px 6px
}
.block-container[data-widget-key="forum_menu_dostup"] .quick-access-container {
max-height: 250px;
overflow-y: auto;
padding-right: 5px;
scrollbar-width: thin;
scrollbar-color: #1f2b3b #0f1419
}
.block-container[data-widget-key="forum_menu_dostup"] .quick-access-container::-webkit-scrollbar {
width: 4px
}
.block-container[data-widget-key="forum_menu_dostup"] .quick-access-container::-webkit-scrollbar-track {
background: #0f1419;
border-radius: 2px
}
.block-container[data-widget-key="forum_menu_dostup"] .quick-access-container::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, #1f2b3b, #2c3e50);
border-radius: 2px
}
.block-container[data-widget-key="forum_menu_dostup"] .quick-access-container::-webkit-scrollbar-thumb:hover {
background: linear-gradient(180deg, #2c3e50, #1f2b3b)
}
.block-container[data-widget-key="forum_menu_dostup"] .quick-access {
list-style: none;
padding: 0;
margin: 0
}
.block-container[data-widget-key="forum_menu_dostup"] .quick-access div {
margin-bottom: 6px;
animation: fadeIn .4s ease forwards;
opacity: 0;
transform: translateY(8px)
}
.block-container[data-widget-key="forum_menu_dostup"] .button {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
cursor: pointer;
border: 1px solid #1a202c;
white-space: nowrap;
transition: all .2s ease;
font-size: 12px;
border-radius: 6px;
padding: 8px 12px;
font-weight: 400;
text-align: center;
color: #ecf0f1;
background: #0f1419;
margin: 0;
position: relative;
overflow: hidden;
min-height: 32px
}
.block-container[data-widget-key="forum_menu_dostup"] .button::before {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(270deg, #0f1419, #1f2b3b, #2c3e50, #1f2b3b, #0f1419);
background-size: 300% 300%;
transition: left .3s ease;
z-index: 0
}
.block-container[data-widget-key="forum_menu_dostup"] .button:hover::before {
left: 0;
animation: gradientMove 2.5s ease infinite
}
.block-container[data-widget-key="forum_menu_dostup"] .button:hover {
box-shadow: 0 2px 8px rgba(31,43,59,0.3);
border-color: #5d6d7e;
color: #ffffff;
transform: translateY(-1px)
}
.block-container[data-widget-key="forum_menu_dostup"] .button span {
position: relative;
z-index: 1
}
.block-container[data-widget-key="forum_menu_dostup"] .button-text {
display: flex;
align-items: center;
justify-content: center;
width: 100%
}
@media (max-width: 768px) {
.block-container[data-widget-key="forum_menu_dostup"] .block-minorHeader {
padding:8px 12px;
font-size: 1rem
}
.block-container[data-widget-key="forum_menu_dostup"] .button {
font-size: 11px;
padding: 6px 10px;
min-height: 28px
}
.block-container[data-widget-key="forum_menu_dostup"] .quick-access-container {
max-height: 200px
}
}
@keyframes gradientMove {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}
@keyframes fadeIn {
to {
opacity: 1;
transform: translateY(0)
}
}
.quick-menu-container[data-widget-key="horizontal_social_menu"] {
background: transparent;
border-radius: 15px;
padding: 15px 20px;
max-width: 95%;
overflow-x: auto;
margin: 20px 0
}
.quick-menu-container[data-widget-key="horizontal_social_menu"] .quick-menu {
list-style: none;
display: flex;
gap: 15px;
margin: 0;
padding: 0;
justify-content: center;
flex-wrap: wrap
}
.quick-menu-container[data-widget-key="horizontal_social_menu"] .menu-item {
position: relative;
transition: all .3s ease;
white-space: nowrap;
animation: slideIn .5s ease forwards
}
.quick-menu-container[data-widget-key="horizontal_social_menu"] .menu-item:nth-child(1) {
animation-delay: 0.05s
}
.quick-menu-container[data-widget-key="horizontal_social_menu"] .menu-item:nth-child(2) {
animation-delay: 0.1s
}
.quick-menu-container[data-widget-key="horizontal_social_menu"] .menu-item:nth-child(3) {
animation-delay: 0.15s
}
.quick-menu-container[data-widget-key="horizontal_social_menu"] .menu-item:nth-child(4) {
animation-delay: 0.2s
}
.quick-menu-container[data-widget-key="horizontal_social_menu"] .menu-item:nth-child(5) {
animation-delay: 0.25s
}
.quick-menu-container[data-widget-key="horizontal_social_menu"] .menu-item:nth-child(6) {
animation-delay: 0.3s
}
.quick-menu-container[data-widget-key="horizontal_social_menu"] .menu-link {
display: flex;
flex-direction: column;
align-items: center;
padding: 15px 18px;
color: #ecf0f1;
text-decoration: none;
font-weight: 500;
position: relative;
z-index: 2;
transition: all .3s ease;
border-radius: 12px;
font-size: 14px;
min-width: 90px;
background: transparent !important;
border: 1px solid rgba(31,43,59,0.4);
backdrop-filter: blur(5px)
}
.quick-menu-container[data-widget-key="horizontal_social_menu"] .menu-link i {
font-size: 24px;
margin-bottom: 8px;
transition: all .3s ease;
color: #34495e
}
.quick-menu-container[data-widget-key="horizontal_social_menu"] .menu-link::after {
content: '';
position: absolute;
bottom: -2px;
left: 50%;
width: 0;
height: 2px;
background: #5d6d7e;
transition: all .3s ease;
transform: translateX(-50%)
}
.quick-menu-container[data-widget-key="horizontal_social_menu"] .menu-item:hover .menu-link {
background: transparent !important;
color: #ffffff;
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(31,43,59,0.4);
border-color: #5d6d7e
}
.quick-menu-container[data-widget-key="horizontal_social_menu"] .menu-item:hover .menu-link i {
transform: scale(1.3);
color: #ffffff;
text-shadow: 0 0 15px rgba(255,255,255,0.8)
}
.quick-menu-container[data-widget-key="horizontal_social_menu"] .menu-item:hover .menu-link::after {
width: 70%
}
.quick-menu-container[data-widget-key="horizontal_social_menu"] .menu-item:hover .menu-badge {
transform: scale(1.1) translateY(-2px);
box-shadow: 0 5px 12px rgba(31,43,59,0.5)
}
.quick-menu-container[data-widget-key="horizontal_social_menu"] .menu-badge {
position: absolute;
top: 5px;
right: 5px;
background: linear-gradient(135deg, #1f2b3b 0%, #2c3e50 100%);
color: #fff;
padding: 3px 8px;
border-radius: 12px;
font-size: 10px;
font-weight: bold;
min-width: 45px;
height: 18px;
display: flex;
align-items: center;
justify-content: center;
transition: all .3s ease;
z-index: 3;
box-shadow: 0 3px 8px rgba(31,43,59,0.4);
border: 1px solid rgba(255,255,255,0.2);
white-space: nowrap
}
@media (max-width: 900px) {
.quick-menu-container[data-widget-key="horizontal_social_menu"] .quick-menu {
gap:10px
}
.quick-menu-container[data-widget-key="horizontal_social_menu"] .menu-link {
padding: 12px 15px;
font-size: 13px;
min-width: 80px
}
.quick-menu-container[data-widget-key="horizontal_social_menu"] .menu-link i {
font-size: 22px;
margin-bottom: 6px
}
.quick-menu-container[data-widget-key="horizontal_social_menu"] .menu-badge {
font-size: 9px;
min-width: 40px;
height: 16px;
padding: 2px 6px
}
}
@media (max-width: 768px) {
.quick-menu-container[data-widget-key="horizontal_social_menu"] .quick-menu {
gap:8px
}
.quick-menu-container[data-widget-key="horizontal_social_menu"] .menu-link {
padding: 10px 12px;
font-size: 12px;
min-width: 70px
}
.quick-menu-container[data-widget-key="horizontal_social_menu"] .menu-link i {
font-size: 20px;
margin-bottom: 5px
}
.quick-menu-container[data-widget-key="horizontal_social_menu"] .menu-badge {
top: 4px;
right: 4px;
font-size: 8px;
min-width: 35px;
height: 15px;
padding: 2px 5px
}
}
@media (max-width: 600px) {
.quick-menu-container[data-widget-key="horizontal_social_menu"] .quick-menu {
gap:5px
}
.quick-menu-container[data-widget-key="horizontal_social_menu"] .menu-link {
padding: 8px 10px;
min-width: 60px
}
.quick-menu-container[data-widget-key="horizontal_social_menu"] .menu-link .text {
font-size: 11px
}
.quick-menu-container[data-widget-key="horizontal_social_menu"] .menu-link i {
font-size: 18px;
margin-bottom: 4px
}
.quick-menu-container[data-widget-key="horizontal_social_menu"] .menu-badge {
display: none
}
}
@media (max-width: 480px) {
.quick-menu-container[data-widget-key="horizontal_social_menu"] .menu-link {
padding:8px;
min-width: 50px
}
.quick-menu-container[data-widget-key="horizontal_social_menu"] .menu-link .text {
display: none
}
.quick-menu-container[data-widget-key="horizontal_social_menu"] .menu-link i {
margin-bottom: 0;
font-size: 20px
}
}
@keyframes slideIn {
from {
opacity: 0;
transform: translateY(-15px)
}
to {
opacity: 1;
transform: translateY(0)
}
}

Это переписка от ИИ, выглядит даже лучше
Нажмите для раскрытия...
сяб
 
Войдите или зарегистрируйтесь для ответа.
Сверху