diff --git a/misc/theme-rebellion/Makefile b/misc/theme-rebellion/Makefile index 335556a53..4dbbe5585 100644 --- a/misc/theme-rebellion/Makefile +++ b/misc/theme-rebellion/Makefile @@ -1,7 +1,7 @@ PLUGIN_NAME= theme-rebellion -PLUGIN_VERSION= 1.9 +PLUGIN_VERSION= 1.9.1 PLUGIN_COMMENT= A suitably dark theme -PLUGIN_MAINTAINER= team-rebellion@queens-park.com +PLUGIN_MAINTAINER= martin@queens-park.com PLUGIN_NO_ABI= yes .include "../../Mk/plugins.mk" diff --git a/misc/theme-rebellion/src/opnsense/www/themes/rebellion/build/css/bootstrap-select.css b/misc/theme-rebellion/src/opnsense/www/themes/rebellion/build/css/bootstrap-select.css index 12a1b5bee..a48ed904b 100644 --- a/misc/theme-rebellion/src/opnsense/www/themes/rebellion/build/css/bootstrap-select.css +++ b/misc/theme-rebellion/src/opnsense/www/themes/rebellion/build/css/bootstrap-select.css @@ -64,7 +64,7 @@ select.selectpicker { .bootstrap-select > .dropdown-toggle.bs-placeholder:hover, .bootstrap-select > .dropdown-toggle.bs-placeholder:focus, .bootstrap-select > .dropdown-toggle.bs-placeholder:active { - color: #444; + color: #ddd; } .bootstrap-select > .dropdown-toggle.bs-placeholder.btn-primary, .bootstrap-select > .dropdown-toggle.bs-placeholder.btn-secondary, diff --git a/misc/theme-rebellion/src/opnsense/www/themes/rebellion/build/css/dashboard.css b/misc/theme-rebellion/src/opnsense/www/themes/rebellion/build/css/dashboard.css new file mode 100644 index 000000000..3fd193bf1 --- /dev/null +++ b/misc/theme-rebellion/src/opnsense/www/themes/rebellion/build/css/dashboard.css @@ -0,0 +1,317 @@ +.fa-spinner { + font-size: 2em; +} + +#save-grid { + width: inherit; + height: inherit; + display: inline-flex; + align-items: center; + justify-content: center; + transition: opacity 0.3s ease; + position: relative; + width: 50px; + height: 30px; + margin-right: 10px; +} + +#save-btn-text, #icon-container { + position: absolute; +} + +#icon-container { + display: inline-flex; + align-items: center; + justify-content: center; +} + +#save-spinner, #save-check { + transition: opacity 0.3s ease, transform 0.3s ease; +} + +.hide { + opacity: 0; + transform: scale(0); +} + +.show { + opacity: 1; + transform: scale(1); +} + +.grid-stack-item-content { + text-align: center; + border-style: solid; + border-color: rgba(200, 200, 200, .5); + border-width: 2px; + background-color: #222222; + border-radius: 0.5em 0.5em 0.5em 0.5em; +} + +.widget-content { + position: relative; + width: 100%; + height: 100%; + padding: 1px; + cursor: grab; +} + +.widget-header { + margin-top: 0.5em; + margin-left: 1em; + margin-right: 1em; + display: flex; + justify-content: space-between; + align-items: center; +} + +.widget-spinner { + margin-top: 20px; +} + +.fa-stack.small { + font-size: 0.5em; +} + +.close-handle { + vertical-align: middle; + text-align: right; + cursor: pointer; +} + +.close-handle > i { + font-size: 0.7em; +} + +.panel-divider { + width: 100%; + text-align: center; + height: 8px; + margin-bottom: 10px; +} + +table { + table-layout: fixed; +} + +td { + word-break: break-all; +} + +.line { + display: inline-block; + height: 1px; + width: 70%; + background: #121212; + color: #f0f0f0; + margin: 5px; +} + +.canvas-container { + position: relative; +} + +.cpu-canvas-container { + display: flex; + flex-direction: column; +} + +.smoothie-container { + width: 100%; + +} + +.smoothie-chart-tooltip { + z-index: 1; /* necessary to force to foreground */ + background: rgba(80, 50, 10, 0.9); + padding-left: 15px; + padding-right: 15px; + color: white; + font-size: 11px; + border-radius: 0.5em 0.5em 0.5em 0.5em; + pointer-events: none; +} + +.flex-container { + display: flex; + flex-wrap: nowrap; + white-space: nowrap; +} + +.gateway-info { + margin: 5px; + padding: 5px; + font-size: 13px; +} + +.gateway-detail-container { + display: none; + margin: 5px; +} + +.interface-info { + display: flex; + flex-wrap: wrap; + align-items: center; + height: 100%; +} + +.nowrap { + flex-wrap: nowrap; +} + +.gateway-graph { + display: none; +} + +.flex-container > .gateway-graph { + font-size: 13px; +} + +.vertical-center-row { + height: 100%; + display: inline; +} + +.interfaces-info { + margin: 5px; + font-size: 13px; +} + +.interface-descr { + margin-left: 10px; + font-size: 15px; + cursor: pointer; + text-decoration: underline; +} + +.interfaces-detail-container { + margin: 5px; + display: none; +} + +.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 widget */ +.cpu-type { + margin-bottom: 10px; + margin-top: 10px; +} +/* ----- */ + +/* Custom flex table */ +div { + box-sizing: border-box; +} + +.flextable-container { + display: block; + margin: 2em auto; + width: 95%; + max-width: 1200px; +} + +.flextable-header { + display: flex; + flex-flow: row wrap; + transition: 0.5s; + padding: 0.5em 0.5em; + border-top: solid 1px rgba(217, 79, 0, 0.15); +} + +.flextable-row { + display: flex; + flex-flow: row wrap; + transition: 0.5s; + padding: 0.5em 0.5em; + border-top: solid 1px rgba(217, 79, 0, 0.15); + align-items: center; +} + +.flextable-header .flex-cell { + font-weight: bold; +} + +.flextable-row:hover { + background: #222222; + transition: 500ms; +} + +.flex-cell { + 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: 0; + border: 0; + border-top: rgba(217, 79, 0, 0.15); +} +.column .flex-cell:hover { + background: #F5F5F5; + transition: 500ms; +} +.flex-subcell { + width: 100%; + text-align: left; +} + +.column .flex-cell:not(:last-child) { + border-bottom: solid 1px rgba(217, 79, 0, 0.15); +} +/* ----- */ + +/* CSS grid responsive table */ +.grid-header-container { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); +} + +.grid-row { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); + background-color: #f7e2d6; /* fade-in color, transitions to transparent */ + border-top: 1px solid #f7e2d6; + transition: 0.5s; + opacity: 0.4; +} + +.grid-row:hover { + background: #222222 !important; + transition: 500ms; +} + +.grid-header { + border-top: 1px solid #f7e2d6; + font-weight: bold; +} + +.grid-item { + border: 1 px solid #ccc; + padding: 4px; + text-align: center; +} +/* ----- */