* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
font-size: 16px;
line-height: 1.6;
color: #333;
}
.font-family-0 { font-family: Georgia, serif; }
.font-family-1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
.book {
display: flex;
min-height: 100vh;
}
.book-summary {
width: 300px;
min-width: 300px;
background: #fafafa;
border-right: 1px solid #e8e8e8;
overflow-y: auto;
position: fixed;
top: 0;
left: 0;
bottom: 0;
z-index: 100;
}
.book-summary nav {
padding: 20px 0;
}
.search-wrapper {
padding: 15px;
border-bottom: 1px solid #e8e8e8;
position: relative;
}
.search-input {
width: 100%;
padding: 8px 12px;
border: 1px solid #e8e8e8;
border-radius: 4px;
font-size: 14px;
outline: none;
transition: border-color 0.2s;
}
.search-input:focus {
border-color: #008cff;
}
.search-input::placeholder {
color: #999;
}
.search-results {
position: absolute;
top: 100%;
left: 15px;
right: 15px;
background: #fff;
border: 1px solid #e8e8e8;
border-radius: 4px;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
max-height: 400px;
overflow-y: auto;
z-index: 200;
display: none;
}
.search-results.visible {
display: block;
}
.search-result-item {
display: block;
padding: 10px 12px;
border-bottom: 1px solid #f0f0f0;
text-decoration: none;
color: #333;
transition: background 0.2s;
}
.search-result-item:last-child {
border-bottom: none;
}
.search-result-item:hover {
background: #f5f5f5;
}
.search-result-title {
font-weight: 600;
font-size: 14px;
margin-bottom: 4px;
}
.search-result-snippet {
font-size: 12px;
color: #666;
line-height: 1.4;
}
.search-result-item mark {
background: #fff3cd;
padding: 0 2px;
border-radius: 2px;
}
.search-no-results {
padding: 20px;
text-align: center;
color: #666;
font-size: 14px;
}
.book-summary .summary {
list-style: none;
margin: 0;
padding: 0;
}
.book-summary .summary li {
list-style: none;
}
.book-summary .summary li.chapter {
margin: 0;
}
.book-summary .summary li.chapter a,
.book-summary .summary li.chapter .chapter-title {
display: block;
padding: 8px 15px 8px 20px;
color: #364149;
text-decoration: none;
font-size: 14px;
border-left: 3px solid transparent;
}
.book-summary .summary li.chapter a:hover {
background: #f0f0f0;
color: #008cff;
}
.book-summary .summary li.chapter.active > a {
background: #e8e8e8;
border-left-color: #008cff;
color: #008cff;
font-weight: 600;
}
.book-summary .summary li.chapter .chapter-title {
color: #364149;
cursor: pointer;
}
.book-summary .summary .articles {
list-style: none;
margin: 0;
padding: 0;
}
.book-summary .summary .articles li.chapter a,
.book-summary .summary .articles li.chapter .chapter-title {
padding-left: 35px;
}
.book-summary .summary .articles .articles li.chapter a,
.book-summary .summary .articles .articles li.chapter .chapter-title {
padding-left: 50px;
}
.book-summary .summary .articles .articles .articles li.chapter a,
.book-summary .summary .articles .articles .articles li.chapter .chapter-title {
padding-left: 65px;
}
.book-summary .summary .articles .articles .articles .articles li.chapter a,
.book-summary .summary .articles .articles .articles .articles li.chapter .chapter-title {
padding-left: 80px;
}
.book-summary .summary .articles .articles .articles .articles .articles li.chapter a,
.book-summary .summary .articles .articles .articles .articles .articles li.chapter .chapter-title {
padding-left: 95px;
}
.book-summary .summary li.part-title {
margin-top: 20px;
padding: 5px 15px;
}
.book-summary .summary li.part-title span {
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
color: #939da3;
}
.book-summary .summary li.divider {
height: 1px;
margin: 10px 15px;
background: #e8e8e8;
}
.book-body {
margin-left: 300px;
flex: 1;
min-width: 0;
}
.body-inner {
min-height: 100vh;
position: relative;
}
.page-nav {
position: fixed;
top: 50%;
transform: translateY(-50%);
width: 40px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.05);
color: #666;
text-decoration: none;
border-radius: 4px;
transition: background 0.2s, color 0.2s;
z-index: 50;
}
.page-nav:hover {
background: rgba(0, 0, 0, 0.1);
color: #333;
}
.page-nav.prev {
left: 310px;
}
.page-nav.next {
right: 10px;
}
.page-nav svg {
width: 24px;
height: 24px;
}
@media (max-width: 768px) {
.page-nav {
width: 36px;
height: 50px;
top: auto;
bottom: 20px;
transform: none;
}
.page-nav.prev {
left: 10px;
}
.page-nav.next {
right: 10px;
}
}
body.loading .page-nav {
pointer-events: none;
opacity: 0.5;
}
body.loading .markdown-section {
opacity: 0.6;
transition: opacity 0.15s;
}
.page-wrapper {
max-width: 100%;
}
.page-inner {
max-width: none;
margin: 0;
padding: 40px 60px;
}
.markdown-section {
font-size: 16px;
line-height: 1.7;
}
.markdown-section h1 {
font-size: 2em;
margin: 0 0 1em;
padding-bottom: 0.3em;
border-bottom: 1px solid #eee;
}
.markdown-section h2 {
font-size: 1.5em;
margin: 1.5em 0 0.5em;
padding-bottom: 0.3em;
border-bottom: 1px solid #eee;
}
.markdown-section h3 {
font-size: 1.25em;
margin: 1.5em 0 0.5em;
}
.markdown-section h4, .markdown-section h5, .markdown-section h6 {
font-size: 1em;
margin: 1.5em 0 0.5em;
}
.markdown-section p {
margin: 0 0 1em;
}
.markdown-section a {
color: #4183c4;
text-decoration: none;
}
.markdown-section a:hover {
text-decoration: underline;
}
.markdown-section code {
font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
font-size: 0.9em;
background: #f6f8fa;
padding: 0.2em 0.4em;
border-radius: 3px;
}
.markdown-section pre {
background: #f6f8fa;
border-radius: 6px;
padding: 16px;
overflow-x: auto;
margin: 0 0 1em;
}
.markdown-section pre code {
background: none;
padding: 0;
font-size: 0.85em;
line-height: 1.5;
}
.markdown-section table {
border-collapse: collapse;
width: 100%;
margin: 0 0 1em;
display: block;
overflow-x: auto;
}
.markdown-section table th,
.markdown-section table td {
border: 1px solid #dfe2e5;
padding: 8px 12px;
}
.markdown-section table td {
text-align: left;
}
.markdown-section table th {
background: #f6f8fa;
font-weight: 600;
}
.markdown-section table tr:nth-child(even) {
background: #f8f8f8;
}
.markdown-section img {
max-width: 100%;
height: auto;
}
.markdown-section ul,
.markdown-section ol {
margin: 0 0 1em;
padding-left: 2em;
}
.markdown-section li {
margin: 0.25em 0;
}
.markdown-section blockquote {
margin: 0 0 1em;
padding: 0 1em;
color: #6a737d;
border-left: 4px solid #dfe2e5;
}
.mermaid {
text-align: center;
margin: 1em 0;
}
.wsd {
text-align: center;
margin: 1em 0;
overflow-x: auto;
}
.wsd svg {
max-width: 100%;
height: auto;
}
.back-to-top {
position: fixed;
bottom: 30px;
right: 30px;
width: 40px;
height: 40px;
background: #008cff;
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s, visibility 0.3s;
box-shadow: 0 2px 10px rgba(0,0,0,0.2);
z-index: 1000;
}
.back-to-top.visible {
opacity: 1;
visibility: visible;
}
.back-to-top:hover {
background: #0070cc;
}
.expandable > a::before,
.expandable > .chapter-title::before {
content: "â–¸";
display: inline-block;
margin-right: 5px;
}
.expandable.expanded > a::before,
.expandable.expanded > .chapter-title::before {
transform: rotate(90deg);
}
.expandable:not(.expanded) > .articles {
display: none;
}
.book-summary * {
transition: none !important;
}
.sidebar-toggle {
position: fixed;
top: 10px;
left: 310px;
width: 36px;
height: 36px;
background: #fff;
border: 1px solid #e8e8e8;
border-radius: 4px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
z-index: 101;
transition: left 0.3s, transform 0.3s;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.sidebar-toggle:hover {
background: #f5f5f5;
}
.sidebar-toggle svg {
color: #666;
}
.book.sidebar-hidden .book-summary {
transform: translateX(-100%);
}
.book.sidebar-hidden .book-body {
margin-left: 0;
}
.book.sidebar-hidden .sidebar-toggle {
left: 10px;
}
.book.sidebar-toggling .book-summary {
transition: transform 0.3s ease;
}
.book.sidebar-toggling .book-body {
transition: margin-left 0.3s ease;
}
@media (max-width: 1024px) {
.book-summary {
width: 250px;
min-width: 250px;
}
.book-body {
margin-left: 250px;
}
.sidebar-toggle {
left: 260px;
}
.book.sidebar-hidden .sidebar-toggle {
left: 10px;
}
}
@media (max-width: 768px) {
.book-summary {
transform: translateX(-100%);
transition: transform 0.3s;
width: 280px;
min-width: 280px;
padding-top: 50px;
}
.book-summary.open {
transform: translateX(0);
}
.book-body {
margin-left: 0;
}
.page-inner {
padding: 20px;
padding-top: 60px;
}
.sidebar-toggle {
left: 10px !important;
top: 10px;
z-index: 200;
}
.book-summary.open::after {
content: "";
position: fixed;
top: 0;
left: 280px;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.3);
z-index: 99;
}
}
.page-toc {
position: fixed;
right: 20px;
width: 220px;
max-height: calc(100vh - 120px);
overflow-y: auto;
background: #fff;
border-left: 1px solid #e8e8e8;
padding: 15px;
z-index: 50;
transition: transform 0.3s ease, opacity 0.3s ease;
}
.page-toc .toc-header {
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
color: #939da3;
margin-bottom: 10px;
padding-bottom: 8px;
border-bottom: 1px solid #e8e8e8;
}
.page-toc .toc-list {
list-style: none;
margin: 0;
padding: 0;
}
.page-toc .toc-list li {
margin: 0;
line-height: 1.4;
}
.page-toc .toc-list li a {
display: block;
padding: 4px 0;
color: #666;
text-decoration: none;
font-size: 13px;
transition: color 0.2s;
}
.page-toc .toc-list li a:hover {
color: #008cff;
}
.page-toc .toc-list li.active a {
color: #008cff;
font-weight: 600;
}
.page-toc .toc-h2 {
padding-left: 0;
}
.page-toc .toc-h3 {
padding-left: 12px;
}
.page-toc .toc-h4 {
padding-left: 24px;
}
.toc-toggle {
position: fixed;
top: 10px;
right: 250px;
width: 36px;
height: 36px;
background: #fff;
border: 1px solid #e8e8e8;
border-radius: 4px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
z-index: 101;
transition: right 0.3s ease;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.toc-toggle:hover {
background: #f5f5f5;
}
.toc-toggle svg {
color: #666;
}
.book.toc-hidden .page-toc {
transform: translateX(100%);
opacity: 0;
pointer-events: none;
}
.book.toc-hidden .toc-toggle {
right: 10px;
}
.book.sidebar-hidden .page-nav.prev {
left: 10px;
}
.book:not(.toc-hidden) .page-wrapper {
margin-right: 260px;
}
.book:not(.toc-hidden) .page-nav.next {
right: 260px;
}
@media (max-width: 768px) {
.page-toc,
.toc-toggle {
display: none !important;
}
.book:not(.toc-hidden) .page-wrapper {
margin-right: 0;
}
.book:not(.toc-hidden) .page-nav.next {
right: 10px;
}
}
.fontsettings-toolbar {
position: fixed;
top: 10px;
right: 60px;
display: flex;
align-items: center;
gap: 4px;
background: #fff;
border: 1px solid #e8e8e8;
border-radius: 4px;
padding: 4px 8px;
z-index: 101;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.book:not(.toc-hidden) .fontsettings-toolbar {
right: 300px;
}
.fontsettings-toolbar .fontsettings-separator {
width: 1px;
height: 20px;
background: #e8e8e8;
margin: 0 4px;
}
.fontsettings-toolbar button {
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border: none;
background: transparent;
cursor: pointer;
border-radius: 3px;
color: #666;
font-size: 14px;
font-weight: 600;
transition: background 0.2s, color 0.2s;
}
.fontsettings-toolbar button:hover:not(.disabled) {
background: #f0f0f0;
color: #333;
}
.fontsettings-toolbar button.disabled {
opacity: 0.4;
cursor: not-allowed;
}
.fontsettings-toolbar button.active {
background: #008cff;
color: white;
}
.fontsettings-decrease {
font-size: 12px !important;
}
.fontsettings-increase {
font-size: 16px !important;
}
.fontsettings-theme[data-theme="white"] {
background: #fff !important;
border: 1px solid #ccc !important;
}
.fontsettings-theme[data-theme="sepia"] {
background: #f4ecd8 !important;
border: 1px solid #d4c9b0 !important;
}
.fontsettings-theme[data-theme="night"] {
background: #1c1c1c !important;
border: 1px solid #3a3a3a !important;
}
.fontsettings-theme.active {
box-shadow: 0 0 0 2px #008cff !important;
}
.book.theme-white {
}
.book.theme-sepia {
background: #f4ecd8;
}
.book.theme-sepia .book-summary {
background: #ede6d4;
border-right-color: #d4c9b0;
}
.book.theme-sepia .book-summary .summary li.chapter a,
.book.theme-sepia .book-summary .summary li.chapter .chapter-title {
color: #5f4b32;
}
.book.theme-sepia .book-summary .summary li.chapter a:hover {
background: #e5dcc8;
color: #704214;
}
.book.theme-sepia .book-summary .summary li.chapter.active > a {
background: #ddd4c0;
border-left-color: #704214;
color: #704214;
}
.book.theme-sepia .book-summary .summary li.divider {
background: #d4c9b0;
}
.book.theme-sepia .search-wrapper {
border-bottom-color: #d4c9b0;
}
.book.theme-sepia .search-input {
background: #f4ecd8;
border-color: #d4c9b0;
color: #5f4b32;
}
.book.theme-sepia .search-results {
background: #f4ecd8;
border-color: #d4c9b0;
}
.book.theme-sepia .search-result-item {
color: #5f4b32;
border-bottom-color: #e5dcc8;
}
.book.theme-sepia .search-result-item:hover {
background: #ede6d4;
}
.book.theme-sepia .markdown-section {
color: #5f4b32;
}
.book.theme-sepia .markdown-section a {
color: #704214;
}
.book.theme-sepia .markdown-section h1,
.book.theme-sepia .markdown-section h2 {
border-bottom-color: #d4c9b0;
}
.book.theme-sepia .markdown-section code {
background: #ebe4d0;
}
.book.theme-sepia .markdown-section pre {
background: #ebe4d0;
}
.book.theme-sepia .markdown-section table th {
background: #ebe4d0;
}
.book.theme-sepia .markdown-section table th,
.book.theme-sepia .markdown-section table td {
border-color: #d4c9b0;
}
.book.theme-sepia .markdown-section table tr:nth-child(even) {
background: #f0e8d8;
}
.book.theme-sepia .markdown-section blockquote {
color: #7a6a52;
border-left-color: #d4c9b0;
}
.book.theme-sepia .page-nav {
background: rgba(95, 75, 50, 0.1);
color: #7a6a52;
}
.book.theme-sepia .page-nav:hover {
background: rgba(95, 75, 50, 0.2);
color: #5f4b32;
}
.book.theme-sepia .sidebar-toggle,
.book.theme-sepia .toc-toggle {
background: #f4ecd8;
border-color: #d4c9b0;
}
.book.theme-sepia .sidebar-toggle:hover,
.book.theme-sepia .toc-toggle:hover {
background: #ede6d4;
}
.book.theme-sepia .sidebar-toggle svg,
.book.theme-sepia .toc-toggle svg {
color: #7a6a52;
}
.book.theme-sepia .page-toc {
background: #f4ecd8;
border-left-color: #d4c9b0;
}
.book.theme-sepia .page-toc .toc-header {
color: #7a6a52;
border-bottom-color: #d4c9b0;
}
.book.theme-sepia .page-toc .toc-list li a {
color: #7a6a52;
}
.book.theme-sepia .page-toc .toc-list li a:hover {
color: #704214;
}
.book.theme-sepia .page-toc .toc-list li.active a {
color: #704214;
}
.book.theme-sepia .fontsettings-toolbar {
background: #f4ecd8;
border-color: #d4c9b0;
}
.book.theme-sepia .fontsettings-toolbar button {
color: #7a6a52;
}
.book.theme-sepia .fontsettings-toolbar button:hover:not(.disabled) {
background: #ede6d4;
color: #5f4b32;
}
.book.theme-sepia .fontsettings-separator {
background: #d4c9b0;
}
.book.theme-sepia .back-to-top {
background: #704214;
}
.book.theme-sepia .back-to-top:hover {
background: #5a3510;
}
.book.theme-night {
background: #1c1c1c;
}
.book.theme-night .book-summary {
background: #262626;
border-right-color: #3a3a3a;
}
.book.theme-night .book-summary .summary li.chapter a,
.book.theme-night .book-summary .summary li.chapter .chapter-title {
color: #c8c8c8;
}
.book.theme-night .book-summary .summary li.chapter a:hover {
background: #333;
color: #6cb2eb;
}
.book.theme-night .book-summary .summary li.chapter.active > a {
background: #333;
border-left-color: #6cb2eb;
color: #6cb2eb;
}
.book.theme-night .book-summary .summary li.part-title span {
color: #808080;
}
.book.theme-night .book-summary .summary li.divider {
background: #3a3a3a;
}
.book.theme-night .search-wrapper {
border-bottom-color: #3a3a3a;
}
.book.theme-night .search-input {
background: #1c1c1c;
border-color: #3a3a3a;
color: #c8c8c8;
}
.book.theme-night .search-input::placeholder {
color: #666;
}
.book.theme-night .search-results {
background: #262626;
border-color: #3a3a3a;
box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}
.book.theme-night .search-result-item {
color: #c8c8c8;
border-bottom-color: #3a3a3a;
}
.book.theme-night .search-result-item:hover {
background: #333;
}
.book.theme-night .search-result-title {
color: #e8e8e8;
}
.book.theme-night .search-result-snippet {
color: #999;
}
.book.theme-night .search-result-item mark {
background: #5a4a00;
color: #fff;
}
.book.theme-night .markdown-section {
color: #c8c8c8;
}
.book.theme-night .markdown-section a {
color: #6cb2eb;
}
.book.theme-night .markdown-section h1,
.book.theme-night .markdown-section h2,
.book.theme-night .markdown-section h3,
.book.theme-night .markdown-section h4,
.book.theme-night .markdown-section h5,
.book.theme-night .markdown-section h6 {
color: #e8e8e8;
}
.book.theme-night .markdown-section h1,
.book.theme-night .markdown-section h2 {
border-bottom-color: #3a3a3a;
}
.book.theme-night .markdown-section code {
background: #2d2d2d;
color: #e8e8e8;
}
.book.theme-night .markdown-section pre {
background: #2d2d2d;
}
.book.theme-night .markdown-section pre code {
color: #c8c8c8;
}
.book.theme-night .hljs {
background: #2d2d2d;
color: #c8c8c8;
}
.book.theme-night .hljs-keyword,
.book.theme-night .hljs-selector-tag,
.book.theme-night .hljs-literal,
.book.theme-night .hljs-section,
.book.theme-night .hljs-link {
color: #cc99cc;
}
.book.theme-night .hljs-string,
.book.theme-night .hljs-title,
.book.theme-night .hljs-name,
.book.theme-night .hljs-type,
.book.theme-night .hljs-attribute,
.book.theme-night .hljs-symbol,
.book.theme-night .hljs-bullet,
.book.theme-night .hljs-addition,
.book.theme-night .hljs-variable,
.book.theme-night .hljs-template-tag,
.book.theme-night .hljs-template-variable {
color: #99cc99;
}
.book.theme-night .hljs-comment,
.book.theme-night .hljs-quote,
.book.theme-night .hljs-deletion,
.book.theme-night .hljs-meta {
color: #999999;
}
.book.theme-night .hljs-number,
.book.theme-night .hljs-regexp,
.book.theme-night .hljs-literal,
.book.theme-night .hljs-built_in {
color: #f99157;
}
.book.theme-night .markdown-section table {
background: #1c1c1c !important;
}
.book.theme-night .markdown-section table th,
.book.theme-night .page-inner table th,
.book.theme-night table th {
background: #2d2d2d !important;
background-color: #2d2d2d !important;
color: #e8e8e8 !important;
border-color: #3a3a3a !important;
}
.book.theme-night .markdown-section table td,
.book.theme-night .page-inner table td,
.book.theme-night table td {
background: #1c1c1c !important;
background-color: #1c1c1c !important;
color: #c8c8c8 !important;
border-color: #3a3a3a !important;
}
.book.theme-night .markdown-section table tr:nth-child(even) td,
.book.theme-night .page-inner table tr:nth-child(even) td,
.book.theme-night table tr:nth-child(even) td {
background: #242424 !important;
background-color: #242424 !important;
}
.book.theme-night .markdown-section blockquote {
color: #999;
border-left-color: #3a3a3a;
}
.book.theme-night .markdown-section img {
opacity: 0.9;
}
.book.theme-night .page-nav {
background: rgba(200, 200, 200, 0.1);
color: #999;
}
.book.theme-night .page-nav:hover {
background: rgba(200, 200, 200, 0.2);
color: #c8c8c8;
}
.book.theme-night .sidebar-toggle,
.book.theme-night .toc-toggle {
background: #262626;
border-color: #3a3a3a;
}
.book.theme-night .sidebar-toggle:hover,
.book.theme-night .toc-toggle:hover {
background: #333;
}
.book.theme-night .sidebar-toggle svg,
.book.theme-night .toc-toggle svg {
color: #999;
}
.book.theme-night .page-toc {
background: #1c1c1c;
border-left-color: #3a3a3a;
}
.book.theme-night .page-toc .toc-header {
color: #808080;
border-bottom-color: #3a3a3a;
}
.book.theme-night .page-toc .toc-list li a {
color: #999;
}
.book.theme-night .page-toc .toc-list li a:hover {
color: #6cb2eb;
}
.book.theme-night .page-toc .toc-list li.active a {
color: #6cb2eb;
}
.book.theme-night .fontsettings-toolbar {
background: #262626;
border-color: #3a3a3a;
}
.book.theme-night .fontsettings-toolbar button {
color: #999;
}
.book.theme-night .fontsettings-toolbar button:hover:not(.disabled) {
background: #333;
color: #c8c8c8;
}
.book.theme-night .fontsettings-separator {
background: #3a3a3a;
}
.book.theme-night .back-to-top {
background: #6cb2eb;
color: #1c1c1c;
}
.book.theme-night .back-to-top:hover {
background: #5a9fd8;
}
@media (max-width: 768px) {
.fontsettings-toolbar {
display: none !important;
}
}
.glossary-term {
position: relative;
cursor: help;
border-bottom: 1px dotted #4183c4;
color: inherit;
text-decoration: none;
}
.glossary-term:hover {
border-bottom-style: solid;
background-color: rgba(65, 131, 196, 0.1);
}
.glossary-term::after {
content: attr(data-definition);
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
margin-bottom: 8px;
padding: 8px 12px;
background: #333;
color: #fff;
font-size: 13px;
font-weight: normal;
line-height: 1.4;
text-align: left;
white-space: normal;
max-width: 300px;
min-width: 150px;
border-radius: 4px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
z-index: 1000;
opacity: 0;
visibility: hidden;
transition: opacity 0.2s ease, visibility 0.2s ease;
pointer-events: none;
}
.glossary-term::before {
content: "";
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
margin-bottom: 2px;
border: 6px solid transparent;
border-top-color: #333;
z-index: 1001;
opacity: 0;
visibility: hidden;
transition: opacity 0.2s ease, visibility 0.2s ease;
pointer-events: none;
}
.glossary-term:hover::after,
.glossary-term:hover::before {
opacity: 1;
visibility: visible;
}
.glossary-term.tooltip-bottom::after {
bottom: auto;
top: 100%;
margin-bottom: 0;
margin-top: 8px;
}
.glossary-term.tooltip-bottom::before {
bottom: auto;
top: 100%;
margin-bottom: 0;
margin-top: 2px;
border-top-color: transparent;
border-bottom-color: #333;
}
.book.theme-sepia .glossary-term {
border-bottom-color: #704214;
}
.book.theme-sepia .glossary-term:hover {
background-color: rgba(112, 66, 20, 0.1);
}
.book.theme-sepia .glossary-term::after {
background: #5f4b32;
}
.book.theme-sepia .glossary-term::before {
border-top-color: #5f4b32;
}
.book.theme-sepia .glossary-term.tooltip-bottom::before {
border-top-color: transparent;
border-bottom-color: #5f4b32;
}
.book.theme-night .glossary-term {
border-bottom-color: #6fa8dc;
}
.book.theme-night .glossary-term:hover {
background-color: rgba(111, 168, 220, 0.15);
}
.book.theme-night .glossary-term::after {
background: #4a4a4a;
color: #e0e0e0;
}
.book.theme-night .glossary-term::before {
border-top-color: #4a4a4a;
}
.book.theme-night .glossary-term.tooltip-bottom::before {
border-top-color: transparent;
border-bottom-color: #4a4a4a;
}
@media (max-width: 768px) {
.glossary-term::after {
left: 0;
transform: none;
max-width: 250px;
min-width: 120px;
}
.glossary-term::before {
left: 20px;
transform: none;
}
}