From 021b32fc3bcafa4ef6861a166aa2f9a41829b573 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ren=C3=A9?= <34602360+opnsenseuser@users.noreply.github.com> Date: Sat, 25 Feb 2023 18:09:50 +0100 Subject: [PATCH] dns-overview.css color theme fixes for Cicada/Vicuna (#3295) * dns-overview.css color theme fixes for Cicada/Vicuna by the way......for the dns-overview html basic structure the color "white" was written hardcoded. the color is defined differently in each theme and is already defined in the main.css. I would ask you to remove this hardcoded part so that the colors of the themes can be used again. the part I mentioned is here. see the screenshot --- misc/theme-cicada/Makefile | 2 +- .../themes/cicada/build/css/dns-overview.css | 178 ++++++++++++++++++ misc/theme-vicuna/Makefile | 2 +- .../themes/vicuna/build/css/dns-overview.css | 178 ++++++++++++++++++ 4 files changed, 358 insertions(+), 2 deletions(-) create mode 100644 misc/theme-cicada/src/opnsense/www/themes/cicada/build/css/dns-overview.css create mode 100644 misc/theme-vicuna/src/opnsense/www/themes/vicuna/build/css/dns-overview.css diff --git a/misc/theme-cicada/Makefile b/misc/theme-cicada/Makefile index b79faa208..5286e2a9d 100644 --- a/misc/theme-cicada/Makefile +++ b/misc/theme-cicada/Makefile @@ -1,5 +1,5 @@ PLUGIN_NAME= theme-cicada -PLUGIN_VERSION= 1.32 +PLUGIN_VERSION= 1.33 PLUGIN_COMMENT= The cicada theme - dark grey onyx PLUGIN_MAINTAINER= rene@team-rebellion.net PLUGIN_NO_ABI= yes diff --git a/misc/theme-cicada/src/opnsense/www/themes/cicada/build/css/dns-overview.css b/misc/theme-cicada/src/opnsense/www/themes/cicada/build/css/dns-overview.css new file mode 100644 index 000000000..071b3e7d0 --- /dev/null +++ b/misc/theme-cicada/src/opnsense/www/themes/cicada/build/css/dns-overview.css @@ -0,0 +1,178 @@ +.tab-content { + padding: 10px; + border-top: 1px solid #191919; +} + +.banner { + width: 25%; +} + +.stats-element { + height: 5em; + background: #202020; + overflow: hidden; + display: flex; + justify-content: flex-start; + border-radius: .3em; + margin:auto; + border: 1px solid rgb(24, 24, 24); +} + +.stats-icon { + height: auto; + width: 50%; + object-fit:cover; + background: #d94f0033; + border-radius: 0 2em 2em 0 / 0 3em 3em 0; + box-shadow: 3px 5px 1px 3px rgba(217,79,0,0.25); +} + +.large-icon { + position: relative; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + font-size: 2em; +} + +.stats-text { + height: 5em; + width: 15em; + display: flex; + justify-content: center; + text-align: center; + align-items: center; + flex-direction: column; +} + +.stats-counter-text { + margin: 0; + padding: 0; + text-align: center; + font-size: 15px; +} + +.stats-inner-text { + margin: 0; + padding: 0; + text-align: center; + font-size: 15px; +} + +#bannersub { + text-align: center; + margin: 5px; +} + +.list-group-wrapper { + margin: 0px; + padding-top: 10px; + padding-bottom: 10px; +} + +.list-item-domain { + height: 2.5em; +} + +.list-group-item-border { + border: 1px solid #191919; +} + +.list-group-item-border:first-child { + border-top-left-radius: 4px; + border-top-right-radius: 4px; + border-bottom: 2px solid black; +} + +.list-group-item-border:last-child { + border-bottom-left-radius: 4px; + border-bottom-right-radius: 4px; +} +.btn.pull-right { + margin-left: 3px; +} + +.odd-bg { + background: #f7f7f7; +} + +.top-item { + display: flex; + white-space: nowrap; +} + +.group-p { + overflow: hidden; + height: 20px; + margin-right: 5px; + text-overflow: ellipsis; +} + +.counter { + position: relative; + top: -3px; + color: #888; + font-size: 14px; + line-height: 1.4; + flex: 1; + text-align: right; +} + +.vertical-center { + margin: 0; + position: absolute; + top: 50%; + -ms-transform: translateY(-50%); + transform: translateY(-50%); +} + +#maintabs > li > a { + border: 1px solid #191919; +} + +.query-success { + background-color: rgba(5, 142, 73, 0.3); +} + +.query-info { + background-color: rgba(255, 227, 0, 0.3); +} + +.query-danger { + background-color: rgba(235, 9, 9, 0.3); +} + +.query-warning { + background-color: rgba(255, 131, 0, 0.3); +} + +#searchFilter { + display: inline-block; + margin: 0 20px 0 0; + vertical-align: middle; +} + +.tag { + font-size: 14px; + padding: .3em .4em .4em; + margin: 0 .1em; +} + +.tag a { + color: #bbb; + cursor: pointer; + opacity: 0.9; +} + +.tag a { + margin: 0 0 0 .3em; +} + +.tag a fa-times { + color: #fff; + margin-bottom: 2px; +} + +.tooltip-inner { + max-width: 1000px !important; +} diff --git a/misc/theme-vicuna/Makefile b/misc/theme-vicuna/Makefile index 6ed096fff..ac471e0d7 100644 --- a/misc/theme-vicuna/Makefile +++ b/misc/theme-vicuna/Makefile @@ -1,5 +1,5 @@ PLUGIN_NAME= theme-vicuna -PLUGIN_VERSION= 1.43 +PLUGIN_VERSION= 1.44 PLUGIN_COMMENT= The vicuna theme - blue sapphire PLUGIN_MAINTAINER= rene@team-rebellion.net PLUGIN_NO_ABI= yes diff --git a/misc/theme-vicuna/src/opnsense/www/themes/vicuna/build/css/dns-overview.css b/misc/theme-vicuna/src/opnsense/www/themes/vicuna/build/css/dns-overview.css new file mode 100644 index 000000000..071b3e7d0 --- /dev/null +++ b/misc/theme-vicuna/src/opnsense/www/themes/vicuna/build/css/dns-overview.css @@ -0,0 +1,178 @@ +.tab-content { + padding: 10px; + border-top: 1px solid #191919; +} + +.banner { + width: 25%; +} + +.stats-element { + height: 5em; + background: #202020; + overflow: hidden; + display: flex; + justify-content: flex-start; + border-radius: .3em; + margin:auto; + border: 1px solid rgb(24, 24, 24); +} + +.stats-icon { + height: auto; + width: 50%; + object-fit:cover; + background: #d94f0033; + border-radius: 0 2em 2em 0 / 0 3em 3em 0; + box-shadow: 3px 5px 1px 3px rgba(217,79,0,0.25); +} + +.large-icon { + position: relative; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + font-size: 2em; +} + +.stats-text { + height: 5em; + width: 15em; + display: flex; + justify-content: center; + text-align: center; + align-items: center; + flex-direction: column; +} + +.stats-counter-text { + margin: 0; + padding: 0; + text-align: center; + font-size: 15px; +} + +.stats-inner-text { + margin: 0; + padding: 0; + text-align: center; + font-size: 15px; +} + +#bannersub { + text-align: center; + margin: 5px; +} + +.list-group-wrapper { + margin: 0px; + padding-top: 10px; + padding-bottom: 10px; +} + +.list-item-domain { + height: 2.5em; +} + +.list-group-item-border { + border: 1px solid #191919; +} + +.list-group-item-border:first-child { + border-top-left-radius: 4px; + border-top-right-radius: 4px; + border-bottom: 2px solid black; +} + +.list-group-item-border:last-child { + border-bottom-left-radius: 4px; + border-bottom-right-radius: 4px; +} +.btn.pull-right { + margin-left: 3px; +} + +.odd-bg { + background: #f7f7f7; +} + +.top-item { + display: flex; + white-space: nowrap; +} + +.group-p { + overflow: hidden; + height: 20px; + margin-right: 5px; + text-overflow: ellipsis; +} + +.counter { + position: relative; + top: -3px; + color: #888; + font-size: 14px; + line-height: 1.4; + flex: 1; + text-align: right; +} + +.vertical-center { + margin: 0; + position: absolute; + top: 50%; + -ms-transform: translateY(-50%); + transform: translateY(-50%); +} + +#maintabs > li > a { + border: 1px solid #191919; +} + +.query-success { + background-color: rgba(5, 142, 73, 0.3); +} + +.query-info { + background-color: rgba(255, 227, 0, 0.3); +} + +.query-danger { + background-color: rgba(235, 9, 9, 0.3); +} + +.query-warning { + background-color: rgba(255, 131, 0, 0.3); +} + +#searchFilter { + display: inline-block; + margin: 0 20px 0 0; + vertical-align: middle; +} + +.tag { + font-size: 14px; + padding: .3em .4em .4em; + margin: 0 .1em; +} + +.tag a { + color: #bbb; + cursor: pointer; + opacity: 0.9; +} + +.tag a { + margin: 0 0 0 .3em; +} + +.tag a fa-times { + color: #fff; + margin-bottom: 2px; +} + +.tooltip-inner { + max-width: 1000px !important; +}