diff --git a/public/css/main-site.min.css b/public/css/main-site.min.css index 36446b8..349a4f1 100644 --- a/public/css/main-site.min.css +++ b/public/css/main-site.min.css @@ -223,6 +223,9 @@ } } @layer utilities { + .pointer-events-none { + pointer-events: none; + } .visible { visibility: visible; } @@ -241,12 +244,39 @@ .inset-0 { inset: calc(var(--spacing) * 0); } + .top-1 { + top: calc(var(--spacing) * 1); + } + .top-2 { + top: calc(var(--spacing) * 2); + } + .top-4 { + top: calc(var(--spacing) * 4); + } + .right-2 { + right: calc(var(--spacing) * 2); + } + .right-4 { + right: calc(var(--spacing) * 4); + } + .bottom-4 { + bottom: calc(var(--spacing) * 4); + } + .left-1 { + left: calc(var(--spacing) * 1); + } .z-2 { z-index: 2; } .z-50 { z-index: 50; } + .z-\[1000\] { + z-index: 1000; + } + .z-\[99998\] { + z-index: 99998; + } .container { width: 100%; @media (width >= 40rem) { @@ -340,18 +370,45 @@ .h-4 { height: calc(var(--spacing) * 4); } + .h-6 { + height: calc(var(--spacing) * 6); + } .h-10 { height: calc(var(--spacing) * 10); } .h-24 { height: calc(var(--spacing) * 24); } + .h-28 { + height: calc(var(--spacing) * 28); + } + .h-32 { + height: calc(var(--spacing) * 32); + } .h-48 { height: calc(var(--spacing) * 48); } + .h-\[7vh\] { + height: 7vh; + } + .h-\[30vh\] { + height: 30vh; + } + .h-\[35vh\] { + height: 35vh; + } + .h-\[40vh\] { + height: 40vh; + } + .h-\[75vh\] { + height: 75vh; + } .h-full { height: 100%; } + .max-h-\[80vh\] { + max-height: 80vh; + } .max-h-\[calc\(95vh-10rem\)\] { max-height: calc(95vh - 10rem); } @@ -379,6 +436,9 @@ .w-10 { width: calc(var(--spacing) * 10); } + .w-16 { + width: calc(var(--spacing) * 16); + } .w-20 { width: calc(var(--spacing) * 20); } @@ -391,9 +451,18 @@ .max-w-7xl { max-width: var(--container-7xl); } + .max-w-\[150px\] { + max-width: 150px; + } + .max-w-full { + max-width: 100%; + } .max-w-md { max-width: var(--container-md); } + .max-w-xl { + max-width: var(--container-xl); + } .min-w-0 { min-width: calc(var(--spacing) * 0); } @@ -409,9 +478,20 @@ .border-collapse { border-collapse: collapse; } + .-translate-y-2 { + --tw-translate-y: calc(var(--spacing) * -2); + translate: var(--tw-translate-x) var(--tw-translate-y); + } + .translate-y-2 { + --tw-translate-y: calc(var(--spacing) * 2); + translate: var(--tw-translate-x) var(--tw-translate-y); + } .transform { transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,); } + .animate-spin { + animation: var(--animate-spin); + } .cursor-not-allowed { cursor: not-allowed; } @@ -433,6 +513,9 @@ .flex-col { flex-direction: column; } + .flex-col-reverse { + flex-direction: column-reverse; + } .flex-row { flex-direction: row; } @@ -454,6 +537,9 @@ .justify-end { justify-content: flex-end; } + .gap-1 { + gap: calc(var(--spacing) * 1); + } .gap-2 { gap: calc(var(--spacing) * 2); } @@ -534,6 +620,18 @@ border-style: var(--tw-border-style); border-width: 1px; } + .border-1 { + border-style: var(--tw-border-style); + border-width: 1px; + } + .border-2 { + border-style: var(--tw-border-style); + border-width: 2px; + } + .border-4 { + border-style: var(--tw-border-style); + border-width: 4px; + } .border-t { border-top-style: var(--tw-border-style); border-top-width: 1px; @@ -542,12 +640,25 @@ border-bottom-style: var(--tw-border-style); border-bottom-width: 1px; } + .border-none { + --tw-border-style: none; + border-style: none; + } .border-\[rgba\(255\,255\,255\,0\.12\)\] { border-color: rgba(255,255,255,0.12); } .border-\[rgba\(255\,255\,255\,0\.15\)\] { border-color: rgba(255,255,255,0.15); } + .border-blue-400 { + border-color: var(--color-blue-400); + } + .border-gray-700 { + border-color: var(--color-gray-700); + } + .border-t-blue-600 { + border-top-color: var(--color-blue-600); + } .bg-\[rgba\(10\,17\,40\,0\.3\)\] { background-color: rgba(10,17,40,0.3); } @@ -557,9 +668,21 @@ .bg-black { background-color: var(--color-black); } + .bg-black\/75 { + background-color: color-mix(in srgb, #000 75%, transparent); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--color-black) 75%, transparent); + } + } + .bg-blue-400 { + background-color: var(--color-blue-400); + } .bg-blue-600 { background-color: var(--color-blue-600); } + .bg-blue-800 { + background-color: var(--color-blue-800); + } .bg-cyan-600 { background-color: var(--color-cyan-600); } @@ -578,6 +701,9 @@ background-color: color-mix(in oklab, var(--color-gray-800) 40%, transparent); } } + .bg-gray-900 { + background-color: var(--color-gray-900); + } .bg-green-600 { background-color: var(--color-green-600); } @@ -593,13 +719,27 @@ .bg-teal-600 { background-color: var(--color-teal-600); } + .bg-transparent { + background-color: transparent; + } .bg-white { background-color: var(--color-white); } + .bg-yellow-500 { + background-color: var(--color-yellow-500); + } .bg-gradient-to-r { --tw-gradient-position: to right in oklab; background-image: linear-gradient(var(--tw-gradient-stops)); } + .from-blue-600 { + --tw-gradient-from: var(--color-blue-600); + --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); + } + .from-blue-700 { + --tw-gradient-from: var(--color-blue-700); + --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); + } .from-teal-400 { --tw-gradient-from: var(--color-teal-400); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); @@ -611,6 +751,9 @@ .bg-clip-text { background-clip: text; } + .p-1 { + padding: calc(var(--spacing) * 1); + } .p-2 { padding: calc(var(--spacing) * 2); } @@ -635,12 +778,21 @@ .px-4 { padding-inline: calc(var(--spacing) * 4); } + .py-0 { + padding-block: calc(var(--spacing) * 0); + } + .py-0\.5 { + padding-block: calc(var(--spacing) * 0.5); + } .py-1 { padding-block: calc(var(--spacing) * 1); } .py-2 { padding-block: calc(var(--spacing) * 2); } + .py-4 { + padding-block: calc(var(--spacing) * 4); + } .py-8 { padding-block: calc(var(--spacing) * 8); } @@ -656,6 +808,9 @@ .text-center { text-align: center; } + .font-\[Minecraft\] { + font-family: Minecraft; + } .text-2xl { font-size: var(--text-2xl); line-height: var(--tw-leading, var(--text-2xl--line-height)); @@ -754,6 +909,13 @@ .opacity-90 { opacity: 90%; } + .opacity-100 { + opacity: 100%; + } + .shadow-lg { + --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); + box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); + } .shadow-md { --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); @@ -864,6 +1026,13 @@ } } } + .hover\:bg-yellow-600 { + &:hover { + @media (hover: hover) { + background-color: var(--color-yellow-600); + } + } + } .hover\:bg-gradient-to-r { &:hover { @media (hover: hover) { @@ -1508,6 +1677,21 @@ footer a:hover { width: 180px; } } +@property --tw-translate-x { + syntax: "*"; + inherits: false; + initial-value: 0; +} +@property --tw-translate-y { + syntax: "*"; + inherits: false; + initial-value: 0; +} +@property --tw-translate-z { + syntax: "*"; + inherits: false; + initial-value: 0; +} @property --tw-rotate-x { syntax: "*"; inherits: false; @@ -1772,6 +1956,9 @@ footer a:hover { @layer properties { @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { *, ::before, ::after, ::backdrop { + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-translate-z: 0; --tw-rotate-x: initial; --tw-rotate-y: initial; --tw-rotate-z: initial; diff --git a/public/css/style.css b/public/css/style.css index 2bf006d..86ae4cc 100644 --- a/public/css/style.css +++ b/public/css/style.css @@ -211,14 +211,14 @@ #dockerLogsTerminal { @apply bg-gray-900 p-4 rounded-lg w-full max-w-full box-border; - height: 250px; + height: 300px; overflow-y: hidden; overflow-x: hidden; } .xterm .xterm-viewport { @apply overflow-y-auto; - height: 250px; + height: 300px; scrollbar-width: thin; scrollbar-color: #3b82f6 #1f2937; } @@ -293,8 +293,8 @@ #sftpIframe { @apply w-full rounded; - height: 50vh; - min-height: 300px; + height: 70vh; + min-height: 350px; } #propertiesSearch { @@ -452,7 +452,7 @@ } #sftpIframe { - @apply h-[40vh] min-h-[300px]; + @apply h-[40vh] min-h-[400px]; } #consoleOutput { diff --git a/public/css/style.min.css b/public/css/style.min.css index afddc5c..f2a6d20 100644 --- a/public/css/style.min.css +++ b/public/css/style.min.css @@ -325,12 +325,6 @@ .inline-block { display: inline-block; } - .table { - display: table; - } - .h-0 { - height: calc(var(--spacing) * 0); - } .h-0\.5 { height: calc(var(--spacing) * 0.5); } @@ -355,15 +349,9 @@ .min-h-full { min-height: 100%; } - .w-1 { - width: calc(var(--spacing) * 1); - } .w-1\/3 { width: calc(1/3 * 100%); } - .w-2 { - width: calc(var(--spacing) * 2); - } .w-2\/3 { width: calc(2/3 * 100%); } @@ -403,9 +391,6 @@ .flex-grow { flex-grow: 1; } - .border-collapse { - border-collapse: collapse; - } .transform { transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,); } @@ -661,10 +646,6 @@ font-size: var(--text-3xl); line-height: var(--tw-leading, var(--text-3xl--line-height)); } - .text-4xl { - font-size: var(--text-4xl); - line-height: var(--tw-leading, var(--text-4xl--line-height)); - } .text-5xl { font-size: var(--text-5xl); line-height: var(--tw-leading, var(--text-5xl--line-height)); @@ -755,10 +736,6 @@ --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } - .outline { - outline-style: var(--tw-outline-style); - outline-width: 1px; - } .filter { 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,); } @@ -1207,13 +1184,13 @@ border-radius: var(--radius-lg); background-color: var(--color-gray-900); padding: calc(var(--spacing) * 4); - height: 250px; + height: 300px; overflow-y: hidden; overflow-x: hidden; } .xterm .xterm-viewport { overflow-y: auto; - height: 250px; + height: 300px; scrollbar-width: thin; scrollbar-color: #3b82f6 #1f2937; } @@ -1325,8 +1302,8 @@ #sftpIframe { width: 100%; border-radius: 0.25rem; - height: 50vh; - min-height: 300px; + height: 70vh; + min-height: 350px; } #propertiesSearch { width: 100%; @@ -1582,7 +1559,7 @@ } #sftpIframe { height: 40vh; - min-height: 300px; + min-height: 400px; } #consoleOutput { height: calc(var(--spacing) * 32); @@ -1901,11 +1878,6 @@ inherits: false; initial-value: 0 0 #0000; } -@property --tw-outline-style { - syntax: "*"; - inherits: false; - initial-value: solid; -} @property --tw-blur { syntax: "*"; inherits: false; @@ -2060,7 +2032,6 @@ --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; - --tw-outline-style: solid; --tw-blur: initial; --tw-brightness: initial; --tw-contrast: initial; diff --git a/public/screenshots/panel.png b/public/screenshots/panel.png index b6d0c82..3951b4c 100644 Binary files a/public/screenshots/panel.png and b/public/screenshots/panel.png differ