/* ==========================================================================
Reusable panel components (ours, not the author's).
Kept out of core.css so an author update can never overwrite them.
========================================================================== */
/* --------------------------------------------------------------------------
State badge — a small tinted pill for one piece of state:
Public/Private, Active/Inactive, Completed/Pending, Paid/Unpaid…
Why a new one: the panel's .badge is font-size 8px (unreadable), and .tag is
a solid saturated fill with white text that shouts next to normal table text.
These are soft instead — a light tint of the colour, with the same hue
darkened for the text, so they sit calmly in a table but stay easy to scan.
Public
Add state-badge-dot for a leading dot (it takes the text colour):
Private
-------------------------------------------------------------------------- */
.state-badge {
display: inline-flex;
align-items: center;
gap: .4rem;
padding: .3rem .6rem;
border: 1px solid transparent;
border-radius: 999px;
font-size: 12px;
font-weight: 600;
line-height: 1;
white-space: nowrap;
vertical-align: middle;
}
/* Two or more badges that belong together — a state and its count, e.g.
Private / Allowed 2. Stacked, not side by side: they were on one line while the
row was short, but the Bonuses column made every row taller anyway, so the
height is free now and the width is not. Reads down the column instead of
stretching it. */
.state-badge-group {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: .3rem;
white-space: nowrap;
}
/* One badge holding a short list rather than one badge per item — three pills in a
row was noise. The pill radius goes with it: once a badge has lines it is a box,
and 999px on a box looks like a mistake. */
.state-badge-stack {
flex-direction: column;
align-items: flex-start;
gap: .15rem;
border-radius: 8px;
line-height: 1.35;
}
.state-badge-dot::before {
content: "";
flex: none;
width: .4rem;
height: .4rem;
border-radius: 50%;
background: currentColor;
}
.state-badge-green {
background-color: #e9f7ee;
border-color: #c3e6d0;
color: #1a7f43;
}
.state-badge-orange {
background-color: #fdf1e3;
border-color: #f5d8b3;
color: #a2590f;
}
.state-badge-red {
background-color: #fdecec;
border-color: #f5c9c8;
color: #b02a27;
}
.state-badge-blue {
background-color: #ecebfb;
border-color: #cdcaf5;
color: #4038c7;
}
.state-badge-grey {
background-color: #f1f3f5;
border-color: #dfe3e8;
color: #5b6472;
}
/* --------------------------------------------------------------------------
Summernote's Link / Picture / Video dialogs.
They no longer go through Bootstrap's modal plugin and they now live in
— see the long note in admin/js/custom.js for why. That leaves the
look to us.
-------------------------------------------------------------------------- */
/* While one of these dialogs is open, the modal hosting it drops its transform
(the class is put on by admin/js/custom.js, which explains why). Bootstrap's
own settled value is translate(0,0), so none looks exactly the same — but it
stops .modal-dialog being the containing block for the dialog's fixed
positioning, which is what pinned the dialog to our modal's box instead of the
screen. Same specificity as Bootstrap's .modal.show .modal-dialog, and this
file loads later, so it wins. */
.modal.has-note-dialog .modal-dialog {
transform: none;
}
/* Bootstrap no longer builds a backdrop for these, and they do not need one:
.note-modal is already a full-screen fixed layer, so it dims the page by
itself. No extra element, nothing that can leak. */
.note-modal {
background: rgba(0, 0, 0, .5);
/* The gutter lives here, not on .modal-dialog. Bootstrap's own gutter is
margin: .5rem on .modal-dialog, but that element needs auto side margins to
centre — and an auto margin computes to 0 once the dialog is wide enough to
fill the row, which put the popup flush against both screen edges on a
phone. Padding on this layer keeps the gap at every width. */
padding: 0 .5rem;
}
/* On a phone the popup is narrower than the screen allows, on purpose: max-width
caps it on a desktop, but below that the dialog just fills whatever it is given,
so the only way to hold it in is a wider gutter. Phones only — the desktop size
is set by max-width on .modal-dialog and is already right. */
@media (max-width: 575.98px) {
.note-modal {
padding: 0 1.75rem;
}
}
/* The header carries the title on the left and the X on the right, like every
other modal here. summernote's markup puts the X BEFORE the
(Bootstrap 3
floated it right), but this panel is on Bootstrap 4 where .modal-header is a
flex row — so in source order the X lands on the left and the title on the
right. order: puts them back the way round without touching the markup. */
.note-modal .modal-header .modal-title {
order: 1;
}
.note-modal .modal-header .close {
order: 2;
margin-left: auto;
}
/* Centred in the window, so it can never end up above the top of the screen the
way it did when it was pinned to a modal taller than the viewport. */
.note-modal .modal-dialog {
display: flex;
align-items: center;
min-height: calc(100% - 3.5rem);
/* clearly narrower than the .modal-lg underneath it (600px), so it reads as
its own popup instead of part of the modal it is sitting on */
max-width: 460px;
/* Bootstrap only centres .modal-dialog from 576px up (margin: 1.75rem auto);
below that its margin is a plain 0.5rem, which left-aligns the popup on a
phone. auto on both sides centres it at every width. */
margin-left: auto;
margin-right: auto;
/* This element is stretched tall to centre the popup inside it, so anything
it paints spans the window rather than hugging the dialog. core.css puts
`border: 0.1px solid #ddd` on EVERY .modal-dialog and summernote.css adds
a box-shadow — together they drew a line and a shadow ~250px above and
below the popup. Both belong on .modal-content, which is where they are. */
border: 0;
box-shadow: none;
}
/* the popup itself: its own edge, its own shadow */
.note-modal .modal-content {
width: 100%;
border: 1px solid #ccc;
box-shadow: 0 12px 40px rgba(20, 24, 40, .35);
}
/* --------------------------------------------------------------------------
Form divider — a section rule inside a form, without the canyon around it.
core.css sets a bare `hr` twice: line 424 gives it its 1px line, then line
10101 overrides the margin to 2rem top AND bottom — 64px of air around a 1px
line. That is a plain element selector, and 39 views across the panel use a
bare , so the rule itself must be left alone. A class outranks an element
selector on its own (0,1,0 beats 0,0,1), so this needs no !important, and the
line itself still comes from core.css — nothing to keep in sync.
-------------------------------------------------------------------------- */
.form-divider {
margin-top: .75rem;
margin-bottom: .75rem;
}
/* --------------------------------------------------------------------------
Access search results — the dropdown under the user picker in the per-user
allow/block modal.
Deliberately a copy of the panel's own .searchable-select dropdown
(.search-select-panel / -option / -empty in layout.css): this is the same
kind of thing, so it should not look like a second opinion. It cannot reuse
those classes directly — that widget builds itself from a