From 001a63efc3e138ff58c8024f116f6f47f58a96ce Mon Sep 17 00:00:00 2001
From: BlasenhauerJ <blasenhauer.jordan.dev@gmail.com>
Date: Thu, 27 Apr 2023 18:28:34 +0200
Subject: [PATCH] continue custom selectors + fix script + style

*create custom selectors instead of utility classes for settings_tabs and settings_plugins content
*update javascript script (now base on active class instead of utility calsses)
*fix menu close btn display breakpoint
---
 src/ui/static/css/dashboard.css        | 662 ++++++++++++++++++++-----
 src/ui/static/js/utils/settings.js     |  34 +-
 src/ui/styles.css                      |  74 +++
 src/ui/templates/flashs.html           |   2 +-
 src/ui/templates/menu.html             |   6 +-
 src/ui/templates/settings_plugins.html |  25 +-
 src/ui/templates/settings_tabs.html    |  18 +-
 7 files changed, 649 insertions(+), 172 deletions(-)

diff --git a/src/ui/static/css/dashboard.css b/src/ui/static/css/dashboard.css
index 389e27e5d..26429f11f 100644
--- a/src/ui/static/css/dashboard.css
+++ b/src/ui/static/css/dashboard.css
@@ -746,14 +746,14 @@ h6 {
   right: 0px;
 }
 
-.right-19 {
-  right: 4.75rem;
-}
-
 .right-2 {
   right: 0.5rem;
 }
 
+.right-20 {
+  right: 5rem;
+}
+
 .right-4 {
   right: 1rem;
 }
@@ -798,10 +798,6 @@ h6 {
   top: 1.25rem;
 }
 
-.top-\[60px\] {
-  top: 60px;
-}
-
 .-z-10 {
   z-index: -10;
 }
@@ -822,10 +818,6 @@ h6 {
   z-index: 20;
 }
 
-.z-50 {
-  z-index: 50;
-}
-
 .z-990 {
   z-index: 990;
 }
@@ -1328,10 +1320,6 @@ h6 {
   min-width: 0px;
 }
 
-.min-w-\[150px\] {
-  min-width: 150px;
-}
-
 .min-w-\[500px\] {
   min-width: 500px;
 }
