, so :nth-child(even) still lands on
body rows correctly without needing one. Corner cells are rounded
directly (rather than clipping the whole table with overflow:hidden)
so an absolutely-positioned dropdown opening from the last row - the
per-row "Assigned to" multiselect on Files - isn't clipped off along
with everything else that would have overflowed the rounded box. */
tr:first-child th:first-child { border-top-left-radius: 0.5rem; }
tr:first-child th:last-child { border-top-right-radius: 0.5rem; }
tr:last-child td:first-child { border-bottom-left-radius: 0.5rem; }
tr:last-child td:last-child { border-bottom-right-radius: 0.5rem; }
tr:nth-child(even) td { background-color: #f1f3f5; }
tr:hover td { background-color: #eef4fb; }
th a.sortable-th {
color: #000000;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 4px;
}
th a.sortable-th:hover { color: #333333; text-decoration: underline; }
th a.sortable-th i { font-size: 0.8rem; opacity: 0.35; }
th a.sortable-th i.bi-arrow-up, th a.sortable-th i.bi-arrow-down { opacity: 1; color: #0d6efd; }
/* --- Buttons --- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
height: 30px;
background-color: #a5d6f2;
color: #343a40;
border: none;
padding: 0 0.9rem;
border-radius: 0.5rem;
cursor: pointer;
font-size: 0.875rem;
font-weight: 500;
text-decoration: none;
}
.btn:hover { color: #212529; text-decoration: none; }
.btn.secondary { background-color: #dee2e6; color: #383d41; }
.btn.secondary:hover { background-color: #ced4da; color: #212529; }
.btn.success { background-color: #9cdbab; color: #155724; }
.btn.success:hover { color: #0f401a; }
.btn.warning { background-color: #fdffb2; color: #856404; }
.btn.warning:hover { color: #664f03; }
.btn.danger { background-color: #eec0c4; color: #721c24; }
.btn.danger:hover { color: #501217; }
.btn.error { background-color: #c6c9f2; color: #383d7a; }
.btn.error:hover { color: #2b2f5e; }
.btn.small { height: 30px; padding: 0 0.75rem; font-size: 0.8rem; }
.select-inline { height: 30px; width: auto; margin: 0; padding: 0 0.5rem; font-size: 0.8rem; }
.button-group { display: inline-flex; align-items: center; gap: 8px; }
/* --- Forms --- */
input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], select {
width: 100%;
height: 30px;
padding: 0 0.75rem;
border: 1px solid #ced4da;
border-radius: 0.375rem;
margin-top: 4px;
margin-bottom: 14px;
font-size: 0.95rem;
background: #ffffff;
color: #212529;
}
/* Custom file-input trigger - is a replaced element
whose internal button+filename is rendered natively by the browser
and does not respond to CSS layout (display:flex, align-items, etc.)
on the input itself, so centering it directly is not possible. The
real input stays fully present/focusable (required-field validation
keeps working) via a visually-hidden pattern, NOT display:none - a
display:none required field can silently break form validation in
some browsers since there's nothing visible to anchor the native
"please fill out this field" prompt to. */
.file-input-wrap {
display: flex;
align-items: center;
gap: 10px;
height: 30px;
padding: 0 4px;
border: 1px solid #ced4da;
border-radius: 0.375rem;
margin-top: 4px;
margin-bottom: 14px;
background: #ffffff;
}
.file-input-wrap .btn { height: 22px; padding: 0 0.6rem; font-size: 0.8rem; flex-shrink: 0; cursor: pointer; }
.file-input-name { font-size: 0.85rem; color: #6c757d; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.file-input-hidden {
position: absolute;
opacity: 0;
width: 0.1px;
height: 0.1px;
overflow: hidden;
z-index: -1;
}
input[type=text]:focus, input[type=email]:focus, input[type=password]:focus, input[type=number]:focus, input[type=date]:focus, input[type=file]:focus, select:focus {
outline: none;
border-color: #6ba8e5;
box-shadow: 0 0 0 0.2rem rgba(107, 168, 229, 0.25);
}
label { font-weight: 500; font-size: 0.85rem; color: #495057; }
.field-hint { font-size: 0.8rem; color: #6c757d; margin: -10px 0 14px; }
/* --- Alerts --- */
.alert { padding: 0.6rem 0.8rem; border-radius: 0.4rem; margin-bottom: 16px; font-size: 0.85rem; }
.alert.error { background-color: #eec0c4; color: #721c24; }
.alert.success { background-color: #9cdbab; color: #155724; }
/* --- Login page --- */
.login-wrapper {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: #f8f9fa;
padding: 16px;
}
.login-box {
background: #ffffff;
border: 1px solid rgba(0, 0, 0, 0.125);
border-radius: 0.5rem;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
padding: 2rem 2.25rem;
width: 100%;
max-width: 340px;
}
.login-box h1 {
font-size: 1.4rem;
text-align: center;
margin-bottom: 1.25rem;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
/* --- Status badges/pills - shared palette, matching GemikFT exactly --- */
.badge, .status-badge {
display: inline-flex;
align-items: center;
height: 30px;
padding: 0 0.75rem;
border-radius: 0.5rem;
font-size: 0.875rem;
font-weight: 600;
line-height: 1;
text-transform: uppercase;
background-color: #dee2e6; /* neutral, default */
color: #383d41;
transition: transform 0.2s ease;
}
.badge-remove {
background: none;
border: none;
cursor: pointer;
color: inherit;
font-size: 1em;
line-height: 1;
padding: 0;
margin-left: 6px;
}
.badge:hover, .status-badge:hover { transform: scale(1.05); }
.badge.mine, .status-success { background-color: #9cdbab; color: #155724; }
.status-warning { background-color: #fdffb2; color: #856404; }
.badge.danger, .status-danger { background-color: #eec0c4; color: #721c24; }
.status-error { background-color: #c6c9f2; color: #383d7a; }
.status-info { background-color: #a5d6f2; color: #084298; }
.status-unknown { background-color: #dee2e6; color: #383d41; }
#progress-wrap { display:none; margin-top: 10px; }
#progress-bar-outer { background:#e9ecef; border-radius:0.4rem; height:14px; overflow:hidden; }
#progress-bar-inner { background:#6ba8e5; height:100%; width:0%; transition: width .2s; }
#progress-text { font-size: 0.85rem; color:#6c757d; margin-top:4px; }
/* Per-file verdicts for a queued (multi-file) upload. One row per file,
appended as each finishes, so a batch shows what landed and what
didn't instead of collapsing to a single pass/fail for the lot. */
.upload-results { margin-top: 12px; display: flex; flex-direction: column; gap: 4px; }
.upload-result {
display: flex;
align-items: baseline;
gap: 8px;
font-size: 0.85rem;
padding: 5px 10px;
border-radius: 0.375rem;
background: #f1f3f5;
}
.upload-result.ok { background: #eaf6ee; color: #1a7f3c; }
.upload-result.failed { background: #fdeeee; color: #b02a2a; }
.upload-result-name {
font-weight: 500;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 55%;
}
.upload-result-msg { color: inherit; opacity: 0.85; }
/* Long filenames used to stretch the File column and squeeze everything
beside it. The cap goes on an inner rather than the | : with
the default auto table layout a max-width on a cell is only a hint the
browser may overrule, while an inline-block inside it is honoured, so
the ellipsis actually appears. The full name stays available as the
span's title, which is also what a screen reader reads out. */
.filename-cell span {
display: inline-block;
max-width: 34ch;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
vertical-align: middle;
}
/* --- Bulk selection on the Files table --- */
/* The checkbox column stays as narrow as its contents. The bulk buttons
sit in the header's last cell, above the per-row Download/Delete pair,
so the two line up in the same column. */
.select-col { width: 1%; white-space: nowrap; text-align: center; }
.select-col input[type="checkbox"] { width: auto; margin: 0; cursor: pointer; vertical-align: middle; }
th.select-col { text-align: center; }
.bulk-actions { display: inline-flex; gap: 6px; }
.bulk-actions .btn[disabled] { opacity: 0.45; cursor: default; box-shadow: none; }
.bulk-actions .btn[disabled]:hover { filter: none; }
/* --- Multi-select (checkbox dropdown, "N selected" summary) --- */
.multiselect { position: relative; margin-bottom: 0; }
.multiselect-control {
display: flex;
align-items: center;
justify-content: space-between;
height: 30px;
padding: 0 10px;
border: 1px solid #ced4da;
border-radius: 0.375rem;
background: #ffffff;
cursor: pointer;
}
.multiselect-control.open,
.multiselect-control:focus-within {
border-color: #6ba8e5;
box-shadow: 0 0 0 0.2rem rgba(107, 168, 229, 0.25);
}
.multiselect-summary { color: #212529; font-size: 0.95rem; }
.multiselect-chevron { color: #6c757d; font-size: 0.85rem; transition: transform 0.2s ease; }
.multiselect-control.open .multiselect-chevron { transform: rotate(180deg); }
.multiselect-dropdown {
position: absolute;
top: calc(100% + 4px);
left: 0;
right: 0;
max-height: 240px;
overflow-y: auto;
background: #ffffff;
border: 1px solid #ced4da;
border-radius: 0.375rem;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
z-index: 20;
padding: 6px 0;
}
.multiselect-option {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 12px;
font-size: 0.9rem;
font-weight: 400;
color: #212529;
cursor: pointer;
margin-bottom: 0;
}
.multiselect-option:hover { background-color: #f1f6fb; }
.multiselect-option input { width: auto; margin: 0; }
/* The per-row "Assigned to" picker on the Files page is the one
multiselect that lives in a narrow table cell, so its panel inherited
a control-width layout that wrapped longer e-mail addresses onto two
lines. Twice the width, anchored to the right edge so it opens inwards
rather than off the side of the page - that column sits near the right
of the table. .auto-submit is unique to this picker, so the filter bars
and the upload form's assign list are untouched. The viewport cap keeps
it sane on a phone, where 200% of an already-narrow cell could
otherwise reach past the screen. */
.multiselect.auto-submit .multiselect-dropdown {
left: auto;
right: 0;
width: 200%;
max-width: 90vw;
}
/* --- Modal (used to open Upload a file over the current page) --- */
body.modal-embed .container { margin: 16px auto; }
.modal-backdrop {
display: none;
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 100;
align-items: center;
justify-content: center;
padding: 16px;
}
.modal-backdrop.open { display: flex; }
.modal-dialog {
background: #ffffff;
border-radius: 0.5rem;
overflow: hidden;
width: 100%;
max-width: 640px;
max-height: 90vh;
display: flex;
flex-direction: column;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
}
.modal-dialog.modal-dialog-sm { max-width: 420px; }
.modal-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem 1.25rem;
border-bottom: 1px solid rgba(0, 0, 0, 0.125);
}
.modal-header h2 { margin: 0; }
.modal-header h2 i { margin-right: 0.5rem; }
.modal-close {
background: none;
border: none;
cursor: pointer;
font-size: 1.4rem;
color: #6c757d;
line-height: 1;
padding: 0;
}
.modal-close:hover { color: #212529; }
.modal-body { padding: 0; flex: 1; overflow: hidden; }
.modal-body iframe { width: 100%; height: 70vh; border: none; display: block; }
.modal-body iframe.modal-frame-sm { height: 380px; }
.modal-body.modal-body-padded { padding: 24px; overflow-y: auto; }
/* --- Responsive (mobile) --- */
@media (max-width: 768px) {
.topbar { flex-wrap: wrap; }
.nav-toggle { display: inline-flex; }
/* Far less room to spare, so the filename gets a tighter cap. */
.filename-cell span { max-width: 18ch; }
/* Collapsed by default; JS toggles .open. Drops to a full-width
panel below the brand row rather than overlaying anything, so
there's no z-index/positioning to get wrong on small screens. */
.topbar nav {
display: none;
width: 100%;
flex-direction: column;
align-items: stretch;
gap: 2px;
margin-top: 12px;
}
.topbar nav.open { display: flex; }
.topbar nav a,
.topbar .nav-action,
.topbar .user-menu-toggle {
width: 100%;
justify-content: flex-start;
box-sizing: border-box;
}
.topbar .nav-action { margin-left: 0; }
/* The user-menu dropdown is an absolutely-positioned popover on
desktop; nested inside an already-vertical, full-width mobile
nav, it reads better as a plain stacked continuation instead of
a floating box that could overflow the viewport edge. */
.topbar nav.open .user-menu-dropdown {
position: static;
box-shadow: none;
border: none;
width: 100%;
padding: 0 0 0 1.5rem;
}
/* Wide tables scroll horizontally instead of breaking the layout
or forcing the whole page to zoom out. */
.card.table-card { overflow-x: auto; }
/* Filter fields were a fixed 220px for desktop alignment; on a
narrow screen that leaves dead space next to a single column
instead of using the width available. */
.filter-bar .filter-field { flex: 1 1 100%; }
.card { padding: 16px; }
}
|