@fluxo-dev/shell 25.1.12 → 25.2.2

package/index.esm.css

@@ -4,48 +4,432 @@
   display: block;
   width: 100%;
   color: black;
-  font-size: 14px;
-  padding-left: 8px;
-  padding-right: 8px;
+  font-size: 13px;
+  padding: 6px 12px;
+  margin: 1px 8px;
+  transition: background-color 0.2s ease;
+  position: relative;
+
   &:hover {
-    background-color: #ececec;
+    background-color: rgba(0, 0, 0, 0.04);
     color: black;
-  };
+  }
+}
+
+.navbar-item-module_controlActive__0vk5y {
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
 }
 
 .navbar-item-module_controlSub__U-eSe {
   font-weight: 500;
-  width: calc(100% - 30px);
+  width: calc(100% - 32px);
   display: block;
   text-decoration: none;
-  padding: 8px 10px 8px 24px;
-  margin-left: 30px;
-  font-size: 18px;
+  padding: 6px 12px;
+  margin: 1px 8px 1px 32px;
+  font-size: 13px;
   color: black;
-  border-left: #ececec;
+  transition: background-color 0.2s ease;
+  position: relative;
 
   &:hover {
-    background-color: black;
+    background-color: rgba(0, 0, 0, 0.04);
     color: black;
   }
 }
 
+.navbar-item-module_controlGroup__3Z3ji {
+  font-weight: 500;
+  width: calc(100% - 48px);
+  display: block;
+  text-decoration: none;
+  padding: 6px 12px;
+  margin: 1px 8px 1px 48px;
+  font-size: 13px;
+  color: black;
+  transition: background-color 0.2s ease;
+  position: relative;
+
+  &:hover {
+    background-color: rgba(0, 0, 0, 0.04);
+    color: black;
+  }
+}
+
+.navbar-item-module_controlGroupActive__BUnNe {
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
+}
+
 .navbar-item-module_link__sVkBe {
   font-weight: 500;
   display: block;
   text-decoration: none;
-  padding: 8px 16px;
-  padding-left: 24px;
-  margin-left: 30px;
-  font-size: 14px;
+  padding: 6px 12px;
+  margin: 1px 8px 1px 32px;
+  font-size: 13px;
+  transition: background-color 0.2s ease;
+  position: relative;
+
+  &:hover {
+    background-color: rgba(0, 0, 0, 0.04);
+    color: black;
+  }
+}
+
+.navbar-item-module_linkActive__wxVqH {
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
+  font-weight: 500;
+}
+
+.navbar-item-module_linkGroup__qeIhD {
+  font-weight: 500;
+  display: block;
+  text-decoration: none;
+  padding: 6px 12px;
+  margin: 1px 8px 1px 48px;
+  font-size: 13px;
+  transition: background-color 0.2s ease;
+  position: relative;
+
   &:hover {
-    background-color: #ececec;
+    background-color: rgba(0, 0, 0, 0.04);
     color: black;
   }
 }
 
