@docmd/themes 0.5.1 → 0.5.3

package/src/docmd-theme-sky.css

@@ -12,53 +12,40 @@
  * --------------------------------------------------------------------
  */
 
- /* 
+/* 
  * Sky Theme
  * Inspired by the clear blue sky
  * Features: Blue tones, clean lines, subtle gradients
  */
 
 :root {
-    --sky-primary: #0097ff
+    --sky-primary: #0097ff;
 }
 
 :root[data-theme=light] {
-    --font-family-sans: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
-    --font-family-mono: 'JetBrains Mono', SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
     --accent-color: #0097ff;
     --sky-primary: #0097ff;
-    --sky-primary-light: #e5f4ff;
-    --sky-primary-dark: #0078cc;
+    --sky-primary-light: #8acdff33;
+    --sky-primary-dark: #00497b;
     --sky-text: #1a1f36;
     --sky-text-light: #4a5568;
-    --sky-text-lightest: #718096;
-    --sky-background: #fff;
+    --sky-background: #ffffff;
     --sky-background-alt: #f9fafb;
     --sky-border: #e2e8f0;
-    --sky-border-light: #edf2f7;
     --bg-color: var(--sky-background);
     --text-color: var(--sky-text);
+    --text-heading: var(--sky-text);
+    --text-muted: var(--sky-text-light);
     --sidebar-bg: #f7fafc;
     --sidebar-text: var(--sky-text-light);
-    --sidebar-link-active-bg: #e5f4ff;
+    --sidebar-link-active-bg: var(--sky-primary-light);
     --sidebar-link-active-text: var(--sky-primary);
     --link-color: var(--sky-primary);
-    --border-color: var(--sky-border);
-    --code-bg: var(--sky-primary-light);
-    --code-text: var(--sky-primary-dark);
+    --border-color: #6dabff57;
     --header-bg: var(--sky-background);
     --header-border: var(--sky-border);
-    --shadow-sm: 0 1px 2px 0 #0000000d;
-    --shadow-md: 0 4px 6px -1px #0000001a 0 2px 4px -1px #0000000f;
-    --shadow-lg: 0 10px 15px -3px #0000001a 0 4px 6px -2px #0000000d;
-    --image-border-color: var(--sky-border);
-    --image-shadow: var(--shadow-md);
-    --image-caption-bg: var(--sky-background-alt);
-    --image-caption-text: var(--sky-text-light);
-    --image-hover-transform: translateY(-2px);
-    --image-hover-shadow: var(--shadow-lg);
-    --image-border-radius: 8px;
-    --image-transition: all .3s ease
+    --code-bg: var(--sky-primary-light);
+    --code-text: var(--sky-primary-dark);
 }
 
 :root[data-theme=dark] {
@@ -67,563 +54,198 @@
     --sky-primary-dark: #60a5fa;
     --sky-text: #f1f5f9;
     --sky-text-light: #cbd5e1;
-    --sky-text-lightest: #94a3b8;
     --sky-background: #0f172a;
     --sky-background-alt: #1e293b;
     --sky-border: #334155;
-    --sky-border-light: #1e293b;
+
     --bg-color: var(--sky-background);
     --text-color: var(--sky-text);
+    --text-heading: var(--sky-text);
+    --text-muted: var(--sky-text-light);
     --sidebar-bg: #0f172a;
     --sidebar-text: var(--sky-text-light);
     --sidebar-link-active-bg: #1e293b;
     --sidebar-link-active-text: var(--sky-primary);
     --link-color: var(--sky-primary);
     --border-color: var(--sky-border);
-    --code-bg: var(--sky-primary-light);
-    --code-text: var(--sky-text);
     --header-bg: var(--sky-background);
     --header-border: var(--sky-border);
-    --shadow-sm: 0 1px 2px 0 #0000004d;
-    --shadow-md: 0 4px 6px -1px #0000004d 0 2px 4px -1px #0003;
-    --shadow-lg: 0 10px 15px -3px #0000004d 0 4px 6px -2px #0003;
-    --image-border-color: var(--sky-border);
-    --image-shadow: 0 4px 8px #00000080;
-    --image-caption-bg: var(--sky-background-alt);
-    --image-caption-text: var(--sky-text-light);
-    --image-hover-transform: translateY(-2px);
-    --image-hover-shadow: 0 6px 12px #000000b3;
-    --image-border-radius: 8px;
-    --image-transition: all .3s ease
-}
-
-body {
-    font-feature-settings: salt, ss01, ss02;
-    letter-spacing: -.01em
-}
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-    font-weight: 600;
-    line-height: 1.3;
-    margin-top: 2em;
-    margin-bottom: .5em;
-    color: var(--sky-text)
-}
-
-.sidebar nav li a.active,
-.sidebar nav li a:hover {
-    background-color: var(--sidebar-link-active-bg);
-    color: var(--sidebar-link-active-text)
-}
-
-pre,
-table {
-    margin: 1.5em 0;
-    border-radius: 8px;
-    box-shadow: var(--shadow-sm)
-}
-
-td,
-th {
-    padding: .75rem 1rem
-}
-
-th,
-tr:hover {
-    background-color: var(--sky-background-alt)
-}
-
-.callout,
-.steps {
-    position: relative
-}
-
-.card,
-figure,
-table {
-    overflow: hidden
-}
-
-.docmd-container,
-.sidebar,
-figure,
-pre,
-table {
-    box-shadow: var(--shadow-sm)
-}
-
-.card .card-content>:last-child,
-figure img {
-    margin-bottom: 0
-}
-
-.card .card-content>:first-child,
-h1 {
-    margin-top: 0
-}
-
-h1 {
-    font-size: 2.25rem;
-    font-weight: 700
-}
-
-h2 {
-    font-size: 1.75rem;
-    border-bottom: 1px solid var(--sky-border-light);
-    padding-bottom: .5rem
-}
-
-h3 {
-    font-size: 1.5rem
-}
-
-h4 {
-    font-size: 1.25rem
-}
-
-a {
-    color: var(--link-color);
-    text-decoration: none;
-    transition: color .2s
-}
-
-a:hover {
-    text-decoration: underline
-}
-
-p {
-    margin: .5em 0;
-    padding: .5em 0;
-    line-height: 1.7
-}
-
-.sidebar nav li a {
-    border-radius: 6px;
-    margin-bottom: 2px;
-    transition: .2s
-}
-
-.sidebar nav li a.active {
-    font-weight: 500
-}
-
-.content-area {
-    padding: 2.5rem 5%
-}
-
-pre {
-    background-color: var(--code-bg);
-    padding: 1.25em
-}
-
-code {
-    font-size: .9em;
-    border-radius: 4px;
-    padding: .2em .4em
-}
-
-table {
-    width: 100%;
-    border-collapse: separate;
-    border-spacing: 0
-}
-
-th {
-    text-align: left;
-    font-weight: 600
-}
-
-td {
-    border-top: 1px solid var(--sky-border-light)
-}
-
-.docmd-container {
-    padding: .5rem 1.5rem;
-    margin: 1.75rem 0;
-    border-radius: 10px;
-    border: 1px solid var(--sky-border-light);
-    background-color: var(--sky-background)
-}
-
-.callout,
-.card {
-    background-color: var(--card-bg)
-}
-
-.callout {
-    border: none;
-    border-left: 5px solid
-}
-
-.callout-title {
-    font-weight: 600;
-    margin-bottom: .75em;
-    display: flex;
-    align-items: center
-}
-
-.callout-title::before {
-    margin-right: .5rem;
-    font-size: 1.1em
+    --code-bg: var(--sky-primary-light);
+    --code-text: var(--sky-text);
 }
 
