SHA256
Дизайн Артёма
This commit is contained in:
AidarKC
@@ -1,145 +1,12 @@
|
||||
:root {
|
||||
--z-overlay: 40;
|
||||
--z-dropdown: 50;
|
||||
--z-modal: 60;
|
||||
}
|
||||
|
||||
.dropdown-portal {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.dropdown-backdrop {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: var(--z-overlay);
|
||||
pointer-events: auto;
|
||||
background: rgba(2, 6, 14, 0.34);
|
||||
backdrop-filter: blur(1.5px);
|
||||
-webkit-backdrop-filter: blur(1.5px);
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
position: fixed;
|
||||
z-index: var(--z-dropdown);
|
||||
display: grid;
|
||||
gap: 2px;
|
||||
padding: 6px;
|
||||
min-width: 196px;
|
||||
max-width: calc(100vw - 20px);
|
||||
border: 1px solid rgba(92, 190, 255, 0.22);
|
||||
border-radius: 16px;
|
||||
background: linear-gradient(155deg, rgba(19, 27, 42, 0.97), rgba(7, 12, 22, 0.98));
|
||||
box-shadow: 0 18px 42px rgba(0, 0, 0, 0.48), 0 0 24px rgba(39, 141, 255, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.06);
|
||||
backdrop-filter: blur(20px) saturate(125%);
|
||||
-webkit-backdrop-filter: blur(20px) saturate(125%);
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.dropdown-menu--transparent {
|
||||
border-color: rgba(92, 190, 255, 0.06);
|
||||
background: rgba(7, 12, 22, 0.44);
|
||||
box-shadow: 0 18px 42px rgba(0, 0, 0, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.035);
|
||||
}
|
||||
|
||||
.dropdown-menu__item {
|
||||
width: 100%;
|
||||
min-height: 42px;
|
||||
padding: 0 11px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
gap: 10px;
|
||||
border: 0;
|
||||
border-radius: 10px;
|
||||
background: transparent;
|
||||
background-image: none;
|
||||
box-shadow: none;
|
||||
color: #ffffff;
|
||||
text-shadow: none;
|
||||
backdrop-filter: none;
|
||||
-webkit-backdrop-filter: none;
|
||||
font: inherit;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
line-height: 1.2;
|
||||
text-align: left;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
transition: transform 90ms ease, box-shadow 90ms ease, background-color 90ms ease, filter 120ms ease;
|
||||
}
|
||||
|
||||
.dropdown-menu__item.is-selected {
|
||||
background: rgba(39, 141, 255, 0.12);
|
||||
box-shadow: none;
|
||||
transform: none;
|
||||
filter: none;
|
||||
}
|
||||
|
||||
.dropdown-menu__item:hover {
|
||||
color: #ffffff;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
box-shadow: none;
|
||||
transform: none;
|
||||
filter: none;
|
||||
}
|
||||
|
||||
.dropdown-menu__item:active {
|
||||
color: #ffffff;
|
||||
background: rgba(0, 0, 0, 0.12);
|
||||
border: 0;
|
||||
box-shadow:
|
||||
inset 0 3px 8px rgba(0, 0, 0, 0.58),
|
||||
inset 0 -1px 2px rgba(255, 255, 255, 0.08);
|
||||
transform: none;
|
||||
filter: none;
|
||||
}
|
||||
|
||||
.dropdown-menu__item:focus-visible {
|
||||
color: #ffffff;
|
||||
outline: 2px solid rgba(255, 255, 255, 0.62);
|
||||
outline-offset: 2px;
|
||||
background: rgba(39, 141, 255, 0.12);
|
||||
box-shadow: none;
|
||||
transform: none;
|
||||
filter: none;
|
||||
}
|
||||
|
||||
.dropdown-menu__item.is-danger { color: #ffb7c5; }
|
||||
.dropdown-menu__item.is-danger:hover,
|
||||
.dropdown-menu__item.is-danger:active { color: #ffffff; }
|
||||
.dropdown-menu__item:disabled,
|
||||
.dropdown-menu__item.is-danger:disabled {
|
||||
opacity: 0.55;
|
||||
color: rgba(255, 255, 255, 0.42);
|
||||
background: transparent;
|
||||
border: 0;
|
||||
box-shadow: none;
|
||||
transform: none;
|
||||
filter: none;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.dropdown-menu__item::before,
|
||||
.dropdown-menu__item::after {
|
||||
background: transparent;
|
||||
background-image: none;
|
||||
border-color: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.dropdown-menu__icon,
|
||||
.dropdown-menu__icon svg,
|
||||
.dropdown-menu__item > img {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
min-width: 18px;
|
||||
flex: 0 0 18px;
|
||||
object-fit: contain;
|
||||
color: #65b7ff;
|
||||
filter: drop-shadow(0 0 5px rgba(39, 141, 255, 0.28));
|
||||
}
|
||||
|
||||
.dropdown-menu__divider { height: 1px; margin: 4px 8px; background: rgba(255, 255, 255, 0.08); }
|
||||
|
||||
@media (prefers-reduced-motion: reduce) { .dropdown-menu { animation: none; } }
|
||||
:root { --z-overlay: 100; --z-dropdown: 110; --z-modal: 120; }
|
||||
.dropdown-portal { pointer-events: none; }
|
||||
.dropdown-backdrop { position: fixed; inset: 0; z-index: var(--z-overlay); pointer-events: auto; background: var(--scrim); }
|
||||
.dropdown-menu { position: fixed; z-index: var(--z-dropdown); display: grid; gap: 2px; padding: 6px; min-width: 196px; max-width: calc(100vw - 20px); max-height: calc(100dvh - 20px); overflow-y: auto; border: 1px solid var(--border-subtle); border-radius: 20px; background: var(--surface); color: var(--text-primary); box-shadow: var(--shadow); pointer-events: auto; }
|
||||
.dropdown-menu__item { width: 100%; min-height: 44px; padding: 10px 12px; display: flex; align-items: center; gap: 10px; border: 0; border-radius: 12px; background: transparent; color: var(--text-primary); font: inherit; font-size: .875rem; line-height: 1.4; text-align: left; cursor: pointer; }
|
||||
.dropdown-menu__item:hover, .dropdown-menu__item.is-selected { background: var(--surface-selected); }
|
||||
.dropdown-menu__item:active { background: var(--surface-selected); }
|
||||
.dropdown-menu__item:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
|
||||
.dropdown-menu__item.is-danger { color: var(--danger); }
|
||||
.dropdown-menu__item:disabled { opacity: .5; cursor: not-allowed; }
|
||||
.dropdown-menu__icon, .dropdown-menu__icon svg, .dropdown-menu__item > img { width: 22px; height: 22px; flex: 0 0 22px; object-fit: contain; color: currentColor; }
|
||||
.dropdown-menu__divider { height: 1px; margin: 4px 8px; background: var(--border-subtle); }
|
||||
|
||||
Reference in New Issue
Block a user