@mgks/docmd 0.2.0 → 0.2.1

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

@@ -1,619 +1,9 @@
-/* docmd-theme-ruby.css - Ruby theme for docmd */
+/* Source file from the docmd project — https://github.com/mgks/docmd */
 
-/* Import Google Fonts for Ruby theme */
-@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&family=Source+Sans+Pro:wght@300;400;600;700&display=swap');
+/* 
+ * docmd Ruby Theme
+ * Inspired by the beauty of gemstones
+ * Features: Deep ruby red, elegant serif fonts, subtle gem-like effects
+ */
 
-:root [data-theme="light"] {
-  /* Font family */
-  --ruby-font-family-sans: 'Source Sans Pro', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
-  --ruby-font-family-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
-  --ruby-font-family-mono: 'JetBrains Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
-  
-  /* Color palette - Light mode */
-  --ruby-primary: #b30000;         /* Deep ruby red */
-  --ruby-primary-light: #ffebee;   /* Very light red */
-  --ruby-primary-dark: #8e0000;    /* Darker ruby red */
-  --ruby-accent: #7b1fa2;          /* Complementary purple */
-  --ruby-accent-light: #f3e5f5;    /* Light purple */
-  --ruby-text: #2d2d2d;            /* Nearly black text */
-  --ruby-text-light: #5a5a5a;      /* Medium gray text */
-  --ruby-text-lightest: #757575;   /* Light gray text */
-  --ruby-background: #ffffff;      /* White background */
-  --ruby-background-alt: #fafafa;  /* Very light gray background */
-  --ruby-border: #e0e0e0;          /* Light gray border */
-  --ruby-border-light: #f0f0f0;    /* Very light gray border */
-  
-  /* Apply colors to CSS variables */
-  --bg-color: var(--ruby-background);
-  --text-color: var(--ruby-text);
-  --sidebar-bg: #f8f5f5;
-  --sidebar-text: var(--ruby-text-light);
-  --sidebar-link-active-bg: #f8e7e7;
-  --sidebar-link-active-text: var(--ruby-primary);
-  --link-color: var(--ruby-primary);
-  --border-color: var(--ruby-border);
-  --code-bg: var(--ruby-primary-light);
-  --code-text: var(--ruby-primary-dark);
-  --header-bg: var(--ruby-background);
-  --header-border: var(--ruby-border);
-  
-  /* Box shadows with ruby tint */
-  --shadow-sm: 0 2px 4px rgba(179, 0, 0, 0.05);
-  --shadow-md: 0 4px 8px rgba(179, 0, 0, 0.1);
-  --shadow-lg: 0 8px 16px rgba(179, 0, 0, 0.15);
-  
-  /* Image styling variables */
-  --image-border-color: var(--ruby-border);
-  --image-shadow: var(--shadow-md);
-  --image-caption-bg: var(--ruby-background-alt);
-  --image-caption-text: var(--ruby-text-light);
-  --image-hover-transform: translateY(-3px);
-  --image-hover-shadow: var(--shadow-lg);
-  --image-border-radius: 6px;
-  --image-transition: all 0.3s ease;
-}
-
-/* Dark mode */
-:root [data-theme="dark"] {
-  /* Color palette - Dark mode */
-  --ruby-primary: #ff5252;         /* Bright ruby red */
-  --ruby-primary-light: #3c1a1a;   /* Dark red background */
-  --ruby-primary-dark: #ff7b7b;    /* Lighter ruby red */
-  --ruby-accent: #ce93d8;          /* Light purple */
-  --ruby-accent-light: #2a1a2a;    /* Dark purple background */
-  --ruby-text: #f0f0f0;            /* Nearly white text */
-  --ruby-text-light: #c0c0c0;      /* Light gray text */
-  --ruby-text-lightest: #a0a0a0;   /* Medium gray text */
-  --ruby-background: #1a0a0a;      /* Very dark red-tinted background */
-  --ruby-background-alt: #2a1515;  /* Dark red-tinted background */
-  --ruby-border: #3a2020;          /* Dark red-tinted border */
-  --ruby-border-light: #2a1818;    /* Very dark red-tinted border */
-  
-  /* Apply colors to CSS variables */
-  --bg-color: var(--ruby-background);
-  --text-color: var(--ruby-text);
-  --sidebar-bg: #1a0a0a;
-  --sidebar-text: var(--ruby-text-light);
-  --sidebar-link-active-bg: #2a1515;
-  --sidebar-link-active-text: var(--ruby-primary);
-  --link-color: var(--ruby-primary);
-  --border-color: var(--ruby-border);
-  --code-bg: var(--ruby-primary-light);
-  --code-text: var(--ruby-text);
-  --header-bg: var(--ruby-background);
-  --header-border: var(--ruby-border);
-  
-  /* Box shadows for dark mode */
-  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
-  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.4);
-  --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.5);
-  
-  /* Image styling variables for dark mode */
-  --image-border-color: var(--ruby-border);
-  --image-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
-  --image-caption-bg: var(--ruby-background-alt);
-  --image-caption-text: var(--ruby-text-light);
-  --image-hover-transform: translateY(-3px);
-  --image-hover-shadow: 0 6px 12px rgba(0, 0, 0, 0.7);
-  --image-border-radius: 6px;
-  --image-transition: all 0.3s ease;
-}
-
-/* Apply theme styles */
-
-/* Typography improvements */
-body {
-  font-family: var(--ruby-font-family-sans);
-  line-height: 1.7;
-  letter-spacing: 0.01em;
-}
-
-h1, h2, h3, h4, h5, h6 {
-  font-family: var(--ruby-font-family-serif);
-  font-weight: 600;
-  line-height: 1.3;
-  margin-top: 2em;
-  margin-bottom: 0.7em;
-  color: var(--ruby-text);
-  letter-spacing: -0.01em;
-}
-
-h1 {
-  font-size: 2.5rem;
-  font-weight: 700;
-  margin-top: 0;
-  position: relative;
-  padding-bottom: 0.5rem;
-}
-
-h1::after {
-  content: "";
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  width: 60px;
-  height: 3px;
-  background: linear-gradient(90deg, var(--ruby-primary), var(--ruby-accent));
-  border-radius: 3px;
-}
-
-h2 {
-  font-size: 1.9rem;
-  border-bottom: 1px solid var(--ruby-border-light);
-  padding-bottom: 0.5rem;
-}
-
-h3 {
-  font-size: 1.6rem;
-}
-
-h4 {
-  font-size: 1.3rem;
-}
-
-a {
-    color: var(--link-color);
-    text-decoration: none;
-    transition: color 0.2s ease;
-    position: relative;
-
-}
-
-a:hover {
-  color: var(--ruby-primary-dark);
-}
-
-/* Stylish underline effect for links in content */
-.content-area a:not(.button):not(.no-underline)::after {
-  content: '';
-  position: absolute;
-  width: 100%;
-  height: 1px;
-  bottom: 0;
-  left: 0;
-  background: linear-gradient(90deg, var(--ruby-primary), var(--ruby-accent));
-  transform: scaleX(0);
-  transform-origin: bottom right;
-  transition: transform 0.3s ease;
-}
-
-.content-area a:not(.button):not(.no-underline):hover::after {
-    transform: scaleX(1);
-    transform-origin: bottom left;
-
-}
-
-p {
-  margin: 0.7em 0;
-  padding: 0.3em 0;
-  line-height: 1.8;
-}
-
-/* Sidebar refinements */
-.sidebar {
-  box-shadow: var(--shadow-sm);
-  border-right: 1px solid var(--ruby-border);
-}
-
-.sidebar-header {
-  border-bottom: 2px solid var(--ruby-border);
-  margin-bottom: 1.5rem;
-  padding-bottom: 1rem;
-}
-
-.sidebar nav li a {
-  border-radius: 4px;
-  margin-bottom: 3px;
-  transition: all 0.3s ease;
-  padding: 0.6rem 0.8rem;
-  font-weight: 400;
-}
-
-.sidebar nav li a:hover {
-  background-color: var(--sidebar-link-active-bg);
-  color: var(--ruby-primary);
-  transform: translateX(3px);
-}
-
-.sidebar nav li a.active {
-  background-color: var(--sidebar-link-active-bg);
-  color: var(--sidebar-link-active-text);
-  font-weight: 600;
-  border-left: 3px solid var(--ruby-primary);
-}
-
-/* Content area */
-.content-area {
-  padding: 2.5rem 5%;
-}
-
-/* Code blocks */
-pre {
-  background-color: var(--code-bg);
-  border-radius: 6px;
-  margin: 1.5em 0;
-  padding: 1.25em;
-  box-shadow: var(--shadow-sm);
-  border-left: 3px solid var(--ruby-primary);
-}
-
-code {
-  font-family: var(--ruby-font-family-mono);
-  font-size: 0.9em;
-  border-radius: 4px;
-  padding: 0.2em 0.4em;
-}
-
-/* Tables */
-table {
-  width: 100%;
-  border-collapse: separate;
-  border-spacing: 0;
-  margin: 1.5em 0;
-  border-radius: 6px;
-  overflow: hidden;
-  box-shadow: var(--shadow-sm);
-}
-
-th {
-  background-color: var(--ruby-primary-light);
-  color: var(--ruby-primary-dark);
-  text-align: left;
-  font-weight: 600;
-  padding: 0.75rem 1rem;
-  border-bottom: 2px solid var(--ruby-border);
-}
-
-td {
-  padding: 0.75rem 1rem;
-  border-top: 1px solid var(--ruby-border-light);
-}
-
-tr:hover {
-  background-color: var(--ruby-background-alt);
-}
-
-/* Custom container styling for Ruby theme */
-.docmd-container {
-  padding: 1.2rem 1.5rem;
-  margin: 1.75rem 0;
-  border-radius: 6px;
-  border: 1px solid var(--ruby-border-light);
-  background-color: var(--ruby-background);
-  box-shadow: var(--shadow-sm);
-  position: relative;
-  overflow: hidden;
-}
-
-/* Add gem-like facet to containers */
-.docmd-container::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 3px;
-    background: linear-gradient(90deg, var(--ruby-primary), var(--ruby-accent));
-
-}
-.docmd-container.steps::before{
-    height:initial !important
-}
-
-/* Callouts */
-.callout {
-  position: relative;
-  border: none;
-  border-left: 4px solid;
-  background-color: var(--ruby-background-alt);
-}
-
-.callout-title {
-  font-family: var(--ruby-font-family-serif);
-  font-weight: 600;
-  margin-bottom: 0.75em;
-  display: flex;
-  align-items: center;
-  font-size: 1.1em;
-}
-
-.callout-title::before {
-  margin-right: 0.5rem;
-  font-size: 1.1em;
-}
-
-.callout-info {
-  border-left-color: var(--ruby-primary);
-}
-
-.callout-info .callout-title {
-  color: var(--ruby-primary);
-}
-
-.callout-warning {
-  border-left-color: #f39c12;
-}
-
-.callout-warning .callout-title {
-  color: #f39c12;
-}
-
-.callout-tip {
-  border-left-color: #2ecc71;
-}
-
-.callout-tip .callout-title {
-  color: #2ecc71;
-}
-
-.callout-danger {
-  border-left-color: #e74c3c;
-}
-
-.callout-danger .callout-title {
-  color: #e74c3c;
-}
-
-.callout-success {
-  border-left-color: #2ecc71;
-}
-
-.callout-success .callout-title {
-  color: #2ecc71;
-}
-
-/* Cards with gem-like styling */
-.card {
-  border: none;
-  border-radius: 6px;
-  background: linear-gradient(135deg, var(--ruby-background) 0%, var(--ruby-background-alt) 100%);
-  box-shadow: var(--shadow-md);
-  transition: all 0.3s ease;
-  overflow: hidden;
-}
-
-.card:hover {
-  transform: translateY(-5px);
-  box-shadow: var(--shadow-lg);
-}
-
-.card .card-title {
-  font-family: var(--ruby-font-family-serif);
-  font-weight: 600;
-  padding: 1rem 1.5rem;
-  margin: 0;
-  background: linear-gradient(90deg, var(--ruby-primary-light), var(--ruby-accent-light));
-  color: var(--ruby-primary-dark);
-  border-bottom: 1px solid var(--ruby-border);
-}
-
-.card .card-content {
-  padding: 1rem 1.5rem;
-}
-
-/* Steps styling */
-.steps {
-  counter-reset: step-counter;
-  position: relative;
-  padding-left: 1rem;
-}
-
-.steps h4 {
-  position: relative;
-  padding-left: 2.5rem;
-  margin-top: 2rem;
-  margin-bottom: 1rem;
-  font-family: var(--ruby-font-family-serif);
-}
-
-.steps h4::before {
-  content: counter(step-counter);
-  counter-increment: step-counter;
-  position: absolute;
-  left: 0;
-  top: 50%;
-  transform: translateY(-50%);
-  width: 1.8rem;
-  height: 1.8rem;
-  background: linear-gradient(135deg, var(--ruby-primary) 0%, var(--ruby-accent) 100%);
-  color: white;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 0.9rem;
-  font-weight: 600;
-  box-shadow: var(--shadow-sm);
-}
-
-.docmd-container.steps-reset ol.steps-list > li.step-item::before{
-    color: var(--ruby-primary);
-
-}
-
-/* Buttons */
-button, .button {
-  background: linear-gradient(135deg, var(--ruby-primary) 0%, var(--ruby-accent) 100%);
-  color: white;
-  border: none;
-  padding: 0.6rem 1.2rem;
-  border-radius: 4px;
-  font-weight: 600;
-  cursor: pointer;
-  transition: all 0.3s ease;
-  box-shadow: var(--shadow-sm);
-}
-
-.docmd-button:hover{color:#fff}
-
-button:hover, .button:hover {
-  box-shadow: var(--shadow-md);
-  transform: translateY(-2px);
-}
-
-.theme-toggle-button {
-  background: transparent;
-  color: var(--ruby-text-light);
-  box-shadow: none;
-}
-
-.theme-toggle-button:hover {
-  background: var(--ruby-background-alt);
-  color: var(--ruby-primary);
-  box-shadow: var(--shadow-sm);
-  transform: translateY(0);
-}
-
-/* Responsive adjustments */
-@media (max-width: 768px) {
-  .content-area {
-    padding: 1.5rem 1rem;
-  }
-  
-  h1 {
-    font-size: 2rem;
-  }
-  
-  h2 {
-    font-size: 1.6rem;
-  }
-  
-  h3 {
-    font-size: 1.3rem;
-  }
-}
-
-/* Image styling */
-img {
-  max-width: 100%;
-  height: auto;
-  border-radius: var(--image-border-radius);
-  transition: var(--image-transition);
-}
-
-img.with-border {
-  border: 1px solid var(--image-border-color);
-  padding: 4px;
-}
-
-img.with-shadow {
-  box-shadow: var(--image-shadow);
-}
-
-img.with-shadow:hover {
-  box-shadow: var(--image-hover-shadow);
-  transform: var(--image-hover-transform);
-}
-
-figure {
-  margin: 1.5em 0;
-  text-align: center;
-  transition: var(--image-transition);
-}
-
-figure:hover {
-  transform: var(--image-hover-transform);
-}
-
-figure img {
-  max-width: 100%;
-  border-radius: var(--image-border-radius);
-}
-
-figcaption {
-  background-color: var(--image-caption-bg);
-  color: var(--image-caption-text);
-  padding: 0.5em;
-  font-size: 0.9em;
-  border-radius: 0 0 var(--image-border-radius) var(--image-border-radius);
-  font-style: italic;
-}
-
-/* Image gallery */
-.image-gallery {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-  gap: 1rem;
-  margin: 1.5em 0;
-}
-
-.image-gallery figure {
-  margin: 0;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  border-radius: var(--image-border-radius);
-  overflow: hidden;
-  box-shadow: var(--shadow-sm);
-}
-
-.image-gallery figure:hover {
-  box-shadow: var(--shadow-md);
-}
-
-.image-gallery img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  border-radius: var(--image-border-radius) var(--image-border-radius) 0 0;
-  transition: transform 0.3s ease;
-}
-
-.image-gallery figcaption {
-  padding: 0.5rem;
-  background-color: var(--image-caption-bg);
-  color: var(--image-caption-text);
-  font-size: 0.85rem;
-  border-radius: 0;
-}
-
-/* Zoom effect for gallery images */
-.image-gallery.zoom img {
-  transition: transform 0.3s ease;
-}
-
-.image-gallery.zoom figure:hover img {
-  transform: scale(1.05);
-}
-
-/* Lightbox image styling */
-img.lightbox {
-  cursor: zoom-in;
-}
-
-/* Framed image styling */
-img.framed {
-  border: 8px solid white;
-  box-shadow: 0 0 0 1px var(--ruby-border), var(--shadow-md);
-  border-radius: 3px;
-}
-
-/* Polaroid-style image */
-figure.polaroid {
-  background: white;
-  padding: 10px 10px 20px;
-  box-shadow: var(--shadow-md);
-  border-radius: 3px;
-}
-
-figure.polaroid img {
-  border-radius: 2px;
-}
-
-figure.polaroid figcaption {
-  background: white;
-  color: var(--ruby-text);
-  font-family: var(--ruby-font-family-serif);
-  font-style: italic;
-}
-
-/* Mobile responsiveness for images */
-@media (max-width: 768px) {
-  .image-gallery {
-    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
-  }
-  
-  .image-gallery img {
-    height: 120px;
-  }
-} 
+@import url(https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&family=Source+Sans+Pro:wght@300;400;600;700&display=swap);h1,h2{padding-bottom:.5rem}.sidebar,pre{box-shadow:var(--shadow-sm)}.sidebar nav li a.active,pre{border-left:3px solid var(--ruby-primary)}pre,table{margin:1.5em 0}a:hover,th{color:var(--ruby-primary-dark)}.sidebar-header,th{border-bottom:2px solid var(--ruby-border)}td,th{padding:.75rem 1rem}.content-area a:not(.button):not(.no-underline)::after,.docmd-container::before,h1::after{background:linear-gradient(90deg,var(--ruby-primary),var(--ruby-accent));position:absolute;left:0}.callout-info .callout-title,.docmd-container.steps-reset ol.steps-list>li.step-item::before,.sidebar nav li a:hover{color:var(--ruby-primary)}.card .card-content,.card .card-title{padding:1rem 1.5rem}figure img,img{max-width:100%}.image-gallery img,.image-gallery.zoom img{transition:transform .3s}:root[data-theme=light]{--ruby-font-family-sans:'Source Sans Pro',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;--ruby-font-family-serif:'Playfair Display',Georgia,'Times New Roman',serif;--ruby-font-family-mono:'JetBrains Mono','SFMono-Regular',Consolas,'Liberation Mono',Menlo,monospace;--ruby-primary:#b30000;--ruby-primary-light:#ffebee;--ruby-primary-dark:#8e0000;--ruby-accent:#7b1fa2;--ruby-accent-light:#f3e5f5;--ruby-text:#2d2d2d;--ruby-text-light:#5a5a5a;--ruby-text-lightest:#757575;--ruby-background:#ffffff;--ruby-background-alt:#fafafa;--ruby-border:#e0e0e0;--ruby-border-light:#f0f0f0;--bg-color:var(--ruby-background);--text-color:var(--ruby-text);--sidebar-bg:#f8f5f5;--sidebar-text:var(--ruby-text-light);--sidebar-link-active-bg:#f8e7e7;--sidebar-link-active-text:var(--ruby-primary);--link-color:var(--ruby-primary);--border-color:var(--ruby-border);--code-bg:var(--ruby-primary-light);--code-text:var(--ruby-primary-dark);--header-bg:var(--ruby-background);--header-border:var(--ruby-border);--shadow-sm:0 2px 4px rgba(179, 0, 0, 0.05);--shadow-md:0 4px 8px rgba(179, 0, 0, 0.1);--shadow-lg:0 8px 16px rgba(179, 0, 0, 0.15);--image-border-color:var(--ruby-border);--image-shadow:var(--shadow-md);--image-caption-bg:var(--ruby-background-alt);--image-caption-text:var(--ruby-text-light);--image-hover-transform:translateY(-3px);--image-hover-shadow:var(--shadow-lg);--image-border-radius:6px;--image-transition:all 0.3s ease}:root[data-theme=dark]{--ruby-primary:#ff5252;--ruby-primary-light:#3c1a1a;--ruby-primary-dark:#ff7b7b;--ruby-accent:#ce93d8;--ruby-accent-light:#2a1a2a;--ruby-text:#f0f0f0;--ruby-text-light:#c0c0c0;--ruby-text-lightest:#a0a0a0;--ruby-background:#1a0a0a;--ruby-background-alt:#2a1515;--ruby-border:#3a2020;--ruby-border-light:#2a1818;--bg-color:var(--ruby-background);--text-color:var(--ruby-text);--sidebar-bg:#1a0a0a;--sidebar-text:var(--ruby-text-light);--sidebar-link-active-bg:#2a1515;--sidebar-link-active-text:var(--ruby-primary);--link-color:var(--ruby-primary);--border-color:var(--ruby-border);--code-bg:var(--ruby-primary-light);--code-text:var(--ruby-text);--header-bg:var(--ruby-background);--header-border:var(--ruby-border);--shadow-sm:0 2px 4px rgba(0, 0, 0, 0.3);--shadow-md:0 4px 8px rgba(0, 0, 0, 0.4);--shadow-lg:0 8px 16px rgba(0, 0, 0, 0.5);--image-border-color:var(--ruby-border);--image-shadow:0 4px 8px rgba(0, 0, 0, 0.5);--image-caption-bg:var(--ruby-background-alt);--image-caption-text:var(--ruby-text-light);--image-hover-transform:translateY(-3px);--image-hover-shadow:0 6px 12px rgba(0, 0, 0, 0.7);--image-border-radius:6px;--image-transition:all 0.3s ease}body{font-family:var(--ruby-font-family-sans);line-height:1.7;letter-spacing:.01em}.callout-title,.card .card-title,.steps h4,figure.polaroid figcaption,h1,h2,h3,h4,h5,h6{font-family:var(--ruby-font-family-serif)}h1,h2,h3,h4,h5,h6{font-weight:600;line-height:1.3;margin-top:2em;margin-bottom:.7em;color:var(--ruby-text);letter-spacing:-.01em}h1{font-size:2.5rem;font-weight:700;margin-top:0;position:relative}h1::after{content:"";bottom:0;width:60px;height:3px;border-radius:3px}.callout,.docmd-container,.steps,.steps h4,a{position:relative}h2{font-size:1.9rem;border-bottom:1px solid var(--ruby-border-light)}h3{font-size:1.6rem}h4{font-size:1.3rem}a{color:var(--link-color);text-decoration:none;transition:color .2s}.content-area a:not(.button):not(.no-underline)::after{content:'';width:100%;height:1px;bottom:0;transform:scaleX(0);transform-origin:bottom right;transition:transform .3s}.content-area a:not(.button):not(.no-underline):hover::after{transform:scaleX(1);transform-origin:bottom left}p{margin:.7em 0;padding:.3em 0;line-height:1.8}.sidebar{border-right:1px solid var(--ruby-border)}.sidebar-header{margin-bottom:1.5rem;padding-bottom:1rem}.sidebar nav li a{border-radius:4px;margin-bottom:3px;transition:.3s;padding:.6rem .8rem;font-weight:400}.sidebar nav li a:hover{background-color:var(--sidebar-link-active-bg);transform:translateX(3px)}.sidebar nav li a.active{background-color:var(--sidebar-link-active-bg);color:var(--sidebar-link-active-text);font-weight:600}.content-area{padding:2.5rem 5%}pre{background-color:var(--code-bg);border-radius:6px;padding:1.25em}code{font-family:var(--ruby-font-family-mono);font-size:.9em;border-radius:4px;padding:.2em .4em}.docmd-container,table{border-radius:6px;box-shadow:var(--shadow-sm);overflow:hidden}table{width:100%;border-collapse:separate;border-spacing:0}th{background-color:var(--ruby-primary-light);text-align:left;font-weight:600}td{border-top:1px solid var(--ruby-border-light)}tr:hover{background-color:var(--ruby-background-alt)}.docmd-container{padding:1.2rem 1.5rem;margin:1.75rem 0;border:1px solid var(--ruby-border-light);background-color:var(--ruby-background)}.docmd-container::before{content:'';top:0;width:100%;height:3px}.docmd-container.steps::before{height:initial!important}.callout{border:none;border-left:4px solid;background-color:var(--ruby-background-alt)}.callout-title{font-weight:600;margin-bottom:.75em;display:flex;align-items:center;font-size:1.1em}.callout-title::before{margin-right:.5rem;font-size:1.1em}.callout-info{border-left-color:var(--ruby-primary)}.callout-warning{border-left-color:#f39c12}.callout-warning .callout-title{color:#f39c12}.callout-success,.callout-tip{border-left-color:#2ecc71}.callout-success .callout-title,.callout-tip .callout-title{color:#2ecc71}.callout-danger{border-left-color:#e74c3c}.callout-danger .callout-title{color:#e74c3c}.card{border:none;border-radius:6px;background:linear-gradient(135deg,var(--ruby-background) 0,var(--ruby-background-alt) 100%);box-shadow:var(--shadow-md);transition:.3s;overflow:hidden}.button,.steps h4::before,button{background:linear-gradient(135deg,var(--ruby-primary) 0,var(--ruby-accent) 100%);font-weight:600;box-shadow:var(--shadow-sm)}.card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)}.card .card-title{font-weight:600;margin:0;background:linear-gradient(90deg,var(--ruby-primary-light),var(--ruby-accent-light));color:var(--ruby-primary-dark);border-bottom:1px solid var(--ruby-border)}.steps{counter-reset:step-counter;padding-left:1rem}.steps h4{padding-left:2.5rem;margin-top:2rem;margin-bottom:1rem}.steps h4::before{content:counter(step-counter);counter-increment:step-counter;position:absolute;left:0;top:50%;transform:translateY(-50%);width:1.8rem;height:1.8rem;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.9rem}.button,button{color:#fff;border:none;padding:.6rem 1.2rem;border-radius:4px;cursor:pointer;transition:.3s}.image-gallery figcaption,figcaption{background-color:var(--image-caption-bg);color:var(--image-caption-text)}figure,img{transition:var(--image-transition)}.docmd-button:hover{color:#fff}.button:hover,button:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}figure:hover,img.with-shadow:hover{transform:var(--image-hover-transform)}.theme-toggle-button{background:0 0;color:var(--ruby-text-light);box-shadow:none}.theme-toggle-button:hover{background:var(--ruby-background-alt);color:var(--ruby-primary);box-shadow:var(--shadow-sm);transform:translateY(0)}img{height:auto;border-radius:var(--image-border-radius)}img.with-border{border:1px solid var(--image-border-color);padding:4px}.image-gallery figure,figure img{border-radius:var(--image-border-radius)}img.with-shadow{box-shadow:var(--image-shadow)}img.with-shadow:hover{box-shadow:var(--image-hover-shadow)}figure{margin:1.5em 0;text-align:center}figcaption{padding:.5em;font-size:.9em;border-radius:0 0 var(--image-border-radius) var(--image-border-radius);font-style:italic}.image-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1rem;margin:1.5em 0}.image-gallery figure{margin:0;height:100%;display:flex;flex-direction:column;overflow:hidden;box-shadow:var(--shadow-sm)}.image-gallery figure:hover{box-shadow:var(--shadow-md)}.image-gallery img{width:100%;height:100%;object-fit:cover;border-radius:var(--image-border-radius) var(--image-border-radius) 0 0}.image-gallery figcaption{padding:.5rem;font-size:.85rem;border-radius:0}.image-gallery.zoom figure:hover img{transform:scale(1.05)}img.lightbox{cursor:zoom-in}img.framed{border:8px solid #fff;box-shadow:0 0 0 1px var(--ruby-border),var(--shadow-md);border-radius:3px}figure.polaroid{background:#fff;padding:10px 10px 20px;box-shadow:var(--shadow-md);border-radius:3px}figure.polaroid img{border-radius:2px}figure.polaroid figcaption{background:#fff;color:var(--ruby-text);font-style:italic}@media (max-width:768px){.content-area{padding:1.5rem 1rem}h1{font-size:2rem}h2{font-size:1.6rem}h3{font-size:1.3rem}.image-gallery{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}.image-gallery img{height:120px}}