panel/public/css/styles.css

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

@import "tailwindcss";

@layer base {
  /* Sticky footer base styles */
  html {
    @apply h-full;
  }

  body {
    @apply min-h-full flex flex-col;
  }

  h1, h2, h3, h4, h5, h6 {
    font-family: 'Minecraft', sans-serif;
  }

  #app {
    @apply flex-1 flex flex-col;
  }

  main {
    @apply flex-grow;
  }

  footer {
    @apply flex-shrink-0;
  }
}

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

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

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

  .notification {
    @apply bg-gray-800 text-white p-4 rounded-lg flex items-center gap-3 shadow-lg transition-opacity duration-300;
  }

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

  .notification.error {
    @apply bg-red-700;
  }

  #dockerLogsTerminal {
    @apply bg-gray-800 p-4 rounded-lg max-h-48 w-full;
  }

  .xterm .xterm-viewport {
    @apply overflow-y-auto;
    scrollbar-width: thin;
    scrollbar-color: #4B5563 #1F2937;
  }

  .xterm .xterm-viewport::-webkit-scrollbar {
    @apply w-2;
  }

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

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

  .xterm .xterm-viewport::-webkit-scrollbar-thumb:hover {
    @apply bg-gray-500;
  }

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

  .control-btn {
    @apply px-4 py-2 text-sm font-medium transition-all duration-200 min-w-[80px] text-center shadow-sm;
  }

  .control-btn:hover:not(.disabled-btn) {
    @apply -translate-y-px;
  }

  .control-btn:active:not(.disabled-btn) {
    @apply translate-y-0;
  }

  /* Player button styles */
  .tell-player {
    @apply bg-blue-600 hover:bg-blue-700 px-2 py-1 rounded text-sm font-[Minecraft] transition-all duration-200;
  }

  .give-player {
    @apply bg-green-600 hover:bg-green-700 px-2 py-1 rounded text-sm font-[Minecraft] transition-all duration-200;
  }

  .op-player, .deop-player {
    @apply bg-purple-600 hover:bg-purple-700 px-2 py-1 rounded text-sm font-[Minecraft] transition-all duration-200;
  }

  .kick-player, .ban-player {
    @apply bg-red-600 hover:bg-red-700 px-2 py-1 rounded text-sm font-[Minecraft] transition-all duration-200;
  }

  .teleport-player {
    @apply bg-cyan-600 hover:bg-cyan-700 px-2 py-1 rounded text-sm font-[Minecraft] transition-all duration-200;
  }

  .teleport-player:hover:not(.disabled-btn) {
    @apply -translate-y-px;
  }

  .teleport-player:active:not(.disabled-btn) {
    @apply translate-y-0;
  }

  .effect-player {
    @apply bg-teal-600 hover:bg-teal-700 px-2 py-1 rounded text-sm font-[Minecraft] transition-all duration-200;
  }

  .effect-player:hover:not(.disabled-btn) {
    @apply -translate-y-px;
  }

  .effect-player:active:not(.disabled-btn) {
    @apply translate-y-0;
  }

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

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

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

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

  /* Search box and properties fields */
  #searchContainer {
    @apply mb-4 block;
  }

  #propertiesSearch {
    @apply bg-gray-700 px-4 py-2 rounded text-white w-full block;
  }

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

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

  [role="switch"] > div:first-child {
    @apply w-full h-full rounded-full transition-colors duration-200 ease-in-out;
  }

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

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

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

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

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

@layer utilities {
  /* Custom utilities */
}

/* Media queries */
@media (max-width: 640px) {
  .bg-gray-800.p-6.rounded-lg.shadow-lg .grid {
    @apply grid-cols-1;
  }

  .bg-gray-800.p-6.rounded-lg.shadow-lg p {
    @apply flex flex-col gap-2 break-all;
  }

  .bg-gray-800.p-6.rounded-lg.shadow-lg a,
  .bg-gray-800.p-6.rounded-lg.shadow-lg span {
    @apply break-words whitespace-normal;
  }

  .bg-gray-800.p-6.rounded-lg.shadow-lg button {
    @apply w-full mt-2;
  }

  .tell-player,
  .give-player,
  .teleport-player,
  .effect-player,
  .op-player,
  .deop-player,
  .kick-player,
  .ban-player {
    @apply w-full text-center mt-1;
  }
}

/* Additional styles */
.bg-gray-800.p-6.rounded-lg.shadow-lg .grid {
  @apply overflow-x-hidden;
}

.bg-gray-800.p-6.rounded-lg.shadow-lg p {
  @apply max-w-full;
}