enhance actions btns

This commit is contained in:
BlasenhauerJ 2023-04-28 11:57:54 +02:00
parent c6a184d90a
commit 81a37a3778
10 changed files with 365 additions and 122 deletions

View File

@ -1088,10 +1088,6 @@ h6 {
margin-top: 2rem;
}
.ml-0\.5 {
margin-left: 0.125rem;
}
.block {
display: block;
}
@ -1112,10 +1108,6 @@ h6 {
display: grid;
}
.\!hidden {
display: none !important;
}
.hidden {
display: none;
}
@ -1148,6 +1140,10 @@ h6 {
height: 1rem;
}
.h-4\.5 {
height: 1.125rem;
}
.h-40 {
height: 10rem;
}
@ -1192,10 +1188,6 @@ h6 {
height: calc(100vh - 360px);
}
.h-4\.5 {
height: 1.125rem;
}
.max-h-100 {
max-height: 25rem;
}
@ -1288,6 +1280,10 @@ h6 {
width: 1rem;
}
.w-4\.5 {
width: 1.125rem;
}
.w-40 {
width: 10rem;
}
@ -1336,10 +1332,6 @@ h6 {
width: 100vw;
}
.w-4\.5 {
width: 1.125rem;
}
.min-w-0 {
min-width: 0px;
}
@ -2320,11 +2312,19 @@ h6 {
color: rgb(108 117 125 / var(--tw-text-opacity));
}
.text-gray-600\/90 {
color: rgb(108 117 125 / 0.9);
}
.text-gray-700 {
--tw-text-opacity: 1;
color: rgb(73 80 87 / var(--tw-text-opacity));
}
.text-gray-700\/80 {
color: rgb(73 80 87 / 0.8);
}
.text-green-500 {
--tw-text-opacity: 1;
color: rgb(34 197 94 / var(--tw-text-opacity));
@ -2360,42 +2360,6 @@ h6 {
color: rgb(251 177 64 / var(--tw-text-opacity));
}
.text-\[\#344767\] {
--tw-text-opacity: 1;
color: rgb(52 71 103 / var(--tw-text-opacity));
}
.text-black {
--tw-text-opacity: 1;
color: rgb(0 0 0 / var(--tw-text-opacity));
}
.text-gray-800 {
--tw-text-opacity: 1;
color: rgb(37 47 64 / var(--tw-text-opacity));
}
.text-gray-700\/80 {
color: rgb(73 80 87 / 0.8);
}
.text-gray-800\/80 {
color: rgb(37 47 64 / 0.8);
}
.text-gray-600\/80 {
color: rgb(108 117 125 / 0.8);
}
.text-gray-600\/90 {
color: rgb(108 117 125 / 0.9);
}
.text-gray-500 {
--tw-text-opacity: 1;
color: rgb(173 181 189 / var(--tw-text-opacity));
}
.antialiased {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
@ -2517,6 +2481,267 @@ h6 {
flex-wrap: inherit;
}
.close-btn {
display: inline-block;
cursor: pointer;
border-radius: 0.5rem;
border-width: 1px;
--tw-border-opacity: 1;
border-color: rgb(245 57 57 / 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-weight: 700;
text-transform: uppercase;
line-height: 1.5;
letter-spacing: -0.025rem;
--tw-text-opacity: 1;
color: rgb(245 57 57 / var(--tw-text-opacity));
--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);
}
.close-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));
background-color: rgb(255 255 255 / 0.8);
--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);
}
.close-btn:focus {
background-color: rgb(255 255 255 / 0.8);
}
.close-btn:active {
opacity: 0.85;
}
:is(.dark .close-btn) {
--tw-bg-opacity: 1;
background-color: rgb(233 236 239 / var(--tw-bg-opacity));
--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 .close-btn: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);
}
.valid-btn {
display: inline-block;
cursor: pointer;
border-radius: 0.5rem;
--tw-bg-opacity: 1;
background-color: rgb(34 197 94 / 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-weight: 700;
text-transform: uppercase;
line-height: 1.5;
letter-spacing: 0.025em;
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
--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);
}
.valid-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));
background-color: rgb(34 197 94 / 0.8);
--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);
}
.valid-btn:focus {
background-color: rgb(34 197 94 / 0.8);
}
.valid-btn:active {
opacity: 0.85;
}
:is(.dark .valid-btn) {
--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);
}
.delete-btn {
display: inline-block;
cursor: pointer;
border-radius: 0.5rem;
--tw-bg-opacity: 1;
background-color: rgb(245 57 57 / 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-weight: 700;
text-transform: uppercase;
line-height: 1.5;
letter-spacing: 0.025em;
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
--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);
}
.delete-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));
background-color: rgb(245 57 57 / 0.8);
--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);
}
.delete-btn:focus {
background-color: rgb(245 57 57 / 0.8);
}
.delete-btn:active {
opacity: 0.85;
}
:is(.dark .delete-btn) {
--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);
}
.edit-btn {
display: inline-block;
cursor: pointer;
border-radius: 0.5rem;
--tw-bg-opacity: 1;
background-color: rgb(251 177 64 / 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-weight: 700;
text-transform: uppercase;
line-height: 1.5;
letter-spacing: 0.025em;
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
--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);
}
.edit-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));
background-color: rgb(251 177 64 / 0.8);
--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);
}
.edit-btn:focus {
background-color: rgb(251 177 64 / 0.8);
}
.edit-btn:active {
opacity: 0.85;
}
:is(.dark .edit-btn) {
--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);
}
.info-btn {
display: inline-block;
cursor: pointer;
border-radius: 0.5rem;
--tw-bg-opacity: 1;
background-color: rgb(14 165 233 / 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-weight: 700;
text-transform: uppercase;
line-height: 1.5;
letter-spacing: 0.025em;
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
--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);
}
.info-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));
background-color: rgb(14 165 233 / 0.8);
--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);
}
.info-btn:focus {
background-color: rgb(14 165 233 / 0.8);
}
.info-btn:active {
opacity: 0.85;
}
:is(.dark .info-btn) {
--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_PLUGINS---------------*/
/*----------------------------------------------*/
.checkbox {
position: relative;
z-index: 10;
@ -2604,12 +2829,6 @@ h6 {
color: rgb(210 214 218 / var(--tw-text-opacity));
}
/*----------------------------------------------*/
/*---------------SETTINGS_PLUGINS---------------*/
/*----------------------------------------------*/
.custom-select-btn {
display: flex;
width: 100%;
@ -3401,18 +3620,6 @@ h6 {
color: rgb(108 117 125 / var(--tw-text-opacity));
}
.after\:text-gray-500::after {
content: var(--tw-content);
--tw-text-opacity: 1;
color: rgb(173 181 189 / var(--tw-text-opacity));
}
.after\:text-gray-700::after {
content: var(--tw-content);
--tw-text-opacity: 1;
color: rgb(73 80 87 / var(--tw-text-opacity));
}
.after\:shadow-2xl::after {
content: var(--tw-content);
--tw-shadow: 0 .3125rem .625rem 0 rgba(0,0,0,.12);
@ -3742,10 +3949,6 @@ h6 {
fill: #adb5bd;
}
:is(.dark .dark\:fill-gray-700) {
fill: #495057;
}
:is(.dark .dark\:fill-gray-600) {
fill: #6c757d;
}
@ -3793,15 +3996,6 @@ h6 {
color: rgb(255 255 255 / 0.8);
}
:is(.dark .dark\:text-gray-600) {
--tw-text-opacity: 1;
color: rgb(108 117 125 / var(--tw-text-opacity));
}
:is(.dark .dark\:opacity-50) {
opacity: 0.5;
}
:is(.dark .dark\:opacity-60) {
opacity: 0.6;
}
@ -3861,12 +4055,6 @@ h6 {
color: rgb(173 181 189 / var(--tw-text-opacity));
}
:is(.dark .dark\:after\:text-gray-600)::after {
content: var(--tw-content);
--tw-text-opacity: 1;
color: rgb(108 117 125 / var(--tw-text-opacity));
}
:is(.dark .dark\:checked\:border-primary:checked) {
--tw-border-opacity: 1;
border-color: rgb(8 85 119 / var(--tw-border-opacity));

View File

@ -75,7 +75,7 @@ class ServiceModal {
this.updateModalData(obj);
//show modal
this.resetFilterInp();
this.changeSubmitBtnName("EDIT");
this.changeSubmitBtn("EDIT", "edit-btn");
this.openModal();
}
} catch (err) {}
@ -98,7 +98,7 @@ class ServiceModal {
//show modal
this.resetFilterInp();
this.changeSubmitBtnName("CREATE");
this.changeSubmitBtn("CREATE", "valid-btn");
this.openModal();
}
} catch (err) {}
@ -124,8 +124,15 @@ class ServiceModal {
inpFilter.dispatchEvent(new Event("input"));
}
changeSubmitBtnName(text) {
changeSubmitBtn(text, btnType) {
this.submitBtn.textContent = text;
this.submitBtn.classList.remove(
"delete-btn",
"valid-btn",
"edit-btn",
"info-btn"
);
this.submitBtn.classList.add(btnType);
}
setSettingsDefault() {

View File

@ -565,12 +565,46 @@ class FolderModal {
//submit text depending action
setSubmitTxt(action) {
if (action === "new") return (this.modalSubmit.textContent = "add");
if (action === "view") return (this.modalSubmit.textContent = "ok");
if (action === "edit") return (this.modalSubmit.textContent = "edit");
if (action === "delete") return (this.modalSubmit.textContent = "delete");
if (action === "download")
return (this.modalSubmit.textContent = "download");
this.delSubmitBtnType();
if (action === "new") {
this.modalSubmit.textContent = "add";
this.setSubmitBtnType("valid-btn");
return;
}
if (action === "view") {
this.modalSubmit.textContent = "ok";
this.setSubmitBtnType("valid-btn");
return;
}
if (action === "edit") {
this.setSubmitBtnType("edit-btn");
this.modalSubmit.textContent = "edit";
return;
}
if (action === "delete") {
this.setSubmitBtnType("delete-btn");
this.modalSubmit.textContent = "delete";
return;
}
if (action === "download") {
this.setSubmitBtnType("info-btn");
this.modalSubmit.textContent = "download";
return;
}
}
setSubmitBtnType(btnType) {
this.modalSubmit.classList.add(btnType);
}
delSubmitBtnType() {
this.modalSubmit.classList.remove(
"delete-btn",
"valid-btn",
"edit-btn",
"info-btn"
);
}
//show only if type file and display text

View File

@ -2,6 +2,30 @@
@tailwind components;
@tailwind utilities;
.close-btn {
@apply dark:brightness-90 inline-block px-6 py-3 font-bold text-center text-red-500 border border-red-500 uppercase align-middle transition-all rounded-lg cursor-pointer dark:bg-gray-200 dark:hover:brightness-75 bg-white hover:bg-white/80 focus:bg-white/80 leading-normal ease-in tracking-tight-rem shadow-xs hover:-translate-y-px active:opacity-85 hover:shadow-md;
}
.valid-btn {
@apply tracking-wide dark:brightness-90 inline-block px-6 py-3 font-bold text-center text-white uppercase align-middle transition-all rounded-lg cursor-pointer bg-green-500 hover:bg-green-500/80 focus:bg-green-500/80 leading-normal ease-in shadow-xs hover:-translate-y-px active:opacity-85 hover:shadow-md;
}
.delete-btn {
@apply tracking-wide dark:brightness-90 inline-block px-6 py-3 font-bold text-center text-white uppercase align-middle transition-all rounded-lg cursor-pointer bg-red-500 hover:bg-red-500/80 focus:bg-red-500/80 leading-normal ease-in shadow-xs hover:-translate-y-px active:opacity-85 hover:shadow-md;
}
.edit-btn {
@apply tracking-wide dark:brightness-90 inline-block px-6 py-3 font-bold text-center text-white uppercase align-middle transition-all rounded-lg cursor-pointer bg-yellow-500 hover:bg-yellow-500/80 focus:bg-yellow-500/80 leading-normal ease-in shadow-xs hover:-translate-y-px active:opacity-85 hover:shadow-md;
}
.info-btn {
@apply tracking-wide dark:brightness-90 inline-block px-6 py-3 font-bold text-center text-white uppercase align-middle transition-all rounded-lg cursor-pointer bg-sky-500 hover:bg-sky-500/80 focus:bg-sky-500/80 leading-normal ease-in shadow-xs hover:-translate-y-px active:opacity-85 hover:shadow-md;
}
/*----------------------------------------------*/
/*---------------SETTINGS_PLUGINS---------------*/
/*----------------------------------------------*/
.checkbox {
@apply cursor-pointer disabled:cursor-default
relative dark:border-slate-600 dark:bg-slate-700 z-10 aria-checked:z-0 w-5 h-5
@ -18,9 +42,6 @@
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;
}

View File

@ -432,14 +432,14 @@ data-{{current_endpoint}}-modal
<button
data-{{current_endpoint}}-modal-close
type="button"
class="dark:brightness-90 mr-3 inline-block px-6 py-3 font-bold text-center text-white uppercase align-middle transition-all rounded-lg cursor-pointer bg-red-500 hover:bg-red-500/80 focus:bg-red-500/80 leading-normal text-xs ease-in tracking-tight-rem shadow-xs bg-150 bg-x-25 hover:-translate-y-px active:opacity-85 hover:shadow-md"
class="close-btn text-xs mr-2"
>
Close
</button>
<button
data-{{current_endpoint}}-modal-submit
type="submit"
class="dark:brightness-90 inline-block px-6 py-3 font-bold text-center text-white uppercase align-middle transition-all rounded-lg cursor-pointer bg-sky-500 hover:bg-sky-500/80 focus:bg-sky-500/80 leading-normal text-xs ease-in tracking-tight-rem shadow-xs bg-150 bg-x-25 hover:-translate-y-px active:opacity-85 hover:shadow-md"
class="valid-btn text-xs"
>
Save
</button>

View File

@ -42,7 +42,7 @@
<div class="flex w-full justify-center mt-8 mb-2">
<button
type="submit"
class="tracking-wide dark:brightness-90 inline-block px-6 py-3 font-bold text-center text-white uppercase align-middle transition-all rounded-lg cursor-pointer bg-green-500 hover:bg-green-500/80 focus:bg-green-500/80 leading-normal text-md ease-in shadow-xs bg-150 bg-x-25 hover:-translate-y-px active:opacity-85 hover:shadow-md"
class="valid-btn"
>
SAVE
</button>

View File

@ -70,7 +70,7 @@ instances_batched %}
type="submit"
name="operation"
value="restart"
class="dark:brightness-90 z-20 mx-1 bg-yellow-500 hover:bg-yellow-500/80 focus:bg-yellow-500/80 inline-block px-6 py-3 font-bold text-center text-white uppercase align-middle transition-all rounded-lg cursor-pointer leading-normal text-xs ease-in tracking-tight-rem shadow-xs bg-150 bg-x-25 hover:-translate-y-px active:opacity-85 hover:shadow-md"
class="edit-btn mx-1 text-xs"
>
Restart
</button>
@ -78,7 +78,7 @@ instances_batched %}
type="submit"
name="operation"
value="stop"
class="dark:brightness-90 z-20 mx-1 bg-red-500 hover:bg-red-500/80 focus:bg-red-500/80 inline-block px-6 py-3 font-bold text-center text-white uppercase align-middle transition-all rounded-lg cursor-pointer leading-normal text-xs ease-in tracking-tight-rem shadow-xs bg-150 bg-x-25 hover:-translate-y-px active:opacity-85 hover:shadow-md"
class="delete-btn mx-1 text-xs"
>
Stop
</button>
@ -88,7 +88,7 @@ instances_batched %}
type="submit"
name="operation"
value="reload"
class="dark:brightness-90 z-20 mx-1 bg-yellow-500 hover:bg-yellow-500/80 focus:bg-yellow-500/80 inline-block px-6 py-3 font-bold text-center text-white uppercase align-middle transition-all rounded-lg cursor-pointer leading-normal text-xs ease-in tracking-tight-rem shadow-xs bg-150 bg-x-25 hover:-translate-y-px active:opacity-85 hover:shadow-md"
class="edit-btn mx-1 text-xs"
>
Reload
</button>
@ -96,7 +96,7 @@ instances_batched %}
type="submit"
name="operation"
value="stop"
class="dark:brightness-90 z-20 mx-1 bg-red-500 hover:bg-red-500/80 focus:bg-red-500/80 inline-block px-6 py-3 font-bold text-center text-white uppercase align-middle transition-all rounded-lg cursor-pointer leading-normal text-xs ease-in tracking-tight-rem shadow-xs bg-150 bg-x-25 hover:-translate-y-px active:opacity-85 hover:shadow-md"
class="delete-btn mx-1 text-xs"
>
Stop
</button>
@ -107,7 +107,7 @@ instances_batched %}
type="submit"
name="operation"
value="start"
class="dark:brightness-90 z-20 mx-1 bg-green-500 hover:bg-green-500/80 focus:bg-green-500/80 inline-block px-6 py-3 font-bold text-center text-white uppercase align-middle transition-all rounded-lg cursor-pointer leading-normal text-xs ease-in tracking-tight-rem shadow-xs bg-150 bg-x-25 hover:-translate-y-px active:opacity-85 hover:shadow-md"
class="valid-btn mx-1 text-xs"
>
Start
</button>

View File

@ -360,7 +360,7 @@ url_for(request.endpoint)[1:].split("/")[-1].strip() %}
>
<span class="flex justify-start items-center">
<svg
class="h-6 w-6 fill-sky-500"
class="h-5 w-5 fill-sky-500 mr-1"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
>

