panel/public/css/style.css

@import "tailwindcss";

@font-face {
  font-family: 'Minecraft';
  src: url('../font/MinecraftRegular-Bmg3.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@layer base {
  #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;
  }
  html {
    @apply h-full;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  *,
  *:before,
  *:after {
    box-sizing: inherit;
  }

  body {
    @apply min-h-full flex flex-col text-white;
    font-family: 'Roboto', 'Verdana', sans-serif;
    overflow-x: hidden;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    @apply font-[Minecraft] text-white;
    letter-spacing: 0.5px;
  }

  .xterm {
    width: 100%;
    height: 100%;
    padding: 8px;
    box-sizing: border-box;
  }

  .xterm .xterm-viewport {
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #4b5563 #1f2937;
  }

  .xterm .xterm-viewport::-webkit-scrollbar {
    width: 8px;
  }

  .xterm .xterm-viewport::-webkit-scrollbar-track {
    background: #1f2937;
  }

  .xterm .xterm-viewport::-webkit-scrollbar-thumb {
    background: #4b5563;
    border-radius: 4px;
  }

  .xterm .xterm-viewport::-webkit-scrollbar-thumb:hover {
    background: #6b7280;
  }

  .xterm .xterm-screen {
    width: 100% !important;
    height: 100% !important;
  }

  .xterm .xterm-char {
    line-height: 1.2;
  }

  .xterm .xterm-rows {
    overflow: hidden;
    white-space: pre-wrap;
  }

  #app {
    @apply flex-grow;
  }

  main {
    @apply flex-grow container mx-auto px-4 sm:px-6 lg:px-8 py-6;
  }

  footer {
    @apply bg-gray-800 py-4 text-center;
  }

  canvas {
    @apply w-full max-w-[150px] h-auto;
    aspect-ratio: 1/1;
  }

  ::-webkit-scrollbar {
    width: 8px;
  }

  ::-webkit-scrollbar-track {
    @apply bg-gray-800;
  }

  ::-webkit-scrollbar-thumb {
    @apply bg-blue-600 rounded;
  }

  ::-webkit-scrollbar-thumb:hover {
    @apply bg-blue-700;
  }
}

