diff options
| -rw-r--r-- | ishtar_common/static/media/images/ishtar-bg-dark.png | bin | 0 -> 63429 bytes | |||
| -rw-r--r-- | ishtar_common/static/media/styles.css | 23 | ||||
| -rw-r--r-- | ishtar_common/templates/ishtar/blocks/sheet_map.html | 2 | ||||
| -rw-r--r-- | scss/custom.scss | 221 |
4 files changed, 224 insertions, 22 deletions
diff --git a/ishtar_common/static/media/images/ishtar-bg-dark.png b/ishtar_common/static/media/images/ishtar-bg-dark.png Binary files differnew file mode 100644 index 000000000..30cf331da --- /dev/null +++ b/ishtar_common/static/media/images/ishtar-bg-dark.png diff --git a/ishtar_common/static/media/styles.css b/ishtar_common/static/media/styles.css index 20318b9bb..515293653 100644 --- a/ishtar_common/static/media/styles.css +++ b/ishtar_common/static/media/styles.css @@ -202,23 +202,8 @@ table.dataTable thead th, table.dataTable thead td { height: 50px; } -/* à adapter */ -#message, -#message div{ - display: none; -} - -#message { - z-index: 42200; - position: fixed; - top: 5px; - right: 5px; - background: #fff; - padding: 0.5em 1em; - border: 1px solid; - border-radius: 3px; -} - -#message span{ - padding: 0 1em; +@media (prefers-color-scheme: dark) { + html{ + background-image: url('images/ishtar-bg-dark.png'); + } } diff --git a/ishtar_common/templates/ishtar/blocks/sheet_map.html b/ishtar_common/templates/ishtar/blocks/sheet_map.html index 8af6cd294..115d84bab 100644 --- a/ishtar_common/templates/ishtar/blocks/sheet_map.html +++ b/ishtar_common/templates/ishtar/blocks/sheet_map.html @@ -8,7 +8,7 @@ </div> <div class="col-12 col-lg-6 flex-wrap"> <h4>{% trans "Geographic data" %}</h4> - <ul>{% for geodata in geodata_list %} + <ul class="no-bullets">{% for geodata in geodata_list %} <li> {% with coordinates=geodata.display_coordinates_3d %} {% if coordinates.0 != None and coordinates.1 != None%} diff --git a/scss/custom.scss b/scss/custom.scss index 94a55cc98..6c310607e 100644 --- a/scss/custom.scss +++ b/scss/custom.scss @@ -140,8 +140,8 @@ input[type="file"].form-control{ .has-previous-value .form-control, .has-previous-value .btn, .has-previous-value .input-group-text{ - border-bottom-left-radius: 0; - border-bottom-right-radius: 0; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; } .detail-value.form-control { @@ -321,6 +321,12 @@ pre { white-space: nowrap; } +ul.no-bullets { + list-style-type: none; + padding: 0; + margin: 0; +} + ul.table-import-files > li span.btn{ width: 6rem; } @@ -1223,6 +1229,26 @@ ul.simple, border: 1px #999 dashed; } +#message, +#message div{ + display: none; +} + +#message { + z-index: 42200; + position: fixed; + top: 5px; + right: 5px; + background: #fff; + padding: 0.5em 1em; + border: 1px solid; + border-radius: 3px; +} + +#message span{ + padding: 0 1em; +} + /* // required @import "bootstrap-src/scss/functions"; @@ -1236,3 +1262,194 @@ ul.simple, @import "bootstrap-src/scss/code"; @import "bootstrap-src/scss/grid"; */ + + +$dark-theme-white: #eee; +$dark-theme-pure-white: #fff; +$dark-theme-input: #2e3443; +$dark-theme-header: #3f3f3f; +$dark-theme-blue: #79a0e9; +$dark-theme-dark-bg: #171b25; +$dark-theme-dark-hover: #171717; +$dark-theme-dark-hover-alt: #6a6a6a; +$dark-theme-red: #912d2d; + + +@media (prefers-color-scheme: dark) { + html { + background-image: url('images/ishtar-bg-dark.png'); + background-color: $dark-theme-dark-bg; + } + + .ui-menu-item{ /* autocomplete is kept white on focus -> set color to dark */ + color: $gray-700; + } + + body, + input, + pre, + .form-control, + .table, + a:hover, + a.add-button, + a.add-button:visited, + a.btn-success, a.btn-success:visited, + a.btn-secondary, a.btm-secondary:visited, + a.btn-info, a.btm-info:visited + a.page-link, + a.btn, a.btn:visited, + .btn.no-hover, + .close, + .import-row-error a, .import-row-error a:visited, + .breadcrumb-item + .breadcrumb-item::before, + .breadcrumb-item button, + .collapse-form .card-header .btn.btn-link, + .dt-button.disabled, + .dropdown-menu a, .dropdown-menu a:visited, + ul.table-import-files > li span.btn, + #window-fixed-menu a, + #window-fixed-menu a:visited, + #main-container table.dataTable.display tbody > tr.selected a, + #main-container table.dataTable.display tbody > tr.selected a:visited, + #main-container .dataTables_wrapper .dataTables_length, + #main-container .dataTables_wrapper .dataTables_filter, + #main-container .dataTables_wrapper .dataTables_info, + #main-container .dataTables_wrapper .dataTables_processing, + #main-container .dataTables_wrapper .dataTables_paginate{ + color: $dark-theme-white; + } + + a { + color: #6bbbff; + } + + a:visited, + #window-fixed-menu a .fa-circle, + #window-fixed-menu a:visited .fa-circle { + color: #e584f7; + } + + .nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link, + .nav-tabs .nav-link:hover, .nav-tabs .nav-link:hover, + .dropdown-item:hover, .dropdown-item:focus, + .page-link:hover, + .close:hover { + color: $dark-theme-pure-white; + } + + .nav-tabs .nav-link, .nav-tabs .nav-link, + .input-group-text, + #news-feed .date { + color: $gray-500; + } + + .page-link, + .input-group-text, + .btn-outline-secondary, .btn-outline-secondary:hover, + .btn.no-hover, .btn.no-hover:hover, + .form-control:disabled, .form-control[readonly], + .dropdown-item:hover, .dropdown-item:focus, + ul.table-import-files > li span.btn, + ul.table-import-files > li span.btn:hover, + #window-fixed-menu-list li a.nav-link, + #main-container .select2-container--default .select2-selection--multiple .select2-selection__choice, + #main-container table.dataTable.display tbody tr:hover, + #main-container table.dataTable.order-column.hover tbody tr:hover, + #main-container table.dataTable.display tbody tr:hover > .sorting_1, + #main-container table.dataTable.order-column.hover tbody tr:hover > .sorting_1, + #main-container .table-striped tbody tr:nth-of-type(2n+1):hover, + #main-container .dt-bootstrap4 table.dataTable.stripe tbody tr.odd:hover, + #main-container .dt-bootstrap4 table.dataTable.display tbody tr.odd:hover, + #main-container .dt-bootstrap4 table.dataTable.stripe tbody tr.even:hover, + #main-container .dt-bootstrap4 table.dataTable.display tbody tr.even:hover{ + background-color: $dark-theme-dark-hover; + } + + .table, input, + .dt-button.disabled, + #main-container .select2-container--default .select2-selection--multiple, + #main-container .dataTables_wrapper .dataTables_paginate .paginate_button.disabled .page-link, + .page-link:hover, + #main-container table.dataTable thead tr, + #main-container table.dataTable tbody tr, + .modal-content, .form-control, .input-sep, + .card, .dropdown-menu { + background-color: $dark-theme-input; + } + + #message, + .breadcrumb, + .form h4, .form h3, .collapse-form .card-header, #window h3, + #window-fixed-menu, + .page-item.active .page-link, + .nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link, + .modal-header, .modal-footer, .card-header, .input-progress, + #main-container .table-striped tbody tr:nth-of-type(2n+1), + #main-container .table-striped tbody tr:nth-of-type(2n+1):hover, + #main-container .dt-bootstrap4 table.dataTable.stripe tbody tr.odd, + #main-container .dt-bootstrap4 table.dataTable.display tbody tr.odd { + background-color: $dark-theme-header; + } + + .modal-header { + border-color: $dark-theme-header; + } + + #main-container table.dataTable.stripe tbody > tr.even.selected, + #main-container table.dataTable.stripe tbody > tr.even > .selected, + #main-container table.dataTable.display tbody > tr.even.selected, + #main-container table.dataTable.display tbody > tr.even > .selected, + #main-container table.dataTable.stripe tbody > tr.odd.selected, + #main-container table.dataTable.stripe tbody > tr.odd > .selected, + #main-container table.dataTable.display tbody > tr.odd.selected, + #main-container table.dataTable.display tbody > tr.odd > .selected{ + background-color: $dark-theme-dark-hover-alt; + } + + .dt-button, + .page-item.active .page-link, + .nav-tabs .nav-link, .nav-tabs .nav-link, + .nav-tabs .nav-link:hover, .nav-tabs .nav-link:focus, + .page-link, + a.btn, .btn { + border-color: $dark-theme-white; + } + .dt-button.disabled{ + border-color: $gray-600; + } + + .import-row-error, + #main-container .table-striped tbody tr:nth-of-type(2n).import-row-error, + #main-container .table-striped tbody tr:nth-of-type(2n+1).import-row-error { + background-color: $dark-theme-red; + } + + .bg-primary, + #window-fixed-menu-list li a.nav-link.active{ + background-color: $dark-theme-blue !important; + } + + .clean-table h4, .form h4, .form h3, .collapse-form .card-header h4 .btn, + #main-container .sheet h4, #main-container .sheet h3, #main-container .sheet h2 { + text-shadow: none; + } + + #main-container table.dataTable.display tbody tr.odd > .sorting_1, + #main-container table.dataTable.order-column.stripe tbody tr.odd > .sorting_1, + #main-container table.dataTable.display tbody tr.even > .sorting_1, + #main-container table.dataTable.order-column.stripe tbody tr.even > .sorting_1 { + background-color: inherit; + } + + .table-info, .table-info > th, .table-info > td { + background-color: #769499; + } + + /* reinit for map, alerts, select2-options */ + .alert a:hover, + .select2-results__option, + a.btn-success.btn-warning, a.btn-success.btn-warning:visited, + .layer-switcher-base-group { + color: $gray-800; + } +} |
