kimu-core 0.4.1 → 0.5.0

package/src/modules-repository/theme/themes/theme-retro80s.css

@@ -1,343 +1,343 @@
-/**
- * Retro 80s Theme - Nostalgic 1980s aesthetic
- * 
- * Inspired by 80s aesthetics with neon grids, LED displays,
- * laser effects, and retro-futuristic vibes
- * 
- * Color Palette inspired by:
- * - VHS tapes and CRT monitors
- * - Neon signs and arcade machines
- * - Synthwave and outrun aesthetics
- */
-
-:root {
-  /* Primary Colors - Hot Pink/Magenta */
-  --kimu-primary: #FF10F0;
-  --kimu-primary-hover: #FF44F4;
-  --kimu-primary-active: #DD00CC;
-  --kimu-primary-light: rgba(255, 16, 240, 0.15);
-
-  /* Secondary Colors - Electric Cyan */
-  --kimu-secondary: #00FFFF;
-  --kimu-secondary-hover: #33FFFF;
-  --kimu-secondary-active: #00DDDD;
-
-  /* Accent Colors - Laser Orange */
-  --kimu-accent: #FF6600;
-  --kimu-accent-hover: #FF8833;
-  --kimu-accent-active: #DD5500;
-
-  /* Background Colors - Dark with Grid */
-  --kimu-bg-primary: #0D0221;
-  --kimu-bg-secondary: #190F33;
-  --kimu-bg-tertiary: #240F3F;
-  --kimu-bg-hover: #2F1456;
-
-  /* Text Colors - Bright LED style */
-  --kimu-text-primary: #FFFFFF;
-  --kimu-text-secondary: #FFE5FF;
-  --kimu-text-tertiary: #CCAAFF;
-  --kimu-text-disabled: #7744AA;
-
-  /* Border Colors - Glowing neon */
-  --kimu-border: #FF10F0;
-  --kimu-border-light: rgba(255, 16, 240, 0.4);
-  --kimu-border-strong: #00FFFF;
-
-  /* Status Colors - 80s Palette */
-  --kimu-success: #00FF00;
-  --kimu-warning: #FFFF00;
-  --kimu-error: #FF0055;
-  --kimu-info: #00DDFF;
-
-  /* Shadows - Neon glow effects */
-  --kimu-shadow-sm: 0 0 10px rgba(255, 16, 240, 0.5), 0 0 20px rgba(0, 255, 255, 0.3);
-  --kimu-shadow-md: 0 0 15px rgba(255, 16, 240, 0.6), 0 0 30px rgba(0, 255, 255, 0.4);
-  --kimu-shadow-lg: 0 0 25px rgba(255, 16, 240, 0.7), 0 0 50px rgba(0, 255, 255, 0.5);
-
-  /* Additional Component Colors */
-  --kimu-card-bg: var(--kimu-bg-secondary);
-  --kimu-input-bg: var(--kimu-bg-tertiary);
-  --kimu-input-border: var(--kimu-border-light);
-  --kimu-input-focus: var(--kimu-primary);
-
-  /* Links - Neon glow */
-  --kimu-link: var(--kimu-secondary);
-  --kimu-link-hover: var(--kimu-primary);
-
-  /* Overlays */
-  --kimu-overlay: rgba(13, 2, 33, 0.9);
-}
-
-/* 80s Retro Styling */
-body {
-  color: var(--kimu-text-primary);
-  background: var(--kimu-bg-primary);
-  font-family: 'Orbitron', 'Share Tech Mono', 'Courier New', monospace;
-}
-
-/* Classic 80s Grid Background */
-body::before {
-  content: '';
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: 
-    /* Horizontal lines */
-    repeating-linear-gradient(
-      0deg,
-      transparent,
-      transparent 39px,
-      rgba(255, 16, 240, 0.15) 39px,
-      rgba(255, 16, 240, 0.15) 40px
-    ),
-    /* Vertical lines */
-    repeating-linear-gradient(
-      90deg,
-      transparent,
-      transparent 39px,
-      rgba(0, 255, 255, 0.1) 39px,
-      rgba(0, 255, 255, 0.1) 40px
-    ),
-    /* Gradient horizon */
-    linear-gradient(
-      180deg,
-      rgba(13, 2, 33, 0) 0%,
-      rgba(13, 2, 33, 0) 50%,
-      rgba(255, 16, 240, 0.05) 70%,
-      rgba(0, 255, 255, 0.05) 100%
-    );
-  pointer-events: none;
-  z-index: -1;
-  animation: gridScroll 20s linear infinite;
-}
-
-@keyframes gridScroll {
-  0% {
-    background-position: 0 0, 0 0, 0 0;
-  }
-  100% {
-    background-position: 0 40px, 0 0, 0 100px;
-  }
-}
-
-/* LED-style text with scan lines effect */
-body::after {
-  content: '';
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: repeating-linear-gradient(
-    0deg,
-    rgba(0, 0, 0, 0.1) 0px,
-    transparent 1px,
-    transparent 2px,
-    rgba(0, 0, 0, 0.1) 3px
-  );
-  pointer-events: none;
-  z-index: 9999;
-  opacity: 0.3;
-}
-
-/* Headers with neon glow */
-h1, h2, h3, h4, h5, h6 {
-  color: var(--kimu-primary);
-  text-shadow: 
-    0 0 10px rgba(255, 16, 240, 0.8),
-    0 0 20px rgba(255, 16, 240, 0.6),
-    0 0 30px rgba(255, 16, 240, 0.4);
-  font-weight: bold;
-  text-transform: uppercase;
-  letter-spacing: 0.1em;
-}
-
-/* Buttons with laser effect */
-button {
-  background: linear-gradient(135deg, var(--kimu-primary), var(--kimu-secondary));
-  border: 2px solid var(--kimu-primary);
-  box-shadow: 
-    0 0 10px rgba(255, 16, 240, 0.5),
-    inset 0 0 10px rgba(255, 255, 255, 0.2);
-  text-shadow: 0 0 5px rgba(255, 255, 255, 0.8);
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  font-weight: bold;
-  transition: all 0.3s ease;
-  position: relative;
-  overflow: hidden;
-}
-
-/* Laser sweep animation on hover */
-button::before {
-  content: '';
-  position: absolute;
-  top: -50%;
-  left: -50%;
-  width: 200%;
-  height: 200%;
-  background: linear-gradient(
-    45deg,
-    transparent 30%,
-    rgba(255, 255, 255, 0.3) 50%,
-    transparent 70%
-  );
-  transform: translateX(-100%) translateY(-100%) rotate(45deg);
-  transition: transform 0.6s ease;
-}
-
-button:hover::before {
-  transform: translateX(100%) translateY(100%) rotate(45deg);
-}
-
-button:hover {
-  box-shadow: 
-    0 0 20px rgba(255, 16, 240, 0.8),
-    0 0 40px rgba(0, 255, 255, 0.6),
-    inset 0 0 15px rgba(255, 255, 255, 0.3);
-  transform: translateY(-2px);
-  border-color: var(--kimu-secondary);
-}
-
-button:active {
-  transform: translateY(0);
-  box-shadow: 
-    0 0 15px rgba(255, 16, 240, 0.6),
-    inset 0 0 10px rgba(0, 0, 0, 0.3);
-}
-
-/* Input fields with LED display style */
-input,
-textarea,
-select {
-  background: var(--kimu-input-bg);
-  border: 2px solid var(--kimu-border-light);
-  color: var(--kimu-secondary);
-  box-shadow: inset 0 0 10px rgba(255, 16, 240, 0.2);
-  font-family: 'Share Tech Mono', 'Courier New', monospace;
-}
-
-input:focus,
-textarea:focus,
-select:focus {
-  border-color: var(--kimu-primary);
-  box-shadow: 
-    0 0 10px rgba(255, 16, 240, 0.5),
-    inset 0 0 15px rgba(255, 16, 240, 0.3);
-  color: var(--kimu-primary);
-}
-
-/* Cards with retro frame */
-.card,
-[class*="card"] {
-  background: var(--kimu-bg-secondary);
-  border: 2px solid var(--kimu-primary);
-  box-shadow: 
-    0 0 15px rgba(255, 16, 240, 0.4),
-    inset 0 0 20px rgba(255, 16, 240, 0.1);
-  position: relative;
-}
-
-/* Corner decorations for cards */
-.card::before,
-.card::after,
-[class*="card"]::before,
-[class*="card"]::after {
-  content: '';
-  position: absolute;
-  width: 15px;
-  height: 15px;
-  border: 2px solid var(--kimu-secondary);
-}
-
-.card::before,
-[class*="card"]::before {
-  top: -2px;
-  left: -2px;
-  border-right: none;
-  border-bottom: none;
-  box-shadow: -5px -5px 10px rgba(0, 255, 255, 0.3);
-}
-
-.card::after,
-[class*="card"]::after {
-  bottom: -2px;
-  right: -2px;
-  border-left: none;
-  border-top: none;
-  box-shadow: 5px 5px 10px rgba(0, 255, 255, 0.3);
-}
-
-/* Links with neon underline */
-a {
-  color: var(--kimu-link);
-  text-decoration: none;
-  text-shadow: 0 0 5px rgba(0, 255, 255, 0.5);
-  border-bottom: 1px solid transparent;
-  transition: all 0.3s ease;
-}
-
-a:hover {
-  color: var(--kimu-primary);
-  text-shadow: 0 0 10px rgba(255, 16, 240, 0.8);
-  border-bottom: 1px solid var(--kimu-primary);
-}
-
-/* Scrollbar - Retro LED style */
-::-webkit-scrollbar {
-  width: 14px;
-  height: 14px;
-}
-
-::-webkit-scrollbar-track {
-  background: var(--kimu-bg-secondary);
-  border: 1px solid var(--kimu-border-light);
-  box-shadow: inset 0 0 10px rgba(255, 16, 240, 0.2);
-}
-
-::-webkit-scrollbar-thumb {
-  background: linear-gradient(180deg, var(--kimu-primary), var(--kimu-secondary));
-  border: 2px solid var(--kimu-bg-secondary);
-  box-shadow: 
-    0 0 10px rgba(255, 16, 240, 0.6),
-    inset 0 0 5px rgba(255, 255, 255, 0.3);
-}
-
-::-webkit-scrollbar-thumb:hover {
-  background: linear-gradient(180deg, var(--kimu-secondary), var(--kimu-accent));
-  box-shadow: 
-    0 0 15px rgba(0, 255, 255, 0.8),
-    inset 0 0 10px rgba(255, 255, 255, 0.5);
-}
-
-/* Selection with laser highlight */
-::selection {
-  background: rgba(255, 16, 240, 0.4);
-  color: var(--kimu-text-primary);
-  text-shadow: 0 0 10px rgba(255, 16, 240, 0.8);
-}
-
-/* Pulse animation for interactive elements */
-@keyframes neonPulse {
-  0%, 100% {
-    box-shadow: 
-      0 0 10px rgba(255, 16, 240, 0.5),
-      0 0 20px rgba(0, 255, 255, 0.3);
-  }
-  50% {
-    box-shadow: 
-      0 0 20px rgba(255, 16, 240, 0.8),
-      0 0 40px rgba(0, 255, 255, 0.6);
-  }
-}
-
-/* Apply pulse to focused/active elements */
-button:focus,
-input:focus,
-textarea:focus,
-select:focus {
-  animation: neonPulse 2s ease-in-out infinite;
-}
+/**
+ * Retro 80s Theme - Nostalgic 1980s aesthetic
+ * 
+ * Inspired by 80s aesthetics with neon grids, LED displays,
+ * laser effects, and retro-futuristic vibes
+ * 
+ * Color Palette inspired by:
+ * - VHS tapes and CRT monitors
+ * - Neon signs and arcade machines
+ * - Synthwave and outrun aesthetics
+ */
+
+:root {
+  /* Primary Colors - Hot Pink/Magenta */
+  --kimu-primary: #FF10F0;
+  --kimu-primary-hover: #FF44F4;
+  --kimu-primary-active: #DD00CC;
+  --kimu-primary-light: rgba(255, 16, 240, 0.15);
+
+  /* Secondary Colors - Electric Cyan */
+  --kimu-secondary: #00FFFF;
+  --kimu-secondary-hover: #33FFFF;
+  --kimu-secondary-active: #00DDDD;
+
+  /* Accent Colors - Laser Orange */
+  --kimu-accent: #FF6600;
+  --kimu-accent-hover: #FF8833;
+  --kimu-accent-active: #DD5500;
+
+  /* Background Colors - Dark with Grid */
+  --kimu-bg-primary: #0D0221;
+  --kimu-bg-secondary: #190F33;
+  --kimu-bg-tertiary: #240F3F;
+  --kimu-bg-hover: #2F1456;
+
+  /* Text Colors - Bright LED style */
+  --kimu-text-primary: #FFFFFF;
+  --kimu-text-secondary: #FFE5FF;
+  --kimu-text-tertiary: #CCAAFF;
+  --kimu-text-disabled: #7744AA;
+
+  /* Border Colors - Glowing neon */
+  --kimu-border: #FF10F0;
+  --kimu-border-light: rgba(255, 16, 240, 0.4);
+  --kimu-border-strong: #00FFFF;
+
+  /* Status Colors - 80s Palette */
+  --kimu-success: #00FF00;
+  --kimu-warning: #FFFF00;
+  --kimu-error: #FF0055;
+  --kimu-info: #00DDFF;
+
+  /* Shadows - Neon glow effects */
+  --kimu-shadow-sm: 0 0 10px rgba(255, 16, 240, 0.5), 0 0 20px rgba(0, 255, 255, 0.3);
+  --kimu-shadow-md: 0 0 15px rgba(255, 16, 240, 0.6), 0 0 30px rgba(0, 255, 255, 0.4);
+  --kimu-shadow-lg: 0 0 25px rgba(255, 16, 240, 0.7), 0 0 50px rgba(0, 255, 255, 0.5);
+
+  /* Additional Component Colors */
+  --kimu-card-bg: var(--kimu-bg-secondary);
+  --kimu-input-bg: var(--kimu-bg-tertiary);
+  --kimu-input-border: var(--kimu-border-light);
+  --kimu-input-focus: var(--kimu-primary);
+
+  /* Links - Neon glow */
+  --kimu-link: var(--kimu-secondary);
+  --kimu-link-hover: var(--kimu-primary);
+
+  /* Overlays */
+  --kimu-overlay: rgba(13, 2, 33, 0.9);
+}
+
+/* 80s Retro Styling */
+body {
+  color: var(--kimu-text-primary);
+  background: var(--kimu-bg-primary);
+  font-family: 'Orbitron', 'Share Tech Mono', 'Courier New', monospace;
+}
+
+/* Classic 80s Grid Background */
+body::before {
+  content: '';
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: 
+    /* Horizontal lines */
+    repeating-linear-gradient(
+      0deg,
+      transparent,
+      transparent 39px,
+      rgba(255, 16, 240, 0.15) 39px,
+      rgba(255, 16, 240, 0.15) 40px
+    ),
+    /* Vertical lines */
+    repeating-linear-gradient(
+      90deg,
+      transparent,
+      transparent 39px,
+      rgba(0, 255, 255, 0.1) 39px,
+      rgba(0, 255, 255, 0.1) 40px
+    ),
+    /* Gradient horizon */
+    linear-gradient(
+      180deg,
+      rgba(13, 2, 33, 0) 0%,
+      rgba(13, 2, 33, 0) 50%,
+      rgba(255, 16, 240, 0.05) 70%,
+      rgba(0, 255, 255, 0.05) 100%
+    );
+  pointer-events: none;
+  z-index: -1;
+  animation: gridScroll 20s linear infinite;
+}
+
+@keyframes gridScroll {
+  0% {
+    background-position: 0 0, 0 0, 0 0;
+  }
+  100% {
+    background-position: 0 40px, 0 0, 0 100px;
+  }
+}
+
+/* LED-style text with scan lines effect */
+body::after {
+  content: '';
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+    0deg,
+    rgba(0, 0, 0, 0.1) 0px,
+    transparent 1px,
+    transparent 2px,
+    rgba(0, 0, 0, 0.1) 3px
+  );
+  pointer-events: none;
+  z-index: 9999;
+  opacity: 0.3;
+}
+
+/* Headers with neon glow */
+h1, h2, h3, h4, h5, h6 {
+  color: var(--kimu-primary);
+  text-shadow: 
+    0 0 10px rgba(255, 16, 240, 0.8),
+    0 0 20px rgba(255, 16, 240, 0.6),
+    0 0 30px rgba(255, 16, 240, 0.4);
+  font-weight: bold;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+}
+
+/* Buttons with laser effect */
+button {
+  background: linear-gradient(135deg, var(--kimu-primary), var(--kimu-secondary));
+  border: 2px solid var(--kimu-primary);
+  box-shadow: 
+    0 0 10px rgba(255, 16, 240, 0.5),
+    inset 0 0 10px rgba(255, 255, 255, 0.2);
+  text-shadow: 0 0 5px rgba(255, 255, 255, 0.8);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  font-weight: bold;
+  transition: all 0.3s ease;
+  position: relative;
+  overflow: hidden;
+}
+
+/* Laser sweep animation on hover */
+button::before {
+  content: '';
+  position: absolute;
+  top: -50%;
+  left: -50%;
+  width: 200%;
+  height: 200%;
+  background: linear-gradient(
+    45deg,
+    transparent 30%,
+    rgba(255, 255, 255, 0.3) 50%,
+    transparent 70%
+  );
+  transform: translateX(-100%) translateY(-100%) rotate(45deg);
+  transition: transform 0.6s ease;
+}
+
+button:hover::before {
+  transform: translateX(100%) translateY(100%) rotate(45deg);
+}
+
+button:hover {
+  box-shadow: 
+    0 0 20px rgba(255, 16, 240, 0.8),
+    0 0 40px rgba(0, 255, 255, 0.6),
+    inset 0 0 15px rgba(255, 255, 255, 0.3);
+  transform: translateY(-2px);
+  border-color: var(--kimu-secondary);
+}
+
+button:active {
+  transform: translateY(0);
+  box-shadow: 
+    0 0 15px rgba(255, 16, 240, 0.6),
+    inset 0 0 10px rgba(0, 0, 0, 0.3);
+}
+
+/* Input fields with LED display style */
+input,
+textarea,
+select {
+  background: var(--kimu-input-bg);
+  border: 2px solid var(--kimu-border-light);
+  color: var(--kimu-secondary);
+  box-shadow: inset 0 0 10px rgba(255, 16, 240, 0.2);
+  font-family: 'Share Tech Mono', 'Courier New', monospace;
+}
+
+input:focus,
+textarea:focus,
+select:focus {
+  border-color: var(--kimu-primary);
+  box-shadow: 
+    0 0 10px rgba(255, 16, 240, 0.5),
+    inset 0 0 15px rgba(255, 16, 240, 0.3);
+  color: var(--kimu-primary);
+}
+
+/* Cards with retro frame */
+.card,
+[class*="card"] {
+  background: var(--kimu-bg-secondary);
+  border: 2px solid var(--kimu-primary);
+  box-shadow: 
+    0 0 15px rgba(255, 16, 240, 0.4),
+    inset 0 0 20px rgba(255, 16, 240, 0.1);
+  position: relative;
+}
+
+/* Corner decorations for cards */
+.card::before,
+.card::after,
+[class*="card"]::before,
+[class*="card"]::after {
+  content: '';
+  position: absolute;
+  width: 15px;
+  height: 15px;
+  border: 2px solid var(--kimu-secondary);
+}
+
+.card::before,
+[class*="card"]::before {
+  top: -2px;
+  left: -2px;
+  border-right: none;
+  border-bottom: none;
+  box-shadow: -5px -5px 10px rgba(0, 255, 255, 0.3);
+}
+
+.card::after,
+[class*="card"]::after {
+  bottom: -2px;
+  right: -2px;
+  border-left: none;
+  border-top: none;
+  box-shadow: 5px 5px 10px rgba(0, 255, 255, 0.3);
+}
+
+/* Links with neon underline */
+a {
+  color: var(--kimu-link);
+  text-decoration: none;
+  text-shadow: 0 0 5px rgba(0, 255, 255, 0.5);
+  border-bottom: 1px solid transparent;
+  transition: all 0.3s ease;
+}
+
+a:hover {
+  color: var(--kimu-primary);
+  text-shadow: 0 0 10px rgba(255, 16, 240, 0.8);
+  border-bottom: 1px solid var(--kimu-primary);
+}
+
+/* Scrollbar - Retro LED style */
+::-webkit-scrollbar {
+  width: 14px;
+  height: 14px;
+}
+
+::-webkit-scrollbar-track {
+  background: var(--kimu-bg-secondary);
+  border: 1px solid var(--kimu-border-light);
+  box-shadow: inset 0 0 10px rgba(255, 16, 240, 0.2);
+}
+
+::-webkit-scrollbar-thumb {
+  background: linear-gradient(180deg, var(--kimu-primary), var(--kimu-secondary));
+  border: 2px solid var(--kimu-bg-secondary);
+  box-shadow: 
+    0 0 10px rgba(255, 16, 240, 0.6),
+    inset 0 0 5px rgba(255, 255, 255, 0.3);
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: linear-gradient(180deg, var(--kimu-secondary), var(--kimu-accent));
+  box-shadow: 
+    0 0 15px rgba(0, 255, 255, 0.8),
+    inset 0 0 10px rgba(255, 255, 255, 0.5);
+}
+
+/* Selection with laser highlight */
+::selection {
+  background: rgba(255, 16, 240, 0.4);
+  color: var(--kimu-text-primary);
+  text-shadow: 0 0 10px rgba(255, 16, 240, 0.8);
+}
+
+/* Pulse animation for interactive elements */
+@keyframes neonPulse {
+  0%, 100% {
+    box-shadow: 
+      0 0 10px rgba(255, 16, 240, 0.5),
+      0 0 20px rgba(0, 255, 255, 0.3);
+  }
+  50% {
+    box-shadow: 
+      0 0 20px rgba(255, 16, 240, 0.8),
+      0 0 40px rgba(0, 255, 255, 0.6);
+  }
+}
+
+/* Apply pulse to focused/active elements */
+button:focus,
+input:focus,
+textarea:focus,
+select:focus {
+  animation: neonPulse 2s ease-in-out infinite;
+}