+.navbar-item-module_linkGroupActive__t011z {
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
+  font-weight: 500;
+}
+
 .navbar-item-module_chevron__-1UpS {
-  transition: transform 200ms ease;
+  transition: transform 0.2s ease;
+}
+
+/* Import dei font anni 80 */
+@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Bungee:wght@400&family=Audiowide:wght@400&family=Righteous:wght@400&display=swap');
+
+/* Animazioni per l'intro Space Invaders in stile anni 80 */
+
+@keyframes scanlineMove {
+  0% {
+    background-position: 0% 0%;
+  }
+  100% {
+    background-position: 100% 100%;
+  }
+}
+
+@keyframes glow {
+  0% {
+    filter: brightness(1) drop-shadow(0 0 5px currentColor);
+    transform: scale(1);
+  }
+  50% {
+    filter: brightness(1.5) drop-shadow(0 0 30px currentColor);
+    transform: scale(1.05);
+  }
+  100% {
+    filter: brightness(1) drop-shadow(0 0 5px currentColor);
+    transform: scale(1);
+  }
+}
+
+@keyframes slideInFromLeft {
+  0% {
+    transform: translateX(-100px) rotateY(-45deg);
+    opacity: 0;
+  }
+  100% {
+    transform: translateX(0) rotateY(0deg);
+    opacity: 1;
+  }
+}
+
+@keyframes slideInFromRight {
+  0% {
+    transform: translateX(100px) rotateY(45deg);
+    opacity: 0;
+  }
+  100% {
+    transform: translateX(0) rotateY(0deg);
+    opacity: 1;
+  }
+}
+
+@keyframes fadeIn {
+  0% {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes gridPulse {
+  0% {
+    opacity: 0.3;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 0.6;
+    transform: scale(1.02);
+  }
+  100% {
+    opacity: 0.3;
+    transform: scale(1);
+  }
+}
+
+@keyframes blink {
+  0%, 50% {
+    opacity: 1;
+  }
+  51%, 100% {
+    opacity: 0.3;
+  }
+}
+
+@keyframes progressMove {
+  0% {
+    background-position: 0% 0%;
+  }
+  100% {
+    background-position: 200% 0%;
+  }
+}
+
+/* Animazione speciale per il gradiente dei titoli */
+@keyframes gradientMove {
+  0% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0% 50%;
+  }
+}
+
+/* Nuove animazioni per il look anni 80 */
+@keyframes neonGlow {
+  0%, 100% {
+    text-shadow:
+      0 0 5px currentColor,
+      0 0 10px currentColor,
+      0 0 15px currentColor,
+      0 0 20px currentColor;
+  }
+  50% {
+    text-shadow:
+      0 0 10px currentColor,
+      0 0 20px currentColor,
+      0 0 30px currentColor,
+      0 0 40px currentColor;
+  }
+}
+
+@keyframes retroPulse {
+  0% {
+    box-shadow: 0 0 20px rgba(0, 255, 255, 0.5);
+  }
+  50% {
+    box-shadow: 0 0 40px rgba(255, 0, 255, 0.8);
+  }
+  100% {
+    box-shadow: 0 0 20px rgba(0, 255, 255, 0.5);
+  }
+}
+
+/* Animazione speciale per lettere ROCKET anni 80 */
+@keyframes rocketGlow80s {
+  0% {
+    text-shadow:
+      0 0 5px currentColor,
+      0 0 10px currentColor,
+      0 0 15px currentColor,
+      0 0 20px currentColor,
+      0 0 35px currentColor,
+      2px 2px 4px #000000,
+      -2px -2px 4px #000000;
+    transform: perspective(400px) rotateX(15deg) rotateY(-5deg) scale(1);
+  }
+  50% {
+    text-shadow:
+      0 0 10px currentColor,
+      0 0 20px currentColor,
+      0 0 30px currentColor,
+      0 0 40px currentColor,
+      0 0 60px currentColor,
+      3px 3px 6px #000000,
+      -3px -3px 6px #000000;
+    transform: perspective(400px) rotateX(15deg) rotateY(-5deg) scale(1.08);
+  }
+  100% {
+    text-shadow:
+      0 0 5px currentColor,
+      0 0 10px currentColor,
+      0 0 15px currentColor,
+      0 0 20px currentColor,
+      0 0 35px currentColor,
+      2px 2px 4px #000000,
+      -2px -2px 4px #000000;
+    transform: perspective(400px) rotateX(15deg) rotateY(-5deg) scale(1);
+  }
+}
+
+/* Animazione per il testo "GAME" anni 80 */
+@keyframes gameText80s {
+  0% {
+    transform: translateX(100px) perspective(300px) rotateY(30deg);
+    opacity: 0;
+    letter-spacing: 20px;
+  }
+  100% {
+    transform: translateX(0) perspective(300px) rotateY(0deg);
+    opacity: 1;
+    letter-spacing: 12px;
+  }
+}
+
+/* Animazione chrome/metal effect anni 80 */
+@keyframes chromeShine {
+  0% {
+    background-position: -200% 0;
+  }
+  100% {
+    background-position: 200% 0;
+  }
+}
+
+/* Classi per applicare le animazioni */
+.rocket-letter {
+  animation: rocketGlow80s 2.5s ease-in-out infinite alternate;
+}
+
+.space-text {
+  animation: slideInFromLeft 1s ease-out forwards;
+  animation-delay: 0.5s;
+  transform: translateX(-100px);
+  opacity: 0;
+}
+
+.invaders-text {
+  animation: slideInFromRight 1s ease-out forwards;
+  animation-delay: 0.8s;
+  transform: translateX(100px);
+  opacity: 0;
+}
+
+.game-text-intro {
+  animation: gameText80s 1.8s ease-out forwards;
+  transform: translateX(100px);
+  opacity: 0;
+}
+
+.presents-text {
+  animation: fadeIn 2s ease-out forwards;
+  animation-delay: 1s;
+  opacity: 0;
+}
+
+.copyright-text {
+  animation: fadeIn 1.5s ease-out forwards;
+  animation-delay: 2s;
+  opacity: 0;
+}
+
+.loading-container {
+  animation: fadeIn 1s ease-out forwards;
+  animation-delay: 2.5s;
+  opacity: 0;
+}
+
+.loading-text {
+  animation: blink 1s infinite;
+}
+
+.loading-progress {
+  animation: progressMove 1s linear infinite;
+}
+
+.scanlines {
+  animation: scanlineMove 2s linear infinite;
+}
+
+.retro-grid {
+  animation: gridPulse 3s ease-in-out infinite;
+}
+
+/* Animazioni specifiche per elementi del gioco */
+.neon-title {
+  animation: gradientMove 3s ease-in-out infinite;
+}
+
+.score-glow {
+  animation: neonGlow 2s ease-in-out infinite alternate;
+}
+
+.retro-panel {
+  animation: retroPulse 4s ease-in-out infinite;
+}
+
+/* Effetto chrome anni 80 */
+.chrome-text {
+  background: linear-gradient(
+    90deg,
+    #c0c0c0 0%,
+    #ffffff 25%,
+    #c0c0c0 50%,
+    #808080 75%,
+    #c0c0c0 100%
+  );
+  background-size: 400% 100%;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  animation: chromeShine 3s ease-in-out infinite;
+}
+
+/* Stili specifici per i pulsanti del Pong */
+.retro-pong-container button:hover {
+  background-color: rgba(255, 255, 0, 0.2) !important;
+  transform: scale(1.05);
+}
+
+.retro-pong-container button:active {
+  transform: scale(0.95);
+}
+
+/* Stili specifici per il gioco Tetris */
+@keyframes tetrisGlow {
+  from { text-shadow: 0 0 10px #00ffff, 0 0 20px #00ffff, 0 0 30px #00ffff; }
+  to { text-shadow: 0 0 20px #00ffff, 0 0 30px #00ffff, 0 0 40px #00ffff, 0 0 50px #00ffff; }
+}
+
+@keyframes tetrisPulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+}
+
+.tetris-container .tetris-glow {
+  animation: tetrisGlow 2s ease-in-out infinite alternate;
+}
+
+.tetris-container .tetris-pulse {
+  animation: tetrisPulse 1s ease-in-out infinite;
+}
+
+.tetris-container button:hover {
+  background-color: rgba(0, 255, 255, 0.2) !important;
+  transform: scale(1.05);
+}
+
+.tetris-container button:active {
+  transform: scale(0.95);
 }
 
 @charset "UTF-8";