panel/public/css/styles.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 {
  html {
    @apply h-full;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    overflow-x: hidden;
  }

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

  body {
    @apply min-h-full flex flex-col bg-gray-900 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;
  }

  #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/75 flex items-center justify-center z-[1000];
  }

  .modal-content {
    @apply bg-gray-800 p-6 rounded-lg w-full max-w-xl relative max-h-[80vh] overflow-y-auto;
    scrollbar-width: thin;
    scrollbar-color: #4B5563 #1F2937;
  }

  @media (max-width: 640px) {
    .holesail-output-mobile-hidden {
      display: none;
    }
  }
  

  .modal-content::-webkit-scrollbar {
    @apply w-2;
  }

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

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

  .control-btn {
    @apply bg-blue-600 hover:bg-blue-700 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-2;
  }

  .notification {
    @apply bg-gray-800 p-3 rounded-lg text-white flex items-center gap-2 shadow-lg;
    max-width: 90%;
    font-size: 0.875rem;
  }

  .notification.success {
    @apply bg-green-600;
  }

  .notification.error {
    @apply bg-red-600;
  }
  #dockerLogsTerminal {
    @apply bg-gray-900 p-4 rounded-lg w-full max-w-full box-border;
    height: 250px; /* Increase height to make the section taller */
    overflow-y: hidden; /* Remove vertical scrollbar */
    overflow-x: hidden; /* Maintain no horizontal scrollbar */
}
  .xterm .xterm-viewport {
    @apply overflow-y-auto;
    height: 250px; /* Increase height to make the section taller */
    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-700 transition-colors duration-200;
  }

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

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

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

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

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

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

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

.nav-btn {
  @apply bg-blue-600 hover:bg-blue-700 text-white font-medium px-4 py-2 rounded transition duration-200;
}

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

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

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

  .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-[300px];
  }

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

  .notification {
    @apply text-sm p-2 max-w-[80%];
  }

  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%];
  }

  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 text-xs p-1 max-w-[90%];
  }

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

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

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

  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 text-xs p-1 max-w-[95%];
  }

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