61 lines
4.6 KiB
CSS
61 lines
4.6 KiB
CSS
/* оболочка: боковая панель и страница (#69, design 1–3); прокрутка — у окна, панель липнет к его верху */
|
||
.shell{display:grid;grid-template-columns:auto minmax(0,1fr);min-height:100vh}
|
||
.sidebar{
|
||
position:sticky;top:0;height:100vh;height:100dvh;width:240px;box-sizing:border-box;z-index:20;
|
||
display:flex;flex-direction:column;gap:var(--space-4);padding:var(--space-4);
|
||
border-right:1px solid var(--color-border-default);background:var(--color-bg-surface);
|
||
}
|
||
.sidebar.is-collapsed{width:64px;padding-inline:var(--space-2);align-items:center}
|
||
.sidebar__head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);min-height:var(--control-h)}
|
||
.sidebar__brand{font-size:16px;line-height:24px;font-weight:700;color:var(--color-text-primary);white-space:nowrap;padding-left:var(--space-2)}
|
||
.sidebar__project-tag{
|
||
max-width:100%;padding:2px;border:1px solid var(--color-border-default);border-radius:var(--radius-xs);
|
||
background:var(--color-bg-subtle);color:var(--color-text-secondary);font:inherit;font-size:var(--fs-caption);line-height:var(--lh-caption);
|
||
font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;
|
||
}
|
||
.sidebar__project-tag:hover{color:var(--color-text-primary);border-color:var(--color-border-strong)}
|
||
.sidebar__nav{display:flex;flex-direction:column;gap:var(--space-1);align-self:stretch}
|
||
.sidebar__link{
|
||
display:flex;align-items:center;gap:var(--space-3);height:var(--control-h-lg);padding:0 var(--space-3);box-sizing:border-box;
|
||
border-radius:var(--control-radius);color:var(--color-text-secondary);text-decoration:none;font-weight:600;white-space:nowrap;
|
||
}
|
||
.sidebar__link:hover{background:var(--color-bg-hover);color:var(--color-text-primary)}
|
||
.sidebar__link[aria-current="page"]{background:var(--color-bg-selected);color:var(--color-action-primary)}
|
||
.sidebar__link:focus-visible,.sidebar__project-tag:focus-visible{outline:2px solid var(--color-focus-ring);outline-offset:2px}
|
||
.is-collapsed .sidebar__nav{align-items:center}
|
||
.is-collapsed .sidebar__link{width:var(--control-h-lg);padding:0;justify-content:center}
|
||
.sidebar__spacer{flex:1 1 auto}
|
||
.sidebar__foot{
|
||
display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);align-self:stretch;
|
||
padding-top:var(--space-3);border-top:1px solid var(--color-border-default);
|
||
}
|
||
.is-collapsed .sidebar__foot{flex-direction:column}
|
||
/* блок данных Jira: в развёрнутой панели — колонкой, событие пакета под кнопкой с переносом */
|
||
.data-status{display:flex;flex-direction:column;align-items:stretch;gap:var(--space-2);align-self:stretch;font-size:var(--fs-caption);line-height:var(--lh-caption);color:var(--color-text-secondary)}
|
||
.data-status .ui-btn{width:100%;justify-content:center}
|
||
.data-status__agent{display:inline-flex;align-items:center;gap:6px}
|
||
.data-status__dot{width:8px;height:8px;border-radius:50%;background:var(--color-status-warning);flex:0 0 auto}
|
||
.data-status__dot.is-online{background:var(--color-status-success)}
|
||
.data-status__event{font-weight:600;overflow-wrap:anywhere}
|
||
.data-status__event:empty{position:absolute} /* живой регион всегда в DOM; пустой не занимает места */
|
||
.data-status__event--info{color:var(--color-text-secondary)}
|
||
.data-status__event--success{color:var(--color-status-success)}
|
||
.data-status__event--warning{color:color-mix(in srgb, var(--color-status-warning) 55%, var(--color-text-primary))}
|
||
.data-status__event--error{color:var(--color-status-error)}
|
||
.data-status--compact{position:relative;align-items:center;align-self:center}
|
||
.data-status--compact .data-status__dot{position:absolute;top:2px;right:2px;pointer-events:none;box-shadow:0 0 0 2px var(--color-bg-surface)}
|
||
.crash{max-width:640px;margin:48px auto}
|
||
.crash h2{margin:0;font:inherit}
|
||
/* узкий экран (<640 px): закреплённая строка с «Меню» и выезжающая панель поверх страницы (design 4) */
|
||
.topbar{
|
||
position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:var(--space-2);height:56px;box-sizing:border-box;
|
||
padding:0 var(--space-4) 0 var(--space-2);border-bottom:1px solid var(--color-border-default);background:var(--color-bg-surface);
|
||
}
|
||
.topbar .sidebar__brand{padding-left:0}
|
||
.sidebar-backdrop{position:fixed;inset:0;z-index:30;background:var(--color-overlay)}
|
||
.sidebar.is-drawer{position:fixed;left:0;top:0;bottom:0;z-index:31;width:min(300px,85vw);height:auto;box-shadow:var(--shadow-popover)}
|
||
@media (max-width:639px){
|
||
.shell{display:block}
|
||
:root{--topbar-h:56px}
|
||
}
|