LIVE SAMP

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

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

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

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

Jack_Mithel

Активный
Регистрация
3 Янв 2025
Сообщения
1,422
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
Сообщения
732
Обратите внимание, пользователь заблокирован на форуме. Не рекомендуется проводить сделки. Мы не несем ответственности за действия пользователя вне форума.
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)
    }
}
Нажмите для раскрытия...
Имба
 
It-Intel

It-Intel

Заблокированный
Регистрация
17 Июн 2025
Сообщения
1,677
Обратите внимание, пользователь заблокирован на форуме. Не рекомендуется проводить сделки. Мы не несем ответственности за действия пользователя вне форума.
Прикольно
 
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
Сообщения
119
можно ли изменить фиолетовый цвет на синий обычный который стоит на форуме примерно такой цвет , где его можно изменить?
 
It-Intel

It-Intel

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

It-Intel

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

It-Intel

Заблокированный
Регистрация
17 Июн 2025
Сообщения
1,677
Обратите внимание, пользователь заблокирован на форуме. Не рекомендуется проводить сделки. Мы не несем ответственности за действия пользователя вне форума.
@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
Сообщения
119
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)
}
}

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