создан механизм для создания меню для разных сравнений через drap-and-drop

This commit is contained in:
2026-08-20 12:29:07 +03:00
parent 3f2d5caa4a
commit 81fd030846
6 changed files with 727 additions and 22 deletions

View File

@@ -7251,3 +7251,115 @@ body.hockey-navigation-open .runtime-viewport.has-hockey-pbp { gap: 14px !import
text-transform: uppercase;
letter-spacing: .035em;
}
/* BUILD80 — universal player-selection side panels + compact editor. */
.hockey-runtime-side-stack {
flex: 0 0 clamp(330px, 23vw, 410px);
width: clamp(330px, 23vw, 410px);
max-height: 100%;
min-height: 0;
display: grid;
align-content: start;
gap: 8px;
overflow: auto;
scrollbar-width: thin;
}
.hockey-runtime-side-stack > .hockey-pbp-window,
.hockey-runtime-side-stack > .hockey-pbp-window[style] {
position: relative !important;
inset: auto !important;
flex: none !important;
width: 100% !important;
max-width: none !important;
height: min(560px, 70vh);
max-height: 70vh;
margin: 0;
}
.hockey-runtime-side-stack > .hockey-pbp-window.is-collapsed { width: 100% !important; height: auto; }
.hockey-player-select-panel {
overflow: hidden;
color: #edf5fc;
border: 1px solid #36546e;
border-radius: 13px;
background: #071522;
box-shadow: 0 10px 28px rgba(0,0,0,.25);
}
.hockey-player-select-head {
min-height: 48px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 8px 9px 8px 12px;
border-bottom: 1px solid #243d54;
background: linear-gradient(100deg, rgba(30,63,88,.8), rgba(8,22,35,.96));
}
.hockey-player-select-head > div:first-child { min-width:0; display:grid; gap:2px; }
.hockey-player-select-head span { color:#48dfbd; font-size:7px; font-weight:950; letter-spacing:.15em; }
.hockey-player-select-head strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px; font-weight:950; }
.hockey-player-select-head small { overflow:hidden; color:#6f8aa2; text-overflow:ellipsis; white-space:nowrap; font-size:7px; font-weight:800; }
.hockey-player-select-actions { display:flex; align-items:center; gap:5px; }
.hockey-player-select-actions b { min-width:31px; height:27px; display:grid; place-items:center; border:1px solid #38556d; border-radius:8px; background:#10283b; font:950 9px "Roboto Mono",Consolas,monospace; }
.hockey-player-select-actions button { width:27px; height:27px; display:grid; place-items:center; padding:0; color:#b9cada; border:1px solid #38556d; border-radius:8px; background:#10283b; font-size:15px; font-weight:950; cursor:pointer; }
.hockey-player-select-actions button:hover { color:#07150f; border-color:transparent; background:#48dfbd; }
.hockey-player-select-panel.is-collapsed .hockey-player-select-body { display:none; }
.hockey-player-select-panel.is-collapsed .hockey-player-select-head { border-bottom:0; }
.hockey-player-select-body { display:grid; gap:6px; padding:7px; }
.hockey-player-select-rule { color:#6d859b; font-size:7px; font-weight:800; }
.hockey-player-select-rule code { color:#8db8d9; font:800 7px "Roboto Mono",Consolas,monospace; }
.hockey-player-select-slots { display:grid; gap:5px; }
.hockey-player-select-slot {
min-height:45px;
display:grid;
grid-template-columns:27px minmax(0,1fr) auto;
gap:7px;
align-items:center;
padding:6px 7px;
border:1px dashed #38546d;
border-radius:9px;
background:#0a1a29;
transition:border-color .12s ease, background .12s ease, box-shadow .12s ease;
}
.hockey-player-select-slot.is-filled { border-style:solid; border-color:#2d5168; }
.hockey-player-select-slot.is-over { border-color:#48dfbd; background:#0e302a; box-shadow:0 0 0 2px rgba(72,223,189,.14) inset; }
.hockey-player-select-index { width:24px; height:24px; display:grid; place-items:center; color:#9fb3c4; border:1px solid #355169; border-radius:7px; background:#10283b; font:950 9px "Roboto Mono",Consolas,monospace; }
.hockey-player-select-slot > div { min-width:0; display:grid; gap:2px; }
.hockey-player-select-slot strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:9px; font-weight:950; }
.hockey-player-select-slot small { overflow:hidden; color:#6e879d; text-overflow:ellipsis; white-space:nowrap; font:750 7px "Roboto Mono",Consolas,monospace; }
.hockey-player-select-slot > i { color:#4c6980; font:900 7px "Roboto Mono",Consolas,monospace; font-style:normal; }
.hockey-player-select-slot > button { width:22px; height:22px; padding:0; color:#8ea2b4; border:1px solid #354b60; border-radius:7px; background:#102133; cursor:pointer; }
.hockey-player-select-slot > button:hover { color:#fff; border-color:#d45f6c; background:#772532; }
.hockey-player-select-clear { justify-self:end; padding:5px 8px; color:#8ca1b4; border:1px solid #30475c; border-radius:7px; background:#0d1e2d; font-size:7px; font-weight:900; cursor:pointer; }
.hockey-player-select-clear:hover { color:#fff; border-color:#516d85; }
.player-selection-editor { margin-top:14px; padding-top:14px; border-top:1px solid #263d53; }
.player-selection-editor > header { display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin-bottom:8px; }
.player-selection-editor > header > div { display:grid; gap:3px; }
.player-selection-editor > header span { color:#48dfbd; font-size:8px; font-weight:950; letter-spacing:.12em; }
.player-selection-editor > header strong { font-size:13px; }
.player-selection-editor > header small { color:#738da4; font-size:8px; }
.player-selection-editor-list { display:grid; gap:6px; }
.player-selection-editor-row {
display:grid;
grid-template-columns:28px 82px minmax(135px,1fr) minmax(125px,.8fr) 65px minmax(145px,.9fr) 135px 135px minmax(160px,1fr) 62px 34px;
gap:6px;
align-items:end;
padding:7px;
border:1px solid #2b4359;
border-radius:9px;
background:#0b1a28;
}
.player-selection-editor-row label { min-width:0; display:grid; gap:3px; color:#7890a7; font-size:7px; font-weight:900; }
.player-selection-editor-row input,.player-selection-editor-row select { min-width:0; height:30px; }
.player-selection-editor-row .shortcut-inline-check { align-self:center; display:flex; align-items:center; gap:5px; }
.player-selection-editor-description { min-width:150px; }
.player-selection-editor-order { display:flex; gap:3px; }
@media (max-width: 1450px) {
.player-selection-editor-row { grid-template-columns:28px 82px minmax(140px,1fr) minmax(120px,1fr) 65px minmax(140px,1fr) 130px 130px; }
.player-selection-editor-description,.player-selection-editor-order,.player-selection-editor-row > .icon-btn { grid-column:auto; }
}
@media (max-width:980px) {
.hockey-runtime-side-stack { flex-basis:290px; width:290px; }
.player-selection-editor-row { grid-template-columns:1fr 1fr; }
}