update styles for modals and notifs
This commit is contained in:
MCHost
@@ -7,7 +7,8 @@
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
html, body {
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: none;
|
||||
@@ -27,9 +28,17 @@ body {
|
||||
}
|
||||
|
||||
@keyframes bgShift {
|
||||
0% { background-position: 0% 50%; }
|
||||
50% { background-position: 100% 50%; }
|
||||
100% { background-position: 0% 50%; }
|
||||
0% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
|
||||
50% {
|
||||
background-position: 100% 50%;
|
||||
}
|
||||
|
||||
100% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
}
|
||||
|
||||
/* Custom Scrollbar Styles */
|
||||
@@ -77,22 +86,27 @@ body {
|
||||
transform: translate(0);
|
||||
text-shadow: 0 0 8px rgba(20, 184, 166, 0.5);
|
||||
}
|
||||
|
||||
20% {
|
||||
transform: translate(-2px, 2px);
|
||||
text-shadow: 0 0 8px rgba(20, 184, 166, 0.5), 2px 0 #3b82f6;
|
||||
}
|
||||
|
||||
40% {
|
||||
transform: translate(2px, -2px);
|
||||
text-shadow: 0 0 8px rgba(20, 184, 166, 0.5), -2px 0 #14b8a6;
|
||||
}
|
||||
|
||||
60% {
|
||||
transform: translate(-2px, 0);
|
||||
text-shadow: 0 0 8px rgba(20, 184, 166, 0.5), 2px 0 #3b82f6;
|
||||
}
|
||||
|
||||
80% {
|
||||
transform: translate(2px, 0);
|
||||
text-shadow: 0 0 8px rgba(20, 184, 166, 0.5), -2px 0 #14b8a6;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translate(0);
|
||||
text-shadow: 0 0 8px rgba(20, 184, 166, 0.5);
|
||||
@@ -133,9 +147,12 @@ body {
|
||||
}
|
||||
|
||||
@keyframes floatSection {
|
||||
0%, 100% {
|
||||
|
||||
0%,
|
||||
100% {
|
||||
box-shadow: 0 6px 25px rgba(0, 0, 0, 0.4), inset 0 0 15px rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
|
||||
50% {
|
||||
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5), inset 0 0 18px rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
@@ -198,9 +215,12 @@ body {
|
||||
}
|
||||
|
||||
@keyframes neonPulse {
|
||||
0%, 100% {
|
||||
|
||||
0%,
|
||||
100% {
|
||||
filter: brightness(1);
|
||||
}
|
||||
|
||||
50% {
|
||||
filter: brightness(1.2);
|
||||
}
|
||||
@@ -210,9 +230,11 @@ body {
|
||||
0% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
|
||||
50% {
|
||||
background-position: 100% 50%;
|
||||
}
|
||||
|
||||
100% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
@@ -304,6 +326,7 @@ body {
|
||||
opacity: 0;
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
@@ -319,8 +342,7 @@ body {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.feature-card:hover {
|
||||
}
|
||||
.feature-card:hover {}
|
||||
|
||||
.feature-card::before {
|
||||
content: '';
|
||||
@@ -369,13 +391,25 @@ body {
|
||||
}
|
||||
|
||||
@keyframes fadeInOut {
|
||||
0%, 100% { opacity: 0; }
|
||||
50% { opacity: 0.8; }
|
||||
|
||||
0%,
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
50% {
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes float {
|
||||
0% { transform: translateY(0); }
|
||||
100% { transform: translateY(-100vh); }
|
||||
0% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateY(-100vh);
|
||||
}
|
||||
}
|
||||
|
||||
.particle.fade-out {
|
||||
@@ -383,8 +417,13 @@ body {
|
||||
}
|
||||
|
||||
@keyframes fadeOut {
|
||||
0% { opacity: 0.8; }
|
||||
100% { opacity: 0; }
|
||||
0% {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.header-bg {
|
||||
@@ -569,28 +608,36 @@ footer a:hover {
|
||||
.hero-bg {
|
||||
min-height: 500px;
|
||||
}
|
||||
|
||||
.hero-bg iframe {
|
||||
min-height: 500px;
|
||||
}
|
||||
|
||||
.btn-minecraft {
|
||||
padding: 12px 26px;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.minecraft-font.text-5xl {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
.minecraft-font.text-4xl {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.minecraft-font.text-3xl {
|
||||
font-size: 1.75rem;
|
||||
}
|
||||
|
||||
.feature-card {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.nav-btn {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.hamburger {
|
||||
display: flex;
|
||||
}
|
||||
@@ -600,22 +647,47 @@ footer a:hover {
|
||||
.hero-bg {
|
||||
min-height: 400px;
|
||||
}
|
||||
|
||||
.hero-bg iframe {
|
||||
min-height: 400px;
|
||||
}
|
||||
|
||||
.minecraft-font.text-5xl {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.minecraft-font.text-4xl {
|
||||
font-size: 1.75rem;
|
||||
}
|
||||
|
||||
.minecraft-font.text-3xl {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.mobile-nav-container ul li a,
|
||||
.mobile-nav-container ul li button {
|
||||
font-size: 1rem;
|
||||
padding: 0.75rem;
|
||||
width: 180px;
|
||||
}
|
||||
|
||||
/* In main-site.css */
|
||||
#particles-js {
|
||||
position: fixed !important;
|
||||
top: 0 !important;
|
||||
left: 0 !important;
|
||||
width: 100vw !important;
|
||||
height: 100vh !important;
|
||||
z-index: 0;
|
||||
overflow: hidden;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
#particles-js canvas.particles-js-canvas-el {
|
||||
width: 100vw !important;
|
||||
height: 100vh !important;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
102
public/css/main-site.min.css
vendored
102
public/css/main-site.min.css
vendored
@@ -67,9 +67,11 @@
|
||||
--radius-md: 0.375rem;
|
||||
--radius-lg: 0.5rem;
|
||||
--radius-xl: 0.75rem;
|
||||
--radius-2xl: 1rem;
|
||||
--ease-out: cubic-bezier(0, 0, 0.2, 1);
|
||||
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
--animate-spin: spin 1s linear infinite;
|
||||
--blur-sm: 8px;
|
||||
--blur-xl: 24px;
|
||||
--default-transition-duration: 150ms;
|
||||
--default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
@@ -226,6 +228,9 @@
|
||||
.pointer-events-none {
|
||||
pointer-events: none;
|
||||
}
|
||||
.visible {
|
||||
visibility: visible;
|
||||
}
|
||||
.absolute {
|
||||
position: absolute;
|
||||
}
|
||||
@@ -403,6 +408,15 @@
|
||||
.max-h-\[calc\(95vh-10rem\)\] {
|
||||
max-height: calc(95vh - 10rem);
|
||||
}
|
||||
.min-h-\[32px\] {
|
||||
min-height: 32px;
|
||||
}
|
||||
.min-h-\[36px\] {
|
||||
min-height: 36px;
|
||||
}
|
||||
.min-h-\[40px\] {
|
||||
min-height: 40px;
|
||||
}
|
||||
.min-h-full {
|
||||
min-height: 100%;
|
||||
}
|
||||
@@ -442,6 +456,21 @@
|
||||
.max-w-7xl {
|
||||
max-width: var(--container-7xl);
|
||||
}
|
||||
.max-w-\[80\%\] {
|
||||
max-width: 80%;
|
||||
}
|
||||
.max-w-\[85\%\] {
|
||||
max-width: 85%;
|
||||
}
|
||||
.max-w-\[90\%\] {
|
||||
max-width: 90%;
|
||||
}
|
||||
.max-w-\[95\%\] {
|
||||
max-width: 95%;
|
||||
}
|
||||
.max-w-\[98\%\] {
|
||||
max-width: 98%;
|
||||
}
|
||||
.max-w-\[150px\] {
|
||||
max-width: 150px;
|
||||
}
|
||||
@@ -486,6 +515,9 @@
|
||||
.cursor-not-allowed {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.cursor-pointer {
|
||||
cursor: pointer;
|
||||
}
|
||||
.resize {
|
||||
resize: both;
|
||||
}
|
||||
@@ -595,6 +627,9 @@
|
||||
.rounded {
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
.rounded-2xl {
|
||||
border-radius: var(--radius-2xl);
|
||||
}
|
||||
.rounded-full {
|
||||
border-radius: calc(infinity * 1px);
|
||||
}
|
||||
@@ -659,6 +694,18 @@
|
||||
.bg-black {
|
||||
background-color: var(--color-black);
|
||||
}
|
||||
.bg-black\/30 {
|
||||
background-color: color-mix(in srgb, #000 30%, transparent);
|
||||
@supports (color: color-mix(in lab, red, red)) {
|
||||
background-color: color-mix(in oklab, var(--color-black) 30%, transparent);
|
||||
}
|
||||
}
|
||||
.bg-black\/50 {
|
||||
background-color: color-mix(in srgb, #000 50%, transparent);
|
||||
@supports (color: color-mix(in lab, red, red)) {
|
||||
background-color: color-mix(in oklab, var(--color-black) 50%, transparent);
|
||||
}
|
||||
}
|
||||
.bg-black\/75 {
|
||||
background-color: color-mix(in srgb, #000 75%, transparent);
|
||||
@supports (color: color-mix(in lab, red, red)) {
|
||||
@@ -692,6 +739,30 @@
|
||||
background-color: color-mix(in oklab, var(--color-gray-800) 40%, transparent);
|
||||
}
|
||||
}
|
||||
.bg-gray-800\/50 {
|
||||
background-color: color-mix(in srgb, oklch(27.8% 0.033 256.848) 50%, transparent);
|
||||
@supports (color: color-mix(in lab, red, red)) {
|
||||
background-color: color-mix(in oklab, var(--color-gray-800) 50%, transparent);
|
||||
}
|
||||
}
|
||||
.bg-gray-800\/60 {
|
||||
background-color: color-mix(in srgb, oklch(27.8% 0.033 256.848) 60%, transparent);
|
||||
@supports (color: color-mix(in lab, red, red)) {
|
||||
background-color: color-mix(in oklab, var(--color-gray-800) 60%, transparent);
|
||||
}
|
||||
}
|
||||
.bg-gray-800\/70 {
|
||||
background-color: color-mix(in srgb, oklch(27.8% 0.033 256.848) 70%, transparent);
|
||||
@supports (color: color-mix(in lab, red, red)) {
|
||||
background-color: color-mix(in oklab, var(--color-gray-800) 70%, transparent);
|
||||
}
|
||||
}
|
||||
.bg-gray-800\/80 {
|
||||
background-color: color-mix(in srgb, oklch(27.8% 0.033 256.848) 80%, transparent);
|
||||
@supports (color: color-mix(in lab, red, red)) {
|
||||
background-color: color-mix(in oklab, var(--color-gray-800) 80%, transparent);
|
||||
}
|
||||
}
|
||||
.bg-gray-900 {
|
||||
background-color: var(--color-gray-900);
|
||||
}
|
||||
@@ -745,6 +816,9 @@
|
||||
.p-1 {
|
||||
padding: calc(var(--spacing) * 1);
|
||||
}
|
||||
.p-1\.5 {
|
||||
padding: calc(var(--spacing) * 1.5);
|
||||
}
|
||||
.p-2 {
|
||||
padding: calc(var(--spacing) * 2);
|
||||
}
|
||||
@@ -968,6 +1042,10 @@
|
||||
--tw-ease: var(--ease-out);
|
||||
transition-timing-function: var(--ease-out);
|
||||
}
|
||||
.outline-none {
|
||||
--tw-outline-style: none;
|
||||
outline-style: none;
|
||||
}
|
||||
.hover\:bg-blue-700 {
|
||||
&:hover {
|
||||
@media (hover: hover) {
|
||||
@@ -1055,6 +1133,13 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
.hover\:text-gray-300 {
|
||||
&:hover {
|
||||
@media (hover: hover) {
|
||||
color: var(--color-gray-300);
|
||||
}
|
||||
}
|
||||
}
|
||||
.hover\:text-red-700 {
|
||||
&:hover {
|
||||
@media (hover: hover) {
|
||||
@@ -1667,6 +1752,23 @@ footer a:hover {
|
||||
padding: 0.75rem;
|
||||
width: 180px;
|
||||
}
|
||||
#particles-js {
|
||||
position: fixed !important;
|
||||
top: 0 !important;
|
||||
left: 0 !important;
|
||||
width: 100vw !important;
|
||||
height: 100vh !important;
|
||||
z-index: 0;
|
||||
overflow: hidden;
|
||||
pointer-events: none;
|
||||
}
|
||||
#particles-js canvas.particles-js-canvas-el {
|
||||
width: 100vw !important;
|
||||
height: 100vh !important;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
@property --tw-translate-x {
|
||||
syntax: "*";
|
||||
|
||||
@@ -40,30 +40,24 @@
|
||||
}
|
||||
|
||||
.xterm {
|
||||
/* Ensure terminal container respects parent dimensions */
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 8px;
|
||||
/* Add padding for better text spacing */
|
||||
box-sizing: border-box;
|
||||
/* Prevent padding from causing overflow */
|
||||
}
|
||||
|
||||
/* Viewport styling for scrollbars */
|
||||
.xterm .xterm-viewport {
|
||||
overflow-y: auto;
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: #4b5563 #1f2937;
|
||||
}
|
||||
|
||||
/* Webkit scrollbar styling */
|
||||
.xterm .xterm-viewport::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
.xterm .xterm-viewport::-webkit-scrollbar-track {
|
||||
background: #1f2937;
|
||||
/* Match terminal background for consistency */
|
||||
}
|
||||
|
||||
.xterm .xterm-viewport::-webkit-scrollbar-thumb {
|
||||
@@ -73,28 +67,20 @@
|
||||
|
||||
.xterm .xterm-viewport::-webkit-scrollbar-thumb:hover {
|
||||
background: #6b7280;
|
||||
/* Slightly lighter on hover for feedback */
|
||||
}
|
||||
|
||||
/* Ensure screen fits container */
|
||||
.xterm .xterm-screen {
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
/* Ensure full height usage */
|
||||
}
|
||||
|
||||
/* Improve text rendering */
|
||||
.xterm .xterm-char {
|
||||
line-height: 1.2;
|
||||
/* Adjust line height for better text alignment */
|
||||
}
|
||||
|
||||
/* Prevent text overflow */
|
||||
.xterm .xterm-rows {
|
||||
overflow: hidden;
|
||||
/* Prevent horizontal overflow */
|
||||
white-space: pre-wrap;
|
||||
/* Allow text wrapping if needed */
|
||||
}
|
||||
|
||||
#app {
|
||||
@@ -138,19 +124,44 @@
|
||||
}
|
||||
|
||||
.modal {
|
||||
@apply fixed inset-0 bg-black/75 flex items-center justify-center z-[1000];
|
||||
@apply fixed inset-0 bg-black/30 flex items-center justify-center z-[1000] backdrop-blur-sm;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
@apply bg-gray-800 p-6 rounded-lg w-full max-w-xl relative max-h-[80vh] overflow-y-auto;
|
||||
@apply bg-gray-800/60 p-6 rounded-2xl w-full max-w-xl relative max-h-[80vh] overflow-y-auto;
|
||||
backdrop-filter: blur(12px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||||
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: #4B5563 #1F2937;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.holesail-output-mobile-hidden {
|
||||
display: none;
|
||||
}
|
||||
.modal-content input,
|
||||
.modal-content textarea,
|
||||
.modal-content select {
|
||||
@apply bg-gray-800/50 text-white p-2 rounded-lg w-full;
|
||||
backdrop-filter: blur(8px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
|
||||
transition: border-color 0.2s ease, box-shadow 0.2s ease;
|
||||
}
|
||||
|
||||
.modal-content input:focus,
|
||||
.modal-content textarea:focus,
|
||||
.modal-content select:focus {
|
||||
@apply outline-none border-blue-400;
|
||||
box-shadow: 0 0 8px rgba(59, 130, 246, 0.5);
|
||||
}
|
||||
|
||||
.modal-content input::placeholder,
|
||||
.modal-content textarea::placeholder {
|
||||
@apply text-gray-300 opacity-70;
|
||||
}
|
||||
|
||||
.modal-content .item-entry input {
|
||||
@apply bg-gray-800/50 text-white p-2 rounded-lg w-full sm:w-auto;
|
||||
backdrop-filter: blur(8px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
|
||||
.modal-content::-webkit-scrollbar {
|
||||
@@ -158,7 +169,7 @@
|
||||
}
|
||||
|
||||
.modal-content::-webkit-scrollbar-track {
|
||||
@apply bg-gray-800;
|
||||
@apply bg-gray-800/40;
|
||||
}
|
||||
|
||||
.modal-content::-webkit-scrollbar-thumb {
|
||||
@@ -170,7 +181,13 @@
|
||||
}
|
||||
|
||||
.modal-close {
|
||||
@apply absolute top-2 right-2 bg-transparent border-none text-white text-xl cursor-pointer;
|
||||
@apply absolute top-2 right-2 bg-transparent border-none text-white text-xl cursor-pointer hover:text-gray-300 transition-colors;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.holesail-output-mobile-hidden {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.control-btn {
|
||||
@@ -192,21 +209,67 @@
|
||||
}
|
||||
|
||||
#notificationContainer {
|
||||
@apply fixed bottom-4 right-4 z-[1000] flex flex-col-reverse gap-2;
|
||||
@apply fixed bottom-4 right-4 z-[1000] flex flex-col-reverse gap-3;
|
||||
}
|
||||
|
||||
.notification {
|
||||
@apply bg-gray-800 p-3 rounded-lg text-white flex items-center gap-2 shadow-lg;
|
||||
max-width: 90%;
|
||||
@apply bg-gray-800/70 text-white p-3 rounded-lg flex items-center gap-2 shadow-lg;
|
||||
backdrop-filter: blur(12px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
|
||||
max-width: min(90%, 400px);
|
||||
min-height: 48px;
|
||||
max-height: 200px;
|
||||
overflow-y: auto;
|
||||
white-space: normal;
|
||||
word-break: break-word;
|
||||
font-size: 0.875rem;
|
||||
animation: slideIn 0.3s ease-out;
|
||||
transition: transform 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease;
|
||||
}
|
||||
|
||||
.notification:hover {
|
||||
@apply transform scale-105;
|
||||
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.notification.success {
|
||||
@apply bg-green-600;
|
||||
@apply bg-green-600/20;
|
||||
border: 1px solid rgba(34, 197, 94, 0.2);
|
||||
backdrop-filter: blur(12px);
|
||||
}
|
||||
|
||||
.notification.error {
|
||||
@apply bg-red-600;
|
||||
@apply bg-red-600/20;
|
||||
border: 1px solid rgba(239, 68, 68, 0.2);
|
||||
backdrop-filter: blur(12px);
|
||||
}
|
||||
|
||||
.notification::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
.notification::-webkit-scrollbar-track {
|
||||
@apply bg-gray-800/40;
|
||||
}
|
||||
|
||||
.notification::-webkit-scrollbar-thumb {
|
||||
@apply bg-gray-600 rounded;
|
||||
}
|
||||
|
||||
.notification::-webkit-scrollbar-thumb:hover {
|
||||
@apply bg-gray-500;
|
||||
}
|
||||
|
||||
@keyframes slideIn {
|
||||
from {
|
||||
transform: translateX(100%);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
#dockerLogsTerminal {
|
||||
@@ -426,7 +489,13 @@
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
@apply p-4 max-w-[95%];
|
||||
@apply p-4 max-w-[95%] rounded-xl;
|
||||
}
|
||||
|
||||
.modal-content input,
|
||||
.modal-content textarea,
|
||||
.modal-content select {
|
||||
@apply p-2 text-sm;
|
||||
}
|
||||
|
||||
.section-bg .grid {
|
||||
@@ -460,7 +529,7 @@
|
||||
}
|
||||
|
||||
.notification {
|
||||
@apply text-sm p-2 max-w-[80%];
|
||||
@apply p-2 text-sm max-w-[80%] min-h-[40px] max-h-[180px];
|
||||
}
|
||||
|
||||
h1 {
|
||||
@@ -508,7 +577,13 @@
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
@apply p-3 max-w-[95%];
|
||||
@apply p-3 max-w-[95%] rounded-xl;
|
||||
}
|
||||
|
||||
.modal-content input,
|
||||
.modal-content textarea,
|
||||
.modal-content select {
|
||||
@apply p-1 text-xs;
|
||||
}
|
||||
|
||||
canvas {
|
||||
@@ -534,7 +609,7 @@
|
||||
}
|
||||
|
||||
.notification {
|
||||
@apply text-xs p-1 max-w-[90%];
|
||||
@apply p-2 text-xs max-w-[85%] min-h-[36px] max-h-[160px];
|
||||
}
|
||||
|
||||
h1 {
|
||||
@@ -560,13 +635,42 @@
|
||||
}
|
||||
}
|
||||
|
||||
.bg-gray-700 {
|
||||
background-color: #151d31;
|
||||
}
|
||||
|
||||
#particles-js {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
z-index: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
#particles-js canvas {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.section-bg {
|
||||
@apply p-2;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
@apply p-2 max-w-[98%];
|
||||
@apply p-2 max-w-[98%] rounded-xl;
|
||||
}
|
||||
|
||||
.modal-content input,
|
||||
.modal-content textarea,
|
||||
.modal-content select {
|
||||
@apply p-1 text-xs;
|
||||
}
|
||||
|
||||
canvas {
|
||||
@@ -592,7 +696,7 @@
|
||||
}
|
||||
|
||||
.notification {
|
||||
@apply text-xs p-1 max-w-[95%];
|
||||
@apply p-1.5 text-xs max-w-[90%] min-h-[32px] max-h-[140px];
|
||||
}
|
||||
|
||||
h1 {
|
||||
@@ -616,4 +720,23 @@
|
||||
.control-btn {
|
||||
@apply px-2 py-1 text-xs;
|
||||
}
|
||||
|
||||
#particles-js {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
z-index: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
#particles-js canvas {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
233
public/css/style.min.css
vendored
233
public/css/style.min.css
vendored
@@ -67,9 +67,11 @@
|
||||
--radius-md: 0.375rem;
|
||||
--radius-lg: 0.5rem;
|
||||
--radius-xl: 0.75rem;
|
||||
--radius-2xl: 1rem;
|
||||
--ease-out: cubic-bezier(0, 0, 0.2, 1);
|
||||
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
--animate-spin: spin 1s linear infinite;
|
||||
--blur-sm: 8px;
|
||||
--blur-xl: 24px;
|
||||
--default-transition-duration: 150ms;
|
||||
--default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
@@ -1070,10 +1072,13 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: color-mix(in srgb, #000 75%, transparent);
|
||||
background-color: color-mix(in srgb, #000 30%, transparent);
|
||||
@supports (color: color-mix(in lab, red, red)) {
|
||||
background-color: color-mix(in oklab, var(--color-black) 75%, transparent);
|
||||
background-color: color-mix(in oklab, var(--color-black) 30%, transparent);
|
||||
}
|
||||
--tw-backdrop-blur: blur(var(--blur-sm));
|
||||
-webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
|
||||
backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
|
||||
}
|
||||
.modal-content {
|
||||
position: relative;
|
||||
@@ -1081,22 +1086,65 @@
|
||||
width: 100%;
|
||||
max-width: var(--container-xl);
|
||||
overflow-y: auto;
|
||||
border-radius: var(--radius-lg);
|
||||
background-color: var(--color-gray-800);
|
||||
border-radius: var(--radius-2xl);
|
||||
background-color: color-mix(in srgb, oklch(27.8% 0.033 256.848) 60%, transparent);
|
||||
@supports (color: color-mix(in lab, red, red)) {
|
||||
background-color: color-mix(in oklab, var(--color-gray-800) 60%, transparent);
|
||||
}
|
||||
padding: calc(var(--spacing) * 6);
|
||||
backdrop-filter: blur(12px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||||
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: #4B5563 #1F2937;
|
||||
}
|
||||
@media (max-width: 640px) {
|
||||
.holesail-output-mobile-hidden {
|
||||
display: none;
|
||||
.modal-content input, .modal-content textarea, .modal-content select {
|
||||
width: 100%;
|
||||
border-radius: var(--radius-lg);
|
||||
background-color: color-mix(in srgb, oklch(27.8% 0.033 256.848) 50%, transparent);
|
||||
@supports (color: color-mix(in lab, red, red)) {
|
||||
background-color: color-mix(in oklab, var(--color-gray-800) 50%, transparent);
|
||||
}
|
||||
padding: calc(var(--spacing) * 2);
|
||||
color: var(--color-white);
|
||||
backdrop-filter: blur(8px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
|
||||
transition: border-color 0.2s ease, box-shadow 0.2s ease;
|
||||
}
|
||||
.modal-content input:focus, .modal-content textarea:focus, .modal-content select:focus {
|
||||
border-color: var(--color-blue-400);
|
||||
--tw-outline-style: none;
|
||||
outline-style: none;
|
||||
box-shadow: 0 0 8px rgba(59, 130, 246, 0.5);
|
||||
}
|
||||
.modal-content input::placeholder, .modal-content textarea::placeholder {
|
||||
color: var(--color-gray-300);
|
||||
opacity: 70%;
|
||||
}
|
||||
.modal-content .item-entry input {
|
||||
width: 100%;
|
||||
border-radius: var(--radius-lg);
|
||||
background-color: color-mix(in srgb, oklch(27.8% 0.033 256.848) 50%, transparent);
|
||||
@supports (color: color-mix(in lab, red, red)) {
|
||||
background-color: color-mix(in oklab, var(--color-gray-800) 50%, transparent);
|
||||
}
|
||||
padding: calc(var(--spacing) * 2);
|
||||
color: var(--color-white);
|
||||
@media (width >= 40rem) {
|
||||
width: auto;
|
||||
}
|
||||
backdrop-filter: blur(8px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
.modal-content::-webkit-scrollbar {
|
||||
width: calc(var(--spacing) * 2);
|
||||
}
|
||||
.modal-content::-webkit-scrollbar-track {
|
||||
background-color: var(--color-gray-800);
|
||||
background-color: color-mix(in srgb, oklch(27.8% 0.033 256.848) 40%, transparent);
|
||||
@supports (color: color-mix(in lab, red, red)) {
|
||||
background-color: color-mix(in oklab, var(--color-gray-800) 40%, transparent);
|
||||
}
|
||||
}
|
||||
.modal-content::-webkit-scrollbar-thumb {
|
||||
border-radius: 0.25rem;
|
||||
@@ -1116,6 +1164,19 @@
|
||||
font-size: var(--text-xl);
|
||||
line-height: var(--tw-leading, var(--text-xl--line-height));
|
||||
color: var(--color-white);
|
||||
transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
|
||||
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
|
||||
transition-duration: var(--tw-duration, var(--default-transition-duration));
|
||||
&:hover {
|
||||
@media (hover: hover) {
|
||||
color: var(--color-gray-300);
|
||||
}
|
||||
}
|
||||
}
|
||||
@media (max-width: 640px) {
|
||||
.holesail-output-mobile-hidden {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.control-btn {
|
||||
border-radius: 0.25rem;
|
||||
@@ -1156,26 +1217,83 @@
|
||||
z-index: 1000;
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
gap: calc(var(--spacing) * 2);
|
||||
gap: calc(var(--spacing) * 3);
|
||||
}
|
||||
.notification {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: calc(var(--spacing) * 2);
|
||||
border-radius: var(--radius-lg);
|
||||
background-color: var(--color-gray-800);
|
||||
background-color: color-mix(in srgb, oklch(27.8% 0.033 256.848) 70%, transparent);
|
||||
@supports (color: color-mix(in lab, red, red)) {
|
||||
background-color: color-mix(in oklab, var(--color-gray-800) 70%, transparent);
|
||||
}
|
||||
padding: calc(var(--spacing) * 3);
|
||||
color: var(--color-white);
|
||||
--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);
|
||||
max-width: 90%;
|
||||
backdrop-filter: blur(12px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
|
||||
max-width: min(90%, 400px);
|
||||
min-height: 48px;
|
||||
max-height: 200px;
|
||||
overflow-y: auto;
|
||||
white-space: normal;
|
||||
word-break: break-word;
|
||||
font-size: 0.875rem;
|
||||
animation: slideIn 0.3s ease-out;
|
||||
transition: transform 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease;
|
||||
}
|
||||
.notification:hover {
|
||||
--tw-scale-x: 105%;
|
||||
--tw-scale-y: 105%;
|
||||
--tw-scale-z: 105%;
|
||||
scale: var(--tw-scale-x) var(--tw-scale-y);
|
||||
transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
|
||||
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
.notification.success {
|
||||
background-color: var(--color-green-600);
|
||||
background-color: color-mix(in srgb, oklch(62.7% 0.194 149.214) 20%, transparent);
|
||||
@supports (color: color-mix(in lab, red, red)) {
|
||||
background-color: color-mix(in oklab, var(--color-green-600) 20%, transparent);
|
||||
}
|
||||
border: 1px solid rgba(34, 197, 94, 0.2);
|
||||
backdrop-filter: blur(12px);
|
||||
}
|
||||
.notification.error {
|
||||
background-color: var(--color-red-600);
|
||||
background-color: color-mix(in srgb, oklch(57.7% 0.245 27.325) 20%, transparent);
|
||||
@supports (color: color-mix(in lab, red, red)) {
|
||||
background-color: color-mix(in oklab, var(--color-red-600) 20%, transparent);
|
||||
}
|
||||
border: 1px solid rgba(239, 68, 68, 0.2);
|
||||
backdrop-filter: blur(12px);
|
||||
}
|
||||
.notification::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
.notification::-webkit-scrollbar-track {
|
||||
background-color: color-mix(in srgb, oklch(27.8% 0.033 256.848) 40%, transparent);
|
||||
@supports (color: color-mix(in lab, red, red)) {
|
||||
background-color: color-mix(in oklab, var(--color-gray-800) 40%, transparent);
|
||||
}
|
||||
}
|
||||
.notification::-webkit-scrollbar-thumb {
|
||||
border-radius: 0.25rem;
|
||||
background-color: var(--color-gray-600);
|
||||
}
|
||||
.notification::-webkit-scrollbar-thumb:hover {
|
||||
background-color: var(--color-gray-500);
|
||||
}
|
||||
@keyframes slideIn {
|
||||
from {
|
||||
transform: translateX(100%);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
#dockerLogsTerminal {
|
||||
box-sizing: border-box;
|
||||
@@ -1536,8 +1654,14 @@
|
||||
}
|
||||
.modal-content {
|
||||
max-width: 95%;
|
||||
border-radius: var(--radius-xl);
|
||||
padding: calc(var(--spacing) * 4);
|
||||
}
|
||||
.modal-content input, .modal-content textarea, .modal-content select {
|
||||
padding: calc(var(--spacing) * 2);
|
||||
font-size: var(--text-sm);
|
||||
line-height: var(--tw-leading, var(--text-sm--line-height));
|
||||
}
|
||||
.section-bg .grid {
|
||||
grid-template-columns: repeat(1, minmax(0, 1fr));
|
||||
}
|
||||
@@ -1567,6 +1691,8 @@
|
||||
line-height: var(--tw-leading, var(--text-sm--line-height));
|
||||
}
|
||||
.notification {
|
||||
max-height: 180px;
|
||||
min-height: 40px;
|
||||
max-width: 80%;
|
||||
padding: calc(var(--spacing) * 2);
|
||||
font-size: var(--text-sm);
|
||||
@@ -1614,8 +1740,14 @@
|
||||
}
|
||||
.modal-content {
|
||||
max-width: 95%;
|
||||
border-radius: var(--radius-xl);
|
||||
padding: calc(var(--spacing) * 3);
|
||||
}
|
||||
.modal-content input, .modal-content textarea, .modal-content select {
|
||||
padding: calc(var(--spacing) * 1);
|
||||
font-size: var(--text-xs);
|
||||
line-height: var(--tw-leading, var(--text-xs--line-height));
|
||||
}
|
||||
canvas {
|
||||
max-width: 100px;
|
||||
}
|
||||
@@ -1638,8 +1770,10 @@
|
||||
line-height: var(--tw-leading, var(--text-xs--line-height));
|
||||
}
|
||||
.notification {
|
||||
max-width: 90%;
|
||||
padding: calc(var(--spacing) * 1);
|
||||
max-height: 160px;
|
||||
min-height: 36px;
|
||||
max-width: 85%;
|
||||
padding: calc(var(--spacing) * 2);
|
||||
font-size: var(--text-xs);
|
||||
line-height: var(--tw-leading, var(--text-xs--line-height));
|
||||
}
|
||||
@@ -1666,14 +1800,40 @@
|
||||
line-height: var(--tw-leading, var(--text-xs--line-height));
|
||||
}
|
||||
}
|
||||
.bg-gray-700 {
|
||||
background-color: #151d31;
|
||||
}
|
||||
#particles-js {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
z-index: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
#particles-js canvas {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
@media (max-width: 480px) {
|
||||
.section-bg {
|
||||
padding: calc(var(--spacing) * 2);
|
||||
}
|
||||
.modal-content {
|
||||
max-width: 98%;
|
||||
border-radius: var(--radius-xl);
|
||||
padding: calc(var(--spacing) * 2);
|
||||
}
|
||||
.modal-content input, .modal-content textarea, .modal-content select {
|
||||
padding: calc(var(--spacing) * 1);
|
||||
font-size: var(--text-xs);
|
||||
line-height: var(--tw-leading, var(--text-xs--line-height));
|
||||
}
|
||||
canvas {
|
||||
max-width: 80px;
|
||||
}
|
||||
@@ -1696,8 +1856,10 @@
|
||||
line-height: var(--tw-leading, var(--text-xs--line-height));
|
||||
}
|
||||
.notification {
|
||||
max-width: 95%;
|
||||
padding: calc(var(--spacing) * 1);
|
||||
max-height: 140px;
|
||||
min-height: 32px;
|
||||
max-width: 90%;
|
||||
padding: calc(var(--spacing) * 1.5);
|
||||
font-size: var(--text-xs);
|
||||
line-height: var(--tw-leading, var(--text-xs--line-height));
|
||||
}
|
||||
@@ -1723,6 +1885,23 @@
|
||||
font-size: var(--text-xs);
|
||||
line-height: var(--tw-leading, var(--text-xs--line-height));
|
||||
}
|
||||
#particles-js {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
z-index: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
#particles-js canvas {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
@property --tw-rotate-x {
|
||||
syntax: "*";
|
||||
@@ -1975,6 +2154,21 @@
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
}
|
||||
@property --tw-scale-x {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
initial-value: 1;
|
||||
}
|
||||
@property --tw-scale-y {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
initial-value: 1;
|
||||
}
|
||||
@property --tw-scale-z {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
initial-value: 1;
|
||||
}
|
||||
@property --tw-translate-x {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
@@ -2056,9 +2250,12 @@
|
||||
--tw-backdrop-sepia: initial;
|
||||
--tw-duration: initial;
|
||||
--tw-ease: initial;
|
||||
--tw-scale-x: 1;
|
||||
--tw-scale-y: 1;
|
||||
--tw-scale-z: 1;
|
||||
--tw-translate-x: 0;
|
||||
--tw-translate-y: 0;
|
||||
--tw-translate-z: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user