Pivot.css: Difference between revisions

/* ==========================================================================
   The Canon of Nora — Pivot skin overrides
   Paste this into MediaWiki:Pivot.css on-wiki
   Built against the real selectors in skins/Pivot/assets/stylesheets/pivot.css
   (not guessed — pulled directly from the installed source).
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,500&family=Source+Sans+3:wght@400;600;700&display=swap');

:root {
  --canon-plum-darkest: #2a1a40;
  --canon-plum-dark:    #3d2563;
  --canon-plum:         #4a2d73;
  --canon-gold:         #b8923f;
  --canon-gold-light:   #d4af6a;
  --canon-cream:        #f6f3f9;
  --canon-lavender:     #ece6f4;
  --canon-text-dark:    #2a1a40;
  --canon-text-muted:   #6b6378;
}

/* ---- Base page (overrides body { background-color: #DCEAEA; }) ---- */
body {
  background-color: var(--canon-cream) !important;
  font-family: 'Source Sans 3', 'Source Sans Pro', sans-serif;
  color: var(--canon-text-dark);
}

/* ---- Top bar (overrides .tab-bar { background: #517398; }) ---- */
.tab-bar {
  background: var(--canon-plum-darkest) !important;
}
.tab-bar,
.tab-bar a,
.tab-bar .title,
.tab-bar h1.title,
.tab-bar h1.title a,
.tab-bar h1, .tab-bar h2, .tab-bar h3, .tab-bar h4 {
  font-family: 'Cormorant Garamond', serif;
  color: #ffffff !important;
}

/* ---- Secondary bar: hamburger / breadcrumb / Actions / notifications row ---- */
nav.top-bar,
.top-bar-section {
  background: var(--canon-lavender) !important;
}
nav.top-bar a,
.top-bar-section a {
  color: var(--canon-plum-darkest) !important;
}

/* ---- Headings ---- */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 600;
  color: var(--canon-plum-darkest);
}

/* ---- Links (overrides a { color: #0645ad; } / a:hover { color: #0b0080; }) ---- */
a {
  color: var(--canon-plum) !important;
}
a:hover {
  color: var(--canon-plum-darkest) !important;
}

/* ---- Sidebar section headers: "Navigation" / "Tools"
   (overrides ul.side-nav label { background: #517398; color: #fff; }) ---- */
ul.side-nav label {
  background: var(--canon-plum-dark) !important;
  color: #ffffff !important;
  font-family: 'Cormorant Garamond', serif;
  font-variant: normal;
  letter-spacing: 0.03em;
  border-radius: 6px;
}

/* ---- "Actions" button: dark plum, white text ---- */
#p-cactions > a.button,
#p-cactions a.button.dropdown {
  background-color: var(--canon-plum-darkest) !important;
  color: #ffffff !important;
  border-color: var(--canon-plum-darkest) !important;
}
#p-cactions > a.button:hover {
  background-color: var(--canon-plum-dark) !important;
}

/* ---- Page titles (article headings) — larger ---- */
#firstHeading,
h1.firstHeading {
  font-size: 2.6em !important;
  font-weight: 700;
}
.side-nav li a:not(.button) {
  color: var(--canon-plum) !important;
  font-size: 1.05em;
  padding: 0.4em 0.5em !important;
  font-weight: 500;
}
.side-nav li a:not(.button):hover,
.side-nav li a:not(.button):focus {
  background: var(--canon-lavender) !important;
  color: var(--canon-plum-darkest) !important;
  border-radius: 6px;
}

/* ---- Infobox (Template:Infobox book) ---- */
.infobox {
  border: 1px solid var(--canon-gold-light) !important;
  background: #ffffff;
}
.infobox > tbody > tr:first-child > th,
.infobox .infobox-title {
  background: var(--canon-plum-darkest) !important;
  color: #ffffff !important;
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.3em;
  padding: 0.5em;
}
.infobox th[colspan],
.infobox .infobox-header {
  background: var(--canon-lavender) !important;
  color: var(--canon-plum-darkest) !important;
  font-family: 'Cormorant Garamond', serif;
  font-weight: 600;
  padding: 0.4em 0.6em;
}
.infobox th {
  color: var(--canon-text-muted);
  font-weight: 600;
  text-align: left;
  padding: 0.4em 0.6em;
}
.infobox td {
  padding: 0.4em 0.6em;
}

