d3e8d969c8
Тема и меню «…» остаются в первой строке панели, статус данных — второй; на 390 px выбор проекта сжимается. Текст Notice — основным цветом. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
121 lines
10 KiB
CSS
121 lines
10 KiB
CSS
.issues{display:flex;flex-direction:column;gap:var(--space-4);padding-top:var(--space-6)}
|
|
.issues .ui-page-header{margin-bottom:0}
|
|
.issue-filters{display:flex;flex-direction:column;gap:var(--space-3)}
|
|
.issue-filters__row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3)}
|
|
.issue-filters__search{flex:1 1 280px;min-width:0;max-width:480px}
|
|
.issue-filters__row .ui-btn .ui-badge{margin-left:var(--space-2)}
|
|
.issue-filters__row .ui-btn[aria-pressed="true"],.issue-filters__row .ui-btn[aria-expanded="true"]{border-color:var(--color-border-selected);color:var(--color-action-primary)}
|
|
.issue-filters__chips{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2)}
|
|
.issue-filters__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-3) var(--space-4)}
|
|
@media (max-width:899.98px){.issue-filters__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
|
|
@media (max-width:639.98px){.issue-filters__grid{grid-template-columns:minmax(0,1fr)}.issue-filters__search{max-width:none}}
|
|
/* прокрутка внутри панели — только на узких экранах: overflow на предке отключает липкую шапку страницы */
|
|
@media (max-width:1099.98px){.issue-table-wrap{overflow-x:auto}}
|
|
.issue-table th:first-child{border-top-left-radius:calc(var(--radius-xl) - 1px)}
|
|
.issue-table th:last-child{border-top-right-radius:calc(var(--radius-xl) - 1px)}
|
|
.issue-table tbody tr:last-child td:first-child{border-bottom-left-radius:calc(var(--radius-xl) - 1px)}
|
|
.issue-table tbody tr:last-child td:last-child{border-bottom-right-radius:calc(var(--radius-xl) - 1px)}
|
|
.issue-table{width:100%;border-collapse:separate;border-spacing:0;font-size:var(--fs-body);line-height:var(--lh-body)}
|
|
.issue-table th,.issue-table td{height:44px;padding:0 var(--space-3);text-align:left;vertical-align:middle;border-bottom:1px solid var(--color-border-default)}
|
|
.issue-table tbody tr:last-child td{border-bottom:0}
|
|
.issue-table th{position:sticky;top:0;z-index:1;background:var(--color-bg-surface);color:var(--color-text-secondary);font-size:var(--fs-caption);line-height:var(--lh-caption);font-weight:600;white-space:nowrap}
|
|
.issue-table td{color:var(--color-text-primary)}
|
|
.issue-table tbody tr{cursor:pointer}
|
|
.issue-table tbody tr:hover td{background:var(--color-bg-hover)}
|
|
.issue-table__key{white-space:nowrap}
|
|
.issue-table__key a{font-family:var(--font-mono);font-size:13px;color:var(--color-action-primary);text-decoration:none;margin-right:var(--space-2)}
|
|
.issue-table__key a:hover{text-decoration:underline}
|
|
.issue-table__sum{min-width:240px}
|
|
.issue-table td.overdue{color:var(--color-status-error);font-weight:600}
|
|
.issues__hint{margin:0;color:var(--color-text-secondary)}
|
|
.issues__more{display:flex;justify-content:center}
|
|
/* карточка задачи в окне (design 13, 19): всё через токены */
|
|
.issue{font-size:var(--fs-body);line-height:var(--lh-body)}
|
|
.issue a{color:var(--color-action-primary)}
|
|
.issue a.ui-btn{color:var(--color-text-primary);text-decoration:none}
|
|
.issue .hint{margin:0;font-size:var(--fs-body);color:var(--color-text-secondary)}
|
|
.issue--state{padding-top:var(--space-6)}
|
|
.issue-head{position:sticky;top:0;z-index:1;background:var(--color-bg-surface);padding:var(--space-6) 0 var(--space-4);border-bottom:1px solid var(--color-border-default);margin-bottom:var(--space-5)}
|
|
.issue-head .row1{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap}
|
|
.issue-head .key{font-family:var(--font-mono);font-size:13px;font-weight:400;color:var(--color-text-secondary)}
|
|
.issue-head .spacer{flex:1 1 auto}
|
|
.issue-head h2{margin:var(--space-3) 0 var(--space-1);font-size:var(--fs-section);line-height:var(--lh-section);font-weight:700;overflow-wrap:anywhere}
|
|
.issue-head .facts{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:0 var(--space-1);color:var(--color-text-secondary)}
|
|
.issue-head .ui-notice{margin-top:var(--space-3)}
|
|
.issue .cols{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:var(--space-6);align-items:start}
|
|
.issue .main{min-width:0;display:flex;flex-direction:column;gap:var(--space-5)}
|
|
.issue .side.ui-panel{min-width:0;display:flex;flex-direction:column;gap:var(--space-4);background:var(--color-bg-subtle)}
|
|
.issue .side>*+*{border-top:1px solid var(--color-border-default);padding-top:var(--space-4)}
|
|
@media (max-width:899.98px){
|
|
.issue .cols{display:flex;flex-direction:column;align-items:stretch;gap:var(--space-4)}
|
|
.issue .main{display:contents}
|
|
.issue .side.ui-panel{display:contents}
|
|
/* на узком экране разделы правой колонки — отдельные панели, заметки идут первыми */
|
|
.issue .side>*{background:var(--color-bg-subtle);border:1px solid var(--color-border-default);border-radius:var(--radius-xl);padding:var(--space-4);min-width:0}
|
|
.issue .side>*+*{border-top:1px solid var(--color-border-default);padding-top:var(--space-4)}
|
|
.issue .side .note{order:-1}
|
|
.issue .side .other{order:1}
|
|
.issue .side .commands{order:2}
|
|
}
|
|
.issue section,.issue form{margin:0}
|
|
.issue h3{margin:0;font-size:var(--fs-lg);line-height:var(--lh-lg);font-weight:600;color:var(--color-text-primary)}
|
|
.issue .sec-head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);min-height:var(--control-h);margin-bottom:var(--space-2)}
|
|
.issue .sec-head .ui-btn--ghost{padding:0 var(--space-2);margin-right:calc(-1*var(--space-2))}
|
|
.issue .sec-head .ui-btn--secondary{padding:0 var(--space-3)}
|
|
.issue .more{padding:0 var(--space-2);margin-left:calc(-1*var(--space-2))}
|
|
.issue .links-sec>h3{margin-bottom:var(--space-2)}
|
|
.issue .group{margin:0 0 var(--space-3)}
|
|
.issue .group:last-child{margin-bottom:0}
|
|
.issue .group h4{font-size:var(--fs-body);line-height:var(--lh-body);font-weight:600;margin:0 0 var(--space-1);color:var(--color-text-secondary)}
|
|
.issue .links{list-style:none;margin:0;padding:0}
|
|
.issue .links li{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);padding:var(--space-1) 0}
|
|
.issue .links li>a{font-family:var(--font-mono);font-size:13px;text-decoration:none}
|
|
.issue .links li>a:hover{text-decoration:underline}
|
|
.issue .links .tag{font-size:var(--fs-caption);line-height:var(--lh-caption);color:var(--color-text-secondary);min-width:76px}
|
|
.issue .links .sum{flex:1 1 200px;min-width:0;overflow-wrap:anywhere}
|
|
.issue .links .absent{color:var(--color-text-secondary);font-style:italic}
|
|
.issue .description{background:var(--color-bg-subtle);border:1px solid var(--color-border-default);border-radius:var(--radius-lg);padding:var(--space-3);margin:0 0 var(--space-1);line-height:1.5;overflow-wrap:anywhere}
|
|
.issue pre.description{white-space:pre-wrap;font:inherit;line-height:1.5}
|
|
.issue pre.description.clamped{display:-webkit-box;-webkit-line-clamp:8;-webkit-box-orient:vertical;overflow:hidden;
|
|
/* нижний отступ — рамкой цвета фона: overflow обрезает по краю padding, и в нижнем padding была видна 9-я строка */
|
|
padding-bottom:0;border-bottom:var(--space-3) solid var(--color-bg-subtle);box-shadow:0 1px 0 var(--color-border-default)}
|
|
.issue div.description.clamped{max-height:12em;overflow:hidden;
|
|
/* рендер: блочное содержимое line-clamp не режет — ограничение высотой ≈ 8 строк (line-height 1.5, design #8, R-5) */
|
|
padding-bottom:0;border-bottom:var(--space-3) solid var(--color-bg-subtle);box-shadow:0 1px 0 var(--color-border-default)}
|
|
.issue .comments>ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
|
|
.issue .comments>ul>li{padding:var(--space-3) 0;border-top:1px solid var(--color-border-default)}
|
|
.issue .comments>ul>li:first-child{border-top:0;padding-top:0}
|
|
.issue .comments .c-head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);min-height:var(--control-h);font-size:var(--fs-caption);line-height:var(--lh-caption);color:var(--color-text-secondary)}
|
|
.issue .comments .c-head .ui-btn{padding:0 var(--space-2);margin-right:calc(-1*var(--space-2));font-size:var(--fs-caption)}
|
|
.issue .comments pre.body{white-space:pre-wrap;font:inherit;margin:0;overflow-wrap:anywhere}
|
|
.issue .fields{display:grid;grid-template-columns:1fr;gap:var(--space-3);margin:0}
|
|
.issue .fields dt{font-size:var(--fs-caption);line-height:var(--lh-caption);color:var(--color-text-secondary)}
|
|
.issue .fields dd{margin:0;white-space:pre-wrap;overflow-wrap:anywhere}
|
|
.issue .other>h3{margin-bottom:var(--space-2)}
|
|
.issue .commands>h3{margin-bottom:var(--space-2)}
|
|
.issue .commands summary{cursor:pointer;font-size:var(--fs-lg);line-height:var(--lh-lg);font-weight:600;border-radius:var(--radius-xs)}
|
|
.issue .commands summary:focus-visible{outline:2px solid var(--color-focus-ring);outline-offset:2px}
|
|
.issue .cmd-wrap{margin-top:var(--space-2);overflow-x:auto}
|
|
.issue .commands table{border-collapse:collapse;font-size:var(--fs-caption);line-height:var(--lh-caption);width:100%}
|
|
.issue .commands th{text-align:left;font-weight:600;color:var(--color-text-secondary);white-space:nowrap}
|
|
.issue .commands th,.issue .commands td{padding:var(--space-1) var(--space-2) var(--space-1) 0;border-bottom:1px solid var(--color-border-default);vertical-align:top}
|
|
/* служебные заметки (design 20) */
|
|
.note{display:flex;flex-direction:column;gap:var(--space-3)}
|
|
.note fieldset{display:flex;flex-direction:column;gap:var(--space-3);border:0;margin:0;padding:0;min-width:0}
|
|
.note .row{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-2)}
|
|
.note .note-confirm{display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-3);font-size:var(--fs-body);border:1px solid var(--color-border-strong);border-radius:var(--radius-lg);background:var(--color-bg-surface)}
|
|
.note.view .hint{margin-top:var(--space-3);font-size:var(--fs-caption);line-height:var(--lh-caption)}
|
|
|
|
/* окно карточки задачи (design 13): размер и рамка — Dialog size="lg"; прокрутка и шапка — здесь */
|
|
.ui-dialog.issue-modal{padding:0}
|
|
.issue-modal > .issue{padding:0 var(--space-6) var(--space-6)}
|
|
@media (max-width:700px){
|
|
.issue-modal > .issue{padding:0 var(--space-4) var(--space-4)}
|
|
/* узкий экран: шапка не липкая, «Закрыть» остаётся справа в первой строке, «Открыть в Jira» уходит во вторую */
|
|
.issue-head{position:static;padding-top:var(--space-4)}
|
|
.issue-head .spacer{order:1}
|
|
.issue-head .ui-icon-btn{order:2}
|
|
.issue-head a.ui-btn{order:3}
|
|
}
|
|
.issue .ui-notice__text{font-size:var(--fs-body);line-height:var(--lh-body)}
|