@layer components {
  .section-bg {
    @apply bg-gray-800 p-6 rounded-lg shadow-lg mb-6 w-full max-w-full;
    overflow-x: hidden;
  }

  .modal {
    @apply fixed inset-0 bg-black/30 flex items-center justify-center z-[1000] backdrop-blur-sm;
  }

  .modal-content {
    @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;
  }

  .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 {
    @apply w-2;
  }

  .modal-content::-webkit-scrollbar-track {
    @apply bg-gray-800/40;
  }

  .modal-content::-webkit-scrollbar-thumb {
    @apply bg-gray-600 rounded;
  }

  .modal-content::-webkit-scrollbar-thumb:hover {
    @apply bg-gray-500;
  }

  .modal-close {
    @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 {
    @apply text-white font-medium px-4 py-2 rounded transition duration-200;
  }

  .spinner {
    @apply border-4 border-gray-700 border-t-blue-600 rounded-full w-6 h-6 animate-spin inline-block;
  }

  @keyframes spin {
    0% {
      transform: rotate(0deg);
    }

    100% {
      transform: rotate(360deg);
    }
  }

  #notificationContainer {
    @apply fixed bottom-4 right-4 z-[1000] flex flex-col-reverse gap-3;
  }

  .notification {
    @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/20;
    border: 1px solid rgba(34, 197, 94, 0.2);
    backdrop-filter: blur(12px);
  }

  .notification.error {
    @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 {
    @apply bg-gray-900 p-4 rounded-lg w-full max-w-full box-border;
    height: 300px;
    overflow-y: hidden;
    overflow-x: hidden;
  }

  .xterm .xterm-viewport {
    @apply overflow-y-auto;
    height: 300px;
    scrollbar-width: thin;
    scrollbar-color: #3b82f6 #1f2937;
  }

  .xterm .xterm-viewport::-webkit-scrollbar {
    width: 8px;
  }

  .xterm .xterm-viewport::-webkit-scrollbar-track {
    @apply bg-gray-800;
  }

  .xterm .xterm-viewport::-webkit-scrollbar-thumb {
    @apply bg-blue-600 rounded;
  }

  .xterm .xterm-viewport::-webkit-scrollbar-thumb:hover {
    @apply bg-blue-700;
  }

  .xterm .xterm-screen {
    @apply w-full;
  }

  .item-entry {
    @apply flex items-center gap-2 mb-2 w-full flex-wrap;
  }

  .item-entry input {
    @apply bg-gray-700 p-2 rounded text-white w-full sm:w-auto;
  }

  .item-entry .item-amount {
    @apply w-16 sm:w-12;
  }

  [role="switch"] {
    @apply inline-block relative w-10 h-6 cursor-pointer;
  }

  [role="switch"]>div:first-child {
    @apply block w-full h-full rounded-full bg-gray-600 transition-colors duration-200;
  }

  [role="switch"]>div:last-child {
    @apply absolute w-4 h-4 rounded-full bg-white top-1 left-1 transition-all duration-200 shadow-sm;
  }

  [role="switch"][aria-checked="true"]>div:first-child {
    @apply bg-gradient-to-r from-blue-600 to-blue-800;
  }

  [role="switch"][aria-checked="true"]>div:last-child {
    @apply left-5;
  }

  [role="switch"][aria-checked="false"]>div:first-child {
    @apply bg-gray-600;
  }

  [role="switch"][aria-checked="false"]>div:last-child {
    @apply left-1;
  }

  [role="switch"]:hover:not([aria-disabled="true"])>div:first-child {
    @apply bg-gradient-to-r from-blue-700 to-blue-900;
  }

  [role="switch"][aria-disabled="true"]>div:first-child {
    @apply bg-gray-600 cursor-not-allowed opacity-50;
  }

  #sftpIframe {
    @apply w-full rounded;
    height: 70vh;
    min-height: 350px;
  }

  #propertiesSearch {
    @apply bg-gray-700 p-2 rounded text-white w-full;
  }

  #propertiesList {
    @apply space-y-2;
  }

  .nav-btn {
    @apply bg-blue-600 text-white font-medium px-3 py-1 rounded transition duration-200 text-sm;
  }

  .nav-btn2 {
    @apply bg-blue-600 text-white font-medium px-3 py-1 rounded transition duration-200 text-sm;
  }

  .nav-btn:hover:not(.disabled) {
    @apply bg-blue-700;
  }

  .nav-btn.current {
    @apply bg-blue-800 border-2 border-blue-400 font-bold;
  }

  .nav-btn.disabled {
    @apply bg-gray-600 cursor-not-allowed opacity-50;
  }

  .pagination-container {
    @apply flex justify-center items-center gap-1 mt-4;
  }

  .pagination-container .nav-btn {
    @apply px-2 py-0.5 text-xs rounded-sm;
  }

  .pagination-container .nav-btn.current {
    @apply bg-blue-800 border-1 border-blue-400 font-bold;
  }

  .pagination-container .nav-btn.disabled {
    @apply bg-gray-600 cursor-not-allowed opacity-50;
  }
}

.hamburger {
  @apply md:hidden flex flex-col justify-center items-center w-10 h-10 fixed top-4 right-4 z-[99999];
}

.hamburger .bar {
  @apply w-6 h-0.5 bg-blue-400 mb-1.5 transition-all duration-300;
}

.hamburger.active .bar:nth-child(1) {
  @apply translate-y-2 rotate-45;
}

.hamburger.active .bar:nth-child(2) {
  @apply opacity-0;
}

.hamburger.active .bar:nth-child(3) {
  @apply -translate-y-2 -rotate-45;
}

.mobile-nav-container {
  @apply hidden fixed inset-0 flex-col items-center justify-center bg-gray-900 z-[99998] p-4;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.mobile-nav-container.active {
  @apply flex opacity-100 visible;
}

.mobile-nav-container ul li a,
.mobile-nav-container ul li button {
  @apply block px-4 py-2 rounded text-lg text-white bg-blue-600 hover:bg-blue-700 mb-4;
}

.control-btn {
  @apply text-white font-medium px-4 py-2 rounded transition duration-200;
}

#startBtn {
  @apply bg-green-600 hover:bg-green-700;
}

