` when it is
opened. The theme ships no styles for `.backdrop`, so that element was a
zero-size div: tapping outside the menu could not close it.
-------------------------------------------------------------------------- */
.backdrop {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1040; /* .sidenav is 1050 */
background-color: rgba(0, 0, 0, .4);
}
@media (max-width: 1199.98px) {
/* Never wider than the screen on a small phone. Two class selectors so this
outranks `.navbar-vertical.navbar-expand-xs { max-width: 250px }`. */
.sidenav.navbar-vertical {
max-width: min(250px, 85vw);
}
}
/* Close button in the sidenav header. The theme styles no `.navbar-toggler`
for the vertical nav, so the two spans are drawn as an X here. Dark mode
already recolours `#sidenav-main .navbar-toggler span` (argon.css tail). */
.vcm-sidenav-close {
position: absolute;
top: .5rem;
right: .5rem;
width: 2.75rem;
height: 2.75rem;
padding: 0;
border: 0;
background: transparent;
}
.vcm-sidenav-close span {
position: absolute;
top: 50%;
left: 50%;
display: block;
width: 1.125rem;
height: 2px;
border-radius: 1px;
background-color: #8898aa;
}
.vcm-sidenav-close span:first-child {
transform: translate(-50%, -50%) rotate(45deg);
}
.vcm-sidenav-close span:last-child {
transform: translate(-50%, -50%) rotate(-45deg);
}
.sidenav-header {
position: relative;
}
@media (min-width: 1200px) {
/* Pinned/hover sidenav on desktop - nothing to close. */
.vcm-sidenav-close {
display: none;
}
}
/* --------------------------------------------------------------------------
5. Tables
site.js wraps every `table.table` in a `.table-responsive-lg` container (see
wrapWideTables), which scrolls horizontally below 992px and is inert above
it. The rules here make that scroll actually engage, keep the DataTables
chrome usable on a phone, and stop the row action menus being clipped.
-------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
/* Headers do not wrap, so each column keeps a floor equal to its heading
and a 10-column grid overflows into the scroll container instead of
crushing every cell to two characters. Body cells still wrap, so a table
that genuinely fits stays unscrolled - no artificial min-width. */
.table-responsive-lg > .table > thead > tr > th,
.table-responsive > .table > thead > tr > th,
.table-responsive-lg > .table > tbody > tr > th,
.table-responsive > .table > tbody > tr > th {
white-space: nowrap;
}
/* 1rem all round is a lot of padding to spend on a 360px screen. */
.table th,
.table td {
padding: .5rem .625rem;
}
/* Give the scroll container a hint that there is more to the right. */
.table-responsive-lg,
.table-responsive {
scrollbar-width: thin;
}
/* --- DataTables chrome --- */
/* The control row is `col-sm-*` halves, so it already stacks; these keep
the pieces from overflowing once stacked. */
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_length {
float: none;
width: 100%;
text-align: left;
}
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
width: 100%;
max-width: 100%;
margin-left: 0;
}
.dataTables_wrapper .dataTables_filter label,
.dataTables_wrapper .dataTables_length label {
display: block;
width: 100%;
}
/* Copy / CSV / Excel / PDF / Print run off the edge in a single row. */
.dataTables_wrapper .dt-buttons {
display: flex;
flex-wrap: wrap;
float: none;
gap: .25rem;
margin-bottom: .5rem;
}
.dataTables_wrapper .dt-buttons .btn {
margin: 0;
}
/* Long page ranges: scroll the pager rather than the page. */
.dataTables_wrapper .dataTables_paginate {
float: none;
overflow-x: auto;
max-width: 100%;
padding-top: .5rem;
text-align: left;
}
.dataTables_wrapper .dataTables_paginate .pagination {
flex-wrap: nowrap;
margin: 0;
}
.dataTables_wrapper .dataTables_info {
float: none;
padding-top: .5rem;
font-size: .8125rem;
}
/* The Responsive plugin's expanded child row: its label/value list is a
fixed-width
in the plugin css and overflows on a narrow phone. */
.table > tbody > tr > td.child .dtr-details {
display: block;
width: 100%;
}
.table > tbody > tr > td.child .dtr-details > li {
display: flex;
flex-wrap: wrap;
gap: .25rem .5rem;
padding: .35rem 0;
}
.table > tbody > tr > td.child .dtr-details > li:last-child {
border-bottom: 0;
}
.table > tbody > tr > td.child .dtr-details > li > .dtr-title {
min-width: 8rem;
font-weight: 600;
}
/* The plugin hard-codes #efefef, which is invisible on a dark surface. */
[data-theme="dark"] .table > tbody > tr > td.child .dtr-details > li {
border-bottom-color: var(--dark-border);
}
}
/* Row action menus are moved to while open (see site.js) so the scroll
container cannot clip them. Popper positions them there, but they need to
outrank the sidenav (1050) and the header banner. */
body > .dropdown-menu {
z-index: 1060;
}
/* --------------------------------------------------------------------------
6. Cards
Every full-page view is wrapped row > col > card > card-body, so the card's
1.5rem gutters are paid on both sides of every screen. On a 360px phone that
is 3rem of the 360 spent before any content, on top of the row/col gutters.
-------------------------------------------------------------------------- */
@media (max-width: 575.98px) {
.card-body {
padding: 1rem;
}
.card-header {
padding: 1rem;
}
/* Card headers commonly carry a title plus a cluster of action buttons
laid out with float-right; floats do not wrap, so the buttons ride
off the edge. */
.card-header .float-right,
.card-header .float-sm-right {
float: none !important;
display: block;
margin-top: .75rem;
}
.card-header .btn,
.card-footer .btn {
margin-bottom: .25rem;
}
}
/* --------------------------------------------------------------------------
7. Mailbox
The mail client is the one screen in the app built as three panes rather
than a single column, so it needs its own layout rather than a correction
to a vendor one. Kept here with the rest of the responsive layer so the
desktop grid and the way it collapses stay next to each other.
-------------------------------------------------------------------------- */
.mailbox-layout {
display: grid;
grid-template-columns: 220px minmax(280px, 1fr) minmax(0, 2fr);
gap: 1rem;
align-items: start;
}
/* Each pane scrolls on its own, so the page itself never does and the folder
list stays put while a long message is read. */
.mailbox-pane {
max-height: calc(100vh - 260px);
overflow-y: auto;
}
/* The selected row uses .active, which argon paints solid primary - unreadable
against the muted preview text underneath it. */
.mailbox-pane-list .list-group-item.active {
background-color: #f6f9fc;
border-color: #e9ecef;
color: inherit;
}
.mailbox-body-frame {
width: 100%;
min-height: 420px;
border: 1px solid #e9ecef;
border-radius: .25rem;
background: #fff;
}
@media (prefers-color-scheme: dark) {
.mailbox-pane-list .list-group-item.active {
background-color: rgba(255, 255, 255, .06);
border-color: rgba(255, 255, 255, .12);
}
}
/* Tablets: the folder names are short, so buy the reading pane some width
back from the folder column rather than dropping a pane. */
@media (max-width: 1199.98px) {
.mailbox-layout {
grid-template-columns: 180px minmax(240px, 1fr) minmax(0, 1.6fr);
}
}
/* Phones: three columns cannot survive 360px, so the panes stack. Their own
scrollbars go with them - nested scroll areas inside a scrolling page are
how you end up unable to reach the bottom of a message. The list is capped
so the reading pane below it is still reachable without a long scroll. */
@media (max-width: 991.98px) {
.mailbox-layout {
grid-template-columns: 1fr;
}
.mailbox-pane {
max-height: none;
overflow-y: visible;
}
.mailbox-pane-list {
max-height: 60vh;
overflow-y: auto;
}
.mailbox-body-frame {
min-height: 320px;
}
/* The reading pane's action buttons are a btn-group plus a Move dropdown;
side by side they overflow well before 360px. */
.mailbox-reading .btn-toolbar {
flex-direction: column;
align-items: stretch;
}
.mailbox-reading .btn-toolbar .btn-group {
margin-right: 0 !important;
margin-bottom: .5rem;
}
}
/* ==========================================================================
8. Chat
The desktop grid and the bubble styling live in chat.css; this section is
only the narrow-viewport behaviour. Same approach as section 7: below the
md breakpoint the two panes stop sitting side by side and become one pane
at a time, with the header back button revealed to return to the list.
========================================================================== */
@media (max-width: 991.98px) {
.chat-layout {
grid-template-columns: 1fr;
}
/* One pane at a time. Without this the conversation list eats the top of
the viewport and the thread starts below the fold. */
.chat-layout.chat-thread-open .chat-pane-list {
display: none;
}
.chat-layout:not(.chat-thread-open) .chat-pane-thread {
display: none;
}
.chat-layout.chat-thread-open .chat-back {
display: inline-block;
}
.chat-pane-list {
max-height: none;
}
/* Taller than the desktop rule because there is no sidebar competing for
the viewport, and dvh so the composer clears the browser chrome and the
on-screen keyboard. */
.chat-pane-thread {
height: calc(100dvh - 200px);
}
/* 60% of a 360px screen is unreadably narrow for a chat bubble. */
.chat-message {
max-width: 90%;
}
}
/* ------------------------------------------------------------------------
8b. Calls on a phone
One column - two 220px tiles side by side on a 360px screen leaves nothing
of either face - and the controls pinned to the bottom safe area so the
hang-up button is not under the home indicator.
------------------------------------------------------------------------ */
@media (max-width: 767.98px) {
.chat-call-stage {
padding: .5rem;
padding-bottom: calc(.5rem + env(safe-area-inset-bottom));
}
.chat-call-grid {
grid-template-columns: 1fr;
}
/* A shared screen already spans the single column, and the desktop rule's
double row height would push everyone else off the screen. */
.chat-call-tile.is-screen {
grid-row: span 1;
}
.chat-call-controls .btn {
width: 3.25rem;
height: 3.25rem;
}
}