mirror of
https://github.com/wavelog/wavelog
synced 2026-08-13 18:41:16 -04:00
101 lines
2.1 KiB
CSS
101 lines
2.1 KiB
CSS
/* QSO Form Component Styles */
|
|
|
|
.qso-form-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
|
|
/* QSO Entry Form - fixed at top */
|
|
.qso-form {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* QSO List Container - takes remaining space */
|
|
.qso-list-container {
|
|
flex: 1;
|
|
overflow: hidden;
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 0; /* Important for flex child with overflow */
|
|
}
|
|
|
|
/* Scrollable table wrapper - takes all available space */
|
|
.qso-table-scroll {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
overflow-x: auto;
|
|
min-height: 0;
|
|
}
|
|
|
|
/* Sticky table header */
|
|
.qso-table thead {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 10;
|
|
background-color: var(--bs-table-bg, #212529);
|
|
}
|
|
|
|
/* Total count - fixed at bottom */
|
|
.qso-total-count {
|
|
flex-shrink: 0;
|
|
padding-top: 0.5rem;
|
|
}
|
|
|
|
/* hide number input spinners, qso form field sizing */
|
|
.no-spinner::-webkit-outer-spin-button,
|
|
.no-spinner::-webkit-inner-spin-button {
|
|
-webkit-appearance: none;
|
|
margin: 0;
|
|
}
|
|
.no-spinner {
|
|
-moz-appearance: textfield;
|
|
appearance: textfield;
|
|
}
|
|
#qso-gridsquare-sent,
|
|
#qso-gridsquare-received,
|
|
#qso-exchange-sent,
|
|
#qso-exchange-received {
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
/* QSO log table typography */
|
|
#qso-tbody {
|
|
font-family: 'JetBrains Mono', 'Consolas', 'SF Mono', monospace;
|
|
font-variant-numeric: slashed-zero;
|
|
}
|
|
|
|
/* Edit-mode row: .form-select-sm has no min-height (unlike .form-control-sm), so the
|
|
p-0 band/mode dropdowns render shorter than the inputs. Match the input min-height. */
|
|
#qso-tbody select.form-select-sm {
|
|
min-height: calc(1.5em + 0.5rem + calc(var(--bs-border-width) * 2));
|
|
}
|
|
|
|
#qso-tbody td.callsign-col,
|
|
#qso-tbody td.serial-col,
|
|
#qso-tbody td.gridsquare-col,
|
|
#qso-tbody td.exchange-text-col,
|
|
#qso-tbody td.operator-col {
|
|
letter-spacing: 1px;
|
|
}
|
|
|
|
/* Distribute available space across visible form fields */
|
|
#qso-form .row {
|
|
flex-wrap: nowrap;
|
|
}
|
|
#qso-form .col-field {
|
|
flex: 1 1 0;
|
|
min-width: 60px;
|
|
}
|
|
#qso-form .col-field-wide {
|
|
flex: 2 1 0;
|
|
min-width: 100px;
|
|
}
|
|
|
|
#qso-serial-sent.serial-unclaimed {
|
|
color: var(--bs-danger, #dc3545);
|
|
}
|
|
#qso-serial-sent.serial-claimed {
|
|
color: var(--bs-success, #198754);
|
|
}
|