#stopBtn {
  @apply bg-red-600 hover:bg-red-700;
}

#restartBtn {
  @apply bg-yellow-500 hover:bg-yellow-600 text-black;
}

.disabled-btn {
  @apply pointer-events-none cursor-not-allowed opacity-50;
}

.disabled-btn:hover {
  @apply cursor-not-allowed;
}

.copy-key-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem;
  background-color: #374151;
  border-radius: 0.25rem;
  color: #ffffff;
  transition: background-color 0.2s;
}

.copy-key-btn:hover {
  background-color: #4b5563;
}

.copy-key-btn svg {
  width: 1rem;
  height: 1rem;
}

@media (max-width: 768px) {
  .section-bg {
    @apply p-4;
  }

  .modal-content {
    @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 {
    @apply grid-cols-1;
  }

  .section-bg .flex {
    @apply flex-col gap-2;
  }

  canvas {
    @apply max-w-[120px];
  }

  .section-bg input,
  .section-bg textarea,
  .section-bg select {
    @apply p-2 text-sm;
  }

  .section-bg pre {
    @apply text-sm;
  }

  #sftpIframe {
    @apply h-[40vh] min-h-[400px];
  }

  #consoleOutput {
    @apply h-32 text-sm;
  }

  .notification {
    @apply p-2 text-sm max-w-[80%] min-h-[40px] max-h-[180px];
  }

  h1 {
    @apply text-3xl;
  }

  h2 {
    @apply text-xl;
  }

  h3 {
    @apply text-base;
  }

  p,
  span,
  a {
    @apply text-sm;
  }

  .nav-btn {
    @apply hidden;
  }

  .hamburger {
    @apply flex;
  }

  .control-btn {
    @apply px-3 py-1 text-sm;
  }

  .item-entry {
    @apply flex-col gap-1;
  }

  .item-entry .item-amount {
    @apply w-full;
  }
}

@media (max-width: 640px) {
  .section-bg {
    @apply p-3;
  }

  .modal-content {
    @apply p-3 max-w-[95%] rounded-xl;
  }

  .modal-content input,
  .modal-content textarea,
  .modal-content select {
    @apply p-1 text-xs;
  }

  canvas {
    @apply max-w-[100px];
  }

  .section-bg input,
  .section-bg textarea,
  .section-bg select {
    @apply p-1 text-xs;
  }

  .section-bg pre {
    @apply text-xs;
  }

  #sftpIframe {
    @apply h-[35vh] min-h-[250px];
  }

  #consoleOutput {
    @apply h-28 text-xs;
  }

  .notification {
    @apply p-2 text-xs max-w-[85%] min-h-[36px] max-h-[160px];
  }

  h1 {
    @apply text-2xl;
  }

  h2 {
    @apply text-lg;
  }

  h3 {
    @apply text-sm;
  }

  p,
  span,
  a {
    @apply text-xs;
  }

  .control-btn {
    @apply px-2 py-1 text-xs;
  }
}

.bg-gray-700 {
  background-color: #151d31;
}



@media (max-width: 480px) {
  .section-bg {
    @apply p-2;
  }

  .modal-content {
    @apply p-2 max-w-[98%] rounded-xl;
  }

  .modal-content input,
  .modal-content textarea,
  .modal-content select {
    @apply p-1 text-xs;
  }

  canvas {
    @apply max-w-[80px];
  }

  .section-bg input,
  .section-bg textarea,
  .section-bg select {
    @apply p-1 text-xs;
  }

  .section-bg pre {
    @apply text-xs;
  }

  #sftpIframe {
    @apply h-[30vh] min-h-[200px];
  }

  #consoleOutput {
    @apply h-24 text-xs;
  }

  .notification {
    @apply p-1.5 text-xs max-w-[90%] min-h-[32px] max-h-[140px];
  }

  h1 {
    @apply text-xl;
  }

  h2 {
    @apply text-base;
  }

  h3 {
    @apply text-xs;
  }

  p,
  span,
  a {
    @apply text-xs;
  }

  .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;
  }
}