diff --git a/misc/theme-advanced/Makefile b/misc/theme-advanced/Makefile index 2c4c80b3b..ae1b63528 100644 --- a/misc/theme-advanced/Makefile +++ b/misc/theme-advanced/Makefile @@ -1,9 +1,8 @@ PLUGIN_NAME= theme-advanced -PLUGIN_VERSION= 1.0 -PLUGIN_REVISION= 3 +PLUGIN_VERSION= 1.1 PLUGIN_COMMENT= OPNsense theme based on AdvancedTomato GUI PLUGIN_MAINTAINER= jacky@prahec.com -PLUGIN_WWW= https://prahec.com/ +PLUGIN_WWW= https://prahec.com/ PLUGIN_NO_ABI= yes .include "../../Mk/plugins.mk" diff --git a/misc/theme-advanced/src/opnsense/www/themes/advanced/assets/stylesheets/bootstrap-select/less/variables.less b/misc/theme-advanced/src/opnsense/www/themes/advanced/assets/stylesheets/bootstrap-select/less/variables.less index 97a510c23..19e94a8df 100644 --- a/misc/theme-advanced/src/opnsense/www/themes/advanced/assets/stylesheets/bootstrap-select/less/variables.less +++ b/misc/theme-advanced/src/opnsense/www/themes/advanced/assets/stylesheets/bootstrap-select/less/variables.less @@ -4,4 +4,4 @@ @width-default: 348px; // 3 960px-grid columns -@zindex-select-dropdown: 1035; // must be lower than a modal background (1040) but higher than the fixed navbar (1030) +@zindex-select-dropdown: 1035; // must be lower than a modal background (1040) but higher than the fixed navbar (1030) \ No newline at end of file diff --git a/misc/theme-advanced/src/opnsense/www/themes/advanced/assets/stylesheets/bootstrap-select/sass/bootstrap-select.scss b/misc/theme-advanced/src/opnsense/www/themes/advanced/assets/stylesheets/bootstrap-select/sass/bootstrap-select.scss index 32b852e26..ce955acc9 100644 --- a/misc/theme-advanced/src/opnsense/www/themes/advanced/assets/stylesheets/bootstrap-select/sass/bootstrap-select.scss +++ b/misc/theme-advanced/src/opnsense/www/themes/advanced/assets/stylesheets/bootstrap-select/sass/bootstrap-select.scss @@ -516,4 +516,4 @@ select.selectpicker { width: 100%; float: none; } -} +} \ No newline at end of file diff --git a/misc/theme-advanced/src/opnsense/www/themes/advanced/assets/stylesheets/bootstrap-select/sass/variables.scss b/misc/theme-advanced/src/opnsense/www/themes/advanced/assets/stylesheets/bootstrap-select/sass/variables.scss index 6e9c8af26..555ef10fc 100644 --- a/misc/theme-advanced/src/opnsense/www/themes/advanced/assets/stylesheets/bootstrap-select/sass/variables.scss +++ b/misc/theme-advanced/src/opnsense/www/themes/advanced/assets/stylesheets/bootstrap-select/sass/variables.scss @@ -14,4 +14,4 @@ $input-padding-y-sm: .25rem !default; $input-padding-x-sm: .5rem !default; $input-padding-y-lg: 0.5rem !default; -$input-padding-x-lg: 1rem !default; +$input-padding-x-lg: 1rem !default; \ No newline at end of file diff --git a/misc/theme-advanced/src/opnsense/www/themes/advanced/assets/stylesheets/bootstrap/_tables.scss b/misc/theme-advanced/src/opnsense/www/themes/advanced/assets/stylesheets/bootstrap/_tables.scss index 2e5f9a51d..1cdca5cfd 100644 --- a/misc/theme-advanced/src/opnsense/www/themes/advanced/assets/stylesheets/bootstrap/_tables.scss +++ b/misc/theme-advanced/src/opnsense/www/themes/advanced/assets/stylesheets/bootstrap/_tables.scss @@ -13,7 +13,6 @@ th { // Baseline styles - .table { width: 100%; max-width: 100%; @@ -233,4 +232,4 @@ table { } } -} +} \ No newline at end of file diff --git a/misc/theme-advanced/src/opnsense/www/themes/advanced/assets/stylesheets/dashboard.scss b/misc/theme-advanced/src/opnsense/www/themes/advanced/assets/stylesheets/dashboard.scss index 7a7d96579..d3b2a4313 100644 --- a/misc/theme-advanced/src/opnsense/www/themes/advanced/assets/stylesheets/dashboard.scss +++ b/misc/theme-advanced/src/opnsense/www/themes/advanced/assets/stylesheets/dashboard.scss @@ -128,20 +128,11 @@ td { word-break: break-all; } -.canvas-container-noaspectratio { - position: relative; -} .canvas-container { position: relative; } -.canvas-container > canvas { - /* ChartJS v4 workaround: https://github.com/chartjs/Chart.js/issues/11005 */ - width: 100% !important; - height: 100% !important; -} - .cpu-canvas-container { display: flex; flex-direction: column; @@ -356,4 +347,4 @@ div { display: flex; align-items: center; justify-content: center; -} +} \ No newline at end of file diff --git a/misc/theme-advanced/src/opnsense/www/themes/advanced/assets/stylesheets/main.scss b/misc/theme-advanced/src/opnsense/www/themes/advanced/assets/stylesheets/main.scss index 3dd6c75aa..06813493c 100644 --- a/misc/theme-advanced/src/opnsense/www/themes/advanced/assets/stylesheets/main.scss +++ b/misc/theme-advanced/src/opnsense/www/themes/advanced/assets/stylesheets/main.scss @@ -1284,4 +1284,4 @@ table#tunable.bootgrid-table td { #grid-log th[data-column-id="__timestamp__"], #filter-log-entries th[data-column-id="__timestamp__"] { min-width: 3.5em; -} +} \ No newline at end of file diff --git a/misc/theme-advanced/src/opnsense/www/themes/advanced/assets/stylesheets/opnsense-bootgrid.scss b/misc/theme-advanced/src/opnsense/www/themes/advanced/assets/stylesheets/opnsense-bootgrid.scss new file mode 100644 index 000000000..1fc6fac88 --- /dev/null +++ b/misc/theme-advanced/src/opnsense/www/themes/advanced/assets/stylesheets/opnsense-bootgrid.scss @@ -0,0 +1,488 @@ +$colors: ( + default: #536270, + primary: #51aded, + navbg: #263238, + lightgrey: #f7f7f7, + lightergrey: #fbfbfb, + darkgrey: #3c3c3b, + bordergrey: #eaeaea, +); + +@import "bootstrap/variables"; + +/** +* Customized +*/ +@mixin button-variant($color, $background, $border) { + color: $color; + background-color: $background; + border-color: $border; + + &:hover, + &:focus, + &:active, + &.active, + .open > &.dropdown-toggle, + :not(disabled):hover { + color: $color !important; + background-color: darken($background, 10%) !important; + border-color: darken($border, 12%) !important; + } + &:active, + &.active, + .open > &.dropdown-toggle { + background-image: none; + } + &.disabled, + &[disabled], + fieldset[disabled] & { + &, + &:hover, + &:focus, + &:active, + &.active { + background-color: $background; + border-color: $border; + } + } + + .badge { + color: $background; + background-color: $color; + } +} + +// Button sizes +@mixin button-size($padding-vertical, $padding-horizontal, $font-size, $line-height, $border-radius) { + padding: $padding-vertical $padding-horizontal; + font-size: $font-size; + line-height: $line-height; + border-radius: $border-radius; +} + + +/** +* Main theming elements +*/ +.tabulator .tabulator-header .tabulator-col.tabulator-sortable.tabulator-col-sorter-element:hover { + background-color: #FBFBFB; +} + +.tabulator .tabulator-headers { + height: 100% !important; /* make sure the border below appears */ +} + +/*------------*/ +/* theme: body */ +.tabulator .tabulator-tableholder .tabulator-table { + background-color: transparent; +} + +.tabulator-row { + background-color: transparent; + color: #373736; +} + +.tabulator-row.tabulator-row-odd { + background-color: #FBFBFB; +} + +.tabulator-row.tabulator-row-odd.tabulator-selectable:hover:not(.tabulator-selected) { + background-color: $table-bg-hover; +} + +.tabulator-row.tabulator-row-even.tabulator-selectable:hover:not(.tabulator-selected) { + background-color: $table-bg-hover; +} + +.tabulator .tabulator-tableholder { + background-color: transparent; +} + +.tabulator-row.tabulator-selected { + background-color: #e3e8f0; +} + +.tabulator-row.tabulator-selected:hover { + cursor: pointer; + background-color: #e3e8f0; +} + +.tabulator .tabulator-alert .tabulator-alert-msg.tabulator-alert-state-msg { + color: #373736; /* spinner icon */ +} + +/* Command column styles */ +.tabulator-col.tabulator-frozen.tabulator-frozen-right { +} + +.tabulator-row .tabulator-cell.tabulator-frozen.tabulator-frozen-right { +} + +/* Tabulator groupBy row styles */ +.tabulator-row.tabulator-group { + border: none; + pointer-events: none; +} + +.tabulator-row.tabulator-group span { + margin-left: 0; + color: #373736; +} + +.tabulator-row .badge.chip { + background-color: #31708f; + color: #FFF; + font-size: 10px; + padding: 2px 4px; + position: relative; + top: -1px; +} + +.tabulator-row.tabulator-group .tabulator-group-toggle, +.tabulator-row.tabulator-group .tabulator-group-toggle * { + pointer-events: auto; +} + +.tabulator-row.tabulator-group:has(> .tabulator-group-toggle:only-child) { + display: none; /* Trick to hide empty groupBy header rows */ +} + +/*------------*/ +/* theme: cells */ +.tabulator-row .tabulator-cell { + text-overflow: ellipsis; + white-space: nowrap; + line-height: 1.2; + vertical-align: top; +} + +/*-------------*/ +/* theme: footer */ +.tabulator .tabulator-footer { + border-top: none; + background-color: transparent; +} + +.tabulator-page-counter { + color: #373736; +} + +.tabulator .tabulator-footer .tabulator-paginator { + color: #373736; +} + +.tabulator .tabulator-footer .tabulator-page { + +} + +/*----------*/ +/* end of main theming elements */ +.tabulator-paginator { + flex: 0 !important; +} + +.tabulator-page-counter { + flex: 1; + text-align: right; +} + +.tabulator-col-sorter i { + display: flex; + justify-content: center; + align-items: center; +} + +.tabulator .tabulator-header .tabulator-col { + padding: 5px; +} + +.tabulator .tabulator-headers > :first-child { + padding-left: 10px; +} + +.opnsense-bootgrid-responsive { + white-space: wrap !important; + text-overflow: inherit !important; + overflow: visible !important; + word-break: break-word !important; +} + +.opnsense-bootgrid-ellipsis { + overflow: hidden !important; + white-space: nowrap !important; + text-overflow: ellipsis !important; +} + +.tabulator-row > :first-child { + padding-left: 10px; +} + +.tabulator .tabulator-header .tabulator-col .tabulator-col-content { + padding: 0px; +} + +.tabulator-page-counter { + padding-right: 20px; +} + +.bootgrid-footer-commands { + width: 90px; + padding-left: 8px; +} + +.tabulator-tableholder::after { + content: ""; + display: block; + width: 1px; + height: 1px; + min-width: 100%; +} + +.tabulator .tabulator-footer .tabulator-paginator .tabulator-page:first-child { + border-bottom-left-radius: 3px; + border-top-left-radius: 3px; +} + +.tabulator .tabulator-footer .tabulator-paginator .tabulator-page:last-child { + border-bottom-right-radius: 3px; + border-top-right-radius: 3px; +} + +/* border line corrections and hover/selection behavior */ +.tabulator-row:first-child > .tabulator-cell { + border-top: none; +} + +.tabulator .tabulator-header .tabulator-col.tabulator-sortable .tabulator-col-title { + padding: 0px; +} + +/* Row highlight behavior */ +@keyframes highlight { + 0% { + background: #ffff99; + } + 100% { + background: none; + } +} + +.highlight-bg { + animation: highlight 2s; +} + +/* Tabulator "loading" and "error" overrides */ +.tabulator .tabulator-alert { + background: none; +} + +.tabulator .tabulator-alert .tabulator-alert-msg.tabulator-alert-state-msg { + border: none; +} + +.tabulator .tabulator-alert .tabulator-alert-msg { + background: initial; + font-size: 18px; +} + +.tabulator .tabulator-alert .tabulator-alert-msg.tabulator-alert-state-error { + border: none; +} + +.bootgrid-placeholder { + font-size: 15px; + text-align: center; + white-space: normal; + font-weight: 400; + margin: 10px; +} + +.bootgrid-overlay { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: rgba(255, 255, 255, 0.5); + display: flex; + justify-content: center; + align-items: center; + z-index: 99; +} + +.overlay > i { + font-size: 20px; + color: black; +} + +/** +* Main theming elements for tabulator +/* Base */ +.tabulator { + width: 100%; + font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; + font-size: 13px; + background: #fff; + border: 1px solid $table-border-color; /* .table-bordered */ + border-radius: 0; +} + +/* Header */ +.tabulator .tabulator-header { + background: #fff; + border-bottom: 1px solid $table-border-color; /* thead bottom border */ + border-top: 0; + border-left: 0; + border-right: 0; +} + +.tabulator .tabulator-header .tabulator-col { + background: transparent; + color: #333; + border-right: 1px solid $table-border-color; /* col separators */ +} + +.tabulator .tabulator-header .tabulator-col:last-child { + border-right: 0; +} + +/* Header cell inner (align/padding like Bootstrap) */ +.tabulator .tabulator-header .tabulator-col .tabulator-col-content { + padding: 10px 0 10px 20px; /* th padding */ + line-height: 1.428571429; +} + +/* Sort hover (subtle) */ +.tabulator .tabulator-header .tabulator-col.tabulator-sortable:hover { + background: #f5f5f5; +} + + +/* Body */ +.tabulator .tabulator-tableholder { + background: #fff; +} + +.tabulator-row { + background: #fff; + color: #333; + border-top: 1px solid $table-border-color; /* row top border like Bootstrap */ +} + +/* Cells */ +.tabulator-row .tabulator-cell { + padding: 10px 0 10px 20px; /* td padding */ + line-height: 1.428571429; + vertical-align: top; + border-right: 1px solid $table-border-color; /* col separators */ + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; +} + +.tabulator-row .tabulator-cell.tabulator-frozen.tabulator-frozen-left, +.tabulator .tabulator-header .tabulator-frozen.tabulator-frozen-left, +.tabulator-row .tabulator-cell.tabulator-frozen.tabulator-frozen-left, +.tabulator .tabulator-header .tabulator-frozen.tabulator-frozen-left, +.tabulator-row .tabulator-cell.tabulator-frozen.tabulator-frozen-right, +.tabulator .tabulator-header .tabulator-frozen.tabulator-frozen-right { + border-color: $table-border-color; + border-width: 1px; +} + +.tabulator-row .tabulator-cell:last-child { + border-right: 0; +} + +.tabulator-header { + .tabulator-row-header input, + .tabulator-cell input { + margin-left: -24px; + } +} + +.tabulator-table { + .tabulator-row-header input, + .tabulator-cell input { + margin-left: -18px; + } +} + +/* Striped (.table-striped) */ +.tabulator.tabulator-striped .tabulator-row:nth-child(odd) { + background: #fbfbfb; +} + +/* Hover (.table-hover) */ +.tabulator.tabulator-hover .tabulator-row:hover { + background: $table-bg-hover !important; +} + +/* Active state (matches .active bg) */ +.tabulator-row.tabulator-selected { + background: $table-bg-hover !important; +} + +.tabulator-row.tabulator-selected:hover { + background: $table-bg-hover !important; +} + +/* Footer (pagination) */ +.tabulator .tabulator-footer { + background: #fff; + border-top: 1px solid $table-border-color; + color: #555; +} + +.tabulator .tabulator-footer .tabulator-page { + border: 1px solid $table-border-color; + background: #fff; + color: #333; + border-radius: 0; + margin: 0; + padding: 6px 12px; /* Bootstrap-like pager */ + + @include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border); +} + +@media (hover: hover) and (pointer: fine) { + .tabulator .tabulator-footer .tabulator-page:not(disabled):hover { + } +} + +.tabulator-row.tabulator-row-even { + background-color: $table-bg +} + +.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-title { + overflow: visible; +} + + +.tabulator-row.tabulator-selected { + background-color: #9abcea +} + +.tabulator .tabulator-alert { + align-items: center; + background: rgba(#fff, .5); + display: flex; + height: 100%; + left: 0; + position: absolute; + text-align: center; + top: 0; + width: 100%; + z-index: 100; +} + +/** + * jQuery Bootstrap Grid + */ +.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 8px 4px -8px !important; +} \ No newline at end of file diff --git a/misc/theme-advanced/src/opnsense/www/themes/advanced/build/css/dashboard.css b/misc/theme-advanced/src/opnsense/www/themes/advanced/build/css/dashboard.css index 947ca2075..6b67121b1 100644 --- a/misc/theme-advanced/src/opnsense/www/themes/advanced/build/css/dashboard.css +++ b/misc/theme-advanced/src/opnsense/www/themes/advanced/build/css/dashboard.css @@ -1 +1 @@ -:root{--chart-js-background-color: #f7e2d6;--chart-js-border-color: #f6f6f6;--chart-js-font-color: #4b4b64}.btn-pressed,.btn-pressed:hover{color:#fff;background-color:#0086d9}#save-grid{position:relative;display:inline-flex;align-items:center;justify-content:center;width:50px;height:33px;margin-right:10px;transition:opacity .3s ease}#save-btn-text,#icon-container{position:absolute}#icon-container{display:inline-flex;align-items:center;justify-content:center}#save-spinner,#save-check{transition:opacity .3s ease,transform .3s ease}.transition-spinner,transition-check{transition:opacity .3s ease,transform .3s ease}.grid-stack-item-content{text-align:center;border:none !important;border-radius:.5em .5em .5em .5em;background-color:#fff;box-shadow:0 2px 4px rgba(40,40,50,.15),0 0 1px rgba(40,40,50,.35)}.widget-error{margin:50px;color:#721c24}.widget-content{position:relative;width:100%;height:100%;padding:1px;cursor:grab}.widget-header{font-size:14px;display:flex;align-items:center;justify-content:space-between;margin-top:.5em;margin-right:1em;margin-left:1em}.widget-spinner{margin-top:20px}.fa-stack.small{font-size:.5em}.close-handle,.edit-handle{padding:.2rem .5rem;cursor:pointer;text-align:right;vertical-align:middle}.close-handle>i,.edit-handle>i{font-size:1.2rem !important}.widget-header-left{display:flex;align-items:center;flex:1;justify-content:flex-start}.widget-command-container{display:flex;align-items:center;flex:1;justify-content:flex-end}.widget-title{display:flex;align-items:center;justify-content:center}.panel-divider{width:100%;height:8px;margin-bottom:10px;text-align:center}.panel-divider .line{display:none}td{word-break:break-all}.canvas-container-noaspectratio{position:relative}.canvas-container{position:relative}.canvas-container>canvas{width:100% !important;height:100% !important}.cpu-canvas-container{display:flex;flex-direction:column}.smoothie-container{width:100%}.smoothie-chart-tooltip{font-size:13px;z-index:1;padding-right:15px;padding-left:15px;pointer-events:none;color:#fff;border-radius:.5em .5em .5em .5em;background:rgba(50,50,50,.9)}.flex-container{display:flex;flex-wrap:nowrap;white-space:nowrap}.gateway-info{font-size:13px;margin:5px;padding:5px}.gateway-detail-container{display:none;margin:5px}.interface-info{display:flex;align-items:center;flex-wrap:wrap;height:100%}.nowrap{flex-wrap:nowrap}.gateway-graph{display:none}.flex-container>.gateway-graph{font-size:13px}.vertical-center-row{display:inline;height:100%}.interfaces-info{font-size:.8rem;margin:5px}.interface-descr{font-size:1em;margin-left:.8em;cursor:pointer;text-decoration:underline}.interfaces-detail-container{display:none;margin:5px}.d-flex{display:flex}.d-flex>.justify-content-start{justify-content:start}.d-flex>.justify-content-end{justify-content:end}#chartjs-toolip{z-index:20}.cpu-type{margin-top:10px;margin-bottom:10px}div{box-sizing:border-box}.flextable-container{display:block;width:95%;max-width:1200px;margin:2em auto}.flextable-header{display:flex;flex-flow:row wrap;padding:.5em .5em;transition:.5s;border-top:solid 1px rgba(0,119,217,.15) !important}.flextable-row{display:flex;align-items:center;flex-flow:row wrap;padding:.5em .5em;transition:.5s;border-top:solid 1px #e8eaef !important}.flextable-header .flex-cell{font-weight:bold}.flextable-row:hover{transition:500ms;background:#f5f5f5}.flex-cell{padding:4px 0;text-align:left;word-break:break-word}.column{display:flex;flex-flow:column wrap;width:50%;padding:0}.column .flex-cell{display:flex;flex-flow:row wrap;width:100%;padding:4px 0;border:0;border-top:#e8eaef}.column .flex-cell:hover{transition:500ms;background:#f5f5f5}.flex-subcell{width:100%;text-align:left}.column .flex-cell:not(:last-child){border-bottom:solid 1px #e8eaef !important}.grid-header-container{display:grid;grid-template-columns:repeat(auto-fit, minmax(100px, 1fr))}.grid-row{display:grid;transition:.5s;opacity:.4;border-top:1px solid #eff3f8;background-color:#d6e5f7;grid-template-columns:repeat(auto-fit, minmax(100px, 1fr))}.grid-row:hover{transition:500ms;background:#f5f5f5 !important}.grid-header{font-weight:bold;border-top:1px solid #eff3f8}.grid-item{padding:4px;text-align:center}.ovpn-common-name{display:flex;align-items:center;justify-content:center}/*# sourceMappingURL=dashboard.css.map */ +:root{--chart-js-background-color: #f7e2d6;--chart-js-border-color: #f6f6f6;--chart-js-font-color: #4b4b64}.btn-pressed,.btn-pressed:hover{color:#fff;background-color:#0086d9}#save-grid{position:relative;display:inline-flex;align-items:center;justify-content:center;width:50px;height:33px;margin-right:10px;transition:opacity .3s ease}#save-btn-text,#icon-container{position:absolute}#icon-container{display:inline-flex;align-items:center;justify-content:center}#save-spinner,#save-check{transition:opacity .3s ease,transform .3s ease}.transition-spinner,transition-check{transition:opacity .3s ease,transform .3s ease}.grid-stack-item-content{text-align:center;border:none !important;border-radius:.5em .5em .5em .5em;background-color:#fff;box-shadow:0 2px 4px rgba(40,40,50,.15),0 0 1px rgba(40,40,50,.35)}.widget-error{margin:50px;color:#721c24}.widget-content{position:relative;width:100%;height:100%;padding:1px;cursor:grab}.widget-header{font-size:14px;display:flex;align-items:center;justify-content:space-between;margin-top:.5em;margin-right:1em;margin-left:1em}.widget-spinner{margin-top:20px}.fa-stack.small{font-size:.5em}.close-handle,.edit-handle{padding:.2rem .5rem;cursor:pointer;text-align:right;vertical-align:middle}.close-handle>i,.edit-handle>i{font-size:1.2rem !important}.widget-header-left{display:flex;align-items:center;flex:1;justify-content:flex-start}.widget-command-container{display:flex;align-items:center;flex:1;justify-content:flex-end}.widget-title{display:flex;align-items:center;justify-content:center}.panel-divider{width:100%;height:8px;margin-bottom:10px;text-align:center}.panel-divider .line{display:none}td{word-break:break-all}.canvas-container{position:relative}.cpu-canvas-container{display:flex;flex-direction:column}.smoothie-container{width:100%}.smoothie-chart-tooltip{font-size:13px;z-index:1;padding-right:15px;padding-left:15px;pointer-events:none;color:#fff;border-radius:.5em .5em .5em .5em;background:rgba(50,50,50,.9)}.flex-container{display:flex;flex-wrap:nowrap;white-space:nowrap}.gateway-info{font-size:13px;margin:5px;padding:5px}.gateway-detail-container{display:none;margin:5px}.interface-info{display:flex;align-items:center;flex-wrap:wrap;height:100%}.nowrap{flex-wrap:nowrap}.gateway-graph{display:none}.flex-container>.gateway-graph{font-size:13px}.vertical-center-row{display:inline;height:100%}.interfaces-info{font-size:.8rem;margin:5px}.interface-descr{font-size:1em;margin-left:.8em;cursor:pointer;text-decoration:underline}.interfaces-detail-container{display:none;margin:5px}.d-flex{display:flex}.d-flex>.justify-content-start{justify-content:start}.d-flex>.justify-content-end{justify-content:end}#chartjs-toolip{z-index:20}.cpu-type{margin-top:10px;margin-bottom:10px}div{box-sizing:border-box}.flextable-container{display:block;width:95%;max-width:1200px;margin:2em auto}.flextable-header{display:flex;flex-flow:row wrap;padding:.5em .5em;transition:.5s;border-top:solid 1px rgba(0,119,217,.15) !important}.flextable-row{display:flex;align-items:center;flex-flow:row wrap;padding:.5em .5em;transition:.5s;border-top:solid 1px #e8eaef !important}.flextable-header .flex-cell{font-weight:bold}.flextable-row:hover{transition:500ms;background:#f5f5f5}.flex-cell{padding:4px 0;text-align:left;word-break:break-word}.column{display:flex;flex-flow:column wrap;width:50%;padding:0}.column .flex-cell{display:flex;flex-flow:row wrap;width:100%;padding:4px 0;border:0;border-top:#e8eaef}.column .flex-cell:hover{transition:500ms;background:#f5f5f5}.flex-subcell{width:100%;text-align:left}.column .flex-cell:not(:last-child){border-bottom:solid 1px #e8eaef !important}.grid-header-container{display:grid;grid-template-columns:repeat(auto-fit, minmax(100px, 1fr))}.grid-row{display:grid;transition:.5s;opacity:.4;border-top:1px solid #eff3f8;background-color:#d6e5f7;grid-template-columns:repeat(auto-fit, minmax(100px, 1fr))}.grid-row:hover{transition:500ms;background:#f5f5f5 !important}.grid-header{font-weight:bold;border-top:1px solid #eff3f8}.grid-item{padding:4px;text-align:center}.ovpn-common-name{display:flex;align-items:center;justify-content:center}/*# sourceMappingURL=dashboard.css.map */ diff --git a/misc/theme-advanced/src/opnsense/www/themes/advanced/build/css/opnsense-bootgrid.css b/misc/theme-advanced/src/opnsense/www/themes/advanced/build/css/opnsense-bootgrid.css new file mode 100644 index 000000000..4d353b768 --- /dev/null +++ b/misc/theme-advanced/src/opnsense/www/themes/advanced/build/css/opnsense-bootgrid.css @@ -0,0 +1 @@ +.tabulator .tabulator-header .tabulator-col.tabulator-sortable.tabulator-col-sorter-element:hover{background-color:#fbfbfb}.tabulator .tabulator-headers{height:100% !important}.tabulator .tabulator-tableholder .tabulator-table{background-color:rgba(0,0,0,0)}.tabulator-row{background-color:rgba(0,0,0,0);color:#373736}.tabulator-row.tabulator-row-odd{background-color:#fbfbfb}.tabulator-row.tabulator-row-odd.tabulator-selectable:hover:not(.tabulator-selected){background-color:#f5f5f5}.tabulator-row.tabulator-row-even.tabulator-selectable:hover:not(.tabulator-selected){background-color:#f5f5f5}.tabulator .tabulator-tableholder{background-color:rgba(0,0,0,0)}.tabulator-row.tabulator-selected{background-color:#e3e8f0}.tabulator-row.tabulator-selected:hover{cursor:pointer;background-color:#e3e8f0}.tabulator .tabulator-alert .tabulator-alert-msg.tabulator-alert-state-msg{color:#373736}.tabulator-row.tabulator-group{border:none;pointer-events:none}.tabulator-row.tabulator-group span{margin-left:0;color:#373736}.tabulator-row .badge.chip{background-color:#31708f;color:#fff;font-size:10px;padding:2px 4px;position:relative;top:-1px}.tabulator-row.tabulator-group .tabulator-group-toggle,.tabulator-row.tabulator-group .tabulator-group-toggle *{pointer-events:auto}.tabulator-row.tabulator-group:has(>.tabulator-group-toggle:only-child){display:none}.tabulator-row .tabulator-cell{text-overflow:ellipsis;white-space:nowrap;line-height:1.2;vertical-align:top}.tabulator .tabulator-footer{border-top:none;background-color:rgba(0,0,0,0)}.tabulator-page-counter{color:#373736}.tabulator .tabulator-footer .tabulator-paginator{color:#373736}.tabulator-paginator{flex:0 !important}.tabulator-page-counter{flex:1;text-align:right}.tabulator-col-sorter i{display:flex;justify-content:center;align-items:center}.tabulator .tabulator-header .tabulator-col{padding:5px}.tabulator .tabulator-headers>:first-child{padding-left:10px}.opnsense-bootgrid-responsive{white-space:wrap !important;text-overflow:inherit !important;overflow:visible !important;word-break:break-word !important}.opnsense-bootgrid-ellipsis{overflow:hidden !important;white-space:nowrap !important;text-overflow:ellipsis !important}.tabulator-row>:first-child{padding-left:10px}.tabulator .tabulator-header .tabulator-col .tabulator-col-content{padding:0px}.tabulator-page-counter{padding-right:20px}.bootgrid-footer-commands{width:90px;padding-left:8px}.tabulator-tableholder::after{content:"";display:block;width:1px;height:1px;min-width:100%}.tabulator .tabulator-footer .tabulator-paginator .tabulator-page:first-child{border-bottom-left-radius:3px;border-top-left-radius:3px}.tabulator .tabulator-footer .tabulator-paginator .tabulator-page:last-child{border-bottom-right-radius:3px;border-top-right-radius:3px}.tabulator-row:first-child>.tabulator-cell{border-top:none}.tabulator .tabulator-header .tabulator-col.tabulator-sortable .tabulator-col-title{padding:0px}@keyframes highlight{0%{background:#ff9}100%{background:none}}.highlight-bg{animation:highlight 2s}.tabulator .tabulator-alert{background:none}.tabulator .tabulator-alert .tabulator-alert-msg.tabulator-alert-state-msg{border:none}.tabulator .tabulator-alert .tabulator-alert-msg{background:initial;font-size:18px}.tabulator .tabulator-alert .tabulator-alert-msg.tabulator-alert-state-error{border:none}.bootgrid-placeholder{font-size:15px;text-align:center;white-space:normal;font-weight:400;margin:10px}.bootgrid-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(255,255,255,.5);display:flex;justify-content:center;align-items:center;z-index:99}.overlay>i{font-size:20px;color:#000}.tabulator{width:100%;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;font-size:13px;background:#fff;border:1px solid #eee;border-radius:0}.tabulator .tabulator-header{background:#fff;border-bottom:1px solid #eee;border-top:0;border-left:0;border-right:0}.tabulator .tabulator-header .tabulator-col{background:rgba(0,0,0,0);color:#333;border-right:1px solid #eee}.tabulator .tabulator-header .tabulator-col:last-child{border-right:0}.tabulator .tabulator-header .tabulator-col .tabulator-col-content{padding:10px 0 10px 20px;line-height:1.428571429}.tabulator .tabulator-header .tabulator-col.tabulator-sortable:hover{background:#f5f5f5}.tabulator .tabulator-tableholder{background:#fff}.tabulator-row{background:#fff;color:#333;border-top:1px solid #eee}.tabulator-row .tabulator-cell{padding:10px 0 10px 20px;line-height:1.428571429;vertical-align:top;border-right:1px solid #eee;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.tabulator-row .tabulator-cell.tabulator-frozen.tabulator-frozen-left,.tabulator .tabulator-header .tabulator-frozen.tabulator-frozen-left,.tabulator-row .tabulator-cell.tabulator-frozen.tabulator-frozen-left,.tabulator .tabulator-header .tabulator-frozen.tabulator-frozen-left,.tabulator-row .tabulator-cell.tabulator-frozen.tabulator-frozen-right,.tabulator .tabulator-header .tabulator-frozen.tabulator-frozen-right{border-color:#eee;border-width:1px}.tabulator-row .tabulator-cell:last-child{border-right:0}.tabulator-header .tabulator-row-header input,.tabulator-header .tabulator-cell input{margin-left:-24px}.tabulator-table .tabulator-row-header input,.tabulator-table .tabulator-cell input{margin-left:-18px}.tabulator.tabulator-striped .tabulator-row:nth-child(odd){background:#fbfbfb}.tabulator.tabulator-hover .tabulator-row:hover{background:#f5f5f5 !important}.tabulator-row.tabulator-selected{background:#f5f5f5 !important}.tabulator-row.tabulator-selected:hover{background:#f5f5f5 !important}.tabulator .tabulator-footer{background:#fff;border-top:1px solid #eee;color:#555}.tabulator .tabulator-footer .tabulator-page{border:1px solid #eee;background:#fff;color:#333;border-radius:0;margin:0;padding:6px 12px;color:#fff;background-color:#51aded;border-color:#51aded}.tabulator .tabulator-footer .tabulator-page:hover,.tabulator .tabulator-footer .tabulator-page:focus,.tabulator .tabulator-footer .tabulator-page:active,.tabulator .tabulator-footer .tabulator-page.active,.open>.tabulator .tabulator-footer .tabulator-page.dropdown-toggle,.tabulator .tabulator-footer .tabulator-page :not(disabled):hover{color:#fff !important;background-color:#2397e8 !important;border-color:#1a93e7 !important}.tabulator .tabulator-footer .tabulator-page:active,.tabulator .tabulator-footer .tabulator-page.active,.open>.tabulator .tabulator-footer .tabulator-page.dropdown-toggle{background-image:none}.tabulator .tabulator-footer .tabulator-page.disabled,.tabulator .tabulator-footer .tabulator-page.disabled:hover,.tabulator .tabulator-footer .tabulator-page.disabled:focus,.tabulator .tabulator-footer .tabulator-page.disabled:active,.tabulator .tabulator-footer .tabulator-page.disabled.active,.tabulator .tabulator-footer .tabulator-page[disabled],.tabulator .tabulator-footer .tabulator-page[disabled]:hover,.tabulator .tabulator-footer .tabulator-page[disabled]:focus,.tabulator .tabulator-footer .tabulator-page[disabled]:active,.tabulator .tabulator-footer .tabulator-page[disabled].active,fieldset[disabled] .tabulator .tabulator-footer .tabulator-page,fieldset[disabled] .tabulator .tabulator-footer .tabulator-page:hover,fieldset[disabled] .tabulator .tabulator-footer .tabulator-page:focus,fieldset[disabled] .tabulator .tabulator-footer .tabulator-page:active,fieldset[disabled] .tabulator .tabulator-footer .tabulator-page.active{background-color:#51aded;border-color:#51aded}.tabulator .tabulator-footer .tabulator-page .badge{color:#51aded;background-color:#fff}.tabulator-row.tabulator-row-even{background-color:rgba(0,0,0,0)}.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-title{overflow:visible}.tabulator-row.tabulator-selected{background-color:#9abcea}.tabulator .tabulator-alert{align-items:center;background:rgba(255,255,255,.5);display:flex;height:100%;left:0;position:absolute;text-align:center;top:0;width:100%;z-index:100}.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 8px 4px -8px !important}/*# sourceMappingURL=opnsense-bootgrid.css.map */