Пользователь
- Регистрация
- 19 Фев 2024
- Сообщения
- 96
- Автор темы
- #1
Кому нужно будет, даю код для виджета Быстрого Доступа
Полная копия с форума Аризоны.
Полная копия с форума Аризоны.
Быстрый Доступ:
<div class="block-body block-row">
<div class="qaWidget" style="--qa-max-h: 420px;">
<style>
.qaWidget { --qa-radius:14px; --qa-gap:8px; --qa-max-h:460px; }
.qaWidget{
--qa-text:#0b1220;
--qa-bg:#f5f6f8;
--qa-hover:#ffffff;
--qa-border:#e2e5ea;
--qa-border-strong:#cdd3dd;
--qa-surface:transparent;
--qa-surface-border:#e9edf3;
--qa-accent:linear-gradient(90deg,#ff6db7,#8b5cf6);
}
html[data-color-scheme="dark"] .qaWidget,
html[data-xf-style-type="dark"] .qaWidget,
html.theme--dark .qaWidget,
.p-body.is-dark .qaWidget,
.p-body--modular.is-dark .qaWidget{
--qa-text:#e9edf3;
--qa-bg:rgba(255,255,255,.06);
--qa-hover:rgba(255,255,255,.12);
--qa-border:rgba(255,255,255,.14);
--qa-border-strong:rgba(255,255,255,.24);
--qa-surface:transparent;
--qa-surface-border:rgba(255,255,255,.08);
}
.qaWidget .qa-scroll{max-height:var(--qa-max-h); overflow:auto; padding-right:4px;}
.qaWidget .quick-access{margin:0;padding:0;}
.qaWidget .quick-access li{list-style:none;margin:0 0 var(--qa-gap);}
.qaWidget .quick-access hr{display:none;}
.qaWidget .qa-scroll::-webkit-scrollbar{width:8px}
.qaWidget .qa-scroll::-webkit-scrollbar-thumb{border-radius:8px;background:var(--qa-border-strong)}
.qaWidget .qa-scroll::-webkit-scrollbar-track{background:transparent}
.qaWidget .quick-access .button{
position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;
width:100%;height:44px;padding:0 14px;border-radius:var(--qa-radius);
font-weight:600;letter-spacing:.01em;color:var(--qa-text) !important;
background:var(--qa-bg);border:1px solid var(--qa-border);
box-shadow:0 1px 1px rgba(0,0,0,.06), inset 0 1px 0 rgba(255,255,255,.04);
-webkit-backdrop-filter:saturate(140%) blur(6px);backdrop-filter:saturate(140%) blur(6px);
transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease, background-color .12s ease;
text-decoration:none !important;
}
.qaWidget .quick-access .button::before{
content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:var(--qa-accent);
-webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .15s ease;
}
.qaWidget .quick-access .button:hover{
transform:translateY(-1px);
background:linear-gradient(0deg,var(--qa-hover),var(--qa-hover)),var(--qa-bg);
border-color:var(--qa-border-strong);box-shadow:0 6px 16px rgba(0,0,0,.12);
}
.qaWidget .quick-access .button:hover::before{opacity:.9;}
.qaWidget .quick-access .button:active{transform:translateY(0);box-shadow:0 2px 8px rgba(0,0,0,.12);}
.qaWidget .quick-access .button:focus-visible{outline:none;box-shadow:0 0 0 2px var(--qa-surface),0 0 0 4px rgba(139,92,246,.5);}
.qaWidget[data-size="sm"] .quick-access .button{height:38px}
</style>
<div class="qa-scroll">
<ol class="listPlain quick-access">
<li><a href="/forums/6" class="button "><span class="button-text">Правила Проекта</span></a></li>
<hr>
<li><a href="/forums/5" class="button "><span class="button-text">Технический раздел</span></a></li>
<hr>
<li><a href="forums/16" class="button "><span class="button-text">Жалобы HORIZON</span></a></li>
</ol>
</div>
</div>
</div>
