mirror of
https://github.com/magicbug/Cloudlog
synced 2024-11-21 15:56:30 +00:00
b78c307f80
Upcoming DXPed - Improved CSS to handle dark themes better
262 lines
5.0 KiB
CSS
262 lines
5.0 KiB
CSS
/*!
|
|
* No overrides for the default theme as it aligns with general.css
|
|
*/
|
|
:root{
|
|
--cl-border-btn-pwd:#333;
|
|
}
|
|
|
|
.card-header {
|
|
color: white;
|
|
}
|
|
|
|
.awardsBgDanger a {
|
|
color: white;
|
|
}
|
|
|
|
.awardsBgSuccess a{
|
|
color: white;
|
|
}
|
|
|
|
.border-top {
|
|
--bs-border-color: #282828;
|
|
}
|
|
/*
|
|
* Dark Maps
|
|
*/
|
|
|
|
.leaflet-tile {
|
|
filter: invert() hue-rotate(180deg) grayscale(0.8) !important;
|
|
}
|
|
|
|
path.grid-rectangle {
|
|
stroke: rgba(200, 200, 200, 0.5);
|
|
}
|
|
|
|
span.grid-text > font {
|
|
color: rgba(220, 220, 220, 0.7) !important;
|
|
-webkit-text-stroke: 1px black !important;
|
|
}
|
|
|
|
path.grid-confirmed {
|
|
fill: rgba(144, 238, 144, 0.15) !important;
|
|
stroke: rgba(144, 238, 144, 0.15) !important;
|
|
}
|
|
|
|
path.grid-worked {
|
|
fill: rgba(220, 50, 50, 0.25) !important;
|
|
stroke: rgba(220, 50, 50, 0.25) !important;
|
|
}
|
|
|
|
.map-leaflet {
|
|
background-color: #2d3537!important;
|
|
}
|
|
|
|
.leaflet-popup-content h3 {
|
|
color: #000;
|
|
}
|
|
|
|
/*
|
|
* Dark Navigation
|
|
*/
|
|
|
|
/* Navigation background */
|
|
|
|
.navbar.bg-light {
|
|
background-color: #000 !important;
|
|
}
|
|
|
|
/* Inactive Links */
|
|
|
|
.navbar-light .navbar-nav .nav-link {
|
|
color: rgba(255, 255, 255, 0.6);
|
|
}
|
|
|
|
/* Active Links and Logo */
|
|
|
|
.navbar-light .navbar-brand,
|
|
.navbar-light .navbar-brand:focus,
|
|
.navbar-light .navbar-brand:hover,
|
|
.navbar-light .navbar-nav .active > .nav-link,
|
|
.navbar-light .navbar-nav .nav-link:focus,
|
|
.navbar-light .navbar-nav .nav-link:hover {
|
|
color: #fff;
|
|
}
|
|
|
|
/* Hamburger Menu */
|
|
|
|
.navbar-light .navbar-toggler-icon {
|
|
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.6%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
|
|
}
|
|
|
|
/*
|
|
* Dark inputs
|
|
*/
|
|
|
|
.form-control,
|
|
.form-control-sm,
|
|
.form-control:focus,
|
|
.form-control:disabled,
|
|
.form-select {
|
|
background-color: #151515;
|
|
color: #eeeeee;
|
|
border: 1px solid #333;
|
|
}
|
|
.form-select {
|
|
--bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23FFFFFF' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
|
|
}
|
|
|
|
.bootstrap-dialog.type-primary .modal-header {
|
|
background-color: #131313;
|
|
}
|
|
|
|
.selectize-input {
|
|
border: 1px solid #333333;
|
|
}
|
|
|
|
.selectize-dropdown,
|
|
.selectize-input,
|
|
.selectize-input input {
|
|
color: #fff;
|
|
}
|
|
|
|
.selectize-input,
|
|
.selectize-control.single .selectize-input.input-active {
|
|
background: #151515;
|
|
}
|
|
|
|
.selectize-input.full {
|
|
background-color: #151515;
|
|
}
|
|
|
|
.selectize-input.focus {
|
|
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15);
|
|
}
|
|
|
|
.selectize-dropdown .optgroup-header {
|
|
color: #151515;
|
|
}
|
|
|
|
.selectize-dropdown,
|
|
.selectize-dropdown.form-control {
|
|
background: #151515;
|
|
}
|
|
|
|
.selectize-input.focus {
|
|
color: #282828;
|
|
background-color: #fff;
|
|
border-color: #95cfeb;
|
|
box-shadow: 0 0 0 0.2rem rgba(42, 159, 214, 0.25);
|
|
}
|
|
|
|
.selectize-dropdown,
|
|
.selectize-dropdown.form-control {
|
|
border-radius: 0;
|
|
}
|
|
|
|
#lotw_badge {
|
|
float: right;
|
|
}
|
|
|
|
#edit_qso:not(.btn) {
|
|
float: left;
|
|
}
|
|
|
|
.qso_call {
|
|
float: left;
|
|
width: 140px;
|
|
}
|
|
|
|
.qso_icons {
|
|
float: right;
|
|
}
|
|
|
|
#qsoList_wrapper th {
|
|
text-align: left !important;
|
|
white-space: nowrap;
|
|
}
|
|
#qsoList_wrapper td {
|
|
text-align: left !important;
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
@media (min-width: 1500px) {
|
|
.container, .container-lg, .container-md, .container-sm, .container-xl {
|
|
max-width: 1400px
|
|
}
|
|
}
|
|
|
|
@media (min-width: 1920px) {
|
|
.container, .container-lg, .container-md, .container-sm, .container-xl {
|
|
max-width: 1800px
|
|
}
|
|
}
|
|
|
|
@media (min-width: 992px) {
|
|
.modal-lg, .modal-xl {
|
|
max-width: 1300px;
|
|
}
|
|
}
|
|
|
|
.modal-body {
|
|
max-height: calc(100vh - 200px);
|
|
overflow-y: auto;
|
|
}
|
|
|
|
::-webkit-scrollbar {
|
|
width: 12px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
-webkit-box-shadow: inset 0 0 6px rgba(196, 196, 196, 0.185);
|
|
border-radius: 10px;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
border-radius: 10px;
|
|
-webkit-box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.5);
|
|
}
|
|
|
|
#map {
|
|
height: 500px !important;
|
|
}
|
|
|
|
#gridsquare_map {
|
|
height: calc(100vh - 380px) !important;
|
|
max-height: 900px !important;
|
|
}
|
|
|
|
#mapqso {
|
|
height: 400px !important;
|
|
}
|
|
|
|
#qsomap {
|
|
height: 400px !important;
|
|
}
|
|
|
|
|
|
.accordion {
|
|
--bs-accordion-active-color: #FFFFFF;
|
|
--bs-accordion-bg: var(--bs-body-bg);
|
|
--bs-accordion-btn-bg: #2c2c2c;
|
|
--bs-accordion-active-bg: #2c2c2c;
|
|
--bs-accordion-btn-focus-border-color: #FFFFFF;
|
|
--bs-accordion-btn-focus-box-shadow: initial;
|
|
--bs-accordion-border-color: #2c2c2c;
|
|
--bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23FFFFFF'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
|
|
}
|
|
.accordion-button.collapsed {
|
|
border-bottom: 1px solid var(--bs-body-bg);
|
|
}
|
|
|
|
/* CSS for Upcoming DXCC Component */
|
|
#upcoming_dxccs_component #worked_before {
|
|
background-color: #ddffdd;
|
|
width: 33%;
|
|
color: #000;
|
|
}
|
|
|
|
#upcoming_dxccs_component #not_worked_before {
|
|
background-color: #ffdddd;
|
|
width: 33%;
|
|
color: #000;
|
|
} |