MediaWiki:Common.css: Difference between revisions

From Fate/Starry Night Wiki
Jump to navigation Jump to search
No edit summary
No edit summary
Line 55: Line 55:
   TOC - floating
   TOC - floating
  */
  */
#toc {
/* Base TOC stays normal */
    position: fixed;
#toc {
    right: 0;
  transition: top 0.2s ease, opacity 0.2s ease;
    top: 7em; /* 5em is height of header, 6em brings just under */
    /* bottom: 5em; /* 5em puts us above the footer; not bad but too low when TOC is collapsed */
    z-index: 10000; /* Ensure we float above the header, etc. */
    /* Add opacity (translucency) */
    background-color: rgb(249, 249, 249);
    background-color: rgba(249, 249, 249, 0.9); /* Higher opacity (last arg) means less transparency */
}
}
/* Ensure the TOC height doesn't take over the screen; percentages may be higher than view port, so we use pixels */
/* Floating state */
#toc > ul {
#toc.toc-floating {
    max-height: 350px;
  position: fixed;
    overflow: auto;
  top: 80px; /* adjust for your header */
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  z-index: 100;
}
}
.toctoggle {
/* Optional polish */
    float: right;
#toc.toc-floating {
  background: var(--mw-body-background, #fff);
  padding: 0.5em 0.75em;
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}
}

Revision as of 13:36, 10 February 2026

/* CSS placed here will be applied to all skins */
/* 
  LOGO
 */
#p-logo a { background-size: cover; }
.mw-wiki-logo { margin-top: 10px; }

/*
  LANGUAGES
 */
#p-variants, #p-lang { display: none; }

/* 
  SIDEBAR
 */
/* Set defaults */
.emptyPortlet { 
	display: block; 
}
.portal .vector-menu-heading {
    background-image: none !important;
    padding: none !important;
    /* Category underline */
    padding: 0.2em 0 !important;
    margin: 0.5em 0.6em 0 0.66666667em !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.35) !important;
}
.portal .vector-menu-content { margin: 0 0 0 0.5em !important; }
/* Category - default */
.portal .vector-menu-heading::after {
    content: "▾";
    margin-left: auto;
    opacity: 0.6;
    transition: transform 0.2s ease, opacity 0.2s ease;
}
/* Category - collapsed */
.portal.collapsed .vector-menu-heading::after {
    content: "▸";
    opacity: 0.4;
}
.portal.collapsed .vector-menu-heading,
.portal.collapsed .vector-menu-heading a{
    color: #4d4d4d !important;
}
/* Hover effect */
.portal.collapsed .vector-menu-heading:hover,
.portal.collapsed .vector-menu-heading a:hover{
    text-decoration: none !important;
}
.portal .vector-menu-heading:hover::after {
    opacity: 0.85;
}

/*
  TOC - floating
 */
/* Base TOC stays normal */
#toc {
  transition: top 0.2s ease, opacity 0.2s ease;
}
/* Floating state */
#toc.toc-floating {
  position: fixed;
  top: 80px; /* adjust for your header */
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  z-index: 100;
}
/* Optional polish */
#toc.toc-floating {
  background: var(--mw-body-background, #fff);
  padding: 0.5em 0.75em;
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}