pmomusic/pmoapp/web/src/App.css

/* App.css ou index.css */
@import "tailwindcss";

/* Styles de base améliorés */
:root {
  font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
  line-height: 1.6;
  font-weight: 400;
  color-scheme: light dark;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Styles pour le conteneur principal */
.log-container {
  @apply p-4 space-y-3 min-h-screen;
  max-width: 100%;
  overflow-x: hidden;
}

/* Styles généraux pour les entrées de log améliorées */
.log-entry {
  @apply rounded-xl p-4 font-mono shadow-lg transition-all duration-300 ease-out;
  border-left: 4px solid;
  backdrop-filter: blur(10px);
  transform-origin: center top;
}

/* Animation d'entrée pour les nouveaux logs */
@keyframes slideIn {
  0% {
    opacity: 0;
    transform: translateY(-10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.log-entry:first-child {
  animation: slideIn 0.4s ease-out;
}

/* Styles pour le thème sombre - améliorés */
.dark .log-entry {
  background: linear-gradient(90deg, rgba(30, 30, 30, 0.7), rgba(30, 30, 30, 0.4));
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.dark .log-entry.info {
  border-color: #3b82f6;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
}

.dark .log-entry.warning {
  border-color: #f59e0b;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.15);
}

.dark .log-entry.error {
  border-color: #ef4444;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.15);
}

.dark .log-entry.debug {
  border-color: #8b5cf6;
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.15);
}

.dark .log-entry:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}

/* Styles pour les éléments de détail et code */
.dark details {
  @apply mt-3 rounded-lg overflow-hidden;
  background: rgba(20, 20, 20, 0.6);
}

.dark summary {
  @apply p-2 cursor-pointer font-semibold flex items-center;
  background: rgba(0, 0, 0, 0.2);
  user-select: none;
}

.dark summary::before {
  content: "►";
  @apply mr-2 text-xs transition-transform;
}

.dark details[open] summary::before {
  transform: rotate(90deg);
}

.dark pre {
  @apply p-4 overflow-x-auto;
  background: rgba(10, 10, 10, 0.8) !important;
  border-left: 3px solid rgba(255, 255, 255, 0.1);
}

.dark code {
  @apply text-sm;
  font-family: 'Fira Code', 'Monaco', 'Cascadia Code', monospace;
}

/* Styles pour les éléments spécifiques dans les logs */
.dark .bg-black {
  background: rgba(0, 0, 0, 0.3) !important;
}

.dark ul {
  @apply mt-2 space-y-1;
}

.dark li {
  @apply flex;
}

.dark li strong {
  @apply min-w-[100px] text-neutral-300;
}

.dark img {
  @apply rounded-lg mt-2 max-h-24 border border-neutral-700;
}

/* Amélioration du header */
.dark header {
  @apply sticky top-0 z-10 shadow-md border-b border-neutral-700;
  background: rgba(23, 23, 23, 0.95);
  backdrop-filter: blur(10px);
}

.dark button {
  @apply transition-all duration-200;
}

.dark button:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

/* Barre de défilement personnalisée */
.dark ::-webkit-scrollbar {
  width: 10px;
}

.dark ::-webkit-scrollbar-track {
  background: rgba(30, 30, 30, 0.5);
  border-radius: 5px;
}

.dark ::-webkit-scrollbar-thumb {
  background: rgba(90, 90, 90, 0.5);
  border-radius: 5px;
}

.dark ::-webkit-scrollbar-thumb:hover {
  background: rgba(120, 120, 120, 0.6);
}

/* Styles pour les messages spécifiques */
.log-entry .emoji {
  @apply mr-2;
}

.log-entry .ip-address {
  @apply font-bold text-amber-400;
}

.log-entry .success {
  @apply text-green-400;
}

/* Responsive design */
@media (max-width: 768px) {
  .log-entry {
    @apply p-3;
  }
  
  .dark header {
    @apply flex-col space-y-2 items-start;
  }
  
  .dark header h1 {
    @apply text-lg;
  }
  
  .dark pre {
    @apply text-xs;
  }
}

/* Animation de pulse pour les logs actifs */
@keyframes pulseSubtle {
  0% { opacity: 0.9; }
  50% { opacity: 1; }
  100% { opacity: 0.9; }
}

.log-entry:first-child {
  animation: slideIn 0.4s ease-out, pulseSubtle 3s infinite;
}