/* ═══════════════════════════════════════════════════ FSS Theme for MkDocs Material Primary: #574699 (purple) Accent: #7ca541 (green) Font: Manrope ═══════════════════════════════════════════════════ */ @import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&display=swap'); :root { --md-primary-fg-color: #574699; --md-primary-fg-color--light: #7b6bb5; --md-primary-fg-color--dark: #443880; --md-accent-fg-color: #7ca541; --md-accent-fg-color--dark: #659033; --md-text-font: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --md-code-font: "JetBrains Mono", "Fira Code", monospace; } /* Header */ .md-header { background: #574699; box-shadow: 0 2px 8px rgba(87,70,153,.35); } .md-header__title { font-family: "Manrope", sans-serif; font-weight: 700; } .md-tabs { background: #443880; } .md-tabs__link { font-family: "Manrope", sans-serif; font-weight: 500; } .md-tabs__link--active, .md-tabs__link:focus, .md-tabs__link:hover { color: #7ca541 !important; } /* Nav sidebar */ .md-nav__title { font-family: "Manrope", sans-serif; font-weight: 700; color: #574699; } .md-nav__link--active { color: #574699 !important; font-weight: 600; } .md-nav__link:hover { color: #443880; } /* Body font */ .md-content { font-family: "Manrope", sans-serif; } .md-content h1, .md-content h2, .md-content h3 { font-family: "Manrope", sans-serif; font-weight: 700; } /* Buttons / admonitions accent */ .md-button { border-radius: 6px; font-family: "Manrope", sans-serif; font-weight: 600; } .md-button--primary { background: #574699; border-color: #574699; } .md-button--primary:hover { background: #443880; border-color: #443880; } /* Search */ .md-search__form { border-radius: 8px; } /* ═══════════════════════════════════════════════════ Visibility rules: ẩn tab theo context - Khi ở /os-timesheet/ → ẩn tab "Interview DE" - Khi ở /interview-de/ → ẩn tab "OS Timesheet" Dùng JS bên dưới vì CSS không thể đọc URL ═══════════════════════════════════════════════════ */ /* Mặc định ẩn cả 2, JS sẽ show lại cái phù hợp */ .md-tabs__item--hide { display: none !important; } /* ═══════════════════════════════════════════════════ Early-hide: set on synchronously trước first paint (data-section được set inline trong trước khi body render) ═══════════════════════════════════════════════════ */ html[data-section="os-timesheet"] .md-tabs, html[data-section="os-timesheet"] .md-sidebar, html[data-section="os-timesheet"] .md-footer, html[data-section="os-timesheet"] .md-header { display: none; } html[data-section="home"] .md-sidebar { display: none; } html[data-section="home"] .md-main__inner { margin-left: 0 !important; } html[data-section="home"] .md-content { margin-left: 0; max-width: 100%; } /* ═══════════════════════════════════════════════════ Trang chủ: ẩn sidebar + nav ═══════════════════════════════════════════════════ */ body[data-section="home"] .md-sidebar { display: none; } body[data-section="home"] .md-main__inner { margin-left: 0 !important; } body[data-section="home"] .md-content { margin-left: 0; max-width: 100%; } /* ═══════════════════════════════════════════════════ OS Timesheet page: ẩn toàn bộ MkDocs chrome (header nav, sidebar, footer) vì tool có UI riêng ═══════════════════════════════════════════════════ */ body[data-section="os-timesheet"] .md-tabs, body[data-section="os-timesheet"] .md-sidebar, body[data-section="os-timesheet"] .md-footer, body[data-section="os-timesheet"] .md-header { display: none; } body[data-section="os-timesheet"] .md-content { margin: 0; padding: 0; max-width: 100%; } body[data-section="os-timesheet"] .md-main__inner { margin: 0; } body[data-section="os-timesheet"] .md-container { padding-top: 0; } body[data-section="os-timesheet"] .md-main { padding-top: 0; } /* ═══════════════════════════════════════════════════ Notion section: mobile-friendly ═══════════════════════════════════════════════════ */ /* Code blocks không bị tràn ngang */ body[data-section="notion"] .md-content pre { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* Bảng không bị tràn ngang */ body[data-section="notion"] .md-content .md-typeset__table { overflow-x: auto; -webkit-overflow-scrolling: touch; display: block; } /* Ảnh tự co theo chiều rộng màn hình */ body[data-section="notion"] .md-content img { max-width: 100%; height: auto; } @media screen and (max-width: 76.1875em) { /* Khi sidebar ẩn (mobile/tablet), nội dung chiếm full width */ body[data-section="notion"] .md-content { max-width: 100%; } } @media screen and (max-width: 44.9375em) { /* Mobile: font size nội dung dễ đọc hơn */ body[data-section="notion"] .md-typeset { font-size: .75rem; line-height: 1.7; } /* Heading nhỏ lại cho vừa màn hình */ body[data-section="notion"] .md-typeset h1 { font-size: 1.4rem; } body[data-section="notion"] .md-typeset h2 { font-size: 1.15rem; } body[data-section="notion"] .md-typeset h3 { font-size: 1rem; } /* Padding nội dung thoải mái hơn */ body[data-section="notion"] .md-content__inner { padding: 0 .8rem 1.2rem; } /* Nav drawer links đủ lớn để tap */ body[data-section="notion"] .md-nav__link { padding-top: .55rem; padding-bottom: .55rem; } } /* ═══════════════════════════════════════════════════ Dark mode overrides ═══════════════════════════════════════════════════ */ [data-md-color-scheme="slate"] { --md-primary-fg-color: #7b6bb5; --md-primary-fg-color--light: #9d90cc; --md-primary-fg-color--dark: #574699; --md-accent-fg-color: #7ca541; } [data-md-color-scheme="slate"] .md-header { background: #2d2548; } [data-md-color-scheme="slate"] .md-tabs { background: #241e38; }