MediaWiki:Common.css: Difference between revisions

Revision as of 10:00, 3 June 2026

:root {
  --anima-bg: #05070f;
  --anima-ink: #f7f3ea;
  --anima-muted: #b9c0d4;
  --anima-line: rgba(255, 255, 255, .12);
  --anima-panel: rgba(10, 14, 25, .82);
  --anima-cyan: #78f7ff;
  --anima-pink: #ff7cbe;
  --anima-gold: #ffd88a;
  --anima-violet: #b28cff;
}

html,
body {
  background:
    radial-gradient(circle at 12% 8%, rgba(255, 124, 190, .14), transparent 30rem),
    radial-gradient(circle at 78% 14%, rgba(120, 247, 255, .16), transparent 32rem),
    linear-gradient(180deg, #070a13 0%, #02040a 48%, #05070f 100%) !important;
  color: var(--anima-ink) !important;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.7) 0 1px, transparent 1.5px),
    radial-gradient(circle, rgba(120,247,255,.45) 0 1px, transparent 1.5px);
  background-size: 92px 92px, 147px 147px;
  background-position: 0 0, 32px 18px;
  opacity: .16;
  z-index: 0;
}

.mw-page-container,
.mw-content-container,
.mw-page-container-inner,
.vector-feature-page-tools-pinned-enabled .mw-content-container,
.vector-feature-toc-pinned-enabled .mw-content-container,
.vector-page-titlebar,
.vector-page-toolbar,
.vector-page-toolbar-container,
.vector-sticky-header,
.vector-header-container,
.vector-header-container .mw-header,
.vector-body-before-content,
.vector-column-start,
.vector-column-end,
.vector-toc,
.vector-appearance,
.mw-footer {
  background: transparent !important;
}

.mw-page-container {
  max-width: none !important;
  width: 100% !important;
  min-height: 100vh !important;
  position: relative;
  z-index: 1;
}

.vector-header-container {
  position: sticky !important;
  top: 0 !important;
  z-index: 20 !important;
  min-height: 72px !important;
  border-bottom: 1px solid rgba(255, 255, 255, .08) !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 124, 190, .18), transparent 22rem),
    radial-gradient(circle at 72% 0%, rgba(120, 247, 255, .14), transparent 24rem),
    rgba(4, 7, 14, .82) !important;
  backdrop-filter: blur(18px);
  box-shadow: 0 14px 46px rgba(0, 0, 0, .28);
}

.vector-header-container .mw-header {
  width: min(1360px, calc(100vw - 56px)) !important;
  min-height: 72px !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: minmax(180px, 250px) minmax(280px, 560px) max-content !important;
  align-items: center !important;
  gap: 1rem !important;
}

.mw-logo {
  width: auto !important;
  min-width: 172px !important;
  height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: .7rem !important;
  padding: .4rem .75rem .4rem .48rem !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.055) !important;
  text-decoration: none !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03), 0 10px 28px rgba(0,0,0,.22);
}

.mw-logo-icon {
  display: none !important;
}

.mw-logo::before {
  content: "";
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 50% 50%, #fff 0 2px, transparent 2.5px),
    conic-gradient(from 15deg, var(--anima-pink), var(--anima-cyan), var(--anima-gold), var(--anima-pink));
  box-shadow: 0 0 18px rgba(120, 247, 255, .34);
}

.mw-logo-wordmark {
  color: #ffffff !important;
  font-size: .96rem !important;
  font-weight: 850 !important;
  letter-spacing: .04em !important;
  line-height: 1 !important;
}

.mw-logo-wordmark::after {
  content: "CANON MEMORY";
  display: block;
  color: var(--anima-cyan);
  font-size: .56rem;
  font-weight: 800;
  letter-spacing: .12em;
  margin-top: .22rem;
}

#p-search {
  justify-self: stretch !important;
  width: 100% !important;
  max-width: 560px !important;
}

#searchform,
.cdx-search-input {
  width: 100% !important;
  max-width: 560px !important;
  height: 42px !important;
  border-radius: 999px !important;
  overflow: hidden !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  background: rgba(255,255,255,.07) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03) !important;
}

