@mgks/docmd 0.1.3 → 0.2.0

package/src/assets/css/docmd-theme-retro.css

@@ -0,0 +1,812 @@
+/* 
+ * docmd Retro Theme
+ * Inspired by 1980s-90s computing aesthetics
+ * Features: Neon colors, scanlines, terminal styling, glow effects
+ */
+
+ :root {
+  /* Dark Mode Colors (Default) */
+  --retro-primary: #0a0a0a;          /* Deep terminal black */
+  --retro-secondary: #1a1a1a;        /* Dark charcoal */
+  --retro-bg-light: #0f0f0f;         /* Slightly lighter black */
+  --retro-text: #00ff41;             /* Classic phosphor green */
+  --retro-text-secondary: #ffb000;   /* Amber yellow */
+  --retro-text-muted: #888888;       /* Muted gray */
+  
+  /* Accent Colors - Neon Palette */
+  --retro-accent: #00ffff;           /* Neon cyan */
+  --retro-danger: #ff1493;           /* Hot pink */
+  --retro-warning: #ffb000;          /* Amber */
+  --retro-success: #00ff41;          /* Phosphor green */
+  --retro-info: #0066ff;             /* Electric blue */
+  
+  /* Borders and Effects */
+  --retro-border: #333333;
+  --retro-border-bright: #00ffff;
+  --retro-glow: 0 0 10px currentColor;
+  --retro-glow-soft: 0 0 5px currentColor;
+  --retro-shadow: 0 0 20px rgba(0, 255, 255, 0.3);
+  
+  /* Typography */
+  --retro-font-family: 'Fira Code', 'Courier New', 'Consolas', monospace;
+  --retro-font-family-alt: 'Share Tech Mono', 'Courier New', monospace;
+  
+  /* Spacing */
+  --retro-spacing: 1rem;
+  --retro-spacing-small: 0.5rem;
+  --retro-spacing-large: 2rem;
+}
+
+/* Light Mode Colors */
+body[data-theme="light"] {
+  --retro-primary: #f0f0f0;          /* Light gray background */
+  --retro-secondary: #e0e0e0;        /* Lighter gray */
+  --retro-bg-light: #f5f5f5;         /* Very light gray */
+  --retro-text: #2d5d2d;             /* Dark green text */
+  --retro-text-secondary: #8b4500;   /* Dark amber */
+  --retro-text-muted: #666666;       /* Muted dark gray */
+  
+  /* Accent Colors for Light Mode */
+  --retro-accent: #006666;           /* Dark cyan */
+  --retro-danger: #b71c42;           /* Dark pink */
+  --retro-warning: #b8860b;          /* Dark amber */
+  --retro-success: #228b22;          /* Dark green */
+  --retro-info: #4169e1;             /* Royal blue */
+  
+  /* Borders and Effects for Light Mode */
+  --retro-border: #cccccc;
+  --retro-border-bright: #006666;
+  --retro-glow: 0 0 5px currentColor;
+  --retro-glow-soft: 0 0 3px currentColor;
+  --retro-shadow: 0 0 15px rgba(0, 102, 102, 0.2);
+}
+
+/* Global Styles */
+* {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: var(--retro-font-family);
+  background: var(--retro-primary);
+  color: var(--retro-text);
+  line-height: 1.6;
+  margin: 0;
+  padding: 0;
+  min-height: 100vh;
+  position: relative;
+  overflow-x: hidden;
+}
+
+/* Scanline Effect */
+body::before {
+  content: '';
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(
+    transparent 50%, 
+    rgba(0, 255, 65, 0.03) 50%
+  );
+  background-size: 100% 4px;
+  pointer-events: none;
+  z-index: 1000;
+  animation: scanlines 0.1s linear infinite;
+}
+
+/* Light mode scanlines */
+body[data-theme="light"]::before {
+  background: linear-gradient(
+    transparent 50%, 
+    rgba(45, 93, 45, 0.02) 50%
+  );
+}
+
+/* Light mode page header adjustments */
+body[data-theme="light"] .page-header {
+  box-shadow: 0 2px 10px rgba(0, 102, 102, 0.2);
+}
+
+body[data-theme="light"] .page-header::after {
+  background: linear-gradient(90deg, transparent, var(--retro-accent), transparent);
+}
+
+@keyframes scanlines {
+  0% { transform: translateY(0); }
+  100% { transform: translateY(4px); }
+}
+
+/* CRT Flicker Effect */
+@keyframes flicker {
+  0%, 100% { opacity: 1; }
+  98% { opacity: 0.98; }
+  99% { opacity: 0.99; }
+}
+
+.page-container {
+  animation: flicker 3s infinite;
+}
+
+/* Typography */
+h1, h2, h3, h4, h5, h6 {
+  color: var(--retro-accent);
+  font-family: var(--retro-font-family);
+  text-transform: uppercase;
+  letter-spacing: 2px;
+  text-shadow: var(--retro-glow-soft);
+  margin: var(--retro-spacing-large) 0 var(--retro-spacing);
+}
+
+h1 {
+  font-size: 2.5rem;
+  border-bottom: 2px solid var(--retro-accent);
+  padding-bottom: 0.5rem;
+  animation: glow-pulse 2s ease-in-out infinite alternate;
+}
+
+@keyframes glow-pulse {
+  from { text-shadow: 0 0 5px var(--retro-accent); }
+  to { text-shadow: 0 0 15px var(--retro-accent), 0 0 25px var(--retro-accent); }
+}
+
+h2 {
+  font-size: 2rem;
+  color: var(--retro-text-secondary);
+}
+
+h3 {
+  font-size: 1.5rem;
+  color: var(--retro-text);
+}
+
+p {
+  margin: var(--retro-spacing) 0;
+  text-shadow: 0 0 2px currentColor;
+}
+
+a {
+  color: var(--retro-accent);
+  text-decoration: none;
+  position: relative;
+  text-shadow: var(--retro-glow-soft);
+  transition: all 0.3s ease;
+}
+
+a:hover {
+  color: var(--retro-danger);
+  text-shadow: var(--retro-glow);
+}
+
+/* Only add > to content links, not logo or special elements */
+.page-content a:before,
+.sidebar-nav a:before {
+  content: '>';
+  margin-right: 0.25rem;
+  animation: blink 1s infinite;
+}
+
+/* Don't add > to logo, buttons, or nav items */
+.page-header a:before,
+.docmd-button:before,
+.page-nav a:before {
+  display: none;
+}
+
+@keyframes blink {
+  0%, 50% { opacity: 1; }
+  51%, 100% { opacity: 0; }
+}
+
+/* Code Styling */
+code {
+  background: var(--retro-secondary);
+  color: var(--retro-text-secondary);
+  padding: 0.2rem 0.4rem;
+  border-radius: 3px;
+  font-family: var(--retro-font-family);
+  border: 1px solid var(--retro-border);
+  box-shadow: inset 0 0 5px rgba(0, 255, 65, 0.2);
+}
+
+pre {
+    background: var(--retro-secondary) !important;
+    color: var(--retro-text) !important;
+    padding: var(--retro-spacing);
+    border-radius: 8px;
+    border: 1px solid var(--retro-border-bright);
+    box-shadow: var(--retro-shadow);
+    overflow-x: auto;
+    position: relative;
+    padding-top: 2rem;
+
+}
+
+/* Force code block background in light mode */
+body[data-theme="light"] pre {
+  background: var(--retro-secondary) !important;
+  color: var(--retro-text) !important;
+}
+
+body[data-theme="light"] code {
+  background: var(--retro-secondary) !important;
+  color: var(--retro-text-secondary) !important;
+  box-shadow: inset 0 0 5px rgba(45, 93, 45, 0.2);
+}
+
+pre::before {
+    content: '[TERMINAL]';
+    position: absolute;
+    top: 5px;
+    left: 5px;
+    background: var(--retro-primary);
+    color: var(--retro-accent);
+    padding: 0.2rem 0.5rem;
+    font-size: 0.7rem;
+    border: 1px solid var(--retro-border-bright);
+    border-radius: 3px;
+
+}
+
+/* Layout Components */
+.page-header {
+  background: linear-gradient(45deg, var(--retro-secondary), var(--retro-bg-light));
+  border-bottom: 2px solid var(--retro-border-bright);
+  padding: var(--retro-spacing);
+  box-shadow: 0 2px 10px rgba(0, 255, 255, 0.3);
+  position: relative;
+}
+
+.page-header::after {
+  content: '';
+  position: absolute;
+  bottom: -2px;
+  left: 0;
+  width: 100%;
+  height: 2px;
+  background: linear-gradient(90deg, transparent, var(--retro-accent), transparent);
+  animation: scan 2s ease-in-out infinite;
+}
+
+@keyframes scan {
+  0%, 100% { transform: scaleX(0); }
+  50% { transform: scaleX(1); }
+}
+
+.sidebar {
+  background: var(--retro-secondary);
+  border-right: 2px solid var(--retro-border-bright);
+  box-shadow: 2px 0 10px rgba(0, 255, 255, 0.2);
+}
+
+.sidebar-nav a {
+  display: block;
+  padding: 0.75rem var(--retro-spacing);
+  border-bottom: 1px solid var(--retro-border);
+  transition: all 0.3s ease;
+  font-family: var(--retro-font-family);
+}
+
+.sidebar-nav a:hover,
+.sidebar-nav a.active {
+  background: var(--retro-bg-light);
+  border-left: 4px solid var(--retro-accent);
+  box-shadow: inset 0 0 10px rgba(0, 255, 255, 0.2);
+}
+
+/* Ensure sidebar text is readable in light mode */
+body[data-theme="light"] .sidebar-nav a {
+  color: var(--retro-text);
+}
+
+body[data-theme="light"] .sidebar-nav a:hover,
+body[data-theme="light"] .sidebar-nav a.active {
+  background: var(--retro-bg-light);
+  border-left: 4px solid var(--retro-accent);
+  box-shadow: inset 0 0 10px rgba(0, 102, 102, 0.2);
+}
+
+/* Buttons */
+.docmd-button,
+button,
+.btn {
+  background: linear-gradient(145deg, var(--retro-secondary), var(--retro-bg-light));
+  color: var(--retro-accent);
+  border: 2px solid var(--retro-border-bright);
+  padding: 0.75rem 1.5rem;
+  font-family: var(--retro-font-family);
+  font-weight: bold;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  position: relative;
+  text-decoration: none;
+  display: inline-block;
+  box-shadow: 0 4px 15px rgba(0, 255, 255, 0.3);
+}
+
+.docmd-button:hover,
+button:hover,
+.btn:hover {
+  background: linear-gradient(145deg, var(--retro-bg-light), var(--retro-secondary));
+  color: var(--retro-danger);
+  box-shadow: 0 6px 20px rgba(255, 20, 147, 0.4);
+  transform: translateY(-2px);
+}
+
+.docmd-button:active,
+button:active,
+.btn:active {
+  transform: translateY(0);
+  box-shadow: 0 2px 10px rgba(0, 255, 255, 0.5);
+}
+
+/* Container Styles */
+.docmd-container {
+  background: var(--retro-secondary);
+  border: 2px solid var(--retro-border);
+  border-radius: 8px;
+  padding: var(--retro-spacing);
+  margin: var(--retro-spacing) 0;
+  position: relative;
+  box-shadow: var(--retro-shadow);
+}
+
+.docmd-container::before {
+    content: attr(data-type);
+    position: absolute;
+    top: -15px;
+    left: 5px;
+    background: var(--retro-primary);
+    color: var(--retro-accent);
+    padding: 0.25rem 0.75rem;
+    border: 1px solid var(--retro-border-bright);
+    border-radius: 3px;
+    font-size: 0.8rem;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+
+}
+
+/* Callout Containers */
+.docmd-container.callout.info {
+  border-color: var(--retro-info);
+  box-shadow: 0 0 15px rgba(0, 102, 255, 0.3);
+}
+
+.docmd-container.callout.warning {
+  border-color: var(--retro-warning);
+  box-shadow: 0 0 15px rgba(255, 176, 0, 0.3);
+}
+
+.docmd-container.callout.danger {
+  border-color: var(--retro-danger);
+  box-shadow: 0 0 15px rgba(255, 20, 147, 0.3);
+}
+
+.docmd-container.callout.tip {
+  border-color: var(--retro-success);
+  box-shadow: 0 0 15px rgba(0, 255, 65, 0.3);
+}
+
+.docmd-container.callout.success {
+  border-color: var(--retro-success);
+  box-shadow: 0 0 15px rgba(0, 255, 65, 0.3);
+}
+
+/* Callout Titles with Retro Auto Emojis */
+.callout-title {
+  font-weight: bold;
+  margin-bottom: 0.75em;
+  display: flex;
+  align-items: center;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  text-shadow: var(--retro-glow-soft);
+}
+
+.callout-title::before {
+  margin-right: 0.5rem;
+  font-size: 1.2em;
+  text-shadow: none;
+}
+
+.callout-info .callout-title::before {
+  content: "🖥️";
+}
+
+.callout-warning .callout-title::before {
+  content: "⚠️";
+}
+
+.callout-tip .callout-title::before {
+  content: "💾";
+}
+
+.callout-danger .callout-title::before {
+  content: "🚨";
+}
+
+.callout-success .callout-title::before {
+  content: "✅";
+}
+
+/* Card Containers */
+.docmd-container.card {
+  background: linear-gradient(145deg, var(--retro-secondary), var(--retro-bg-light));
+  border: 1px solid var(--retro-border-bright);
+  box-shadow: 
+    0 4px 15px rgba(0, 255, 255, 0.2),
+    inset 0 0 10px rgba(0, 255, 65, 0.1);
+}
+
+/* Tabs Container - Retro Style */
+.docmd-tabs {
+  border: 2px solid var(--retro-border-bright);
+  border-radius: 8px;
+  overflow: hidden;
+  background: var(--retro-secondary);
+  box-shadow: var(--retro-shadow);
+  position: relative;
+}
+
+.docmd-tabs::before {
+  content: '[TABS]';
+  position: absolute;
+  top: -12px;
+  left: 20px;
+  background: var(--retro-primary);
+  color: var(--retro-accent);
+  padding: 0.25rem 0.75rem;
+  border: 1px solid var(--retro-border-bright);
+  border-radius: 3px;
+  font-size: 0.7rem;
+  text-transform: uppercase;
+  z-index: 1;
+}
+
+.docmd-tabs-nav {
+  background: linear-gradient(90deg, var(--retro-bg-light), var(--retro-secondary));
+  display: flex;
+  border-bottom: 2px solid var(--retro-border-bright);
+}
+
+.docmd-tabs-nav-item {
+  padding: 1rem 1.5rem;
+  cursor: pointer;
+  color: var(--retro-text-secondary);
+  font-weight: bold;
+  border-right: 1px solid var(--retro-border);
+  transition: all 0.3s ease;
+  position: relative;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  font-family: var(--retro-font-family);
+}
+
+.docmd-tabs-nav-item:last-child {
+  border-right: none;
+}
+
+.docmd-tabs-nav-item:hover {
+  background: var(--retro-bg-light);
+  color: var(--retro-accent);
+  box-shadow: inset 0 0 10px rgba(0, 255, 255, 0.2);
+}
+
+.docmd-tabs-nav-item.active {
+  background: var(--retro-primary);
+  color: var(--retro-accent);
+  border-bottom: 2px solid var(--retro-accent);
+  box-shadow: 0 0 15px rgba(0, 255, 255, 0.5);
+}
+
+.docmd-tabs-nav-item.active::after {
+  content: '_';
+  animation: blink 1s infinite;
+  margin-left: 0.25rem;
+}
+
+.docmd-tab-pane {
+  display: none;
+  padding: var(--retro-spacing-large);
+  animation: fadeInCRT 0.5s ease;
+}
+
+.docmd-tab-pane.active {
+  display: block;
+}
+
+@keyframes fadeInCRT {
+  0% { 
+    opacity: 0; 
+    transform: scaleY(0.1) scaleX(1);
+    filter: brightness(2);
+  }
+  50% { 
+    opacity: 0.5; 
+    transform: scaleY(0.5) scaleX(1);
+  }
+  100% { 
+    opacity: 1; 
+    transform: scaleY(1) scaleX(1);
+    filter: brightness(1);
+  }
+}
+
+/* Steps Container - Retro Style */
+.docmd-container.steps {
+  background: linear-gradient(145deg, var(--retro-secondary), var(--retro-bg-light));
+  border: 2px solid var(--retro-border-bright);
+  border-radius: 8px;
+  padding: var(--retro-spacing-large);
+  position: relative;
+  box-shadow: var(--retro-shadow);
+}
+
+.docmd-container.steps::before {
+  content: '[SEQUENCE]';
+  position: absolute;
+  top: -12px;
+  left: 20px;
+  background: var(--retro-primary);
+  color: var(--retro-text-secondary);
+  padding: 0.25rem 0.75rem;
+  border: 1px solid var(--retro-border-bright);
+  border-radius: 3px;
+  font-size: 0.7rem;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+}
+
+.docmd-container.steps ol.steps-list {
+  counter-reset: step-counter;
+  list-style: none;
+  padding-left: 0;
+}
+
+.docmd-container.steps ol.steps-list > li.step-item {
+  counter-increment: step-counter;
+  position: relative;
+  padding: var(--retro-spacing) 0 var(--retro-spacing) 4rem;
+  border-bottom: 1px solid var(--retro-border);
+  margin-bottom: var(--retro-spacing);
+}
+
+.docmd-container.steps ol.steps-list > li.step-item:last-child {
+  border-bottom: none;
+  margin-bottom: 0;
+}
+
+.docmd-container.steps ol.steps-list > li.step-item::before {
+  content: counter(step-counter);
+  position: absolute;
+  left: 0;
+  top: var(--retro-spacing);
+  width: 2.5rem;
+  height: 2.5rem;
+  background: linear-gradient(145deg, var(--retro-accent), var(--retro-info));
+  color: var(--retro-primary);
+  border: 2px solid var(--retro-border-bright);
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: bold;
+  font-size: 1.2rem;
+  text-shadow: none;
+  box-shadow: 
+    0 0 10px rgba(0, 255, 255, 0.5),
+    inset 0 0 5px rgba(0, 0, 0, 0.3);
+  animation: pulse-glow 2s ease-in-out infinite;
+}
+
+@keyframes pulse-glow {
+  0%, 100% { box-shadow: 0 0 10px rgba(0, 255, 255, 0.5), inset 0 0 5px rgba(0, 0, 0, 0.3); }
+  50% { box-shadow: 0 0 20px rgba(0, 255, 255, 0.8), inset 0 0 10px rgba(0, 0, 0, 0.5); }
+}
+
+.docmd-container.steps ol.steps-list > li.step-item::after {
+  content: '';
+  position: absolute;
+  left: 1.2rem;
+  top: 4rem;
+  bottom: -1rem;
+  width: 2px;
+  background: linear-gradient(180deg, var(--retro-accent), transparent);
+  box-shadow: 0 0 3px var(--retro-accent);
+}
+
+.docmd-container.steps ol.steps-list > li.step-item:last-child::after {
+  display: none;
+}
+
+/* Ensure regular lists inside steps maintain default styling */
+.docmd-container.steps ul,
+.docmd-container.steps ol:not(.steps-list) {
+  list-style: initial;
+  padding-left: 2rem;
+  margin: var(--retro-spacing) 0;
+}
+
+.docmd-container.steps ul li,
+.docmd-container.steps ol:not(.steps-list) li {
+  padding: 0.25rem 0;
+  border: none;
+  margin: 0;
+}
+
+.docmd-container.steps ul li::before,
+.docmd-container.steps ol:not(.steps-list) li::before {
+  display: none;
+}
+.logo-link img{border:0;box-shadow:none }
+/* Images */
+img {
+    max-width: 100%;
+    height: auto;
+    border: 1px solid var(--retro-border);
+    border-radius: 4px;
+    box-shadow: 0 0 10px rgba(0, 255, 255, 0.3);
+    filter: brightness(0.9) contrast(1.1);
+
+}
+
+/* Tables */
+table {
+  width: 100%;
+  border-collapse: collapse;
+  background: var(--retro-secondary);
+  border: 2px solid var(--retro-border-bright);
+  border-radius: 8px;
+  overflow: hidden;
+  box-shadow: var(--retro-shadow);
+}
+
+th {
+  background: linear-gradient(145deg, var(--retro-bg-light), var(--retro-secondary));
+  color: var(--retro-accent);
+  padding: var(--retro-spacing);
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  border-bottom: 2px solid var(--retro-border-bright);
+}
+
+td {
+  padding: var(--retro-spacing);
+  border-bottom: 1px solid var(--retro-border);
+}
+
+tr:hover {
+  background: var(--retro-bg-light);
+  box-shadow: inset 0 0 10px rgba(0, 255, 65, 0.1);
+}
+
+/* Light mode table adjustments */
+body[data-theme="light"] tr:hover {
+  box-shadow: inset 0 0 10px rgba(45, 93, 45, 0.1);
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+  body::before {
+    background-size: 100% 2px;
+  }
+  
+  @keyframes scanlines {
+    0% { transform: translateY(0); }
+    100% { transform: translateY(2px); }
+  }
+  
+  h1 {
+    font-size: 2rem;
+  }
+  
+  .docmd-tabs-nav {
+    flex-direction: column;
+  }
+  
+  .docmd-tabs-nav-item {
+    border-right: none;
+    border-bottom: 1px solid var(--retro-border);
+  }
+  
+  .docmd-container.steps ol.steps-list > li.step-item {
+    padding-left: 3rem;
+  }
+  
+  .docmd-container.steps ol.steps-list > li.step-item::before {
+    width: 2rem;
+    height: 2rem;
+    font-size: 1rem;
+  }
+  
+  .docmd-container.steps ol.steps-list > li.step-item::after {
+    left: 1rem;
+  }
+}
+
+/* Theme Toggle Button - Retro Style */
+.theme-toggle-button {
+  background: var(--retro-secondary);
+  border: 2px solid var(--retro-accent);
+  color: var(--retro-accent);
+  padding: 0.5rem;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  font-family: var(--retro-font-family);
+  text-transform: uppercase;
+  font-size: 0.8rem;
+  letter-spacing: 1px;
+  box-shadow: 0 0 10px rgba(0, 255, 255, 0.3);
+}
+
+.theme-toggle-button:hover {
+  background: var(--retro-accent);
+  color: var(--retro-primary);
+  box-shadow: 0 0 15px rgba(0, 255, 255, 0.6);
+}
+
+/* Theme toggle in light mode */
+body[data-theme="light"] .theme-toggle-button {
+  box-shadow: 0 0 10px rgba(0, 102, 102, 0.3);
+}
+
+body[data-theme="light"] .theme-toggle-button:hover {
+  box-shadow: 0 0 15px rgba(0, 102, 102, 0.6);
+}
+
+/* Special Retro Elements */
+.terminal-cursor::after {
+  content: '█';
+  animation: blink 1s infinite;
+  color: var(--retro-accent);
+}
+
+.retro-divider {
+  height: 2px;
+  background: linear-gradient(90deg, 
+    transparent, 
+    var(--retro-accent), 
+    var(--retro-danger), 
+    var(--retro-accent), 
+    transparent
+  );
+  margin: var(--retro-spacing-large) 0;
+  animation: scan 3s ease-in-out infinite;
+}
+
+/* Accessibility */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+  
+  body::before {
+    display: none;
+  }
+}
+
+/* Print Styles */
+@media print {
+  body::before {
+    display: none;
+  }
+  
+  .docmd-container {
+    box-shadow: none;
+    border: 1px solid #000;
+  }
+  
+  * {
+    text-shadow: none !important;
+    box-shadow: none !important;
+  }
+}