cloudlog/assets/css/general.css
Peter Goodhall f99a10e13b Enhance options UI with icons and improved layout
Added FontAwesome icons to options pages and sidebar for better visual distinction. Improved the options index page with overview cards for each settings category. Updated CSS for active and hover states in the options sidebar, providing a more modern and user-friendly interface. Added a subscription management link to the header if configured.
2025-12-09 16:23:21 +00:00

1052 lines
16 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;
}
.adif .card {
border: none;
box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}
.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;
}
/* Options page styling */
.settings .list-group-item {
border-left: 3px solid transparent;
transition: all 0.2s ease;
}
.settings .list-group-item:hover {
border-left-color: #0d6efd;
background-color: #f8f9fa;
}
.settings .list-group-item.active {
background-color: #e7f1ff;
border-left-color: #0d6efd;
}
.settings .list-group-item.active .nav-link {
color: #0d6efd;
font-weight: 500;
}
.settings .list-group-item .nav-link {
padding: 0;
color: #212529;
display: flex;
align-items: center;
}
.settings .list-group-item .nav-link i {
margin-right: 10px;
width: 20px;
text-align: center;
}
/* 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);
}
/* QSO LIVE/POST badge hover effect for visibility */
.badge.text-bg-success[style*="cursor: pointer;"]:hover {
background-color: #ff9800 !important; /* orange for hover */
color: #fff !important;
transition: background 0.2s;
}
.badge.text-bg-danger[style*="cursor: pointer;"]:hover {
background-color: #2196f3 !important; /* blue for hover */
color: #fff !important;
transition: background 0.2s;
}
.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;
}