Cloudlog/assets/css/general.css
Peter Goodhall 740537cf78 Redesign logbooks management UI and add custom styles
Revamped the logbooks management page for improved usability and modern appearance, including enhanced table layout, action buttons, and empty state messaging. Added dedicated CSS styles for logbooks management components to ensure consistent spacing, card appearance, badge sizing, and DataTable integration.
2025-08-09 22:41:14 +01:00

1029 行
15 KiB
CSS

@media (min-width: 992px) {
.modal-lg,
.modal-xl {
max-width: 900px;
}
}
[hidden] {
display: none !important;
}
a {
text-decoration: none !important;
}
.main-nav .container {
margin-top: 0px !important;
}
#nav-container {
margin-top: 0;
position: sticky;
top: 0;
}
thead>tr>td {
position: sticky;
top: 45px;
}
.dashboard {
padding-top: 15px;
}
.row.logdata {
padding-top: 15px;
}
.statistics {
padding-top: 15px;
}
.statistics_custom {
padding-top: 15px;
}
.notes {
padding-top: 15px;
}
.eqsl {
padding-top: 15px;
}
.publicsearch {
padding-top: 15px;
max-width: 540px;
}
.search {
padding-top: 15px;
}
.logbook {
padding-top: 15px;
}
.adif {
padding-top: 15px;
}
.adif .alert p {
margin-bottom: 0rem;
}
/* Enhanced ADIF styling */
.adif .nav-tabs .nav-link {
border-radius: 0.5rem 0.5rem 0 0;
border: 1px solid transparent;
margin-right: 0.25rem;
}
.adif .nav-tabs .nav-link:hover {
border-color: #e9ecef #e9ecef #dee2e6;
isolation: isolate;
}
.adif .nav-tabs .nav-link.active {
background-color: #fff;
border-color: #dee2e6 #dee2e6 #fff;
}
.adif .card {
border: none;
box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}
.adif .card-header {
background-color: #f8f9fa;
border-bottom: 1px solid #dee2e6;
padding: 1rem 1.25rem;
}
.adif .card-body {
padding: 1.5rem;
}
.adif .form-check {
padding-left: 0;
}
.adif .form-check-input {
margin-right: 0.5rem;
}
.adif .form-check-label {
font-size: 0.9rem;
line-height: 1.4;
}
.adif .badge {
font-size: 0.7rem;
padding: 0.25rem 0.5rem;
}
.adif .btn {
border-radius: 0.375rem;
font-weight: 500;
padding: 0.5rem 1rem;
}
.adif .btn-lg {
padding: 0.75rem 1.5rem;
font-size: 1.1rem;
}
.adif .form-control,
.adif .form-select {
border-radius: 0.375rem;
border-color: #ced4da;
}
.adif .form-control:focus,
.adif .form-select:focus {
border-color: #86b7fe;
box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
}
.adif .card .card-header h6 {
margin-bottom: 0;
font-weight: 600;
color: #495057;
}
.adif .alert {
border-radius: 0.5rem;
border: none;
box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}
/* Station Management Page Styling */
.station-management {
padding-top: 15px;
}
.station-management .table-success {
background-color: rgba(25, 135, 84, 0.1);
}
.station-management .card {
border: none;
box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}
.station-management .card-header {
background-color: #f8f9fa;
border-bottom: 1px solid #dee2e6;
padding: 1rem 1.25rem;
}
.station-management .badge {
font-size: 0.7rem;
padding: 0.25rem 0.5rem;
}
.station-management .btn-sm {
padding: 0.375rem 0.75rem;
font-size: 0.875rem;
border-radius: 0.375rem;
}
/* DataTable styling within cards */
.station-management .dataTables_wrapper {
padding: 0;
}
.station-management .dataTables_length,
.station-management .dataTables_filter {
margin-bottom: 1rem;
}
.station-management .dataTables_info,
.station-management .dataTables_paginate {
margin-top: 1rem;
}
.station-management .dataTables_length label,
.station-management .dataTables_filter label {
font-weight: 500;
margin-bottom: 0;
}
.station-management .dataTables_filter input {
margin-left: 0.5rem;
border-radius: 0.375rem;
border: 1px solid #ced4da;
padding: 0.375rem 0.75rem;
}
.station-management .dataTables_length select {
margin: 0 0.5rem;
border-radius: 0.375rem;
border: 1px solid #ced4da;
padding: 0.375rem 0.75rem;
}
/* Logbooks Management Page Styling */
.logbooks-management {
padding-top: 15px;
}
.logbooks-management .table-success {
background-color: rgba(25, 135, 84, 0.1);
}
.logbooks-management .card {
border: none;
box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}
.logbooks-management .card-header {
background-color: #f8f9fa;
border-bottom: 1px solid #dee2e6;
padding: 1rem 1.25rem;
}
.logbooks-management .badge {
font-size: 0.7rem;
padding: 0.25rem 0.5rem;
}
.logbooks-management .btn-sm {
padding: 0.375rem 0.75rem;
font-size: 0.875rem;
border-radius: 0.375rem;
}
/* DataTable styling within cards */
.logbooks-management .dataTables_wrapper {
padding: 0;
}
.logbooks-management .dataTables_length,
.logbooks-management .dataTables_filter {
margin-bottom: 1rem;
}
.logbooks-management .dataTables_info,
.logbooks-management .dataTables_paginate {
margin-top: 1rem;
}
.logbooks-management .dataTables_length label,
.logbooks-management .dataTables_filter label {
font-weight: 500;
margin-bottom: 0;
}
.logbooks-management .dataTables_filter input {
margin-left: 0.5rem;
border-radius: 0.375rem;
border: 1px solid #ced4da;
padding: 0.375rem 0.75rem;
}
.logbooks-management .dataTables_length select {
margin: 0 0.5rem;
border-radius: 0.375rem;
border: 1px solid #ced4da;
padding: 0.375rem 0.75rem;
}
.api .alert p {
margin-bottom: 0rem;
}
.qso_panel {
padding-top: 25px;
}
.qso_panel #callsign {
text-transform: uppercase;
}
.qso_panel #locator {
text-transform: uppercase;
}
.qso_panel .iota_ref {
text-transform: uppercase;
}
.qso_panel #sota_ref-selectized {
text-transform: uppercase;
}
.qso_panel #wwff_ref-selectized {
text-transform: uppercase;
}
.qso_panel #pota_ref-selectized {
text-transform: uppercase;
}
.qso_panel #darc_dok-selectized {
text-transform: uppercase;
}
.card-body #callsign {
text-transform: uppercase;
}
.card-body #locator {
text-transform: uppercase;
}
.card-body #vucc_grids {
text-transform: uppercase;
}
.card-body #sota_ref_edit-selectized {
text-transform: uppercase;
}
.card-body #wwff_ref_edit-selectized {
text-transform: uppercase;
}
.card-body #pota_ref_edit-selectized {
text-transform: uppercase;
}
.card-body #darc_dok_edit-selectized {
text-transform: uppercase;
}
.card-body #exch_rcvd {
text-transform: uppercase;
}
.card-body #exch_sent {
text-transform: uppercase;
}
.card-body #exch_gridsquare_r {
text-transform: uppercase;
}
#oqrssearch:valid {
text-transform: uppercase;
}
.confirmedGrid {
border-color: green;
}
.workedGrid {
border-color: yellow;
}
.newGrid {
border-color: red;
border-width: 2px;
}
#country {
border: none;
}
TD.eqsl {
width: 33px;
}
.eqsl-green {
color: #00a000 !important;
font-size: 1.1em;
}
.eqsl-red {
color: #f00 !important;
font-size: 1.1em;
}
.qsl-green {
color: #00a000 !important;
font-size: 1.1em;
}
.qsl-red {
color: #f00 !important;
font-size: 1.1em;
}
.qsl-yellow {
color: #d39e00 !important;
font-size: 1.1em;
}
.qsl-grey {
color: #dddddd !important;
font-size: 1.1em;
}
TD.qrz {
width: 33px;
}
.qrz-green {
color: #00a000 !important;
font-size: 1.1em;
}
.qrz-red {
color: #f00 !important;
font-size: 1.1em;
}
TD.lotw {
width: 33px;
}
.lotw-green {
color: #00a000 !important;
font-size: 1.1em;
}
.lotw-red {
color: #f00 !important;
font-size: 1.1em;
}
.qso-edit-box {
padding: 10px;
}
.previous-qsos .card-title {
margin-bottom: 0px;
}
.qso-map .card-title {
margin-bottom: 0px;
}
.qso-map {
margin-bottom: 10px;
}
.callsign-suggest {
margin-bottom: 10px;
}
.callsign-suggest .card-title {
margin-bottom: 0px;
}
#search_box #callsign {
text-transform: uppercase;
}
#nav-bar-search-input:focus {
text-transform: uppercase;
}
.settings {
padding-top: 15px;
}
.settings-nav {
margin-bottom: 15px;
list-style: none;
background-color: #fff;
border: 1px solid #d1d5da;
border-radius: 3px;
}
.settings-nav .nav-link {
list-style: none;
background-color: #fff;
border: 1px solid #d1d5da;
}
.settings-nav .nav-link:hover {
background-color: #e1e4e8;
}
/* QSL Card Management CSS */
.qsl_management {
padding-top: 15px;
}
/*
*
*
*/
.qso-map-new .card-header {
background: #0f2027;
/* fallback for old browsers */
background: -webkit-linear-gradient(to right,
#2c5364,
#203a43,
#0f2027);
/* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right,
#2c5364,
#203a43,
#0f2027);
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
color: #ffffff;
}
#myTab .nav-link {
padding: 8px !important;
}
#map {
z-index: 1;
}
#qsomap {
z-index: 1;
}
#create_station_profile .row {
margin-bottom: 10px;
}
/*
* Debug CSS
*/
.card {
margin-bottom: 10px;
}
.modal-backdrop {
z-index: 1000 !important;
}
.dropdown-menu {
z-index: 2000 !important;
position: absolute !important;
}
.dropdown-menu.menuOnResultTab {
left: -200px;
}
.was-map-dialog .modal-dialog {
width: 100%;
}
@media (min-width: 576px) {
.was-map-dialog .modal-dialog {
max-width: 73% !important;
}
}
/*
* Timepicker alignment
*/
.exportdatepicker {
padding-right: 0;
padding-left: 0;
}
.modal-body {
max-height: calc(100vh - 200px);
overflow-y: auto;
}
/* Station Logbooks Styles */
div#station_logbooks_table_length {
padding-top: 12px;
padding-left: 12px;
padding-bottom: 0px;
}
div#station_logbooks_table_filter {
padding-top: 12px;
padding-right: 12px;
padding-bottom: 0px;
}
div#station_logbooks_table_info {
padding-left: 12px;
}
div#station_logbooks_table_paginate {
padding-right: 12px;
padding-bottom: 12px;
}
div#station_logbooks_linked_table_length {
padding-top: 12px;
padding-left: 12px;
padding-bottom: 0px;
}
div#station_logbooks_linked_table_filter {
padding-top: 12px;
padding-left: 12px;
padding-bottom: 0px;
}
div#station_logbooks_linked_table_info {
padding-left: 12px;
}
div#station_logbooks_linked_table_paginate {
padding-right: 12px;
padding-bottom: 12px;
}
/* qrz.com profile picture Styles */
.card-title {
margin-bottom: 0px;
}
.callsign-image {
margin-bottom: 10px;
}
.callsign-image-content {
display: block;
max-height: 300px;
text-align: center;
}
.callsign-image-pic {
max-height: 250px;
max-width: 100%;
}
#mapactivators {
height: calc(100vh - 380px) !important;
max-height: 900px !important;
}
.copy-icon {
display: block;
cursor: pointer;
padding-left: 0.5em;
}
.flash-copy {
animation-name: flash;
animation-timing-function: ease-out;
animation-duration: 1s;
}
@keyframes flash {
0% {
background: #28a745;
}
100% {
background: transparent;
}
}
.api-url {
font-family: Monospace;
}
.api-key {
font-family: Monospace;
}
.qso_panel .dxccsummary {
margin-bottom: 10px;
}
.qso_panel .dxccsummaryheader {
cursor: pointer;
}
.table-striped tbody>tr.activeRow {
background-color: #5cb85c !important;
--bs-table-bg: none;
}
.border-top {
--bs-border-color: #dee2e6;
}
.activeRow a {
color: #fff !important;
}
.w-qsl {
max-height: calc(100vh - 270px);
overflow-y: auto;
}
#lotw_manual_results {
padding-top: 10px;
}
.lotw_info_yellow {
background-image: linear-gradient(to bottom, #3fb618, yellow);
}
.lotw_info_orange {
background-image: linear-gradient(to bottom, #3fb618, orange);
}
.lotw_info_red {
background-image: linear-gradient(to bottom, #3fb618, red);
}
.highcharts-strong {
font-weight: bold;
}
.highcharts-figure,
.highcharts-data-table table {
min-width: 320px;
max-width: 100%;
margin: 1em auto;
max-height: calc(100vh - 200px) !important;
overflow-y: auto;
}
.highcharts-data-table table {
font-family: Verdana, sans-serif;
border-collapse: collapse;
border: 1px solid #ebebeb;
margin: 10px auto;
text-align: center;
width: 100%;
max-width: 500px;
}
.highcharts-data-table caption {
padding: 1em 0;
font-size: 1.2em;
color: #555;
}
.highcharts-data-table th {
font-weight: 600;
padding: 0.5em;
}
.highcharts-data-table td,
.highcharts-data-table th,
.highcharts-data-table caption {
padding: 0.5em;
}
.highcharts-data-table thead tr,
.highcharts-data-table tr:nth-child(even) {
background: #f8f8f8;
}
.highcharts-data-table tr:hover {
background: #f1f7ff;
}
#radio_cat_state {
margin-bottom: 10px;
}
.previous-qsos table {
margin-bottom: 0px;
}
#advancedmap {
height: calc(100vh - 280px) !important;
max-height: 1000px !important;
}
.lotw-cert-list table {
margin-bottom: 0px;
}
.qso_panel a i.fa.fa-star:hover {
color: #ffd700 !important;
}
#dx,
#state,
#gridsquare,
#sota,
#wwff,
#pota {
text-transform: uppercase;
}
#awardInfoButton {
display: flex;
align-items: center;
}
#awardInfoButton h2 {
margin-right: 30px;
}
#simpleFleInfo {
display: flex;
align-items: center;
}
#simpleFleInfo h2 {
margin-right: 30px;
}
.sfletable {
height: 470px;
}
.sfletable.table {
width: 100%;
}
.sfletable.table thead, .sfletable.table tbody tr {
display: block;
width: 100%;
table-layout: fixed;
display: inline-table;
}
.sfletable.table tbody {
width: 95%;
overflow-y: scroll;
max-height: 440px;
position: absolute;
}
.simplefle {
--bs-card-bg: none;
}
.red {
color: var(--red);
}
.green {
color: var(--green);
}
.blue {
color: var(--indigo);
}
.gray {
color: var(--gray);
}
.orange {
color: var(--orange);
}
.qso_eqsl_qslmsg_update {
cursor: pointer;
margin-left: 10px;
}
.icon_selectBox {
position: relative;
}
.icon_selectBox_data {
display: none;
position: absolute;
z-index: 50;
left: initial;
border: 1px solid var(--bs-border-color);
padding: 5px;
top: initial;
background-color: var(--bs-card-bg);
color: var(--bs-body-color);
}
.icon_selectBox_data label {
display: block;
margin-bottom: 0px !important;
text-align: center;
cursor: pointer;
}
.icon_selectBox_data label:hover {
background-color: var(--bs-primary);
}
.inputError {
border: 2px solid rgb(217, 83, 79);
}
table.dataTable thead th,
table.dataTable thead td,
table.dataTable tfoot th,
table.dataTable tfoot td {
text-align: center !important;
}
.dropend .dropdown-toggle {
margin-left: 1em;
}
/*.dropdown .dropdown-menu {
display: none;
}*/
.dropdown:hover>.dropdown-menu, .dropend:hover>.dropdown-menu {
display: block;
/* margin-top: .125em; */
margin-left: .125em;
}
@media screen and (min-width:769px) {
.dropend:hover>.dropdown-menu {
position: absolute;
top: 0;
left: 100%;
}
.dropend .dropdown-toggle {
margin-left: .5em;
}
}
/*.navbar-nav li:hover > ul.dropdown-menu {
display: block;
}*/
.dropdown-submenu {
position:relative;
}
.dropdown-submenu>.dropdown-menu {
top:0;
left:50%;
margin-top:30px;
}
.dropdown-menu > li > a:hover:after {
transform: rotate(-90deg);
}
.table-responsive .dropdown-menu.notdisplay {
padding:0px!important;
border:0px!important;
}
#partial_view .table-responsive {
overflow-x: unset;
}
label {
margin-bottom: 0.25rem;
}
.btn-pwd-showhide, .btn-pwd-showhide:hover {
border: 1px solid var(--cl-border-btn-pwd);
}
.dxccsummaryheader:after {
content: '\02795'; /* Unicode character for "plus" sign (+) */
float: right;
margin-left: 5px;
color: #000000;
background-image: linear-gradient(to right, white 0, white 12ch, black 12ch, black 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-text-fill-color: transparent;
}
.dxccsummaryheaderopened:after {
content: "\2796"; /* Unicode character for "minus" sign (-) */
}
.hamsatBgLin {
background-color: rgb(224 242 254) !important;
--bs-badge-color: rgb(2 132 199) !important;
}
.hamsatBgData {
background-color: rgb(250 232 255) !important;
--bs-badge-color: rgb(192 38 211) !important;
}
.hamsatBgFm {
background-color: rgb(254 243 199) !important;
--bs-badge-color: rgb(217 119 6) !important;
}
/* CSS for Upcoming DXCC Component */
#upcoming_dxccs_component #worked_before {
background-color: #ddffdd;
width: 33%;
}
#upcoming_dxccs_component #not_worked_before {
background-color: #ffdddd;
width: 33%;
}
.table-responsive>table .dropdown{position:static;}
.table-responsive>table .dropdown>.dropdown-menu{left: 75%;top:auto !important;}
tr.htmx-swapping td {
opacity: 0;
transition: opacity 1s ease-out;
}
.error-red-border {
border-color: red;
}