/* ---- Off-canvas mobile menu background ---- */
.right-off-canvas-menu, .left-off-canvas-menu {
  background: var(--canon-lavender) !important;
}

/* ---- Logo container ---- */
li.name.logo {
  padding: 0.5em 0;
  text-align: center;
}
li.name.logo img {
  max-width: 100%;
  height: auto;
}

/* ---- Page actions menu strip (overrides #p-cactions background) ---- */
#p-cactions {
  background-color: var(--canon-lavender) !important;
  border-left: 1px solid var(--canon-gold-light) !important;
  border-right: 1px solid var(--canon-gold-light) !important;
}

/* ----  VisualEditor / OOUI toolbar alignment fix ---- */
/* VisualEditor toolbar fix for Pivot */
.ve-init-mw-desktopArticleTarget-toolbar .oo-ui-toolbar-bar .oo-ui-tool-link {
    height: 55px !important;
    line-height: 55px !important;
    position: relative !important;
}

.ve-init-mw-desktopArticleTarget-toolbar .oo-ui-toolbar-bar .oo-ui-tool-link > .oo-ui-iconElement-icon {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    margin: 0 !important;
    transform: translate(-50%, -50%) !important;
}

.ve-init-mw-desktopArticleTarget-toolbar .oo-ui-toolbar-bar .oo-ui-tool-link > .oo-ui-indicatorElement-indicator {
    position: absolute !important;
    top: 50% !important;
    right: 8px !important;
    margin: 0 !important;
    transform: translateY(-50%) !important;
}

/* Undo this inside dropdowns/popups */
.oo-ui-popupWidget .oo-ui-tool-link,
.oo-ui-popupWidget .oo-ui-iconElement-icon,
.oo-ui-popupWidget .oo-ui-indicatorElement-indicator,
.oo-ui-popupWidget .oo-ui-labelElement-label {
    height: auto !important;
    line-height: normal !important;
    position: static !important;
    transform: none !important;
    margin: initial !important;
    padding-left: initial !important;
}

/* ---- Footer ---- */
footer.row {
  background-color: var(--canon-lavender) !important;
  border-top: 1px solid var(--canon-gold-light) !important;
}

/* ---- Buttons: Save/Submit (overrides green input[type=submit]) ---- */
input[type="submit"] {
  background-color: var(--canon-plum-darkest) !important;
  border-color: var(--canon-plum-darkest) !important;
  color: #ffffff !important;
}
input#wpPreview {
  background-color: #ffffff !important;
  border: 1px solid var(--canon-plum-darkest) !important;
  color: var(--canon-plum-darkest) !important;
}

/* ---- Homepage hero banner (for Main Page custom layout) ---- */
.canon-hero {
  background: #ffffff;
  border: 1px solid var(--canon-gold-light);
  border-radius: 14px;
  padding: 2em;
  display: flex;
  gap: 2em;
  align-items: center;
  margin-bottom: 1.5em;
}
.canon-hero-text { flex: 1.4; }
.canon-hero-image { flex: 1; text-align: center; }
.canon-hero-image img { max-width: 100%; border-radius: 10px; }
.canon-hero h1 { font-size: 2.2em; margin-top: 0; }
.canon-hero p { color: var(--canon-text-muted); font-size: 1.05em; line-height: 1.6; }

/* ---- Homepage portal card grid (for Main Page custom layout) ---- */
.canon-portal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.2em;
  margin: 1.5em 0;
}
.canon-portal-card {
  background: #ffffff;
  border: 1px solid var(--canon-gold-light);
  border-radius: 10px;
  padding: 1.2em 1.4em;
  box-shadow: 0 1px 3px rgba(42, 26, 64, 0.06);
}
.canon-portal-card h3 {
  font-size: 1.3em;
  border-bottom: 1px solid var(--canon-gold-light);
  padding-bottom: 0.4em;
  margin-bottom: 0.6em;
}
.canon-portal-card ul { list-style: none; margin: 0; padding: 0; }
.canon-portal-card li a {
  display: flex;
  justify-content: space-between;
  padding: 0.35em 0;
  border-bottom: 1px solid #f0ecf6;
}
.canon-portal-card li:last-child a { border-bottom: none; }

@media (max-width: 700px) {
  .canon-hero { flex-direction: column; }
}