feat: update CSS for local sites

Author: Charliechen114514

document/stylesheets/extra.css

@@ -1,53 +1,164 @@
 /* ==========================================================================
-   CFDesktop Docs - Custom Stylesheet
+   Tutorial_AwesomeModernCPP - Custom Stylesheet
    Improve Chinese typography, code readability, and visual hierarchy
    ========================================================================== */
 
+/* ---------- Global ---------- */
+
+/* Smooth scrolling for the entire page */
+html {
+  scroll-behavior: smooth;
+}
+
+/* Custom text selection color */
+::selection {
+  background: rgba(81, 107, 232, 0.25);
+  color: inherit;
+}
+
+[data-md-color-scheme="slate"] ::selection {
+  background: rgba(99, 126, 255, 0.3);
+}
+
 /* ---------- Chinese Typography ---------- */
 
-/* Base body text: generous line-height for Chinese character readability.
-   Chinese characters are more visually dense than Latin; 1.85 prevents
-   the "wall of text" feeling. */
 .md-typeset {
   line-height: 1.85;
   font-size: 0.82rem;
 }
 
-/* Headings: slightly tighter line-height than body */
-.md-typeset h1 { line-height: 1.4; }
-.md-typeset h2 { line-height: 1.45; }
-.md-typeset h3 { line-height: 1.5; }
-.md-typeset h4 { line-height: 1.55; }
+.md-typeset h1 {
+  line-height: 1.4;
+}
+
+.md-typeset h2 {
+  line-height: 1.45;
+}
+
+.md-typeset h3 {
+  line-height: 1.5;
+}
+
+.md-typeset h4 {
+  line-height: 1.55;
+}
 
-/* Paragraph spacing: add vertical breathing room */
 .md-typeset p {
   margin-bottom: 1.2em;
 }
 