-.callout-info {
-    border-left-color: var(--sky-primary)
-}
+/* Theme-specific overrides */
 
 .callout-info .callout-title::before {
-    content: "ℹ️"
-}
-
-.callout-warning {
-    border-left-color: #f59e0b
+    content: "ℹ️ ";
 }
 
 .callout-warning .callout-title::before {
-    content: "⚠️"
-}
-
-.callout-success,
-.callout-tip {
-    border-left-color: #10b981
+    content: "⚠️ ";
 }
 
 .callout-tip .callout-title::before {
-    content: "💡"
-}
-
-.callout-danger {
-    border-left-color: #ef4444
+    content: "💡 ";
 }
 
 .callout-danger .callout-title::before {
-    content: "🚨"
+    content: "❌ ";
 }
 
 .callout-success .callout-title::before {
-    content: "✅"
-}
-
-.card {
-    border: 1px solid var(--sky-border);
-    box-shadow: var(--text-color);
-    transition: transform .2s, box-shadow .2s;
-    display: flex;
-    flex-direction: column
-}
-
-.card:hover {
-    transform: translateY(-2px);
-    box-shadow: var(--shadow-lg)
-}
-
-.card .card-title {
-    padding: .5rem 1.5rem 1rem;
-    border-bottom: 1px solid var(--sky-border);
-    font-weight: 600;
-    margin-top: 0
-}
-
-.card .card-content {
-    flex: 1;
-    padding: .25rem
-}
-
-.steps {
-    counter-reset: step-counter;
-    border: none;
-    background-color: transparent;
-    box-shadow: none;
-    padding: 0;
-    margin-left: 1rem
-}
-
-.steps::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    bottom: 0 !important;
-    left: 1.5rem !important;
-    width: 3px !important;
-    background-color: var(--sky-border);
-    transform: translateX(-50%);
-    z-index: 0
-}
-
-.steps .step {
-    position: relative;
-    padding: .5rem 2.5em;
-    border-radius: 10px;
-    margin-bottom: 1em;
-    display: block;
-    background-color: var(--card-bg)
-}
-
-.steps .step:last-child {
-    padding-bottom: 0
+    content: "✅ ";
 }
 