#searchInput,
.cdx-search-input__input {
  height: 42px !important;
  background: transparent !important;
  border: 0 !important;
  color: var(--anima-ink) !important;
  padding-left: 1rem !important;
}

#searchInput::placeholder,
.cdx-search-input__input::placeholder {
  color: rgba(247, 243, 234, .54) !important;
}

#searchButton,
.cdx-search-input__end-button {
  min-width: 94px !important;
  height: 42px !important;
  border: 0 !important;
  border-left: 1px solid rgba(255,255,255,.14) !important;
  background: linear-gradient(135deg, var(--anima-pink), var(--anima-gold)) !important;
  color: #071018 !important;
  font-weight: 850 !important;
}

.vector-user-links,
.vector-user-links a {
  color: rgba(247, 243, 234, .72) !important;
  text-decoration: none !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
}

.vector-user-links {
  justify-self: end !important;
  min-width: 64px !important;
}

.mw-page-container-inner,
.vector-feature-page-tools-pinned-enabled .mw-page-container-inner,
.vector-feature-toc-pinned-enabled .mw-page-container-inner {
  display: block !important;
  max-width: none !important;
  width: 100% !important;
  grid-template-columns: 1fr !important;
  column-gap: 0 !important;
}

.vector-main-menu-landmark,
.vector-page-tools-landmark,
.vector-body-before-content,
.vector-appearance,
.vector-sticky-pinned-container,
.vector-toc-landmark,
.vector-page-titlebar,
.vector-page-toolbar,
.vector-page-toolbar-container,
.vector-page-tools,
.vector-toc,
.vector-column-start,
.vector-column-end,
.vector-pinnable-header,
.vector-pinnable-element,
#left-navigation,
#right-navigation,
#p-associated-pages,
#p-views,
#p-cactions,
#p-variants,
#p-namespaces,
#p-actions,
#ca-nstab-character,
#ca-talk,
#ca-view,
#ca-viewsource,
#ca-history {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

