mirror of
https://github.com/semantica-agi/semantica.git
synced 2026-08-30 04:40:16 +00:00
KaifAhmad1
0d2862be72
- Add side scrollbars to both left and right sidebars - Implement gap-free layout with full-width content - Add Pydantic-style callout boxes (Note, Tip, Warning, Danger) - Enhance CSS with three-column layout similar to Pydantic - Add example callout boxes to key documentation pages - Maintain Semantica's green-brown color scheme
573 lines
14 KiB
CSS
573 lines
14 KiB
CSS
/* Semantica Documentation - Premium Green-Brown & Cream Theme */
|
|
|
|
/* Smooth scrolling */
|
|
html {
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
/* Cream background */
|
|
:root {
|
|
--md-default-bg-color: #FAF7F2;
|
|
--md-primary-fg-color: #4A4F2F;
|
|
--md-primary-fg-color--light: #8C9464;
|
|
--md-primary-fg-color--dark: #3A3E25;
|
|
--md-accent-fg-color: #8C9464;
|
|
}
|
|
|
|
[data-md-color-scheme="slate"] {
|
|
--md-default-bg-color: #1a1a1a;
|
|
}
|
|
|
|
/* Dark Green-Brown Header */
|
|
.md-header {
|
|
background-color: #4A4F2F !important;
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
|
|
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
[data-md-color-scheme="slate"] .md-header {
|
|
background-color: #4A4F2F !important;
|
|
}
|
|
|
|
.md-header {
|
|
height: 2.4rem !important;
|
|
}
|
|
|
|
.md-header__inner {
|
|
max-width: 100%;
|
|
padding: 0 1rem;
|
|
position: relative;
|
|
display: flex !important;
|
|
align-items: center !important;
|
|
justify-content: flex-start !important;
|
|
height: 2.4rem !important;
|
|
}
|
|
|
|
/* Hide hamburger menu button */
|
|
.md-header__button--menu {
|
|
display: none !important;
|
|
}
|
|
|
|
/* "Semantica" with brain emoji and version badge */
|
|
.md-header__title {
|
|
font-size: 1.25rem !important;
|
|
font-weight: 700 !important;
|
|
line-height: 1 !important;
|
|
margin: 0 !important;
|
|
padding: 0 !important;
|
|
margin-left: 0.5rem !important;
|
|
position: relative !important;
|
|
left: 0 !important;
|
|
transform: none !important;
|
|
display: flex !important;
|
|
align-items: center !important;
|
|
justify-content: flex-start !important;
|
|
height: 2.4rem !important;
|
|
color: #FFFFFF !important;
|
|
letter-spacing: 0.5px;
|
|
z-index: 10;
|
|
}
|
|
|
|
/* Add brain emoji before title - perfectly aligned */
|
|
.md-header__title::before {
|
|
content: "🧠";
|
|
font-size: 1.25rem !important;
|
|
margin-right: 0.5rem !important;
|
|
display: inline-flex !important;
|
|
align-items: center !important;
|
|
justify-content: center !important;
|
|
line-height: 1 !important;
|
|
height: 2.4rem !important;
|
|
vertical-align: middle !important;
|
|
}
|
|
|
|
.md-header__title .md-header__button {
|
|
color: #FFFFFF !important;
|
|
font-size: 1.25rem !important;
|
|
font-weight: 700 !important;
|
|
letter-spacing: 0.5px;
|
|
display: flex !important;
|
|
align-items: center !important;
|
|
height: 2.4rem !important;
|
|
line-height: 1 !important;
|
|
margin: 0 !important;
|
|
padding: 0 !important;
|
|
}
|
|
|
|
.md-header__title span {
|
|
font-size: 1.25rem !important;
|
|
font-weight: 700 !important;
|
|
letter-spacing: 0.5px;
|
|
color: #FFFFFF !important;
|
|
display: inline-flex !important;
|
|
align-items: center !important;
|
|
justify-content: center !important;
|
|
line-height: 1 !important;
|
|
height: 2.4rem !important;
|
|
vertical-align: middle !important;
|
|
position: relative !important;
|
|
}
|
|
|
|
/* Add version badge after "Semantica" text - perfectly aligned */
|
|
.md-header__title span::after {
|
|
content: "0.0.1";
|
|
font-size: 0.7rem !important;
|
|
font-weight: 500 !important;
|
|
background-color: rgba(255, 255, 255, 0.2) !important;
|
|
color: #FFFFFF !important;
|
|
padding: 0.15rem 0.4rem !important;
|
|
border-radius: 0.75rem !important;
|
|
margin-left: 0.5rem !important;
|
|
display: inline-flex !important;
|
|
align-items: center !important;
|
|
justify-content: center !important;
|
|
line-height: 1 !important;
|
|
vertical-align: middle !important;
|
|
white-space: nowrap !important;
|
|
align-self: center !important;
|
|
}
|
|
|
|
/* Hide logo */
|
|
.md-header__button.md-logo {
|
|
display: none !important;
|
|
}
|
|
|
|
/* Table of Contents - Three Column Layout with Sidebars */
|
|
@media screen and (min-width: 76.25em) {
|
|
/* Left Navigation Sidebar */
|
|
.md-sidebar--primary {
|
|
width: 16rem !important;
|
|
position: fixed !important;
|
|
left: 0 !important;
|
|
top: 2.4rem !important;
|
|
height: calc(100vh - 2.4rem) !important;
|
|
overflow-y: auto !important;
|
|
overflow-x: hidden !important;
|
|
border-right: 1px solid rgba(0, 0, 0, 0.1) !important;
|
|
background-color: var(--md-default-bg-color) !important;
|
|
}
|
|
|
|
[data-md-color-scheme="slate"] .md-sidebar--primary {
|
|
border-right: 1px solid rgba(255, 255, 255, 0.12) !important;
|
|
}
|
|
|
|
/* Right TOC Sidebar */
|
|
.md-sidebar--secondary {
|
|
position: fixed !important;
|
|
right: 0 !important;
|
|
top: 2.4rem !important;
|
|
width: 16rem !important;
|
|
height: calc(100vh - 2.4rem) !important;
|
|
overflow-y: auto !important;
|
|
overflow-x: hidden !important;
|
|
border-left: 1px solid rgba(0, 0, 0, 0.1) !important;
|
|
background-color: var(--md-default-bg-color) !important;
|
|
}
|
|
|
|
[data-md-color-scheme="slate"] .md-sidebar--secondary {
|
|
border-left: 1px solid rgba(255, 255, 255, 0.12) !important;
|
|
}
|
|
|
|
/* Content Area - Fill space between sidebars with no gaps */
|
|
.md-content {
|
|
margin-left: 16rem !important;
|
|
margin-right: 16rem !important;
|
|
max-width: none !important;
|
|
padding-left: 0 !important;
|
|
padding-right: 0 !important;
|
|
}
|
|
|
|
/* Ensure sidebars scroll properly */
|
|
.md-sidebar__scrollwrap {
|
|
overflow-y: auto !important;
|
|
overflow-x: hidden !important;
|
|
height: 100% !important;
|
|
}
|
|
}
|
|
|
|
/* Custom Scrollbar Styling for Sidebars */
|
|
.md-sidebar--primary::-webkit-scrollbar,
|
|
.md-sidebar--secondary::-webkit-scrollbar {
|
|
width: 8px;
|
|
}
|
|
|
|
.md-sidebar--primary::-webkit-scrollbar-track,
|
|
.md-sidebar--secondary::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
|
|
.md-sidebar--primary::-webkit-scrollbar-thumb,
|
|
.md-sidebar--secondary::-webkit-scrollbar-thumb {
|
|
background: rgba(0, 0, 0, 0.2);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.md-sidebar--primary::-webkit-scrollbar-thumb:hover,
|
|
.md-sidebar--secondary::-webkit-scrollbar-thumb:hover {
|
|
background: rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
[data-md-color-scheme="slate"] .md-sidebar--primary::-webkit-scrollbar-thumb,
|
|
[data-md-color-scheme="slate"] .md-sidebar--secondary::-webkit-scrollbar-thumb {
|
|
background: rgba(255, 255, 255, 0.2);
|
|
}
|
|
|
|
[data-md-color-scheme="slate"] .md-sidebar--primary::-webkit-scrollbar-thumb:hover,
|
|
[data-md-color-scheme="slate"] .md-sidebar--secondary::-webkit-scrollbar-thumb:hover {
|
|
background: rgba(255, 255, 255, 0.3);
|
|
}
|
|
|
|
/* Ensure content uses full available width - Gap-free layout */
|
|
.md-grid {
|
|
max-width: 100% !important;
|
|
}
|
|
|
|
.md-content__inner {
|
|
max-width: 100% !important;
|
|
padding-left: 2rem !important;
|
|
padding-right: 2rem !important;
|
|
margin: 0 !important;
|
|
}
|
|
|
|
.md-main__inner {
|
|
max-width: 100% !important;
|
|
margin: 0 !important;
|
|
}
|
|
|
|
.md-container {
|
|
padding: 0 !important;
|
|
margin: 0 !important;
|
|
}
|
|
|
|
/* Remove gaps between sidebars and content */
|
|
@media screen and (min-width: 76.25em) {
|
|
.md-main {
|
|
margin: 0 !important;
|
|
padding: 0 !important;
|
|
}
|
|
|
|
.md-content {
|
|
padding-left: 0 !important;
|
|
padding-right: 0 !important;
|
|
margin-top: 0 !important;
|
|
}
|
|
|
|
/* Ensure sidebars are flush with content */
|
|
.md-sidebar--primary {
|
|
margin-right: 0 !important;
|
|
}
|
|
|
|
.md-sidebar--secondary {
|
|
margin-left: 0 !important;
|
|
}
|
|
}
|
|
|
|
/* Reduce spacing for compact look */
|
|
.md-content {
|
|
padding-top: 0.8rem !important;
|
|
padding-bottom: 1.2rem !important;
|
|
}
|
|
|
|
/* Tighter headings */
|
|
.md-typeset h1 {
|
|
margin-top: 1.5rem !important;
|
|
margin-bottom: 0.6rem !important;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.md-typeset h2 {
|
|
margin-top: 1.0rem !important;
|
|
margin-bottom: 0.4rem !important;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.md-typeset h3 {
|
|
margin-top: 1.0rem !important;
|
|
margin-bottom: 0.4rem !important;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.md-typeset h4 {
|
|
margin-top: 0.8rem !important;
|
|
margin-bottom: 0.3rem !important;
|
|
}
|
|
|
|
.md-typeset p {
|
|
margin-top: 0.8em;
|
|
margin-bottom: 0.8em;
|
|
line-height: 1.7;
|
|
}
|
|
|
|
.md-typeset ul,
|
|
.md-typeset ol {
|
|
margin-top: 0.8em;
|
|
margin-bottom: 0.8em;
|
|
}
|
|
|
|
.md-typeset li {
|
|
margin-top: 0.4em;
|
|
margin-bottom: 0.4em;
|
|
line-height: 1.7;
|
|
}
|
|
|
|
/* Sidebar spacing */
|
|
.md-nav__link {
|
|
padding: 0.20rem 0.60rem !important;
|
|
}
|
|
|
|
/* Clean TOC styling */
|
|
.md-nav__link--active {
|
|
color: var(--md-primary-fg-color);
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* Better code blocks */
|
|
.md-typeset pre {
|
|
border-radius: 6px;
|
|
background-color: #f8f6f0;
|
|
}
|
|
|
|
[data-md-color-scheme="slate"] .md-typeset pre {
|
|
background-color: #1e1e1e !important;
|
|
color: #e0e0e0 !important;
|
|
}
|
|
|
|
[data-md-color-scheme="slate"] .md-typeset pre code {
|
|
background-color: #1e1e1e !important;
|
|
color: #e0e0e0 !important;
|
|
}
|
|
|
|
[data-md-color-scheme="slate"] .md-typeset code:not(pre code) {
|
|
background-color: #2d2d2d !important;
|
|
color: #e0e0e0 !important;
|
|
padding: 0.2em 0.4em;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
[data-md-color-scheme="slate"] .md-typeset a {
|
|
color: #8C9464 !important;
|
|
}
|
|
|
|
[data-md-color-scheme="slate"] .md-typeset a:hover {
|
|
color: #a8b080 !important;
|
|
}
|
|
|
|
[data-md-color-scheme="slate"] .md-typeset {
|
|
color: rgba(255, 255, 255, 0.87) !important;
|
|
}
|
|
|
|
[data-md-color-scheme="slate"] .md-typeset p {
|
|
color: rgba(255, 255, 255, 0.87) !important;
|
|
}
|
|
|
|
[data-md-color-scheme="slate"] .md-typeset li {
|
|
color: rgba(255, 255, 255, 0.87) !important;
|
|
}
|
|
|
|
[data-md-color-scheme="slate"] .md-typeset table:not([class]) {
|
|
border-color: rgba(255, 255, 255, 0.12) !important;
|
|
}
|
|
|
|
[data-md-color-scheme="slate"] .md-typeset table:not([class]) th {
|
|
background-color: rgba(255, 255, 255, 0.05) !important;
|
|
color: rgba(255, 255, 255, 0.87) !important;
|
|
}
|
|
|
|
[data-md-color-scheme="slate"] .md-typeset table:not([class]) td {
|
|
color: rgba(255, 255, 255, 0.87) !important;
|
|
}
|
|
|
|
/* Accent color for links */
|
|
.md-typeset a {
|
|
color: #4A4F2F;
|
|
}
|
|
|
|
.md-typeset a:hover {
|
|
color: #8C9464;
|
|
}
|
|
|
|
/* Theme toggle button - visible and accessible in header */
|
|
.md-header__button[for^="__palette"] {
|
|
margin: 0 !important;
|
|
margin-left: auto !important;
|
|
margin-right: 0.5rem !important;
|
|
padding: 0.5rem !important;
|
|
display: flex !important;
|
|
align-items: center !important;
|
|
justify-content: center !important;
|
|
height: 2.4rem !important;
|
|
width: 2.4rem !important;
|
|
color: #FFFFFF !important;
|
|
opacity: 1 !important;
|
|
visibility: visible !important;
|
|
cursor: pointer !important;
|
|
transition: opacity 0.2s ease !important;
|
|
}
|
|
|
|
.md-header__button[for^="__palette"]:hover {
|
|
opacity: 0.8 !important;
|
|
background-color: rgba(255, 255, 255, 0.1) !important;
|
|
border-radius: 0.25rem !important;
|
|
}
|
|
|
|
/* Ensure toggle button icon is visible */
|
|
.md-header__button[for^="__palette"] svg {
|
|
width: 1.25rem !important;
|
|
height: 1.25rem !important;
|
|
fill: currentColor !important;
|
|
color: #FFFFFF !important;
|
|
}
|
|
|
|
/* Ensure only one palette toggle button is visible */
|
|
.md-header input[type="radio"][name="__palette"]:not(:checked) + label {
|
|
display: none !important;
|
|
}
|
|
|
|
/* Material theme automatically shows only one toggle - ensure proper spacing */
|
|
.md-header__inner {
|
|
padding-bottom: 0.5rem !important;
|
|
gap: 0.5rem !important;
|
|
}
|
|
|
|
/* ============================================
|
|
Pydantic-Style Callout Boxes (Admonitions)
|
|
============================================ */
|
|
|
|
/* Base Admonition Styling */
|
|
.md-typeset .admonition {
|
|
border-radius: 6px;
|
|
border-left-width: 4px;
|
|
margin: 1.5em 0;
|
|
padding: 1em 1.5em;
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
[data-md-color-scheme="slate"] .md-typeset .admonition {
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
/* Note - Blue */
|
|
.md-typeset .admonition.note,
|
|
.md-typeset .admonition-title--note {
|
|
border-color: #2196F3;
|
|
background-color: rgba(33, 150, 243, 0.1);
|
|
}
|
|
|
|
[data-md-color-scheme="slate"] .md-typeset .admonition.note {
|
|
background-color: rgba(33, 150, 243, 0.15);
|
|
border-color: #42A5F5;
|
|
}
|
|
|
|
.md-typeset .admonition.note .admonition-title {
|
|
background-color: rgba(33, 150, 243, 0.2);
|
|
border-color: #2196F3;
|
|
color: #1976D2;
|
|
font-weight: 600;
|
|
}
|
|
|
|
[data-md-color-scheme="slate"] .md-typeset .admonition.note .admonition-title {
|
|
background-color: rgba(33, 150, 243, 0.25);
|
|
color: #64B5F6;
|
|
}
|
|
|
|
/* Tip - Green */
|
|
.md-typeset .admonition.tip,
|
|
.md-typeset .admonition-title--tip {
|
|
border-color: #4CAF50;
|
|
background-color: rgba(76, 175, 80, 0.1);
|
|
}
|
|
|
|
[data-md-color-scheme="slate"] .md-typeset .admonition.tip {
|
|
background-color: rgba(76, 175, 80, 0.15);
|
|
border-color: #66BB6A;
|
|
}
|
|
|
|
.md-typeset .admonition.tip .admonition-title {
|
|
background-color: rgba(76, 175, 80, 0.2);
|
|
border-color: #4CAF50;
|
|
color: #388E3C;
|
|
font-weight: 600;
|
|
}
|
|
|
|
[data-md-color-scheme="slate"] .md-typeset .admonition.tip .admonition-title {
|
|
background-color: rgba(76, 175, 80, 0.25);
|
|
color: #81C784;
|
|
}
|
|
|
|
/* Warning - Orange/Yellow */
|
|
.md-typeset .admonition.warning,
|
|
.md-typeset .admonition-title--warning {
|
|
border-color: #FF9800;
|
|
background-color: rgba(255, 152, 0, 0.1);
|
|
}
|
|
|
|
[data-md-color-scheme="slate"] .md-typeset .admonition.warning {
|
|
background-color: rgba(255, 152, 0, 0.15);
|
|
border-color: #FFB74D;
|
|
}
|
|
|
|
.md-typeset .admonition.warning .admonition-title {
|
|
background-color: rgba(255, 152, 0, 0.2);
|
|
border-color: #FF9800;
|
|
color: #F57C00;
|
|
font-weight: 600;
|
|
}
|
|
|
|
[data-md-color-scheme="slate"] .md-typeset .admonition.warning .admonition-title {
|
|
background-color: rgba(255, 152, 0, 0.25);
|
|
color: #FFB74D;
|
|
}
|
|
|
|
/* Danger - Red */
|
|
.md-typeset .admonition.danger,
|
|
.md-typeset .admonition-title--danger {
|
|
border-color: #F44336;
|
|
background-color: rgba(244, 67, 54, 0.1);
|
|
}
|
|
|
|
[data-md-color-scheme="slate"] .md-typeset .admonition.danger {
|
|
background-color: rgba(244, 67, 54, 0.15);
|
|
border-color: #E57373;
|
|
}
|
|
|
|
.md-typeset .admonition.danger .admonition-title {
|
|
background-color: rgba(244, 67, 54, 0.2);
|
|
border-color: #F44336;
|
|
color: #D32F2F;
|
|
font-weight: 600;
|
|
}
|
|
|
|
[data-md-color-scheme="slate"] .md-typeset .admonition.danger .admonition-title {
|
|
background-color: rgba(244, 67, 54, 0.25);
|
|
color: #EF5350;
|
|
}
|
|
|
|
/* Admonition Content Styling */
|
|
.md-typeset .admonition p {
|
|
margin-top: 0.5em;
|
|
margin-bottom: 0.5em;
|
|
}
|
|
|
|
.md-typeset .admonition p:first-child {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.md-typeset .admonition p:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
/* Admonition Icons */
|
|
.md-typeset .admonition-title::before {
|
|
margin-right: 0.5em;
|
|
}
|
|
|
|
/* Info - Alternative blue (if used) */
|
|
.md-typeset .admonition.info {
|
|
border-color: #00BCD4;
|
|
background-color: rgba(0, 188, 212, 0.1);
|
|
}
|
|
|
|
[data-md-color-scheme="slate"] .md-typeset .admonition.info {
|
|
background-color: rgba(0, 188, 212, 0.15);
|
|
border-color: #4DD0E1;
|
|
} |