@@ -1415,11 +1403,6 @@ h6 {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
-.-translate-y-7 {
-  --tw-translate-y: -1.75rem;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-
 .translate-x-0 {
   --tw-translate-x: 0px;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -1674,10 +1657,6 @@ h6 {
   border-radius: 0.5rem;
 }
 
-.rounded-md {
-  border-radius: 0.375rem;
-}
-
 .rounded-none {
   border-radius: 0px;
 }
@@ -2149,10 +2128,6 @@ h6 {
   padding-right: 0px;
 }
 
-.pr-2 {
-  padding-right: 0.5rem;
-}
-
 .pr-8 {
   padding-right: 2rem;
 }
@@ -2326,11 +2301,6 @@ h6 {
   color: rgb(34 197 94 / var(--tw-text-opacity));
 }
 
-.text-primary {
-  --tw-text-opacity: 1;
-  color: rgb(8 85 119 / var(--tw-text-opacity));
-}
-
 .text-red-500 {
   --tw-text-opacity: 1;
   color: rgb(245 57 57 / var(--tw-text-opacity));
@@ -2574,6 +2544,12 @@ h6 {
   color: rgb(210 214 218 / var(--tw-text-opacity));
 }
 
+/*----------------------------------------------*/
+
+/*---------------SETTINGS_PLUGINS---------------*/
+
+/*----------------------------------------------*/
+
 .custom-select-btn {
   display: flex;
   width: 100%;
@@ -2749,6 +2725,536 @@ h6 {
   color: rgb(210 214 218 / var(--tw-text-opacity));
 }
 
+.regular-input {
+  display: block;
+  width: 100%;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  border-radius: 0.5rem;
+  border-width: 1px;
+  border-style: solid;
+  --tw-border-opacity: 1;
+  border-color: rgb(210 214 218 / var(--tw-border-opacity));
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+  background-clip: padding-box;
+  padding-left: 0.375rem;
+  padding-right: 0.375rem;
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+  font-size: 0.875rem;
+  font-weight: 400;
+  line-height: 1.4rem;
+  --tw-text-opacity: 1;
+  color: rgb(73 80 87 / var(--tw-text-opacity));
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
+  transition-duration: 150ms;
+  transition-timing-function: cubic-bezier(0.42, 0, 1, 1);
+}
+
+.regular-input::-moz-placeholder {
+  --tw-text-opacity: 1;
+  color: rgb(173 181 189 / var(--tw-text-opacity));
+}
+
+.regular-input::placeholder {
+  --tw-text-opacity: 1;
+  color: rgb(173 181 189 / var(--tw-text-opacity));
+}
+
+.regular-input:focus {
+  border-color: rgb(210 214 218 / 0);
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
+
+.regular-input:valid:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(34 197 94 / var(--tw-ring-opacity));
+}
+
+.regular-input:invalid:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(245 57 57 / var(--tw-ring-opacity));
+}
+
+.regular-input:disabled {
+  --tw-bg-opacity: 1;
+  background-color: rgb(206 212 218 / var(--tw-bg-opacity));
+  --tw-text-opacity: 1;
+  color: rgb(73 80 87 / var(--tw-text-opacity));
+  opacity: 0.75;
+}
+
+:is(.dark .regular-input) {
+  --tw-border-opacity: 1;
+  border-color: rgb(98 117 148 / var(--tw-border-opacity));
+  --tw-bg-opacity: 1;
+  background-color: rgb(52 71 103 / var(--tw-bg-opacity));
+  --tw-text-opacity: 1;
+  color: rgb(210 214 218 / var(--tw-text-opacity));
+  opacity: 0.9;
+}
+
+:is(.dark .regular-input:disabled) {
+  --tw-border-opacity: 1;
+  border-color: rgb(37 47 64 / var(--tw-border-opacity));
+  --tw-bg-opacity: 1;
+  background-color: rgb(37 47 64 / var(--tw-bg-opacity));
+  --tw-text-opacity: 1;
+  color: rgb(210 214 218 / var(--tw-text-opacity));
+}
+
+@media (min-width: 768px) {
+  .regular-input {
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+  }
+}
+
+.input-title {
+  margin: 0px;
+  font-size: 0.875rem;
+  line-height: 1.5rem;
+  font-weight: 700;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
+  transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
+  transition-duration: 300ms;
+  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
+}
+
+:is(.dark .input-title) {
+  --tw-text-opacity: 1;
+  color: rgb(210 214 218 / var(--tw-text-opacity));
+  opacity: 0.9;
+}
+
+.popover-settings-container {
+  position: absolute;
+  left: 0px;
+  bottom: 0px;
+  z-index: 50;
+  --tw-translate-y: -1.75rem;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+  border-radius: 0.375rem;
+  --tw-bg-opacity: 1;
+  background-color: rgb(94 114 228 / var(--tw-bg-opacity));
+  padding: 0.75rem;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
+  transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
+  transition-duration: 150ms;
+}
+
+:is(.dark .popover-settings-container) {
+  --tw-brightness: brightness(.9);
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+
+.popover-settings-text {
+  margin: 0px;
+  font-size: 0.875rem;
+  line-height: 1.5rem;
+  font-weight: 700;
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
+  transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
+  transition-duration: 300ms;
+  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
+}
+
+:is(.dark .popover-settings-text) {
+  --tw-text-opacity: 1;
+  color: rgb(235 239 244 / var(--tw-text-opacity));
+  opacity: 0.9;
+}
+
+.popover-settings-svg {
+  margin-left: 0.5rem;
+  height: 1.25rem;
+  width: 1.25rem;
+  cursor: pointer;
+  fill: #5e72e4;
+}
+
+.popover-settings-svg:hover {
+  --tw-brightness: brightness(.75);
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+
+/*--------------------------------------------*/
+
+/*---------------END SETTINGS_PLUGINS---------*/
+
+/*---------------------------------------------*/
+
+/*---------------------------------------------*/
+
+/*---------------SETTINGS_TABS-----------------*/
+
+/*---------------------------------------------*/
+
+.active.settings-tabs-tab-btn {
+  position: relative;
+  z-index: 10;
+  margin-top: 0.25rem;
+  margin-bottom: 0.25rem;
+  display: inline-block;
+  cursor: pointer;
+  border-radius: 0px;
+  border-width: 1px;
+  --tw-border-opacity: 1;
+  border-color: rgb(8 85 119 / var(--tw-border-opacity));
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
+  text-align: center;
+  vertical-align: middle;
+  font-size: 0.875rem;
+  line-height: 1.5rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  line-height: 1.5;
+  letter-spacing: -0.025rem;
+  --tw-shadow: 0 7px 14px rgba(50,50,93,.1),0 3px 6px rgba(0,0,0,.08);
+  --tw-shadow-colored: 0 7px 14px var(--tw-shadow-color), 0 3px 6px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+  --tw-brightness: brightness(.9);
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
+  transition-duration: 150ms;
+  transition-timing-function: cubic-bezier(0.42, 0, 1, 1);
+}
+
+.active.settings-tabs-tab-btn:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(235 239 244 / var(--tw-bg-opacity));
+  --tw-shadow: 0 4px 6px rgba(50,50,93,.1),0 1px 3px rgba(0,0,0,.08);
+  --tw-shadow-colored: 0 4px 6px var(--tw-shadow-color), 0 1px 3px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+:is(.dark .active.settings-tabs-tab-btn) {
+  --tw-border-opacity: 1;
+  border-color: rgb(98 117 148 / var(--tw-border-opacity));
+  --tw-bg-opacity: 1;
+  background-color: rgb(52 71 103 / var(--tw-bg-opacity));
+}
+
+:is(.dark .active.settings-tabs-tab-btn:hover) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(58 65 111 / var(--tw-bg-opacity));
+}
+
+.settings-tabs-tab-btn {
+  position: relative;
+  margin-top: 0.25rem;
+  margin-bottom: 0.25rem;
+  display: inline-block;
+  cursor: pointer;
+  border-radius: 0px;
+  border-width: 1px;
+  --tw-border-opacity: 1;
+  border-color: rgb(8 85 119 / var(--tw-border-opacity));
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
+  text-align: center;
+  vertical-align: middle;
+  font-size: 0.875rem;
+  line-height: 1.5rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  line-height: 1.5;
+  letter-spacing: -0.025rem;
+  --tw-shadow: 0 7px 14px rgba(50,50,93,.1),0 3px 6px rgba(0,0,0,.08);
+  --tw-shadow-colored: 0 7px 14px var(--tw-shadow-color), 0 3px 6px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
+  transition-duration: 150ms;
+  transition-timing-function: cubic-bezier(0.42, 0, 1, 1);
+}
+
+.settings-tabs-tab-btn:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(235 239 244 / var(--tw-bg-opacity));
+  --tw-shadow: 0 4px 6px rgba(50,50,93,.1),0 1px 3px rgba(0,0,0,.08);
+  --tw-shadow-colored: 0 4px 6px var(--tw-shadow-color), 0 1px 3px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+:is(.dark .settings-tabs-tab-btn) {
+  --tw-border-opacity: 1;
+  border-color: rgb(98 117 148 / var(--tw-border-opacity));
+  --tw-bg-opacity: 1;
+  background-color: rgb(52 71 103 / var(--tw-bg-opacity));
+}
+
+:is(.dark .settings-tabs-tab-btn:hover) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(58 65 111 / var(--tw-bg-opacity));
+}
+
+.settings-tabs-name {
+  padding-left: 0.75rem;
+  padding-right: 0.5rem;
+  --tw-text-opacity: 1;
+  color: rgb(8 85 119 / var(--tw-text-opacity));
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
+  transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
+  transition-duration: 300ms;
+  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
+}
+
+:is(.dark .settings-tabs-name) {
+  --tw-text-opacity: 1;
+  color: rgb(210 214 218 / var(--tw-text-opacity));
+  opacity: 0.9;
+}
+
+.settings-tabs-popover-container {
+  position: absolute;
+  top: 60px;
+  left: 0px;
+  z-index: 50;
+  min-width: 150px;
+  border-radius: 0.375rem;
+  --tw-bg-opacity: 1;
+  background-color: rgb(94 114 228 / var(--tw-bg-opacity));
+  padding: 0.75rem;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
+  transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
+  transition-duration: 150ms;
+}
+
+:is(.dark .settings-tabs-popover-container) {
+  --tw-brightness: brightness(.9);
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+
+.settings-tabs-popover-text {
+  margin: 0px;
+  font-size: 0.875rem;
+  line-height: 1.5rem;
+  font-weight: 700;
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}
+
+.settings-tabs-mobile-btn {
+  margin-top: 0.25rem;
+  margin-bottom: 0.25rem;
+  display: flex;
+  width: 100%;
+  cursor: pointer;
+  align-items: center;
+  justify-content: space-between;
+  border-radius: 0.5rem;
+  border-width: 1px;
+  --tw-border-opacity: 1;
+  border-color: rgb(8 85 119 / var(--tw-border-opacity));
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
+  text-align: center;
+  vertical-align: middle;
+  font-size: 0.875rem;
+  line-height: 1.5rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  line-height: 1.5;
+  letter-spacing: -0.025rem;
+  --tw-shadow: 0 7px 14px rgba(50,50,93,.1),0 3px 6px rgba(0,0,0,.08);
+  --tw-shadow-colored: 0 7px 14px var(--tw-shadow-color), 0 3px 6px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
+  transition-duration: 150ms;
+  transition-timing-function: cubic-bezier(0.42, 0, 1, 1);
+}
+
+.settings-tabs-mobile-btn:hover {
+  --tw-translate-y: -1px;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+  --tw-bg-opacity: 1;
+  background-color: rgb(248 249 250 / var(--tw-bg-opacity));
+  --tw-shadow: 0 4px 6px rgba(50,50,93,.1),0 1px 3px rgba(0,0,0,.08);
+  --tw-shadow-colored: 0 4px 6px var(--tw-shadow-color), 0 1px 3px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+:is(.dark .settings-tabs-mobile-btn) {
+  --tw-border-opacity: 1;
+  border-color: rgb(98 117 148 / var(--tw-border-opacity));
+  --tw-bg-opacity: 1;
+  background-color: rgb(52 71 103 / var(--tw-bg-opacity));
+}
+
+:is(.dark .settings-tabs-mobile-btn:hover) {
+  --tw-brightness: brightness(.95);
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+
+.settings-tabs-mobile-btn-text {
+  --tw-text-opacity: 1;
+  color: rgb(8 85 119 / var(--tw-text-opacity));
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
+  transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
+  transition-duration: 300ms;
+  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
+}
+
+:is(.dark .settings-tabs-mobile-btn-text) {
+  --tw-text-opacity: 1;
+  color: rgb(210 214 218 / var(--tw-text-opacity));
+  opacity: 0.9;
+}
+
+.active.settings-tabs-mobile-dropdown-btn {
+  position: relative;
+  z-index: 1000;
+  margin-top: 0px;
+  margin-bottom: 0px;
+  cursor: pointer;
+  border-radius: 0px;
+  --tw-border-opacity: 1;
+  border-color: rgb(210 214 218 / var(--tw-border-opacity));
+  --tw-bg-opacity: 1;
+  background-color: rgb(8 85 119 / var(--tw-bg-opacity));
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  text-align: center;
+  vertical-align: middle;
+  font-size: 0.875rem;
+  line-height: 1.5rem;
+  line-height: 1.5;
+  letter-spacing: -0.025rem;
+  --tw-text-opacity: 1;
+  color: rgb(210 214 218 / var(--tw-text-opacity));
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
+  transition-duration: 150ms;
+  transition-timing-function: cubic-bezier(0.42, 0, 1, 1);
+}
+
+.active.settings-tabs-mobile-dropdown-btn:hover {
+  --tw-brightness: brightness(.9);
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+
+:is(.dark .active.settings-tabs-mobile-dropdown-btn) {
+  --tw-border-opacity: 1;
+  border-color: rgb(98 117 148 / var(--tw-border-opacity));
+  --tw-bg-opacity: 1;
+  background-color: rgb(8 85 119 / var(--tw-bg-opacity));
+  --tw-text-opacity: 1;
+  color: rgb(210 214 218 / var(--tw-text-opacity));
+}
+
+:is(.dark .active.settings-tabs-mobile-dropdown-btn:hover) {
+  --tw-brightness: brightness(.9);
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+
+.first.settings-tabs-mobile-dropdown-btn {
+  border-top-left-radius: 0.25rem;
+  border-top-right-radius: 0.25rem;
+  border-top-width: 1px;
+  border-bottom-width: 1px;
+  border-left-width: 1px;
+  border-right-width: 1px;
+}
+
+.settings-tabs-mobile-dropdown-btn {
+  position: relative;
+  margin-top: 0px;
+  margin-bottom: 0px;
+  display: flex;
+  cursor: pointer;
+  justify-content: space-between;
+  border-radius: 0px;
+  border-bottom-width: 1px;
+  border-left-width: 1px;
+  border-right-width: 1px;
+  --tw-border-opacity: 1;
+  border-color: rgb(210 214 218 / var(--tw-border-opacity));
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  text-align: center;
+  vertical-align: middle;
+  font-size: 0.875rem;
+  line-height: 1.5rem;
+  line-height: 1.5;
+  letter-spacing: -0.025rem;
+  --tw-text-opacity: 1;
+  color: rgb(73 80 87 / var(--tw-text-opacity));
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
+  transition-duration: 150ms;
+  transition-timing-function: cubic-bezier(0.42, 0, 1, 1);
+}
+
+.settings-tabs-mobile-dropdown-btn:hover {
+  --tw-brightness: brightness(.9);
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+
+:is(.dark .settings-tabs-mobile-dropdown-btn) {
+  --tw-border-opacity: 1;
+  border-color: rgb(98 117 148 / var(--tw-border-opacity));
+  --tw-bg-opacity: 1;
+  background-color: rgb(52 71 103 / var(--tw-bg-opacity));
+  --tw-text-opacity: 1;
+  color: rgb(210 214 218 / var(--tw-text-opacity));
+}
+
+:is(.dark .settings-tabs-mobile-dropdown-btn:hover) {
+  --tw-brightness: brightness(.9);
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+
+/*---------------------------------------------*/
+
+/*---------------END SETTINGS_TABS-------------*/
+
+/*---------------------------------------------*/
+
 .first-letter\:absolute::first-letter {
   position: absolute;
 }
@@ -2937,11 +3443,6 @@ h6 {
   background-color: rgb(210 214 218 / var(--tw-bg-opacity));
 }
 
-.hover\:bg-gray-50:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(248 249 250 / var(--tw-bg-opacity));
-}
-
 .hover\:bg-green-500\/80:hover {
   background-color: rgb(34 197 94 / 0.8);
 }
@@ -2995,10 +3496,6 @@ h6 {
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
 
-.focus\:border-gray-300\/0:focus {
-  border-color: rgb(210 214 218 / 0);
-}
-
 .focus\:border-green-500:focus {
   --tw-border-opacity: 1;
   border-color: rgb(34 197 94 / var(--tw-border-opacity));
@@ -3029,32 +3526,16 @@ h6 {
   background-color: rgb(251 177 64 / 0.8);
 }
 
-.focus\:ring-1:focus {
-  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
-}
-
 .focus\:valid\:border-green-500:valid:focus {
   --tw-border-opacity: 1;
   border-color: rgb(34 197 94 / var(--tw-border-opacity));
 }
 
-.focus\:valid\:ring-green-500:valid:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(34 197 94 / var(--tw-ring-opacity));
-}
-
 .focus\:invalid\:border-red-500:invalid:focus {
   --tw-border-opacity: 1;
   border-color: rgb(245 57 57 / var(--tw-border-opacity));
 }
 
-.focus\:invalid\:ring-red-500:invalid:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(245 57 57 / var(--tw-ring-opacity));
-}
-
 .focus\:file\:invalid\:border-red-500:invalid::file-selector-button:focus {
   --tw-border-opacity: 1;
   border-color: rgb(245 57 57 / var(--tw-border-opacity));
@@ -3100,35 +3581,6 @@ h6 {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
-.aria-checked\:z-0[aria-checked="true"] {
-  z-index: 0;
-}
-
-.aria-checked\:border-primary[aria-checked="true"] {
-  --tw-border-opacity: 1;
-  border-color: rgb(8 85 119 / var(--tw-border-opacity));
-}
-
-.aria-checked\:bg-primary[aria-checked="true"] {
-  --tw-bg-opacity: 1;
-  background-color: rgb(8 85 119 / var(--tw-bg-opacity));
-}
-
-.aria-checked\:disabled\:border-gray-400:disabled[aria-checked="true"] {
-  --tw-border-opacity: 1;
-  border-color: rgb(206 212 218 / var(--tw-border-opacity));
-}
-
-.aria-checked\:disabled\:bg-gray-400:disabled[aria-checked="true"] {
-  --tw-bg-opacity: 1;
-  background-color: rgb(206 212 218 / var(--tw-bg-opacity));
-}
-
-.aria-checked\:disabled\:text-gray-700:disabled[aria-checked="true"] {
-  --tw-text-opacity: 1;
-  color: rgb(73 80 87 / var(--tw-text-opacity));
-}
-
 :is(.dark .dark\:inline) {
   display: inline;
 }
@@ -3362,11 +3814,6 @@ h6 {
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
 
-:is(.dark .dark\:hover\:brightness-95:hover) {
-  --tw-brightness: brightness(.95);
-  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
-}
-
 :is(.dark .dark\:disabled\:border-gray-800:disabled) {
   --tw-border-opacity: 1;
   border-color: rgb(37 47 64 / var(--tw-border-opacity));
@@ -3382,31 +3829,6 @@ h6 {
   color: rgb(210 214 218 / var(--tw-text-opacity));
 }
 
-:is(.dark .dark\:aria-checked\:border-primary[aria-checked="true"]) {
-  --tw-border-opacity: 1;
-  border-color: rgb(8 85 119 / var(--tw-border-opacity));
-}
-
-:is(.dark .dark\:aria-checked\:bg-primary[aria-checked="true"]) {
-  --tw-bg-opacity: 1;
-  background-color: rgb(8 85 119 / var(--tw-bg-opacity));
-}
-
-:is(.dark .dark\:aria-checked\:disabled\:border-gray-800:disabled[aria-checked="true"]) {
-  --tw-border-opacity: 1;
-  border-color: rgb(37 47 64 / var(--tw-border-opacity));
-}
-
-:is(.dark .dark\:aria-checked\:disabled\:bg-gray-800:disabled[aria-checked="true"]) {
-  --tw-bg-opacity: 1;
-  background-color: rgb(37 47 64 / var(--tw-bg-opacity));
-}
-
-:is(.dark .dark\:aria-checked\:disabled\:text-gray-300:disabled[aria-checked="true"]) {
-  --tw-text-opacity: 1;
-  color: rgb(210 214 218 / var(--tw-text-opacity));
-}
-
 @media (min-width: 576px) {
   .sm\:right-24 {
     right: 6rem;
@@ -3454,10 +3876,6 @@ h6 {
     margin-right: 4rem;
   }
 
-  .sm\:hidden {
-    display: none;
-  }
-
   .sm\:h-10 {
     height: 2.5rem;
   }
diff --git a/src/ui/static/js/utils/settings.js b/src/ui/static/js/utils/settings.js
index 5482d684d..034de2fa8 100644
--- a/src/ui/static/js/utils/settings.js
+++ b/src/ui/static/js/utils/settings.js
@@ -82,25 +82,14 @@ class Tabs {
     //reset desktop style
     const tabsDesktop = container.querySelectorAll("button[data-tab-handler]");
     tabsDesktop.forEach((tab) => {
-      tab.classList.remove("brightness-90", "z-[1001]");
-      tab.classList.add("z-1000");
+      tab.classList.remove("active");
     });
     //reset mobile style
-    const tabsMobile = container.querySelectorAll("button[data-tab-handler-mobile]");
+    const tabsMobile = container.querySelectorAll(
+      "button[data-tab-handler-mobile]"
+    );
     tabsMobile.forEach((tab) => {
-      tab.classList.add(
-        "bg-white",
-        "dark:bg-slate-700",
-        "text-gray-700",
-        "z-1000"
-      );
-      tab.classList.remove(
-        "dark:bg-primary",
-        "bg-primary",
-        "bg-primary",
-        "text-gray-300",
-        "text-gray-300"
-      );
+      tab.classList.remove("active");
     });
   }
 
@@ -109,18 +98,13 @@ class Tabs {
     const tabDesktop = container.querySelector(
       `button[data-tab-handler='${tabAtt}']`
     );
-    tabDesktop.classList.add("brightness-90", "z-[1001]");
+    tabDesktop.classList.add("active");
 
     //mobile case
     const tabMobile = container.querySelector(
       `button[data-tab-handler-mobile='${tabAtt}']`
     );
-    tabMobile.classList.add("dark:bg-primary", "bg-primary", "text-gray-300");
-    tabMobile.classList.remove(
-      "bg-white",
-      "dark:bg-slate-700",
-      "text-gray-700"
-    );
+    tabMobile.classList.add("active");
   }
 
   hideAllSettings(container) {
@@ -246,7 +230,9 @@ class FilterSettings {
     const settingContainer = this.container
       .querySelector(`[data-plugin-item="${tabName}"]`)
       .querySelector(`[data-plugin-settings]`);
-    const settings = settingContainer.querySelectorAll("[data-setting-container]");
+    const settings = settingContainer.querySelectorAll(
+      "[data-setting-container]"
+    );
     return settings;
   }
 }
diff --git a/src/ui/styles.css b/src/ui/styles.css
index f8f76376e..f44a8aed7 100644
--- a/src/ui/styles.css
+++ b/src/ui/styles.css
@@ -18,6 +18,9 @@
     dark:aria-checked:disabled:text-gray-300;
 }
 
+/*----------------------------------------------*/
+/*---------------SETTINGS_PLUGINS---------------*/
+/*----------------------------------------------*/
 .custom-select-btn {
   @apply disabled:opacity-75 dark:disabled:text-gray-300 disabled:text-gray-700 disabled:bg-gray-400 disabled:border-gray-400 dark:disabled:bg-gray-800 dark:disabled:border-gray-800 duration-300 ease-in-out dark:opacity-90 dark:border-slate-600 dark:bg-slate-700 dark:text-gray-300 focus:border-primary flex justify-between align-middle items-center text-left text-sm leading-5.6  w-full rounded-lg border border-solid border-gray-300 bg-white bg-clip-padding px-1.5 py-1 md:px-3 md:py-2 font-normal text-gray-700 transition-all placeholder:text-gray-500;
 }
@@ -29,3 +32,74 @@
 .active.custom-dropdown-btn {
   @apply min-h-[38px] border-b border-l border-r border-gray-300 hover:brightness-90 bg-primary  my-0 relative px-6 py-2 text-center align-middle transition-all rounded-none cursor-pointer leading-normal text-sm ease-in tracking-tight-rem dark:border-slate-600 dark:bg-primary text-gray-300 dark:text-gray-300;
 }
+
+.regular-input {
+  @apply outline-none dark:opacity-90 dark:border-slate-600 dark:bg-slate-700 dark:text-gray-300 disabled:opacity-75 focus:border-gray-300/0 focus:ring-1  focus:valid:ring-green-500 focus:invalid:ring-red-500  text-sm leading-5.6 ease-in block w-full appearance-none rounded-lg border border-solid border-gray-300 bg-white bg-clip-padding px-1.5 py-1 md:px-3 md:py-2 font-normal text-gray-700 transition-all placeholder:text-gray-500 disabled:bg-gray-400 dark:disabled:bg-gray-800 dark:disabled:border-gray-800 dark:disabled:text-gray-300 disabled:text-gray-700;
+}
+
+.input-title {
+  @apply transition duration-300 ease-in-out dark:opacity-90 text-sm font-bold m-0 dark:text-gray-300;
+}
+
+.popover-settings-container {
+  @apply dark:brightness-90 transition z-50 rounded-md p-3 left-0 -translate-y-7 bottom-0 absolute bg-blue-500;
+}
+
+.popover-settings-text {
+  @apply transition duration-300 ease-in-out dark:opacity-90 font-bold text-sm text-white dark:text-gray-100 m-0;
+}
+
+.popover-settings-svg {
+  @apply cursor-pointer fill-blue-500 h-5 w-5 ml-2 hover:brightness-75;
+}
+/*--------------------------------------------*/
+/*---------------END SETTINGS_PLUGINS---------*/
+/*---------------------------------------------*/
+
+/*---------------------------------------------*/
+/*---------------SETTINGS_TABS-----------------*/
+/*---------------------------------------------*/
+
+.active.settings-tabs-tab-btn {
+  @apply border-primary dark:hover:bg-slate-800 dark:border-slate-600 dark:bg-slate-700 border my-1 relative inline-block px-3 py-3 font-bold text-center uppercase align-middle transition-all rounded-none cursor-pointer bg-white hover:bg-gray-100 leading-normal text-sm ease-in tracking-tight-rem shadow-xs hover:shadow-md brightness-90 z-10;
+}
+
+.settings-tabs-tab-btn {
+  @apply border-primary dark:hover:bg-slate-800 dark:border-slate-600 dark:bg-slate-700 border my-1 relative inline-block px-3 py-3 font-bold text-center uppercase align-middle transition-all rounded-none cursor-pointer bg-white hover:bg-gray-100 leading-normal text-sm ease-in tracking-tight-rem shadow-xs hover:shadow-md;
+}
+
+.settings-tabs-name {
+  @apply text-primary transition duration-300 ease-in-out dark:opacity-90 pl-3 pr-2 dark:text-gray-300;
+}
+
+.settings-tabs-popover-container {
+  @apply top-[60px] min-w-[150px] dark:brightness-90 bg-blue-500 transition z-50 rounded-md p-3 left-0 absolute;
+}
+
+.settings-tabs-popover-text {
+  @apply font-bold text-sm text-white m-0;
+}
+
+.settings-tabs-mobile-btn {
+  @apply dark:hover:brightness-95 dark:border-slate-600 dark:bg-slate-700  border-primary border w-full flex items-center justify-between rounded-lg hover:-translate-y-px my-1 px-6 py-3 font-bold text-center  uppercase align-middle transition-all cursor-pointer bg-white hover:bg-gray-50 leading-normal text-sm ease-in tracking-tight-rem shadow-xs hover:shadow-md;
+}
+
+.settings-tabs-mobile-btn-text {
+  @apply transition duration-300 ease-in-out dark:opacity-90 dark:text-gray-300 text-primary;
+}
+
+.active.settings-tabs-mobile-dropdown-btn {
+  @apply border-gray-300 dark:hover:brightness-90 hover:brightness-90 my-0 relative px-6 py-2 text-center align-middle transition-all rounded-none cursor-pointer leading-normal text-sm ease-in tracking-tight-rem dark:border-slate-600 dark:text-gray-300 z-[1000] dark:bg-primary bg-primary text-gray-300;
+}
+
+.first.settings-tabs-mobile-dropdown-btn {
+  @apply border-t rounded-t border-b border-l border-r;
+}
+
+.settings-tabs-mobile-dropdown-btn {
+  @apply flex justify-between border-b border-l border-r border-gray-300 dark:hover:brightness-90 hover:brightness-90  bg-white text-gray-700 my-0 relative px-6 py-2  text-center  align-middle transition-all rounded-none cursor-pointer leading-normal text-sm ease-in tracking-tight-rem dark:border-slate-600 dark:bg-slate-700 dark:text-gray-300;
+}
+
+/*---------------------------------------------*/
+/*---------------END SETTINGS_TABS-------------*/
+/*---------------------------------------------*/
diff --git a/src/ui/templates/flashs.html b/src/ui/templates/flashs.html
index 1297006c9..802fa72f5 100644
--- a/src/ui/templates/flashs.html
+++ b/src/ui/templates/flashs.html
@@ -1,7 +1,7 @@
 <!-- float button-->
 {% with messages = get_flashed_messages(with_categories=true) %}
 <div
-  class="group group-hover hover:brightness-75 dark:hover:brightness-105 fixed top-2 sm:top-3 right-19 sm:right-24 xl:right-24 z-990"
+  class="group group-hover hover:brightness-75 dark:hover:brightness-105 fixed top-2 sm:top-3 right-20 sm:right-24 xl:right-24 z-990"
 >
   <button
     type="button"
diff --git a/src/ui/templates/menu.html b/src/ui/templates/menu.html
index 88860a720..5a121be64 100644
--- a/src/ui/templates/menu.html
+++ b/src/ui/templates/menu.html
@@ -22,14 +22,14 @@
 
 <!-- left sidebar  -->
 <aside
-data-sidebar-menu
+  data-sidebar-menu
   class="fixed flex inset-y-0 flex-wrap justify-between w-full p-0 my-4 overflow-y-auto antialiased transition-transform duration-200 -translate-x-full bg-white border-0 shadow-xl dark:shadow-none dark:bg-slate-850 dark:brightness-110 max-w-64 z-[1000] xl:ml-6 rounded-2xl xl:left-0 xl:translate-x-0"
   aria-expanded="false"
 >
   <!-- close btn-->
   <svg
-  data-sidebar-menu-close
-    class="sm:hidden cursor-pointer fill-gray-600 dark:fill-gray-300 dark:opacity-80 absolute h-6 w-6 top-4 right-4"
+    data-sidebar-menu-close
+    class="xl:hidden cursor-pointer fill-gray-600 dark:fill-gray-300 dark:opacity-80 absolute h-6 w-6 top-4 right-4"
     xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 320 512"
   >
diff --git a/src/ui/templates/settings_plugins.html b/src/ui/templates/settings_plugins.html
index 01b218dcb..3fd6bb3d8 100644
--- a/src/ui/templates/settings_plugins.html
+++ b/src/ui/templates/settings_plugins.html
@@ -35,13 +35,13 @@ data-plugin-item="{{plugin['id']}}"
       <!-- title and info -->
       <div class="flex items-center my-1 relative z-10">
         <h5
-          class="transition duration-300 ease-in-out dark:opacity-90 text-sm sm:text-md font-bold m-0 dark:text-gray-300"
+          class="input-title"
         >
           {{value["label"]}}
         </h5>
         <svg
         data-popover-btn="{{ value["label"] }}"
-        class="cursor-pointer fill-blue-500 h-5 w-5 ml-2 hover:brightness-75"
+        class="popover-settings-svg"
         xmlns="http://www.w3.org/2000/svg"
         viewBox="0 0 512 512"
         >
@@ -50,10 +50,10 @@ data-plugin-item="{{plugin['id']}}"
           />
         </svg> 
         <!-- popover -->
-        <div  class="dark:brightness-90 hidden transition z-50 rounded-md p-3 left-0 -translate-y-7 bottom-0 absolute bg-blue-500"
+        <div  class="popover-settings-container  hidden"
         data-popover-content="{{ value["label"] }}"
         >
-          <p  class="transition duration-300 ease-in-out dark:opacity-90 font-bold text-sm text-white dark:text-gray-100 m-0" >{{value['help']}}
+          <p  class="popover-settings-text" >{{value['help']}}
           </p>
         </div>
         <!-- end popover -->
@@ -67,7 +67,7 @@ data-plugin-item="{{plugin['id']}}"
         {% if setting == "SERVER_NAME" %}required{%endif%}
         data-default-value="{{global_config[setting]['value']}}" data-default-method="{{global_config[setting]['method']}}"
         {% if global_config[setting]['method'] != 'ui' and global_config[setting]['method'] != 'default'  %} disabled {% endif %}     id="{{setting}}" name="{{setting}}"
-        class="outline-none dark:opacity-90 dark:border-slate-600 dark:bg-slate-700 dark:text-gray-300 disabled:opacity-75 focus:border-gray-300/0 focus:ring-1  focus:valid:ring-green-500 focus:invalid:ring-red-500  text-sm leading-5.6 ease block w-full appearance-none rounded-lg border border-solid border-gray-300 bg-white bg-clip-padding px-1.5 py-1 md:px-3 md:py-2 font-normal text-gray-700 transition-all placeholder:text-gray-500 disabled:bg-gray-400 dark:disabled:bg-gray-800 dark:disabled:border-gray-800 dark:disabled:text-gray-300 disabled:text-gray-700"
+        class="regular-input"
         value="{% if global_config[setting]['value'] %} {{global_config[setting]['value']}} {% else %} {{value['default']}} {% endif %}" type="{{value['type']}}"  pattern="{{value['regex']|safe}}" />
      
         {% if value['type'] == "password" %}
@@ -225,7 +225,7 @@ data-plugin-item="{{plugin['id']}}"
   <!-- plugin multiple handler -->
   <div data-multiple-handler class="flex items-center mx-0 sm:mx-4 md:mx-6 md:my-3 my-2 2xl:mx-6 2xl:my-3  col-span-12 ">
     <h5
-    class="transition duration-300 ease-in-out dark:opacity-90 text-sm sm:text-md font-bold m-0 dark:text-gray-300"
+    class="input-title"
     >
       {{multiple}}
     </h5>
@@ -246,19 +246,18 @@ data-plugin-item="{{plugin['id']}}"
       == "global-config" and value['context'] == "global" and value['multiple'] == multiple or current_endpoint ==
       "services" and value['context'] == "multisite" and value['multiple'] == multiple %}
     <div  data-setting-container="{{setting}}_SCHEMA"
-      class="    
-      mx-0 sm:mx-4  my-2 col-span-12 md:mx-6 md:my-3 md:col-span-6 2xl:mx-6 2xl:my-3 2xl:col-span-4"
+      class="mx-0 sm:mx-4  my-2 col-span-12 md:mx-6 md:my-3 md:col-span-6 2xl:mx-6 2xl:my-3 2xl:col-span-4"
       id="form-edit-{{current_endpoint}}-{{ value["id"] }}_SCHEMA">
       <!-- title and info -->
       <div class="flex items-center my-1 relative z-10">
         <h5
-          class="transition duration-300 ease-in-out dark:opacity-90 text-sm sm:text-md font-bold m-0 dark:text-gray-300"
+          class="input-title"
         >
           {{value["label"]}}
         </h5>
         <svg
         data-popover-btn="{{ value["label"] }}"
-        class="cursor-pointer fill-blue-500 h-5 w-5 ml-2 hover:brightness-75"
+        class="popover-settings-svg"
         xmlns="http://www.w3.org/2000/svg"
         viewBox="0 0 512 512"
         >
@@ -267,10 +266,10 @@ data-plugin-item="{{plugin['id']}}"
           />
         </svg> 
         <!-- popover -->
-        <div  class="dark:brightness-80 hidden transition z-50 rounded-md p-3 left-0 -translate-y-7 bottom-0 absolute bg-blue-500"
+        <div  class="popover-settings-container hidden"
         data-popover-content="{{ value["label"] }}"
         >
-          <p  class="transition duration-300 ease-in-out dark:opacity-90 font-bold text-sm text-white dark:text-gray-100 m-0" >{{value['help']}}
+          <p  class="popover-settings-text" >{{value['help']}}
           </p>
         </div>
         <!-- end popover -->
@@ -282,7 +281,7 @@ data-plugin-item="{{plugin['id']}}"
       <div class="relative flex items-center">
         <input
         data-default-value="{{value['default']}}" data-default-method="default" id="{{setting}}_SCHEMA" name="{{setting}}_SCHEMA"
-        class="outline-none dark:opacity-90 dark:border-slate-600 dark:bg-slate-700 dark:text-gray-300 disabled:opacity-75 focus:border-gray-300/0 focus:ring-1  focus:valid:ring-green-500 focus:invalid:ring-red-500  text-sm leading-5.6 ease block w-full appearance-none rounded-lg border border-solid border-gray-300 bg-white bg-clip-padding px-1.5 py-1 md:px-3 md:py-2 font-normal text-gray-700 transition-all placeholder:text-gray-500 disabled:bg-gray-400 dark:disabled:bg-gray-800 dark:disabled:border-gray-800 dark:disabled:text-gray-300 disabled:text-gray-700"
+        class="regular-input"
         value="{{value['default']}}" type="{{value['type']}}"  pattern="{{value['regex']|safe}}" />
      
         {% if value['type'] == "password" %}
diff --git a/src/ui/templates/settings_tabs.html b/src/ui/templates/settings_tabs.html
index a3572e777..2937e9c69 100644
--- a/src/ui/templates/settings_tabs.html
+++ b/src/ui/templates/settings_tabs.html
@@ -12,11 +12,11 @@
     <button role="tab"
     data-tab-handler="{{ plugin['id'] }}"
     type="button"
-    class="{% if loop.first %} brightness-90 z-[1001]{%else %} {% endif %} border-primary dark:hover:bg-slate-800 dark:border-slate-600 dark:bg-slate-700  border my-1 relative inline-block px-3 py-3 font-bold text-center uppercase align-middle transition-all rounded-none cursor-pointer bg-white hover:bg-gray-100 leading-normal text-sm ease-in tracking-tight-rem shadow-xs hover:shadow-md"
+    class="{% if loop.first %}active{% endif %} settings-tabs-tab-btn"
   >
     <span class="w-full flex justify-between items-center">
       <!-- text and icon -->
-      <span class="text-primary transition duration-300 ease-in-out dark:opacity-90 pl-3 pr-2 dark:text-gray-300"> {{ plugin["name"] }} </span>
+      <span class="settings-tabs-name"> {{ plugin["name"] }} </span>
       <svg
       data-popover-btn="{{ plugin["name"] }}"
         class=" fill-blue-500 h-5 w-5 mr-2 hover:brightness-95"
@@ -31,9 +31,9 @@
       <!-- popover -->
       <span
       data-popover-content="{{ plugin["name"] }}"
-        class="top-[60px] min-w-[150px] dark:brightness-90 bg-blue-500 hidden transition z-50 rounded-md p-3 left-0 absolute"
+        class="settings-tabs-popover-container hidden"
       >
-        <span class="font-bold text-sm text-white m-0">{{ plugin['description'] }}</span>
+        <span class="settings-tabs-popover-text">{{ plugin['description'] }}</span>
       </span>
       <!-- end popover -->
     </span>
@@ -47,9 +47,9 @@
   <button
   data-tab-dropdown-btn 
     type="button"
-    class="dark:hover:brightness-95 dark:border-slate-600 dark:bg-slate-700  border-primary border w-full flex items-center justify-between rounded-lg hover:-translate-y-px my-1 px-6 py-3 font-bold text-center  uppercase align-middle transition-all cursor-pointer bg-white hover:bg-gray-50 leading-normal text-sm ease-in tracking-tight-rem shadow-xs hover:shadow-md"
+    class="settings-tabs-mobile-btn"
   >
-    <span class="transition duration-300 ease-in-out dark:opacity-90 dark:text-gray-300 text-primary">{% if current_endpoint == "global-config" %}general {% endif %} </span>
+    <span class="settings-tabs-mobile-btn-text">{% if current_endpoint == "global-config" %}general {% endif %} </span>
     <!-- chevron -->
     <svg
       
@@ -66,7 +66,7 @@
   <!-- dropdown-->
   <div
   data-tab-dropdown
-    class="hidden z-100 absolute flex-col w-full overflow-hidden overflow-y-auto  max-h-90"
+    class="hidden z-100 absolute flex-col w-full overflow-hidden overflow-y-auto max-h-90"
   >
   {% set first_el = "True" %}
   {% for plugin in plugins %}  {% if current_endpoint == "services" and plugin["settings"]
@@ -79,7 +79,7 @@
     type="button"
     data-select="false"
     id="edit-{{current_endpoint}}-{{ plugin['id'] }}-tab"
-    class="flex justify-between border-t rounded-t border-b border-l border-r border-gray-300 dark:hover:brightness-90 hover:brightness-90 my-0 relative px-6 py-2 text-center align-middle transition-all rounded-none cursor-pointer leading-normal text-sm ease-in tracking-tight-rem dark:border-slate-600 dark:text-gray-300 z-1000 dark:bg-primary bg-primary text-gray-300">
+    class="active first settings-tabs-mobile-dropdown-btn">
     {{ plugin["name"] }}
   </button>
   {% else %}
@@ -88,7 +88,7 @@
     type="button"
     data-select="false"
     id="edit-{{current_endpoint}}-{{ plugin['id'] }}-tab"
-    class="flex justify-between {% if loop.index == loop.length %}rounded-b {% endif %} border-b border-l border-r border-gray-300 dark:hover:brightness-90 hover:brightness-90  bg-white text-gray-700 my-0 relative px-6 py-2  text-center  align-middle transition-all rounded-none cursor-pointer leading-normal text-sm ease-in tracking-tight-rem dark:border-slate-600 dark:bg-slate-700 dark:text-gray-300">
+    class="settings-tabs-mobile-dropdown-btn {% if loop.index == loop.length %}rounded-b {% endif %}">
     {{ plugin["name"] }}
  
   </button>