-.steps h4,
-.steps ol li strong:first-child,
-.steps ol li:first-child {
-    position: relative;
-    counter-increment: step-counter;
-    margin-bottom: 1rem;
-    font-weight: 600;
-    font-size: 1.1rem;
-    display: block
-}
-
-.steps h4::before,
-.steps ol li::before {
-    content: counter(list-counter) !important;
-    position: absolute;
-    left: -2.55rem;
-    top: .5rem;
-    width: 2rem;
-    height: 2rem;
+.content-area .button {
     background-color: var(--sky-primary);
-    color: #fff !important;
-    border-radius: 50%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 1rem !important;
-    font-weight: 500 !important;
-    z-index: 1
+    color: #ffffff;
+    border-radius: var(--radius-md);
 }
 
-.steps .step h4,
-.steps .step ol,
-.steps .step>div,
-.steps .step>p,
-.steps .step>pre,
-.steps ol,
-.steps ol li {
-    display: block
+.content-area .button:hover {
+    background-color: var(--sky-primary-dark);
 }
 
-.step-content,
-.step-content>div,
-.step-content>p,
-.step-content>pre {
-    display: block;
-    margin-top: .5rem;
-    margin-bottom: 1rem
+/* Polaroid effect */
+figure.polaroid {
+    background: #ffffff;
+    padding: 10px 10px 30px;
+    box-shadow: var(--shadow-md);
+    border-radius: var(--radius-sm);
 }
 
-.steps ol+*,
-.steps pre {
-    margin-top: 1rem
+figure.polaroid figcaption {
+    background: #ffffff;
+    color: var(--sky-text);
+    font-size: 1.1rem;
+    font-style: italic;
 }
 
-.steps ol {
-    list-style: none;
-    padding-left: 0;
-    margin-left: 0
+[data-theme=dark] figure.polaroid,
+[data-theme=dark] figure.polaroid figcaption {
+    background: #1e293b;
+    color: var(--sky-text);
 }
 
-.steps ol li {
-    position: relative;
-    margin-bottom: 1rem
+.page-header,
+.docmd-menubar {
+    background-color: var(--sidebar-bg);
+    border: 0;
 }
 
-.steps .step h4 {
-    font-weight: 600;
-    margin-bottom: 1rem
+body.has-menubar-top:not(.no-header) {
+    --sticky-top-offset: calc(var(--header-h));
 }
 
-.steps .step ol {
-    counter-reset: none;
-    list-style: decimal;
-    padding-left: 1.5rem;
-    margin-top: .5rem
+.sidebar {
+    border-right: 0;
+    padding-left: .25em;
 }
 
-.steps .step ol li {
-    padding-left: 0;
-    margin-bottom: .5rem;
-    display: list-item
+body {
+    background-color: var(--sidebar-bg);
 }
 
-.steps .step ol li::before {
-    display: none
+.content-theme-cover {
+    position: fixed;
+    overflow: scroll;
+    height: stretch;
+    width: stretch;
+    border: 1px solid var(--sky-border);
+    margin-top: calc(var(--sticky-top-offset) + 5px);
+    border-radius: 1.5em 0 0 0;
+    background-color: var(--bg-color);
 }
 
-.steps pre {
-    margin-bottom: 1rem
+.version-dropdown-toggle {
+    width: 80%;
+    margin: 0 auto;
+    border-radius: 1rem;
+    background-color: var(--sky-primary-light);
 }
 
-.button,
-button {
-    padding: .5rem 1rem;
-    background-color: var(--sky-primary);
-    color: #fff;
-    border: none;
-    border-radius: 6px;
-    font-weight: 500;
-    cursor: pointer;
-    transition: background-color .2s
+.sidebar nav li.nav-group {
+    background-color: var(--sky-primary-light);
+    border-radius: 10px;
 }
 
-.image-gallery figure,
-figure,
-img {
-    transition: var(--image-transition)
+.sidebar nav .submenu {
+    border: 0;
+    background-color: var(--sky-primary-light);
+    margin: 0 .5em .5em;
+    padding: .25em;
+    border-radius: 10px;
 }
 
-.button:hover,
-button:hover {
-    background-color: var(--sky-primary-dark)
+.sidebar nav li a,
+.sidebar nav li .nav-label {
+    color: var(--sky-primary-dark);
 }
 
-.docmd-search-trigger,
-.theme-toggle-button {
-    background-color: var(--sky-background-alt);
-    border-color: var(--sky-border-light);
-    border-radius: 6px;
-    transition: .2s
+.sidebar nav li {
+    margin: .25rem;
 }
 
-.docmd-search-trigger:hover,
+.copy-code-button:hover,
+.docmd-tabs-nav-item:hover,
+.sidebar nav li a.active,
+.sidebar nav li a:hover,
 .theme-toggle-button:hover {
-    background-color: var(--sky-primary-light)
-}
-
-img {
-    border-radius: var(--image-border-radius)
-}
-
-img.with-border {
-    border: 1px solid var(--image-border-color);
-    padding: 8px;
-    background-color: var(--bg-color)
-}
-
-img.with-shadow {
-    box-shadow: var(--image-shadow)
-}
-
-img.with-shadow:hover {
-    box-shadow: var(--image-hover-shadow)
-}
-
-figure {
-    border-radius: var(--image-border-radius)
-}
-
-figure:hover {
-    box-shadow: var(--shadow-md)
-}
-
-figure img {
-    border-radius: var(--image-border-radius) var(--image-border-radius) 0 0
+    background-color: var(--sky-primary-light);
 }
 
-figcaption {
-    background-color: var(--image-caption-bg);
-    color: var(--image-caption-text);
-    padding: .75rem 1rem;
-    font-size: .9rem;
-    font-weight: 500
-}
-
-.image-gallery {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
-    gap: 1.5rem;
-    margin: 2rem 0
-}
-
-.image-gallery figure {
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    margin: 0
-}
-
-.image-gallery figure:hover {
-    transform: var(--image-hover-transform)
+.sidebar nav li a.active {
+    color: var(--sky-primary-dark);
 }
 
-.image-gallery img {
-    height: 200px;
-    width: 100%;
-    object-fit: cover;
-    margin: 0
+.toc-sidebar {
+    top: 1rem;
 }
 
-.image-gallery figcaption {
-    flex: 1;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    text-align: center
+.version-dropdown-menu {
+    width: 80%;
+    margin: 0 auto;
 }
 
-.image-gallery.zoom img {
-    transition: transform .5s
+.version-dropdown-toggle:hover {
+    border-color: var(--sky-primary);
 }
 
-.image-gallery.zoom figure:hover img {
-    transform: scale(1.05)
+.footer-complete {
+    background-color: var(--bg-color);
+    padding: 0;
+    margin: 0 var(--space-8);
+    padding: var(--space-12) 0 var(--space-6);
 }
 
-img.lightbox {
-    cursor: zoom-in
+.page-footer-actions {
+    border-top: 0;
 }
 
-img.framed {
-    border: 8px solid #fff;
-    box-shadow: 0 0 0 1px var(--image-border-color), var(--image-shadow);
-    box-sizing: border-box
+.footer-complete-bottom {
+    border-top: 0;
 }
 
-figure.polaroid {
-    background: #fff;
-    padding: 10px 10px 30px;
-    box-shadow: var(--shadow-md)
+.docmd-kbd {
+    background-color: var(--sky-primary-light);
+    color: var(--sky-primary);
 }
 
-figure.polaroid img {
-    border-radius: 0;
-    box-shadow: none
+.docmd-search-trigger .search-label,
+.docmd-options-menu .lucide-icon {
+    color: var(--sky-primary-dark);
 }
 
-figure.polaroid figcaption {
-    background: #fff;
-    color: var(--sky-text);
-    font-family: Caveat, cursive, var(--font-family-sans);
-    font-size: 1.1rem
+.docmd-options-menu .sponsor-link-button:hover,
+.docmd-options-menu .sponsor-link-button:hover svg,
+.docmd-options-menu button:hover:not(.docmd-search-trigger) {
+    background-color: var(--sky-primary);
+    color: var(--sky-primary-dark);
+    border: initial;
+    transition: 0.2s;
 }
 
-@media (max-width:768px) {
-    .content-area {
-        padding: 1.5rem 1rem
-    }
-
-    h1 {
-        font-size: 1.75rem
-    }
-
-    h2 {
-        font-size: 1.5rem
-    }
-
-    h3 {
-        font-size: 1.25rem
-    }
-
-    .image-gallery {
-        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr))
-    }
-
-    .image-gallery img {
-        height: 150px
-    }
+.docmd-options-menu .theme-toggle-button,
+.docmd-options-menu .sponsor-link-button {
+    border-radius: 50%;
 }