Активный
- Регистрация
- 3 Янв 2025
- Сообщения
- 1,238
- Автор темы
- #1
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>
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)
}
}
