@charset "UTF-8";
/* ==========================================================================
issues-list.css - v2 styling for the issues LIST screen
screens/bse/issues/issues.jsp (/control/issues, /control/issues/shares)
plus the fragments it owns:
issues_table_internal.jsp (screens issues.data.table / issues.data.table2)
issues_average.jsp (screen issues_average_data)
filters/form_fast.jsp, form_index.jsp, form_extended.jsp
HARD CONSTRAINTS - js/filters.js and js/is_popup.js address this markup by
id and by DOM position, and both files are shared/off limits:
#filter_form innerHTML is replaced with one of the three filter
forms; the element itself survives, so put layout on
it, never on its children's ids alone.
#table_data_holder innerHTML is replaced with the table fragment.
#issues_average_data innerHTML is replaced with the average box; its mere
PRESENCE also picks the sortBy() branch in filters.js,
so the box may not be dropped from the page.
.issuestabs > a IssuesFilter.clearFilters() assigns className = "" and
setFilter() assigns className = "active". A tab can
therefore carry NO permanent class of its own - every
tab rule here is written as .filter_tabs > a.
#ef_button_add / _filter / _clear / _scroll_up / _scroll_down
Extended_Filter.enable()/disable() read childNodes[0]
(the , whose src is swapped -disabled.gif) and
childNodes[2] (the , whose colour is set inline).
Those three child nodes and their order are frozen;
only CSS around them may change.
#ef_data_rows rows are built by filters.js with hard-coded pixel
widths (185 + 60 + 320 + 55 = 620px) and scrolled with
scrollTop = pos * 13. Height 40px / overflow hidden
must stay; the 620px is absorbed by .ef_scroll.
#add_window, #more_columns_window
opened with style.display = 'block' only, so they are
free to be position:fixed modals here.
========================================================================== */
/* the modal backdrop Utils.blockSite()/clearSite() toggles (#shadow_layer).
newstyle.css is not loaded on v2 pages, so it is defined here. */
body.v2 .shadow_layer {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(20, 32, 54, .55);
z-index: 900;
display: none;
}
/* ==========================================================================
1. filter block (tabs + panel)
========================================================================== */
body.v2 .issues_filter {
margin: 0 0 20px;
}
body.v2 .filter_tabs {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: -1px;
}
body.v2 .filter_tabs > a {
display: inline-flex;
align-items: center;
padding: 9px 16px;
border: 1px solid #e7edf4;
border-bottom-color: transparent;
border-radius: 8px 8px 0 0;
background: #eef2f7;
color: #5b6675;
font-size: 14px;
font-weight: 600;
text-decoration: none;
white-space: nowrap;
}
body.v2 .filter_tabs > a:hover {
background: #e3eaf4;
color: #1e4280;
text-decoration: none;
}
body.v2 .filter_tabs > a.active {
background: #f8fafc;
border-color: #e7edf4;
border-bottom-color: #f8fafc;
color: #1e4280;
}
body.v2 .filter_panel {
position: relative;
min-height: 96px;
padding: 16px;
background: #f8fafc;
border: 1px solid #e7edf4;
border-radius: 0 8px 8px 8px;
}
/* ---- shared trigger for the legacy is_popup dropdowns (div.popup_menu) ---- */
body.v2 .issues_picker {
position: relative;
display: block;
min-width: 150px;
height: 38px;
padding: 0 30px 0 12px;
border: 1px solid #cdd6e2;
border-radius: 6px;
background: #fff;
color: #1e4280;
font-size: 14px;
line-height: 36px;
font-weight: 600;
text-align: left;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
cursor: pointer;
}
body.v2 .issues_picker::after {
content: "";
position: absolute;
top: 50%;
right: 12px;
width: 7px;
height: 7px;
margin-top: -5px;
border-right: 2px solid #6b7686;
border-bottom: 2px solid #6b7686;
transform: rotate(45deg);
}
body.v2 .issues_picker:hover,
body.v2 .issues_picker.DDover {
border-color: #1e4280;
background: #f0f3f6;
}
/* the ul.DropDown popups must clear the modals / sticky header */
body.v2.page-issues ul.DropDown {
z-index: 1100;
max-width: calc(100vw - 24px);
box-sizing: border-box;
}
/* is_popup.js places the dropdown with Utils.findPosX/Y, which walks the
offsetParent chain and stops at a position:fixed ancestor - so for a trigger
inside one of the modals it hands back VIEWPORT coordinates with no scroll
offset. The modals therefore avoid transform (offsetLeft/Top must stay
honest, hence inset:0 + margin:auto below), and while a modal is up - which
is exactly when Utils.blockSite() has put display:block on #shadow_layer -
the dropdown is switched to position:fixed so those coordinates are read in
the frame they were measured in. */
body.v2.page-issues #shadow_layer[style*="display: block"] ~ .middle ul.DropDown {
position: fixed;
}
/* ==========================================================================
2. fast filter - form_fast.jsp
========================================================================== */
body.v2 .ff_fields {
display: flex;
flex-wrap: wrap;
gap: 14px 18px;
}
body.v2 .ff_field {
display: flex;
flex-direction: column;
gap: 6px;
flex: 1 1 190px;
min-width: 0;
}
body.v2 .ff_label {
font-size: 14px;
font-weight: 600;
color: #5b6675;
}
body.v2 .ff_note {
margin: 12px 0 0;
font-size: 13px;
line-height: 1.45;
color: #6b7686;
min-height: 18px;
}
/* ==========================================================================
3. alphabetical index filter - form_index.jsp
========================================================================== */
body.v2 .if_group + .if_group {
margin-top: 16px;
}
body.v2 .if_title {
display: block;
margin-bottom: 8px;
font-size: 14px;
font-weight: 600;
color: #5b6675;
}
body.v2 .if_letters {
display: flex;
flex-wrap: wrap;
gap: 4px;
}
body.v2 .if_letters a {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 30px;
height: 30px;
padding: 0 6px;
border: 1px solid #dfe7f0;
border-radius: 6px;
background: #fff;
color: #1e4280;
font-size: 14px;
font-weight: 600;
text-decoration: none;
}
body.v2 .if_letters a:hover {
background: #1e4280;
border-color: #1e4280;
color: #fff;
text-decoration: none;
}
/* ==========================================================================
4. extended filter - form_extended.jsp
The rows are 620px of JS-written markup (185 + 60 + 320 + 55): the list
scrolls sideways on a phone instead of widening the document, and the
header row repeats the same four widths so the columns line up.
The three action links cannot become