@@ Line 18: / Line 18: @@
     .mw-parser-output on every page load via applyFontSize().
     The 20px here is the no-JS fallback only.
+   All children use font-size: 1em so they scale with it.
     ────────────────────────────────────────────────────────────────── */
 .mw-parser-output {
@@ Line 38: / Line 39: @@
 }
-/* ── Headings ───────────────────────────────────────────────────── */
+/* ── Headings: bold only, no size change ────────────────────────── */
 .mw-parser-output h1,
 .mw-parser-output h2,
@@ Line 494: / Line 495: @@
    transform: translateX(-50%) translateY(0);
 }
+/* Replace default logo with favicon */
+.mw-logo-icon {
+  content: url('/favicon.ico');
+  width: 28px;
+  height: 28px;
+}
+/* ===== Grantha Header (FIXED) ===== */
+.vector-header-container {
-/* ════════════════════════════════════════════════════════════════
+   background: #1a2e40 !important;
-   Grantha — Wiki chrome styling
+   border-bottom: 1px solid rgba(255,255,255,0.08);
-   Reskins the existing MediaWiki UI to match Grantha's palette.
-   Nothing is hidden — just restyled.
-   ════════════════════════════════════════════════════════════════ */
-/* ── Page background ── */
-body {
-   background: #f5f4f0 !important;
-   font-family: system-ui, -apple-system, sans-serif;
 }
-/* ── Top header bar (Vector 2022) ── */
-.mw-header,
 .vector-header {
-   background: #1a2e40 !important;
+   background: transparent !important;
-   border-bottom: none !important;
+   max-width: 100% !important;
-  box-shadow: 0 1px 0 rgba(255,255,255,0.06) !important;
 }
-/* Site name / logo text */
+/* Left logo */
-.mw-wiki-title,
+.mw-logo-wordmark {
-#p-logo a,
+   color: #ffffff !important;
-.vector-header .mw-logo {
+   font-weight: 700;
-   color: #fff !important;
+   font-size: 18px;
-   font-weight: 700 !important;
+   letter-spacing: -0.01em;
-   font-size: 15px !important;
-   opacity: 1 !important;
 }
-/* Search box */
+/* Icon */
-.vector-search-box input,
+.mw-logo-icon {
-.cdx-text-input__input {
+   content: url('/favicon.ico');
-   background: rgba(255,255,255,0.1) !important;
+   width: 24px;
-   border-color: rgba(255,255,255,0.2) !important;
+   height: 24px;
-   color: #fff !important;
+   filter: invert(1);
-   border-radius: 20px !important;
 }
-.vector-search-box input::placeholder,
+/* Right side text/icons */
-.cdx-text-input__input::placeholder {
+.vector-header-end,
-   color: rgba(255,255,255,0.45) !important;
+.vector-header-end * {
+   color: rgba(255,255,255,0.9) !important;
 }
-.vector-search-box input:focus,
+/* Remove spacing constraint */
-.cdx-text-input__input:focus {
+.vector-header-container .vector-header {
-   background: rgba(255,255,255,0.18) !important;
+   padding-left: 20px !important;
-  border-color: rgba(255,255,255,0.5) !important;
+   padding-right: 20px !important;
-   box-shadow: none !important;
 }
+/* ===== Search box (clean, modern) ===== */
-/* User/personal tools in header */
+#p-search {
-.vector-user-links a,
+   margin-left: 20px;
-.mw-portlet-personal a,
-#pt-login a,
-#pt-createaccount a {
-   color: rgba(255,255,255,0.8) !important;
-  font-size: 13px !important;
 }
-.vector-user-links a:hover,
+.cdx-search-input__input {
-.mw-portlet-personal a:hover {
+  background: rgba(255,255,255,0.12) !important;
+  border: 1px solid rgba(255,255,255,0.2) !important;
    color: #fff !important;
+  border-radius: 8px !important;
+  padding: 6px 10px !important;
 }
-/* ── Left sidebar ── */
+.cdx-search-input__input::placeholder {
-#mw-panel,
+   color: rgba(255,255,255,0.6);
-.mw-sidebar,
-.vector-sidebar,
-.vector-sidebar-container {
-   background: #fff !important;
-  border-right: 1px solid #e8eaed !important;
 }
-/* Sidebar headings */
+/* Search button */
-.vector-menu-heading,
+.cdx-search-input__end-button {
-.mw-portlet-nav-heading,
+   background: rgba(255,255,255,0.15) !important;
-#mw-panel .portal h3,
+   color: #fff !important;
-.vector-sidebar .vector-menu-heading {
-   font-size: 10px !important;
-  font-weight: 700 !important;
-  text-transform: uppercase !important;
-  letter-spacing: .09em !important;
-   color: #8a9bb0 !important;
-  padding: 16px 16px 6px !important;
    border: none !important;
-  background: none !important;
 }
-/* Sidebar links */
+/* ===== Icons (user, watchlist etc.) ===== */
-#mw-panel .portal .body a,
-.vector-sidebar a,
+.vector-header .vector-icon {
-.mw-portlet-nav a {
+   filter: invert(1);
-   color: #1a2e40 !important;
+   opacity: 0.9;
-  font-size: 13px !important;
-  padding: 5px 16px !important;
-  border-radius: 6px !important;
-  display: block !important;
-   transition: background .1s !important;
 }
-#mw-panel .portal .body a:hover,
+/* ===== User name ===== */
-.vector-sidebar a:hover,
-.mw-portlet-nav a:hover {
+.vector-user-links a {
-   background: #f0f4f8 !important;
+  color: rgba(255,255,255,0.9) !important;
-   color: #1a2e40 !important;
+}
-   text-decoration: none !important;
+.vector-header {
+   display: flex;
+   align-items: center;
+   justify-content: space-between;
 }
-/* ── Page action tabs (Edit, History, Talk …) ── */
+.vector-header-start {
-#p-views ul,
+   display: flex;
-.mw-portlet-views ul,
+   align-items: center;
-.vector-page-tools ul {
+   gap: 14px;
-   background: none !important;
-   border: none !important;
-   gap: 2px !important;
 }
-#p-views li a,
+.vector-header-end {
-.mw-portlet-views li a,
+   display: flex;
-.vector-page-tools li a,
+   align-items: center;
-#ca-edit a, #ca-ve-edit a, #ca-history a, #ca-talk a {
+   gap: 12px;
-   font-size: 12.5px !important;
+}
-   color: #4a5568 !important;
+.vector-search-box {
-   padding: 5px 12px !important;
+   max-width: 420px;
-  border-radius: 6px !important;
-   border: 1px solid transparent !important;
-  background: none !important;
-  transition: background .12s, border-color .12s !important;
 }
+/* ===== Prevent header shifting on search ===== */
-#p-views li a:hover,
+.vector-header {
-.mw-portlet-views li a:hover,
+   display: flex !important;
-#ca-edit a:hover, #ca-history a:hover {
+   align-items: center;
-   background: #f0f4f8 !important;
+   justify-content: space-between;
-   border-color: #dde3ea !important;
-   color: #1a2e40 !important;
 }
-#p-views li.selected a,
+.vector-header-start {
-.mw-portlet-views li.selected a {
+   flex: 0 0 auto !important;
-   background: #1a2e40 !important;
+   display: flex;
-   color: #fff !important;
+   align-items: center;
-   border-color: #1a2e40 !important;
 }
-/* ── Footer ── */
+.vector-header-end {
-#footer,
+   flex: 0 0 auto !important;
-.mw-footer,
+   display: flex;
-.vector-footer {
+   align-items: center;
-   background: #1a2e40 !important;
-   border-top: none !important;
-   color: rgba(255,255,255,0.5) !important;
-  font-size: 12px !important;
-  padding: 20px 24px !important;
 }
-#footer a,
+/* Keep search contained */
-.mw-footer a,
+.vector-search-box {
-.vector-footer a {
+   flex: 0 0 360px !important;
-   color: rgba(255,255,255,0.65) !important;
 }
+/* Keep logo visible ALWAYS */
+.mw-logo {
+  display: flex !important;
+  align-items: center;
+  opacity: 1 !important;
+  visibility: visible !important;
+}
+/* ===== Search dropdown (fix visibility) ===== */
-#footer a:hover,
+.cdx-typeahead-search {
-.mw-footer a:hover {
+  background: #ffffff !important;
-   color: #fff !important;
+   color: #202124 !important;
+  border-radius: 10px;
+  box-shadow: 0 6px 24px rgba(0,0,0,0.2);
 }
-/* ── Site notice ── */
+/* Search results text */
-#siteNotice {
+.cdx-menu-item {
-  background: #eef3ff !important;
+   color: #202124 !important;
-  border: 1px solid #c8d8f5 !important;
-  border-radius: 8px !important;
-   color: #1a2e40 !important;
-  font-size: 13px !important;
-  padding: 8px 14px !important;
-  margin-bottom: 16px !important;
 }
-/* ── Category links ── */
+/* Hover */
-#catlinks,
+.cdx-menu-item:hover {
-.catlinks {
+   background: #f1f3f4 !important;
-  background: #f8f9fa !important;
-  border: 1px solid #e8eaed !important;
-  border-radius: 8px !important;
-  font-size: 12.5px !important;
-   color: #6b7a8d !important;
-  padding: 8px 14px !important;
-  margin-top: 24px !important;
 }
+/* Input text color */
-#catlinks a,
+.cdx-text-input__input {
-.catlinks a {
+   color: #ffffff !important;
-   color: #2a5298 !important;
 }
+/* When typing */
-/* ════════════════════════════════════════════════════════════════
+.cdx-text-input__input:focus {
-   Grantha — Main Page
+   background: rgba(255,255,255,0.18) !important;
-   ════════════════════════════════════════════════════════════════ */
-#se-home {
-   font-family: system-ui, -apple-system, sans-serif;
-  max-width: 680px;
-  margin: 0 auto;
-  padding: 0 0 48px;
 }
+/* Disable auto expand behavior */
-#se-home h2,
+.vector-search-box-auto-expand-width {
-#se-home .mw-heading {
+   max-width: 360px !important;
-   display: none;
 }
+body.page-Main_Page #mw-panel,
-.se-hero {
+body.page-Main_Page .vector-sidebar-container {
-  background: linear-gradient(160deg, #f7f4ef 0%, #faf8f3 60%, #eef3f8 100%);
+   display: none !important;
-  padding: 44px 28px 36px;
-  text-align: center;
-  border-radius: 12px;
-  margin-bottom: 32px;
-   border: 1px solid #e8e4dc;
 }
-.se-hero-verse {
+body.page-Main_Page #footer {
-   font-size: 14px;
+   display: none !important;
-  color: #8a7e6c;
-  font-style: italic;
-  line-height: 1.9;
-  margin-bottom: 18px;
-  opacity: .85;
 }
+.grantha-new-btn {
-.se-hero-title {
+   background: rgba(255,255,255,0.1);
-   font-size: 30px;
+   border: 1px solid rgba(255,255,255,0.3);
-   font-weight: 700;
+   color: white;
-   color: #1a2e40;
+   padding: 6px 14px;
-   letter-spacing: -.01em;
+  border-radius: 20px;
-   margin-bottom: 6px;
+  cursor: pointer;
+   margin-right: 10px;
 }
-.se-hero-sub {
+.grantha-modal {
-   font-size: 13px;
+  position: fixed;
-   color: #8a9bb0;
+  inset: 0;
+  background: rgba(0,0,0,0.35);
+  display: flex;
+  align-items: center;
+   justify-content: center;
+   z-index: 10000;
 }
-.se-section {
+.grantha-modal-box {
-   margin-bottom: 32px;
+   background: white;
+  padding: 20px;
+  border-radius: 10px;
+  width: 300px;
 }
-.se-section-label {
+.gm-title {
-  font-size: 11px;
+   font-weight: bold;
-   font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: .1em;
-  color: #8a9bb0;
    margin-bottom: 10px;
-  padding-bottom: 8px;
-  border-bottom: 1px solid #eef0f3;
 }
-.se-doclist {
+.gm-actions {
-   border: 1px solid #e8eaed;
+   display: flex;
-   border-radius: 10px;
+   justify-content: flex-end;
-   overflow: hidden;
+  gap: 10px;
+   margin-top: 12px;
+}
+#se-home {
+  max-width: 700px;
+  margin: 40px auto;
 }
 .se-docrow {
-   display: flex;
+   cursor: pointer;
-  align-items: center;
-  gap: 14px;
-  padding: 14px 20px;
-  background: #fff;
-  border-bottom: 1px solid #f0f2f5;
-  transition: background .1s;
 }
-.se-docrow:last-child {
+.se-docrow-title {
-   border-bottom: none;
+   text-decoration: none;
+  color: #1a2e40;
 }
 .se-docrow:hover {
-   background: #f7f9fc;
+   background: #f4f7fb;
+}
+/* 🚫 Disable Vector search takeover completely */
+.vector-search-box-expanded {
+  position: relative !important;
+  left: auto !important;
+  right: auto !important;
+  width: auto !important;
+  max-width: 360px !important;
+  margin: 0 !important;
+}
+/* Freeze header layout */
+.vector-header-container,
+.vector-header {
+  display: flex !important;
+  justify-content: space-between !important;
+  align-items: center !important;
 }
-.se-docrow--dev {
+.vector-header-start {
-   background: #f5f8ff;
+  flex: 0 0 auto !important;
+  display: flex !important;
+  align-items: center !important;
+   gap: 12px;
 }
-.se-docrow--dev:hover {
+.vector-header-end {
-   background: #edf2ff;
+  flex: 0 0 auto !important;
+  display: flex !important;
+  align-items: center !important;
+  gap: 16px;
+}
+/* 🔥 Override Vector hiding logic */
+.mw-logo,
+.vector-header-start .mw-logo {
+  display: flex !important;
+  visibility: visible !important;
+  opacity: 1 !important;
+  transform: none !important;
+}
+/* Keep search ALWAYS in header-end */
+.vector-search-box {
+   order: 2 !important;
 }
-.se-docrow-num {
+.vector-header-start {
-   font-size: 12px;
+   order: 1 !important;
-  color: #c8d0da;
-  min-width: 20px;
-  flex-shrink: 0;
-  font-variant-numeric: tabular-nums;
 }
-.se-docrow-title {
+.vector-header-end {
-   font-size: 14.5px;
+   order: 3 !important;
-  font-weight: 600;
-  flex: 1;
 }
+/* Dropdown container */
-.se-docrow-title a {
+.cdx-typeahead-search {
-   color: #1a2e40;
+  background: #ffffff !important;
-   text-decoration: none;
+   color: #202124 !important;
-   display: block;
+   border-radius: 12px;
+   overflow: hidden;
 }
-.se-docrow-title a:hover {
+/* Individual results */
-   color: #2a5298;
+.cdx-menu-item {
+   color: #202124 !important;
+  padding: 10px 14px;
 }
-.se-doclist-actions {
+/* Hover */
-   margin-top: 14px;
+.cdx-menu-item:hover {
+   background: #f1f3f4 !important;
 }
+/* Input box */
-.se-newdoc-trigger {
+.cdx-text-input__input {
-   display: inline-flex;
+   background: rgba(255,255,255,0.12) !important;
-  align-items: center;
+   color: #ffffff !important;
-  gap: 7px;
+   border-radius: 6px;
-  font-size: 13px;
+   padding: 6px 10px;
-  font-weight: 600;
-   color: #1a2e40;
-  padding: 8px 20px;
-   border-radius: 20px;
-   border: 1.5px solid #1a2e40;
-  cursor: pointer;
-  transition: background .14s, color .14s;
 }
-.se-newdoc-trigger:hover {
+/* Placeholder */
-  background: #1a2e40;
+.cdx-text-input__input::placeholder {
-   color: #fff;
+   color: rgba(255,255,255,0.7) !important;
 }

MediaWiki:Common.css: Difference between revisions