/* Custom styles for Readur documentation */ /* Enhanced color scheme for better readability and warmth */ :root { --readur-primary: #00acc1; /* Cyan - more vibrant */ --readur-accent: #ffa726; /* Amber - warm accent */ --readur-success: #66bb6a; --readur-info: #42a5f5; --readur-warning: #ffa726; --readur-danger: #ef5350; } /* Dark theme overrides - warmer, less depressing */ [data-md-color-scheme="slate"] { --md-default-bg-color: #1e2329; /* Warmer dark background */ --md-default-bg-color--light: #272d35; --md-default-bg-color--lighter: #323842; --md-default-fg-color: #e8eaed; /* Softer white text */ --md-default-fg-color--light: #b8bec7; --md-default-fg-color--lighter: #8b939e; --md-code-bg-color: #2a3038; /* Warmer code background */ --md-code-fg-color: #e8eaed; --md-typeset-a-color: #64b5f6; /* Softer blue links */ } /* Typography improvements */ .md-typeset { font-size: 1rem; /* Slightly larger base font */ line-height: 1.7; /* Better line spacing */ } .md-typeset h1 { font-size: 2.2rem; font-weight: 600; letter-spacing: -0.02em; margin: 1.5rem 0 1rem; } .md-typeset h2 { font-size: 1.8rem; font-weight: 600; letter-spacing: -0.01em; margin: 1.25rem 0 0.75rem; } .md-typeset h3 { font-size: 1.4rem; font-weight: 600; margin: 1rem 0 0.5rem; } .md-typeset p { margin: 1rem 0; } /* Better code blocks */ .md-typeset pre > code { font-size: 0.9rem; line-height: 1.6; padding: 1.25rem; } [data-md-color-scheme="slate"] .md-typeset code { background-color: #2a3038; color: #80cbc4; /* Cyan tint for inline code */ padding: 0.2em 0.4em; border-radius: 0.25rem; } /* Navigation improvements */ .md-nav__link { font-size: 0.95rem; padding: 0.6rem 0.8rem; transition: all 0.2s ease; } .md-nav__link:hover { color: var(--md-accent-fg-color); } [data-md-color-scheme="slate"] .md-nav__link--active { color: #64b5f6; font-weight: 500; } /* Sidebar styling */ .md-sidebar { width: 15rem; } .md-sidebar--primary .md-sidebar__scrollwrap { padding: 1rem 0; } /* Content area improvements */ .md-content { max-width: 55rem; /* Optimal reading width */ margin: 0 auto; padding: 1rem 2rem; } .md-content__inner { margin: 0 auto; padding: 0; } /* Table of contents */ .md-nav--secondary .md-nav__link { font-size: 0.85rem; padding: 0.4rem 0.8rem; } [data-md-color-scheme="slate"] .md-nav--secondary { border-left: 2px solid #323842; } /* Grid cards for homepage */ .grid.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.25rem; margin: 2rem 0; } .grid.cards > * { padding: 1.25rem; border: 1px solid var(--md-default-fg-color--lightest); border-radius: 0.5rem; transition: all 0.3s ease; background: var(--md-default-bg-color--light); } [data-md-color-scheme="slate"] .grid.cards > * { border-color: #3a4149; background: #272d35; } .grid.cards > *:hover { box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); transform: translateY(-3px); border-color: var(--md-accent-fg-color); } /* Custom admonitions with warmer colors */ [data-md-color-scheme="slate"] .md-typeset .admonition { background-color: #272d35; border-radius: 0.5rem; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); } .md-typeset .admonition.example, .md-typeset details.example { border-color: #66bb6a; } .md-typeset .example > .admonition-title, .md-typeset .example > summary { background-color: rgba(102, 187, 106, 0.15); border-color: #66bb6a; } /* Better table styling */ .md-typeset table:not([class]) { font-size: 0.95rem; border-radius: 0.5rem; overflow: hidden; } [data-md-color-scheme="slate"] .md-typeset table:not([class]) th { background-color: #323842; color: #e8eaed; font-weight: 600; } [data-md-color-scheme="slate"] .md-typeset table:not([class]) td { border-color: #3a4149; } /* Responsive images */ .md-typeset img { max-width: 100%; height: auto; border-radius: 0.5rem; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); margin: 1.5rem 0; } /* Custom badges */ .badge { display: inline-block; padding: 0.3em 0.6em; font-size: 0.8rem; font-weight: 600; line-height: 1; text-align: center; white-space: nowrap; vertical-align: baseline; border-radius: 0.25rem; } .badge-new { background-color: #66bb6a; color: white; } .badge-beta { background-color: #ffa726; color: #1e2329; } .badge-deprecated { background-color: #ef5350; color: white; } /* Search improvements */ [data-md-color-scheme="slate"] .md-search__form { background-color: #2a3038; border: 1px solid #3a4149; } [data-md-color-scheme="slate"] .md-search__input { color: #e8eaed; } .md-search-result__meta { color: var(--md-default-fg-color--light); font-size: 0.8rem; } /* Header improvements */ .md-header { box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } [data-md-color-scheme="slate"] .md-header { background-color: #1e2329; border-bottom: 1px solid #323842; } /* Footer styling */ [data-md-color-scheme="slate"] .md-footer { background-color: #1a1f25; border-top: 1px solid #323842; } .md-footer-meta__inner { display: flex; justify-content: space-between; align-items: center; padding: 1rem; } /* Announcement bar */ .md-banner { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 0.75rem; } .md-banner a { color: white; text-decoration: underline; font-weight: 500; } /* Smooth scrolling */ html { scroll-behavior: smooth; } /* Focus improvements for accessibility */ *:focus-visible { outline: 2px solid var(--md-accent-fg-color); outline-offset: 2px; border-radius: 0.25rem; } /* Animation for page transitions */ .md-content__inner { animation: fadeIn 0.3s ease-in; } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }