7211 lines
246 KiB
CSS
7211 lines
246 KiB
CSS
:root {
|
||
color-scheme: dark;
|
||
--bg: #080d15;
|
||
--panel: #101827;
|
||
--panel-2: #151f31;
|
||
--line: #27354a;
|
||
--line-soft: #1d293b;
|
||
--muted: #8193ad;
|
||
--text: #edf4ff;
|
||
--accent: #48dfbd;
|
||
--accent-2: #43a9ff;
|
||
--danger: #ff667d;
|
||
--warning: #ffca63;
|
||
--radius: 13px;
|
||
}
|
||
|
||
* { box-sizing: border-box; }
|
||
html, body { margin: 0; min-height: 100%; }
|
||
body {
|
||
min-height: 100vh;
|
||
color: var(--text);
|
||
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||
background:
|
||
radial-gradient(circle at 14% 0%, rgba(67,169,255,.10), transparent 28%),
|
||
radial-gradient(circle at 86% 0%, rgba(72,223,189,.08), transparent 26%),
|
||
var(--bg);
|
||
}
|
||
button, input, select, textarea { font: inherit; }
|
||
button { cursor: pointer; }
|
||
.hidden { display: none !important; }
|
||
|
||
.topbar {
|
||
min-height: 76px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 18px;
|
||
padding: 12px 18px;
|
||
border-bottom: 1px solid var(--line);
|
||
background: rgba(8,13,21,.90);
|
||
backdrop-filter: blur(18px);
|
||
position: sticky;
|
||
top: 0;
|
||
z-index: 50;
|
||
}
|
||
.brand-block { min-width: 250px; }
|
||
.eyebrow { color: var(--accent); font-size: 10px; font-weight: 850; letter-spacing: .17em; }
|
||
.project-name {
|
||
width: min(370px, 34vw);
|
||
margin-top: 3px;
|
||
padding: 3px 0;
|
||
color: var(--text);
|
||
font-size: 20px;
|
||
font-weight: 800;
|
||
background: transparent;
|
||
border: 0;
|
||
border-bottom: 1px solid transparent;
|
||
outline: none;
|
||
}
|
||
.project-name:focus { border-color: var(--accent); }
|
||
.top-actions, .toolbar-group, .runtime-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
|
||
|
||
.btn, .file-btn, .icon-btn, .mini-btn {
|
||
min-height: 36px;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: var(--text);
|
||
background: #172235;
|
||
border: 1px solid var(--line);
|
||
border-radius: 9px;
|
||
transition: .16s ease;
|
||
}
|
||
.btn, .file-btn { padding: 0 12px; }
|
||
.icon-btn { width: 35px; padding: 0; font-size: 17px; }
|
||
.mini-btn { width: 28px; min-height: 28px; padding: 0; }
|
||
.btn:hover, .file-btn:hover, .icon-btn:hover, .mini-btn:hover, .template-grid button:hover, .component-add:hover {
|
||
transform: translateY(-1px);
|
||
border-color: #496887;
|
||
}
|
||
.btn-accent { color: #06130f; background: linear-gradient(135deg, var(--accent), #9cf8e2); border-color: transparent; font-weight: 850; }
|
||
.danger { color: var(--danger); }
|
||
.file-btn input { display: none; }
|
||
.inline-field { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 12px; }
|
||
.inline-field.compact select { min-width: 150px; }
|
||
.check-inline { display: inline-flex; align-items: center; gap: 6px; color: #acbdd2; font-size: 12px; white-space: nowrap; }
|
||
.zoom-label { width: 48px; text-align: center; color: #b4c5da; font-size: 12px; }
|
||
|
||
input[type="text"], input[type="search"], input[type="number"], input[type="date"], input[type="time"], input[type="datetime-local"], input[type="color"], select, textarea {
|
||
width: 100%;
|
||
color: var(--text);
|
||
background: #0b1320;
|
||
border: 1px solid var(--line);
|
||
border-radius: 8px;
|
||
padding: 8px 9px;
|
||
outline: none;
|
||
}
|
||
select { min-height: 35px; }
|
||
textarea { resize: vertical; }
|
||
input:focus, select:focus, textarea:focus { border-color: var(--accent-2); box-shadow: 0 0 0 3px rgba(67,169,255,.10); }
|
||
|
||
.editor-shell { display: grid; grid-template-columns: 360px minmax(560px, 1fr) 360px; min-height: calc(100vh - 76px); }
|
||
.left-sidebar, .right-sidebar { background: rgba(15,23,37,.82); }
|
||
.left-sidebar { border-right: 1px solid var(--line); }
|
||
.right-sidebar { border-left: 1px solid var(--line); padding: 16px; }
|
||
.panel-scroll { max-height: calc(100vh - 76px); overflow: auto; position: sticky; top: 76px; }
|
||
.sidebar-section { padding: 16px; border-bottom: 1px solid rgba(39,53,74,.72); }
|
||
.sidebar-section.sticky-search { position: sticky; top: 0; z-index: 3; background: #101827; padding-bottom: 12px; }
|
||
.section-title-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
|
||
h2 { margin: 0 0 10px; color: #cbd8ea; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
|
||
.section-title-row h2 { margin: 0; }
|
||
.template-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
|
||
.template-grid button { min-height: 37px; color: #d7e3f2; background: #151f31; border: 1px solid var(--line); border-radius: 9px; }
|
||
.tabs-manager { display: grid; gap: 7px; margin-top: 10px; }
|
||
.tab-manager-row { display: grid; grid-template-columns: 1fr auto auto; gap: 6px; align-items: center; padding: 6px; border: 1px solid var(--line); border-radius: 9px; background: #131e2e; }
|
||
.tab-manager-row input { padding: 6px 7px; }
|
||
.tab-manager-row button { width: 27px; height: 27px; border-radius: 7px; color: #bdcce0; background: #0c1421; border: 1px solid var(--line); }
|
||
.component-library { padding: 0 12px 24px; }
|
||
.component-category { margin-top: 14px; }
|
||
.component-category-title { margin: 0 4px 7px; color: #8195af; font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
|
||
.component-category-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
|
||
.component-add { min-height: 58px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 3px; padding: 8px 9px; color: #dbe7f6; background: #141e2f; border: 1px dashed #30425d; border-radius: 9px; text-align: left; }
|
||
.component-add .component-icon { color: var(--accent); font-size: 15px; }
|
||
.component-add small { color: #7489a5; font-size: 10px; }
|
||
|
||
.workspace { min-width: 0; padding: 14px; }
|
||
.workspace-toolbar { display: flex; justify-content: space-between; gap: 12px; align-items: center; margin-bottom: 10px; }
|
||
.canvas-viewport { min-height: 650px; overflow: auto; border: 1px solid var(--line); border-radius: var(--radius); background: #080d15; box-shadow: inset 0 0 60px rgba(0,0,0,.32); }
|
||
.canvas-sizer { position: relative; }
|
||
.canvas-stage { position: relative; transform-origin: top left; overflow: hidden; user-select: none; }
|
||
.canvas-stage.show-grid {
|
||
background-image:
|
||
linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
|
||
linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px),
|
||
linear-gradient(rgba(67,169,255,.055) 1px, transparent 1px),
|
||
linear-gradient(90deg, rgba(67,169,255,.055) 1px, transparent 1px);
|
||
background-size: var(--grid-size, 10px) var(--grid-size, 10px), var(--grid-size, 10px) var(--grid-size, 10px), calc(var(--grid-size, 10px) * 10) calc(var(--grid-size, 10px) * 10), calc(var(--grid-size, 10px) * 10) calc(var(--grid-size, 10px) * 10);
|
||
}
|
||
.canvas-empty { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); font-size: 16px; }
|
||
.builder-component { position: absolute; min-width: 40px; min-height: 28px; border: 1px solid transparent; border-radius: 10px; touch-action: none; }
|
||
.builder-component:hover { border-color: rgba(67,169,255,.45); }
|
||
.builder-component.selected { border-color: var(--accent-2); box-shadow: 0 0 0 2px rgba(67,169,255,.14); }
|
||
.builder-component.is-hidden-layer { opacity: .22; filter: grayscale(.7); }
|
||
.builder-component.locked::after { content: "🔒"; position: absolute; right: 5px; top: 4px; font-size: 10px; z-index: 8; }
|
||
.builder-component.dragging { cursor: grabbing; }
|
||
.component-shell { width: 100%; height: 100%; overflow: hidden; }
|
||
.component-tag { position: absolute; top: -10px; left: 8px; z-index: 5; max-width: calc(100% - 16px); padding: 2px 7px; color: #9eb4d0; background: #111c2c; border: 1px solid #36506d; border-radius: 999px; font-size: 9px; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||
.resize-handle { position: absolute; right: -5px; bottom: -5px; width: 12px; height: 12px; z-index: 6; border: 2px solid #08101b; border-radius: 3px; background: var(--accent-2); cursor: nwse-resize; }
|
||
.snap-guide { position: absolute; z-index: 999; pointer-events: none; background: #ff4fd8; box-shadow: 0 0 8px rgba(255,79,216,.65); }
|
||
.snap-guide.horizontal { left: 0; right: 0; height: 1px; }
|
||
.snap-guide.vertical { top: 0; bottom: 0; width: 1px; }
|
||
|
||
.data-inspector { margin-top: 10px; border: 1px solid var(--line); border-radius: 10px; background: #0b1320; }
|
||
.data-inspector summary { padding: 10px 12px; color: #acbdd1; cursor: pointer; }
|
||
.data-inspector-grid { display: grid; grid-template-columns: 1fr 280px; border-top: 1px solid var(--line); }
|
||
.data-inspector pre { margin: 0; max-height: 310px; overflow: auto; padding: 12px; color: #9cebd8; font-size: 11px; }
|
||
.data-inspector-grid > div { border-left: 1px solid var(--line); padding: 12px; }
|
||
.mini-heading { color: #a8b8ce; font-size: 11px; font-weight: 800; text-transform: uppercase; }
|
||
.data-paths { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; max-height: 280px; overflow: auto; }
|
||
.data-paths button { padding: 4px 7px; color: #b9cbe1; background: #152035; border: 1px solid var(--line); border-radius: 7px; font-size: 10px; }
|
||
|
||
.type-pill { padding: 3px 8px; color: #9cdcca; border: 1px solid rgba(72,223,189,.25); border-radius: 999px; background: rgba(72,223,189,.06); font-size: 10px; }
|
||
.empty-state { margin-top: 12px; padding: 28px 12px; color: var(--muted); text-align: center; border: 1px dashed var(--line); border-radius: 10px; }
|
||
.inspector { display: grid; gap: 12px; margin-top: 12px; }
|
||
.inspector-group { display: grid; gap: 9px; padding: 11px; border: 1px solid var(--line); border-radius: 10px; background: rgba(12,20,33,.7); }
|
||
.inspector-group-title { color: #95a9c3; font-size: 10px; font-weight: 850; text-transform: uppercase; letter-spacing: .08em; }
|
||
.field { display: grid; gap: 5px; }
|
||
.field > label { color: #afbed2; font-size: 11px; }
|
||
.field small { color: #7186a2; font-size: 10px; line-height: 1.35; }
|
||
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
|
||
.tab-checks { display: flex; flex-wrap: wrap; gap: 6px; }
|
||
.tab-check { display: inline-flex; align-items: center; gap: 5px; padding: 5px 7px; border: 1px solid var(--line); border-radius: 8px; color: #aebed2; background: #111b2a; font-size: 10px; }
|
||
|
||
/* Runtime and rendered controls */
|
||
.runtime-view { width: 100%; height: 100vh; min-height: 0; display: flex; flex-direction: column; overflow: hidden; background: #080d15; }
|
||
.runtime-topbar { min-height: 70px; display: grid; grid-template-columns: minmax(160px, .55fr) minmax(220px, 1fr) max-content; align-items: center; column-gap: 15px; row-gap: 8px; flex: 0 0 auto; padding: 9px 18px 0; border-bottom: 1px solid var(--line); background: rgba(8,13,21,.97); position: sticky; top: 0; z-index: 30; backdrop-filter: blur(16px); }
|
||
.runtime-actions { flex-wrap: nowrap; white-space: nowrap; }
|
||
.runtime-actions > .hockey-selected-chip { display: none !important; }
|
||
.runtime-topbar > div:first-child .eyebrow { font-size: 8px; }
|
||
.runtime-topbar > div:first-child #runtimeTitle { font-size: 14px; }
|
||
.runtime-tabs { display: flex; justify-content: center; gap: 7px; flex-wrap: wrap; }
|
||
.runtime-tab { min-height: 35px; padding: 0 13px; color: #9dafc7; background: #141f31; border: 1px solid var(--line); border-radius: 9px; }
|
||
.runtime-tab.active { color: #06130f; background: var(--accent); border-color: transparent; font-weight: 800; }
|
||
.runtime-viewport { min-height: 0; display: flex; align-items: center; justify-content: center; flex: 1 1 auto; overflow: hidden; padding: 10px; }
|
||
.runtime-stage { position: relative; margin: 0 auto; transform-origin: top left; overflow: hidden; box-shadow: 0 18px 70px rgba(0,0,0,.36); }
|
||
.runtime-component { position: absolute; overflow: hidden; }
|
||
|
||
.ui-box { width: 100%; height: 100%; overflow: hidden; }
|
||
.ui-container, .ui-card { width: 100%; height: 100%; border: 1px solid #26364d; border-radius: 12px; background: #111b2b; }
|
||
.ui-card { padding: 14px; }
|
||
.ui-heading { width: 100%; height: 100%; display: flex; align-items: center; font-size: 25px; font-weight: 850; line-height: 1.1; }
|
||
.ui-text { width: 100%; height: 100%; overflow: auto; line-height: 1.45; white-space: pre-wrap; }
|
||
.ui-data-text { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; padding: 12px; border: 1px solid #26364d; border-radius: 11px; background: rgba(17,27,43,.88); }
|
||
.ui-label { color: #8fa2bc; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
|
||
.ui-value { margin-top: 5px; font-size: 18px; font-weight: 760; overflow-wrap: anywhere; }
|
||
.ui-kpi { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; padding: 15px; border: 1px solid #2a3a51; border-radius: 12px; background: linear-gradient(145deg, #17243a, #101928); }
|
||
.ui-kpi .ui-value { margin-top: 9px; font-size: 28px; font-weight: 900; }
|
||
.ui-badge { display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 5px 10px; border-radius: 999px; color: #07120e; background: var(--accent); font-weight: 800; }
|
||
.ui-image { width: 100%; height: 100%; object-fit: cover; display: block; }
|
||
.ui-icon { width: 100%; height: 100%; display: grid; place-items: center; font-size: 38px; }
|
||
.ui-divider { width: 100%; height: 100%; display: flex; align-items: center; }
|
||
.ui-divider::after { content: ""; width: 100%; border-top: 1px solid #344760; }
|
||
.ui-spacer { width: 100%; height: 100%; border: 1px dashed rgba(130,151,180,.25); border-radius: 8px; }
|
||
.ui-progress { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; gap: 8px; }
|
||
.ui-progress-track { width: 100%; height: 12px; overflow: hidden; border-radius: 999px; background: #0b1320; border: 1px solid #28384e; }
|
||
.ui-progress-fill { height: 100%; background: linear-gradient(90deg, var(--accent-2), var(--accent)); }
|
||
.ui-alert { width: 100%; height: 100%; display: flex; align-items: center; padding: 12px 14px; border: 1px solid rgba(255,202,99,.36); border-radius: 11px; background: rgba(255,202,99,.08); }
|
||
.ui-list { margin: 0; padding: 12px 12px 12px 30px; width: 100%; height: 100%; overflow: auto; }
|
||
.ui-key-value { width: 100%; height: 100%; display: grid; grid-template-columns: minmax(90px,.6fr) 1fr; gap: 7px 12px; align-content: start; padding: 11px; overflow: auto; border: 1px solid #27374d; border-radius: 11px; background: #101927; }
|
||
.ui-key-value dt { color: #8396b0; }
|
||
.ui-key-value dd { margin: 0; font-weight: 700; }
|
||
|
||
.ui-table-wrap { width: 100%; height: 100%; overflow: auto; border: 1px solid #27374d; border-radius: 11px; background: #0c1421; }
|
||
.ui-table { width: 100%; border-collapse: collapse; min-width: 460px; }
|
||
.ui-table th, .ui-table td { padding: 10px 12px; border-bottom: 1px solid #202e42; text-align: left; white-space: nowrap; }
|
||
.ui-table th { position: sticky; top: 0; z-index: 1; color: #9db0c9; background: #151f31; font-size: 10px; text-transform: uppercase; letter-spacing: .06em; }
|
||
.ui-table tbody tr:hover { background: rgba(67,169,255,.06); }
|
||
.ui-cards { width: 100%; height: 100%; display: grid; grid-template-columns: repeat(auto-fit,minmax(150px,1fr)); gap: 9px; overflow: auto; }
|
||
.ui-repeat-card { padding: 11px; border: 1px solid #293a51; border-radius: 10px; background: #111b2b; }
|
||
.ui-repeat-card strong { display: block; margin-bottom: 5px; }
|
||
.ui-repeat-card small { color: #8ca0bb; }
|
||
.ui-chart { width: 100%; height: 100%; display: flex; align-items: flex-end; gap: 9px; padding: 12px; border: 1px solid #27374d; border-radius: 11px; background: #0e1725; }
|
||
.ui-bar-item { min-width: 34px; flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 6px; }
|
||
.ui-bar { width: min(42px,75%); min-height: 2px; border-radius: 6px 6px 2px 2px; background: linear-gradient(180deg, var(--accent), var(--accent-2)); }
|
||
.ui-bar-label { color: #8ea2bc; font-size: 10px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||
.ui-line-chart { width: 100%; height: 100%; border: 1px solid #27374d; border-radius: 11px; background: #0e1725; }
|
||
.ui-json { width: 100%; height: 100%; margin: 0; overflow: auto; padding: 11px; color: #9cebd8; border: 1px solid #27374d; border-radius: 11px; background: #0a111c; font-size: 11px; }
|
||
|
||
.ui-button, .ui-link-button { width: 100%; height: 100%; display: inline-flex; align-items: center; justify-content: center; padding: 0 15px; border: 1px solid transparent; border-radius: 10px; color: #06130f; background: linear-gradient(135deg, var(--accent), #9cf8e2); font-weight: 850; text-decoration: none; }
|
||
.ui-button.secondary, .ui-link-button.secondary { color: var(--text); border-color: #33465f; background: #172235; }
|
||
.ui-button-group { width: 100%; height: 100%; display: flex; gap: 7px; }
|
||
.ui-button-group button { flex: 1; color: #dce7f5; background: #172235; border: 1px solid #30425b; border-radius: 9px; }
|
||
.ui-field { width: 100%; height: 100%; display: flex; flex-direction: column; gap: 6px; }
|
||
.ui-field > label { color: #9cafc7; font-size: 11px; }
|
||
.ui-field input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), .ui-field select, .ui-field textarea { min-height: 38px; flex: 1; }
|
||
.ui-field textarea { resize: none; }
|
||
.ui-check-field { width: 100%; height: 100%; display: flex; align-items: center; gap: 9px; padding: 9px 11px; border: 1px solid #293a51; border-radius: 10px; background: #111b2b; }
|
||
.ui-switch { position: relative; width: 42px; height: 23px; flex: none; }
|
||
.ui-switch input { opacity: 0; width: 0; height: 0; }
|
||
.ui-switch-track { position: absolute; inset: 0; border-radius: 999px; background: #34445a; transition: .16s; }
|
||
.ui-switch-track::after { content: ""; position: absolute; width: 17px; height: 17px; left: 3px; top: 3px; border-radius: 50%; background: white; transition: .16s; }
|
||
.ui-switch input:checked + .ui-switch-track { background: var(--accent); }
|
||
.ui-switch input:checked + .ui-switch-track::after { transform: translateX(19px); }
|
||
.ui-radio-group { width: 100%; height: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 9px; overflow: auto; }
|
||
.ui-radio-option { display: inline-flex; align-items: center; gap: 5px; }
|
||
.ui-accordion { width: 100%; height: 100%; border: 1px solid #293a51; border-radius: 10px; overflow: hidden; background: #111b2b; }
|
||
.ui-accordion button { width: 100%; min-height: 39px; padding: 0 12px; color: #dce7f5; background: #172235; border: 0; text-align: left; }
|
||
.ui-accordion-body { padding: 11px; overflow: auto; }
|
||
.ui-breadcrumb { width: 100%; height: 100%; display: flex; align-items: center; gap: 8px; color: #91a4bd; overflow: hidden; }
|
||
.ui-breadcrumb strong { color: #e3edf9; }
|
||
.ui-pagination { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; gap: 6px; }
|
||
.ui-pagination button { width: 34px; height: 34px; color: #dbe7f5; background: #172235; border: 1px solid #30425b; border-radius: 8px; }
|
||
.ui-pagination button.active { color: #07130f; background: var(--accent); border-color: transparent; }
|
||
.ui-tab-bar { width: 100%; height: 100%; display: flex; align-items: center; gap: 7px; padding: 5px; border: 1px solid #293a51; border-radius: 11px; background: #111b2b; overflow: auto; }
|
||
.ui-tab-bar button { min-height: 34px; padding: 0 12px; color: #91a4bd; background: transparent; border: 0; border-radius: 8px; white-space: nowrap; }
|
||
.ui-tab-bar button.active { color: #07130f; background: var(--accent); font-weight: 800; }
|
||
|
||
.modal-backdrop { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 20px; background: rgba(2,6,12,.75); backdrop-filter: blur(6px); }
|
||
.modal-card { width: min(560px,100%); max-height: 80vh; overflow: auto; padding: 18px; border: 1px solid #344861; border-radius: 14px; background: #111b2b; box-shadow: 0 24px 80px rgba(0,0,0,.5); }
|
||
.modal-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 13px; }
|
||
.modal-head button { width: 32px; height: 32px; color: #dbe7f5; background: #172235; border: 1px solid #30425b; border-radius: 8px; }
|
||
.backup-list { display: grid; gap: 8px; }
|
||
.backup-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; padding: 9px 10px; border: 1px solid #293a51; border-radius: 9px; background: #0c1421; }
|
||
.backup-row small { display: block; color: #8498b2; }
|
||
|
||
.toast { position: fixed; right: 18px; bottom: 18px; z-index: 2000; max-width: 370px; padding: 12px 15px; color: #07130f; background: var(--accent); border-radius: 10px; font-weight: 800; transform: translateY(90px); opacity: 0; transition: .2s ease; }
|
||
.toast.show { transform: translateY(0); opacity: 1; }
|
||
|
||
@media (max-width: 1320px) {
|
||
.editor-shell { grid-template-columns: 310px minmax(500px,1fr); }
|
||
.right-sidebar { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--line); max-height: none; position: static; }
|
||
}
|
||
@media (max-width: 820px) {
|
||
.topbar { align-items: flex-start; flex-direction: column; position: static; }
|
||
.project-name { width: min(100%,370px); }
|
||
.top-actions { justify-content: flex-start; }
|
||
.editor-shell { display: block; }
|
||
.panel-scroll { position: static; max-height: none; }
|
||
.left-sidebar { border-right: 0; border-bottom: 1px solid var(--line); }
|
||
.workspace-toolbar { align-items: flex-start; flex-direction: column; }
|
||
.runtime-topbar { display: flex; flex-direction: column; align-items: flex-start; position: relative; }
|
||
.runtime-tabs { justify-content: flex-start; }
|
||
.runtime-actions { width: 100%; justify-content: flex-start; overflow-x: auto; }
|
||
.data-inspector-grid { display: block; }
|
||
.data-inspector-grid > div { border-left: 0; border-top: 1px solid var(--line); }
|
||
}
|
||
.runtime-sizer { position: relative; margin: 0 auto; }
|
||
.canvas-settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
|
||
.canvas-settings-grid label { display: grid; gap: 4px; color: #91a4bd; font-size: 10px; }
|
||
.canvas-settings-grid input { padding: 7px; }
|
||
.canvas-settings-grid .canvas-background { grid-column: 1 / -1; }
|
||
|
||
|
||
/* ===== UI Builder v7: unified controls, nesting, states, triggers and CSS popovers ===== */
|
||
:root {
|
||
--control-bg: #0a1321;
|
||
--control-bg-hover: #101c2e;
|
||
--control-border: #2a3b53;
|
||
--control-border-hover: #486785;
|
||
--control-height: 38px;
|
||
--scroll-thumb: #344b68;
|
||
--scroll-thumb-hover: #466789;
|
||
--scroll-track: #0a111c;
|
||
}
|
||
|
||
/* Scrollbars */
|
||
* {
|
||
scrollbar-width: thin;
|
||
scrollbar-color: var(--scroll-thumb) var(--scroll-track);
|
||
}
|
||
*::-webkit-scrollbar { width: 11px; height: 11px; }
|
||
*::-webkit-scrollbar-track { background: var(--scroll-track); border-radius: 999px; }
|
||
*::-webkit-scrollbar-thumb {
|
||
background: linear-gradient(180deg, #3b5574, #2a3f59);
|
||
border: 2px solid var(--scroll-track);
|
||
border-radius: 999px;
|
||
}
|
||
*::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #52779f, #385674); }
|
||
*::-webkit-scrollbar-corner { background: var(--scroll-track); }
|
||
|
||
.left-sidebar { min-width: 0; }
|
||
.component-library { padding: 0 15px 28px; }
|
||
.component-category-grid { gap: 9px; }
|
||
.component-add {
|
||
min-height: 78px;
|
||
grid-template-columns: 30px minmax(0, 1fr);
|
||
grid-template-rows: auto auto;
|
||
justify-content: initial;
|
||
align-content: center;
|
||
column-gap: 9px;
|
||
padding: 10px 11px;
|
||
border-style: solid;
|
||
background: linear-gradient(145deg, #141f31, #101927);
|
||
}
|
||
.component-add .component-icon {
|
||
grid-row: 1 / 3;
|
||
width: 28px;
|
||
height: 28px;
|
||
display: grid;
|
||
place-items: center;
|
||
border: 1px solid rgba(72,223,189,.2);
|
||
border-radius: 8px;
|
||
background: rgba(72,223,189,.06);
|
||
font-size: 17px;
|
||
}
|
||
.component-add strong { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||
.component-add small { font-size: 10px; line-height: 1.3; }
|
||
|
||
/* Unified base controls */
|
||
input[type="text"],
|
||
input[type="search"],
|
||
input[type="number"],
|
||
input[type="date"],
|
||
input[type="time"],
|
||
input[type="datetime-local"],
|
||
input[type="email"],
|
||
input[type="url"],
|
||
input[type="password"],
|
||
select,
|
||
textarea {
|
||
min-height: var(--control-height);
|
||
color: var(--text);
|
||
background: linear-gradient(180deg, #0c1625, var(--control-bg));
|
||
border: 1px solid var(--control-border);
|
||
border-radius: 9px;
|
||
padding: 8px 10px;
|
||
box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
|
||
transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
|
||
}
|
||
input:hover, select:hover, textarea:hover { border-color: var(--control-border-hover); }
|
||
input:focus, select:focus, textarea:focus {
|
||
border-color: var(--accent-2);
|
||
box-shadow: 0 0 0 3px rgba(67,169,255,.12), inset 0 1px 0 rgba(255,255,255,.035);
|
||
}
|
||
input::placeholder, textarea::placeholder { color: #657b98; }
|
||
input:disabled, select:disabled, textarea:disabled, button:disabled {
|
||
opacity: .5;
|
||
cursor: not-allowed;
|
||
}
|
||
|
||
/* Styled selects */
|
||
select {
|
||
appearance: none;
|
||
-webkit-appearance: none;
|
||
padding-right: 38px;
|
||
background-image:
|
||
linear-gradient(45deg, transparent 50%, #8fa7c4 50%),
|
||
linear-gradient(135deg, #8fa7c4 50%, transparent 50%),
|
||
linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
|
||
background-position:
|
||
calc(100% - 17px) calc(50% - 2px),
|
||
calc(100% - 12px) calc(50% - 2px),
|
||
0 0;
|
||
background-size: 5px 5px, 5px 5px, 100% 100%;
|
||
background-repeat: no-repeat;
|
||
}
|
||
select[multiple] {
|
||
min-height: 96px;
|
||
padding-right: 9px;
|
||
background-image: none;
|
||
}
|
||
select option {
|
||
color: #eaf2ff;
|
||
background: #101a2a;
|
||
}
|
||
|
||
/* Custom number steppers */
|
||
input[type="number"] {
|
||
appearance: textfield;
|
||
-moz-appearance: textfield;
|
||
}
|
||
input[type="number"]::-webkit-outer-spin-button,
|
||
input[type="number"]::-webkit-inner-spin-button {
|
||
margin: 0;
|
||
-webkit-appearance: none;
|
||
}
|
||
.css-number-control {
|
||
width: 100%;
|
||
min-height: var(--control-height);
|
||
display: grid;
|
||
grid-template-columns: minmax(0,1fr) 29px;
|
||
grid-template-rows: 1fr 1fr;
|
||
overflow: hidden;
|
||
border: 1px solid var(--control-border);
|
||
border-radius: 9px;
|
||
background: var(--control-bg);
|
||
transition: border-color .16s ease, box-shadow .16s ease;
|
||
}
|
||
.css-number-control:focus-within {
|
||
border-color: var(--accent-2);
|
||
box-shadow: 0 0 0 3px rgba(67,169,255,.12);
|
||
}
|
||
.css-number-control > input[type="number"] {
|
||
grid-row: 1 / 3;
|
||
min-width: 0;
|
||
height: 100%;
|
||
min-height: 36px;
|
||
border: 0;
|
||
border-radius: 0;
|
||
box-shadow: none;
|
||
}
|
||
.css-number-control > input[type="number"]:focus { box-shadow: none; }
|
||
.number-step {
|
||
width: 29px;
|
||
min-height: 0;
|
||
padding: 0;
|
||
color: #9fb2ca;
|
||
background: #142136;
|
||
border: 0;
|
||
border-left: 1px solid var(--control-border);
|
||
font-size: 9px;
|
||
line-height: 1;
|
||
}
|
||
.number-step:first-of-type { border-bottom: 1px solid var(--control-border); }
|
||
.number-step:hover { color: var(--accent); background: #1a2a42; }
|
||
|
||
/* Checkbox and radio styling */
|
||
input[type="checkbox"]:not(.switch-native),
|
||
input[type="radio"] {
|
||
appearance: none;
|
||
-webkit-appearance: none;
|
||
width: 18px;
|
||
height: 18px;
|
||
min-width: 18px;
|
||
margin: 0;
|
||
display: inline-grid;
|
||
place-content: center;
|
||
color: #06130f;
|
||
background: #0b1422;
|
||
border: 1px solid #3a4d67;
|
||
box-shadow: inset 0 1px 2px rgba(0,0,0,.28);
|
||
cursor: pointer;
|
||
transition: .15s ease;
|
||
}
|
||
input[type="checkbox"]:not(.switch-native) { border-radius: 5px; }
|
||
input[type="radio"] { border-radius: 50%; }
|
||
input[type="checkbox"]:not(.switch-native)::before {
|
||
content: "✓";
|
||
font-size: 12px;
|
||
font-weight: 950;
|
||
transform: scale(0);
|
||
transition: transform .12s ease;
|
||
}
|
||
input[type="radio"]::before {
|
||
content: "";
|
||
width: 8px;
|
||
height: 8px;
|
||
border-radius: 50%;
|
||
background: #06130f;
|
||
transform: scale(0);
|
||
transition: transform .12s ease;
|
||
}
|
||
input[type="checkbox"]:not(.switch-native):checked,
|
||
input[type="radio"]:checked {
|
||
border-color: transparent;
|
||
background: var(--accent);
|
||
}
|
||
input[type="checkbox"]:not(.switch-native):checked::before,
|
||
input[type="radio"]:checked::before { transform: scale(1); }
|
||
input[type="checkbox"]:not(.switch-native):focus-visible,
|
||
input[type="radio"]:focus-visible { outline: 3px solid rgba(67,169,255,.2); outline-offset: 2px; }
|
||
|
||
/* Range */
|
||
input[type="range"] {
|
||
appearance: none;
|
||
width: 100%;
|
||
height: 20px;
|
||
padding: 0;
|
||
background: transparent;
|
||
}
|
||
input[type="range"]::-webkit-slider-runnable-track {
|
||
height: 7px;
|
||
border: 1px solid #31445e;
|
||
border-radius: 999px;
|
||
background: linear-gradient(90deg, var(--accent-2), #23334a);
|
||
}
|
||
input[type="range"]::-webkit-slider-thumb {
|
||
appearance: none;
|
||
width: 19px;
|
||
height: 19px;
|
||
margin-top: -7px;
|
||
border: 3px solid #0c1523;
|
||
border-radius: 50%;
|
||
background: var(--accent);
|
||
box-shadow: 0 2px 8px rgba(0,0,0,.35);
|
||
}
|
||
input[type="range"]::-moz-range-track {
|
||
height: 7px;
|
||
border: 1px solid #31445e;
|
||
border-radius: 999px;
|
||
background: linear-gradient(90deg, var(--accent-2), #23334a);
|
||
}
|
||
input[type="range"]::-moz-range-thumb {
|
||
width: 15px;
|
||
height: 15px;
|
||
border: 3px solid #0c1523;
|
||
border-radius: 50%;
|
||
background: var(--accent);
|
||
}
|
||
|
||
/* Color picker: native picker + editable CSS value */
|
||
.color-control {
|
||
width: 100%;
|
||
display: grid;
|
||
grid-template-columns: 42px minmax(0,1fr) 30px;
|
||
align-items: stretch;
|
||
overflow: hidden;
|
||
border: 1px solid var(--control-border);
|
||
border-radius: 9px;
|
||
background: var(--control-bg);
|
||
}
|
||
.color-control:focus-within {
|
||
border-color: var(--accent-2);
|
||
box-shadow: 0 0 0 3px rgba(67,169,255,.12);
|
||
}
|
||
.color-control input[type="color"] {
|
||
width: 42px;
|
||
min-height: 38px;
|
||
padding: 5px;
|
||
border: 0;
|
||
border-right: 1px solid var(--control-border);
|
||
border-radius: 0;
|
||
background: #111d2e;
|
||
cursor: pointer;
|
||
}
|
||
.color-control input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
|
||
.color-control input[type="color"]::-webkit-color-swatch {
|
||
border: 1px solid rgba(255,255,255,.18);
|
||
border-radius: 6px;
|
||
}
|
||
.color-control input[type="color"]::-moz-color-swatch {
|
||
border: 1px solid rgba(255,255,255,.18);
|
||
border-radius: 6px;
|
||
}
|
||
.color-control input[type="text"] {
|
||
min-width: 0;
|
||
min-height: 38px;
|
||
border: 0;
|
||
border-radius: 0;
|
||
box-shadow: none;
|
||
}
|
||
.color-control input[type="text"]:focus { box-shadow: none; }
|
||
.color-clear {
|
||
width: 30px;
|
||
min-height: 38px;
|
||
color: #8498b2;
|
||
background: #131f31;
|
||
border: 0;
|
||
border-left: 1px solid var(--control-border);
|
||
}
|
||
.color-clear:hover { color: var(--danger); background: #1b263a; }
|
||
.color-control-static { margin-top: 1px; }
|
||
.canvas-settings-grid .canvas-background { grid-column: 1 / -1; }
|
||
|
||
/* File inputs */
|
||
input[type="file"] {
|
||
width: 100%;
|
||
min-height: 40px;
|
||
padding: 5px;
|
||
color: #9fb1c8;
|
||
border: 1px dashed #39516f;
|
||
border-radius: 9px;
|
||
background: #0b1422;
|
||
}
|
||
input[type="file"]::file-selector-button {
|
||
min-height: 28px;
|
||
margin-right: 9px;
|
||
padding: 0 10px;
|
||
color: #07130f;
|
||
border: 0;
|
||
border-radius: 7px;
|
||
background: var(--accent);
|
||
font-weight: 800;
|
||
cursor: pointer;
|
||
}
|
||
|
||
/* Date/time calendar indicators */
|
||
input[type="date"],
|
||
input[type="time"],
|
||
input[type="datetime-local"] { color-scheme: dark; }
|
||
input[type="date"]::-webkit-calendar-picker-indicator,
|
||
input[type="time"]::-webkit-calendar-picker-indicator,
|
||
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
|
||
opacity: .75;
|
||
cursor: pointer;
|
||
filter: invert(.85) sepia(.15) saturate(.7);
|
||
}
|
||
|
||
/* Parent/child container binding */
|
||
.builder-component.is-container {
|
||
outline: 1px dashed rgba(72,223,189,.22);
|
||
outline-offset: -4px;
|
||
}
|
||
.builder-component.has-parent .component-tag::before {
|
||
content: "↳ ";
|
||
color: var(--accent);
|
||
}
|
||
.builder-component.drop-target {
|
||
border-color: var(--accent) !important;
|
||
box-shadow: 0 0 0 3px rgba(72,223,189,.2), inset 0 0 0 2px rgba(72,223,189,.18);
|
||
}
|
||
.builder-component.drop-target::before {
|
||
content: "ПРИВЯЗАТЬ К КОНТЕЙНЕРУ";
|
||
position: absolute;
|
||
inset: 8px;
|
||
z-index: 30;
|
||
display: grid;
|
||
place-items: center;
|
||
color: #cafff2;
|
||
border: 1px dashed rgba(72,223,189,.7);
|
||
border-radius: 8px;
|
||
background: rgba(5,18,15,.48);
|
||
font-size: 10px;
|
||
font-weight: 900;
|
||
letter-spacing: .08em;
|
||
pointer-events: none;
|
||
}
|
||
.parent-info {
|
||
display: grid;
|
||
gap: 7px;
|
||
padding: 9px;
|
||
border: 1px solid rgba(72,223,189,.18);
|
||
border-radius: 9px;
|
||
background: rgba(72,223,189,.045);
|
||
}
|
||
.parent-badge {
|
||
color: #8fe8d3;
|
||
font-size: 10px;
|
||
}
|
||
.container-help {
|
||
margin: 0;
|
||
color: #748aa7;
|
||
font-size: 10px;
|
||
line-height: 1.4;
|
||
}
|
||
|
||
/* Rendered color input */
|
||
.ui-color-control {
|
||
width: 100%;
|
||
min-height: 38px;
|
||
display: grid;
|
||
grid-template-columns: 52px minmax(0,1fr);
|
||
overflow: hidden;
|
||
border: 1px solid var(--control-border);
|
||
border-radius: 9px;
|
||
background: var(--control-bg);
|
||
}
|
||
.ui-color-control input[type="color"] {
|
||
width: 52px;
|
||
height: 100%;
|
||
min-height: 38px;
|
||
padding: 5px;
|
||
border: 0;
|
||
border-right: 1px solid var(--control-border);
|
||
background: #111d2e;
|
||
}
|
||
.ui-color-value {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 0 10px;
|
||
color: #b9c9dc;
|
||
font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
|
||
font-size: 12px;
|
||
}
|
||
|
||
/* Make field controls align consistently */
|
||
.field > .css-number-control,
|
||
.field > .color-control { width: 100%; }
|
||
.ui-field > .css-number-control,
|
||
.ui-field > .select-control,
|
||
.ui-field > .ui-color-control { flex: 1; min-height: 38px; }
|
||
.ui-check-field { cursor: default; }
|
||
.ui-radio-option { padding: 5px 8px; border: 1px solid #2d4058; border-radius: 8px; background: #111b2b; }
|
||
|
||
/* Wider menu responsive tuning */
|
||
@media (max-width: 1320px) {
|
||
.component-category-grid { grid-template-columns: 1fr; }
|
||
}
|
||
@media (max-width: 900px) {
|
||
.component-category-grid { grid-template-columns: 1fr 1fr; }
|
||
}
|
||
|
||
/* v5: interaction states and trigger editor */
|
||
.btn-count {
|
||
min-width: 20px;
|
||
height: 20px;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-left: 5px;
|
||
padding: 0 5px;
|
||
border-radius: 999px;
|
||
color: #07130f;
|
||
background: var(--accent);
|
||
font-size: 10px;
|
||
font-weight: 900;
|
||
}
|
||
|
||
.interaction-state-preview {
|
||
max-height: 150px;
|
||
overflow: auto;
|
||
margin: 0;
|
||
padding: 10px;
|
||
color: #93ead6;
|
||
border: 1px solid #263a50;
|
||
border-radius: 9px;
|
||
background: #09111c;
|
||
font-size: 11px;
|
||
}
|
||
|
||
.trigger-open-button { width: 100%; }
|
||
|
||
.ui-box[data-action-id] { --state-ring: rgba(72,223,189,.58); }
|
||
.ui-box[data-action-id].interaction-active > *,
|
||
.ui-box[data-action-id] .interaction-active {
|
||
box-shadow: 0 0 0 2px var(--state-ring), 0 0 24px rgba(72,223,189,.18);
|
||
}
|
||
.ui-box[data-action-id].interaction-pressed > * { transform: translateY(1px) scale(.992); }
|
||
.ui-box[data-state="true"] .ui-button,
|
||
.ui-box[data-state="true"] .ui-link-button { filter: brightness(1.08); }
|
||
.ui-button-group button.interaction-active,
|
||
.ui-tab-bar button.interaction-active,
|
||
.ui-pagination button.interaction-active {
|
||
color: #07130f;
|
||
border-color: transparent;
|
||
background: var(--accent);
|
||
font-weight: 850;
|
||
}
|
||
|
||
.trigger-editor { display: grid; gap: 12px; }
|
||
.trigger-help {
|
||
padding: 12px 14px;
|
||
border: 1px solid rgba(72,223,189,.24);
|
||
border-radius: 11px;
|
||
background: rgba(72,223,189,.06);
|
||
}
|
||
.trigger-help p { margin: 5px 0 0; color: #91a5be; font-size: 12px; }
|
||
.trigger-toolbar {
|
||
position: sticky;
|
||
top: -18px;
|
||
z-index: 5;
|
||
display: grid;
|
||
grid-template-columns: minmax(220px,1fr) auto;
|
||
gap: 9px;
|
||
padding: 10px 0;
|
||
background: #111b2b;
|
||
}
|
||
.trigger-list { display: grid; gap: 12px; }
|
||
.trigger-card {
|
||
overflow: hidden;
|
||
border: 1px solid #30445d;
|
||
border-radius: 12px;
|
||
background: #0c1522;
|
||
}
|
||
.trigger-card-head {
|
||
display: grid;
|
||
grid-template-columns: auto minmax(180px,1fr) auto;
|
||
align-items: center;
|
||
gap: 9px;
|
||
padding: 10px;
|
||
border-bottom: 1px solid #26394f;
|
||
background: #142033;
|
||
}
|
||
.trigger-enabled { display: inline-flex; align-items: center; gap: 6px; color: #b8c7da; font-size: 12px; white-space: nowrap; }
|
||
.trigger-flow {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, minmax(0,1fr));
|
||
gap: 10px;
|
||
padding: 10px;
|
||
}
|
||
.trigger-flow section {
|
||
min-width: 0;
|
||
padding: 10px;
|
||
border: 1px solid #24364c;
|
||
border-radius: 10px;
|
||
background: #101a29;
|
||
}
|
||
.trigger-flow h4 { margin: 0 0 9px; color: #dfeafa; font-size: 12px; }
|
||
.trigger-flow h4 small { color: #788ca7; font-weight: 400; }
|
||
.trigger-flow label { display: grid; gap: 5px; margin-top: 8px; color: #91a6c0; font-size: 10px; }
|
||
.trigger-flow input,
|
||
.trigger-flow select,
|
||
.trigger-flow textarea { width: 100%; }
|
||
.trigger-card-foot {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
gap: 12px;
|
||
padding: 8px 11px;
|
||
color: #788da8;
|
||
border-top: 1px solid #26394f;
|
||
font-size: 10px;
|
||
}
|
||
.trigger-card-foot code { color: #8be8d2; }
|
||
|
||
.modal-card:has(.trigger-editor) { width: min(1180px, 96vw); max-height: 90vh; }
|
||
|
||
@media (max-width: 980px) {
|
||
.trigger-flow { grid-template-columns: 1fr; }
|
||
.trigger-card-foot { flex-direction: column; }
|
||
}
|
||
|
||
/* ==========================================================================
|
||
CSS popover controls — dropdowns, color picker, date and time picker
|
||
Native browser panels are kept only as hidden value sources so every panel
|
||
has the same visual language in Chromium, Firefox and embedded web views.
|
||
========================================================================== */
|
||
.native-control-source {
|
||
position: absolute !important;
|
||
width: 1px !important;
|
||
height: 1px !important;
|
||
min-width: 0 !important;
|
||
min-height: 0 !important;
|
||
margin: 0 !important;
|
||
padding: 0 !important;
|
||
opacity: 0 !important;
|
||
pointer-events: none !important;
|
||
clip-path: inset(50%) !important;
|
||
}
|
||
|
||
.control-popover {
|
||
position: fixed;
|
||
z-index: 10000;
|
||
overflow: hidden;
|
||
color: var(--text);
|
||
border: 1px solid #334a66;
|
||
border-radius: 13px;
|
||
background:
|
||
linear-gradient(145deg, rgba(22,34,53,.99), rgba(10,18,31,.99));
|
||
box-shadow: 0 22px 70px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.025) inset;
|
||
backdrop-filter: blur(18px);
|
||
transform-origin: top left;
|
||
animation: control-popover-in .13s ease-out;
|
||
}
|
||
@keyframes control-popover-in {
|
||
from { opacity: 0; transform: translateY(-5px) scale(.985); }
|
||
to { opacity: 1; transform: translateY(0) scale(1); }
|
||
}
|
||
.control-popover-search { padding: 9px; border-bottom: 1px solid #263a52; }
|
||
.control-popover-search input { width: 100%; min-height: 36px; }
|
||
.control-popover-empty { padding: 18px; color: var(--muted); text-align: center; font-size: 12px; }
|
||
.control-popover-footer {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
gap: 7px;
|
||
padding: 9px;
|
||
border-top: 1px solid #263a52;
|
||
background: rgba(7,14,25,.42);
|
||
}
|
||
.popover-btn {
|
||
min-height: 33px;
|
||
padding: 0 11px;
|
||
color: #c8d6e8;
|
||
border: 1px solid #314861;
|
||
border-radius: 8px;
|
||
background: #152237;
|
||
font-size: 12px;
|
||
}
|
||
.popover-btn:hover { border-color: #55799b; background: #1b2b43; }
|
||
.popover-btn.primary { color: #06130f; border-color: transparent; background: var(--accent); font-weight: 850; }
|
||
.popover-btn.secondary { color: #aabbd0; }
|
||
|
||
/* Custom dropdown */
|
||
.css-select-shell {
|
||
position: relative;
|
||
width: 100%;
|
||
min-width: 0;
|
||
display: inline-flex;
|
||
vertical-align: middle;
|
||
}
|
||
.field > .css-select-shell,
|
||
.ui-field > .css-select-shell,
|
||
.trigger-flow label > .css-select-shell { width: 100%; }
|
||
.inline-field > .css-select-shell { width: auto; min-width: 130px; flex: 0 1 auto; }
|
||
.inline-field.compact > .css-select-shell { min-width: 150px; }
|
||
.trigger-toolbar > .css-select-shell { width: 100%; }
|
||
.css-select-trigger {
|
||
width: 100%;
|
||
min-width: 0;
|
||
min-height: var(--control-height);
|
||
display: grid;
|
||
grid-template-columns: minmax(0,1fr) 28px;
|
||
align-items: center;
|
||
padding: 0 5px 0 11px;
|
||
color: var(--text);
|
||
text-align: left;
|
||
border: 1px solid var(--control-border);
|
||
border-radius: 9px;
|
||
background: linear-gradient(180deg, #0e1929, #0a1321);
|
||
box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
|
||
transition: .16s ease;
|
||
}
|
||
.css-select-trigger:hover { border-color: var(--control-border-hover); background: linear-gradient(180deg, #122036, #0c1727); }
|
||
.css-select-trigger:focus-visible,
|
||
.css-select-trigger.control-popover-open {
|
||
outline: none;
|
||
border-color: var(--accent-2);
|
||
box-shadow: 0 0 0 3px rgba(67,169,255,.12);
|
||
}
|
||
.css-select-trigger.is-empty .css-select-value { color: #657b98; }
|
||
.css-select-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||
.css-select-arrow {
|
||
width: 22px;
|
||
height: 22px;
|
||
display: grid;
|
||
place-items: center;
|
||
border-left: 1px solid rgba(67,86,112,.5);
|
||
}
|
||
.css-select-arrow::before {
|
||
content: "";
|
||
width: 7px;
|
||
height: 7px;
|
||
border-right: 2px solid #91a9c5;
|
||
border-bottom: 2px solid #91a9c5;
|
||
transform: translateY(-2px) rotate(45deg);
|
||
transition: transform .14s ease;
|
||
}
|
||
.css-select-trigger.control-popover-open .css-select-arrow::before { transform: translateY(2px) rotate(225deg); }
|
||
.css-select-options { max-height: min(330px, 48vh); overflow: auto; padding: 6px; }
|
||
.css-select-option {
|
||
width: 100%;
|
||
min-height: 37px;
|
||
display: grid;
|
||
grid-template-columns: 20px minmax(0,1fr);
|
||
align-items: center;
|
||
gap: 8px;
|
||
padding: 0 9px;
|
||
color: #c4d2e4;
|
||
text-align: left;
|
||
border: 0;
|
||
border-radius: 8px;
|
||
background: transparent;
|
||
}
|
||
.css-select-option:hover { color: #f4f8ff; background: rgba(67,169,255,.11); }
|
||
.css-select-option.selected { color: #eafff9; background: rgba(72,223,189,.10); }
|
||
.css-select-option:disabled { opacity: .38; }
|
||
.css-select-option-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||
.css-select-dot,
|
||
.css-select-check {
|
||
width: 16px;
|
||
height: 16px;
|
||
display: grid;
|
||
place-items: center;
|
||
border: 1px solid #415873;
|
||
background: #0a1422;
|
||
}
|
||
.css-select-dot { border-radius: 50%; }
|
||
.css-select-check { border-radius: 5px; }
|
||
.css-select-option.selected .css-select-dot { border: 5px solid var(--accent); }
|
||
.css-select-option.selected .css-select-check { color: #06130f; border-color: transparent; background: var(--accent); }
|
||
.css-select-option.selected .css-select-check::before { content: "✓"; font-size: 11px; font-weight: 950; }
|
||
|
||
/* Custom date / time */
|
||
.css-datetime-shell { position: relative; width: 100%; min-width: 0; display: inline-flex; }
|
||
.css-datetime-trigger {
|
||
width: 100%;
|
||
min-width: 0;
|
||
min-height: var(--control-height);
|
||
display: grid;
|
||
grid-template-columns: 30px minmax(0,1fr) 24px;
|
||
align-items: center;
|
||
padding: 0 7px;
|
||
color: var(--text);
|
||
text-align: left;
|
||
border: 1px solid var(--control-border);
|
||
border-radius: 9px;
|
||
background: linear-gradient(180deg, #0e1929, #0a1321);
|
||
transition: .16s ease;
|
||
}
|
||
.css-datetime-trigger:hover { border-color: var(--control-border-hover); background: #101d30; }
|
||
.css-datetime-trigger:focus-visible,
|
||
.css-datetime-trigger.control-popover-open { outline: none; border-color: var(--accent-2); box-shadow: 0 0 0 3px rgba(67,169,255,.12); }
|
||
.css-datetime-trigger.is-empty .css-datetime-value { color: #657b98; }
|
||
.css-datetime-icon { color: var(--accent); font-size: 16px; }
|
||
.css-datetime-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||
.css-datetime-arrow::before { content: "⌄"; color: #8fa8c5; font-size: 14px; }
|
||
.css-datetime-popover { width: 342px; }
|
||
.css-calendar { padding: 10px; }
|
||
.css-calendar-head {
|
||
min-height: 38px;
|
||
display: grid;
|
||
grid-template-columns: 34px minmax(0,1fr) 34px;
|
||
align-items: center;
|
||
gap: 7px;
|
||
margin-bottom: 7px;
|
||
}
|
||
.css-calendar-head strong { text-align: center; text-transform: capitalize; font-size: 13px; }
|
||
.css-calendar-head button {
|
||
width: 34px;
|
||
height: 34px;
|
||
color: #b9c9dc;
|
||
border: 1px solid #2c425c;
|
||
border-radius: 8px;
|
||
background: #142137;
|
||
font-size: 22px;
|
||
}
|
||
.css-calendar-head button:hover { color: var(--accent); border-color: #4b6c8c; }
|
||
.css-calendar-weekdays,
|
||
.css-calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
|
||
.css-calendar-weekdays { margin-bottom: 4px; }
|
||
.css-calendar-weekdays span { padding: 4px 0; color: #6f84a0; text-align: center; font-size: 10px; font-weight: 800; }
|
||
.css-calendar-day {
|
||
aspect-ratio: 1;
|
||
min-width: 0;
|
||
color: #c9d7e8;
|
||
border: 1px solid transparent;
|
||
border-radius: 8px;
|
||
background: transparent;
|
||
font-size: 12px;
|
||
}
|
||
.css-calendar-day:hover { color: #fff; border-color: #416185; background: rgba(67,169,255,.11); }
|
||
.css-calendar-day.outside { color: #52647b; }
|
||
.css-calendar-day.today { border-color: rgba(72,223,189,.55); color: #a8f6e3; }
|
||
.css-calendar-day.selected { color: #06130f; border-color: transparent; background: var(--accent); font-weight: 900; }
|
||
.css-time-panel { padding: 10px; border-top: 1px solid #263a52; }
|
||
.css-time-heading { margin-bottom: 8px; color: #8fa4bf; font-size: 10px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
|
||
.css-time-controls { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
|
||
.css-time-unit {
|
||
display: grid;
|
||
grid-template-columns: 30px minmax(46px,1fr) 30px;
|
||
grid-template-rows: auto 34px;
|
||
gap: 5px;
|
||
align-items: center;
|
||
padding: 8px;
|
||
border: 1px solid #2b405a;
|
||
border-radius: 10px;
|
||
background: #0d1828;
|
||
}
|
||
.css-time-unit > span { grid-column: 1 / -1; color: #7186a2; text-align: center; font-size: 9px; text-transform: uppercase; }
|
||
.css-time-unit button { width: 30px; height: 30px; color: #aec0d6; border: 1px solid #304761; border-radius: 7px; background: #16243a; }
|
||
.css-time-unit button:hover { color: var(--accent); border-color: #4d7297; }
|
||
.css-time-unit strong { color: #f0f6ff; text-align: center; font-size: 18px; font-variant-numeric: tabular-nums; }
|
||
|
||
/* Custom color picker — familiar default-like layout */
|
||
.css-color-trigger {
|
||
width: 42px;
|
||
min-width: 42px;
|
||
min-height: 38px;
|
||
position: relative;
|
||
display: grid;
|
||
place-items: center;
|
||
padding: 5px;
|
||
border: 0;
|
||
border-right: 1px solid var(--control-border);
|
||
border-radius: 0;
|
||
background: #111d2e;
|
||
}
|
||
.ui-color-control > .css-color-trigger { width: 52px; min-width: 52px; }
|
||
.css-color-trigger:hover { background: #19273b; }
|
||
.css-color-trigger:focus-visible,
|
||
.css-color-trigger.control-popover-open { outline: none; box-shadow: inset 0 0 0 2px var(--accent-2); }
|
||
.css-color-swatch {
|
||
width: 100%;
|
||
height: 100%;
|
||
min-height: 27px;
|
||
border: 1px solid rgba(255,255,255,.28);
|
||
border-radius: 6px;
|
||
box-shadow: 0 2px 7px rgba(0,0,0,.28);
|
||
}
|
||
.css-color-edit {
|
||
position: absolute;
|
||
right: 2px;
|
||
bottom: 1px;
|
||
width: 13px;
|
||
height: 13px;
|
||
display: grid;
|
||
place-items: center;
|
||
color: #06130f;
|
||
border-radius: 4px;
|
||
background: var(--accent);
|
||
font-size: 8px;
|
||
font-weight: 900;
|
||
}
|
||
.css-color-popover {
|
||
width: 378px;
|
||
overflow: hidden;
|
||
background: linear-gradient(180deg, #111d2e 0%, #0b1422 100%);
|
||
}
|
||
.css-color-head {
|
||
display: grid;
|
||
grid-template-columns: 58px minmax(0,1fr);
|
||
align-items: stretch;
|
||
gap: 10px;
|
||
padding: 11px;
|
||
border-bottom: 1px solid #263a52;
|
||
}
|
||
.css-color-preview {
|
||
min-height: 46px;
|
||
border: 1px solid rgba(255,255,255,.28);
|
||
border-radius: 10px;
|
||
box-shadow: 0 5px 16px rgba(0,0,0,.34), inset 0 0 0 1px rgba(0,0,0,.14);
|
||
}
|
||
.css-color-hex-field {
|
||
min-width: 0;
|
||
display: grid;
|
||
grid-template-columns: 38px minmax(0,1fr);
|
||
align-items: center;
|
||
overflow: hidden;
|
||
border: 1px solid #2b405a;
|
||
border-radius: 9px;
|
||
background: #0b1524;
|
||
}
|
||
.css-color-hex-field > span {
|
||
height: 100%;
|
||
display: grid;
|
||
place-items: center;
|
||
color: #7288a4;
|
||
border-right: 1px solid #2b405a;
|
||
background: #111d2e;
|
||
font-size: 9px;
|
||
font-weight: 900;
|
||
letter-spacing: .08em;
|
||
}
|
||
.css-color-hex-field input {
|
||
min-width: 0;
|
||
height: 100%;
|
||
border: 0 !important;
|
||
border-radius: 0 !important;
|
||
background: transparent !important;
|
||
box-shadow: none !important;
|
||
font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
|
||
font-size: 14px;
|
||
font-weight: 800;
|
||
letter-spacing: .04em;
|
||
text-transform: uppercase;
|
||
}
|
||
.css-color-hex-field input.invalid {
|
||
color: #ff8fa1;
|
||
background: rgba(255,102,125,.08) !important;
|
||
}
|
||
.css-color-workspace {
|
||
height: 218px;
|
||
display: grid;
|
||
grid-template-columns: minmax(0,1fr) 24px;
|
||
gap: 11px;
|
||
padding: 12px 12px 9px;
|
||
}
|
||
.css-color-sv,
|
||
.css-color-hue {
|
||
position: relative;
|
||
touch-action: none;
|
||
cursor: crosshair;
|
||
user-select: none;
|
||
}
|
||
.css-color-sv {
|
||
overflow: hidden;
|
||
border: 1px solid rgba(255,255,255,.22);
|
||
border-radius: 10px;
|
||
background:
|
||
linear-gradient(to top, #000, transparent),
|
||
linear-gradient(to right, #fff, transparent),
|
||
var(--picker-hue, #f00);
|
||
box-shadow: inset 0 0 0 1px rgba(0,0,0,.14), 0 4px 14px rgba(0,0,0,.24);
|
||
}
|
||
.css-color-sv:focus-visible,
|
||
.css-color-hue:focus-visible {
|
||
outline: none;
|
||
box-shadow: 0 0 0 3px rgba(67,169,255,.20), inset 0 0 0 1px rgba(255,255,255,.22);
|
||
}
|
||
.css-color-sv-cursor {
|
||
position: absolute;
|
||
width: 17px;
|
||
height: 17px;
|
||
border: 2px solid #fff;
|
||
border-radius: 50%;
|
||
box-shadow: 0 1px 4px rgba(0,0,0,.95), inset 0 0 0 1px rgba(0,0,0,.28);
|
||
transform: translate(-50%, -50%);
|
||
pointer-events: none;
|
||
}
|
||
.css-color-hue {
|
||
border: 1px solid rgba(255,255,255,.22);
|
||
border-radius: 999px;
|
||
background: linear-gradient(to bottom, #f00 0%, #ff0 16.66%, #0f0 33.33%, #0ff 50%, #00f 66.66%, #f0f 83.33%, #f00 100%);
|
||
box-shadow: inset 0 0 0 1px rgba(0,0,0,.15), 0 3px 12px rgba(0,0,0,.25);
|
||
cursor: ns-resize;
|
||
}
|
||
.css-color-hue-cursor {
|
||
position: absolute;
|
||
left: 50%;
|
||
width: 34px;
|
||
height: 8px;
|
||
border: 2px solid #fff;
|
||
border-radius: 999px;
|
||
background: rgba(10,18,30,.12);
|
||
box-shadow: 0 1px 5px rgba(0,0,0,.9);
|
||
transform: translate(-50%, -50%);
|
||
pointer-events: none;
|
||
}
|
||
.css-color-channels {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, minmax(0,1fr));
|
||
gap: 8px;
|
||
padding: 0 12px 11px;
|
||
}
|
||
.css-color-channel {
|
||
min-width: 0;
|
||
display: grid;
|
||
grid-template-columns: 28px minmax(0,1fr);
|
||
align-items: center;
|
||
overflow: hidden;
|
||
border: 1px solid #2b405a;
|
||
border-radius: 9px;
|
||
background: #0b1524;
|
||
}
|
||
.css-color-channel > span {
|
||
height: 100%;
|
||
display: grid;
|
||
place-items: center;
|
||
color: #7e93ae;
|
||
border-right: 1px solid #2b405a;
|
||
background: #111d2e;
|
||
font-size: 10px;
|
||
font-weight: 900;
|
||
}
|
||
.css-color-channel input[type="number"] {
|
||
min-width: 0;
|
||
height: 36px;
|
||
padding: 0 7px;
|
||
border: 0 !important;
|
||
border-radius: 0 !important;
|
||
background: transparent !important;
|
||
box-shadow: none !important;
|
||
text-align: center;
|
||
font-variant-numeric: tabular-nums;
|
||
}
|
||
.css-color-channel input[type="number"]::-webkit-inner-spin-button,
|
||
.css-color-channel input[type="number"]::-webkit-outer-spin-button {
|
||
opacity: .5;
|
||
}
|
||
.css-color-palette {
|
||
display: grid;
|
||
grid-template-columns: repeat(9, 1fr);
|
||
gap: 6px;
|
||
padding: 0 12px 12px;
|
||
}
|
||
.css-color-palette-item {
|
||
position: relative;
|
||
aspect-ratio: 1;
|
||
min-width: 0;
|
||
border: 1px solid rgba(255,255,255,.24);
|
||
border-radius: 7px;
|
||
box-shadow: 0 2px 6px rgba(0,0,0,.28);
|
||
transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease;
|
||
}
|
||
.css-color-palette-item:hover {
|
||
z-index: 1;
|
||
transform: translateY(-1px) scale(1.08);
|
||
border-color: #fff;
|
||
}
|
||
.css-color-palette-item.selected {
|
||
border-color: #fff;
|
||
box-shadow: 0 0 0 2px var(--accent), 0 3px 9px rgba(0,0,0,.4);
|
||
}
|
||
.css-color-palette-item.selected::after {
|
||
content: "✓";
|
||
position: absolute;
|
||
inset: 0;
|
||
display: grid;
|
||
place-items: center;
|
||
color: #fff;
|
||
font-size: 13px;
|
||
font-weight: 950;
|
||
text-shadow: 0 1px 3px #000, 0 0 4px #000;
|
||
}
|
||
.css-color-footer {
|
||
justify-content: space-between;
|
||
}
|
||
.css-color-footer-tools {
|
||
display: flex;
|
||
gap: 7px;
|
||
}
|
||
|
||
@media (max-width: 600px) {
|
||
.control-popover { max-width: calc(100vw - 16px) !important; }
|
||
.css-datetime-popover, .css-color-popover { width: min(342px, calc(100vw - 16px)); }
|
||
}
|
||
.css-select-popover { width: min(390px, calc(100vw - 16px)); }
|
||
|
||
|
||
/* Keyboard shortcuts */
|
||
.component-shortcut-badge {
|
||
position: absolute;
|
||
right: 8px;
|
||
bottom: -10px;
|
||
z-index: 8;
|
||
max-width: calc(100% - 16px);
|
||
padding: 3px 8px;
|
||
overflow: hidden;
|
||
color: #06130f;
|
||
background: #f5c451;
|
||
border: 1px solid rgba(255,255,255,.38);
|
||
border-radius: 999px;
|
||
box-shadow: 0 5px 16px rgba(0,0,0,.28);
|
||
font-size: 10px;
|
||
font-weight: 850;
|
||
line-height: 1.2;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.shortcut-list { display: grid; gap: 10px; }
|
||
.shortcut-empty {
|
||
padding: 14px;
|
||
color: var(--muted);
|
||
text-align: center;
|
||
border: 1px dashed var(--line);
|
||
border-radius: 10px;
|
||
background: rgba(255,255,255,.018);
|
||
}
|
||
.shortcut-card {
|
||
display: grid;
|
||
gap: 10px;
|
||
padding: 11px;
|
||
border: 1px solid var(--line);
|
||
border-radius: 12px;
|
||
background: linear-gradient(145deg, rgba(22,33,52,.92), rgba(12,20,33,.92));
|
||
}
|
||
.shortcut-card.has-conflict { border-color: rgba(245,196,81,.72); box-shadow: 0 0 0 3px rgba(245,196,81,.08); }
|
||
.shortcut-head, .shortcut-combo-row, .shortcut-toggles {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
.shortcut-head { justify-content: space-between; }
|
||
.shortcut-enabled { display: inline-flex; align-items: center; gap: 7px; color: #dce7f7; font-size: 12px; font-weight: 800; }
|
||
.shortcut-remove, .shortcut-clear {
|
||
border: 1px solid var(--line);
|
||
border-radius: 8px;
|
||
color: #ff8da0;
|
||
background: #121c2c;
|
||
}
|
||
.shortcut-remove { width: 30px; height: 30px; font-size: 19px; }
|
||
.shortcut-clear { min-height: 38px; padding: 0 10px; color: #aebed4; }
|
||
.shortcut-combo-row input { flex: 1; min-width: 0; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-weight: 800; letter-spacing: .02em; }
|
||
.shortcut-capture { flex: 0 0 auto; min-width: 92px; }
|
||
.shortcut-capture.is-capturing { color: #06130f; background: #f5c451; border-color: transparent; animation: shortcutPulse 1s ease-in-out infinite; }
|
||
.shortcut-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
|
||
.shortcut-toggles { align-items: stretch; flex-direction: column; gap: 2px; }
|
||
.shortcut-toggles .field { margin: 0; }
|
||
.shortcut-warning {
|
||
padding: 8px 10px;
|
||
color: #ffe6a5;
|
||
background: rgba(245,196,81,.10);
|
||
border: 1px solid rgba(245,196,81,.30);
|
||
border-radius: 9px;
|
||
font-size: 11px;
|
||
line-height: 1.4;
|
||
}
|
||
.shortcut-add { width: 100%; margin-top: 10px; border-style: dashed; }
|
||
.inspector-group code { color: #8debd7; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
|
||
@keyframes shortcutPulse { 50% { transform: translateY(-1px); box-shadow: 0 0 18px rgba(245,196,81,.35); } }
|
||
@media (max-width: 1180px) { .shortcut-grid { grid-template-columns: 1fr; } }
|
||
|
||
|
||
/* Timer component */
|
||
.ui-timer {
|
||
--timer-accent: var(--accent, #48dfbd);
|
||
width: 100%;
|
||
height: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 7px;
|
||
overflow: hidden;
|
||
border: 1px solid var(--line);
|
||
border-radius: 14px;
|
||
background:
|
||
radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--timer-accent) 14%, transparent), transparent 48%),
|
||
linear-gradient(145deg, #132038, #0c1524);
|
||
}
|
||
.ui-timer-label {
|
||
max-width: 100%;
|
||
overflow: hidden;
|
||
color: #9cafc8;
|
||
font-size: .72em;
|
||
font-weight: 850;
|
||
letter-spacing: .1em;
|
||
text-overflow: ellipsis;
|
||
text-transform: uppercase;
|
||
white-space: nowrap;
|
||
}
|
||
.ui-timer-display {
|
||
color: inherit;
|
||
font-family: "Roboto Mono", "Cascadia Mono", Consolas, ui-monospace, monospace;
|
||
font-size: clamp(30px, 3.6em, 70px);
|
||
font-variant-numeric: tabular-nums;
|
||
font-weight: 900;
|
||
letter-spacing: -.055em;
|
||
line-height: 1;
|
||
text-shadow: 0 0 24px color-mix(in srgb, var(--timer-accent) 34%, transparent);
|
||
white-space: nowrap;
|
||
}
|
||
.ui-timer-status {
|
||
min-height: 18px;
|
||
padding: 2px 9px;
|
||
color: #8195af;
|
||
border: 1px solid #283c56;
|
||
border-radius: 999px;
|
||
background: rgba(8,15,25,.58);
|
||
font-size: 10px;
|
||
font-weight: 850;
|
||
letter-spacing: .06em;
|
||
text-transform: uppercase;
|
||
}
|
||
.ui-timer.is-running .ui-timer-status {
|
||
color: #07130f;
|
||
border-color: transparent;
|
||
background: var(--timer-accent);
|
||
box-shadow: 0 0 14px color-mix(in srgb, var(--timer-accent) 38%, transparent);
|
||
}
|
||
.ui-timer.is-finished .ui-timer-status {
|
||
color: #fff0f3;
|
||
border-color: rgba(255,102,125,.45);
|
||
background: rgba(255,102,125,.16);
|
||
}
|
||
.ui-timer-controls {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 7px;
|
||
margin-top: 2px;
|
||
}
|
||
.ui-timer-controls button {
|
||
min-width: 42px;
|
||
height: 32px;
|
||
padding: 0 10px;
|
||
color: #c9d6e8;
|
||
border: 1px solid #30445f;
|
||
border-radius: 9px;
|
||
background: linear-gradient(180deg, #1b2a40, #111c2c);
|
||
box-shadow: inset 0 1px rgba(255,255,255,.04);
|
||
font-weight: 900;
|
||
transition: transform .14s ease, border-color .14s ease, color .14s ease, background .14s ease;
|
||
}
|
||
.ui-timer-controls button:hover {
|
||
transform: translateY(-1px);
|
||
color: #fff;
|
||
border-color: #4d6d94;
|
||
}
|
||
.ui-timer-controls button.active {
|
||
color: #07130f;
|
||
border-color: transparent;
|
||
background: var(--timer-accent);
|
||
}
|
||
|
||
|
||
/* -------------------------------------------------------------------------
|
||
v11 — compact timers without screen controls
|
||
------------------------------------------------------------------------- */
|
||
.ui-timer--compact {
|
||
--timer-accent: var(--accent, #48dfbd);
|
||
width: 100%;
|
||
height: 100%;
|
||
min-height: 64px;
|
||
display: grid;
|
||
grid-template-columns: minmax(0, 1fr) auto;
|
||
align-items: center;
|
||
gap: 16px;
|
||
padding: 11px 14px;
|
||
overflow: hidden;
|
||
border: 1px solid var(--line);
|
||
border-radius: 14px;
|
||
background:
|
||
linear-gradient(90deg, color-mix(in srgb, var(--timer-accent) 9%, transparent), transparent 46%),
|
||
linear-gradient(145deg, #142238, #0d1727);
|
||
}
|
||
.ui-timer--compact .ui-timer-meta {
|
||
min-width: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
gap: 5px;
|
||
}
|
||
.ui-timer--compact .ui-timer-label {
|
||
max-width: 100%;
|
||
overflow: hidden;
|
||
color: #a4b5cb;
|
||
font-size: 11px;
|
||
font-weight: 900;
|
||
letter-spacing: .09em;
|
||
text-overflow: ellipsis;
|
||
text-transform: uppercase;
|
||
white-space: nowrap;
|
||
}
|
||
.ui-timer--compact .ui-timer-display {
|
||
color: inherit;
|
||
font-family: "Roboto Mono", "Cascadia Mono", Consolas, ui-monospace, monospace;
|
||
font-size: clamp(27px, 3em, 54px);
|
||
font-variant-numeric: tabular-nums;
|
||
font-weight: 950;
|
||
letter-spacing: -.065em;
|
||
line-height: 1;
|
||
text-align: right;
|
||
text-shadow: 0 0 22px color-mix(in srgb, var(--timer-accent) 34%, transparent);
|
||
white-space: nowrap;
|
||
}
|
||
.ui-timer--compact .ui-timer-status {
|
||
min-height: auto;
|
||
padding: 2px 7px;
|
||
color: #8397b1;
|
||
border: 1px solid #2a405b;
|
||
border-radius: 999px;
|
||
background: rgba(8,15,25,.58);
|
||
font-size: 9px;
|
||
font-weight: 900;
|
||
letter-spacing: .06em;
|
||
line-height: 1.35;
|
||
text-transform: uppercase;
|
||
}
|
||
.ui-timer--compact.is-running .ui-timer-status {
|
||
color: #06130f;
|
||
border-color: transparent;
|
||
background: var(--timer-accent);
|
||
}
|
||
.ui-timer-controls { display: none !important; }
|
||
|
||
/* Hockey penalty timer */
|
||
.ui-penalty-timer {
|
||
--penalty-accent: var(--accent, #48dfbd);
|
||
position: relative;
|
||
width: 100%;
|
||
height: 100%;
|
||
min-height: 64px;
|
||
display: grid;
|
||
grid-template-columns: 5px 46px minmax(0, 1fr) auto;
|
||
align-items: center;
|
||
gap: 10px;
|
||
padding: 8px 12px 10px 0;
|
||
overflow: hidden;
|
||
border: 1px solid var(--line);
|
||
border-radius: 13px;
|
||
background:
|
||
linear-gradient(100deg, color-mix(in srgb, var(--penalty-accent) 12%, transparent), transparent 56%),
|
||
linear-gradient(145deg, #142238, #0c1625);
|
||
transition: opacity .2s ease, transform .2s ease, border-color .2s ease, box-shadow .2s ease;
|
||
}
|
||
.ui-penalty-timer.team-home { --penalty-accent: #4d9cff; }
|
||
.ui-penalty-timer.team-away { --penalty-accent: #ff5f79; }
|
||
.ui-penalty-timer.team-neutral { --penalty-accent: #f5c451; }
|
||
.ui-penalty-accent {
|
||
align-self: stretch;
|
||
width: 5px;
|
||
background: var(--penalty-accent);
|
||
box-shadow: 0 0 16px color-mix(in srgb, var(--penalty-accent) 60%, transparent);
|
||
}
|
||
.ui-penalty-number {
|
||
width: 42px;
|
||
height: 42px;
|
||
display: grid;
|
||
place-items: center;
|
||
color: #fff;
|
||
border: 1px solid color-mix(in srgb, var(--penalty-accent) 52%, #30445f);
|
||
border-radius: 11px;
|
||
background: color-mix(in srgb, var(--penalty-accent) 18%, #111c2c);
|
||
font-size: 17px;
|
||
font-weight: 950;
|
||
letter-spacing: -.03em;
|
||
}
|
||
.ui-penalty-number::before {
|
||
content: "#";
|
||
margin-right: 1px;
|
||
color: color-mix(in srgb, var(--penalty-accent) 72%, white);
|
||
font-size: 10px;
|
||
vertical-align: super;
|
||
}
|
||
.ui-penalty-info {
|
||
min-width: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 3px;
|
||
}
|
||
.ui-penalty-topline {
|
||
min-width: 0;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 7px;
|
||
color: #8398b2;
|
||
font-size: 9px;
|
||
font-weight: 900;
|
||
letter-spacing: .08em;
|
||
text-transform: uppercase;
|
||
}
|
||
.ui-penalty-team {
|
||
color: color-mix(in srgb, var(--penalty-accent) 76%, white);
|
||
}
|
||
.ui-penalty-label {
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
.ui-penalty-player {
|
||
overflow: hidden;
|
||
color: #eef4ff;
|
||
font-size: 14px;
|
||
font-weight: 850;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
.ui-penalty-time-wrap {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 7px;
|
||
}
|
||
.ui-penalty-time {
|
||
min-width: 63px;
|
||
color: #fff;
|
||
font-family: "Roboto Mono", "Cascadia Mono", Consolas, ui-monospace, monospace;
|
||
font-size: clamp(22px, 2em, 34px);
|
||
font-variant-numeric: tabular-nums;
|
||
font-weight: 950;
|
||
letter-spacing: -.06em;
|
||
line-height: 1;
|
||
text-align: right;
|
||
text-shadow: 0 0 18px color-mix(in srgb, var(--penalty-accent) 38%, transparent);
|
||
}
|
||
.ui-penalty-state-dot {
|
||
width: 7px;
|
||
height: 7px;
|
||
border-radius: 50%;
|
||
background: #53657c;
|
||
box-shadow: 0 0 0 3px rgba(83,101,124,.12);
|
||
}
|
||
.ui-penalty-timer.is-running .ui-penalty-state-dot {
|
||
background: var(--penalty-accent);
|
||
box-shadow: 0 0 12px var(--penalty-accent);
|
||
}
|
||
.ui-penalty-progress-track {
|
||
position: absolute;
|
||
right: 0;
|
||
bottom: 0;
|
||
left: 5px;
|
||
height: 3px;
|
||
overflow: hidden;
|
||
background: rgba(255,255,255,.045);
|
||
}
|
||
.ui-penalty-progress {
|
||
width: 100%;
|
||
height: 100%;
|
||
background: var(--penalty-accent);
|
||
box-shadow: 0 0 12px var(--penalty-accent);
|
||
transition: width .12s linear, background .2s ease;
|
||
}
|
||
.ui-penalty-timer.is-warning {
|
||
border-color: #f5c451;
|
||
box-shadow: 0 0 0 2px rgba(245,196,81,.09), 0 0 20px rgba(245,196,81,.10);
|
||
}
|
||
.ui-penalty-timer.is-warning .ui-penalty-time,
|
||
.ui-penalty-timer.is-warning .ui-penalty-state-dot {
|
||
color: #ffe8a3;
|
||
background: #f5c451;
|
||
text-shadow: 0 0 16px rgba(245,196,81,.55);
|
||
}
|
||
.ui-penalty-timer.is-warning .ui-penalty-progress { background: #f5c451; }
|
||
.ui-penalty-expired {
|
||
position: absolute;
|
||
inset: 0;
|
||
display: grid;
|
||
place-items: center;
|
||
color: #b6c3d5;
|
||
background: rgba(8,14,23,.89);
|
||
font-size: 11px;
|
||
font-weight: 900;
|
||
letter-spacing: .08em;
|
||
opacity: 0;
|
||
pointer-events: none;
|
||
text-transform: uppercase;
|
||
transition: opacity .18s ease;
|
||
}
|
||
.ui-penalty-timer.is-finished .ui-penalty-expired { opacity: 1; }
|
||
.ui-penalty-timer.is-auto-hidden {
|
||
display: none !important;
|
||
}
|
||
|
||
|
||
/* -------------------------------------------------------------------------
|
||
v13 — quick timer editor
|
||
------------------------------------------------------------------------- */
|
||
.timer-editable-display {
|
||
cursor: pointer;
|
||
user-select: none;
|
||
}
|
||
.timer-editable-display:hover {
|
||
filter: brightness(1.14);
|
||
}
|
||
.modal-card:has(.timer-quick-editor) {
|
||
width: min(1180px, 96vw);
|
||
max-height: 92vh;
|
||
}
|
||
.timer-quick-editor {
|
||
display: grid;
|
||
gap: 14px;
|
||
}
|
||
.timer-editor-toolbar {
|
||
position: sticky;
|
||
top: -18px;
|
||
z-index: 4;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 14px;
|
||
margin: -2px -2px 0;
|
||
padding: 12px 2px 13px;
|
||
border-bottom: 1px solid #2b3d55;
|
||
background: #111b2b;
|
||
}
|
||
.timer-editor-toolbar strong {
|
||
display: block;
|
||
color: #edf4ff;
|
||
font-size: 15px;
|
||
}
|
||
.timer-editor-toolbar p {
|
||
margin: 4px 0 0;
|
||
color: #8194ae;
|
||
font-size: 12px;
|
||
}
|
||
.timer-editor-toolbar-actions {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
.timer-editor-list {
|
||
display: grid;
|
||
gap: 9px;
|
||
}
|
||
.timer-editor-row {
|
||
display: grid;
|
||
grid-template-columns: 44px minmax(170px, 1fr) 116px 150px auto;
|
||
align-items: center;
|
||
gap: 11px;
|
||
min-height: 78px;
|
||
padding: 10px 12px;
|
||
border: 1px solid #2a3c55;
|
||
border-radius: 13px;
|
||
background:
|
||
linear-gradient(100deg, rgba(72,223,189,.045), transparent 42%),
|
||
#0d1726;
|
||
transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
|
||
}
|
||
.timer-editor-row.is-focused {
|
||
border-color: #48dfbd;
|
||
box-shadow: 0 0 0 3px rgba(72,223,189,.10);
|
||
}
|
||
.timer-editor-row.is-running {
|
||
border-color: rgba(72,223,189,.42);
|
||
}
|
||
.timer-editor-row.is-finished {
|
||
opacity: .68;
|
||
}
|
||
.timer-editor-kind {
|
||
width: 40px;
|
||
height: 40px;
|
||
display: grid;
|
||
place-items: center;
|
||
color: #07130f;
|
||
border-radius: 11px;
|
||
background: #48dfbd;
|
||
font-size: 15px;
|
||
font-weight: 950;
|
||
box-shadow: 0 0 18px rgba(72,223,189,.18);
|
||
}
|
||
.timer-editor-kind.team-home {
|
||
color: #fff;
|
||
background: #4d9cff;
|
||
}
|
||
.timer-editor-kind.team-away {
|
||
color: #fff;
|
||
background: #ff5f79;
|
||
}
|
||
.timer-editor-kind.team-neutral {
|
||
color: #171104;
|
||
background: #f5c451;
|
||
}
|
||
.timer-editor-info {
|
||
min-width: 0;
|
||
display: grid;
|
||
gap: 4px;
|
||
}
|
||
.timer-editor-info strong {
|
||
overflow: hidden;
|
||
color: #eef4ff;
|
||
font-size: 14px;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
.timer-editor-info span {
|
||
overflow: hidden;
|
||
color: #8194ae;
|
||
font-size: 10px;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
.timer-editor-info code {
|
||
color: #9edfcf;
|
||
}
|
||
.timer-editor-live {
|
||
display: grid;
|
||
justify-items: end;
|
||
gap: 3px;
|
||
}
|
||
.timer-editor-live strong {
|
||
color: #fff;
|
||
font-family: "Roboto Mono", "Cascadia Mono", Consolas, monospace;
|
||
font-size: 24px;
|
||
font-variant-numeric: tabular-nums;
|
||
font-weight: 950;
|
||
letter-spacing: -.055em;
|
||
}
|
||
.timer-editor-live span {
|
||
color: #8295ae;
|
||
font-size: 9px;
|
||
font-weight: 850;
|
||
letter-spacing: .07em;
|
||
text-transform: uppercase;
|
||
}
|
||
.timer-editor-row.is-running .timer-editor-live span {
|
||
color: #48dfbd;
|
||
}
|
||
.timer-editor-input {
|
||
display: grid;
|
||
gap: 5px;
|
||
}
|
||
.timer-editor-input span {
|
||
color: #8295ae;
|
||
font-size: 9px;
|
||
font-weight: 850;
|
||
letter-spacing: .06em;
|
||
text-transform: uppercase;
|
||
}
|
||
.timer-editor-input input {
|
||
width: 100%;
|
||
min-height: 38px;
|
||
color: #fff;
|
||
border: 1px solid #31465f;
|
||
border-radius: 9px;
|
||
background: #091321;
|
||
font-family: "Roboto Mono", "Cascadia Mono", Consolas, monospace;
|
||
font-size: 15px;
|
||
font-variant-numeric: tabular-nums;
|
||
font-weight: 850;
|
||
text-align: center;
|
||
}
|
||
.timer-editor-input input:focus {
|
||
border-color: #48dfbd;
|
||
box-shadow: 0 0 0 3px rgba(72,223,189,.10);
|
||
outline: none;
|
||
}
|
||
.timer-editor-input input:disabled {
|
||
color: #687a91;
|
||
cursor: not-allowed;
|
||
opacity: .7;
|
||
}
|
||
.timer-editor-actions {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
gap: 6px;
|
||
}
|
||
.btn.btn-small {
|
||
min-height: 34px;
|
||
padding: 0 10px;
|
||
font-size: 11px;
|
||
}
|
||
@media (max-width: 900px) {
|
||
.timer-editor-toolbar {
|
||
align-items: stretch;
|
||
flex-direction: column;
|
||
}
|
||
.timer-editor-toolbar-actions {
|
||
justify-content: flex-end;
|
||
}
|
||
.timer-editor-row {
|
||
grid-template-columns: 40px minmax(0, 1fr) 100px;
|
||
}
|
||
.timer-editor-input {
|
||
grid-column: 2 / 4;
|
||
}
|
||
.timer-editor-actions {
|
||
grid-column: 1 / 4;
|
||
}
|
||
}
|
||
|
||
/* v14: Hockey drag-and-drop penalty dashboard */
|
||
.hockey-penalty-dashboard{--hpd-home:#4d9cff;--hpd-away:#ff5f79;width:100%;height:100%;min-height:520px;display:flex;flex-direction:column;overflow:hidden;color:#eef4ff;border:1px solid #263b55;border-radius:20px;background:radial-gradient(circle at 15% 0%,color-mix(in srgb,var(--hpd-home) 12%,transparent),transparent 28%),radial-gradient(circle at 85% 0%,color-mix(in srgb,var(--hpd-away) 11%,transparent),transparent 28%),#08111e}
|
||
.hpd-header{min-height:66px;display:grid;grid-template-columns:minmax(220px,1fr) auto minmax(300px,1fr);align-items:center;gap:14px;padding:10px 16px;border-bottom:1px solid #23364d;background:rgba(11,22,37,.9)}
|
||
.hpd-header>div:first-child{display:grid;gap:2px}.hpd-header small{color:#7187a3;font-size:9px;font-weight:900;letter-spacing:.12em;text-transform:uppercase}.hpd-header strong{font-size:17px;font-weight:950}
|
||
.hpd-header-stats{display:flex;align-items:center;gap:8px;padding:5px 10px;color:#91a4bc;border:1px solid #2a405a;border-radius:999px;background:#0a1524;font-size:10px;font-weight:900;text-transform:uppercase}.hpd-header-stats strong{min-width:23px;color:#07130f;border-radius:999px;background:#48dfbd;font-size:12px;line-height:23px;text-align:center}
|
||
.hpd-board-actions{display:flex;justify-content:flex-end;gap:7px}.hpd-board-actions button{min-height:32px;padding:0 10px;color:#b8c7da;border:1px solid #2c425c;border-radius:9px;background:linear-gradient(180deg,#18283d,#101b2b);font-size:10px;font-weight:850}.hpd-board-actions button:hover{color:#fff;border-color:#4b6b91}
|
||
.hpd-layout{min-height:0;flex:1;display:grid;grid-template-columns:minmax(230px,282px) minmax(500px,1fr) minmax(230px,282px)}
|
||
.hpd-roster{min-width:0;min-height:0;display:flex;flex-direction:column;padding:12px;background:rgba(9,19,32,.76)}.hpd-roster.team-home{border-right:1px solid #23364d}.hpd-roster.team-away{border-left:1px solid #23364d}
|
||
.hpd-roster-header{min-height:47px;display:flex;align-items:center;justify-content:space-between;gap:10px}.hpd-roster-header>div{min-width:0;display:grid;gap:2px}.hpd-roster-header span{color:#6f849f;font-size:8px;font-weight:900;letter-spacing:.11em}.hpd-roster-header strong{overflow:hidden;font-size:14px;font-weight:950;text-overflow:ellipsis;white-space:nowrap}.hpd-roster.team-home .hpd-roster-header strong{color:color-mix(in srgb,var(--hpd-home) 74%,white)}.hpd-roster.team-away .hpd-roster-header strong{color:color-mix(in srgb,var(--hpd-away) 74%,white)}.hpd-roster-header em{min-width:28px;padding:4px 7px;color:#8da0b8;border:1px solid #2b4059;border-radius:999px;background:#0a1524;font-size:10px;font-style:normal;font-weight:900;text-align:center}
|
||
.hpd-roster-search{width:100%;min-height:36px;margin-bottom:8px;padding:0 11px;color:#eaf2ff;border:1px solid #2b4059;border-radius:10px;background:#091420;outline:none}.hpd-roster-search:focus{border-color:#48dfbd;box-shadow:0 0 0 3px rgba(72,223,189,.08)}
|
||
.hpd-roster-list{min-height:0;flex:1;display:grid;align-content:start;gap:5px;overflow-y:auto;padding-right:3px}.hpd-player-row{min-height:39px;display:grid;grid-template-columns:20px 34px minmax(0,1fr) auto;align-items:center;gap:6px;padding:4px 7px 4px 3px;border:1px solid transparent;border-radius:9px;background:rgba(18,31,49,.7);cursor:grab;transition:transform .12s ease,border-color .12s ease,background .12s ease,opacity .12s ease}.hpd-player-row:hover{transform:translateX(2px);border-color:#334d6b;background:#15253a}.hpd-player-row:active{cursor:grabbing}.hpd-player-row.is-dragging{opacity:.38}.hpd-player-row.hidden{display:none}.hpd-drag-handle{color:#566c86;font-size:11px;letter-spacing:-3px}.hpd-player-number{display:grid;place-items:center;width:32px;height:28px;color:#eef4ff;border:1px solid #314963;border-radius:8px;background:#0b1727;font-size:11px;font-weight:950}.hpd-player-name{overflow:hidden;color:#e6eef9;font-size:11px;font-weight:800;text-overflow:ellipsis;white-space:nowrap}.hpd-player-row small{color:#6e829c;font-size:8px;font-weight:900;text-transform:uppercase}
|
||
.hpd-center{min-width:0;min-height:0;display:grid;grid-template-rows:auto minmax(190px,1fr) minmax(110px,.58fr);gap:10px;padding:12px}.hpd-assignment{display:grid;gap:8px}.hpd-drop-zones{display:grid;grid-template-columns:1fr 1fr;gap:8px}
|
||
.hpd-drop-zone{--zone-color:#48dfbd;min-width:0;min-height:55px;display:grid;grid-template-columns:38px minmax(0,1fr) auto;align-items:center;gap:9px;padding:7px 9px;border:1px dashed #344e6b;border-radius:12px;background:rgba(14,26,42,.78);transition:border-color .15s ease,background .15s ease,transform .15s ease}.hpd-drop-zone.team-home{--zone-color:var(--hpd-home)}.hpd-drop-zone.team-away{--zone-color:var(--hpd-away)}.hpd-drop-zone.is-over{transform:translateY(-2px);border-color:var(--zone-color);background:color-mix(in srgb,var(--zone-color) 12%,#0f1c2d);box-shadow:0 0 0 3px color-mix(in srgb,var(--zone-color) 8%,transparent)}.hpd-drop-icon{width:34px;height:34px;display:grid;place-items:center;color:var(--zone-color);border:1px solid color-mix(in srgb,var(--zone-color) 48%,#334a65);border-radius:10px;background:color-mix(in srgb,var(--zone-color) 10%,#0b1726);font-size:16px;font-weight:950}.hpd-drop-zone>div{min-width:0;display:grid;gap:2px}.hpd-drop-zone small{color:#70859f;font-size:8px;font-weight:900;letter-spacing:.09em;text-transform:uppercase}.hpd-drop-zone strong{overflow:hidden;color:#eaf2fd;font-size:11px;text-overflow:ellipsis;white-space:nowrap}.hpd-drop-zone>button{width:27px;height:27px;color:#9badc2;border:1px solid #30465f;border-radius:8px;background:#111e2f}
|
||
.hpd-presets{display:grid;grid-template-columns:repeat(6,minmax(58px,1fr));gap:6px}.hpd-presets button{min-height:45px;display:grid;place-items:center;gap:1px;padding:5px;color:#c9d6e6;border:1px solid #2d435d;border-radius:10px;background:linear-gradient(180deg,#17273b,#0f1b2b);transition:transform .12s ease,border-color .12s ease,background .12s ease}.hpd-presets button:hover,.hpd-presets button.is-over{transform:translateY(-2px);color:#07130f;border-color:transparent;background:#48dfbd}.hpd-presets strong{font-size:13px;font-weight:950}.hpd-presets small{color:inherit;opacity:.7;font-size:8px;font-weight:850}
|
||
.hpd-active-grid{min-height:0;display:grid;grid-template-columns:1fr 1fr;gap:9px}.hpd-active-column{--penalty-color:#48dfbd;min-width:0;min-height:0;display:flex;flex-direction:column;overflow:hidden;border:1px solid #263b54;border-radius:13px;background:rgba(10,20,34,.75)}.hpd-active-column.team-home{--penalty-color:var(--hpd-home)}.hpd-active-column.team-away{--penalty-color:var(--hpd-away)}.hpd-active-header{min-height:34px;display:flex;align-items:center;justify-content:space-between;padding:0 10px;border-bottom:1px solid #263b54;background:color-mix(in srgb,var(--penalty-color) 7%,#0e1a2a)}.hpd-active-header strong{color:color-mix(in srgb,var(--penalty-color) 72%,white);font-size:9px;font-weight:950;letter-spacing:.08em;text-transform:uppercase}.hpd-active-header span{min-width:22px;color:#dce7f5;border-radius:999px;background:#21334a;font-size:9px;font-weight:950;line-height:22px;text-align:center}.hpd-active-list{min-height:0;display:grid;align-content:start;gap:5px;overflow-y:auto;padding:7px}
|
||
.hpd-penalty-card{--card-color:#48dfbd;position:relative;min-height:52px;display:grid;grid-template-columns:41px minmax(0,1fr) 56px auto;align-items:center;gap:7px;padding:5px 6px 7px;overflow:hidden;border:1px solid #2b4059;border-radius:10px;background:linear-gradient(100deg,color-mix(in srgb,var(--card-color) 9%,transparent),#111e2f 58%)}.hpd-penalty-card.team-home{--card-color:var(--hpd-home)}.hpd-penalty-card.team-away{--card-color:var(--hpd-away)}.hpd-penalty-card.is-warning{--card-color:#f5c451;border-color:#806b32}.hpd-penalty-card.is-finished{opacity:.52}.hpd-penalty-number{display:grid;place-items:center;min-height:34px;color:#fff;border:1px solid color-mix(in srgb,var(--card-color) 54%,#344b65);border-radius:8px;background:color-mix(in srgb,var(--card-color) 14%,#0b1726);font-size:10px;font-weight:950}.hpd-penalty-player{min-width:0;display:grid;gap:2px}.hpd-penalty-player strong{overflow:hidden;color:#edf4ff;font-size:10px;text-overflow:ellipsis;white-space:nowrap}.hpd-penalty-player small{color:color-mix(in srgb,var(--card-color) 70%,#aab8ca);font-size:8px;font-weight:900}.hpd-penalty-time{min-width:54px;padding:0;color:#fff;border:0;background:transparent;font-family:"Roboto Mono","Cascadia Mono",Consolas,monospace;font-size:19px;font-variant-numeric:tabular-nums;font-weight:950;letter-spacing:-.055em;text-align:right}.hpd-penalty-actions{display:flex;gap:3px;opacity:.38;transition:opacity .12s ease}.hpd-penalty-card:hover .hpd-penalty-actions{opacity:1}.hpd-penalty-actions button{width:25px;height:25px;padding:0;color:#9eb0c7;border:1px solid #30465f;border-radius:7px;background:#0c1727;font-size:9px;font-weight:900}.hpd-penalty-actions button:hover{color:#fff;border-color:var(--card-color)}.hpd-penalty-progress-track{position:absolute;right:0;bottom:0;left:0;height:2px;background:rgba(255,255,255,.04)}.hpd-penalty-progress-track i{display:block;width:100%;height:100%;background:var(--card-color);box-shadow:0 0 10px var(--card-color);transition:width .1s linear}.hpd-empty-active,.hpd-empty-history{padding:20px 8px;color:#647a95;font-size:9px;font-weight:800;text-align:center}
|
||
.hpd-history{min-height:0;display:flex;flex-direction:column;overflow:hidden;border:1px solid #263b54;border-radius:13px;background:rgba(9,18,31,.76)}.hpd-history-header{min-height:32px;display:flex;align-items:center;justify-content:space-between;padding:0 10px;border-bottom:1px solid #263b54}.hpd-history-header strong{color:#9baec5;font-size:9px;font-weight:950;letter-spacing:.08em;text-transform:uppercase}.hpd-history-header span{color:#70859f;font-size:9px;font-weight:900}.hpd-history-list{min-height:0;display:grid;align-content:start;gap:2px;overflow-y:auto;padding:5px 7px}.hpd-history-item{min-height:24px;display:grid;grid-template-columns:50px 7px minmax(0,1fr);align-items:center;gap:6px;padding:2px 5px;border-radius:7px;background:rgba(18,31,48,.58)}.hpd-history-item time{color:#657a94;font-family:"Roboto Mono",Consolas,monospace;font-size:8px}.hpd-history-item>span{width:6px;height:6px;border-radius:50%;background:#667b94}.hpd-history-item>span.team-home{background:var(--hpd-home)}.hpd-history-item>span.team-away{background:var(--hpd-away)}.hpd-history-item strong{overflow:hidden;color:#9eafc3;font-size:8px;font-weight:750;text-overflow:ellipsis;white-space:nowrap}
|
||
.hpd-time-editor{display:grid;gap:10px}.hpd-time-editor>strong{color:#eef4ff;font-size:16px}.hpd-time-editor>span{color:#8ea2ba;font-size:11px}.hpd-time-editor label{display:grid;gap:6px;color:#8ea2ba;font-size:10px;font-weight:800}.hpd-time-editor input{min-height:42px;color:#fff;border:1px solid #314862;border-radius:10px;background:#091421;font-family:"Roboto Mono",Consolas,monospace;font-size:18px;font-weight:900;text-align:center}
|
||
|
||
|
||
/* =========================================================================
|
||
v15 — staged hockey penalty workflow
|
||
========================================================================= */
|
||
.hpd-center--workflow {
|
||
grid-template-rows: auto minmax(360px, 1fr) minmax(95px, .28fr);
|
||
}
|
||
.hpd-preparation {
|
||
display: grid;
|
||
grid-template-columns: 190px minmax(0, 1fr);
|
||
gap: 9px;
|
||
}
|
||
.hpd-clock-creator {
|
||
min-height: 58px;
|
||
display: grid;
|
||
grid-template-columns: minmax(0, 1fr) auto;
|
||
grid-template-rows: auto auto;
|
||
align-items: center;
|
||
gap: 1px 10px;
|
||
padding: 7px 11px;
|
||
color: #dce8f8;
|
||
border: 1px solid #31506b;
|
||
border-radius: 12px;
|
||
background:
|
||
linear-gradient(110deg, rgba(72,223,189,.12), transparent 58%),
|
||
#101d2e;
|
||
text-align: left;
|
||
}
|
||
.hpd-clock-creator:hover {
|
||
border-color: #48dfbd;
|
||
box-shadow: 0 0 0 3px rgba(72,223,189,.08);
|
||
}
|
||
.hpd-clock-creator small {
|
||
color: #758ba5;
|
||
font-size: 8px;
|
||
font-weight: 900;
|
||
letter-spacing: .1em;
|
||
text-transform: uppercase;
|
||
}
|
||
.hpd-clock-creator strong {
|
||
grid-row: 1 / 3;
|
||
grid-column: 2;
|
||
color: #fff;
|
||
font-family: "Roboto Mono","Cascadia Mono",Consolas,monospace;
|
||
font-size: 27px;
|
||
font-variant-numeric: tabular-nums;
|
||
font-weight: 950;
|
||
letter-spacing: -.06em;
|
||
}
|
||
.hpd-clock-creator span {
|
||
color: #48dfbd;
|
||
font-size: 9px;
|
||
font-weight: 850;
|
||
}
|
||
.hpd-workbench {
|
||
min-height: 0;
|
||
display: grid;
|
||
grid-template-columns: minmax(190px, 225px) minmax(380px, 1fr);
|
||
gap: 9px;
|
||
}
|
||
.hpd-section-header {
|
||
min-height: 41px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 9px;
|
||
padding: 6px 9px;
|
||
border-bottom: 1px solid #263b54;
|
||
}
|
||
.hpd-section-header > div {
|
||
min-width: 0;
|
||
display: grid;
|
||
gap: 1px;
|
||
}
|
||
.hpd-section-header small {
|
||
color: #657b96;
|
||
font-size: 7px;
|
||
font-weight: 900;
|
||
letter-spacing: .1em;
|
||
text-transform: uppercase;
|
||
}
|
||
.hpd-section-header strong {
|
||
overflow: hidden;
|
||
color: #b6c6d9;
|
||
font-size: 10px;
|
||
font-weight: 950;
|
||
text-overflow: ellipsis;
|
||
text-transform: uppercase;
|
||
white-space: nowrap;
|
||
}
|
||
.hpd-section-header > span {
|
||
min-width: 23px;
|
||
color: #9baec4;
|
||
border: 1px solid #2d435d;
|
||
border-radius: 999px;
|
||
background: #0b1726;
|
||
font-size: 8px;
|
||
font-weight: 900;
|
||
line-height: 21px;
|
||
text-align: center;
|
||
}
|
||
.hpd-infractions,
|
||
.hpd-event-queue {
|
||
min-width: 0;
|
||
min-height: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
overflow: hidden;
|
||
border: 1px solid #263b54;
|
||
border-radius: 13px;
|
||
background: rgba(9,18,31,.78);
|
||
}
|
||
.hpd-infraction-search {
|
||
width: calc(100% - 14px);
|
||
min-height: 31px;
|
||
margin: 7px;
|
||
padding: 0 9px;
|
||
color: #edf4ff;
|
||
border: 1px solid #2c425c;
|
||
border-radius: 9px;
|
||
background: #081421;
|
||
font-size: 10px;
|
||
outline: none;
|
||
}
|
||
.hpd-infraction-search:focus {
|
||
border-color: #48dfbd;
|
||
box-shadow: 0 0 0 3px rgba(72,223,189,.08);
|
||
}
|
||
.hpd-infraction-list,
|
||
.hpd-event-list {
|
||
min-height: 0;
|
||
flex: 1;
|
||
display: grid;
|
||
align-content: start;
|
||
gap: 5px;
|
||
overflow-y: auto;
|
||
padding: 0 7px 7px;
|
||
}
|
||
.hpd-event-list.is-over {
|
||
background: rgba(72,223,189,.045);
|
||
box-shadow: inset 0 0 0 1px rgba(72,223,189,.3);
|
||
}
|
||
.hpd-infraction-row {
|
||
min-height: 37px;
|
||
display: grid;
|
||
grid-template-columns: 18px minmax(0, 1fr) auto auto;
|
||
align-items: center;
|
||
gap: 6px;
|
||
padding: 4px 7px 4px 3px;
|
||
color: #cbd8e8;
|
||
border: 1px solid transparent;
|
||
border-radius: 9px;
|
||
background: #111f31;
|
||
cursor: grab;
|
||
transition: border-color .12s ease, transform .12s ease, background .12s ease, opacity .12s ease;
|
||
}
|
||
.hpd-infraction-row em {
|
||
padding: 2px 5px;
|
||
color: #ffd98a;
|
||
border: 1px solid rgba(245,196,81,.34);
|
||
border-radius: 6px;
|
||
background: rgba(245,196,81,.08);
|
||
font-size: 6.5px;
|
||
font-style: normal;
|
||
font-weight: 950;
|
||
letter-spacing: .05em;
|
||
}
|
||
.hpd-infraction-row:hover,
|
||
.hpd-infraction-row.is-selected,
|
||
.hpd-infraction-row.is-drop-target {
|
||
transform: translateX(2px);
|
||
border-color: #48dfbd;
|
||
background: #15283a;
|
||
}
|
||
.hpd-infraction-row.is-dragging { opacity: .4; }
|
||
.hpd-infraction-row.hidden { display: none; }
|
||
.hpd-infraction-drag {
|
||
color: #566d88;
|
||
font-size: 10px;
|
||
letter-spacing: -3px;
|
||
}
|
||
.hpd-infraction-row strong {
|
||
overflow: hidden;
|
||
font-size: 9px;
|
||
font-weight: 800;
|
||
line-height: 1.15;
|
||
text-overflow: ellipsis;
|
||
}
|
||
.hpd-infraction-row small {
|
||
min-width: 31px;
|
||
padding: 3px 5px;
|
||
color: #07130f;
|
||
border-radius: 7px;
|
||
background: #48dfbd;
|
||
font-size: 8px;
|
||
font-weight: 950;
|
||
text-align: center;
|
||
}
|
||
.hpd-player-row.is-drop-target {
|
||
border-color: #f5c451;
|
||
background: rgba(245,196,81,.09);
|
||
}
|
||
.hpd-presets button {
|
||
cursor: grab;
|
||
}
|
||
.hpd-presets button.is-dragging {
|
||
opacity: .45;
|
||
}
|
||
.hpd-event-card {
|
||
--event-color: #879bb4;
|
||
position: relative;
|
||
display: grid;
|
||
gap: 6px;
|
||
padding: 7px 8px 9px;
|
||
overflow: hidden;
|
||
border: 1px solid #2b4059;
|
||
border-radius: 11px;
|
||
background:
|
||
linear-gradient(100deg, color-mix(in srgb,var(--event-color) 7%,transparent), transparent 62%),
|
||
#101d2e;
|
||
transition: border-color .14s ease, box-shadow .14s ease, opacity .14s ease;
|
||
}
|
||
.hpd-event-card.team-home { --event-color: var(--hpd-home); }
|
||
.hpd-event-card.team-away { --event-color: var(--hpd-away); }
|
||
.hpd-event-card.is-selected,
|
||
.hpd-event-card.is-over {
|
||
border-color: #48dfbd;
|
||
box-shadow: 0 0 0 3px rgba(72,223,189,.08);
|
||
}
|
||
.hpd-event-card.is-ready {
|
||
border-color: color-mix(in srgb,#48dfbd 62%,#2b4059);
|
||
}
|
||
.hpd-event-card.is-running {
|
||
box-shadow: 0 0 18px color-mix(in srgb,var(--event-color) 12%,transparent);
|
||
}
|
||
.hpd-event-card.is-finished { opacity: .53; }
|
||
.hpd-event-top {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 8px;
|
||
}
|
||
.hpd-event-time {
|
||
min-width: 76px;
|
||
display: grid;
|
||
grid-template-columns: auto auto;
|
||
align-items: center;
|
||
gap: 6px;
|
||
padding: 3px 7px;
|
||
color: #fff;
|
||
border: 1px solid #304962;
|
||
border-radius: 8px;
|
||
background: #091522;
|
||
}
|
||
.hpd-event-time small {
|
||
color: #70859f;
|
||
font-size: 7px;
|
||
font-weight: 900;
|
||
text-transform: uppercase;
|
||
}
|
||
.hpd-event-time strong {
|
||
font-family: "Roboto Mono",Consolas,monospace;
|
||
font-size: 13px;
|
||
font-variant-numeric: tabular-nums;
|
||
font-weight: 950;
|
||
}
|
||
.hpd-event-status {
|
||
color: #7e93ad;
|
||
font-size: 8px;
|
||
font-weight: 900;
|
||
letter-spacing: .06em;
|
||
text-transform: uppercase;
|
||
}
|
||
.hpd-event-card.is-ready .hpd-event-status { color: #48dfbd; }
|
||
.hpd-event-card.is-running .hpd-event-status { color: var(--event-color); }
|
||
.hpd-event-fields {
|
||
display: grid;
|
||
grid-template-columns: 1.12fr 1.42fr .72fr;
|
||
gap: 5px;
|
||
}
|
||
.hpd-event-field {
|
||
min-width: 0;
|
||
min-height: 45px;
|
||
display: grid;
|
||
align-content: center;
|
||
gap: 1px;
|
||
padding: 5px 7px;
|
||
border: 1px solid #2b4059;
|
||
border-radius: 8px;
|
||
background: rgba(8,18,30,.65);
|
||
}
|
||
.hpd-event-field.is-empty {
|
||
border-style: dashed;
|
||
color: #627891;
|
||
}
|
||
.hpd-event-field.is-over {
|
||
border-color: #48dfbd;
|
||
background: rgba(72,223,189,.08);
|
||
}
|
||
.hpd-event-field small {
|
||
color: #687e98;
|
||
font-size: 7px;
|
||
font-weight: 900;
|
||
letter-spacing: .07em;
|
||
text-transform: uppercase;
|
||
}
|
||
.hpd-event-field strong {
|
||
overflow: hidden;
|
||
color: #e7effa;
|
||
font-size: 9px;
|
||
font-weight: 850;
|
||
line-height: 1.2;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
.hpd-event-field span {
|
||
overflow: hidden;
|
||
color: #758aa3;
|
||
font-size: 7px;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
.hpd-event-footer {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 8px;
|
||
}
|
||
.hpd-event-countdown {
|
||
min-width: 70px;
|
||
padding: 0;
|
||
color: #fff;
|
||
border: 0;
|
||
background: transparent;
|
||
font-family: "Roboto Mono",Consolas,monospace;
|
||
font-size: 21px;
|
||
font-variant-numeric: tabular-nums;
|
||
font-weight: 950;
|
||
letter-spacing: -.06em;
|
||
text-align: left;
|
||
}
|
||
.hpd-event-actions {
|
||
display: flex;
|
||
gap: 4px;
|
||
}
|
||
.hpd-event-actions button {
|
||
width: 27px;
|
||
height: 27px;
|
||
padding: 0;
|
||
color: #9eb0c6;
|
||
border: 1px solid #30465f;
|
||
border-radius: 7px;
|
||
background: #0a1625;
|
||
font-size: 9px;
|
||
font-weight: 900;
|
||
}
|
||
.hpd-event-actions button:hover:not(:disabled) {
|
||
color: #fff;
|
||
border-color: #48dfbd;
|
||
}
|
||
.hpd-event-actions button:disabled {
|
||
cursor: not-allowed;
|
||
opacity: .25;
|
||
}
|
||
.hpd-empty-events {
|
||
min-height: 140px;
|
||
display: grid;
|
||
place-items: center;
|
||
padding: 20px;
|
||
color: #657b95;
|
||
border: 1px dashed #304760;
|
||
border-radius: 10px;
|
||
font-size: 9px;
|
||
font-weight: 800;
|
||
line-height: 1.5;
|
||
text-align: center;
|
||
}
|
||
@media (max-width: 1180px) {
|
||
.hpd-workbench { grid-template-columns: 185px minmax(360px,1fr); }
|
||
.hpd-event-fields { grid-template-columns: 1fr 1.25fr .65fr; }
|
||
}
|
||
|
||
|
||
/* =========================================================================
|
||
v16 — clear team columns, violation dropdown, and grouped timer editor
|
||
========================================================================= */
|
||
.hpd-center--teams {
|
||
grid-template-rows: auto auto minmax(250px, 1fr) minmax(90px, .34fr);
|
||
}
|
||
.hpd-tools-row {
|
||
display: grid;
|
||
grid-template-columns: 178px minmax(0, 1fr);
|
||
align-items: stretch;
|
||
gap: 9px;
|
||
}
|
||
.hpd-create-event {
|
||
min-height: 52px;
|
||
display: grid;
|
||
grid-template-columns: 34px minmax(0, 1fr);
|
||
align-items: center;
|
||
gap: 8px;
|
||
padding: 7px 10px;
|
||
color: #dce8f7;
|
||
border: 1px solid #31506b;
|
||
border-radius: 12px;
|
||
background: linear-gradient(110deg, rgba(72,223,189,.11), transparent 62%), #101d2e;
|
||
text-align: left;
|
||
}
|
||
.hpd-create-event:hover {
|
||
border-color: #48dfbd;
|
||
box-shadow: 0 0 0 3px rgba(72,223,189,.08);
|
||
}
|
||
.hpd-create-event > span {
|
||
width: 31px;
|
||
height: 31px;
|
||
display: grid;
|
||
place-items: center;
|
||
color: #07130f;
|
||
border-radius: 9px;
|
||
background: #48dfbd;
|
||
font-size: 18px;
|
||
font-weight: 950;
|
||
}
|
||
.hpd-create-event > div {
|
||
min-width: 0;
|
||
display: grid;
|
||
gap: 2px;
|
||
}
|
||
.hpd-create-event strong {
|
||
color: #f0f6ff;
|
||
font-size: 10px;
|
||
font-weight: 950;
|
||
}
|
||
.hpd-create-event small {
|
||
overflow: hidden;
|
||
color: #7187a1;
|
||
font-size: 7px;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
.hpd-penalty-tools {
|
||
min-width: 0;
|
||
display: grid;
|
||
grid-template-columns: minmax(0, 1fr) 118px;
|
||
gap: 7px;
|
||
}
|
||
.hpd-infraction-dropdown {
|
||
position: relative;
|
||
min-width: 0;
|
||
}
|
||
.hpd-infraction-dropdown > summary {
|
||
height: 100%;
|
||
min-height: 52px;
|
||
display: grid;
|
||
grid-template-columns: minmax(0, 1fr) auto auto;
|
||
align-items: center;
|
||
gap: 6px;
|
||
padding: 0 10px;
|
||
color: #cbd8e7;
|
||
border: 1px solid #2d435d;
|
||
border-radius: 11px;
|
||
background: linear-gradient(180deg,#17273b,#0f1b2b);
|
||
cursor: pointer;
|
||
list-style: none;
|
||
}
|
||
.hpd-infraction-dropdown > summary::-webkit-details-marker { display: none; }
|
||
.hpd-infraction-dropdown > summary span {
|
||
font-size: 10px;
|
||
font-weight: 900;
|
||
}
|
||
.hpd-infraction-dropdown > summary strong {
|
||
min-width: 22px;
|
||
color: #07130f;
|
||
border-radius: 999px;
|
||
background: #48dfbd;
|
||
font-size: 8px;
|
||
line-height: 22px;
|
||
text-align: center;
|
||
}
|
||
.hpd-infraction-dropdown > summary i {
|
||
color: #7287a0;
|
||
font-size: 10px;
|
||
font-style: normal;
|
||
transition: transform .15s ease;
|
||
}
|
||
.hpd-infraction-dropdown[open] > summary i { transform: rotate(180deg); }
|
||
.hpd-infraction-popup {
|
||
position: absolute;
|
||
z-index: 80;
|
||
top: calc(100% + 6px);
|
||
right: 0;
|
||
width: min(355px, 72vw);
|
||
max-height: 430px;
|
||
display: grid;
|
||
grid-template-rows: auto auto minmax(0, 1fr);
|
||
gap: 6px;
|
||
padding: 9px;
|
||
overflow: hidden;
|
||
border: 1px solid #35506d;
|
||
border-radius: 13px;
|
||
background: #0b1726;
|
||
box-shadow: 0 20px 55px rgba(0,0,0,.48);
|
||
}
|
||
.hpd-infraction-hint {
|
||
color: #71869f;
|
||
font-size: 8px;
|
||
line-height: 1.35;
|
||
}
|
||
.hpd-infraction-popup .hpd-infraction-list {
|
||
max-height: 335px;
|
||
overflow-y: auto;
|
||
}
|
||
.hpd-infraction-row.is-drop-target,
|
||
.hpd-player-row.is-drop-target {
|
||
border-color: #f5c451;
|
||
background: rgba(245,196,81,.09);
|
||
}
|
||
.hpd-unassigned-events {
|
||
min-height: 0;
|
||
display: grid;
|
||
grid-template-columns: 135px minmax(0, 1fr);
|
||
gap: 7px;
|
||
padding: 7px;
|
||
border: 1px solid #293f58;
|
||
border-radius: 12px;
|
||
background: rgba(9,19,32,.66);
|
||
}
|
||
.hpd-unassigned-events.is-empty { opacity: .72; }
|
||
.hpd-unassigned-title {
|
||
display: grid;
|
||
align-content: center;
|
||
gap: 4px;
|
||
padding: 4px 6px;
|
||
}
|
||
.hpd-unassigned-title strong {
|
||
color: #8398b1;
|
||
font-size: 8px;
|
||
font-weight: 950;
|
||
line-height: 1.3;
|
||
text-transform: uppercase;
|
||
}
|
||
.hpd-unassigned-title span {
|
||
width: 25px;
|
||
color: #aebed1;
|
||
border: 1px solid #30465f;
|
||
border-radius: 999px;
|
||
background: #0c1725;
|
||
font-size: 8px;
|
||
font-weight: 900;
|
||
line-height: 23px;
|
||
text-align: center;
|
||
}
|
||
.hpd-unassigned-list {
|
||
min-width: 0;
|
||
display: grid;
|
||
grid-auto-flow: column;
|
||
grid-auto-columns: minmax(290px, 350px);
|
||
gap: 6px;
|
||
overflow-x: auto;
|
||
padding-bottom: 2px;
|
||
}
|
||
.hpd-unassigned-list.is-over,
|
||
.hpd-team-column-list.is-over {
|
||
box-shadow: inset 0 0 0 1px #48dfbd;
|
||
background: rgba(72,223,189,.035);
|
||
}
|
||
.hpd-unassigned-empty {
|
||
display: grid;
|
||
place-items: center;
|
||
color: #627891;
|
||
border: 1px dashed #30465f;
|
||
border-radius: 9px;
|
||
font-size: 8px;
|
||
font-weight: 800;
|
||
text-align: center;
|
||
}
|
||
.hpd-team-penalty-board {
|
||
min-height: 0;
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 9px;
|
||
}
|
||
.hpd-team-penalty-column {
|
||
--team-column-color: #7d91aa;
|
||
min-width: 0;
|
||
min-height: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
overflow: hidden;
|
||
border: 1px solid #293f58;
|
||
border-radius: 14px;
|
||
background: rgba(8,18,31,.72);
|
||
}
|
||
.hpd-team-penalty-column.team-home { --team-column-color: var(--hpd-home); }
|
||
.hpd-team-penalty-column.team-away { --team-column-color: var(--hpd-away); }
|
||
.hpd-team-column-header {
|
||
min-height: 46px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 8px;
|
||
padding: 6px 10px;
|
||
border-bottom: 1px solid #293f58;
|
||
background: linear-gradient(90deg, color-mix(in srgb,var(--team-column-color) 12%,transparent), transparent);
|
||
}
|
||
.hpd-team-column-header > div:first-child {
|
||
min-width: 0;
|
||
display: grid;
|
||
gap: 2px;
|
||
}
|
||
.hpd-team-column-header small {
|
||
color: #71869f;
|
||
font-size: 7px;
|
||
font-weight: 900;
|
||
letter-spacing: .1em;
|
||
}
|
||
.hpd-team-column-header strong {
|
||
overflow: hidden;
|
||
color: color-mix(in srgb,var(--team-column-color) 72%,white);
|
||
font-size: 11px;
|
||
font-weight: 950;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
.hpd-team-column-counts {
|
||
display: flex;
|
||
gap: 5px;
|
||
}
|
||
.hpd-team-column-counts span,
|
||
.hpd-team-column-counts b {
|
||
min-width: 23px;
|
||
border-radius: 999px;
|
||
font-size: 8px;
|
||
font-weight: 950;
|
||
line-height: 23px;
|
||
text-align: center;
|
||
}
|
||
.hpd-team-column-counts span {
|
||
color: #b8c7d8;
|
||
background: #21334a;
|
||
}
|
||
.hpd-team-column-counts b {
|
||
color: #07130f;
|
||
background: var(--team-column-color);
|
||
}
|
||
.hpd-team-column-list {
|
||
min-height: 0;
|
||
flex: 1;
|
||
display: grid;
|
||
align-content: start;
|
||
gap: 6px;
|
||
overflow-y: auto;
|
||
padding: 7px;
|
||
}
|
||
.hpd-team-column-empty {
|
||
min-height: 125px;
|
||
display: grid;
|
||
place-items: center;
|
||
padding: 18px;
|
||
color: #637993;
|
||
border: 1px dashed color-mix(in srgb,var(--team-column-color) 42%,#30465f);
|
||
border-radius: 10px;
|
||
font-size: 8px;
|
||
font-weight: 800;
|
||
line-height: 1.45;
|
||
text-align: center;
|
||
}
|
||
.hpd-team-penalty-card {
|
||
--team-card-color: #8195ad;
|
||
position: relative;
|
||
display: grid;
|
||
grid-template-columns: 5px minmax(0,1fr);
|
||
min-height: 106px;
|
||
overflow: hidden;
|
||
border: 1px solid #2d435d;
|
||
border-radius: 11px;
|
||
background: linear-gradient(100deg,color-mix(in srgb,var(--team-card-color) 9%,transparent),transparent 56%),#101d2e;
|
||
transition: border-color .14s ease,box-shadow .14s ease,opacity .14s ease;
|
||
}
|
||
.hpd-team-penalty-card.team-home { --team-card-color: var(--hpd-home); }
|
||
.hpd-team-penalty-card.team-away { --team-card-color: var(--hpd-away); }
|
||
.hpd-team-penalty-card.is-selected,
|
||
.hpd-team-penalty-card.is-over {
|
||
border-color: #48dfbd;
|
||
box-shadow: 0 0 0 3px rgba(72,223,189,.08);
|
||
}
|
||
.hpd-team-penalty-card.is-ready { border-color: color-mix(in srgb,#48dfbd 58%,#2d435d); }
|
||
.hpd-team-penalty-card.is-finished { opacity: .48; }
|
||
.hpd-team-card-accent {
|
||
width: 5px;
|
||
background: var(--team-card-color);
|
||
box-shadow: 0 0 15px color-mix(in srgb,var(--team-card-color) 54%,transparent);
|
||
}
|
||
.hpd-team-card-main {
|
||
min-width: 0;
|
||
display: grid;
|
||
gap: 6px;
|
||
padding: 7px 8px 9px;
|
||
}
|
||
.hpd-team-card-head {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 8px;
|
||
}
|
||
.hpd-team-card-player {
|
||
min-width: 0;
|
||
display: grid;
|
||
gap: 2px;
|
||
}
|
||
.hpd-team-card-player small {
|
||
color: color-mix(in srgb,var(--team-card-color) 74%,#9aaac0);
|
||
font-size: 7px;
|
||
font-weight: 900;
|
||
text-transform: uppercase;
|
||
}
|
||
.hpd-team-card-player strong {
|
||
overflow: hidden;
|
||
color: #edf4ff;
|
||
font-size: 11px;
|
||
font-weight: 900;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
.hpd-team-card-player.is-empty strong { color: #667c95; }
|
||
.hpd-team-card-clock {
|
||
min-width: 72px;
|
||
display: grid;
|
||
justify-items: end;
|
||
gap: 1px;
|
||
padding: 0;
|
||
color: #fff;
|
||
border: 0;
|
||
background: transparent;
|
||
}
|
||
.hpd-team-card-clock small {
|
||
color: #6f849d;
|
||
font-family: "Roboto Mono",Consolas,monospace;
|
||
font-size: 8px;
|
||
}
|
||
.hpd-team-card-clock strong {
|
||
font-family: "Roboto Mono",Consolas,monospace;
|
||
font-size: 21px;
|
||
font-variant-numeric: tabular-nums;
|
||
font-weight: 950;
|
||
letter-spacing: -.055em;
|
||
}
|
||
.hpd-team-card-details {
|
||
display: grid;
|
||
grid-template-columns: minmax(0,1.6fr) minmax(90px,.72fr);
|
||
gap: 5px;
|
||
}
|
||
.hpd-team-penalty-toggle {
|
||
min-height: 22px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
color: #879bb3;
|
||
font-size: 7.5px;
|
||
font-weight: 850;
|
||
cursor: pointer;
|
||
}
|
||
.hpd-team-penalty-toggle input {
|
||
width: 13px;
|
||
height: 13px;
|
||
margin: 0;
|
||
accent-color: #48dfbd;
|
||
}
|
||
.hpd-team-penalty-toggle:has(input:checked) {
|
||
color: #f0d08b;
|
||
}
|
||
.hpd-team-card-infraction,
|
||
.hpd-team-card-preset {
|
||
min-width: 0;
|
||
display: grid;
|
||
gap: 2px;
|
||
padding: 5px 7px;
|
||
border: 1px solid #2b4159;
|
||
border-radius: 8px;
|
||
background: rgba(8,18,30,.6);
|
||
}
|
||
.hpd-team-card-infraction.is-empty,
|
||
.hpd-team-card-preset.is-empty { border-style: dashed; }
|
||
.hpd-team-card-infraction small,
|
||
.hpd-team-card-preset small {
|
||
color: #657b95;
|
||
font-size: 7px;
|
||
font-weight: 900;
|
||
text-transform: uppercase;
|
||
}
|
||
.hpd-team-card-infraction strong,
|
||
.hpd-team-card-preset strong {
|
||
overflow: hidden;
|
||
color: #dce7f4;
|
||
font-size: 9px;
|
||
font-weight: 800;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
.hpd-team-card-infraction.is-empty strong,
|
||
.hpd-team-card-preset.is-empty strong { color: #657b95; }
|
||
.hpd-team-card-footer {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 7px;
|
||
}
|
||
.hpd-team-card-status {
|
||
color: #758ba4;
|
||
font-size: 8px;
|
||
font-weight: 900;
|
||
text-transform: uppercase;
|
||
}
|
||
.hpd-team-penalty-card.is-ready .hpd-team-card-status { color: #48dfbd; }
|
||
.hpd-team-penalty-card.is-running .hpd-team-card-status { color: var(--team-card-color); }
|
||
|
||
/* Quick timers: main center, home/away split */
|
||
.timer-editor-main-section,
|
||
.timer-editor-team-section,
|
||
.timer-editor-neutral-section,
|
||
.timer-editor-other-section {
|
||
display: grid;
|
||
gap: 8px;
|
||
}
|
||
.timer-editor-section-title {
|
||
min-height: 31px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 8px;
|
||
padding: 0 10px;
|
||
border: 1px solid #2a3d55;
|
||
border-radius: 10px;
|
||
background: #0c1726;
|
||
}
|
||
.timer-editor-section-title strong {
|
||
color: #aebed1;
|
||
font-size: 9px;
|
||
font-weight: 950;
|
||
letter-spacing: .08em;
|
||
text-transform: uppercase;
|
||
}
|
||
.timer-editor-section-title span {
|
||
min-width: 23px;
|
||
color: #9fb1c7;
|
||
border-radius: 999px;
|
||
background: #21334a;
|
||
font-size: 8px;
|
||
font-weight: 950;
|
||
line-height: 23px;
|
||
text-align: center;
|
||
}
|
||
.timer-editor-main-list {
|
||
width: min(780px,100%);
|
||
justify-self: center;
|
||
}
|
||
.timer-editor-main-list .timer-editor-row {
|
||
border-color: rgba(72,223,189,.42);
|
||
background: linear-gradient(100deg,rgba(72,223,189,.08),transparent 54%),#0d1726;
|
||
}
|
||
.timer-editor-main-list .timer-editor-live strong {
|
||
font-size: 31px;
|
||
}
|
||
.timer-editor-team-grid {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 11px;
|
||
}
|
||
.timer-editor-team-section {
|
||
--timer-team-color: #8094ad;
|
||
min-width: 0;
|
||
padding: 8px;
|
||
border: 1px solid #2a3d55;
|
||
border-radius: 13px;
|
||
background: rgba(8,18,31,.72);
|
||
}
|
||
.timer-editor-team-section.team-home { --timer-team-color: #4d9cff; }
|
||
.timer-editor-team-section.team-away { --timer-team-color: #ff5f79; }
|
||
.timer-editor-team-section .timer-editor-section-title {
|
||
border-color: color-mix(in srgb,var(--timer-team-color) 40%,#2a3d55);
|
||
background: linear-gradient(90deg,color-mix(in srgb,var(--timer-team-color) 10%,transparent),#0c1726);
|
||
}
|
||
.timer-editor-team-section .timer-editor-section-title strong {
|
||
color: color-mix(in srgb,var(--timer-team-color) 72%,white);
|
||
}
|
||
.timer-editor-team-list,
|
||
.timer-editor-neutral-list {
|
||
display: grid;
|
||
gap: 7px;
|
||
}
|
||
.timer-editor-hockey-row {
|
||
grid-template-columns: 40px minmax(150px,1fr) 95px 128px auto;
|
||
min-height: 71px;
|
||
}
|
||
.timer-editor-hockey-row.team-home { border-left: 3px solid #4d9cff; }
|
||
.timer-editor-hockey-row.team-away { border-left: 3px solid #ff5f79; }
|
||
.timer-editor-hockey-row.team-neutral { border-left: 3px solid #8296ad; }
|
||
.timer-editor-kind.team-home { color:#fff;background:#4d9cff; }
|
||
.timer-editor-kind.team-away { color:#fff;background:#ff5f79; }
|
||
.timer-editor-kind.team-neutral { color:#fff;background:#71859d; }
|
||
.timer-editor-empty {
|
||
min-height: 85px;
|
||
display: grid;
|
||
place-items: center;
|
||
color: #627891;
|
||
border: 1px dashed #30465f;
|
||
border-radius: 10px;
|
||
font-size: 9px;
|
||
font-weight: 800;
|
||
}
|
||
@media (max-width: 1050px) {
|
||
.timer-editor-team-grid { grid-template-columns: 1fr; }
|
||
.hpd-tools-row { grid-template-columns: 160px minmax(0,1fr); }
|
||
.hpd-penalty-tools { grid-template-columns: minmax(0,1fr) 105px; }
|
||
}
|
||
|
||
|
||
/* =========================================================================
|
||
v17 — larger main timer card and collapsible journal
|
||
========================================================================= */
|
||
|
||
.modal-card:has(.timer-quick-editor) {
|
||
width: min(1460px, 98vw);
|
||
max-height: 95vh;
|
||
padding: 20px;
|
||
}
|
||
.modal-card:has(.timer-quick-editor) .modal-head {
|
||
position: sticky;
|
||
top: -20px;
|
||
z-index: 8;
|
||
margin: -20px -20px 0;
|
||
padding: 17px 20px 14px;
|
||
border-bottom: 1px solid #2a3e57;
|
||
background: rgba(17,27,43,.97);
|
||
backdrop-filter: blur(12px);
|
||
}
|
||
.timer-quick-editor {
|
||
gap: 18px;
|
||
}
|
||
.timer-editor-toolbar {
|
||
top: 34px;
|
||
margin: 0;
|
||
padding: 14px 2px 15px;
|
||
}
|
||
.timer-editor-toolbar strong {
|
||
font-size: 17px;
|
||
}
|
||
.timer-editor-toolbar p {
|
||
font-size: 12px;
|
||
}
|
||
|
||
.timer-editor-main-section {
|
||
gap: 10px;
|
||
padding: 12px;
|
||
border: 1px solid rgba(72,223,189,.34);
|
||
border-radius: 17px;
|
||
background:
|
||
radial-gradient(circle at 50% 0%, rgba(72,223,189,.11), transparent 52%),
|
||
linear-gradient(145deg, #111f31, #0a1524);
|
||
box-shadow: 0 18px 40px rgba(0,0,0,.20);
|
||
}
|
||
.timer-editor-main-section .timer-editor-section-title {
|
||
min-height: 37px;
|
||
border-color: rgba(72,223,189,.28);
|
||
background: rgba(7,19,27,.48);
|
||
}
|
||
.timer-editor-main-section .timer-editor-section-title strong {
|
||
color: #7ff0d5;
|
||
font-size: 10px;
|
||
}
|
||
.timer-editor-main-list {
|
||
width: min(1040px, 100%);
|
||
}
|
||
.timer-editor-main-list .timer-editor-row {
|
||
grid-template-columns: 72px minmax(260px,1fr) 205px 200px auto;
|
||
min-height: 132px;
|
||
gap: 18px;
|
||
padding: 20px 22px;
|
||
border-color: rgba(72,223,189,.46);
|
||
border-radius: 16px;
|
||
background:
|
||
linear-gradient(100deg,rgba(72,223,189,.12),transparent 58%),
|
||
#0c1828;
|
||
box-shadow:
|
||
inset 0 1px rgba(255,255,255,.035),
|
||
0 12px 34px rgba(0,0,0,.24);
|
||
}
|
||
.timer-editor-main-list .timer-editor-kind {
|
||
width: 64px;
|
||
height: 64px;
|
||
border-radius: 17px;
|
||
font-size: 25px;
|
||
box-shadow: 0 0 28px rgba(72,223,189,.23);
|
||
}
|
||
.timer-editor-main-list .timer-editor-info {
|
||
gap: 7px;
|
||
}
|
||
.timer-editor-main-list .timer-editor-info strong {
|
||
font-size: 19px;
|
||
}
|
||
.timer-editor-main-list .timer-editor-info span {
|
||
font-size: 11px;
|
||
}
|
||
.timer-editor-main-list .timer-editor-live {
|
||
justify-items: center;
|
||
gap: 7px;
|
||
padding: 10px 16px;
|
||
border: 1px solid rgba(72,223,189,.22);
|
||
border-radius: 14px;
|
||
background: rgba(5,15,24,.55);
|
||
}
|
||
.timer-editor-main-list .timer-editor-live strong {
|
||
font-size: clamp(42px, 4.6vw, 62px);
|
||
line-height: .95;
|
||
text-shadow: 0 0 25px rgba(72,223,189,.28);
|
||
}
|
||
.timer-editor-main-list .timer-editor-live span {
|
||
color: #76d9c3;
|
||
font-size: 10px;
|
||
}
|
||
.timer-editor-main-list .timer-editor-input {
|
||
gap: 8px;
|
||
}
|
||
.timer-editor-main-list .timer-editor-input span {
|
||
font-size: 10px;
|
||
}
|
||
.timer-editor-main-list .timer-editor-input input {
|
||
min-height: 54px;
|
||
border-radius: 12px;
|
||
font-size: 22px;
|
||
}
|
||
.timer-editor-main-list .timer-editor-actions {
|
||
flex-wrap: wrap;
|
||
max-width: 220px;
|
||
gap: 8px;
|
||
}
|
||
.timer-editor-main-list .timer-editor-actions .btn {
|
||
min-height: 42px;
|
||
padding: 0 14px;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.timer-editor-team-grid {
|
||
gap: 14px;
|
||
}
|
||
.timer-editor-team-section {
|
||
padding: 10px;
|
||
border-radius: 15px;
|
||
}
|
||
.timer-editor-team-section .timer-editor-section-title {
|
||
min-height: 37px;
|
||
}
|
||
.timer-editor-team-list {
|
||
max-height: 43vh;
|
||
overflow-y: auto;
|
||
padding-right: 3px;
|
||
}
|
||
.timer-editor-hockey-row {
|
||
grid-template-columns: 42px minmax(150px,1fr) 102px 136px auto;
|
||
min-height: 76px;
|
||
padding: 9px 10px;
|
||
}
|
||
.timer-editor-hockey-row .timer-editor-live strong {
|
||
font-size: 25px;
|
||
}
|
||
|
||
/* Journal is collapsed by default and expands on click */
|
||
.hpd-center--teams {
|
||
grid-template-rows: auto auto minmax(250px,1fr) auto;
|
||
}
|
||
.hpd-history-collapsible {
|
||
min-height: 39px;
|
||
display: block;
|
||
overflow: hidden;
|
||
border: 1px solid #293f58;
|
||
border-radius: 12px;
|
||
background: rgba(9,18,31,.76);
|
||
}
|
||
.hpd-history-collapsible > summary {
|
||
min-height: 39px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 10px;
|
||
padding: 0 10px;
|
||
cursor: pointer;
|
||
list-style: none;
|
||
user-select: none;
|
||
}
|
||
.hpd-history-collapsible > summary::-webkit-details-marker {
|
||
display: none;
|
||
}
|
||
.hpd-history-collapsible > summary > div {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
.hpd-history-chevron {
|
||
width: 22px;
|
||
height: 22px;
|
||
display: grid;
|
||
place-items: center;
|
||
color: #8296ae;
|
||
border: 1px solid #2d435d;
|
||
border-radius: 7px;
|
||
background: #0b1726;
|
||
font-size: 16px;
|
||
font-weight: 900;
|
||
transform: rotate(0deg);
|
||
transition: transform .16s ease, color .16s ease, border-color .16s ease;
|
||
}
|
||
.hpd-history-collapsible[open] .hpd-history-chevron {
|
||
color: #48dfbd;
|
||
border-color: rgba(72,223,189,.38);
|
||
transform: rotate(90deg);
|
||
}
|
||
.hpd-history-collapsible .hpd-history-header strong {
|
||
color: #a4b6ca;
|
||
font-size: 9px;
|
||
font-weight: 950;
|
||
letter-spacing: .08em;
|
||
text-transform: uppercase;
|
||
}
|
||
.hpd-history-count {
|
||
min-width: 25px;
|
||
color: #a7b7ca;
|
||
border-radius: 999px;
|
||
background: #21334a;
|
||
font-size: 8px;
|
||
font-weight: 950;
|
||
line-height: 23px;
|
||
text-align: center;
|
||
}
|
||
.hpd-history-collapsible[open] .hpd-history-list {
|
||
max-height: 185px;
|
||
padding: 6px 7px 8px;
|
||
border-top: 1px solid #263b54;
|
||
overflow-y: auto;
|
||
}
|
||
.hpd-history-collapsible:not([open]) .hpd-history-list {
|
||
display: none;
|
||
}
|
||
.hpd-history-collapsible .hpd-history-header {
|
||
border-bottom: 0;
|
||
background: linear-gradient(90deg,rgba(72,223,189,.035),transparent);
|
||
}
|
||
|
||
@media (max-width: 1220px) {
|
||
.timer-editor-main-list .timer-editor-row {
|
||
grid-template-columns: 62px minmax(200px,1fr) 170px 170px;
|
||
}
|
||
.timer-editor-main-list .timer-editor-actions {
|
||
grid-column: 2 / 5;
|
||
justify-content: flex-end;
|
||
max-width: none;
|
||
}
|
||
}
|
||
@media (max-width: 900px) {
|
||
.modal-card:has(.timer-quick-editor) {
|
||
width: 98vw;
|
||
padding: 14px;
|
||
}
|
||
.modal-card:has(.timer-quick-editor) .modal-head {
|
||
top: -14px;
|
||
margin: -14px -14px 0;
|
||
padding: 14px;
|
||
}
|
||
.timer-editor-main-list .timer-editor-row {
|
||
grid-template-columns: 52px minmax(0,1fr) 130px;
|
||
min-height: 150px;
|
||
gap: 11px;
|
||
padding: 14px;
|
||
}
|
||
.timer-editor-main-list .timer-editor-kind {
|
||
width: 48px;
|
||
height: 48px;
|
||
border-radius: 13px;
|
||
font-size: 19px;
|
||
}
|
||
.timer-editor-main-list .timer-editor-input {
|
||
grid-column: 2 / 4;
|
||
}
|
||
.timer-editor-main-list .timer-editor-actions {
|
||
grid-column: 1 / 4;
|
||
}
|
||
}
|
||
|
||
|
||
/* =========================================================================
|
||
v18 — protected editor, clean hockey header, CSS tooltips
|
||
========================================================================= */
|
||
|
||
/* Clean hockey module header */
|
||
.hpd-header.hpd-header--clean {
|
||
min-height: 54px;
|
||
grid-template-columns: minmax(0,1fr);
|
||
padding: 9px 16px;
|
||
}
|
||
.hpd-header--clean > div {
|
||
display: grid;
|
||
gap: 2px;
|
||
}
|
||
.hpd-header--clean strong {
|
||
font-size: 17px;
|
||
}
|
||
.hpd-header--clean + .hpd-layout {
|
||
min-height: 0;
|
||
}
|
||
|
||
/* Hockey team statistics */
|
||
.hockey-statistics-hub {
|
||
width: 100%;
|
||
height: 100%;
|
||
min-height: 0;
|
||
display: grid;
|
||
grid-template-rows: 38px minmax(0, 1fr);
|
||
gap: 7px;
|
||
overflow: hidden;
|
||
}
|
||
.hsh-navigation {
|
||
display: grid;
|
||
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
|
||
align-items: center;
|
||
padding: 0 10px;
|
||
border: 1px solid #263b55;
|
||
border-radius: 11px;
|
||
background: rgba(10, 22, 37, .94);
|
||
}
|
||
.hsh-navigation > span {
|
||
color: #687f98;
|
||
font-size: 7px;
|
||
font-weight: 950;
|
||
letter-spacing: .16em;
|
||
}
|
||
.hsh-navigation nav { grid-column: 2; min-width: 0; display: flex; gap: 5px; overflow-x: auto; scrollbar-width: thin; }
|
||
.hsh-navigation button {
|
||
min-width: 112px;
|
||
min-height: 28px;
|
||
padding: 0 14px;
|
||
color: #8ca0b8;
|
||
border: 1px solid #2b425d;
|
||
border-radius: 8px;
|
||
background: #0d1a2b;
|
||
font-size: 9px;
|
||
font-weight: 900;
|
||
}
|
||
.hsh-navigation button:hover { color: #edf5fd; border-color: #4a6a88; }
|
||
.hsh-navigation button.active {
|
||
color: #06140f;
|
||
border-color: transparent;
|
||
background: #48dfbd;
|
||
box-shadow: 0 4px 15px rgba(72, 223, 189, .14);
|
||
}
|
||
.hsh-content { min-height: 0; overflow: hidden; }
|
||
.hsh-content > * { width: 100%; height: 100%; }
|
||
|
||
.hockey-tournament-statistics {
|
||
width: 100%;
|
||
height: 100%;
|
||
min-height: 0;
|
||
display: grid;
|
||
grid-template-rows: auto minmax(0, 1fr);
|
||
gap: 10px;
|
||
padding: 14px;
|
||
border: 1px solid #263b55;
|
||
border-radius: 17px;
|
||
background:
|
||
radial-gradient(circle at 8% 0%, rgba(72, 223, 189, .08), transparent 30%),
|
||
linear-gradient(180deg, rgba(13, 27, 44, .98), rgba(7, 17, 29, .98));
|
||
overflow: hidden;
|
||
}
|
||
.htr-header {
|
||
min-width: 0;
|
||
display: grid;
|
||
grid-template-columns: minmax(190px, 1fr) auto minmax(150px, 1fr);
|
||
align-items: center;
|
||
gap: 12px;
|
||
}
|
||
.htr-header > div { min-width: 0; display: grid; gap: 2px; }
|
||
.htr-header > div > span { color: #48dfbd; font-size: 7px; font-weight: 950; letter-spacing: .16em; }
|
||
.htr-header > div > strong { color: #edf5fc; font-size: 20px; font-weight: 950; }
|
||
.htr-header > div > small { color: #70869e; font-size: 8px; font-weight: 750; }
|
||
.htr-header > b { color: #9fb1c5; font-size: 10px; text-align: center; }
|
||
.htr-header > time { color: #637a92; font-size: 7px; font-weight: 800; text-align: right; }
|
||
.htr-header nav { min-width: 0; display: flex; justify-content: center; gap: 5px; overflow-x: auto; scrollbar-width: thin; }
|
||
.htr-header nav button {
|
||
min-height: 28px;
|
||
padding: 0 11px;
|
||
border: 1px solid #2a435e;
|
||
border-radius: 8px;
|
||
color: #8ba0b8;
|
||
background: #0b192a;
|
||
font-size: 8px;
|
||
font-weight: 900;
|
||
white-space: nowrap;
|
||
}
|
||
.htr-header nav button:hover { color: #eef6fc; border-color: #486a88; }
|
||
.htr-header nav button.active { color: #06140f; border-color: transparent; background: #48dfbd; }
|
||
.htr-table-scroll {
|
||
min-height: 0;
|
||
overflow: auto;
|
||
border: 1px solid #213851;
|
||
border-radius: 12px;
|
||
background: rgba(5, 15, 26, .82);
|
||
}
|
||
.htr-table-scroll table { width: 100%; min-width: 720px; border-collapse: separate; border-spacing: 0; }
|
||
.htr-table-scroll th,
|
||
.htr-table-scroll td {
|
||
height: 31px;
|
||
padding: 0 9px;
|
||
border-bottom: 1px solid rgba(38, 59, 85, .62);
|
||
color: #91a5ba;
|
||
font: 800 9px "Roboto Mono", Consolas, monospace;
|
||
text-align: center;
|
||
white-space: nowrap;
|
||
}
|
||
.htr-table-scroll th {
|
||
position: sticky;
|
||
top: 0;
|
||
z-index: 2;
|
||
height: 30px;
|
||
color: #7189a1;
|
||
background: #0d1c2e;
|
||
font-size: 7px;
|
||
letter-spacing: .04em;
|
||
text-transform: uppercase;
|
||
}
|
||
.htr-table-scroll tbody tr:hover td { background: rgba(72, 223, 189, .035); color: #c7d4e1; }
|
||
.htr-table-scroll tbody tr.htr-current-team.side-home td {
|
||
background: rgba(77, 156, 255, .11);
|
||
background: color-mix(in srgb, var(--htr-home) 13%, #07111d);
|
||
color: #d9e9f8;
|
||
}
|
||
.htr-table-scroll tbody tr.htr-current-team.side-away td {
|
||
background: rgba(255, 95, 121, .11);
|
||
background: color-mix(in srgb, var(--htr-away) 13%, #07111d);
|
||
color: #f0dde2;
|
||
}
|
||
.htr-table-scroll tbody tr.htr-current-team.side-home td:first-child { box-shadow: inset 3px 0 0 var(--htr-home); }
|
||
.htr-table-scroll tbody tr.htr-current-team.side-away td:first-child { box-shadow: inset 3px 0 0 var(--htr-away); }
|
||
.htr-table-scroll tbody tr.htr-current-team td.htr-name strong { color: #fff; }
|
||
.htr-table-scroll tbody tr.htr-current-team:hover td { filter: brightness(1.08); }
|
||
.htr-table-scroll tbody tr:last-child td { border-bottom: 0; }
|
||
.htr-table-scroll .htr-rank { width: 44px; color: #48dfbd; font-weight: 950; }
|
||
.htr-table-scroll .htr-number { width: 44px; color: #c8d5e2; }
|
||
.htr-table-scroll .htr-name,
|
||
.htr-table-scroll .htr-team { text-align: left; }
|
||
.htr-table-scroll .htr-name { min-width: 210px; }
|
||
.htr-table-scroll td.htr-name strong { color: #e8f1fa; font-family: inherit; font-size: 10px; }
|
||
.htr-table-scroll .htr-team { min-width: 140px; color: #7f95aa; }
|
||
.htr-empty {
|
||
place-self: center;
|
||
display: grid;
|
||
gap: 7px;
|
||
color: #71869f;
|
||
text-align: center;
|
||
}
|
||
.htr-empty strong { color: #bdcad9; font-size: 18px; }
|
||
.htr-empty span { font-size: 11px; }
|
||
.hockey-team-statistics {
|
||
--hts-home: #4d9cff;
|
||
--hts-away: #ff5f79;
|
||
width: 100%;
|
||
height: 100%;
|
||
min-height: 0;
|
||
display: grid;
|
||
grid-template-rows: auto auto minmax(0, 1fr);
|
||
gap: 11px;
|
||
overflow: hidden;
|
||
padding: 15px;
|
||
color: #eef4ff;
|
||
border: 1px solid #263b55;
|
||
border-radius: 20px;
|
||
background:
|
||
radial-gradient(circle at 5% 0%, color-mix(in srgb, var(--hts-home) 13%, transparent), transparent 29%),
|
||
radial-gradient(circle at 95% 0%, color-mix(in srgb, var(--hts-away) 12%, transparent), transparent 29%),
|
||
#08111e;
|
||
}
|
||
.hts-header {
|
||
min-height: 78px;
|
||
display: grid;
|
||
grid-template-columns: minmax(0, 1fr) 210px minmax(0, 1fr);
|
||
align-items: center;
|
||
gap: 15px;
|
||
padding: 10px 17px;
|
||
border: 1px solid #263b54;
|
||
border-radius: 15px;
|
||
background: rgba(11, 23, 39, .86);
|
||
}
|
||
.hts-team {
|
||
min-width: 0;
|
||
display: grid;
|
||
gap: 3px;
|
||
}
|
||
.hts-team.away { text-align: right; }
|
||
.hts-team span {
|
||
color: #6f849f;
|
||
font-size: 8px;
|
||
font-weight: 950;
|
||
letter-spacing: .13em;
|
||
}
|
||
.hts-team strong {
|
||
overflow: hidden;
|
||
color: color-mix(in srgb, var(--hts-home) 70%, white);
|
||
font-size: 20px;
|
||
font-weight: 950;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
.hts-team.away strong {
|
||
color: color-mix(in srgb, var(--hts-away) 70%, white);
|
||
}
|
||
.hts-score {
|
||
display: grid;
|
||
place-items: center;
|
||
gap: 3px;
|
||
}
|
||
.hts-score strong {
|
||
color: #f5f8fc;
|
||
font-family: "Roboto Mono", "Cascadia Mono", Consolas, monospace;
|
||
font-size: 30px;
|
||
font-weight: 950;
|
||
letter-spacing: -.06em;
|
||
line-height: 1;
|
||
}
|
||
.hts-score span {
|
||
color: #70859f;
|
||
font-size: 7px;
|
||
font-weight: 950;
|
||
letter-spacing: .12em;
|
||
}
|
||
.hts-segments {
|
||
display: flex;
|
||
justify-content: center;
|
||
gap: 5px;
|
||
min-height: 38px;
|
||
}
|
||
.hts-segments button {
|
||
min-width: 86px;
|
||
padding: 0 13px;
|
||
color: #8ea1ba;
|
||
border: 1px solid #2a4059;
|
||
border-radius: 9px;
|
||
background: #0d1929;
|
||
font-size: 10px;
|
||
font-weight: 900;
|
||
}
|
||
.hts-segments button:hover {
|
||
color: #eaf2fc;
|
||
border-color: #476784;
|
||
}
|
||
.hts-segments button.active {
|
||
color: #07130f;
|
||
border-color: transparent;
|
||
background: #48dfbd;
|
||
box-shadow: 0 5px 18px rgba(72, 223, 189, .16);
|
||
}
|
||
.hts-grid {
|
||
min-height: 0;
|
||
display: grid;
|
||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||
align-content: start;
|
||
gap: 6px 9px;
|
||
overflow: hidden;
|
||
}
|
||
.hts-column {
|
||
min-width: 0;
|
||
display: grid;
|
||
align-content: start;
|
||
gap: 6px;
|
||
}
|
||
.hts-metric {
|
||
min-width: 0;
|
||
min-height: 51px;
|
||
display: grid;
|
||
grid-template-columns: 64px minmax(0, 1fr) 64px;
|
||
align-items: center;
|
||
gap: 10px;
|
||
padding: 6px 11px;
|
||
border: 1px solid #243950;
|
||
border-radius: 11px;
|
||
background: rgba(13, 25, 42, .78);
|
||
}
|
||
.hts-metric > strong {
|
||
font-family: "Roboto Mono", "Cascadia Mono", Consolas, monospace;
|
||
font-size: 18px;
|
||
font-weight: 950;
|
||
font-variant-numeric: tabular-nums;
|
||
}
|
||
.hts-home-value { color: color-mix(in srgb, var(--hts-home) 72%, white); }
|
||
.hts-away-value {
|
||
color: color-mix(in srgb, var(--hts-away) 72%, white);
|
||
text-align: right;
|
||
}
|
||
.hts-metric > div {
|
||
min-width: 0;
|
||
display: grid;
|
||
gap: 5px;
|
||
}
|
||
.hts-metric > div > span {
|
||
overflow: hidden;
|
||
color: #9badc2;
|
||
font-size: 11px;
|
||
font-weight: 850;
|
||
text-align: center;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
.hts-comparison {
|
||
height: 4px;
|
||
display: flex;
|
||
overflow: hidden;
|
||
border-radius: 999px;
|
||
background: #101d2d;
|
||
}
|
||
.hts-comparison i { display: block; height: 100%; }
|
||
.hts-comparison i.home { background: var(--hts-home); }
|
||
.hts-comparison i.away { background: var(--hts-away); }
|
||
.hts-empty {
|
||
grid-row: 1 / -1;
|
||
place-self: center;
|
||
display: grid;
|
||
gap: 7px;
|
||
color: #71869f;
|
||
text-align: center;
|
||
}
|
||
.hts-empty strong { color: #bdcad9; font-size: 18px; }
|
||
.hts-empty span { font-size: 11px; }
|
||
|
||
/* Hockey tournament standings */
|
||
.hockey-tournament-standings {
|
||
--htb-home: #4d9cff;
|
||
--htb-away: #ff5f79;
|
||
width: 100%;
|
||
height: 100%;
|
||
min-height: 0;
|
||
display: grid;
|
||
grid-template-rows: auto minmax(0, 1fr) auto;
|
||
gap: 9px;
|
||
overflow: hidden;
|
||
padding: 13px;
|
||
color: #eef4ff;
|
||
border: 1px solid #263b55;
|
||
border-radius: 20px;
|
||
background:
|
||
radial-gradient(circle at 0 0, rgba(72, 223, 189, .08), transparent 28%),
|
||
#08111e;
|
||
}
|
||
.htb-header {
|
||
min-height: 61px;
|
||
display: grid;
|
||
grid-template-columns: minmax(210px, 1fr) auto minmax(210px, 1fr);
|
||
align-items: center;
|
||
gap: 14px;
|
||
padding: 8px 14px;
|
||
border: 1px solid #263b54;
|
||
border-radius: 14px;
|
||
background: rgba(11, 23, 39, .9);
|
||
}
|
||
.htb-header > div { display: grid; gap: 2px; }
|
||
.htb-header > div span {
|
||
color: #668099;
|
||
font-size: 7px;
|
||
font-weight: 950;
|
||
letter-spacing: .16em;
|
||
}
|
||
.htb-header > div strong { font-size: 20px; font-weight: 950; }
|
||
.htb-header nav { display: flex; justify-content: center; gap: 5px; }
|
||
.htb-header button {
|
||
min-height: 35px;
|
||
padding: 0 15px;
|
||
color: #8da1b9;
|
||
border: 1px solid #2a4059;
|
||
border-radius: 9px;
|
||
background: #0d1929;
|
||
font-size: 10.5px;
|
||
font-weight: 900;
|
||
}
|
||
.htb-header button:hover { color: #edf5ff; border-color: #496b88; }
|
||
.htb-header button.active {
|
||
color: #06140f;
|
||
border-color: transparent;
|
||
background: #48dfbd;
|
||
box-shadow: 0 5px 18px rgba(72, 223, 189, .15);
|
||
}
|
||
.htb-header > small {
|
||
justify-self: end;
|
||
color: #667d97;
|
||
font-size: 8px;
|
||
font-weight: 800;
|
||
white-space: nowrap;
|
||
}
|
||
.htb-groups {
|
||
min-height: 0;
|
||
display: grid;
|
||
gap: 8px;
|
||
overflow: hidden;
|
||
}
|
||
.htb-groups.groups-1 { grid-template-columns: 1fr; }
|
||
.htb-groups.groups-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||
.htb-groups.groups-3,
|
||
.htb-groups.groups-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||
.htb-groups.groups-3,
|
||
.htb-groups.groups-4 { grid-template-rows: repeat(2, minmax(0, 1fr)); }
|
||
.htb-group {
|
||
min-width: 0;
|
||
min-height: 0;
|
||
display: grid;
|
||
grid-template-rows: 31px minmax(0, 1fr);
|
||
overflow: hidden;
|
||
border: 1px solid #243950;
|
||
border-radius: 11px;
|
||
background: rgba(11, 22, 37, .78);
|
||
}
|
||
.htb-group > header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 0 9px;
|
||
border-bottom: 1px solid #243950;
|
||
background: rgba(18, 33, 53, .78);
|
||
}
|
||
.htb-group > header strong {
|
||
overflow: hidden;
|
||
font-size: 11.5px;
|
||
font-weight: 950;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
.htb-group > header span {
|
||
min-width: 24px;
|
||
color: #6f849d;
|
||
font-size: 8px;
|
||
font-weight: 900;
|
||
text-align: right;
|
||
}
|
||
.htb-table-scroll {
|
||
min-height: 0;
|
||
overflow: auto;
|
||
overscroll-behavior: contain;
|
||
scrollbar-gutter: stable;
|
||
}
|
||
.htb-table-scroll thead {
|
||
position: sticky;
|
||
top: 0;
|
||
z-index: 2;
|
||
}
|
||
.htb-table-scroll::-webkit-scrollbar { width: 8px; height: 8px; }
|
||
.htb-table-scroll::-webkit-scrollbar-track { background: rgba(5, 13, 23, .7); }
|
||
.htb-table-scroll::-webkit-scrollbar-thumb {
|
||
border: 2px solid rgba(5, 13, 23, .7);
|
||
border-radius: 999px;
|
||
background: #35516d;
|
||
}
|
||
.htb-group table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
table-layout: fixed;
|
||
font-variant-numeric: tabular-nums;
|
||
}
|
||
.htb-group th,
|
||
.htb-group td {
|
||
height: 24px;
|
||
padding: 0 4px;
|
||
overflow: hidden;
|
||
border-bottom: 1px solid rgba(39, 57, 79, .58);
|
||
color: #879bb2;
|
||
font-family: "Roboto Mono", "Cascadia Mono", Consolas, monospace;
|
||
font-size: 9px;
|
||
font-weight: 800;
|
||
text-align: center;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
.htb-group th {
|
||
height: 24px;
|
||
color: #617991;
|
||
background: rgba(8, 17, 30, .72);
|
||
font-size: 8px;
|
||
letter-spacing: .03em;
|
||
}
|
||
.htb-group th:nth-child(1),
|
||
.htb-group td:nth-child(1) { width: 30px; }
|
||
.htb-group th:nth-child(2),
|
||
.htb-group td:nth-child(2) { width: 32%; }
|
||
.htb-group th:nth-child(10),
|
||
.htb-group td:nth-child(10) { width: 49px; }
|
||
.htb-group th:nth-child(11),
|
||
.htb-group td:nth-child(11) { width: 35px; }
|
||
.htb-group .htb-team {
|
||
position: relative;
|
||
padding-left: 8px;
|
||
font-family: inherit;
|
||
text-align: left;
|
||
}
|
||
.htb-team strong {
|
||
overflow: hidden;
|
||
display: block;
|
||
color: #c2cfdd;
|
||
font-size: 10px;
|
||
font-weight: 900;
|
||
text-overflow: ellipsis;
|
||
}
|
||
.htb-team i {
|
||
position: absolute;
|
||
left: 2px;
|
||
top: 50%;
|
||
width: 4px;
|
||
height: 4px;
|
||
border-radius: 50%;
|
||
background: transparent;
|
||
transform: translateY(-50%);
|
||
}
|
||
.htb-points { color: #eaf2fc !important; font-weight: 950 !important; }
|
||
.htb-goals { color: #9eafc2 !important; }
|
||
.htb-group tr.playoff-cut td { border-top: 1px dashed rgba(72, 223, 189, .56); }
|
||
.htb-group tr.is-highlighted td {
|
||
color: #eaf3ff;
|
||
background: color-mix(in srgb, var(--team-color) 14%, transparent);
|
||
border-bottom-color: color-mix(in srgb, var(--team-color) 34%, transparent);
|
||
}
|
||
.htb-group tr.is-highlighted .htb-team strong { color: #fff; }
|
||
.htb-group tr.side-home { --team-color: var(--htb-home); }
|
||
.htb-group tr.side-away { --team-color: var(--htb-away); }
|
||
.htb-group tr.is-highlighted .htb-team i {
|
||
background: var(--team-color);
|
||
box-shadow: 0 0 7px color-mix(in srgb, var(--team-color) 75%, transparent);
|
||
}
|
||
.htb-legend {
|
||
min-height: 18px;
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
gap: 13px;
|
||
padding: 0 3px;
|
||
color: #70859e;
|
||
font-size: 7px;
|
||
font-weight: 850;
|
||
}
|
||
.htb-legend span { display: inline-flex; align-items: center; gap: 5px; }
|
||
.htb-legend i { width: 6px; height: 6px; border-radius: 50%; }
|
||
.htb-legend .home i { background: var(--htb-home); }
|
||
.htb-legend .away i { background: var(--htb-away); }
|
||
.htb-empty {
|
||
grid-row: 1 / -1;
|
||
place-self: center;
|
||
display: grid;
|
||
gap: 7px;
|
||
color: #71869f;
|
||
text-align: center;
|
||
}
|
||
.htb-empty strong { color: #bdcad9; font-size: 18px; }
|
||
.htb-empty span { font-size: 11px; }
|
||
|
||
/* Hockey player statistics */
|
||
.hockey-player-statistics {
|
||
--ppi-home: #4d9cff;
|
||
--ppi-away: #ff5f79;
|
||
position: relative;
|
||
width: 100%;
|
||
height: 100%;
|
||
min-height: 0;
|
||
display: grid;
|
||
grid-template-rows: auto auto minmax(0, 1fr) auto;
|
||
gap: 7px;
|
||
overflow: hidden;
|
||
padding: 11px;
|
||
color: #eef4ff;
|
||
border: 1px solid #263b55;
|
||
border-radius: 20px;
|
||
background:
|
||
radial-gradient(circle at 0 0, color-mix(in srgb, var(--ppi-home) 9%, transparent), transparent 28%),
|
||
radial-gradient(circle at 100% 0, color-mix(in srgb, var(--ppi-away) 8%, transparent), transparent 28%),
|
||
#08111e;
|
||
}
|
||
.ppi-header {
|
||
min-height: 56px;
|
||
display: grid;
|
||
grid-template-columns: minmax(210px, 1fr) auto minmax(190px, 1fr);
|
||
align-items: center;
|
||
gap: 12px;
|
||
padding: 7px 12px;
|
||
border: 1px solid #263b54;
|
||
border-radius: 13px;
|
||
background: rgba(11, 23, 39, .9);
|
||
}
|
||
.ppi-header > div { display: grid; gap: 1px; }
|
||
.ppi-header > div span {
|
||
color: #658099;
|
||
font-size: 7px;
|
||
font-weight: 950;
|
||
letter-spacing: .16em;
|
||
}
|
||
.ppi-header > div strong { font-size: 18px; font-weight: 950; }
|
||
.ppi-header nav { display: flex; justify-content: center; gap: 4px; }
|
||
.ppi-header nav button {
|
||
max-width: 145px;
|
||
min-height: 32px;
|
||
overflow: hidden;
|
||
padding: 0 12px;
|
||
color: #8da1b9;
|
||
border: 1px solid #2a4059;
|
||
border-radius: 8px;
|
||
background: #0d1929;
|
||
font-size: 9px;
|
||
font-weight: 900;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
.ppi-header nav button.active {
|
||
color: #06140f;
|
||
border-color: transparent;
|
||
background: #48dfbd;
|
||
}
|
||
.ppi-header > label {
|
||
justify-self: end;
|
||
width: min(230px, 100%);
|
||
min-height: 32px;
|
||
display: grid;
|
||
grid-template-columns: 25px minmax(0, 1fr);
|
||
align-items: center;
|
||
padding: 0 8px;
|
||
border: 1px solid #2a4059;
|
||
border-radius: 8px;
|
||
background: #091522;
|
||
}
|
||
.ppi-header > label span { color: #70879f; font-size: 15px; }
|
||
.ppi-header > label input {
|
||
min-width: 0;
|
||
padding: 0;
|
||
color: #dce8f5;
|
||
border: 0;
|
||
outline: 0;
|
||
background: transparent;
|
||
font-size: 9px;
|
||
font-weight: 750;
|
||
}
|
||
.ppi-leaders {
|
||
min-height: 48px;
|
||
display: grid;
|
||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||
gap: 6px;
|
||
}
|
||
.ppi-leaders.leaders-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
|
||
.ppi-leaders article {
|
||
min-width: 0;
|
||
display: grid;
|
||
grid-template-columns: minmax(0, 1fr) auto;
|
||
grid-template-rows: auto auto;
|
||
align-items: center;
|
||
gap: 1px 8px;
|
||
padding: 5px 10px;
|
||
border: 1px solid #243950;
|
||
border-radius: 10px;
|
||
background: rgba(13, 25, 42, .78);
|
||
}
|
||
.ppi-leaders article span {
|
||
color: #6f859e;
|
||
font-size: 7px;
|
||
font-weight: 900;
|
||
letter-spacing: .04em;
|
||
text-transform: uppercase;
|
||
}
|
||
.ppi-leaders article strong {
|
||
grid-column: 2;
|
||
grid-row: 1 / 3;
|
||
color: #48dfbd;
|
||
font-family: "Roboto Mono", "Cascadia Mono", Consolas, monospace;
|
||
font-size: 18px;
|
||
font-weight: 950;
|
||
}
|
||
.ppi-leaders article small {
|
||
overflow: hidden;
|
||
color: #c2d0df;
|
||
font-size: 9px;
|
||
font-weight: 850;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
.ppi-skater-tables {
|
||
min-height: 0;
|
||
display: grid;
|
||
gap: 7px;
|
||
overflow: hidden;
|
||
}
|
||
.ppi-skater-tables.columns-1 { grid-template-columns: 1fr; }
|
||
.ppi-skater-tables.columns-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||
.ppi-team-table {
|
||
--ppi-side: var(--ppi-home);
|
||
min-width: 0;
|
||
min-height: 0;
|
||
display: grid;
|
||
grid-template-rows: 29px minmax(0, 1fr);
|
||
overflow: hidden;
|
||
border: 1px solid #243950;
|
||
border-radius: 10px;
|
||
background: rgba(10, 21, 36, .82);
|
||
}
|
||
.ppi-team-table.side-away { --ppi-side: var(--ppi-away); }
|
||
.ppi-team-table > header {
|
||
min-width: 0;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 8px;
|
||
padding: 0 9px;
|
||
border-bottom: 1px solid #243950;
|
||
box-shadow: inset 3px 0 var(--ppi-side);
|
||
background: rgba(18, 33, 53, .8);
|
||
}
|
||
.ppi-team-table > header div { min-width: 0; display: flex; align-items: baseline; gap: 7px; }
|
||
.ppi-team-table > header span { color: #6b829b; font-size: 6.5px; font-weight: 950; letter-spacing: .1em; }
|
||
.ppi-team-table > header strong {
|
||
overflow: hidden;
|
||
color: color-mix(in srgb, var(--ppi-side) 68%, white);
|
||
font-size: 10px;
|
||
font-weight: 950;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
.ppi-team-table > header b { color: #7289a2; font-size: 8px; }
|
||
.ppi-table-wrap { min-height: 0; overflow: hidden; }
|
||
.ppi-team-table table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
table-layout: fixed;
|
||
font-variant-numeric: tabular-nums;
|
||
}
|
||
.ppi-team-table th,
|
||
.ppi-team-table td {
|
||
height: 19px;
|
||
padding: 0 3px;
|
||
overflow: hidden;
|
||
border-bottom: 1px solid rgba(39, 57, 79, .52);
|
||
color: #8da0b6;
|
||
font-family: "Roboto Mono", "Cascadia Mono", Consolas, monospace;
|
||
font-size: 8px;
|
||
font-weight: 800;
|
||
text-align: center;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
.ppi-team-table th {
|
||
height: 21px;
|
||
color: #627a93;
|
||
background: rgba(7, 16, 28, .78);
|
||
font-size: 6.5px;
|
||
font-weight: 950;
|
||
}
|
||
.ppi-team-table th:nth-child(1), .ppi-team-table td:nth-child(1) { width: 27px; }
|
||
.ppi-team-table th:nth-child(2), .ppi-team-table td:nth-child(2) { width: 31%; }
|
||
.ppi-team-table th:nth-child(3), .ppi-team-table td:nth-child(3) { width: 31px; }
|
||
.ppi-team-table th:nth-child(11), .ppi-team-table td:nth-child(11) { width: 45px; }
|
||
.ppi-team-table .ppi-player-name {
|
||
position: relative;
|
||
padding-left: 7px;
|
||
font-family: inherit;
|
||
text-align: left;
|
||
}
|
||
.ppi-player-name strong {
|
||
overflow: hidden;
|
||
display: inline-block;
|
||
max-width: calc(100% - 20px);
|
||
color: #c7d3df;
|
||
font-size: 8.5px;
|
||
font-weight: 900;
|
||
text-overflow: ellipsis;
|
||
vertical-align: middle;
|
||
}
|
||
.ppi-player-name i {
|
||
display: inline-grid;
|
||
place-items: center;
|
||
width: 13px;
|
||
height: 13px;
|
||
margin-left: 3px;
|
||
color: #07130f;
|
||
border-radius: 50%;
|
||
background: #48dfbd;
|
||
font-size: 6px;
|
||
font-style: normal;
|
||
font-weight: 950;
|
||
vertical-align: middle;
|
||
}
|
||
.ppi-team-table tbody tr { cursor: pointer; transition: background .12s ease; }
|
||
.ppi-team-table tbody tr:hover { background: color-mix(in srgb, var(--ppi-side) 12%, transparent); }
|
||
.ppi-team-table tr.not-played { opacity: .42; }
|
||
.ppi-team-table tr[hidden] { display: none; }
|
||
.ppi-team-table .ppi-points { color: #eef5fd; font-weight: 950; }
|
||
.ppi-team-table .ppi-toi { color: color-mix(in srgb, var(--ppi-side) 58%, white); }
|
||
.ppi-team-table .ppi-plus-minus.positive { color: #65e4c6; }
|
||
.ppi-team-table .ppi-plus-minus.negative { color: #ff8497; }
|
||
.ppi-season-table th:nth-child(3),
|
||
.ppi-season-table td:nth-child(3) { width: 28px; }
|
||
.ppi-season-table th:nth-child(7),
|
||
.ppi-season-table td:nth-child(7) { width: 32px; }
|
||
.ppi-goalkeepers {
|
||
min-height: 104px;
|
||
display: grid;
|
||
grid-template-rows: 21px auto;
|
||
gap: 4px;
|
||
}
|
||
.ppi-goalkeepers > header { display: flex; align-items: baseline; gap: 8px; padding: 0 3px; }
|
||
.ppi-goalkeepers > header strong { font-size: 11px; font-weight: 950; }
|
||
.ppi-goalkeepers > header span { color: #6c8199; font-size: 7px; font-weight: 800; }
|
||
.ppi-goalkeepers > div { min-height: 0; display: grid; gap: 7px; }
|
||
.ppi-goalkeepers > div.columns-1 { grid-template-columns: 1fr; }
|
||
.ppi-goalkeepers > div.columns-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||
.ppi-goalie-team {
|
||
--ppi-side: var(--ppi-home);
|
||
min-width: 0;
|
||
display: grid;
|
||
grid-template-columns: minmax(90px, 18%) minmax(0, 1fr);
|
||
align-items: stretch;
|
||
overflow: hidden;
|
||
border: 1px solid #243950;
|
||
border-radius: 10px;
|
||
background: rgba(11, 23, 39, .84);
|
||
}
|
||
.ppi-goalie-team.side-away { --ppi-side: var(--ppi-away); }
|
||
.ppi-goalie-team > strong {
|
||
display: grid;
|
||
place-items: center start;
|
||
overflow: hidden;
|
||
padding: 0 9px;
|
||
color: color-mix(in srgb, var(--ppi-side) 65%, white);
|
||
border-right: 1px solid #243950;
|
||
box-shadow: inset 3px 0 var(--ppi-side);
|
||
font-size: 8px;
|
||
font-weight: 950;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
.ppi-goalie-team > div { min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||
.ppi-goalie-card {
|
||
min-width: 0;
|
||
display: grid;
|
||
grid-template-columns: minmax(82px, .85fr) minmax(145px, 1.45fr);
|
||
align-items: center;
|
||
gap: 6px;
|
||
padding: 5px 7px;
|
||
border-left: 1px solid #243950;
|
||
cursor: pointer;
|
||
}
|
||
.ppi-goalie-card.not-played { opacity: .45; }
|
||
.ppi-goalie-person { min-width: 0; display: grid; grid-template-columns: 29px minmax(0, 1fr); align-items: center; gap: 6px; }
|
||
.ppi-goalie-person > b {
|
||
width: 28px;
|
||
height: 28px;
|
||
display: grid;
|
||
place-items: center;
|
||
color: #06131f;
|
||
border-radius: 8px;
|
||
background: color-mix(in srgb, var(--ppi-side) 78%, white);
|
||
font-size: 10px;
|
||
font-weight: 950;
|
||
}
|
||
.ppi-goalie-person span { min-width: 0; display: grid; gap: 1px; }
|
||
.ppi-goalie-person strong { overflow: hidden; color: #d5e0eb; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
|
||
.ppi-goalie-person small { color: #6f849b; font-size: 6.5px; }
|
||
.ppi-goalie-card dl { min-width: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 3px; margin: 0; }
|
||
.ppi-season-goalie dl { grid-template-columns: repeat(6, minmax(0, 1fr)); }
|
||
.ppi-goalie-card dl div { min-width: 0; display: grid; gap: 1px; text-align: center; }
|
||
.ppi-goalie-card dt { color: #667c94; font-size: 6px; font-weight: 900; }
|
||
.ppi-goalie-card dd { margin: 0; color: #e4edf6; font: 900 8.5px "Roboto Mono", Consolas, monospace; }
|
||
.ppi-detail-backdrop {
|
||
position: absolute;
|
||
inset: 0;
|
||
z-index: 20;
|
||
background: rgba(2, 8, 15, .76);
|
||
backdrop-filter: blur(3px);
|
||
}
|
||
.ppi-player-detail {
|
||
position: absolute;
|
||
left: 50%;
|
||
top: 50%;
|
||
z-index: 21;
|
||
width: min(1040px, calc(100% - 34px));
|
||
max-height: calc(100% - 30px);
|
||
overflow: auto;
|
||
padding: 25px;
|
||
border: 1px solid #355170;
|
||
border-radius: 22px;
|
||
background: linear-gradient(145deg, #11243a, #081522 72%);
|
||
box-shadow: 0 28px 90px rgba(0, 0, 0, .58);
|
||
transform: translate(-50%, -50%);
|
||
}
|
||
.ppi-player-detail > button {
|
||
position: absolute;
|
||
right: 12px;
|
||
top: 10px;
|
||
width: 38px;
|
||
height: 38px;
|
||
color: #91a5bb;
|
||
border: 1px solid #314b66;
|
||
border-radius: 8px;
|
||
background: #0b1a2a;
|
||
font-size: 22px;
|
||
}
|
||
.ppi-player-detail > header { display: grid; grid-template-columns: 84px minmax(0, 1fr); align-items: center; gap: 18px; padding-right: 48px; }
|
||
.ppi-player-detail > header > b {
|
||
width: 84px;
|
||
height: 84px;
|
||
display: grid;
|
||
place-items: center;
|
||
color: #06130f;
|
||
border-radius: 21px;
|
||
background: #48dfbd;
|
||
font: 950 31px "Roboto Mono", Consolas, monospace;
|
||
}
|
||
.ppi-player-detail > header div { min-width: 0; display: grid; gap: 2px; }
|
||
.ppi-player-detail > header span { color: #6d879f; font-size: 9px; font-weight: 950; letter-spacing: .12em; }
|
||
.ppi-player-detail > header strong { overflow: hidden; font-size: 29px; font-weight: 950; text-overflow: ellipsis; white-space: nowrap; }
|
||
.ppi-player-detail > header small { color: #7890a8; font-size: 11px; }
|
||
.ppi-player-detail > section { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; margin-top: 21px; }
|
||
.ppi-player-detail > section div { min-width: 0; min-height: 70px; display: grid; align-content: center; gap: 7px; padding: 11px 13px; border: 1px solid #28415b; border-radius: 12px; background: rgba(8, 20, 33, .76); }
|
||
.ppi-player-detail > section span { color: #7289a1; font-size: 9px; font-weight: 850; }
|
||
.ppi-player-detail > section strong { color: #edf5fc; font: 950 18px "Roboto Mono", Consolas, monospace; }
|
||
.ppi-empty {
|
||
grid-row: 1 / -1;
|
||
place-self: center;
|
||
display: grid;
|
||
gap: 7px;
|
||
color: #71869f;
|
||
text-align: center;
|
||
}
|
||
.ppi-empty strong { color: #bdcad9; font-size: 18px; }
|
||
.ppi-empty span { font-size: 11px; }
|
||
|
||
@media (max-width: 900px) {
|
||
.hsh-navigation button { min-width: 84px; padding: 0 9px; }
|
||
.htr-header { grid-template-columns: 1fr; }
|
||
.htr-header > time { display: none; }
|
||
.htr-header nav { justify-content: flex-start; }
|
||
.hts-header { grid-template-columns: minmax(0, 1fr) 140px minmax(0, 1fr); }
|
||
.hts-team strong { font-size: 15px; }
|
||
.hts-score strong { font-size: 24px; }
|
||
.hts-grid { grid-template-columns: 1fr; overflow-y: auto; }
|
||
.hts-column { gap: 6px; }
|
||
.htb-header { grid-template-columns: 1fr; }
|
||
.htb-header > small { display: none; }
|
||
.htb-groups.groups-2,
|
||
.htb-groups.groups-3,
|
||
.htb-groups.groups-4 { grid-template-columns: 1fr; overflow-y: auto; }
|
||
.ppi-header { grid-template-columns: 1fr; }
|
||
.ppi-header > label { display: none; }
|
||
.ppi-leaders { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||
.ppi-player-detail > section { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||
.ppi-skater-tables.columns-2,
|
||
.ppi-goalkeepers > div.columns-2 { grid-template-columns: 1fr; overflow-y: auto; }
|
||
.ppi-goalie-team { grid-template-columns: 1fr; }
|
||
.ppi-goalie-team > strong { display: none; }
|
||
}
|
||
.hpd-tools-row.hpd-tools-row--compact {
|
||
display: block;
|
||
}
|
||
.hpd-tools-row--compact .hpd-penalty-tools {
|
||
grid-template-columns: minmax(0,1fr) 128px;
|
||
}
|
||
|
||
/* Editor session controls */
|
||
.editor-session-badge {
|
||
min-height: 34px;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
padding: 0 11px;
|
||
color: #87dec9;
|
||
border: 1px solid rgba(72,223,189,.28);
|
||
border-radius: 9px;
|
||
background: rgba(72,223,189,.07);
|
||
font-size: 10px;
|
||
font-variant-numeric: tabular-nums;
|
||
font-weight: 900;
|
||
letter-spacing: .04em;
|
||
}
|
||
.editor-lock-btn {
|
||
color: #ffc0c9;
|
||
border-color: rgba(255,102,125,.32);
|
||
background: rgba(255,102,125,.07);
|
||
}
|
||
.runtime-editor-hint {
|
||
min-height: 32px;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
padding: 0 10px;
|
||
color: #8296af;
|
||
border: 1px solid #2c425c;
|
||
border-radius: 8px;
|
||
background: rgba(11,22,37,.72);
|
||
font-family: "Roboto Mono","Cascadia Mono",Consolas,monospace;
|
||
font-size: 9px;
|
||
font-weight: 850;
|
||
letter-spacing: .03em;
|
||
}
|
||
|
||
/* PIN dialog */
|
||
.modal-card:has(.editor-pin-dialog) {
|
||
width: min(490px,94vw);
|
||
overflow: visible;
|
||
}
|
||
.editor-pin-dialog {
|
||
display: grid;
|
||
grid-template-columns: 58px minmax(0,1fr);
|
||
gap: 13px;
|
||
padding-top: 4px;
|
||
}
|
||
.editor-pin-icon {
|
||
width: 54px;
|
||
height: 54px;
|
||
display: grid;
|
||
place-items: center;
|
||
color: #07130f;
|
||
border-radius: 15px;
|
||
background: linear-gradient(145deg,#79efd3,#36c6a7);
|
||
box-shadow: 0 0 30px rgba(72,223,189,.22);
|
||
font-size: 23px;
|
||
font-weight: 950;
|
||
}
|
||
.editor-pin-copy {
|
||
display: grid;
|
||
align-content: center;
|
||
gap: 4px;
|
||
}
|
||
.editor-pin-copy strong {
|
||
color: #eff6ff;
|
||
font-size: 16px;
|
||
}
|
||
.editor-pin-copy p {
|
||
margin: 0;
|
||
color: #8194ad;
|
||
font-size: 11px;
|
||
line-height: 1.45;
|
||
}
|
||
.editor-pin-field {
|
||
grid-column: 1 / 3;
|
||
display: grid;
|
||
gap: 7px;
|
||
}
|
||
.editor-pin-field > span {
|
||
color: #8498b1;
|
||
font-size: 9px;
|
||
font-weight: 900;
|
||
letter-spacing: .08em;
|
||
text-transform: uppercase;
|
||
}
|
||
.editor-pin-field input {
|
||
width: 100%;
|
||
min-height: 58px;
|
||
color: #fff;
|
||
border: 1px solid #344e6a;
|
||
border-radius: 13px;
|
||
background: #081421;
|
||
font-family: "Roboto Mono","Cascadia Mono",Consolas,monospace;
|
||
font-size: 27px;
|
||
font-weight: 950;
|
||
letter-spacing: .38em;
|
||
text-align: center;
|
||
outline: none;
|
||
}
|
||
.editor-pin-field input:focus {
|
||
border-color: #48dfbd;
|
||
box-shadow: 0 0 0 4px rgba(72,223,189,.09);
|
||
}
|
||
.editor-pin-preview {
|
||
grid-column: 1 / 3;
|
||
display: flex;
|
||
justify-content: center;
|
||
gap: 9px;
|
||
}
|
||
.editor-pin-preview i {
|
||
width: 10px;
|
||
height: 10px;
|
||
border: 1px solid #36506b;
|
||
border-radius: 50%;
|
||
background: #0b1726;
|
||
transition: .14s ease;
|
||
}
|
||
.editor-pin-preview i.filled {
|
||
border-color: #48dfbd;
|
||
background: #48dfbd;
|
||
box-shadow: 0 0 12px rgba(72,223,189,.55);
|
||
}
|
||
.editor-pin-message {
|
||
grid-column: 1 / 3;
|
||
min-height: 34px;
|
||
display: grid;
|
||
place-items: center;
|
||
padding: 7px 10px;
|
||
color: #8095ae;
|
||
border: 1px solid #293f58;
|
||
border-radius: 9px;
|
||
background: rgba(8,18,30,.64);
|
||
font-size: 10px;
|
||
text-align: center;
|
||
}
|
||
.editor-pin-message.error {
|
||
color: #ffc3cc;
|
||
border-color: rgba(255,102,125,.36);
|
||
background: rgba(255,102,125,.07);
|
||
}
|
||
.editor-pin-dialog.success .editor-pin-icon {
|
||
transform: scale(1.05);
|
||
box-shadow: 0 0 38px rgba(72,223,189,.36);
|
||
}
|
||
.editor-pin-actions {
|
||
grid-column: 1 / 3;
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
gap: 8px;
|
||
}
|
||
|
||
/* Global custom tooltips */
|
||
.ui-custom-tooltip {
|
||
position: fixed;
|
||
z-index: 10000;
|
||
max-width: min(320px,calc(100vw - 24px));
|
||
padding: 8px 11px;
|
||
color: #eaf2fd;
|
||
border: 1px solid #3a5674;
|
||
border-radius: 9px;
|
||
background:
|
||
linear-gradient(145deg,rgba(25,41,62,.98),rgba(10,21,35,.98));
|
||
box-shadow:
|
||
0 14px 35px rgba(0,0,0,.42),
|
||
inset 0 1px rgba(255,255,255,.04);
|
||
font-size: 10px;
|
||
font-weight: 750;
|
||
line-height: 1.4;
|
||
letter-spacing: .015em;
|
||
opacity: 0;
|
||
pointer-events: none;
|
||
transform: translateY(4px) scale(.98);
|
||
transition: opacity .13s ease,transform .13s ease;
|
||
}
|
||
.ui-custom-tooltip::before {
|
||
content: "";
|
||
position: absolute;
|
||
left: 50%;
|
||
bottom: -5px;
|
||
width: 8px;
|
||
height: 8px;
|
||
border-right: 1px solid #3a5674;
|
||
border-bottom: 1px solid #3a5674;
|
||
background: #0e1b2d;
|
||
transform: translateX(-50%) rotate(45deg);
|
||
}
|
||
.ui-custom-tooltip.show {
|
||
opacity: 1;
|
||
transform: translateY(0) scale(1);
|
||
}
|
||
|
||
/* Topbar can fit publish/session controls */
|
||
.topbar .top-actions {
|
||
gap: 7px;
|
||
}
|
||
@media (max-width: 1500px) {
|
||
.editor-session-badge {
|
||
order: 5;
|
||
}
|
||
}
|
||
|
||
/* Three-state sorting for every real table inside the hockey statistics views. */
|
||
.hockey-statistics-hub table th.hst-sortable,
|
||
.hockey-player-statistics table th.hst-sortable,
|
||
.hockey-tournament-statistics table th.hst-sortable {
|
||
cursor: pointer;
|
||
user-select: none;
|
||
transition: color .12s ease, background .12s ease;
|
||
}
|
||
.hockey-statistics-hub table th.hst-sortable::after,
|
||
.hockey-player-statistics table th.hst-sortable::after,
|
||
.hockey-tournament-statistics table th.hst-sortable::after {
|
||
content: "↕";
|
||
display: inline-block;
|
||
min-width: 9px;
|
||
margin-left: 4px;
|
||
color: #49647e;
|
||
font-size: .9em;
|
||
line-height: 1;
|
||
opacity: .72;
|
||
}
|
||
.hockey-statistics-hub table th.hst-sortable:hover,
|
||
.hockey-player-statistics table th.hst-sortable:hover,
|
||
.hockey-tournament-statistics table th.hst-sortable:hover,
|
||
.hockey-statistics-hub table th.hst-sortable:focus-visible,
|
||
.hockey-player-statistics table th.hst-sortable:focus-visible,
|
||
.hockey-tournament-statistics table th.hst-sortable:focus-visible {
|
||
color: #dce9f5;
|
||
outline: none;
|
||
}
|
||
.hockey-statistics-hub table th.hst-sort-active,
|
||
.hockey-player-statistics table th.hst-sort-active,
|
||
.hockey-tournament-statistics table th.hst-sort-active {
|
||
color: #48dfbd;
|
||
}
|
||
.hockey-statistics-hub table th.hst-sort-asc::after,
|
||
.hockey-player-statistics table th.hst-sort-asc::after,
|
||
.hockey-tournament-statistics table th.hst-sort-asc::after {
|
||
content: "↑";
|
||
color: #48dfbd;
|
||
opacity: 1;
|
||
}
|
||
.hockey-statistics-hub table th.hst-sort-desc::after,
|
||
.hockey-player-statistics table th.hst-sort-desc::after,
|
||
.hockey-tournament-statistics table th.hst-sort-desc::after {
|
||
content: "↓";
|
||
color: #48dfbd;
|
||
opacity: 1;
|
||
}
|
||
|
||
/* ========================================================================
|
||
Stable runtime canvas on every monitor and in browser fullscreen mode
|
||
======================================================================== */
|
||
html,
|
||
body {
|
||
width: 100%;
|
||
height: 100%;
|
||
overflow-x: hidden;
|
||
}
|
||
|
||
.runtime-view {
|
||
height: 100vh;
|
||
height: 100dvh;
|
||
}
|
||
|
||
.runtime-viewport {
|
||
align-items: flex-start;
|
||
justify-content: center;
|
||
overflow: hidden;
|
||
padding: 10px;
|
||
}
|
||
|
||
.runtime-sizer {
|
||
position: relative;
|
||
flex: 0 0 auto;
|
||
margin: 0 auto;
|
||
overflow: visible;
|
||
}
|
||
|
||
.runtime-stage {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
margin: 0;
|
||
transform-origin: top left;
|
||
backface-visibility: hidden;
|
||
will-change: transform;
|
||
}
|
||
|
||
/* Hockey pages live on a fixed logical canvas. Browser-width media queries
|
||
must not rearrange the content inside that canvas after it has been scaled. */
|
||
.runtime-view .hpd-workbench {
|
||
grid-template-columns: minmax(190px, 225px) minmax(380px, 1fr);
|
||
}
|
||
.runtime-view .hpd-event-fields {
|
||
grid-template-columns: 1.12fr 1.42fr .72fr;
|
||
}
|
||
.runtime-view .hpd-tools-row:not(.hpd-tools-row--compact) {
|
||
grid-template-columns: 178px minmax(0, 1fr);
|
||
}
|
||
.runtime-view .hpd-penalty-tools {
|
||
grid-template-columns: minmax(0, 1fr) 118px;
|
||
}
|
||
.runtime-view .timer-editor-team-grid {
|
||
grid-template-columns: 1fr 1fr;
|
||
}
|
||
.runtime-view .hsh-navigation button {
|
||
min-width: 112px;
|
||
padding: 0 12px;
|
||
}
|
||
.runtime-view .htr-header {
|
||
grid-template-columns: minmax(190px, 1fr) auto minmax(150px, 1fr);
|
||
}
|
||
.runtime-view .htr-header > time {
|
||
display: block;
|
||
}
|
||
.runtime-view .htr-header nav {
|
||
justify-content: center;
|
||
}
|
||
.runtime-view .hts-header {
|
||
grid-template-columns: minmax(0, 1fr) 210px minmax(0, 1fr);
|
||
}
|
||
.runtime-view .hts-team strong {
|
||
font-size: 20px;
|
||
}
|
||
.runtime-view .hts-score strong {
|
||
font-size: 30px;
|
||
}
|
||
.runtime-view .hts-grid {
|
||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||
overflow: hidden;
|
||
}
|
||
.runtime-view .htb-header {
|
||
grid-template-columns: minmax(210px, 1fr) auto minmax(210px, 1fr);
|
||
}
|
||
.runtime-view .htb-header > small {
|
||
display: block;
|
||
}
|
||
.runtime-view .htb-groups.groups-2,
|
||
.runtime-view .htb-groups.groups-3,
|
||
.runtime-view .htb-groups.groups-4 {
|
||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||
overflow: hidden;
|
||
}
|
||
.runtime-view .ppi-header {
|
||
grid-template-columns: minmax(210px, 1fr) auto minmax(190px, 1fr);
|
||
}
|
||
.runtime-view .ppi-header > label {
|
||
display: grid;
|
||
}
|
||
.runtime-view .ppi-leaders {
|
||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||
}
|
||
.runtime-view .ppi-skater-tables.columns-2,
|
||
.runtime-view .ppi-goalkeepers > div.columns-2 {
|
||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||
overflow: hidden;
|
||
}
|
||
.runtime-view .ppi-goalie-team {
|
||
grid-template-columns: minmax(90px, 18%) minmax(0, 1fr);
|
||
}
|
||
.runtime-view .ppi-goalie-team > strong {
|
||
display: grid;
|
||
}
|
||
.runtime-view .hpd-tools-row--compact .hpd-penalty-tools {
|
||
grid-template-columns: minmax(0, 1fr) 128px;
|
||
}
|
||
|
||
/* v24 — compact icon actions in the quick timer editor */
|
||
.timer-editor-icon-btn {
|
||
position: relative;
|
||
width: 40px;
|
||
height: 40px;
|
||
flex: 0 0 40px;
|
||
display: grid;
|
||
place-items: center;
|
||
padding: 0;
|
||
color: #c9d6e5;
|
||
border: 1px solid #344c67;
|
||
border-radius: 11px;
|
||
background: linear-gradient(180deg, #1a2a3f, #101b2b);
|
||
box-shadow: inset 0 1px rgba(255,255,255,.035), 0 7px 16px rgba(0,0,0,.15);
|
||
cursor: pointer;
|
||
font-size: 18px;
|
||
font-weight: 950;
|
||
line-height: 1;
|
||
transition: transform .14s ease, border-color .14s ease, color .14s ease, background .14s ease, box-shadow .14s ease;
|
||
}
|
||
.timer-editor-icon-btn:hover:not(:disabled),
|
||
.timer-editor-icon-btn:focus-visible:not(:disabled) {
|
||
z-index: 8;
|
||
transform: translateY(-2px);
|
||
color: #fff;
|
||
border-color: #6287ae;
|
||
box-shadow: inset 0 1px rgba(255,255,255,.06), 0 10px 23px rgba(0,0,0,.25);
|
||
outline: none;
|
||
}
|
||
.timer-editor-icon-btn.is-apply {
|
||
color: #7ff0d5;
|
||
border-color: rgba(72,223,189,.38);
|
||
background: linear-gradient(180deg, rgba(72,223,189,.15), rgba(20,54,48,.34));
|
||
}
|
||
.timer-editor-icon-btn.is-toggle {
|
||
color: #8cc2ff;
|
||
border-color: rgba(77,156,255,.38);
|
||
background: linear-gradient(180deg, rgba(77,156,255,.14), rgba(23,48,78,.36));
|
||
}
|
||
.timer-editor-row.is-running .timer-editor-icon-btn.is-toggle {
|
||
color: #ffd37a;
|
||
border-color: rgba(245,196,81,.46);
|
||
background: linear-gradient(180deg, rgba(245,196,81,.15), rgba(68,52,18,.36));
|
||
}
|
||
.timer-editor-icon-btn.is-reset {
|
||
color: #ff9caf;
|
||
border-color: rgba(255,95,121,.34);
|
||
background: linear-gradient(180deg, rgba(255,95,121,.12), rgba(70,25,35,.34));
|
||
}
|
||
.timer-editor-icon-btn:disabled {
|
||
cursor: not-allowed;
|
||
filter: grayscale(.45);
|
||
opacity: .36;
|
||
box-shadow: none;
|
||
}
|
||
.timer-editor-icon-btn::after {
|
||
content: attr(data-tooltip);
|
||
position: absolute;
|
||
right: 0;
|
||
bottom: calc(100% + 9px);
|
||
width: max-content;
|
||
max-width: 230px;
|
||
padding: 7px 9px;
|
||
color: #edf5ff;
|
||
border: 1px solid #3a526e;
|
||
border-radius: 8px;
|
||
background: rgba(7,15,25,.97);
|
||
box-shadow: 0 12px 28px rgba(0,0,0,.33);
|
||
font-size: 10px;
|
||
font-weight: 750;
|
||
line-height: 1.3;
|
||
letter-spacing: 0;
|
||
text-align: left;
|
||
text-transform: none;
|
||
white-space: normal;
|
||
opacity: 0;
|
||
pointer-events: none;
|
||
transform: translateY(4px);
|
||
transition: opacity .14s ease, transform .14s ease;
|
||
}
|
||
.timer-editor-icon-btn:hover::after,
|
||
.timer-editor-icon-btn:focus-visible::after {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
.timer-editor-main-list .timer-editor-actions .timer-editor-icon-btn {
|
||
width: 48px;
|
||
height: 48px;
|
||
flex-basis: 48px;
|
||
border-radius: 13px;
|
||
font-size: 21px;
|
||
}
|
||
|
||
/* Five match/season leader cards always stay on one row in runtime. */
|
||
.runtime-view .ppi-leaders,
|
||
.runtime-view .ppi-leaders.leaders-5 {
|
||
grid-template-columns: repeat(5, minmax(0, 1fr));
|
||
}
|
||
|
||
/* Match events and shots map */
|
||
.hockey-team-statistics.has-mode-tabs {
|
||
grid-template-rows: auto auto auto minmax(0, 1fr);
|
||
}
|
||
.hockey-team-statistics.has-mode-tabs.is-shot-map {
|
||
grid-template-rows: auto minmax(0, 1fr);
|
||
}
|
||
.hts-mode-tabs {
|
||
min-height: 34px;
|
||
display: flex;
|
||
justify-content: center;
|
||
gap: 6px;
|
||
}
|
||
.hts-mode-tabs button {
|
||
min-width: 128px;
|
||
padding: 0 16px;
|
||
color: #8095ad;
|
||
border: 1px solid #29425d;
|
||
border-radius: 10px;
|
||
background: rgba(10, 24, 40, .92);
|
||
font-size: 9px;
|
||
font-weight: 950;
|
||
letter-spacing: .03em;
|
||
}
|
||
.hts-mode-tabs button:hover { color: #edf5fc; border-color: #4d6f8e; }
|
||
.hts-mode-tabs button.active {
|
||
color: #06140f;
|
||
border-color: transparent;
|
||
background: #48dfbd;
|
||
box-shadow: 0 5px 18px rgba(72, 223, 189, .14);
|
||
}
|
||
|
||
.hockey-match-events {
|
||
--hme-home: #4d9cff;
|
||
--hme-away: #ff5f79;
|
||
width: 100%;
|
||
height: 100%;
|
||
min-height: 0;
|
||
display: grid;
|
||
grid-template-rows: auto auto minmax(0, 1fr);
|
||
gap: 9px;
|
||
padding: 14px;
|
||
overflow: hidden;
|
||
color: #eef4ff;
|
||
border: 1px solid #263b55;
|
||
border-radius: 18px;
|
||
background:
|
||
radial-gradient(circle at 8% 0%, rgba(72, 223, 189, .09), transparent 29%),
|
||
linear-gradient(180deg, rgba(13, 27, 44, .98), rgba(7, 17, 29, .98));
|
||
}
|
||
.hme-header {
|
||
min-width: 0;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 14px;
|
||
}
|
||
.hme-header > div { min-width: 0; display: grid; gap: 2px; }
|
||
.hme-header span { color: #48dfbd; font-size: 7px; font-weight: 950; letter-spacing: .16em; }
|
||
.hme-header strong { color: #edf5fc; font-size: 20px; font-weight: 950; }
|
||
.hme-header small { color: #71869e; font-size: 8px; font-weight: 800; }
|
||
.hme-header > b {
|
||
min-width: 52px;
|
||
height: 34px;
|
||
display: grid;
|
||
place-items: center;
|
||
color: #06140f;
|
||
border-radius: 10px;
|
||
background: #48dfbd;
|
||
font: 950 15px "Roboto Mono", Consolas, monospace;
|
||
}
|
||
.hme-periods {
|
||
min-height: 31px;
|
||
display: flex;
|
||
gap: 5px;
|
||
overflow-x: auto;
|
||
scrollbar-width: thin;
|
||
}
|
||
.hme-periods button {
|
||
min-width: 88px;
|
||
padding: 0 12px;
|
||
color: #8398b0;
|
||
border: 1px solid #29425d;
|
||
border-radius: 8px;
|
||
background: #0b192a;
|
||
font-size: 8px;
|
||
font-weight: 900;
|
||
white-space: nowrap;
|
||
}
|
||
.hme-periods button.active { color: #06140f; border-color: transparent; background: #48dfbd; }
|
||
.hme-table-scroll {
|
||
min-height: 0;
|
||
overflow: auto;
|
||
border: 1px solid #213851;
|
||
border-radius: 12px;
|
||
background: rgba(5, 15, 26, .84);
|
||
}
|
||
.hme-table-scroll table { width: 100%; min-width: 820px; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
|
||
.hme-table-scroll th,
|
||
.hme-table-scroll td {
|
||
min-height: 34px;
|
||
padding: 7px 9px;
|
||
border-bottom: 1px solid rgba(38, 59, 85, .62);
|
||
color: #91a5ba;
|
||
font: 800 9px "Roboto Mono", Consolas, monospace;
|
||
vertical-align: middle;
|
||
}
|
||
.hme-table-scroll th {
|
||
position: sticky;
|
||
top: 0;
|
||
z-index: 2;
|
||
height: 31px;
|
||
color: #7189a1;
|
||
background: #0d1c2e;
|
||
font-size: 7px;
|
||
letter-spacing: .04em;
|
||
text-transform: uppercase;
|
||
}
|
||
.hme-table-scroll th:nth-child(1), .hme-table-scroll td:nth-child(1) { width: 86px; }
|
||
.hme-table-scroll th:nth-child(2), .hme-table-scroll td:nth-child(2) { width: 70px; text-align: center; }
|
||
.hme-table-scroll th:nth-child(3), .hme-table-scroll td:nth-child(3) { width: 32%; }
|
||
.hme-table-scroll th:nth-child(4), .hme-table-scroll td:nth-child(4) { width: 19%; }
|
||
.hme-table-scroll th:nth-child(5), .hme-table-scroll td:nth-child(5) { width: 27%; }
|
||
.hme-table-scroll th:nth-child(6), .hme-table-scroll td:nth-child(6) { width: 65px; text-align: center; }
|
||
.hme-table-scroll td strong { display: block; color: #e9f2fb; font-size: 10px; }
|
||
.hme-table-scroll td small { display: block; margin-top: 2px; color: #71869d; font-size: 7px; }
|
||
.hme-table-scroll tr.side-home td { background: color-mix(in srgb, var(--hme-home) 7%, transparent); }
|
||
.hme-table-scroll tr.side-away td { background: color-mix(in srgb, var(--hme-away) 7%, transparent); }
|
||
.hme-table-scroll tr.side-home td:first-child { box-shadow: inset 3px 0 var(--hme-home); }
|
||
.hme-table-scroll tr.side-away td:first-child { box-shadow: inset 3px 0 var(--hme-away); }
|
||
.hme-table-scroll tbody tr:hover td { filter: brightness(1.12); }
|
||
.hme-empty,
|
||
.hsm-empty {
|
||
place-self: center;
|
||
display: grid;
|
||
gap: 7px;
|
||
color: #71869f;
|
||
text-align: center;
|
||
}
|
||
.hme-empty strong,
|
||
.hsm-empty strong { color: #bdcad9; font-size: 18px; }
|
||
.hme-empty span,
|
||
.hsm-empty span { font-size: 11px; }
|
||
|
||
.hockey-shots-map {
|
||
--hsm-home: #4d9cff;
|
||
--hsm-away: #ff5f79;
|
||
width: 100%;
|
||
height: 100%;
|
||
min-height: 0;
|
||
display: grid;
|
||
grid-template-rows: auto auto minmax(0, 1fr) auto;
|
||
gap: 9px;
|
||
overflow: hidden;
|
||
padding: 12px 14px;
|
||
border: 1px solid #263b55;
|
||
border-radius: 16px;
|
||
background: rgba(7, 17, 29, .74);
|
||
}
|
||
.hockey-team-statistics > .hockey-shots-map { border: 0; padding: 0; border-radius: 0; background: transparent; }
|
||
.hsm-header {
|
||
min-width: 0;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 14px;
|
||
}
|
||
.hsm-header > div:first-child { min-width: 0; display: grid; gap: 2px; }
|
||
.hsm-header > div:first-child span { color: #48dfbd; font-size: 7px; font-weight: 950; letter-spacing: .16em; }
|
||
.hsm-header > div:first-child strong { color: #edf5fc; font-size: 18px; font-weight: 950; }
|
||
.hsm-summary { display: grid; grid-template-columns: repeat(6, auto); align-items: baseline; gap: 3px 7px; }
|
||
.hsm-summary b { color: #eaf3fb; font: 950 14px "Roboto Mono", Consolas, monospace; }
|
||
.hsm-summary span { color: #72889f; font-size: 7px; font-weight: 850; }
|
||
.hsm-filters {
|
||
min-width: 0;
|
||
display: grid;
|
||
grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(180px, .7fr);
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
.hsm-periods,
|
||
.hsm-sides { min-width: 0; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: thin; }
|
||
.hsm-periods button,
|
||
.hsm-sides button {
|
||
min-height: 29px;
|
||
padding: 0 10px;
|
||
color: #8095ad;
|
||
border: 1px solid #29425d;
|
||
border-radius: 8px;
|
||
background: #0b192a;
|
||
font-size: 7.5px;
|
||
font-weight: 900;
|
||
white-space: nowrap;
|
||
}
|
||
.hsm-periods button.active,
|
||
.hsm-sides button.active { color: #06140f; border-color: transparent; background: #48dfbd; }
|
||
.hsm-player-filter {
|
||
min-width: 0;
|
||
display: grid;
|
||
grid-template-columns: auto minmax(0, 1fr);
|
||
align-items: center;
|
||
gap: 7px;
|
||
color: #71869d;
|
||
font-size: 7px;
|
||
font-weight: 900;
|
||
}
|
||
.hsm-player-filter select {
|
||
width: 100%;
|
||
min-width: 0;
|
||
height: 30px;
|
||
padding: 0 25px 0 8px;
|
||
color: #d2deea;
|
||
border: 1px solid #29425d;
|
||
border-radius: 8px;
|
||
outline: none;
|
||
background: #0b192a;
|
||
font-size: 8px;
|
||
font-weight: 850;
|
||
}
|
||
.hsm-map-wrap { position: relative; min-height: 0; display: grid; place-items: stretch; overflow: hidden; }
|
||
.hsm-rink {
|
||
position: relative;
|
||
width: 100%;
|
||
height: 100%;
|
||
min-height: 300px;
|
||
overflow: hidden;
|
||
border: 3px solid rgba(198, 222, 235, .78);
|
||
border-radius: 72px;
|
||
background:
|
||
radial-gradient(circle at 50% 50%, rgba(255,255,255,.035), transparent 33%),
|
||
linear-gradient(90deg, rgba(77,156,255,.035), transparent 32%, transparent 68%, rgba(255,95,121,.035)),
|
||
#dbeaf0;
|
||
box-shadow: inset 0 0 0 1px rgba(11, 34, 51, .24), 0 8px 24px rgba(0,0,0,.2);
|
||
}
|
||
.hsm-rink::before,
|
||
.hsm-rink::after {
|
||
content: "";
|
||
position: absolute;
|
||
top: 50%;
|
||
width: 20px;
|
||
height: 46px;
|
||
border: 2px solid rgba(180, 33, 58, .75);
|
||
border-radius: 50%;
|
||
transform: translateY(-50%);
|
||
}
|
||
.hsm-rink::before { left: -9px; }
|
||
.hsm-rink::after { right: -9px; }
|
||
.hsm-center-line,
|
||
.hsm-blue-line,
|
||
.hsm-goal-line { position: absolute; top: 0; bottom: 0; width: 2px; }
|
||
.hsm-center-line { left: 50%; background: rgba(185, 37, 61, .75); }
|
||
.hsm-blue-line { width: 4px; background: rgba(34, 93, 187, .68); }
|
||
.hsm-blue-line.left { left: 34%; }
|
||
.hsm-blue-line.right { right: 34%; }
|
||
.hsm-goal-line { background: rgba(185, 37, 61, .52); }
|
||
.hsm-goal-line.left { left: 8%; }
|
||
.hsm-goal-line.right { right: 8%; }
|
||
.hsm-center-circle,
|
||
.hsm-faceoff,
|
||
.hsm-goal-crease {
|
||
position: absolute;
|
||
border: 2px solid rgba(185, 37, 61, .48);
|
||
border-radius: 50%;
|
||
}
|
||
.hsm-center-circle { left: 50%; top: 50%; width: 64px; height: 64px; transform: translate(-50%, -50%); }
|
||
.hsm-faceoff { width: 48px; height: 48px; }
|
||
.hsm-faceoff.left-top { left: 19%; top: 20%; }
|
||
.hsm-faceoff.left-bottom { left: 19%; bottom: 20%; }
|
||
.hsm-faceoff.right-top { right: 19%; top: 20%; }
|
||
.hsm-faceoff.right-bottom { right: 19%; bottom: 20%; }
|
||
.hsm-goal-crease { top: 50%; width: 31px; height: 54px; border-color: rgba(39, 116, 190, .55); background: rgba(72, 156, 223, .13); transform: translateY(-50%); }
|
||
.hsm-goal-crease.left { left: -9px; }
|
||
.hsm-goal-crease.right { right: -9px; }
|
||
.hsm-point {
|
||
position: absolute;
|
||
z-index: 5;
|
||
width: 12px;
|
||
height: 12px;
|
||
display: grid;
|
||
place-items: center;
|
||
border: 2px solid rgba(255,255,255,.95);
|
||
border-radius: 50%;
|
||
background: var(--hsm-home);
|
||
box-shadow: 0 2px 7px rgba(0,0,0,.45);
|
||
transform: translate(-50%, -50%);
|
||
cursor: help;
|
||
}
|
||
.hsm-point.side-away { background: var(--hsm-away); }
|
||
.hsm-point.is-goal { width: 17px; height: 17px; border-color: #fff4a8; box-shadow: 0 0 0 3px rgba(255, 205, 63, .25), 0 2px 8px rgba(0,0,0,.5); }
|
||
.hsm-point.is-goal span { color: #fff3a1; font-size: 9px; line-height: 1; }
|
||
.hsm-point.is-missed,
|
||
.hsm-point.is-blocked { background: transparent; border-style: dashed; border-color: color-mix(in srgb, currentColor 50%, #30445a); }
|
||
.hsm-point.is-shot { opacity: .72; }
|
||
.hsm-no-results { position: absolute; inset: 0; z-index: 8; display: grid; place-items: center; color: #31495d; font-size: 12px; font-weight: 950; }
|
||
.hsm-legend { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 17px; color: #72879e; font-size: 7px; font-weight: 850; }
|
||
.hsm-legend .side-home { color: color-mix(in srgb, var(--hsm-home) 72%, white); }
|
||
.hsm-legend .side-away { color: color-mix(in srgb, var(--hsm-away) 72%, white); }
|
||
.hsm-legend .goal { color: #f2cf53; }
|
||
.hsm-legend .target { color: #b7c8d8; }
|
||
.hsm-legend .missed { color: #71869d; }
|
||
|
||
.ppi-player-shot-map {
|
||
margin-top: 16px;
|
||
padding: 13px;
|
||
border: 1px solid #28415b;
|
||
border-radius: 15px;
|
||
background: rgba(8, 20, 33, .76);
|
||
}
|
||
.ppi-player-shot-map > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 9px; }
|
||
.ppi-player-shot-map > header > div { display: grid; gap: 2px; }
|
||
.ppi-player-shot-map > header span { color: #48dfbd; font-size: 7px; font-weight: 950; letter-spacing: .15em; }
|
||
.ppi-player-shot-map > header strong { color: #e8f1fa; font-size: 14px; font-weight: 950; }
|
||
.ppi-player-shot-map > header b { color: #8196ad; font: 900 9px "Roboto Mono", Consolas, monospace; }
|
||
.ppi-player-shot-map .hsm-rink.is-compact { height: 245px; min-height: 245px; border-radius: 56px; }
|
||
.ppi-player-shot-map .hsm-point.is-compact { width: 10px; height: 10px; }
|
||
.ppi-player-shot-map .hsm-point.is-compact.is-goal { width: 15px; height: 15px; }
|
||
|
||
@media (max-width: 900px) {
|
||
.hsm-filters { grid-template-columns: 1fr; }
|
||
.hsm-summary { display: none; }
|
||
.hsm-rink { min-height: 260px; }
|
||
.hme-table-scroll table { min-width: 720px; }
|
||
}
|
||
|
||
/* Coaches in game rosters and overall team statistics. */
|
||
.hpd-roster-header{min-height:58px}
|
||
.hpd-roster-coach{display:block;max-width:230px;overflow:hidden;color:#7f94aa;font-size:8px;font-weight:800;line-height:1.25;text-overflow:ellipsis;white-space:nowrap}
|
||
.hts-team small{display:block;margin-top:3px;color:#7f94aa;font-size:8px;font-weight:800;line-height:1.2}
|
||
.hts-team.away small{text-align:right}
|
||
|
||
/* KHL-style play-by-play timeline. */
|
||
.hockey-match-events{display:grid;grid-template-rows:auto auto minmax(0,1fr);gap:9px;height:100%;padding:14px;overflow:hidden}
|
||
.hme-filter-row{display:grid;gap:5px;min-width:0}
|
||
.hme-types{display:flex;gap:4px;min-width:0;overflow-x:auto;padding-bottom:2px;scrollbar-width:thin}
|
||
.hme-types button{flex:0 0 auto;padding:5px 10px;color:#7890a7;border:1px solid #273d54;border-radius:999px;background:#0a1625;font-size:8px;font-weight:900;cursor:pointer}
|
||
.hme-types button.active{color:#07150f;border-color:transparent;background:#48dfbd}
|
||
.hme-timeline{position:relative;min-height:0;overflow:auto;padding:2px 5px 14px 1px;scrollbar-width:thin}
|
||
.hme-timeline::before{position:absolute;top:4px;bottom:12px;left:97px;width:2px;background:linear-gradient(#314b65,#172a3d);content:""}
|
||
.hme-event{position:relative;display:grid;grid-template-columns:76px 28px minmax(0,1fr) minmax(90px,150px);align-items:start;gap:9px;margin:0 0 7px;padding:9px 11px 9px 6px;border:1px solid #21364d;border-radius:12px;background:linear-gradient(100deg,rgba(14,28,45,.96),rgba(8,19,32,.98));box-shadow:0 6px 16px rgba(0,0,0,.16)}
|
||
.hme-event.side-home{border-left:3px solid var(--hme-home);background:linear-gradient(100deg,color-mix(in srgb,var(--hme-home) 12%,#0d1b2c),#081320 62%)}
|
||
.hme-event.side-away{border-left:3px solid var(--hme-away);background:linear-gradient(100deg,color-mix(in srgb,var(--hme-away) 12%,#0d1b2c),#081320 62%)}
|
||
.hme-event-time{display:grid;gap:2px;text-align:right}
|
||
.hme-event-time strong{color:#eef6ff;font:950 15px "Roboto Mono",Consolas,monospace}
|
||
.hme-event-time span{color:#688096;font-size:7px;font-weight:900}
|
||
.hme-event>i{position:relative;z-index:2;display:grid;width:28px;height:28px;place-items:center;color:#071522;border:2px solid #0a1420;border-radius:50%;background:#9bb0c4;box-shadow:0 0 0 2px #2b435a;font-size:11px;font-style:normal;font-weight:950}
|
||
.hme-event.category-goal>i{background:#f0cd4d}.hme-event.category-penalty>i{background:#ff7284}.hme-event.category-shot>i{background:#8dc9ff}.hme-event.category-shootout>i{background:#d6a7ff}.hme-event.category-period>i{background:#48dfbd}
|
||
.hme-event-body{min-width:0;display:grid;gap:2px;text-align:left}
|
||
.hme-event-body>span{color:#6f879e;font-size:7px;font-weight:950;letter-spacing:.08em;text-transform:uppercase}
|
||
.hme-event-body>strong{color:#edf5fc;font-size:12px;font-weight:950}
|
||
.hme-event-body p{margin:1px 0 0;color:#a9bac9;font-size:9px;font-weight:700;line-height:1.35;white-space:normal}
|
||
.hme-event-body small{color:#8298ad;font-size:8px;font-weight:800}
|
||
.hme-event-team{display:grid;gap:4px;justify-items:end;text-align:right}
|
||
.hme-event-team strong{color:#aebfce;font-size:9px;font-weight:900}
|
||
.hme-event-team b{padding:3px 7px;color:#fff;border-radius:7px;background:#233a50;font:950 12px "Roboto Mono",Consolas,monospace}
|
||
.hme-no-results{display:grid;min-height:180px;place-items:center;color:#60788f;font-size:12px;font-weight:900}
|
||
|
||
/* Dedicated officials page. */
|
||
.hockey-referees{display:grid;grid-template-rows:auto minmax(0,1fr);gap:18px;height:100%;padding:24px;overflow:hidden;background:radial-gradient(circle at 50% 0,rgba(72,223,189,.08),transparent 40%)}
|
||
.hrf-header{display:flex;align-items:center;justify-content:space-between;padding:4px 6px 18px;border-bottom:1px solid #263c53}
|
||
.hrf-header>div{display:grid;gap:4px}.hrf-header span{color:#48dfbd;font-size:9px;font-weight:950;letter-spacing:.16em}.hrf-header strong{color:#eff7ff;font-size:25px;font-weight:950}.hrf-header>b{display:grid;width:48px;height:48px;place-items:center;color:#091621;border-radius:15px;background:#48dfbd;font:950 18px "Roboto Mono",Consolas,monospace}
|
||
.hrf-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;min-height:0}
|
||
.hrf-group{display:grid;grid-template-rows:auto minmax(0,1fr);gap:10px;min-width:0;padding:17px;border:1px solid #263c54;border-radius:18px;background:rgba(8,19,32,.86)}
|
||
.hrf-group>header{display:grid;grid-template-columns:1fr auto;gap:2px 10px;align-items:center}.hrf-group>header span{grid-column:1;color:#718aa2;font-size:8px;font-weight:950;letter-spacing:.13em}.hrf-group>header strong{grid-column:1;color:#eaf4fd;font-size:18px;font-weight:950}.hrf-group>header b{grid-column:2;grid-row:1/3;display:grid;width:34px;height:34px;place-items:center;color:#a9bdcf;border:1px solid #304961;border-radius:10px;background:#0c1928;font:950 12px "Roboto Mono",Consolas,monospace}
|
||
.hrf-group>div{display:grid;align-content:start;gap:9px;min-height:0;overflow:auto;padding-right:3px;scrollbar-width:thin}
|
||
.hrf-group article{display:grid;grid-template-columns:56px minmax(0,1fr);align-items:center;gap:13px;padding:14px;border:1px solid #263e56;border-radius:14px;background:linear-gradient(110deg,#11243a,#0a1726)}
|
||
.hrf-group article>b{display:grid;height:50px;place-items:center;color:#eef8ff;border-radius:12px;background:#24415e;font:950 20px "Roboto Mono",Consolas,monospace}.hrf-group.linesman article>b{background:#30435a}
|
||
.hrf-group article>div{display:grid;gap:3px;min-width:0}.hrf-group article span{color:#748ca3;font-size:8px;font-weight:900}.hrf-group article strong{overflow:hidden;color:#eff6fc;font-size:15px;font-weight:950;text-overflow:ellipsis;white-space:nowrap}
|
||
.hrf-empty{display:grid;height:100%;place-items:center;align-content:center;gap:7px;color:#72889e;text-align:center}.hrf-empty strong{color:#c4d1dd;font-size:19px}.hrf-empty span{font-size:11px}
|
||
|
||
/* Existing CSS pseudo-tooltips are a fallback; the body portal is always on top. */
|
||
[data-tooltip]::before,[data-tooltip]::after{z-index:2147483646!important}
|
||
|
||
@media(max-width:900px){.hrf-grid{grid-template-columns:1fr}.hme-event{grid-template-columns:62px 24px minmax(0,1fr)}.hme-event-team{display:none}.hme-timeline::before{left:81px}}
|
||
|
||
/* v26 — richer player profiles, tied leaders and wider statistics tables */
|
||
.ppi-country-flag {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
min-width: 18px;
|
||
margin-right: 5px;
|
||
font-size: 14px;
|
||
font-style: normal;
|
||
line-height: 1;
|
||
vertical-align: -1px;
|
||
}
|
||
.ppi-player-name .ppi-country-flag,
|
||
.ppi-goalie-person .ppi-country-flag {
|
||
min-width: 14px;
|
||
margin-right: 3px;
|
||
font-size: 11px;
|
||
}
|
||
.ppi-leader-names {
|
||
min-width: 0;
|
||
max-height: 31px;
|
||
display: flex !important;
|
||
flex-wrap: wrap;
|
||
align-content: center;
|
||
gap: 2px 7px;
|
||
overflow: auto !important;
|
||
color: #c2d0df;
|
||
line-height: 1.18;
|
||
text-overflow: clip !important;
|
||
white-space: normal !important;
|
||
scrollbar-width: thin;
|
||
}
|
||
.ppi-leader-names span {
|
||
display: inline-flex;
|
||
min-width: 0;
|
||
align-items: center;
|
||
white-space: nowrap;
|
||
}
|
||
.ppi-player-detail {
|
||
width: min(1240px, calc(100% - 20px));
|
||
max-height: calc(100% - 18px);
|
||
padding: 27px;
|
||
}
|
||
.ppi-profile-bio {
|
||
display: grid;
|
||
grid-template-columns: repeat(6, minmax(0, 1fr));
|
||
gap: 8px;
|
||
margin-top: 18px;
|
||
}
|
||
.ppi-profile-bio > div {
|
||
min-width: 0;
|
||
min-height: 58px;
|
||
display: grid;
|
||
align-content: center;
|
||
gap: 5px;
|
||
padding: 9px 11px;
|
||
border: 1px solid #29445f;
|
||
border-radius: 11px;
|
||
background: rgba(8, 20, 33, .7);
|
||
}
|
||
.ppi-profile-bio span {
|
||
color: #70889f;
|
||
font-size: 8px;
|
||
font-weight: 900;
|
||
letter-spacing: .04em;
|
||
text-transform: uppercase;
|
||
}
|
||
.ppi-profile-bio strong {
|
||
min-width: 0;
|
||
overflow: hidden;
|
||
color: #dce7f2;
|
||
font-size: 12px;
|
||
font-weight: 900;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
/* Use the available canvas width instead of keeping decorative side gutters. */
|
||
.runtime-view .hockey-player-statistics,
|
||
.runtime-view .hockey-team-statistics,
|
||
.runtime-view .hockey-tournament-statistics,
|
||
.runtime-view .hockey-tournament-standings,
|
||
.runtime-view .hockey-match-events,
|
||
.runtime-view .hockey-referees {
|
||
width: 100%;
|
||
max-width: none;
|
||
padding-left: 5px;
|
||
padding-right: 5px;
|
||
}
|
||
.runtime-view .ppi-team-table table,
|
||
.runtime-view .htr-table-scroll table,
|
||
.runtime-view .htb-group table,
|
||
.runtime-view .hme-table-scroll table {
|
||
width: 100%;
|
||
}
|
||
.runtime-view .ppi-team-table th:nth-child(2),
|
||
.runtime-view .ppi-team-table td:nth-child(2) {
|
||
width: 38%;
|
||
}
|
||
.runtime-view .htr-table-scroll .htr-name {
|
||
min-width: 260px;
|
||
}
|
||
.runtime-view .htb-groups {
|
||
width: 100%;
|
||
}
|
||
|
||
@media (max-width: 1120px) {
|
||
.ppi-profile-bio { grid-template-columns: repeat(3, minmax(0, 1fr)); }
|
||
}
|
||
.ppi-country-flag:is(img) {
|
||
width: 18px;
|
||
height: 13px;
|
||
object-fit: cover;
|
||
border: 1px solid rgba(255,255,255,.18);
|
||
border-radius: 2px;
|
||
box-shadow: 0 1px 3px rgba(0,0,0,.28);
|
||
}
|
||
.ppi-player-name .ppi-country-flag:is(img),
|
||
.ppi-goalie-person .ppi-country-flag:is(img) {
|
||
width: 14px;
|
||
height: 10px;
|
||
}
|
||
|
||
|
||
/* Final responsive hockey refinements: play-by-play, player shot profile and tied leaders. */
|
||
.hpd-layout.has-play-by-play {
|
||
grid-template-columns: minmax(245px, .82fr) minmax(510px, 1.55fr) minmax(245px, .82fr) minmax(250px, .82fr);
|
||
gap: 10px;
|
||
}
|
||
.hpd-play-by-play {
|
||
min-width: 0; max-height: 690px; display: grid; grid-template-rows: auto minmax(0,1fr);
|
||
overflow: hidden; border: 1px solid #29445f; border-radius: 14px; background: rgba(5,15,25,.93);
|
||
}
|
||
.hpd-play-by-play > header { display:flex; align-items:center; justify-content:space-between; padding:12px 13px; border-bottom:1px solid #233d55; }
|
||
.hpd-play-by-play > header div { display:grid; gap:3px; }
|
||
.hpd-play-by-play > header span { color:#657f97; font-size:8px; font-weight:900; letter-spacing:.12em; }
|
||
.hpd-play-by-play > header strong { font-size:13px; }
|
||
.hpd-play-by-play > header b { min-width:28px; text-align:center; padding:5px; border-radius:8px; background:#17324a; }
|
||
.hpd-pbp-list { min-height:0; overflow:auto; padding:7px; display:grid; align-content:start; gap:5px; }
|
||
.hpd-pbp-list article { min-width:0; display:grid; grid-template-columns:27px 42px minmax(0,1fr); gap:7px; align-items:center; padding:7px; border:1px solid #20384e; border-radius:9px; background:#0b1c2b; }
|
||
.hpd-pbp-list article > i { width:25px; height:25px; display:grid; place-items:center; border-radius:50%; background:#17344c; font-style:normal; font-weight:950; }
|
||
.hpd-pbp-list article.category-penalty > i { color:#fff; background:#b62b3a; box-shadow:0 0 0 2px rgba(255,83,103,.22); }
|
||
.hpd-pbp-list article.side-home { border-left:3px solid var(--hpd-home); }
|
||
.hpd-pbp-list article.side-away { border-left:3px solid var(--hpd-away); }
|
||
.hpd-pbp-list time { color:#dce8f2; font-size:11px; font-weight:900; }
|
||
.hpd-pbp-list article > div { min-width:0; display:grid; gap:2px; }
|
||
.hpd-pbp-list article > div span,.hpd-pbp-list article > div small { color:#7890a5; font-size:8px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
|
||
.hpd-pbp-list article > div strong { font-size:10px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
|
||
|
||
.ppi-player-detail.has-shot-map { width:min(1340px,calc(100vw - 40px)); max-height:min(750px,calc(100vh - 36px)); }
|
||
.ppi-detail-layout { display:grid; grid-template-columns:minmax(0,1.35fr); min-width:0; min-height:0; gap:16px; }
|
||
.ppi-player-detail.has-shot-map .ppi-detail-layout { grid-template-columns:minmax(0,1.42fr) minmax(340px,.75fr); align-items:stretch; }
|
||
.ppi-detail-info { min-width:0; min-height:0; overflow:auto; padding-right:2px; }
|
||
.ppi-detail-info > header { display:flex; align-items:center; gap:16px; padding:2px 0 14px; border-bottom:1px solid #29445f; }
|
||
.ppi-detail-info > header > b { min-width:72px; height:72px; display:grid; place-items:center; border-radius:16px; background:#15344e; font-size:30px; }
|
||
.ppi-detail-info > header > div { display:grid; gap:4px; }
|
||
.ppi-detail-info > header span { color:#7d96ad; font-size:10px; font-weight:900; letter-spacing:.08em; }
|
||
.ppi-detail-info > header strong { font-size:24px; }
|
||
.ppi-detail-info > section { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin-top:14px; }
|
||
.ppi-detail-info > section > div { min-height:59px; display:grid; align-content:center; gap:4px; padding:8px 10px; border:1px solid #29445f; border-radius:10px; background:rgba(8,20,33,.72); }
|
||
.ppi-detail-info > section span { color:#7890a5; font-size:8px; font-weight:900; text-transform:uppercase; }
|
||
.ppi-detail-info > section strong { font-size:14px; }
|
||
.ppi-player-shot-map { min-width:0; height:100%; display:grid; grid-template-rows:auto minmax(0,1fr); align-self:stretch; padding:12px; border:1px solid #29445f; border-radius:14px; background:rgba(6,18,29,.85); }
|
||
.ppi-player-shot-map > header { display:flex; justify-content:space-between; gap:10px; padding-bottom:10px; }
|
||
.ppi-player-shot-map > header div { display:grid; gap:3px; }
|
||
.ppi-player-shot-map > header span { color:#718ba3; font-size:8px; font-weight:950; letter-spacing:.12em; }
|
||
.ppi-player-shot-map > header strong { font-size:13px; }
|
||
.ppi-player-shot-map > header b { color:#a9bbcb; font-size:10px; }
|
||
.hsm-rink.is-profile-half { position:relative; width:min(100%,390px); height:500px; justify-self:center; align-self:center; overflow:hidden; border:2px solid #89a7bd; border-radius:18px 18px 90px 90px; background:linear-gradient(rgba(218,239,247,.95),rgba(190,220,233,.96)); }
|
||
.hsm-profile-goal { position:absolute; left:50%; top:1%; width:21%; height:5%; transform:translateX(-50%); border:3px solid #d44250; border-bottom:0; border-radius:12px 12px 0 0; }
|
||
.hsm-profile-crease { position:absolute; left:50%; top:4%; width:35%; height:12%; transform:translateX(-50%); border:2px solid #5ca1c5; border-radius:0 0 50% 50%; background:rgba(93,174,211,.18); }
|
||
.hsm-profile-goal-line { position:absolute; left:0; right:0; top:9%; border-top:2px solid #d74b55; }
|
||
.hsm-profile-blue-line { position:absolute; left:0; right:0; top:55%; border-top:4px solid #4386c6; }
|
||
.hsm-profile-faceoff { position:absolute; top:31%; width:18%; aspect-ratio:1; border:2px solid #d34b55; border-radius:50%; }
|
||
.hsm-profile-faceoff.left { left:18%; } .hsm-profile-faceoff.right { right:18%; }
|
||
.hsm-rink.is-profile-half .hsm-point { z-index:4; }
|
||
|
||
.ppi-leader-names { position:relative; display:block!important; max-height:none!important; overflow:visible!important; }
|
||
.ppi-leader-single,.ppi-leader-list summary,.ppi-leader-list > div > span { display:flex; align-items:center; gap:5px; min-width:0; }
|
||
.ppi-leader-single strong,.ppi-leader-list summary strong,.ppi-leader-list > div strong { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
|
||
.ppi-leader-list { position:relative; }
|
||
.ppi-leader-list summary { cursor:pointer; list-style:none; height:22px; }
|
||
.ppi-leader-list summary::-webkit-details-marker { display:none; }
|
||
.ppi-leader-list summary > b { margin-left:auto; padding:2px 5px; border-radius:6px; color:#cbe4f7; background:#1b405d; font-size:8px; }
|
||
.ppi-leader-list > div { position:absolute; z-index:100040; left:0; top:calc(100% + 4px); min-width:220px; max-width:310px; display:grid; gap:4px; padding:7px; border:1px solid #375874; border-radius:9px; background:#071724; box-shadow:0 14px 35px rgba(0,0,0,.48); }
|
||
.ppi-leader-list:not([open]) > div { display:none; }
|
||
.ppi-leader-list > div > span { min-height:24px; padding:3px 5px; border-radius:6px; background:#10273a; }
|
||
|
||
.hme-event.category-penalty > i { color:#fff; background:#b62b3a!important; border-color:#ec5364!important; }
|
||
[data-tooltip], [title] { --tooltip-z:1000000; }
|
||
|
||
@media (max-width:1180px) {
|
||
.hpd-layout.has-play-by-play { grid-template-columns:minmax(220px,.8fr) minmax(460px,1.5fr) minmax(220px,.8fr); }
|
||
.hpd-play-by-play { grid-column:1 / -1; max-height:220px; }
|
||
.ppi-player-detail.has-shot-map .ppi-detail-layout { grid-template-columns:1fr; }
|
||
.ppi-player-shot-map { min-height:470px; }
|
||
.ppi-detail-info > section { grid-template-columns:repeat(3,minmax(0,1fr)); }
|
||
}
|
||
|
||
/* v27 — standalone play-by-play window and exact KHL rink artwork. */
|
||
.runtime-view { position: relative; }
|
||
|
||
.hockey-pbp-window {
|
||
--pbp-home: #4d9cff;
|
||
--pbp-away: #ff5f79;
|
||
position: absolute;
|
||
z-index: 100200;
|
||
top: 76px;
|
||
right: 14px;
|
||
width: min(390px, calc(100vw - 28px));
|
||
max-height: calc(100vh - 94px);
|
||
display: grid;
|
||
grid-template-rows: auto auto minmax(0, 1fr);
|
||
overflow: hidden;
|
||
color: #edf5fc;
|
||
border: 1px solid #36546e;
|
||
border-radius: 16px;
|
||
background: rgba(5, 15, 25, .975);
|
||
box-shadow: 0 24px 70px rgba(0, 0, 0, .58), 0 0 0 1px rgba(255,255,255,.025) inset;
|
||
backdrop-filter: blur(14px);
|
||
}
|
||
.hockey-pbp-window.is-collapsed { grid-template-rows: auto; }
|
||
.hockey-pbp-window.is-collapsed .hockey-pbp-window-periods,
|
||
.hockey-pbp-window.is-collapsed .hockey-pbp-window-list { display: none; }
|
||
.hockey-pbp-window-header {
|
||
min-height: 54px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 12px;
|
||
padding: 10px 11px 10px 14px;
|
||
border-bottom: 1px solid #243d54;
|
||
background: linear-gradient(100deg, rgba(30, 63, 88, .8), rgba(8, 22, 35, .96));
|
||
}
|
||
.hockey-pbp-window-header > div:first-child { min-width: 0; display: grid; gap: 3px; }
|
||
.hockey-pbp-window-header span { color: #48dfbd; font-size: 8px; font-weight: 950; letter-spacing: .15em; }
|
||
.hockey-pbp-window-header strong { overflow: hidden; font-size: 14px; font-weight: 950; text-overflow: ellipsis; white-space: nowrap; }
|
||
.hockey-pbp-window-actions { display: flex; align-items: center; gap: 7px; }
|
||
.hockey-pbp-window-actions b {
|
||
min-width: 32px;
|
||
height: 30px;
|
||
display: grid;
|
||
place-items: center;
|
||
color: #d7e5f0;
|
||
border: 1px solid #38556d;
|
||
border-radius: 9px;
|
||
background: #10283b;
|
||
font: 950 11px "Roboto Mono", Consolas, monospace;
|
||
}
|
||
.hockey-pbp-window-actions button {
|
||
width: 30px;
|
||
height: 30px;
|
||
display: grid;
|
||
place-items: center;
|
||
padding: 0;
|
||
color: #b9cada;
|
||
border: 1px solid #38556d;
|
||
border-radius: 9px;
|
||
background: #10283b;
|
||
font-size: 17px;
|
||
font-weight: 900;
|
||
cursor: pointer;
|
||
}
|
||
.hockey-pbp-window-actions button:hover { color: #07150f; border-color: transparent; background: #48dfbd; }
|
||
.hockey-pbp-window-periods {
|
||
min-height: 39px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 4px;
|
||
padding: 6px 8px;
|
||
overflow-x: auto;
|
||
border-bottom: 1px solid #20384e;
|
||
scrollbar-width: thin;
|
||
}
|
||
.hockey-pbp-window-periods button {
|
||
flex: 0 0 auto;
|
||
min-width: 48px;
|
||
height: 25px;
|
||
padding: 0 8px;
|
||
color: #7890a7;
|
||
border: 1px solid #2a4359;
|
||
border-radius: 7px;
|
||
background: #0b1b2a;
|
||
font-size: 7.5px;
|
||
font-weight: 950;
|
||
white-space: nowrap;
|
||
cursor: pointer;
|
||
}
|
||
.hockey-pbp-window-periods button.active { color: #06140f; border-color: transparent; background: #48dfbd; }
|
||
.hockey-pbp-window-list {
|
||
min-height: 0;
|
||
overflow: auto;
|
||
padding: 7px;
|
||
display: grid;
|
||
align-content: start;
|
||
gap: 5px;
|
||
scrollbar-width: thin;
|
||
}
|
||
.hockey-pbp-window-list article {
|
||
min-width: 0;
|
||
display: grid;
|
||
grid-template-columns: 30px 43px minmax(0, 1fr) auto;
|
||
gap: 7px;
|
||
align-items: center;
|
||
padding: 7px 8px;
|
||
border: 1px solid #20384e;
|
||
border-radius: 10px;
|
||
background: #0a1a29;
|
||
}
|
||
.hockey-pbp-window-list article.side-home { border-left: 3px solid var(--pbp-home); }
|
||
.hockey-pbp-window-list article.side-away { border-left: 3px solid var(--pbp-away); }
|
||
.hockey-pbp-window-list time { color: #e4edf5; font: 950 10px "Roboto Mono", Consolas, monospace; }
|
||
.hockey-pbp-window-list article > div { min-width: 0; display: grid; gap: 2px; }
|
||
.hockey-pbp-window-list article > div span { color: #718aa1; font-size: 7px; font-weight: 950; letter-spacing: .05em; text-transform: uppercase; }
|
||
.hockey-pbp-window-list article > div strong { color: #edf5fc; font-size: 10px; font-weight: 950; white-space: normal; }
|
||
.hockey-pbp-window-list article > div small { color: #8197ab; font-size: 8px; font-weight: 750; line-height: 1.25; white-space: normal; }
|
||
.hockey-pbp-score { padding: 3px 6px; color: #eff8ff; border-radius: 7px; background: #203b52; font: 950 10px "Roboto Mono", Consolas, monospace; }
|
||
.hockey-pbp-window-empty { min-height: 110px; display: grid; place-items: center; color: #6d8499; font-size: 10px; font-weight: 900; text-align: center; }
|
||
|
||
.hockey-event-icon {
|
||
position: relative;
|
||
z-index: 2;
|
||
width: 28px;
|
||
height: 28px;
|
||
display: grid;
|
||
place-items: center;
|
||
color: #071522;
|
||
border: 2px solid #0a1420;
|
||
border-radius: 50%;
|
||
background: #9bb0c4;
|
||
box-shadow: 0 0 0 2px #2b435a;
|
||
font-size: 11px;
|
||
font-style: normal;
|
||
font-weight: 950;
|
||
}
|
||
.hockey-event-icon.is-compact { width: 25px; height: 25px; font-size: 9px; }
|
||
.hockey-event-icon.is-goal { background: #f0cd4d; }
|
||
.hockey-event-icon.is-shot { background: #8dc9ff; }
|
||
.hockey-event-icon.is-shootout { background: #d6a7ff; }
|
||
.hockey-event-icon.is-period { background: #48dfbd; }
|
||
.hockey-event-icon.is-penalty {
|
||
color: #fff !important;
|
||
border: 1px solid #ff7886 !important;
|
||
border-radius: 7px !important;
|
||
background: linear-gradient(145deg, #d83b4b, #8d1727) !important;
|
||
box-shadow: 0 0 0 2px rgba(255, 93, 110, .2), 0 4px 10px rgba(0,0,0,.35) !important;
|
||
}
|
||
.hockey-event-icon.is-penalty span { font: 950 9px "Roboto Mono", Consolas, monospace; letter-spacing: -.05em; }
|
||
.hme-event > .hockey-event-icon { width: 28px; height: 28px; }
|
||
.hme-event.category-penalty > .hockey-event-icon { border-radius: 7px !important; }
|
||
|
||
/* Use the original KHL rink drawing and preserve its real aspect ratio. */
|
||
.hsm-map-wrap { display: flex; align-items: center; justify-content: center; }
|
||
.hsm-rink.is-khl-image {
|
||
position: relative;
|
||
width: auto;
|
||
height: 100%;
|
||
max-width: 100%;
|
||
max-height: 100%;
|
||
min-height: 0;
|
||
aspect-ratio: 2835 / 1417;
|
||
overflow: visible;
|
||
border: 0;
|
||
border-radius: 0;
|
||
background: transparent;
|
||
box-shadow: none;
|
||
}
|
||
.hsm-rink.is-khl-image::before,
|
||
.hsm-rink.is-khl-image::after { display: none; content: none; }
|
||
.hsm-rink-image {
|
||
position: absolute;
|
||
z-index: 0;
|
||
inset: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
display: block;
|
||
object-fit: fill;
|
||
user-select: none;
|
||
pointer-events: none;
|
||
}
|
||
.hsm-rink.is-khl-image .hsm-point { z-index: 5; }
|
||
.hsm-rink.is-khl-image.is-profile-half {
|
||
width: auto !important;
|
||
height: 100% !important;
|
||
max-width: 100% !important;
|
||
max-height: 100% !important;
|
||
aspect-ratio: 1417 / 1418;
|
||
border: 0 !important;
|
||
border-radius: 0 !important;
|
||
background: transparent !important;
|
||
box-shadow: none !important;
|
||
}
|
||
.ppi-player-shot-map .hsm-rink.is-khl-image.is-profile-half { min-height: 0; }
|
||
|
||
@media (max-width: 980px) {
|
||
.hockey-pbp-window { left: 12px; right: 12px; top: auto; bottom: 12px; width: auto; max-height: 42vh; }
|
||
}
|
||
|
||
|
||
/* Build 2026.07.17.3: cache-safe runtime and independently positioned play-by-play. */
|
||
.runtime-title-line { display:flex; align-items:center; gap:8px; min-width:0; }
|
||
.runtime-title-line > strong { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
|
||
.runtime-build-badge { flex:0 0 auto; padding:2px 5px; color:#48dfbd; border:1px solid rgba(72,223,189,.35); border-radius:5px; background:rgba(72,223,189,.08); font:800 7px/1.2 "Roboto Mono",Consolas,monospace; letter-spacing:.05em; }
|
||
.hockey-pbp-window { position:fixed; }
|
||
|
||
|
||
/* Build 2026.07.17.4: non-overlapping play-by-play side column, clear shot markers. */
|
||
.runtime-viewport {
|
||
flex-direction: row;
|
||
align-items: flex-start;
|
||
justify-content: center;
|
||
gap: 0;
|
||
}
|
||
.runtime-viewport.has-hockey-pbp { gap: 14px; }
|
||
.runtime-viewport > .runtime-sizer { flex: 0 0 auto; margin: 0; }
|
||
.runtime-viewport:not(.has-hockey-pbp) > .runtime-sizer { margin-inline: auto; }
|
||
|
||
.hockey-pbp-window,
|
||
.hockey-pbp-window[style] {
|
||
position: relative !important;
|
||
inset: auto !important;
|
||
flex: 0 0 clamp(330px, 23vw, 410px);
|
||
width: clamp(330px, 23vw, 410px);
|
||
height: min(760px, 100%);
|
||
max-height: 100%;
|
||
align-self: flex-start;
|
||
margin: 0;
|
||
}
|
||
.hockey-pbp-window.is-collapsed {
|
||
flex-basis: 230px;
|
||
width: 230px;
|
||
height: auto;
|
||
}
|
||
|
||
/* Penalties never inherit the generic circular-dot appearance. */
|
||
.hockey-event-icon.is-penalty,
|
||
.hockey-pbp-window-list article.category-penalty > .hockey-event-icon,
|
||
.hme-event.category-penalty > .hockey-event-icon {
|
||
width: 28px !important;
|
||
height: 24px !important;
|
||
color: #fff !important;
|
||
border: 1px solid #ff7c8d !important;
|
||
border-radius: 6px !important;
|
||
background: linear-gradient(145deg, #f04b5f, #a7142d) !important;
|
||
box-shadow: 0 0 0 2px rgba(255, 84, 106, .22), 0 5px 13px rgba(0,0,0,.4) !important;
|
||
}
|
||
.hockey-event-icon.is-penalty.is-compact { width: 26px !important; height: 23px !important; }
|
||
.hockey-event-icon.is-penalty::before,
|
||
.hockey-event-icon.is-penalty::after { display: none !important; content: none !important; }
|
||
.hockey-event-icon.is-penalty span { display:block; color:#fff; font:950 9px/1 "Roboto Mono",Consolas,monospace; }
|
||
|
||
/* High-contrast result colors on top of the photographic rink. */
|
||
.hsm-point.is-shot,
|
||
.hsm-point.is-target {
|
||
opacity: 1 !important;
|
||
background: #1bc8ff !important;
|
||
border-color: #f2fdff !important;
|
||
box-shadow: 0 0 0 3px rgba(12, 113, 170, .72), 0 0 12px rgba(27, 200, 255, .9), 0 3px 9px rgba(0,0,0,.72) !important;
|
||
}
|
||
.hsm-point.is-goal {
|
||
width: 19px !important;
|
||
height: 19px !important;
|
||
opacity: 1 !important;
|
||
color: #2b1b00 !important;
|
||
background: #ffd43b !important;
|
||
border: 2px solid #fff6bc !important;
|
||
box-shadow: 0 0 0 4px rgba(140, 74, 0, .78), 0 0 18px rgba(255, 212, 59, 1), 0 4px 11px rgba(0,0,0,.72) !important;
|
||
}
|
||
.hsm-point.is-goal span { color:#2b1b00 !important; font-size:11px !important; text-shadow:0 1px 0 rgba(255,255,255,.5); }
|
||
.hsm-point.is-missed,
|
||
.hsm-point.is-blocked {
|
||
opacity: 1 !important;
|
||
background: rgba(9, 22, 34, .72) !important;
|
||
border-color: #d7e1ea !important;
|
||
box-shadow: 0 0 0 2px rgba(15,31,46,.85), 0 3px 8px rgba(0,0,0,.65) !important;
|
||
}
|
||
.hsm-legend .goal { color:#ffd43b !important; }
|
||
.hsm-legend .target { color:#1bc8ff !important; }
|
||
|
||
@media (max-width: 980px) {
|
||
.runtime-viewport.has-hockey-pbp { gap: 8px; }
|
||
.hockey-pbp-window,
|
||
.hockey-pbp-window[style] {
|
||
position: relative !important;
|
||
inset: auto !important;
|
||
flex-basis: 290px;
|
||
width: 290px;
|
||
height: min(760px, 100%);
|
||
max-height: 100%;
|
||
}
|
||
.hockey-pbp-window.is-collapsed { flex-basis: 210px; width: 210px; }
|
||
}
|
||
|
||
|
||
/* Build 2026.07.17.6: real penalties stay separate; one tooltip per timer action. */
|
||
/* The body-level tooltip portal is the only tooltip implementation for timer buttons. */
|
||
.timer-editor-icon-btn::before,
|
||
.timer-editor-icon-btn::after {
|
||
display: none !important;
|
||
content: none !important;
|
||
}
|
||
|
||
/* Restore the dedicated penalty badge used before the generic-dot regression. */
|
||
.hockey-event-icon.is-penalty,
|
||
.hockey-pbp-window-list article.category-penalty > .hockey-event-icon,
|
||
.hme-event.category-penalty > .hockey-event-icon {
|
||
width: 28px !important;
|
||
height: 28px !important;
|
||
color: #fff !important;
|
||
border: 1px solid #ff7886 !important;
|
||
border-radius: 7px !important;
|
||
background: linear-gradient(145deg, #d83b4b, #8d1727) !important;
|
||
box-shadow: 0 0 0 2px rgba(255, 93, 110, .20), 0 4px 10px rgba(0, 0, 0, .35) !important;
|
||
}
|
||
.hockey-event-icon.is-penalty.is-compact {
|
||
width: 25px !important;
|
||
height: 25px !important;
|
||
}
|
||
.hockey-event-icon.is-penalty span {
|
||
display: block !important;
|
||
color: #fff !important;
|
||
font: 950 9px/1 "Roboto Mono", Consolas, monospace !important;
|
||
letter-spacing: -.05em !important;
|
||
}
|
||
|
||
/* Build 2026.07.17.8: settings are an exclusive workspace. */
|
||
body.hockey-admin-settings-open #hockeyStandalonePbp,
|
||
body:has(.hockey-directory-backdrop:not(.hidden)) #hockeyStandalonePbp {
|
||
display: none !important;
|
||
}
|
||
|
||
|
||
/* Hockey schedule */
|
||
.hockey-schedule {
|
||
--hsc-home: #4d9cff;
|
||
--hsc-away: #ff5f79;
|
||
width: 100%;
|
||
height: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
min-height: 0;
|
||
overflow: hidden;
|
||
border-radius: inherit;
|
||
background:
|
||
radial-gradient(circle at 10% -10%, rgba(77, 156, 255, .18), transparent 32%),
|
||
radial-gradient(circle at 90% -10%, rgba(255, 95, 121, .15), transparent 32%),
|
||
linear-gradient(180deg, #0b1727 0%, #07111e 100%);
|
||
}
|
||
.hsc-header {
|
||
min-height: 112px;
|
||
padding: 22px 26px 18px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 24px;
|
||
border-bottom: 1px solid rgba(112, 151, 190, .18);
|
||
background: linear-gradient(90deg, rgba(255,255,255,.035), transparent 60%);
|
||
}
|
||
.hsc-title { min-width: 0; display: grid; gap: 4px; text-align: left; }
|
||
.hsc-title > span { color: #55e0c1; font-size: 11px; font-weight: 900; letter-spacing: .16em; }
|
||
.hsc-title > strong { max-width: 760px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #f4f8fc; font-size: 25px; line-height: 1.15; }
|
||
.hsc-title > small { color: #91a7bf; font-size: 13px; text-transform: capitalize; }
|
||
.hsc-summary { display: flex; gap: 8px; flex: 0 0 auto; }
|
||
.hsc-summary > div {
|
||
min-width: 76px;
|
||
padding: 10px 12px;
|
||
display: grid;
|
||
gap: 1px;
|
||
text-align: center;
|
||
border: 1px solid rgba(109, 145, 181, .22);
|
||
border-radius: 12px;
|
||
background: rgba(5, 14, 25, .54);
|
||
}
|
||
.hsc-summary b { color: #f4f8fc; font-size: 20px; line-height: 1; }
|
||
.hsc-summary span { color: #8299b2; font-size: 10px; text-transform: uppercase; letter-spacing: .06em; }
|
||
.hsc-summary .live { border-color: rgba(255, 78, 102, .55); background: rgba(122, 18, 38, .24); }
|
||
.hsc-summary .live b, .hsc-summary .live span { color: #ff7588; }
|
||
.hsc-grid {
|
||
flex: 1;
|
||
min-height: 0;
|
||
padding: 18px 20px 22px;
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
|
||
grid-auto-rows: minmax(235px, max-content);
|
||
gap: 14px;
|
||
overflow: auto;
|
||
align-content: start;
|
||
scrollbar-width: thin;
|
||
scrollbar-color: #304b68 transparent;
|
||
}
|
||
.hsc-card {
|
||
position: relative;
|
||
min-width: 0;
|
||
padding: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
overflow: hidden;
|
||
color: #eef5fc;
|
||
text-align: left;
|
||
border: 1px solid rgba(96, 132, 168, .25);
|
||
border-radius: 17px;
|
||
background: linear-gradient(155deg, rgba(19, 34, 53, .96), rgba(8, 20, 34, .98));
|
||
box-shadow: 0 12px 30px rgba(0, 0, 0, .18);
|
||
cursor: default;
|
||
transition: border-color .18s ease, box-shadow .18s ease;
|
||
}
|
||
.hsc-card:hover { border-color: rgba(96, 132, 168, .34); }
|
||
.hsc-card.is-selected { border-color: #55e0c1; box-shadow: 0 0 0 1px rgba(85,224,193,.24), 0 18px 36px rgba(0,0,0,.26); }
|
||
.hsc-card.is-live { border-color: rgba(255, 79, 105, .55); }
|
||
.hsc-card.is-live::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: #ff4f69; box-shadow: 0 0 12px rgba(255,79,105,.7); }
|
||
.hsc-card-top { min-height: 48px; padding: 12px 14px 10px; display: flex; align-items: center; gap: 9px; border-bottom: 1px solid rgba(96,132,168,.15); }
|
||
.hsc-card-top time { color: #f7fbff; font-size: 20px; font-weight: 900; letter-spacing: .02em; }
|
||
.hsc-card-top > small { margin-left: auto; color: #7189a3; font-size: 10px; font-weight: 800; }
|
||
.hsc-status { padding: 4px 7px; border-radius: 999px; color: #8fa7bf; background: rgba(110,142,175,.12); font-size: 9px; font-weight: 900; letter-spacing: .07em; }
|
||
.hsc-current { padding: 4px 7px; border-radius: 999px; color: #55e0c1; background: rgba(85,224,193,.10); border: 1px solid rgba(85,224,193,.22); font-size: 9px; font-weight: 900; letter-spacing: .06em; }
|
||
.is-live .hsc-status { color: #fff; background: #e83959; box-shadow: 0 0 14px rgba(232,57,89,.3); }
|
||
.is-finished .hsc-status { color: #8fd9c8; background: rgba(66,180,154,.14); }
|
||
.hsc-matchup { position: relative; flex: 1; padding: 12px 14px; display: grid; gap: 6px; align-content: center; }
|
||
.hsc-team { min-width: 0; display: grid; grid-template-columns: 34px minmax(0,1fr) 46px; gap: 10px; align-items: center; padding: 8px 9px; border-radius: 11px; background: rgba(255,255,255,.028); }
|
||
.hsc-team-home { border-left: 2px solid var(--hsc-home); }
|
||
.hsc-team-away { border-left: 2px solid var(--hsc-away); }
|
||
.hsc-monogram { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; color: #eaf3fb; background: #17283b; border: 1px solid rgba(126,161,195,.19); font-size: 10px; font-weight: 900; }
|
||
.hsc-team-copy { min-width: 0; display: grid; gap: 1px; }
|
||
.hsc-team-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #f3f7fb; font-size: 14px; }
|
||
.hsc-team-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #7189a2; font-size: 10px; }
|
||
.hsc-team > b { color: #fff; font-size: 26px; line-height: 1; text-align: center; font-variant-numeric: tabular-nums; }
|
||
.hsc-versus { position: absolute; left: 50%; top: 50%; z-index: 1; transform: translate(-50%,-50%); padding: 1px 5px; border-radius: 5px; color: #5e748c; background: #0c1928; font-size: 8px; font-weight: 900; }
|
||
.hsc-periods { margin: -3px 14px 9px; display: flex; justify-content: center; gap: 5px; }
|
||
.hsc-periods span { min-width: 42px; padding: 4px 6px; display: flex; justify-content: center; gap: 5px; border-radius: 7px; color: #9aafc4; background: rgba(255,255,255,.035); font-size: 10px; }
|
||
.hsc-periods i { color: #60778f; font-style: normal; }
|
||
.hsc-periods b { color: #dce7f1; }
|
||
.hsc-card-footer { min-height: 49px; padding: 9px 13px; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 8px; border-top: 1px solid rgba(96,132,168,.14); background: rgba(3,11,20,.28); }
|
||
.hsc-card-footer > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #8399b0; font-size: 10px; }
|
||
.hsc-card-footer > small { color: #6f849a; font-size: 9px; }
|
||
.hsc-empty { width: 100%; height: 100%; display: grid; place-content: center; justify-items: center; gap: 8px; padding: 30px; text-align: center; }
|
||
.hsc-empty > span { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 18px; color: #55e0c1; background: rgba(85,224,193,.09); font-size: 27px; }
|
||
.hsc-empty > strong { color: #edf5fc; font-size: 18px; }
|
||
.hsc-empty > small { max-width: 480px; color: #7f96ad; font-size: 12px; line-height: 1.5; }
|
||
@media (max-width: 980px) {
|
||
.hsc-header { align-items: flex-start; padding: 17px; }
|
||
.hsc-title > strong { font-size: 20px; }
|
||
.hsc-summary > div { min-width: 58px; padding: 8px; }
|
||
.hsc-grid { grid-template-columns: 1fr; padding: 12px; }
|
||
}
|
||
|
||
|
||
/* Build 2026.07.20.3: navigation-exclusive play-by-play and team schedules. */
|
||
body.hockey-navigation-open #hockeyStandalonePbp { display: none !important; }
|
||
body.hockey-navigation-open .runtime-viewport.has-hockey-pbp { gap: 0 !important; }
|
||
body.hockey-navigation-open .runtime-viewport > .runtime-sizer { margin-inline: auto !important; }
|
||
.hsc-subnav {
|
||
min-height: 58px;
|
||
padding: 9px 20px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
border-bottom: 1px solid rgba(112,151,190,.15);
|
||
background: rgba(4,12,22,.42);
|
||
}
|
||
.hsc-subnav > button {
|
||
min-height: 36px;
|
||
padding: 0 14px;
|
||
color: #7f98b1;
|
||
border: 1px solid rgba(105,142,179,.20);
|
||
border-radius: 10px;
|
||
background: rgba(16,31,48,.62);
|
||
font-size: 11px;
|
||
font-weight: 900;
|
||
letter-spacing: .03em;
|
||
}
|
||
.hsc-subnav > button.active { color:#07131f; border-color:#55e0c1; background:#55e0c1; box-shadow:0 5px 16px rgba(85,224,193,.18); }
|
||
.hsc-filters { margin-left:auto; display:flex; align-items:center; gap:8px; }
|
||
.hsc-filters label { display:grid; gap:2px; }
|
||
.hsc-filters label > span { color:#617a93; font-size:8px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }
|
||
.hsc-filters select { min-width:138px; height:34px; padding:0 28px 0 10px; color:#dce8f3; border:1px solid rgba(104,143,181,.24); border-radius:9px; background:#102034; font-size:10px; font-weight:800; }
|
||
.hsc-content { flex:1; min-height:0; overflow:hidden; }
|
||
.hsc-content.is-day { display:flex; }
|
||
.hsc-content.is-day > .hsc-grid, .hsc-content.is-day > .hsc-empty { flex:1; }
|
||
.hsc-content.is-team-history { padding:14px 18px 18px; }
|
||
.hsc-history-grid { width:100%; height:100%; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:14px; }
|
||
.hsc-history-column { min-width:0; min-height:0; display:flex; flex-direction:column; overflow:hidden; border:1px solid rgba(99,136,173,.22); border-radius:16px; background:rgba(7,17,29,.72); }
|
||
.hsc-history-column > header { min-height:62px; padding:11px 13px; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2px 10px; align-items:center; border-bottom:1px solid rgba(99,136,173,.18); }
|
||
.hsc-history-column.side-home > header { box-shadow:inset 3px 0 0 var(--hsc-home); }
|
||
.hsc-history-column.side-away > header { box-shadow:inset 3px 0 0 var(--hsc-away); }
|
||
.hsc-history-column > header span { grid-column:1; color:#627d98; font-size:8px; font-weight:900; letter-spacing:.12em; }
|
||
.hsc-history-column > header strong { grid-column:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#f1f7fc; font-size:16px; }
|
||
.hsc-history-column > header b { grid-column:2; grid-row:1 / 3; min-width:34px; padding:7px; color:#cce0f1; text-align:center; border-radius:10px; background:rgba(94,132,170,.14); }
|
||
.hsc-history-list { flex:1; min-height:0; padding:9px; display:grid; gap:7px; align-content:start; overflow:auto; scrollbar-width:thin; scrollbar-color:#304b68 transparent; }
|
||
.hsc-history-card { position:relative; min-width:0; min-height:72px; padding:9px 10px; display:grid; grid-template-columns:118px minmax(0,1fr) 92px; gap:10px; align-items:center; border:1px solid rgba(96,132,168,.18); border-radius:12px; background:linear-gradient(145deg,rgba(19,34,52,.86),rgba(8,20,34,.92)); }
|
||
.hsc-history-card.is-head-to-head { border-color:rgba(255,201,82,.72); background:linear-gradient(145deg,rgba(69,52,20,.72),rgba(20,27,35,.94)); box-shadow:inset 0 0 0 1px rgba(255,201,82,.12),0 0 18px rgba(255,186,45,.07); }
|
||
.hsc-history-card.is-selected { box-shadow:inset 0 0 0 1px rgba(85,224,193,.6); }
|
||
.hsc-history-card > em { position:absolute; right:9px; top:5px; color:#ffd56a; font-size:7px; font-style:normal; font-weight:950; letter-spacing:.09em; }
|
||
.hsc-history-date { display:grid; gap:2px; }
|
||
.hsc-history-date time { color:#8ba2b8; font-size:9px; text-transform:capitalize; }
|
||
.hsc-history-date b { color:#f5f9fd; font-size:17px; font-variant-numeric:tabular-nums; }
|
||
.hsc-history-main { min-width:0; display:grid; gap:2px; }
|
||
.hsc-history-main strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#edf5fc; font-size:12px; }
|
||
.hsc-history-main small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#657f98; font-size:9px; }
|
||
.hsc-history-venue { width:max-content; padding:2px 5px; color:#7fa6ca; border-radius:5px; background:rgba(94,139,181,.12); font-size:7px; font-weight:900; letter-spacing:.07em; }
|
||
.hsc-history-result { display:grid; justify-items:end; gap:5px; }
|
||
.hsc-history-result > b { color:#fff; font-size:22px; font-variant-numeric:tabular-nums; }
|
||
.hsc-history-empty { padding:32px 15px; color:#6f879f; text-align:center; font-size:11px; }
|
||
@media (max-width:1100px) {
|
||
.hsc-subnav { flex-wrap:wrap; }
|
||
.hsc-filters { width:100%; margin-left:0; }
|
||
.hsc-filters label { flex:1; }
|
||
.hsc-filters select { width:100%; min-width:0; }
|
||
.hsc-history-card { grid-template-columns:96px minmax(0,1fr) 76px; }
|
||
}
|
||
|
||
/* BUILD 2026.07.20.4 — regular-season shootout control */
|
||
.hockey-shootout-control {
|
||
--home: #4d9cff;
|
||
--away: #ff5f79;
|
||
width: 100%;
|
||
height: 100%;
|
||
min-height: 0;
|
||
display: grid;
|
||
grid-template-rows: auto auto auto minmax(0, 1fr);
|
||
overflow: hidden;
|
||
color: #eaf2fb;
|
||
border: 1px solid #253b53;
|
||
border-radius: 20px;
|
||
background:
|
||
radial-gradient(circle at 50% 0%, rgba(72,223,189,.08), transparent 32%),
|
||
linear-gradient(180deg, #0b1726, #07111d);
|
||
}
|
||
.hso-empty { height: 100%; display: grid; place-content: center; gap: 8px; color: #71869e; text-align: center; }
|
||
.hso-empty strong { color: #dce7f3; font-size: 22px; }
|
||
.hso-empty span { font-size: 12px; }
|
||
.hso-empty.is-loading strong { color: #83ecd4; }
|
||
.hso-header { min-height: 70px; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 14px 20px; border-bottom: 1px solid #22364c; background: rgba(8,18,30,.82); }
|
||
.hso-header>div:first-child { min-width: 0; display: grid; gap: 3px; }
|
||
.hso-header>div:first-child span,
|
||
.hso-roster>header span,
|
||
.hso-journal>header span { color: #6c8299; font-size: 8px; font-weight: 950; letter-spacing: .14em; }
|
||
.hso-header>div:first-child strong { overflow: hidden; font-size: 18px; font-weight: 950; text-overflow: ellipsis; white-space: nowrap; }
|
||
.hso-score { display: flex; align-items: center; gap: 12px; }
|
||
.hso-score span { max-width: 160px; overflow: hidden; color: #8ca0b6; font-size: 10px; font-weight: 850; text-overflow: ellipsis; white-space: nowrap; }
|
||
.hso-score strong { min-width: 92px; padding: 7px 12px; color: #fff; border: 1px solid #334b65; border-radius: 11px; background: #0e1d2d; font-size: 23px; font-weight: 950; text-align: center; font-variant-numeric: tabular-nums; }
|
||
.hso-setup { min-height: 52px; display: flex; align-items: center; gap: 10px; padding: 8px 16px; border-bottom: 1px solid #1d3147; background: rgba(255,255,255,.018); }
|
||
.hso-series-size { display: flex; align-items: center; gap: 5px; }
|
||
.hso-series-size>span { margin-right: 4px; color: #8296ad; font-size: 9px; font-weight: 850; }
|
||
.hso-series-size button,
|
||
.hso-start,
|
||
.hso-next-series { height: 31px; padding: 0 12px; color: #aabbd0; border: 1px solid #314861; border-radius: 8px; background: #0d1b2b; font-size: 10px; font-weight: 900; cursor: pointer; }
|
||
.hso-series-size button { min-width: 34px; padding: 0; }
|
||
.hso-series-size button.active { color: #07150f; border-color: #48dfbd; background: #48dfbd; }
|
||
.hso-start { color: #dbe8f5; }
|
||
.hso-next-series { color: #ffe2a3; border-color: rgba(240,189,101,.55); background: rgba(240,189,101,.09); }
|
||
.hso-series-size button:disabled,
|
||
.hso-start:disabled,
|
||
.hso-next-series:disabled { opacity: .45; cursor: default; }
|
||
.hso-series-info { margin-left: auto; display: flex; align-items: baseline; gap: 6px; color: #7388a0; }
|
||
.hso-series-info strong { color: #dce8f4; font-size: 17px; }
|
||
.hso-series-info span { font-size: 9px; }
|
||
.hso-progress { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding: 7px 18px; border-bottom: 1px solid #1d3147; }
|
||
.hso-progress>div { min-width: 0; display: flex; align-items: center; gap: 10px; }
|
||
.hso-progress>div.side-away { justify-content: flex-end; }
|
||
.hso-progress strong { max-width: 180px; overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
|
||
.hso-progress .side-home strong { color: var(--home); }
|
||
.hso-progress .side-away strong { color: var(--away); order: 2; }
|
||
.hso-progress>div>div { display: flex; gap: 5px; }
|
||
.hso-slot { width: 24px; height: 24px; display: grid; place-items: center; border: 1px solid #31475f; border-radius: 50%; color: #5e748d; background: #0c1928; font-size: 10px; font-weight: 950; }
|
||
.hso-slot.is-goal { color: #07140f; border-color: #5bf0c9; background: #5bf0c9; box-shadow: 0 0 10px rgba(91,240,201,.25); }
|
||
.hso-slot.is-miss { color: #fff; border-color: #ff6d82; background: #c63752; }
|
||
.hso-grid { min-height: 0; display: grid; grid-template-columns: minmax(260px, .85fr) minmax(430px, 1.35fr) minmax(260px, .85fr); gap: 10px; padding: 10px; }
|
||
.hso-roster,
|
||
.hso-center { min-height: 0; overflow: hidden; border: 1px solid #233850; border-radius: 14px; background: rgba(8,17,29,.75); }
|
||
.hso-roster { display: grid; grid-template-rows: auto minmax(0, 1fr); }
|
||
.hso-roster>header { min-height: 49px; display: grid; align-content: center; gap: 2px; padding: 8px 12px; border-bottom: 1px solid #24384e; }
|
||
.hso-roster.side-home>header { box-shadow: inset 3px 0 0 var(--home); }
|
||
.hso-roster.side-away>header { text-align: right; box-shadow: inset -3px 0 0 var(--away); }
|
||
.hso-roster>header strong { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
|
||
.hso-player-list { min-height: 0; overflow-y: auto; padding: 6px; scrollbar-width: thin; scrollbar-color: #36506b transparent; }
|
||
.hso-player { width: 100%; min-height: 37px; display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 6px; margin-bottom: 4px; padding: 5px 7px; color: #dce7f2; border: 1px solid transparent; border-radius: 8px; background: rgba(255,255,255,.025); text-align: left; cursor: pointer; }
|
||
.hso-player:hover:not(:disabled) { border-color: #36536f; background: rgba(255,255,255,.05); }
|
||
.hso-roster.side-home .hso-player.is-selected { border-color: var(--home); background: rgba(77,156,255,.13); }
|
||
.hso-roster.side-away .hso-player.is-selected { border-color: var(--away); background: rgba(255,95,121,.13); }
|
||
.hso-player:disabled { opacity: .48; cursor: default; }
|
||
.hso-player>span { color: #8398ae; font-size: 10px; font-weight: 950; }
|
||
.hso-player strong { overflow: hidden; font-size: 10px; font-weight: 850; text-overflow: ellipsis; white-space: nowrap; }
|
||
.hso-player small { color: #647990; font-size: 8px; }
|
||
.hso-no-roster { padding: 20px; color: #687e96; font-size: 10px; text-align: center; }
|
||
.hso-center { display: grid; grid-template-rows: auto minmax(0, 1fr); }
|
||
.hso-selected { min-height: 76px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-content: center; gap: 2px 10px; padding: 10px 13px; border-bottom: 1px solid #253950; background: rgba(72,223,189,.025); }
|
||
.hso-selected>span { color: #7389a1; font-size: 8px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
|
||
.hso-selected>strong { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
|
||
.hso-selected>div { grid-row: 1 / 3; grid-column: 2; display: flex; align-items: center; gap: 7px; }
|
||
.hso-selected button { height: 36px; padding: 0 13px; border-radius: 9px; font-size: 10px; font-weight: 950; cursor: pointer; }
|
||
.hso-selected button.is-goal { color: #06150f; border: 1px solid #56e5bf; background: #56e5bf; }
|
||
.hso-selected button.is-miss { color: #fff; border: 1px solid #ff6b80; background: #b62f4a; }
|
||
.hso-selected button:disabled { opacity: .38; cursor: default; }
|
||
.hso-journal { min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); }
|
||
.hso-journal>header { min-height: 38px; display: flex; align-items: center; justify-content: space-between; padding: 7px 11px; border-bottom: 1px solid #22364b; }
|
||
.hso-journal>header strong { min-width: 25px; height: 22px; display: grid; place-items: center; color: #93a8be; border-radius: 7px; background: rgba(255,255,255,.055); font-size: 10px; }
|
||
.hso-journal-list { min-height: 0; overflow-y: auto; padding: 6px; scrollbar-width: thin; scrollbar-color: #36506b transparent; }
|
||
.hso-journal-empty { padding: 30px 10px; color: #61778f; font-size: 10px; text-align: center; }
|
||
.hso-attempt { --side: #8096ae; min-height: 49px; display: grid; grid-template-columns: 48px minmax(0, 1fr) 68px 24px; align-items: center; gap: 7px; margin-bottom: 5px; padding: 5px 6px 5px 8px; border: 1px solid #263c54; border-left: 3px solid var(--side); border-radius: 9px; background: rgba(255,255,255,.025); }
|
||
.hso-attempt.side-home { --side: var(--home); }
|
||
.hso-attempt.side-away { --side: var(--away); }
|
||
.hso-attempt-order { display: grid; gap: 1px; }
|
||
.hso-attempt-order b { color: var(--side); font-size: 13px; }
|
||
.hso-attempt-order span { color: #647a91; font-size: 6px; line-height: 1.15; }
|
||
.hso-attempt-player { min-width: 0; display: grid; gap: 2px; }
|
||
.hso-attempt-player strong { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
|
||
.hso-attempt-player span { overflow: hidden; color: #748aa1; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
|
||
.hso-attempt-result { display: grid; grid-template-columns: 19px 1fr; align-items: center; gap: 4px; }
|
||
.hso-attempt-result b { width: 19px; height: 19px; display: grid; place-items: center; border-radius: 50%; font-size: 12px; }
|
||
.hso-attempt.is-goal .hso-attempt-result b { color: #06150f; background: #55e4bd; }
|
||
.hso-attempt.is-miss .hso-attempt-result b { color: #fff; background: #bf3650; }
|
||
.hso-attempt-result span { color: #859bb1; font-size: 7px; font-weight: 950; }
|
||
.hso-attempt-delete { width: 22px; height: 22px; padding: 0; color: #7d91a7; border: 0; border-radius: 6px; background: transparent; font-size: 14px; cursor: pointer; }
|
||
.hso-attempt-delete:hover { color: #fff; background: rgba(255,95,121,.22); }
|
||
@media (max-width: 1100px) {
|
||
.hso-grid { grid-template-columns: 240px minmax(360px, 1fr) 240px; }
|
||
.hso-score span { display: none; }
|
||
}
|
||
|
||
/* BUILD 2026.07.20.5 — team colours stay visible on the KHL shot map. */
|
||
.hsm-point.side-home.is-shot,
|
||
.hsm-point.side-home.is-target {
|
||
background: #1bc8ff !important;
|
||
border-color: #f2fdff !important;
|
||
box-shadow: 0 0 0 3px rgba(12, 113, 170, .72), 0 0 12px rgba(27, 200, 255, .9), 0 3px 9px rgba(0,0,0,.72) !important;
|
||
}
|
||
.hsm-point.side-away.is-shot,
|
||
.hsm-point.side-away.is-target {
|
||
background: #ff4f68 !important;
|
||
border-color: #fff1f4 !important;
|
||
box-shadow: 0 0 0 3px rgba(151, 18, 45, .76), 0 0 12px rgba(255, 79, 104, .94), 0 3px 9px rgba(0,0,0,.72) !important;
|
||
}
|
||
.hsm-point.side-home.is-missed,
|
||
.hsm-point.side-home.is-blocked { border-color: #67d8ff !important; }
|
||
.hsm-point.side-away.is-missed,
|
||
.hsm-point.side-away.is-blocked { border-color: #ff7186 !important; }
|
||
.hsm-point.side-home.is-goal {
|
||
box-shadow: 0 0 0 4px rgba(27, 156, 218, .78), 0 0 18px rgba(255, 212, 59, 1), 0 4px 11px rgba(0,0,0,.72) !important;
|
||
}
|
||
.hsm-point.side-away.is-goal {
|
||
box-shadow: 0 0 0 4px rgba(196, 30, 57, .82), 0 0 18px rgba(255, 212, 59, 1), 0 4px 11px rgba(0,0,0,.72) !important;
|
||
}
|
||
|
||
/* BUILD 2026.07.20.7 — quick player search in the shootout rosters. */
|
||
.hso-roster {
|
||
grid-template-rows: auto auto minmax(0, 1fr);
|
||
}
|
||
.hso-player-search {
|
||
min-height: 39px;
|
||
display: grid;
|
||
grid-template-columns: 20px minmax(0, 1fr) 22px;
|
||
align-items: center;
|
||
gap: 4px;
|
||
margin: 7px 7px 1px;
|
||
padding: 0 7px;
|
||
border: 1px solid #2a4058;
|
||
border-radius: 9px;
|
||
background: #0a1827;
|
||
transition: border-color .15s ease, box-shadow .15s ease;
|
||
}
|
||
.hso-player-search:focus-within {
|
||
border-color: #4a7598;
|
||
box-shadow: 0 0 0 2px rgba(74, 117, 152, .16);
|
||
}
|
||
.hso-player-search.side-home:focus-within {
|
||
border-color: var(--home);
|
||
box-shadow: 0 0 0 2px rgba(77, 156, 255, .14);
|
||
}
|
||
.hso-player-search.side-away:focus-within {
|
||
border-color: var(--away);
|
||
box-shadow: 0 0 0 2px rgba(255, 95, 121, .14);
|
||
}
|
||
.hso-player-search>span {
|
||
color: #617890;
|
||
font-size: 17px;
|
||
line-height: 1;
|
||
text-align: center;
|
||
transform: translateY(-1px);
|
||
}
|
||
.hso-player-search input {
|
||
width: 100%;
|
||
min-width: 0;
|
||
height: 31px;
|
||
padding: 0;
|
||
color: #e3edf7;
|
||
border: 0;
|
||
outline: 0;
|
||
background: transparent;
|
||
font: inherit;
|
||
font-size: 9px;
|
||
font-weight: 750;
|
||
}
|
||
.hso-player-search input::placeholder { color: #586f87; }
|
||
.hso-player-search input::-webkit-search-cancel-button { display: none; }
|
||
.hso-player-search button {
|
||
width: 22px;
|
||
height: 22px;
|
||
display: grid;
|
||
place-items: center;
|
||
padding: 0;
|
||
color: #8398ae;
|
||
border: 0;
|
||
border-radius: 6px;
|
||
background: rgba(255,255,255,.045);
|
||
font-size: 14px;
|
||
cursor: pointer;
|
||
}
|
||
.hso-player-search button:hover { color: #fff; background: rgba(255,255,255,.1); }
|
||
.hso-player[hidden],
|
||
.hso-search-empty[hidden],
|
||
.hso-player-search button[hidden] { display: none !important; }
|
||
.hso-search-empty {
|
||
padding: 22px 8px;
|
||
color: #6f849b;
|
||
font-size: 9px;
|
||
font-weight: 750;
|
||
text-align: center;
|
||
}
|
||
|
||
/* Build34: global shortcut/action-sequence builder */
|
||
.modal-card:has(.shortcut-sequence-editor),
|
||
.modal-card:has(.shortcut-reference) {
|
||
width: min(1260px, 96vw);
|
||
max-height: 92vh;
|
||
}
|
||
.shortcut-sequence-editor,
|
||
.shortcut-reference { display: grid; gap: 14px; }
|
||
.shortcut-sequence-intro,
|
||
.shortcut-reference-head {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 16px;
|
||
padding: 14px 16px;
|
||
border: 1px solid rgba(72,223,189,.24);
|
||
border-radius: 12px;
|
||
background: linear-gradient(135deg, rgba(72,223,189,.07), rgba(76,109,255,.055));
|
||
}
|
||
.shortcut-sequence-intro p,
|
||
.shortcut-reference-head p { margin: 5px 0 0; color: #91a5be; font-size: 12px; }
|
||
.shortcut-sequence-toolbar {
|
||
position: sticky;
|
||
top: -18px;
|
||
z-index: 8;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
padding: 10px 0;
|
||
background: #111b2b;
|
||
}
|
||
.shortcut-sequence-toolbar span { color: #7f93ae; font-size: 11px; }
|
||
.shortcut-sequence-list { display: grid; gap: 14px; }
|
||
.shortcut-sequence-card {
|
||
overflow: hidden;
|
||
border: 1px solid #30445d;
|
||
border-radius: 14px;
|
||
background: #0b1421;
|
||
}
|
||
.shortcut-sequence-card.has-conflict { border-color: rgba(245,196,81,.72); box-shadow: 0 0 0 3px rgba(245,196,81,.06); }
|
||
.shortcut-sequence-head {
|
||
display: grid;
|
||
grid-template-columns: auto minmax(220px,1fr) auto auto;
|
||
gap: 9px;
|
||
align-items: center;
|
||
padding: 11px 12px;
|
||
border-bottom: 1px solid #26394f;
|
||
background: #142033;
|
||
}
|
||
.shortcut-sequence-name { font-weight: 850; }
|
||
.shortcut-sequence-description {
|
||
width: calc(100% - 24px);
|
||
margin: 12px 12px 0;
|
||
resize: vertical;
|
||
}
|
||
.shortcut-sequence-key-row {
|
||
display: grid;
|
||
grid-template-columns: minmax(190px, .8fr) auto minmax(210px,.9fr) auto auto;
|
||
gap: 9px;
|
||
align-items: end;
|
||
padding: 12px;
|
||
}
|
||
.shortcut-sequence-key-row > label:not(.check-inline) { display: grid; gap: 5px; color: #91a6c0; font-size: 10px; }
|
||
.shortcut-sequence-key-row [data-sequence-combo] { font: 800 15px ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .03em; }
|
||
.shortcut-sequence-warning {
|
||
margin: 0 12px 10px;
|
||
padding: 8px 10px;
|
||
color: #ffe6a5;
|
||
border: 1px solid rgba(245,196,81,.30);
|
||
border-radius: 9px;
|
||
background: rgba(245,196,81,.09);
|
||
font-size: 11px;
|
||
}
|
||
.shortcut-sequence-summary {
|
||
margin: 0 12px 12px;
|
||
padding: 9px 11px;
|
||
color: #9eb1c9;
|
||
border: 1px solid #23364c;
|
||
border-radius: 9px;
|
||
background: #0f1928;
|
||
font-size: 11px;
|
||
line-height: 1.45;
|
||
}
|
||
.shortcut-sequence-summary strong { color: #dce8f7; }
|
||
.shortcut-sequence-steps { display: grid; gap: 9px; padding: 0 12px 12px; }
|
||
.shortcut-step-card {
|
||
overflow: hidden;
|
||
border: 1px solid #26394f;
|
||
border-radius: 11px;
|
||
background: #101a29;
|
||
}
|
||
.shortcut-step-head {
|
||
display: grid;
|
||
grid-template-columns: 30px auto minmax(230px,1fr) auto auto auto;
|
||
gap: 7px;
|
||
align-items: center;
|
||
padding: 8px 9px;
|
||
border-bottom: 1px solid #223348;
|
||
background: #121f31;
|
||
}
|
||
.shortcut-step-number {
|
||
display: grid;
|
||
place-items: center;
|
||
width: 26px;
|
||
height: 26px;
|
||
color: #07130f;
|
||
border-radius: 8px;
|
||
background: var(--accent);
|
||
font-size: 11px;
|
||
font-weight: 900;
|
||
}
|
||
.shortcut-step-enabled { display: inline-flex; align-items: center; gap: 6px; color: #aebed2; font-size: 10px; white-space: nowrap; }
|
||
.shortcut-step-common,
|
||
.shortcut-step-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(2,minmax(0,1fr));
|
||
gap: 9px;
|
||
padding: 9px;
|
||
}
|
||
.shortcut-step-common { border-bottom: 1px solid #1f3044; }
|
||
.shortcut-step-common label,
|
||
.shortcut-step-grid label { display: grid; gap: 5px; color: #8fa4bf; font-size: 10px; }
|
||
.shortcut-step-grid.vmix-command-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
|
||
.shortcut-step-body code,
|
||
.shortcut-sequence-summary code { color: #8debd7; }
|
||
.shortcut-step-note { margin: 0; padding: 0 10px 10px; color: #7187a3; font-size: 10px; line-height: 1.45; }
|
||
.shortcut-sync-toggles { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; padding: 0 10px 10px; }
|
||
.shortcut-sync-toggles label { display: flex; align-items: center; gap: 7px; color: #aebed2; font-size: 10px; }
|
||
.shortcut-add-steps {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-items: center;
|
||
gap: 7px;
|
||
padding: 11px 12px;
|
||
border-top: 1px solid #26394f;
|
||
background: #111d2d;
|
||
}
|
||
.shortcut-add-steps > span { margin-right: 3px; color: #7f93ad; font-size: 10px; text-transform: uppercase; letter-spacing: .05em; }
|
||
.shortcut-reference-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
|
||
.shortcut-reference-card {
|
||
display: grid;
|
||
grid-template-columns: 120px minmax(0,1fr);
|
||
gap: 14px;
|
||
align-items: start;
|
||
padding: 14px;
|
||
border: 1px solid #2c4058;
|
||
border-radius: 12px;
|
||
background: linear-gradient(145deg,#111d2d,#0c1624);
|
||
}
|
||
.shortcut-reference-card kbd {
|
||
display: flex;
|
||
min-height: 48px;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 8px 10px;
|
||
color: #ecf6ff;
|
||
border: 1px solid #58708e;
|
||
border-bottom-width: 4px;
|
||
border-radius: 9px;
|
||
background: #17263b;
|
||
box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
|
||
font: 900 17px ui-monospace, SFMono-Regular, Consolas, monospace;
|
||
}
|
||
.shortcut-reference-card strong { display: block; margin: 2px 0 5px; font-size: 14px; }
|
||
.shortcut-reference-card p { margin: 0 0 7px; color: #a6b7cb; font-size: 11px; line-height: 1.45; }
|
||
.shortcut-reference-card small { display: block; color: #6f849f; font-size: 9px; line-height: 1.4; }
|
||
.shortcut-reference-empty { padding: 28px; color: #8295ae; text-align: center; border: 1px dashed #30445d; border-radius: 12px; }
|
||
|
||
@media (max-width: 980px) {
|
||
.shortcut-sequence-head { grid-template-columns: auto 1fr auto; }
|
||
.shortcut-sequence-head [data-sequence-test] { grid-column: 2; }
|
||
.shortcut-sequence-key-row { grid-template-columns: 1fr auto; }
|
||
.shortcut-step-head { grid-template-columns: 30px 1fr auto auto auto; }
|
||
.shortcut-step-head > select { grid-column: 1 / -1; }
|
||
.shortcut-step-common,
|
||
.shortcut-step-grid,
|
||
.shortcut-step-grid.vmix-command-grid,
|
||
.shortcut-sync-toggles,
|
||
.shortcut-reference-grid { grid-template-columns: 1fr; }
|
||
}
|
||
.shortcut-reference-kind {
|
||
display: inline-block;
|
||
margin-bottom: 3px;
|
||
color: #65d9c0;
|
||
font-size: 8px;
|
||
font-weight: 900;
|
||
letter-spacing: .08em;
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
/* Build35: shortcut editor usability + live vMix pickers */
|
||
.modal-card.modal-shortcuts-full,
|
||
.modal-card:has(.shortcut-sequence-editor) {
|
||
width: calc(100vw - 20px);
|
||
max-width: none;
|
||
min-width: min(980px, calc(100vw - 20px));
|
||
height: calc(100vh - 20px);
|
||
max-height: none;
|
||
padding: 14px;
|
||
overflow: auto;
|
||
overscroll-behavior: contain;
|
||
}
|
||
.modal-backdrop.is-locked { padding: 10px; }
|
||
.modal-backdrop.is-locked .modal-card { box-shadow: 0 28px 100px rgba(0,0,0,.64), 0 0 0 1px rgba(72,223,189,.08); }
|
||
.modal-lock-hint {
|
||
margin-left: auto;
|
||
color: #6f849f;
|
||
font-size: 10px;
|
||
font-weight: 750;
|
||
white-space: nowrap;
|
||
}
|
||
.modal-shortcuts-full .modal-head {
|
||
position: sticky;
|
||
top: -14px;
|
||
z-index: 30;
|
||
margin: -14px -14px 12px;
|
||
padding: 12px 14px;
|
||
border-bottom: 1px solid #2a3d55;
|
||
background: rgba(17,27,43,.97);
|
||
backdrop-filter: blur(12px);
|
||
}
|
||
.shortcut-sequence-editor { min-width: 0; }
|
||
.shortcut-sequence-toolbar {
|
||
top: 45px;
|
||
z-index: 24;
|
||
display: grid;
|
||
grid-template-columns: minmax(420px,1fr) minmax(220px,.55fr) auto auto;
|
||
gap: 10px;
|
||
align-items: end;
|
||
margin: 0 -2px;
|
||
padding: 10px 2px;
|
||
border-bottom: 1px solid rgba(49,69,94,.7);
|
||
background: rgba(17,27,43,.97);
|
||
backdrop-filter: blur(12px);
|
||
}
|
||
.shortcut-toolbar-main,
|
||
.shortcut-toolbar-actions,
|
||
.shortcut-vmix-status {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-items: center;
|
||
gap: 7px;
|
||
}
|
||
.shortcut-toolbar-actions { justify-content: flex-end; }
|
||
.shortcut-vmix-status {
|
||
justify-content: flex-end;
|
||
min-width: 210px;
|
||
color: #8ca2bc;
|
||
font-size: 10px;
|
||
}
|
||
.shortcut-vmix-status [data-vmix-inventory-status] {
|
||
max-width: 260px;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
.shortcut-search {
|
||
display: grid;
|
||
gap: 4px;
|
||
color: #7f93ae;
|
||
font-size: 9px;
|
||
font-weight: 800;
|
||
text-transform: uppercase;
|
||
letter-spacing: .05em;
|
||
}
|
||
.shortcut-search input { min-width: 0; }
|
||
.shortcut-sequence-list { gap: 9px; }
|
||
.shortcut-sequence-card.is-collapsed {
|
||
overflow: visible;
|
||
background: #0d1725;
|
||
}
|
||
.shortcut-sequence-compact {
|
||
display: grid;
|
||
grid-template-columns: auto 96px minmax(220px,1fr) auto auto auto;
|
||
gap: 10px;
|
||
align-items: center;
|
||
min-height: 64px;
|
||
padding: 9px 11px;
|
||
}
|
||
.shortcut-sequence-compact kbd {
|
||
display: flex;
|
||
min-height: 40px;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 6px 10px;
|
||
color: #edf7ff;
|
||
border: 1px solid #526b88;
|
||
border-bottom-width: 3px;
|
||
border-radius: 8px;
|
||
background: #17263a;
|
||
font: 900 14px ui-monospace, SFMono-Regular, Consolas, monospace;
|
||
}
|
||
.shortcut-sequence-compact-copy { min-width: 0; }
|
||
.shortcut-sequence-compact-copy strong,
|
||
.shortcut-sequence-compact-copy small {
|
||
display: block;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
.shortcut-sequence-compact-copy strong { color: #dfeaf8; font-size: 13px; }
|
||
.shortcut-sequence-compact-copy small { margin-top: 4px; color: #7187a2; font-size: 10px; }
|
||
.shortcut-sequence-step-count {
|
||
color: #6f849d;
|
||
font-size: 9px;
|
||
white-space: nowrap;
|
||
}
|
||
.compact-toggle { padding: 8px; }
|
||
.shortcut-sequence-card.is-expanded {
|
||
border-color: rgba(72,223,189,.48);
|
||
box-shadow: 0 0 0 2px rgba(72,223,189,.045);
|
||
}
|
||
.shortcut-sequence-head {
|
||
grid-template-columns: auto minmax(260px,1fr) auto auto auto;
|
||
}
|
||
.shortcut-add-steps .mini-btn {
|
||
width: auto;
|
||
min-width: 82px;
|
||
min-height: 32px;
|
||
padding: 0 11px;
|
||
white-space: nowrap;
|
||
}
|
||
.shortcut-add-steps > span { min-width: 92px; }
|
||
.shortcut-step-head > select { min-width: 230px; }
|
||
.shortcut-step-grid.vmix-command-grid {
|
||
grid-template-columns: repeat(3,minmax(220px,1fr));
|
||
align-items: start;
|
||
}
|
||
.shortcut-vmix-custom { margin-top: 6px; }
|
||
.shortcut-vmix-inventory-note {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
padding: 0 10px 8px;
|
||
color: #78d9c4;
|
||
font-size: 10px;
|
||
}
|
||
.shortcut-vmix-inventory-note small { color: #7187a3; }
|
||
.shortcut-step-card .css-select-shell,
|
||
.shortcut-step-card .css-select-trigger { width: 100%; min-width: 0; }
|
||
.shortcut-step-card .css-select-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||
|
||
@media (max-width: 1250px) {
|
||
.shortcut-sequence-toolbar { grid-template-columns: 1fr 1fr; top: 45px; }
|
||
.shortcut-vmix-status { justify-content: flex-start; }
|
||
.shortcut-toolbar-actions { justify-content: flex-end; }
|
||
.shortcut-step-grid.vmix-command-grid { grid-template-columns: repeat(2,minmax(220px,1fr)); }
|
||
}
|
||
@media (max-width: 980px) {
|
||
.modal-card.modal-shortcuts-full,
|
||
.modal-card:has(.shortcut-sequence-editor) { min-width: 0; width: calc(100vw - 8px); height: calc(100vh - 8px); }
|
||
.shortcut-sequence-toolbar { grid-template-columns: 1fr; }
|
||
.shortcut-sequence-compact { grid-template-columns: auto 78px minmax(0,1fr) auto; }
|
||
.shortcut-sequence-compact .shortcut-sequence-step-count { display: none; }
|
||
.shortcut-sequence-compact [data-sequence-test] { display: none; }
|
||
.shortcut-step-grid.vmix-command-grid { grid-template-columns: 1fr; }
|
||
}
|
||
|
||
/* Build38: exact timer text targets + finish actions */
|
||
.shortcut-section-title {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
margin: 10px 9px 0;
|
||
padding: 9px 10px;
|
||
color: #c9d7e8;
|
||
border: 1px solid #263a52;
|
||
border-radius: 9px;
|
||
background: #101c2b;
|
||
font-size: 11px;
|
||
font-weight: 900;
|
||
letter-spacing: .02em;
|
||
}
|
||
.shortcut-section-title-with-action { justify-content: space-between; }
|
||
.shortcut-section-title-with-action .mini-btn { width: auto; min-width: 130px; padding: 0 10px; }
|
||
.shortcut-penalty-target-list,
|
||
.shortcut-finish-action-list {
|
||
display: grid;
|
||
gap: 7px;
|
||
margin: 7px 9px 10px;
|
||
}
|
||
.shortcut-penalty-target,
|
||
.shortcut-finish-action {
|
||
display: grid;
|
||
gap: 8px;
|
||
align-items: end;
|
||
align-self: start;
|
||
height: max-content;
|
||
padding: 9px;
|
||
border: 1px solid #263a52;
|
||
border-radius: 10px;
|
||
background: #0d1826;
|
||
}
|
||
.shortcut-penalty-target { grid-template-columns: 74px minmax(220px,.8fr) minmax(260px,1fr) 34px; }
|
||
.shortcut-finish-action { grid-template-columns: 34px 90px minmax(210px,1fr) minmax(220px,1fr) 120px 130px 34px; }
|
||
.shortcut-penalty-target label,
|
||
.shortcut-finish-action label {
|
||
display: grid;
|
||
gap: 5px;
|
||
min-width: 0;
|
||
color: #8fa4bf;
|
||
font-size: 10px;
|
||
}
|
||
.shortcut-target-index {
|
||
align-self: center;
|
||
color: #72dec7;
|
||
font-size: 10px;
|
||
font-weight: 900;
|
||
white-space: nowrap;
|
||
}
|
||
.shortcut-inline-check {
|
||
display: flex !important;
|
||
align-items: center;
|
||
gap: 6px !important;
|
||
padding-bottom: 8px;
|
||
white-space: nowrap;
|
||
}
|
||
.shortcut-empty-targets {
|
||
padding: 12px;
|
||
color: #70869f;
|
||
border: 1px dashed #30445d;
|
||
border-radius: 9px;
|
||
text-align: center;
|
||
font-size: 10px;
|
||
}
|
||
@media (max-width: 1350px) {
|
||
.shortcut-finish-action { grid-template-columns: 34px 90px repeat(2,minmax(220px,1fr)) 120px 130px 34px; }
|
||
}
|
||
@media (max-width: 1050px) {
|
||
.shortcut-penalty-target { grid-template-columns: 64px 1fr 1fr 34px; }
|
||
.shortcut-finish-action { grid-template-columns: 34px 90px 1fr 1fr; }
|
||
.shortcut-finish-action > :nth-child(n+5) { grid-column: auto; }
|
||
}
|
||
@media (max-width: 760px) {
|
||
.shortcut-penalty-target,
|
||
.shortcut-finish-action { grid-template-columns: 1fr; align-items: stretch; }
|
||
.shortcut-target-index { align-self: start; }
|
||
.shortcut-inline-check { padding-bottom: 0; }
|
||
}
|
||
|
||
/* Build43: strength/penalty runtime states + prematch buttons */
|
||
.hpd-team-name-block { min-width: 0; display: grid; gap: 5px; }
|
||
.hpd-team-state-buttons {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 6px;
|
||
margin-top: 3px;
|
||
}
|
||
.hpd-team-state-btn {
|
||
position: relative;
|
||
width: auto !important;
|
||
min-width: 132px;
|
||
min-height: 38px;
|
||
display: grid;
|
||
grid-template-columns: 27px minmax(0,1fr) 8px;
|
||
align-items: center;
|
||
gap: 7px;
|
||
padding: 5px 8px 5px 6px;
|
||
overflow: visible;
|
||
border: 1px solid #324a65;
|
||
border-radius: 10px;
|
||
color: #a8bacd;
|
||
background: linear-gradient(145deg,#0f1d2d,#0a1522);
|
||
box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
|
||
cursor: pointer;
|
||
transition: border-color .14s ease,background .14s ease,box-shadow .14s ease,transform .14s ease;
|
||
}
|
||
.hpd-team-state-btn:hover {
|
||
border-color: color-mix(in srgb,var(--team-column-color) 70%,#3b526c);
|
||
color: #edf6ff;
|
||
transform: translateY(-1px);
|
||
}
|
||
.hpd-team-state-icon {
|
||
width: 27px;
|
||
height: 27px;
|
||
display: grid;
|
||
place-items: center;
|
||
border: 1px solid #304861;
|
||
border-radius: 8px;
|
||
color: #89a2ba;
|
||
background: #122337;
|
||
}
|
||
.hpd-team-state-icon svg {
|
||
width: 18px;
|
||
height: 18px;
|
||
fill: none;
|
||
stroke: currentColor;
|
||
stroke-width: 1.7;
|
||
stroke-linecap: round;
|
||
stroke-linejoin: round;
|
||
}
|
||
.hpd-team-state-icon svg .accent { stroke: #f5c451; }
|
||
.hpd-team-state-copy {
|
||
min-width: 0;
|
||
display: grid;
|
||
gap: 1px;
|
||
text-align: left;
|
||
}
|
||
.hpd-team-state-copy b {
|
||
overflow: hidden;
|
||
color: #dce7f4;
|
||
font-size: 8px;
|
||
font-weight: 950;
|
||
line-height: 1.15;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
.hpd-team-state-copy small {
|
||
color: #687f97;
|
||
font-size: 6.5px;
|
||
font-weight: 900;
|
||
letter-spacing: .06em;
|
||
text-transform: uppercase;
|
||
}
|
||
.hpd-team-state-led {
|
||
width: 7px;
|
||
height: 7px;
|
||
border-radius: 999px;
|
||
background: #38506a;
|
||
box-shadow: 0 0 0 2px rgba(56,80,106,.16);
|
||
}
|
||
.hpd-team-state-btn.is-active {
|
||
border-color: color-mix(in srgb,var(--team-column-color) 82%,#dffaff);
|
||
background: linear-gradient(145deg,color-mix(in srgb,var(--team-column-color) 20%,#102034),#0b1927);
|
||
box-shadow: inset 0 0 0 1px color-mix(in srgb,var(--team-column-color) 24%,transparent),0 0 15px color-mix(in srgb,var(--team-column-color) 13%,transparent);
|
||
}
|
||
.hpd-team-state-btn.is-active .hpd-team-state-icon {
|
||
color: #07130f;
|
||
border-color: var(--team-column-color);
|
||
background: var(--team-column-color);
|
||
}
|
||
.hpd-team-state-btn.is-active .hpd-team-state-icon svg .accent { stroke: currentColor; }
|
||
.hpd-team-state-btn.is-active .hpd-team-state-copy b { color: #f4fbff; }
|
||
.hpd-team-state-btn.is-active .hpd-team-state-copy small { color: color-mix(in srgb,var(--team-column-color) 72%,white); }
|
||
.hpd-team-state-btn.is-active .hpd-team-state-led {
|
||
background: var(--team-column-color);
|
||
box-shadow: 0 0 0 3px color-mix(in srgb,var(--team-column-color) 18%,transparent),0 0 10px var(--team-column-color);
|
||
}
|
||
.hpd-team-state-btn:disabled { opacity: .6; cursor: wait; transform: none; }
|
||
|
||
.hockey-prematch-panel {
|
||
box-sizing: border-box;
|
||
width: 100%;
|
||
height: 100%;
|
||
min-height: 540px;
|
||
display: grid;
|
||
grid-template-rows: auto minmax(0,1fr);
|
||
gap: 0;
|
||
overflow: hidden;
|
||
padding: 24px;
|
||
color: #eef4ff;
|
||
background: radial-gradient(circle at 12% 0%,rgba(72,223,189,.10),transparent 30%),#07111d;
|
||
}
|
||
.hockey-prematch-head {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
justify-content: space-between;
|
||
gap: 18px;
|
||
margin-bottom: 16px;
|
||
padding: 18px 20px;
|
||
border: 1px solid #29415c;
|
||
border-radius: 16px;
|
||
background: #0b1828;
|
||
}
|
||
.hockey-prematch-head > div { display: grid; gap: 4px; }
|
||
.hockey-prematch-head small { color: #6f879f; font-size: 9px; font-weight: 950; letter-spacing: .12em; }
|
||
.hockey-prematch-head strong { font-size: 22px; font-weight: 950; }
|
||
.hockey-prematch-head span { color: #8ea4bc; font-size: 11px; }
|
||
.hockey-prematch-head .btn { width: auto; min-width: 170px; }
|
||
.hockey-prematch-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fill,minmax(230px,1fr));
|
||
gap: 12px;
|
||
}
|
||
.hockey-prematch-button {
|
||
position: relative;
|
||
min-height: 112px;
|
||
display: grid;
|
||
grid-template-columns: auto 1fr;
|
||
grid-template-areas: "state title" "state desc" "state key";
|
||
align-items: center;
|
||
gap: 3px 11px;
|
||
padding: 15px;
|
||
text-align: left;
|
||
border: 1px solid #2b425d;
|
||
border-radius: 14px;
|
||
color: #dce9f7;
|
||
background: linear-gradient(145deg,#0f1c2c,#0a1522);
|
||
cursor: pointer;
|
||
}
|
||
.hockey-prematch-button:hover { border-color: #4d718f; transform: translateY(-1px); }
|
||
.hockey-prematch-button.is-active { border-color: #48dfbd; box-shadow: inset 0 0 0 1px rgba(72,223,189,.28),0 0 18px rgba(72,223,189,.08); }
|
||
.hockey-prematch-button-state {
|
||
grid-area: state;
|
||
align-self: stretch;
|
||
min-width: 48px;
|
||
display: grid;
|
||
place-items: center;
|
||
border-radius: 10px;
|
||
color: #8fa4bd;
|
||
background: #15273a;
|
||
font-size: 10px;
|
||
font-weight: 950;
|
||
}
|
||
.hockey-prematch-button.is-active .hockey-prematch-button-state { color: #06120f; background: #48dfbd; }
|
||
.hockey-prematch-button strong { grid-area: title; font-size: 14px; font-weight: 950; }
|
||
.hockey-prematch-button small { grid-area: desc; color: #7e94ac; font-size: 9px; line-height: 1.35; }
|
||
.hockey-prematch-button kbd { grid-area: key; justify-self: start; margin-top: 4px; padding: 3px 7px; border: 1px solid #334b65; border-radius: 6px; color: #a9bdd2; background: #101e2e; font-size: 9px; }
|
||
.hockey-prematch-empty { grid-column: 1/-1; min-height: 210px; display: grid; place-items: center; align-content: center; gap: 6px; border: 1px dashed #304760; border-radius: 16px; color: #7188a1; text-align: center; }
|
||
.hockey-prematch-empty strong { color: #b8c8d9; font-size: 15px; }
|
||
|
||
.prematch-editor { display: grid; gap: 12px; min-width: min(1200px,calc(100vw - 70px)); }
|
||
.prematch-editor-head { display: flex; justify-content: space-between; gap: 15px; align-items: center; }
|
||
.prematch-editor-head p { max-width: 760px; margin: 0; color: #8fa4bc; font-size: 11px; line-height: 1.45; }
|
||
.prematch-editor-head .btn { width: auto; min-width: 120px; }
|
||
.prematch-editor-list { display: grid; gap: 8px; align-content: start; grid-auto-rows: max-content; max-height: calc(100vh - 300px); overflow: auto; }
|
||
.prematch-editor-row {
|
||
display: grid;
|
||
grid-template-columns: 32px 90px minmax(170px,.8fr) minmax(150px,.6fr) 170px minmax(230px,1fr) minmax(220px,1fr) 34px;
|
||
gap: 8px;
|
||
align-items: end;
|
||
padding: 9px;
|
||
border: 1px solid #293f57;
|
||
border-radius: 10px;
|
||
background: #0d1826;
|
||
}
|
||
.prematch-editor-row label { display: grid; gap: 5px; min-width: 0; color: #8fa4bf; font-size: 10px; }
|
||
.prematch-editor-actions { display: flex; justify-content: flex-end; gap: 8px; }
|
||
.prematch-editor-actions .btn { width: auto; min-width: 145px; }
|
||
|
||
/* Build43 target editor has Overlay + automatic finish behaviour. */
|
||
.shortcut-penalty-target { grid-template-columns: 70px minmax(190px,.8fr) minmax(220px,1fr) 120px minmax(190px,.7fr) 34px; }
|
||
.shortcut-finish-action { grid-template-columns: 32px 84px minmax(180px,.9fr) minmax(200px,1fr) 105px 120px minmax(220px,.8fr) 34px; }
|
||
@media (max-width: 1250px) {
|
||
.prematch-editor-row { grid-template-columns: 32px 90px repeat(3,minmax(170px,1fr)) 34px; }
|
||
.prematch-editor-description { grid-column: 3 / span 3; }
|
||
.shortcut-penalty-target,.shortcut-finish-action { grid-template-columns: 1fr 1fr; align-items: stretch; }
|
||
.shortcut-target-index,.shortcut-penalty-target .icon-btn,.shortcut-finish-action .icon-btn { align-self: center; }
|
||
}
|
||
@media (max-width: 720px) {
|
||
.hockey-prematch-panel { padding: 12px; }
|
||
.hockey-prematch-head { flex-direction: column; }
|
||
.hockey-prematch-head .btn { width: 100%; }
|
||
.hockey-prematch-grid { grid-template-columns: 1fr; }
|
||
.prematch-editor { min-width: 0; }
|
||
.prematch-editor-row,.shortcut-penalty-target,.shortcut-finish-action { grid-template-columns: 1fr; }
|
||
}
|
||
|
||
/* Build45: full-size prematch button editor */
|
||
.modal-card.modal-prematch-full,
|
||
.modal-card:has(.prematch-editor) {
|
||
width: calc(100vw - 20px);
|
||
max-width: none;
|
||
min-width: min(1100px, calc(100vw - 20px));
|
||
height: calc(100vh - 20px);
|
||
max-height: none;
|
||
padding: 14px;
|
||
overflow: hidden;
|
||
}
|
||
.modal-prematch-full .modal-head,
|
||
.modal-card:has(.prematch-editor) .modal-head {
|
||
position: sticky;
|
||
top: -14px;
|
||
z-index: 30;
|
||
margin: -14px -14px 12px;
|
||
padding: 12px 14px;
|
||
border-bottom: 1px solid #2a3d55;
|
||
background: rgba(17,27,43,.97);
|
||
backdrop-filter: blur(12px);
|
||
}
|
||
.modal-prematch-full .prematch-editor,
|
||
.modal-card:has(.prematch-editor) .prematch-editor {
|
||
min-width: 0;
|
||
height: calc(100vh - 72px);
|
||
grid-template-rows: auto minmax(0, 1fr) auto;
|
||
}
|
||
.modal-prematch-full .prematch-editor-list,
|
||
.modal-card:has(.prematch-editor) .prematch-editor-list {
|
||
min-height: 0;
|
||
max-height: none;
|
||
overflow: auto;
|
||
padding-right: 4px;
|
||
overscroll-behavior: contain;
|
||
}
|
||
.modal-prematch-full .prematch-editor-actions,
|
||
.modal-card:has(.prematch-editor) .prematch-editor-actions {
|
||
position: sticky;
|
||
bottom: 0;
|
||
z-index: 12;
|
||
padding-top: 10px;
|
||
border-top: 1px solid rgba(49,69,94,.7);
|
||
background: rgba(17,27,43,.97);
|
||
backdrop-filter: blur(12px);
|
||
}
|
||
@media (max-width: 980px) {
|
||
.modal-card.modal-prematch-full,
|
||
.modal-card:has(.prematch-editor) {
|
||
min-width: 0;
|
||
width: calc(100vw - 8px);
|
||
height: calc(100vh - 8px);
|
||
padding: 10px;
|
||
}
|
||
.modal-prematch-full .prematch-editor,
|
||
.modal-card:has(.prematch-editor) .prematch-editor {
|
||
height: calc(100vh - 56px);
|
||
}
|
||
}
|
||
|
||
/* BUILD48 — draggable grouped prematch buttons. */
|
||
.prematch-editor-head-actions { display:flex; gap:8px; align-items:center; }
|
||
.prematch-editor-head-actions .btn { width:auto; min-width:110px; }
|
||
.prematch-editor-list { display:grid; gap:12px; align-content:start; grid-auto-rows:max-content; }
|
||
.prematch-editor-group { border:1px solid #263d57; border-radius:12px; overflow:hidden; background:#0b1725; }
|
||
.prematch-editor-group-head { display:grid; grid-template-columns:34px minmax(220px,1fr) auto auto auto; gap:8px; align-items:center; padding:9px 10px; border-bottom:1px solid #263d57; background:#102033; }
|
||
.prematch-editor-group-head > strong { color:#dce8f5; }
|
||
.prematch-editor-group-head > small { color:#748aa2; }
|
||
.prematch-editor-group-head label { display:grid; gap:4px; color:#8298b0; font-size:10px; }
|
||
.prematch-editor-group-head input { min-height:34px; padding:0 9px; border:1px solid #304b67; border-radius:7px; background:#0c1928; color:#eef7ff; }
|
||
.prematch-group-mark { color:#61dfc4; font-weight:900; text-align:center; }
|
||
.prematch-editor-group-drop { display:grid; gap:8px; min-height:52px; padding:10px; transition:.15s ease; }
|
||
.prematch-editor-group-drop.is-over { background:rgba(72,223,189,.07); box-shadow:inset 0 0 0 2px rgba(72,223,189,.35); }
|
||
.prematch-group-empty { display:grid; place-items:center; min-height:44px; color:#60768d; border:1px dashed #2a425d; border-radius:8px; font-size:10px; }
|
||
.prematch-editor-row { grid-template-columns:28px 28px 92px minmax(150px,.8fr) minmax(120px,.65fr) minmax(135px,.7fr) minmax(145px,.75fr) minmax(220px,1.15fr) minmax(170px,.9fr) 34px; align-items:end; }
|
||
.prematch-editor-row.is-dragging { opacity:.45; }
|
||
.prematch-drag-handle { align-self:center; cursor:grab; color:#7890a8; font-size:16px; text-align:center; user-select:none; }
|
||
.prematch-drag-handle:active { cursor:grabbing; }
|
||
.prematch-editor-description { min-width:0; }
|
||
.hockey-prematch-groups {
|
||
min-height: 0;
|
||
display: grid;
|
||
align-content: start;
|
||
grid-auto-rows: max-content;
|
||
gap: 16px;
|
||
overflow-x: hidden;
|
||
overflow-y: auto;
|
||
padding: 2px 8px 22px 2px;
|
||
overscroll-behavior: contain;
|
||
scrollbar-width: thin;
|
||
scrollbar-gutter: stable;
|
||
}
|
||
.hockey-prematch-groups::-webkit-scrollbar { width: 9px; }
|
||
.hockey-prematch-groups::-webkit-scrollbar-track { background: rgba(11,24,40,.72); border-radius: 999px; }
|
||
.hockey-prematch-groups::-webkit-scrollbar-thumb { background: #304b67; border: 2px solid #0b1828; border-radius: 999px; }
|
||
.hockey-prematch-groups::-webkit-scrollbar-thumb:hover { background: #456580; }
|
||
|
||
.hockey-prematch-group { display:grid; gap:8px; }
|
||
.hockey-prematch-group > h3 {
|
||
position: sticky;
|
||
top: -2px;
|
||
z-index: 4;
|
||
margin: 0;
|
||
padding: 6px 4px;
|
||
color: #8da4bc;
|
||
border-bottom: 1px solid rgba(42,64,88,.48);
|
||
background: rgba(7,17,29,.94);
|
||
backdrop-filter: blur(8px);
|
||
font-size: 11px;
|
||
font-weight: 900;
|
||
letter-spacing: .08em;
|
||
text-transform: uppercase;
|
||
}
|
||
.hockey-prematch-group.is-ungrouped > h3 { display:none; }
|
||
@media (max-width:1200px) { .prematch-editor-row { grid-template-columns:28px 28px 92px repeat(3,minmax(150px,1fr)) 34px; } .prematch-editor-description { grid-column:4 / span 3; } }
|
||
@media (max-width:760px) { .prematch-editor-group-head { grid-template-columns:28px 1fr auto; } .prematch-editor-group-head .mini-btn { display:none; } .prematch-editor-row { grid-template-columns:1fr; } .prematch-drag-handle,.shortcut-target-index { display:none; } }
|
||
|
||
.shortcut-scoreboard-alternate { margin-top:10px; padding:10px; border:1px solid #29435e; border-radius:10px; background:rgba(9,20,33,.55); }
|
||
.shortcut-scoreboard-alternate .is-disabled { opacity:.55; }
|
||
|
||
/* BUILD51 — compact prematch buttons + per-button vMix delivery status. */
|
||
.hockey-prematch-grid {
|
||
grid-template-columns: repeat(auto-fill,minmax(150px,220px));
|
||
gap: 8px;
|
||
align-items: stretch;
|
||
}
|
||
.hockey-prematch-button {
|
||
min-height: 54px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-start;
|
||
padding: 10px 38px 10px 12px;
|
||
border-radius: 10px;
|
||
line-height: 1.15;
|
||
}
|
||
.hockey-prematch-button strong {
|
||
font-size: 12px;
|
||
font-weight: 900;
|
||
line-height: 1.2;
|
||
overflow-wrap: anywhere;
|
||
}
|
||
.hockey-prematch-button-state,
|
||
.hockey-prematch-button > small,
|
||
.hockey-prematch-button > kbd { display: none !important; }
|
||
.hockey-prematch-button[data-prematch-busy="1"] { cursor: wait; opacity: .82; }
|
||
.hockey-prematch-runtime-status {
|
||
position: absolute;
|
||
right: 7px;
|
||
bottom: 6px;
|
||
min-width: 18px;
|
||
min-height: 16px;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 1px 4px;
|
||
border-radius: 999px;
|
||
color: #8298af;
|
||
background: rgba(9,20,32,.78);
|
||
border: 1px solid transparent;
|
||
font-size: 8px;
|
||
font-weight: 950;
|
||
letter-spacing: .01em;
|
||
pointer-events: none;
|
||
white-space: nowrap;
|
||
}
|
||
.hockey-prematch-runtime-status.is-idle:empty { display: none; }
|
||
.hockey-prematch-runtime-status.is-sending { color:#e6bc66; border-color:rgba(230,188,102,.38); }
|
||
.hockey-premmatch-runtime-status.is-ok,
|
||
.hockey-prematch-runtime-status.is-ok { color:#64e5c7; border-color:rgba(100,229,199,.30); }
|
||
.hockey-prematch-runtime-status.is-error { color:#ff7e91; border-color:rgba(255,126,145,.38); }
|
||
.hockey-prematch-button.is-active { background: linear-gradient(145deg,rgba(24,75,68,.72),#0a1821); }
|
||
@media (max-width:760px) {
|
||
.hockey-prematch-grid { grid-template-columns: repeat(auto-fill,minmax(130px,1fr)); }
|
||
}
|
||
|
||
/* BUILD53 — persistent bottom command dock. */
|
||
.runtime-button-dock {
|
||
flex: 0 0 auto;
|
||
min-height: 82px;
|
||
display: grid;
|
||
grid-template-rows: 31px minmax(45px, auto);
|
||
overflow: hidden;
|
||
border-top: 1px solid #243a52;
|
||
background: rgba(7, 14, 23, .985);
|
||
box-shadow: 0 -12px 34px rgba(0,0,0,.28);
|
||
z-index: 45;
|
||
}
|
||
.runtime-button-dock.hidden { display: none !important; }
|
||
.quick-command-dock-tabs {
|
||
min-width: 0;
|
||
display: grid;
|
||
grid-template-columns: minmax(0,1fr) 34px;
|
||
align-items: center;
|
||
gap: 6px;
|
||
padding: 3px 10px 2px;
|
||
border-bottom: 1px solid #1d3044;
|
||
}
|
||
.quick-command-tab-scroll {
|
||
min-width: 0;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 5px;
|
||
overflow-x: auto;
|
||
scrollbar-width: thin;
|
||
}
|
||
.quick-command-tab-scroll::-webkit-scrollbar { height: 4px; }
|
||
.quick-command-tab-scroll::-webkit-scrollbar-thumb { background:#314a64; border-radius:999px; }
|
||
.quick-command-tab {
|
||
flex: 0 0 auto;
|
||
min-height: 24px;
|
||
padding: 0 10px;
|
||
color: #8fa5be;
|
||
border: 1px solid #283f58;
|
||
border-radius: 7px;
|
||
background: #0d1928;
|
||
font-size: 10px;
|
||
font-weight: 850;
|
||
white-space: nowrap;
|
||
}
|
||
.quick-command-tab.active { color:#07150f; border-color:#48dfbd; background:#48dfbd; }
|
||
.quick-command-settings {
|
||
width: 30px;
|
||
height: 25px;
|
||
padding: 0;
|
||
color:#a9bed3;
|
||
border:1px solid #2c455f;
|
||
border-radius:7px;
|
||
background:#0d1a2a;
|
||
}
|
||
.quick-command-dock-buttons {
|
||
min-width: 0;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 7px;
|
||
overflow-x: auto;
|
||
overflow-y: hidden;
|
||
padding: 6px 10px 8px;
|
||
scrollbar-width: thin;
|
||
}
|
||
.quick-command-dock-buttons::-webkit-scrollbar { height: 5px; }
|
||
.quick-command-dock-buttons::-webkit-scrollbar-thumb { background:#314a64; border-radius:999px; }
|
||
.quick-command-button {
|
||
position: relative;
|
||
flex: 0 0 auto;
|
||
min-width: 104px;
|
||
max-width: 220px;
|
||
height: 34px;
|
||
padding: 0 13px;
|
||
overflow: hidden;
|
||
color:#dce8f5;
|
||
border:1px solid #30465e;
|
||
border-radius:8px;
|
||
background:linear-gradient(180deg,#132238,#0e1a2a);
|
||
box-shadow:0 3px 10px rgba(0,0,0,.18);
|
||
transition: border-color .14s ease, background .14s ease, box-shadow .14s ease, transform .1s ease;
|
||
}
|
||
.quick-command-button:hover { border-color:#4d6b88; transform:translateY(-1px); }
|
||
.quick-command-button strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:10px; font-weight:900; }
|
||
.quick-command-button.is-sending { cursor:wait; opacity:.72; }
|
||
.quick-command-button.is-active { border-color:rgba(72,223,189,.48); background:linear-gradient(180deg,#17352f,#10231f); }
|
||
.quick-command-button.is-on-air {
|
||
color:#07150f;
|
||
border-color:#61efd0;
|
||
background:linear-gradient(180deg,#62e9cc,#3fc9ac);
|
||
box-shadow:0 0 0 1px rgba(97,239,208,.30), 0 0 18px rgba(72,223,189,.30);
|
||
}
|
||
.quick-command-button.is-on-air::after {
|
||
content:"";
|
||
position:absolute;
|
||
top:5px;
|
||
right:5px;
|
||
width:5px;
|
||
height:5px;
|
||
border-radius:50%;
|
||
background:#064c3e;
|
||
box-shadow:0 0 0 2px rgba(255,255,255,.30);
|
||
}
|
||
.quick-command-no-tabs,.quick-command-empty { color:#657d96; font-size:9px; font-weight:800; white-space:nowrap; }
|
||
@media (max-width:760px) {
|
||
.runtime-button-dock { min-height:76px; grid-template-rows:29px minmax(41px,auto); }
|
||
.quick-command-button { min-width:92px; height:31px; padding-inline:10px; }
|
||
}
|
||
|
||
|
||
/* BUILD54 — fullscreen, locked settings workspaces + readable nested trigger paths. */
|
||
.modal-card.modal-settings-full {
|
||
width: calc(100vw - 12px);
|
||
max-width: none;
|
||
min-width: 0;
|
||
height: calc(100vh - 12px);
|
||
max-height: none;
|
||
padding: 14px;
|
||
overflow: auto;
|
||
overscroll-behavior: contain;
|
||
}
|
||
.modal-card.modal-settings-full .modal-head {
|
||
position: sticky;
|
||
top: -14px;
|
||
z-index: 50;
|
||
margin: -14px -14px 12px;
|
||
padding: 12px 14px;
|
||
border-bottom: 1px solid #2a3d55;
|
||
background: rgba(17,27,43,.985);
|
||
backdrop-filter: blur(12px);
|
||
}
|
||
.modal-card.modal-settings-full .modal-head > strong {
|
||
min-width: 0;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
.modal-card.modal-settings-full:has(.trigger-editor) {
|
||
width: calc(100vw - 12px);
|
||
height: calc(100vh - 12px);
|
||
max-height: none;
|
||
}
|
||
.modal-settings-full .trigger-editor { min-width: 0; }
|
||
.modal-settings-full .trigger-toolbar {
|
||
top: 42px;
|
||
z-index: 35;
|
||
padding: 10px 0;
|
||
background: rgba(17,27,43,.985);
|
||
backdrop-filter: blur(10px);
|
||
}
|
||
.modal-settings-full .trigger-flow {
|
||
grid-template-columns: minmax(390px,1.18fr) minmax(300px,.82fr) minmax(390px,1.12fr);
|
||
}
|
||
.trigger-editor .css-select-trigger {
|
||
min-height: 42px;
|
||
height: auto;
|
||
padding-top: 6px;
|
||
padding-bottom: 6px;
|
||
}
|
||
.trigger-editor .css-select-value {
|
||
overflow: visible;
|
||
text-overflow: clip;
|
||
white-space: normal;
|
||
overflow-wrap: anywhere;
|
||
line-height: 1.32;
|
||
}
|
||
.css-select-popover-wide .css-select-options {
|
||
max-height: min(650px, 72vh);
|
||
padding: 8px;
|
||
}
|
||
.css-select-popover-wide .css-select-option {
|
||
min-height: 42px;
|
||
align-items: start;
|
||
padding: 8px 10px;
|
||
}
|
||
.css-select-popover-wide .css-select-option-label {
|
||
overflow: visible;
|
||
text-overflow: clip;
|
||
white-space: normal;
|
||
overflow-wrap: anywhere;
|
||
line-height: 1.38;
|
||
}
|
||
.css-select-group-label {
|
||
position: sticky;
|
||
top: -1px;
|
||
z-index: 2;
|
||
margin: 6px 2px 4px;
|
||
padding: 7px 9px;
|
||
color: #67dbc4;
|
||
border-top: 1px solid #2b425c;
|
||
border-bottom: 1px solid #22364d;
|
||
background: rgba(12,22,37,.97);
|
||
font-size: 10px;
|
||
font-weight: 900;
|
||
letter-spacing: .04em;
|
||
text-transform: uppercase;
|
||
}
|
||
.css-select-group-label:first-child { margin-top: 0; border-top: 0; }
|
||
@media (max-width: 1180px) {
|
||
.modal-settings-full .trigger-flow { grid-template-columns: 1fr; }
|
||
.css-select-popover-wide { width: calc(100vw - 16px) !important; max-width: calc(100vw - 16px) !important; }
|
||
}
|
||
@media (max-width: 760px) {
|
||
.modal-card.modal-settings-full { width: calc(100vw - 4px); height: calc(100vh - 4px); padding: 10px; }
|
||
.modal-card.modal-settings-full .modal-head { top: -10px; margin: -10px -10px 10px; padding: 10px; }
|
||
.modal-lock-hint { display: none; }
|
||
}
|
||
|
||
/* BUILD 2026.08.19.13 — per-account events toggle */
|
||
.runtime-events-toggle {
|
||
position: relative;
|
||
transition: opacity .15s ease, border-color .15s ease, color .15s ease, background .15s ease;
|
||
}
|
||
.runtime-events-toggle.is-on {
|
||
color: #79e8c5;
|
||
border-color: rgba(82, 216, 168, .45);
|
||
background: rgba(28, 88, 70, .34);
|
||
}
|
||
.runtime-events-toggle.is-on::after {
|
||
content: "";
|
||
position: absolute;
|
||
right: 4px;
|
||
bottom: 4px;
|
||
width: 5px;
|
||
height: 5px;
|
||
border-radius: 50%;
|
||
background: #53d8a8;
|
||
box-shadow: 0 0 6px rgba(83,216,168,.9);
|
||
}
|
||
.runtime-events-toggle.is-off {
|
||
color: #72849a;
|
||
border-color: #2b4055;
|
||
background: #0c1825;
|
||
opacity: .72;
|
||
}
|
||
.runtime-events-toggle.is-off::after {
|
||
content: "";
|
||
position: absolute;
|
||
right: 4px;
|
||
bottom: 4px;
|
||
width: 5px;
|
||
height: 5px;
|
||
border-radius: 50%;
|
||
background: #718196;
|
||
}
|
||
.trigger-account-events.is-on {
|
||
color: #baf6e3;
|
||
border-color: rgba(83,216,168,.45);
|
||
background: rgba(27,92,72,.34);
|
||
}
|
||
.trigger-account-events.is-off {
|
||
color: #91a0b2;
|
||
border-color: #34475b;
|
||
background: #101d2a;
|
||
}
|
||
|
||
|
||
/* BUILD56 — collapsible triggers + explicit save + stronger on-air button feedback. */
|
||
.trigger-card.is-collapsed { background:#0e1724; }
|
||
.trigger-card.is-collapsed .trigger-card-head { border-bottom:0; }
|
||
.trigger-card-head {
|
||
grid-template-columns: 30px auto minmax(180px, .9fr) minmax(240px, 1.2fr) auto auto;
|
||
}
|
||
.trigger-collapse-btn {
|
||
width:28px;
|
||
height:28px;
|
||
display:grid;
|
||
place-items:center;
|
||
border:1px solid #30465e;
|
||
border-radius:8px;
|
||
color:#b9cbe0;
|
||
background:#0f1a29;
|
||
font-size:20px;
|
||
line-height:1;
|
||
cursor:pointer;
|
||
}
|
||
.trigger-collapse-btn:hover { border-color:#527092; color:#fff; }
|
||
.trigger-head-summary {
|
||
min-width:0;
|
||
color:#7894b1;
|
||
overflow:hidden;
|
||
text-overflow:ellipsis;
|
||
white-space:nowrap;
|
||
font-size:10px;
|
||
}
|
||
.trigger-edit-btn { min-width:92px; }
|
||
.trigger-card-body.hidden { display:none !important; }
|
||
.trigger-toolbar [data-save-triggers] { border-color:#3d6278; }
|
||
.quick-command-button.is-on-air {
|
||
outline:2px solid rgba(97,239,208,.42);
|
||
outline-offset:1px;
|
||
}
|
||
.quick-command-button.is-on-air strong::before {
|
||
content:"● ";
|
||
color:#064c3e;
|
||
}
|
||
@media (max-width: 1200px) {
|
||
.trigger-card-head { grid-template-columns:30px auto minmax(160px,1fr) auto auto; }
|
||
.trigger-head-summary { display:none; }
|
||
}
|
||
|
||
/* BUILD57 — parameterised quick-panel controls + play-by-play under operator windows. */
|
||
.hockey-pbp-window,
|
||
#hockeyStandalonePbp {
|
||
z-index: 8 !important;
|
||
}
|
||
/* Keep PBP mounted on Game while settings/navigation are open; those workspaces
|
||
have higher stacking contexts and visually cover it instead of destroying it. */
|
||
body.hockey-admin-settings-open #hockeyStandalonePbp,
|
||
body:has(.hockey-directory-backdrop:not(.hidden)) #hockeyStandalonePbp,
|
||
body.hockey-navigation-open #hockeyStandalonePbp {
|
||
display: grid !important;
|
||
}
|
||
body.hockey-navigation-open .runtime-viewport.has-hockey-pbp { gap: 14px !important; }
|
||
|
||
.quick-command-item {
|
||
flex: 0 0 auto;
|
||
display: inline-flex;
|
||
align-items: stretch;
|
||
gap: 4px;
|
||
min-width: 0;
|
||
}
|
||
.quick-command-item.is-selector-only { align-items: center; }
|
||
.quick-command-selector {
|
||
flex: 0 0 auto;
|
||
min-height: 34px;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 4px;
|
||
padding: 3px 5px;
|
||
border: 1px solid #2b425c;
|
||
border-radius: 8px;
|
||
background: #0b1725;
|
||
}
|
||
.quick-command-selector > span {
|
||
max-width: 74px;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
color: #7188a1;
|
||
font-size: 8px;
|
||
font-weight: 900;
|
||
text-transform: uppercase;
|
||
letter-spacing: .05em;
|
||
}
|
||
.quick-command-selector.is-segments > div {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 2px;
|
||
}
|
||
.quick-command-selector.is-segments button {
|
||
min-width: 25px;
|
||
height: 26px;
|
||
padding: 0 6px;
|
||
border: 1px solid #314a64;
|
||
border-radius: 6px;
|
||
color: #a8bad0;
|
||
background: #101f30;
|
||
font-size: 9px;
|
||
font-weight: 950;
|
||
}
|
||
.quick-command-selector.is-segments button:hover { border-color: #55728f; color:#eef7ff; }
|
||
.quick-command-selector.is-segments button.active {
|
||
color: #07150f;
|
||
border-color: #4be0bf;
|
||
background: #4be0bf;
|
||
}
|
||
.quick-command-selector.is-select select {
|
||
width: auto;
|
||
min-width: 70px;
|
||
height: 26px;
|
||
padding: 0 24px 0 7px;
|
||
border: 1px solid #314a64;
|
||
border-radius: 6px;
|
||
color: #d8e6f4;
|
||
background: #101f30;
|
||
font-size: 9px;
|
||
font-weight: 900;
|
||
}
|
||
.quick-selector-editor-stack {
|
||
display: grid;
|
||
gap: 7px;
|
||
margin-top: 3px;
|
||
padding-top: 9px;
|
||
border-top: 1px dashed #29425d;
|
||
}
|
||
.quick-selector-editor-title {
|
||
color: #6f879f;
|
||
font-size: 9px;
|
||
font-weight: 950;
|
||
letter-spacing: .08em;
|
||
text-transform: uppercase;
|
||
}
|
||
.prematch-editor-selector-row {
|
||
display: grid;
|
||
grid-template-columns: 28px 28px 92px minmax(140px,.75fr) minmax(120px,.6fr) minmax(130px,.7fr) minmax(170px,.9fr) 145px minmax(260px,1.2fr) minmax(110px,.55fr) 34px;
|
||
gap: 8px;
|
||
align-items: end;
|
||
padding: 9px;
|
||
border: 1px solid #29445f;
|
||
border-radius: 10px;
|
||
background: #0b1b2a;
|
||
}
|
||
.prematch-editor-selector-row label {
|
||
min-width: 0;
|
||
display: grid;
|
||
gap: 5px;
|
||
color: #8fa4bf;
|
||
font-size: 10px;
|
||
}
|
||
.prematch-editor-selector-row label small { color:#5f7892; font-size:8px; }
|
||
.quick-selector-symbol { align-self:center; color:#5fe0c3; font-size:17px; font-weight:950; text-align:center; }
|
||
.quick-selector-options-field input { min-width: 240px; }
|
||
@media (max-width: 1350px) {
|
||
.prematch-editor-selector-row { grid-template-columns: 28px 28px 92px repeat(3,minmax(145px,1fr)) 34px; }
|
||
.quick-selector-options-field { grid-column: 4 / span 3; }
|
||
}
|
||
@media (max-width: 760px) {
|
||
.prematch-editor-selector-row { grid-template-columns: 1fr; }
|
||
.quick-selector-symbol { display:none; }
|
||
}
|
||
|
||
/* BUILD59 — account toast switch + denser adaptive runtime/F11 workspace. */
|
||
.runtime-events-toggle.is-on { color:#9ff2d8; }
|
||
.runtime-events-toggle.is-off { color:#73869b; }
|
||
|
||
/* The runtime should spend screen real estate on the actual control surface. */
|
||
.runtime-topbar {
|
||
min-height: 62px;
|
||
padding: 7px clamp(10px,1.2vw,20px) 0;
|
||
column-gap: clamp(8px,1vw,16px);
|
||
}
|
||
.runtime-topbar > div:first-child #runtimeTitle { font-size: clamp(15px,1vw,18px); }
|
||
.runtime-tabs { gap: 6px; }
|
||
.runtime-tab {
|
||
min-height: 37px;
|
||
padding-inline: clamp(11px,.9vw,16px);
|
||
font-size: clamp(11px,.72vw,13px);
|
||
font-weight: 800;
|
||
}
|
||
.runtime-viewport {
|
||
width: 100%;
|
||
min-width: 0;
|
||
padding: clamp(4px,.55vw,9px);
|
||
}
|
||
.runtime-sizer { max-width: 100%; }
|
||
|
||
/* Bigger, clearer controls while preserving the fixed logical canvas. */
|
||
.runtime-view button,
|
||
.runtime-view input,
|
||
.runtime-view select,
|
||
.runtime-view textarea { font-size: max(11px, 1em); }
|
||
.runtime-view .ui-label,
|
||
.runtime-view .field > label,
|
||
.runtime-view small { line-height: 1.35; }
|
||
|
||
/* Remove old decorative gutters from the major hockey pages. */
|
||
.runtime-view :is(
|
||
.hockey-game-control,
|
||
.hockey-penalty-dashboard,
|
||
.hockey-player-statistics,
|
||
.hockey-team-statistics,
|
||
.hockey-tournament-statistics,
|
||
.hockey-tournament-standings,
|
||
.hockey-match-events,
|
||
.hockey-referees,
|
||
.hockey-schedule,
|
||
.hockey-shootout-control
|
||
) {
|
||
width: 100%;
|
||
max-width: none !important;
|
||
margin-inline: 0 !important;
|
||
}
|
||
|
||
/* In F11 and tall desktop viewports the fixed 1440×760 canvas can now scale up.
|
||
These sizes reduce empty chrome so the additional height is available to it. */
|
||
@media (min-width: 1500px) and (min-height: 850px) {
|
||
.runtime-topbar { min-height: 58px; }
|
||
.runtime-button-dock { min-height: 76px; grid-template-rows: 29px minmax(41px,auto); }
|
||
.quick-command-dock-buttons { padding-block: 4px 6px; }
|
||
}
|
||
@media (min-width: 1900px) and (min-height: 1000px) {
|
||
.runtime-topbar > div:first-child .eyebrow { font-size: 9px; }
|
||
.runtime-topbar > div:first-child #runtimeTitle { font-size: 18px; }
|
||
.runtime-tab { min-height: 39px; font-size: 13px; }
|
||
.icon-btn { width: 38px; min-height: 38px; font-size: 18px; }
|
||
}
|
||
@media (max-width: 1050px) {
|
||
.runtime-topbar { min-height: 58px; grid-template-columns:minmax(120px,.45fr) minmax(180px,1fr) max-content; padding-inline:8px; }
|
||
.runtime-topbar > div:first-child .eyebrow { display:none; }
|
||
.runtime-tab { min-height:34px; padding-inline:9px; font-size:10px; }
|
||
}
|
||
|
||
|
||
/* BUILD60 — active quick-panel editor tab, collapsible tabs, draggable selectors. */
|
||
.prematch-editor-group.is-editor-active {
|
||
border-color: rgba(97,239,208,.62);
|
||
box-shadow: 0 0 0 1px rgba(97,239,208,.16);
|
||
}
|
||
.prematch-editor-group-head {
|
||
grid-template-columns: 28px 34px minmax(220px,1fr) auto auto auto;
|
||
cursor: default;
|
||
}
|
||
.prematch-group-collapse {
|
||
width: 28px; height: 28px; padding: 0; border: 1px solid #304b67; border-radius: 7px;
|
||
background: #0c1928; color: #8ea7bf; font-weight: 950; cursor: pointer;
|
||
}
|
||
.prematch-group-collapse:hover { color:#dffcf5; border-color:#4b718f; }
|
||
.prematch-editor-group.is-collapsed .prematch-editor-group-drop { display:none; }
|
||
.prematch-editor-group.is-collapsed .prematch-editor-group-head { border-bottom:0; }
|
||
.prematch-editor-selector-row.is-dragging { opacity:.45; }
|
||
.prematch-editor-selector-row[draggable="true"] .quick-selector-symbol { cursor:grab; user-select:none; }
|
||
.prematch-editor-selector-row[draggable="true"] .quick-selector-symbol:active { cursor:grabbing; }
|
||
@media (max-width:760px) {
|
||
.prematch-editor-group-head { grid-template-columns:28px 28px 1fr auto; }
|
||
}
|
||
|
||
|
||
/* BUILD63 — account logout action. */
|
||
.runtime-logout-btn {
|
||
color: #9fb2c5;
|
||
border-color: rgba(191, 210, 227, .18);
|
||
}
|
||
.runtime-logout-btn:hover,
|
||
.runtime-logout-btn:focus-visible {
|
||
color: #ffd6d6;
|
||
border-color: rgba(255, 112, 112, .42);
|
||
background: rgba(126, 35, 47, .2);
|
||
}
|