mirror of
https://github.com/semantica-agi/semantica.git
synced 2026-08-30 04:40:16 +00:00
338 lines
7.6 KiB
CSS
338 lines
7.6 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 - Move to Left Side */
|
|
@media screen and (min-width: 76.25em) {
|
|
.md-sidebar--primary {
|
|
width: 8rem !important;
|
|
}
|
|
|
|
.md-sidebar--secondary {
|
|
left: 0 !important;
|
|
right: auto !important;
|
|
width: 8rem !important;
|
|
border-right: 1px solid var(--md-default-fg-color--lightest);
|
|
}
|
|
|
|
.md-content {
|
|
margin-left: 8rem !important;
|
|
margin-right: 8rem !important;
|
|
}
|
|
}
|
|
|
|
/* Ensure content uses full available width */
|
|
.md-grid {
|
|
max-width: 100% !important;
|
|
}
|
|
|
|
.md-content__inner {
|
|
max-width: 100% !important;
|
|
padding-left: 1rem;
|
|
padding-right: 1rem;
|
|
}
|
|
|
|
.md-main__inner {
|
|
max-width: 100% !important;
|
|
}
|
|
|
|
.md-container {
|
|
padding: 0;
|
|
}
|
|
|
|
/* 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;
|
|
} |