View File

@ -343,7 +343,7 @@
type="button"
data-services-name="{{service["SERVER_NAME"]['value']}}"
class="dark:brightness-90 z-20 mx-1 bg-blue-500 hover:bg-blue-500/80 focus:bg-yellow-500/80 inline-block p-3 font-bold text-center text-white uppercase align-middle transition-all rounded-lg cursor-pointer leading-normal text-xs ease-in tracking-tight-rem shadow-xs bg-150 bg-x-25 active:opacity-85 hover:shadow-md"
class="dark:brightness-90 z-20 mx-1 bg-yellow-500 hover:bg-yellow-500/80 focus:bg-yellow-500/80 inline-block p-3 font-bold text-center text-white uppercase align-middle transition-all rounded-lg cursor-pointer leading-normal text-xs ease-in tracking-tight-rem shadow-xs bg-150 bg-x-25 active:opacity-85 hover:shadow-md"
>
<svg class="h-6 w-6 fill-white"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">

View File

@ -71,15 +71,11 @@
<button
data-services-modal-close
type="button"
class="dark:brightness-90 mb-4 mr-3 inline-block px-6 py-3 font-bold text-center text-white uppercase align-middle transition-all rounded-lg cursor-pointer bg-sky-500 hover:bg-sky-500/80 focus:bg-sky-500/80 leading-normal text-md ease-in tracking-tight-rem shadow-xs bg-150 bg-x-25 hover:-translate-y-px active:opacity-85 hover:shadow-md"
class="close-btn mb-4 mr-3 text-base"
>
Close
</button>
<button
data-services-modal-submit
type="submit"
class="dark:brightness-90 mb-4 inline-block px-6 py-3 font-bold text-center text-white uppercase align-middle transition-all rounded-lg cursor-pointer bg-green-500 hover:bg-green-500/80 focus:bg-green-500/80 leading-normal text-md ease-in tracking-tight-rem shadow-xs bg-150 bg-x-25 hover:-translate-y-px active:opacity-85 hover:shadow-md"
>
<button data-services-modal-submit type="submit" class="mb-4 valid-btn">
Save
</button>
</div>
@ -108,14 +104,11 @@
<button
data-services-modal-close
type="button"
class="dark:brightness-90 mr-3 inline-block px-6 py-3 font-bold text-center text-white uppercase align-middle transition-all rounded-lg cursor-pointer bg-sky-500 hover:bg-sky-500/80 focus:bg-sky-500/80 leading-normal text-md ease-in tracking-tight-rem shadow-xs bg-150 bg-x-25 hover:-translate-y-px active:opacity-85 hover:shadow-md"
class="close-btn mb-4 mr-3 text-base"
>
Close
</button>
<button
type="submit"
class="dark:brightness-90 inline-block px-6 py-3 font-bold text-center text-white uppercase align-middle transition-all rounded-lg cursor-pointer bg-red-500 hover:bg-red-500/80 focus:bg-red-500/80 leading-normal text-md ease-in tracking-tight-rem shadow-xs bg-150 bg-x-25 hover:-translate-y-px active:opacity-85 hover:shadow-md"
>
<button type="submit" class="delete-btn mb-4 mr-3 text-base">
Delete
</button>
</div>