ui: official OPNsense dark theme, fix some hover and contrast issues

This commit is contained in:
Ad Schellevis 2024-12-09 16:56:18 +01:00
parent 7373985f3b
commit 8b85c0fbda
7 changed files with 155 additions and 39 deletions

1
plist
View File

@ -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

View File

@ -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,

View File

@ -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.

View File

@ -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;
}

View File

@ -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 */

View File

@ -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;
}

View File

@ -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 */