body.skin-vector .vector-page-toolbar,
body.skin-vector .vector-page-toolbar-container,
body.skin-vector-2022 .vector-page-toolbar,
body.skin-vector-2022 .vector-page-toolbar-container,
body.skin-vector-2022 #left-navigation,
body.skin-vector-2022 #right-navigation,
body.skin-vector-2022 .vector-column-end,
body.skin-vector-2022 .vector-sticky-pinned-container,
body.skin-vector-2022 .vector-body-before-content {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

.mw-content-container {
  width: min(1240px, calc(100vw - 64px)) !important;
  max-width: 1240px !important;
  margin: 0 auto !important;
  grid-column: 1 / -1 !important;
}

.mw-body,
.vector-body,
.mw-parser-output {
  color: var(--anima-ink) !important;
}

.mw-body {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  max-width: none !important;
  margin: 0 auto !important;
}

.mw-body-content {
  font-size: 16px !important;
  line-height: 1.75 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.firstHeading {
  display: none !important;
}

.mw-parser-output a {
  color: var(--anima-cyan) !important;
  text-decoration: none !important;
}

.mw-parser-output a:hover {
  color: #ffffff !important;
  text-shadow: 0 0 16px rgba(120, 247, 255, .5);
}

.mw-parser-output h2 {
  border-bottom: 1px solid rgba(120, 247, 255, .22) !important;
  color: #ffffff !important;
  font-size: 1.55rem !important;
  letter-spacing: 0 !important;
  margin-top: 2.2rem !important;
}

.catlinks {
  border: 1px solid rgba(120, 247, 255, .18) !important;
  background: rgba(255,255,255,.04) !important;
  border-radius: 10px !important;
  color: var(--anima-muted) !important;
  padding: .8rem 1rem !important;
}

.anima-dossier {
  --accent: var(--anima-cyan);
  --accent-2: var(--anima-pink);
  --aura: rgba(120, 247, 255, .26);
  max-width: 1120px;
  margin: 2.25rem auto 4rem;
}

.anima-dossier.atma {
  --accent: #ff89c9;
  --accent-2: #8be7ff;
  --aura: rgba(255, 137, 201, .28);
}

.anima-dossier.maya {
  --accent: #b28cff;
  --accent-2: #ff83e6;
  --aura: rgba(178, 140, 255, .3);
}

.anima-dossier.veda {
  --accent: #93fff2;
  --accent-2: #ffd88a;
  --aura: rgba(147, 255, 242, .28);
}

.anima-dossier.raka {
  --accent: #ff8b4f;
  --accent-2: #ffd88a;
  --aura: rgba(255, 139, 79, .32);
}

.anima-hero {
  position: relative;
  overflow: hidden;
  min-height: 405px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 22px;
  background:
    radial-gradient(circle at 78% 38%, var(--aura), transparent 21rem),
    radial-gradient(circle at 26% 10%, rgba(255,255,255,.08), transparent 24rem),
    linear-gradient(135deg, rgba(14, 18, 32, .96), rgba(4, 6, 14, .98));
  box-shadow: 0 28px 90px rgba(0, 0, 0, .46), inset 0 0 0 1px rgba(255,255,255,.04);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 380px);
  gap: 2rem;
  padding: clamp(1.55rem, 3.4vw, 2.7rem);
}

.anima-hero::before {
  content: "";
  position: absolute;
  inset: -30%;
  background:
    conic-gradient(from 140deg at 62% 42%, transparent, rgba(120,247,255,.14), transparent 28%, rgba(255,124,190,.12), transparent 48%),
    repeating-radial-gradient(circle at 66% 44%, rgba(255,255,255,.13) 0 1px, transparent 1px 34px);
  opacity: .78;
}

.anima-hero-copy,
.anima-visual {
  position: relative;
  z-index: 1;
}

.anima-kicker {
  color: var(--accent);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: .7rem;
}

.anima-hero h1 {
  color: #ffffff !important;
  font-size: clamp(3.4rem, 8vw, 6.6rem) !important;
  line-height: .88 !important;
  margin: 0 0 .45rem !important;
  letter-spacing: 0 !important;
  text-shadow: 0 0 34px var(--aura);
}

.anima-subtitle {
  color: var(--accent-2);
  font-size: clamp(1.2rem, 2.6vw, 1.8rem);
  font-weight: 800;
  margin: 0 0 1.25rem;
}

.anima-lead {
  max-width: 650px;
  color: rgba(247, 243, 234, .9);
  font-size: 1.08rem;
  margin-bottom: 1.45rem;
}

.anima-chiprow,
.anima-actions,
.anima-stat-grid {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
}

.anima-chip,
.anima-actions a,
.anima-actions .external {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.07);
  color: #fff !important;
  padding: .45rem .82rem;
  font-weight: 750;
  line-height: 1.15;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03);
}

.anima-actions a:first-child {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #071018 !important;
  border: 0;
  box-shadow: 0 12px 32px var(--aura);
}

.anima-visual {
  min-height: 340px;
  display: grid;
  place-items: center;
}

.anima-visual::before {
  content: "";
  position: absolute;
  width: min(330px, 78vw);
  aspect-ratio: 1;
  border-radius: 999px;
  background:
    radial-gradient(circle, rgba(255,255,255,.22), transparent 34%),
    radial-gradient(circle, var(--aura), transparent 66%);
  filter: blur(8px);
  animation: animaPulse 5s ease-in-out infinite;
}

.anima-visual img {
  position: relative;
  z-index: 1;
  max-width: min(330px, 78vw);
  max-height: 360px;
  object-fit: contain;
  filter: drop-shadow(0 26px 46px rgba(0,0,0,.52)) drop-shadow(0 0 34px var(--aura));
  animation: animaFloat 5.6s ease-in-out infinite;
}

.anima-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
  gap: 1rem;
  margin-top: 1rem;
}

.anima-card {
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  background:
    radial-gradient(circle at 80% 0%, var(--aura), transparent 18rem),
    rgba(9, 13, 24, .86);
  padding: 1.25rem;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03);
}

