From 8b85c0fbdae56c2012e97f1ac5ab7c4a5610e8ec Mon Sep 17 00:00:00 2001 From: Ad Schellevis Date: Mon, 9 Dec 2024 16:56:18 +0100 Subject: [PATCH] ui: official OPNsense dark theme, fix some hover and contrast issues --- plist | 1 + .../assets/stylesheets/bootstrap-select.scss | 6 - .../stylesheets/bootstrap/_variables.scss | 2 +- .../assets/stylesheets/main.scss | 11 -- .../build/css/bootstrap-select.css | 9 +- .../build/css/jquery.bootgrid.css | 147 ++++++++++++++++++ .../themes/opnsense-dark/build/css/main.css | 18 +-- 7 files changed, 155 insertions(+), 39 deletions(-) create mode 100644 src/opnsense/www/themes/opnsense-dark/build/css/jquery.bootgrid.css diff --git a/plist b/plist index 5ec1bc5be..0b7952d59 100644 --- a/plist +++ b/plist @@ -2184,6 +2184,7 @@ /usr/local/opnsense/www/themes/opnsense-dark/assets/stylesheets/config/colors.scss /usr/local/opnsense/www/themes/opnsense-dark/assets/stylesheets/dashboard.scss /usr/local/opnsense/www/themes/opnsense-dark/assets/stylesheets/dns-overview.scss +/usr/local/opnsense/www/themes/opnsense-dark/assets/stylesheets/jquery.bootgrid.css /usr/local/opnsense/www/themes/opnsense-dark/assets/stylesheets/main.scss /usr/local/opnsense/www/themes/opnsense-dark/build/css/bootstrap-dialog.css /usr/local/opnsense/www/themes/opnsense-dark/build/css/bootstrap-select.css diff --git a/src/opnsense/www/themes/opnsense-dark/assets/stylesheets/bootstrap-select.scss b/src/opnsense/www/themes/opnsense-dark/assets/stylesheets/bootstrap-select.scss index 730794f12..f25d26e18 100644 --- a/src/opnsense/www/themes/opnsense-dark/assets/stylesheets/bootstrap-select.scss +++ b/src/opnsense/www/themes/opnsense-dark/assets/stylesheets/bootstrap-select.scss @@ -62,12 +62,6 @@ select.selectpicker { .bootstrap-select > .dropdown-toggle:after { margin-top: -1px; } -.bootstrap-select > .dropdown-toggle.bs-placeholder, -.bootstrap-select > .dropdown-toggle.bs-placeholder:hover, -.bootstrap-select > .dropdown-toggle.bs-placeholder:focus, -.bootstrap-select > .dropdown-toggle.bs-placeholder:active { - color: #444; -} .bootstrap-select > .dropdown-toggle.bs-placeholder.btn-primary, .bootstrap-select > .dropdown-toggle.bs-placeholder.btn-secondary, .bootstrap-select > .dropdown-toggle.bs-placeholder.btn-success, diff --git a/src/opnsense/www/themes/opnsense-dark/assets/stylesheets/bootstrap/_variables.scss b/src/opnsense/www/themes/opnsense-dark/assets/stylesheets/bootstrap/_variables.scss index a67c1fa4a..ad1dd7e0c 100644 --- a/src/opnsense/www/themes/opnsense-dark/assets/stylesheets/bootstrap/_variables.scss +++ b/src/opnsense/www/themes/opnsense-dark/assets/stylesheets/bootstrap/_variables.scss @@ -135,7 +135,7 @@ $table-bg: transparent !default; //** Background color used for `.table-striped`. $table-bg-accent: map-get($colors, table-bg-accent) !default; //** Background color used for `.table-hover`. -$table-bg-hover: #C1C1c1 !default; +$table-bg-hover: #c1c1c17a !default; $table-bg-active: $table-bg-hover !default; //** Border color for table and cell borders. diff --git a/src/opnsense/www/themes/opnsense-dark/assets/stylesheets/main.scss b/src/opnsense/www/themes/opnsense-dark/assets/stylesheets/main.scss index 10eac2ba2..1f45bd53a 100644 --- a/src/opnsense/www/themes/opnsense-dark/assets/stylesheets/main.scss +++ b/src/opnsense/www/themes/opnsense-dark/assets/stylesheets/main.scss @@ -831,14 +831,3 @@ ul.jqtree-tree .jqtree-title { } -.bootgrid-header .actionBar .btn-group > .btn-group .dropdown-menu .dropdown-item:hover, -.bootgrid-footer .infoBar .btn-group > .btn-group .dropdown-menu .dropdown-item:hover, -.bootgrid-header .actionBar .btn-group > .btn-group .dropdown-menu .dropdown-item:focus, -.bootgrid-footer .infoBar .btn-group > .btn-group .dropdown-menu .dropdown-item:focus { - background-color: map-get($colors, content-background) !important; -} - -.bootgrid-table td.loading, -.bootgrid-table td.no-results { - background: map-get($colors, content-background) !important; -} diff --git a/src/opnsense/www/themes/opnsense-dark/build/css/bootstrap-select.css b/src/opnsense/www/themes/opnsense-dark/build/css/bootstrap-select.css index 31b514fbe..99a677619 100644 --- a/src/opnsense/www/themes/opnsense-dark/build/css/bootstrap-select.css +++ b/src/opnsense/www/themes/opnsense-dark/build/css/bootstrap-select.css @@ -64,13 +64,6 @@ select.selectpicker { margin-top: -1px; } -.bootstrap-select > .dropdown-toggle.bs-placeholder, -.bootstrap-select > .dropdown-toggle.bs-placeholder:hover, -.bootstrap-select > .dropdown-toggle.bs-placeholder:focus, -.bootstrap-select > .dropdown-toggle.bs-placeholder:active { - color: #444; -} - .bootstrap-select > .dropdown-toggle.bs-placeholder.btn-primary, .bootstrap-select > .dropdown-toggle.bs-placeholder.btn-secondary, .bootstrap-select > .dropdown-toggle.bs-placeholder.btn-success, @@ -531,3 +524,5 @@ select.selectpicker { width: 100%; float: none; } + +/*# sourceMappingURL=bootstrap-select.css.map */ diff --git a/src/opnsense/www/themes/opnsense-dark/build/css/jquery.bootgrid.css b/src/opnsense/www/themes/opnsense-dark/build/css/jquery.bootgrid.css new file mode 100644 index 000000000..c91be915e --- /dev/null +++ b/src/opnsense/www/themes/opnsense-dark/build/css/jquery.bootgrid.css @@ -0,0 +1,147 @@ +/*! + * jQuery Bootgrid v1.3.1 - 09/11/2015 + * Copyright (c) 2014-2015 Rafael Staib (http://www.jquery-bootgrid.com) + * Licensed under MIT http://www.opensource.org/licenses/MIT + */ +.bootgrid-header, +.bootgrid-footer { + margin: 15px 0; +} +.bootgrid-header a, +.bootgrid-footer a { + outline: 0; +} +.bootgrid-header .search, +.bootgrid-footer .search { + display: inline-block; + margin: 0 20px 0 0; + vertical-align: middle; + width: 180px; +} +.bootgrid-header .search .fa-solid, +.bootgrid-footer .search .fa-solid { + top: 0; +} +.bootgrid-header .search .fa, +.bootgrid-header .search .fa-solid, +.bootgrid-footer .search .fa, +.bootgrid-footer .search .fa-solid { + display: table-cell; +} +.bootgrid-header .search.search-field::-ms-clear, +.bootgrid-footer .search.search-field::-ms-clear, +.bootgrid-header .search .search-field::-ms-clear, +.bootgrid-footer .search .search-field::-ms-clear { + display: none; +} +.bootgrid-header .pagination, +.bootgrid-footer .pagination { + margin: 0 !important; +} +.bootgrid-header .actionBar, +.bootgrid-footer .infoBar { + text-align: right; +} +.bootgrid-header .actionBar .btn-group > .btn-group .dropdown-menu, +.bootgrid-footer .infoBar .btn-group > .btn-group .dropdown-menu { + text-align: left; +} +.bootgrid-header .actionBar .btn-group > .btn-group .dropdown-menu .dropdown-item, +.bootgrid-footer .infoBar .btn-group > .btn-group .dropdown-menu .dropdown-item { + cursor: pointer; + display: block; + margin: 0; + padding: 3px 20px; + white-space: nowrap; +} +.bootgrid-header .actionBar .btn-group > .btn-group .dropdown-menu .dropdown-item:hover, +.bootgrid-footer .infoBar .btn-group > .btn-group .dropdown-menu .dropdown-item:hover, +.bootgrid-header .actionBar .btn-group > .btn-group .dropdown-menu .dropdown-item:focus, +.bootgrid-footer .infoBar .btn-group > .btn-group .dropdown-menu .dropdown-item:focus { + text-decoration: none; + +} +.bootgrid-header .actionBar .btn-group > .btn-group .dropdown-menu .dropdown-item.dropdown-item-checkbox, +.bootgrid-footer .infoBar .btn-group > .btn-group .dropdown-menu .dropdown-item.dropdown-item-checkbox, +.bootgrid-header .actionBar .btn-group > .btn-group .dropdown-menu .dropdown-item .dropdown-item-checkbox, +.bootgrid-footer .infoBar .btn-group > .btn-group .dropdown-menu .dropdown-item .dropdown-item-checkbox { + margin: 0 2px 4px 0; + vertical-align: middle; +} +.bootgrid-header .actionBar .btn-group > .btn-group .dropdown-menu .dropdown-item.disabled, +.bootgrid-footer .infoBar .btn-group > .btn-group .dropdown-menu .dropdown-item.disabled { + cursor: not-allowed; +} +.bootgrid-table { + table-layout: fixed; +} +.bootgrid-table a { + outline: 0; +} +.bootgrid-table th > .column-header-anchor { + color: #333; + cursor: not-allowed; + display: block; + position: relative; + text-decoration: none; +} +.bootgrid-table th > .column-header-anchor.sortable { + cursor: pointer; +} +.bootgrid-table th > .column-header-anchor > .text { + display: block; + margin: 0 16px 0 0; + overflow: hidden; + -ms-text-overflow: ellipsis; + -o-text-overflow: ellipsis; + text-overflow: ellipsis; + white-space: nowrap; +} +.bootgrid-table th > .column-header-anchor > .icon { + display: block; + position: absolute; + right: 0; + top: 2px; +} +.bootgrid-table th:hover, +.bootgrid-table th:active { + text-decoration: underline; +} +.bootgrid-table td { + overflow: hidden; + -ms-text-overflow: ellipsis; + -o-text-overflow: ellipsis; + text-overflow: ellipsis; + white-space: nowrap; +} +.bootgrid-table td.loading, +.bootgrid-table td.no-results { + text-align: center; +} +.bootgrid-table th.select-cell, +.bootgrid-table td.select-cell { + text-align: center; + width: 30px; +} +.bootgrid-table th.select-cell .select-box, +.bootgrid-table td.select-cell .select-box { + margin: 0; + outline: 0; +} +.table-responsive .bootgrid-table { + table-layout: inherit !important; +} +.table-responsive .bootgrid-table th > .column-header-anchor > .text { + overflow: inherit !important; + -ms-text-overflow: inherit !important; + -o-text-overflow: inherit !important; + text-overflow: inherit !important; + white-space: inherit !important; +} +.table-responsive .bootgrid-table td { + overflow: inherit !important; + -ms-text-overflow: inherit !important; + -o-text-overflow: inherit !important; + text-overflow: inherit !important; + white-space: inherit !important; +} diff --git a/src/opnsense/www/themes/opnsense-dark/build/css/main.css b/src/opnsense/www/themes/opnsense-dark/build/css/main.css index 9d2dfd7f0..375bdbca6 100644 --- a/src/opnsense/www/themes/opnsense-dark/build/css/main.css +++ b/src/opnsense/www/themes/opnsense-dark/build/css/main.css @@ -2493,7 +2493,7 @@ th { .table-hover > tbody > tr:hover > td, .table-hover > tbody > tr:hover > th { - background-color: #C1C1c1; + background-color: rgba(193, 193, 193, 0.4784313725); } table col[class*=col-] { @@ -2519,12 +2519,12 @@ table th[class*=col-] { .table > tfoot > tr > th.active, .table > tfoot > tr.active > td, .table > tfoot > tr.active > th { - background-color: #C1C1c1; + background-color: rgba(193, 193, 193, 0.4784313725); } .table-hover > tbody > tr > td.active:hover, .table-hover > tbody > tr > th.active:hover, .table-hover > tbody > tr.active:hover > td, .table-hover > tbody > tr:hover > .active, .table-hover > tbody > tr.active:hover > th { - background-color: #b4b4b4; + background-color: rgba(180, 180, 180, 0.4784313725); } .table > thead > tr > td.success, @@ -7374,14 +7374,4 @@ ul.jqtree-tree .jqtree-title { color: #fff !important; } -.bootgrid-header .actionBar .btn-group > .btn-group .dropdown-menu .dropdown-item:hover, -.bootgrid-footer .infoBar .btn-group > .btn-group .dropdown-menu .dropdown-item:hover, -.bootgrid-header .actionBar .btn-group > .btn-group .dropdown-menu .dropdown-item:focus, -.bootgrid-footer .infoBar .btn-group > .btn-group .dropdown-menu .dropdown-item:focus { - background-color: #1a1d27 !important; -} - -.bootgrid-table td.loading, -.bootgrid-table td.no-results { - background: #1a1d27 !important; -} +/*# sourceMappingURL=main.css.map */