+/* ---------- Header Gradient ---------- */
+
+/* Subtle indigo-to-blue gradient for a modern look */
+.md-header {
+  background: linear-gradient(135deg, #3f51b5 0%, #5c6bc0 50%, #42a5f5 100%);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
+}
+
+[data-md-color-scheme="slate"] .md-header {
+  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
+}
+
+/* Header tabs bar matches gradient */
+.md-tabs {
+  background: linear-gradient(135deg, #3949ab 0%, #5c6bc0 50%, #42a5f5 100%);
+}
+
+[data-md-color-scheme="slate"] .md-tabs {
+  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
+}
+
+/* ---------- Sidebar ---------- */
+
+/* Sidebar items: more spacing and smooth hover transitions */
+.md-nav__item {
+  padding: 0.15em 0;
+}
+
+.md-nav__link {
+  transition: all 0.2s ease;
+  border-radius: 4px;
+  margin: 1px 4px;
+  padding: 4px 8px !important;
+}
+
+.md-nav__link:hover {
+  background-color: rgba(81, 107, 232, 0.08);
+}
+
+[data-md-color-scheme="slate"] .md-nav__link:hover {
+  background-color: rgba(99, 126, 255, 0.12);
+}
+
+/* Active sidebar item highlight */
+.md-nav__link--active {
+  font-weight: 600;
+}
+
+.md-nav__section-title {
+  font-size: 0.72rem;
+  letter-spacing: 0.03em;
+}
+
+/* ---------- Content Width ---------- */
+
+.md-grid {
+  max-width: 80rem;
+}
+
 /* ---------- Code Blocks ---------- */
 
-/* Code blocks: prevent excessive height for long C++ headers */
-.md-typeset pre > code {
+/* Rounded corners for code blocks */
+.md-typeset pre>code {
   max-height: 32rem;
   font-size: 0.75rem;
   line-height: 1.6;
+  border-radius: 8px;
 }
 
-/* Inline code: match CJK character width */
+/* Code block container with subtle shadow */
+.md-typeset pre {
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+  margin: 1em 0;
+}
+
+[data-md-color-scheme="slate"] .md-typeset pre {
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+}
+
+/* Inline code with better visual treatment */
 .md-typeset code {
   font-size: 0.78em;
   padding: 0.15em 0.35em;
-  border-radius: 3px;
+  border-radius: 4px;
+  transition: background-color 0.2s ease;
+}
+
+/* Code copy button styling */
+.md-clipboard {
+  transition: all 0.2s ease;
+  border-radius: 4px;
+}
+
+.md-clipboard:hover {
+  color: var(--md-accent-fg-color);
 }
 
 /* ---------- Tables ---------- */
 
-/* Tables: more padding for CJK cell content, subtle alternating rows */
 .md-typeset table:not([class]) {
   font-size: 0.78rem;
   line-height: 1.6;
   display: table;
   width: 100%;
+  border-radius: 8px;
+  overflow: hidden;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
+}
+
+[data-md-color-scheme="slate"] .md-typeset table:not([class]) {
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
 }
 
 .md-typeset table:not([class]) th {
@@ -59,7 +170,6 @@
   padding: 0.65em 1em;
 }
 
-/* Alternating row colors */
 .md-typeset table:not([class]) tr:nth-child(even) {
   background-color: rgba(0, 0, 0, 0.02);
 }
@@ -70,48 +180,40 @@
 
 /* ---------- Admonitions ---------- */
 
-/* Admonitions: larger text and more padding */
+/* Admonitions with rounded corners and subtle shadow */
 .md-typeset .admonition,
 .md-typeset details {
   font-size: 0.8rem;
   line-height: 1.75;
   padding: 0.8em 1.2em;
-  border-radius: 6px;
-}
-
-.md-typeset .admonition-title,
-.md-typeset summary {
-  font-weight: 600;
-  font-size: 0.85rem;
+  border-radius: 8px;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
+  transition: box-shadow 0.2s ease;
 }
 
-/* ---------- Sidebar ---------- */
-
-/* Sidebar items: more spacing for better clickability */
-.md-nav__item {
-  padding: 0.15em 0;
+.md-typeset .admonition:hover,
+.md-typeset details:hover {
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
 }
 
-/* Section labels in sidebar: more visually distinct */
-.md-nav__section-title {
-  font-size: 0.72rem;
-  letter-spacing: 0.03em;
+[data-md-color-scheme="slate"] .md-typeset .admonition,
+[data-md-color-scheme="slate"] .md-typeset details {
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
 }
 
-/* ---------- Content Width ---------- */
-
-/* Widen the content area for tables and code blocks */
-.md-grid {
-  max-width: 80rem;
+.md-typeset .admonition-title,
+.md-typeset summary {
+  font-weight: 600;
+  font-size: 0.85rem;
 }
 
 /* ---------- Links ---------- */
 
-/* Links: visually distinct from body text */
 .md-typeset a {
   text-decoration: underline;
   text-decoration-style: dotted;
   text-underline-offset: 3px;
+  transition: color 0.2s ease, text-decoration-style 0.2s ease;
 }
 
 .md-typeset a:hover {
@@ -121,11 +223,87 @@
 /* ---------- Blockquotes ---------- */
 
 .md-typeset blockquote {
-  border-left: 3px solid var(--md-primary-fg-color);
-  padding-left: 1em;
+  border-left: 4px solid var(--md-primary-fg-color);
+  padding: 0.5em 1em;
   margin-left: 0;
   font-style: normal;
   opacity: 0.9;
+  border-radius: 0 4px 4px 0;
+  background: rgba(81, 107, 232, 0.04);
+}
+
+[data-md-color-scheme="slate"] .md-typeset blockquote {
+  background: rgba(99, 126, 255, 0.06);
+}
+
+/* ---------- Back-to-top Button ---------- */
+
+.md-top {
+  border-radius: 50% !important;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.md-top:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+}
+
+/* ---------- Search Overlay ---------- */
+
+.md-search__overlay {
+  transition: opacity 0.2s ease;
+}
+
+.md-search__form {
+  border-radius: 8px;
+  transition: box-shadow 0.2s ease;
+}
+
+.md-search__form:focus-within {
+  box-shadow: 0 0 0 2px var(--md-accent-fg-color);
+}
+
+/* ---------- Custom Scrollbar ---------- */
+
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background: rgba(0, 0, 0, 0.15);
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: rgba(0, 0, 0, 0.25);
+}
+
+[data-md-color-scheme="slate"] ::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.15);
+}
+
+[data-md-color-scheme="slate"] ::-webkit-scrollbar-thumb:hover {
+  background: rgba(255, 255, 255, 0.25);
+}
+
+/* ---------- Footer ---------- */
+
+.md-footer {
+  border-top: 1px solid rgba(0, 0, 0, 0.05);
+}
+
+[data-md-color-scheme="slate"] .md-footer {
+  border-top: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+.md-footer__link {
+  transition: background-color 0.2s ease;
 }
 
 /* ---------- Dark Mode Adjustments ---------- */
@@ -134,16 +312,51 @@
   background-color: rgba(255, 255, 255, 0.07);
 }
 
+/* Dark mode: slightly brighter code block background for contrast */
+[data-md-color-scheme="slate"] .md-typeset pre>code {
+  background-color: rgba(0, 0, 0, 0.3);
+}
+
+/* ---------- Tabbed Content ---------- */
+
+/* Smooth tab transitions */
+.md-typeset .tabbed-labels {
+  box-shadow: 0 1px 0 var(--md-primary-fg-color--light);
+}
+
+.md-typeset .tabbed-labels>label {
+  transition: color 0.2s ease;
+}
+
+/* ---------- Images ---------- */
+
+/* Rounded corners and subtle shadow for images */
+.md-typeset img:not([class]) {
+  border-radius: 6px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+  transition: box-shadow 0.2s ease;
+}
+
+.md-typeset img:not([class]):hover {
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
+}
+
+[data-md-color-scheme="slate"] .md-typeset img:not([class]) {
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
+}
+
 /* ---------- Print Styles ---------- */
 
 @media print {
   .md-typeset {
     font-size: 11pt;
     line-height: 1.7;
   }
+
   .md-sidebar,
   .md-header,
-  .md-footer {
+  .md-footer,
+  .md-top {
     display: none !important;
   }
-}
+}