.anima-card h2,
.anima-card h3 {
  border: 0 !important;
  margin: 0 0 .75rem !important;
  color: #ffffff !important;
}

.anima-card p {
  color: rgba(247, 243, 234, .88);
}

.anima-fact-list {
  display: grid;
  gap: .65rem;
}

.anima-fact {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: .75rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
  padding-bottom: .65rem;
}

.anima-fact b {
  color: var(--accent);
}

.anima-quote {
  border-left: 3px solid var(--accent);
  padding: .7rem 1rem;
  color: #fff;
  background: rgba(255,255,255,.05);
  border-radius: 0 10px 10px 0;
}

.anima-orbit {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
}

.anima-orbit-item {
  min-height: 92px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px;
  padding: .9rem;
  background: rgba(255,255,255,.045);
}

.anima-orbit-item strong {
  display: block;
  color: var(--accent-2);
  margin-bottom: .25rem;
}

.mw-footer {
  width: min(1240px, calc(100vw - 64px)) !important;
  margin: 3.75rem auto 1.5rem !important;
  padding: 1.25rem 1.35rem !important;
  border: 1px solid rgba(255, 255, 255, .12) !important;
  border-radius: 18px !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 124, 190, .16), transparent 18rem),
    radial-gradient(circle at 82% 100%, rgba(120, 247, 255, .14), transparent 18rem),
    rgba(7, 10, 19, .86) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .035), 0 18px 56px rgba(0, 0, 0, .32);
  color: rgba(247, 243, 234, .82) !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 1rem 1.5rem !important;
  align-items: center !important;
}

.mw-footer ul,
.mw-footer li {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

#footer-info,
#footer-places {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: .45rem 1rem !important;
}

#footer-info {
  grid-column: 1 !important;
  color: rgba(247, 243, 234, .9) !important;
  font-size: .86rem !important;
  line-height: 1.55 !important;
  font-weight: 650 !important;
}

#footer-places {
  grid-column: 1 !important;
  font-size: .8rem !important;
  font-weight: 750 !important;
}

#footer-info-lastmod {
  display: none !important;
}

#footer-info-copyright {
  color: rgba(247, 243, 234, .92) !important;
}

#footer-info-copyright::before {
  content: "ANIMA WIKI";
  display: inline-flex;
  margin-right: .65rem;
  color: var(--anima-gold);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .12em;
}

.mw-footer a {
  color: var(--anima-cyan) !important;
  text-decoration: none !important;
}

.mw-footer a:hover {
  color: #fff !important;
  text-shadow: 0 0 14px rgba(120, 247, 255, .5);
}

#footer-icons {
  grid-column: 2 !important;
  grid-row: 1 / span 2 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: .7rem !important;
}

#footer-icons a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 42px !important;
  border: 1px solid rgba(255, 255, 255, .14) !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, .06) !important;
  padding: .25rem .45rem !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .035);
}

#footer-icons img {
  display: block !important;
  width: auto !important;
  max-width: 132px !important;
  max-height: 34px !important;
  object-fit: contain !important;
  opacity: .96 !important;
  filter: drop-shadow(0 0 12px rgba(120, 247, 255, .24));
}

@keyframes animaFloat {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-12px) scale(1.015); }
}

@keyframes animaPulse {
  0%, 100% { opacity: .76; transform: scale(.95); }
  50% { opacity: 1; transform: scale(1.05); }
}

@media (max-width: 900px) {
  .mw-content-container {
    padding: 0 .9rem !important;
  }

  .anima-hero,
  .anima-grid {
    grid-template-columns: 1fr;
  }

  .anima-visual {
    min-height: 260px;
  }

  .mw-footer {
    width: min(100% - 28px, 560px) !important;
    grid-template-columns: 1fr !important;
    margin-top: 2.2rem !important;
  }

  #footer-icons {
    grid-column: 1 !important;
    grid-row: auto !important;
    justify-content: flex-start !important;
  }
}