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
This commit is contained in:
BlasenhauerJ
parent
4144faa93b
commit
001a63efc3
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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-------------*/
|
||||
/*---------------------------------------------*/
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
>
|
||||
|
|
|
|||
|
|
@ -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" %}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue