MediaWiki:Vector.css: Difference between revisions

From Heavenly Wiki
Jump to navigation Jump to search
No edit summary
No edit summary
Line 1: Line 1:
/*— your colour variables —*/
/* Base background image setup */
:root {
body {
  --body-main:          #e2dbc8;
    background: url("/resources/assets/bg.png") var(--body-background-color) top center / cover no-repeat;
  --body-light:          #d8ccb4;
    background-attachment: fixed;
  --body-mid:           #d0bd97;
    font-family: 'IBM Plex Sans', 'Helvetica Neue', 'Arial', sans-serif;
  --body-border:         #94866d;
  --background-link-color: #52351e;
  /* …etc… */
}
}


/*— header gradient */
/* Soft fade gradient overlay (tapered exposure of the background image) */
#mw-head {
body::before {
  position: relative;
    content: '';
  overflow: hidden;
    position: fixed;
}
    top: 0;
#mw-head::before {
    left: 0;
  content: "";
    width: 100%;
  position: absolute;
    height: 100%;
  top:0;left:0;right:0;height:250px;
    background: linear-gradient(
  background: linear-gradient(
        to bottom,
    to bottom,
        rgba(245, 237, 221, 0.9) 0%,
    rgba(226,219,200,0.95) 0%,
        rgba(245, 237, 221, 0.96) 15%,
    rgba(226,219,200,0)   100%
        rgba(245, 237, 221, 0.98) 40%,
  );
        rgba(245, 237, 221, 1) 70%
  pointer-events: none;
    );
  z-index: 1;
    z-index: -1;
}
    pointer-events: none;
#mw-head .mw-head-logo,
#mw-head .vector-menu {
  position: relative; z-index:2;
}
}


/*— YOUR tabs overrides, using the *new* Vector class names —*/
/* Optional vignette effect to darken corners subtly */
.vector-menu-tabs-legacy {
body::after {
  background: var(--body-main);
    content: '';
  border-bottom: none;
    position: fixed;
  margin-bottom: 0;
    top: 0;
  padding: 0 .5em;
    left: 0;
  border-radius: .5em .5em 0 0;
    width: 100%;
  box-shadow: inset 0 -7px 7px -7px rgba(0,0,0,0.15);
    height: 100%;
}
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.15) 100%);
.vector-menu-tabs-legacy > li > a {
    z-index: -2;
  background: var(--body-mid);
     pointer-events: none;
  color:      var(--background-link-color);
  border:     1px solid var(--body-border);
  border-bottom: none;
  border-radius: .5em .5em 0 0;
  margin-right: -1px;
  padding:      .5em 1em;
}
.vector-menu-tabs-legacy > li.selected > a {
  background: #fff;
  border-bottom: 1px solid #fff;
}
}


/*— kill the white “wrapper” and make the beige panel sit behind everything —*/
/* Match OSRS Wiki-style solid content area */
#mw-page-base { background: none; }
.vector-body,
.vector-body .mw-body {
#content,
  background-color: var(--body-main);
#mw-content-text,
  color:            var(--text-color);
.mw-body,
  border-color:     transparent;
#mw-head-base {
  box-shadow:       0 0 7px rgba(0,0,0,0.15);
    background-color: #f5eddd;
  margin-top:       0;
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
    padding: 1em;
}
}


/*— fix the personal menu dropdown (“Edit source” / account) —*/
/* Ensure top navigation and tabs blend into same panel */
.vector-menu-dropdown .vector-menu-content {
.vector-menu-tabs,
  background-color: var(--body-light);
.vector-menu-tabs ul,
  border:          1px solid var(--body-border);
.vector-menu-tabs li,
  border-radius:    0 0 .5em .5em;
.vector-menu-tabs li a {
  box-shadow:      0 2px 3px rgba(0,0,0,0.1);
    background-color: #f5eddd !important;
}
.vector-menu-dropdown .vector-menu-content::before,
.vector-menu-dropdown .vector-menu-content::after {
  display: none;
}
}

Revision as of 21:44, 1 May 2025

/* Base background image setup */
body {
    background: url("/resources/assets/bg.png") var(--body-background-color) top center / cover no-repeat;
    background-attachment: fixed;
    font-family: 'IBM Plex Sans', 'Helvetica Neue', 'Arial', sans-serif;
}

/* Soft fade gradient overlay (tapered exposure of the background image) */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        to bottom,
        rgba(245, 237, 221, 0.9) 0%,
        rgba(245, 237, 221, 0.96) 15%,
        rgba(245, 237, 221, 0.98) 40%,
        rgba(245, 237, 221, 1) 70%
    );
    z-index: -1;
    pointer-events: none;
}

/* Optional vignette effect to darken corners subtly */
body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.15) 100%);
    z-index: -2;
    pointer-events: none;
}

/* Match OSRS Wiki-style solid content area */
.vector-body,
#content,
#mw-content-text,
.mw-body,
#mw-head-base {
    background-color: #f5eddd;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
    padding: 1em;
}

/* Ensure top navigation and tabs blend into same panel */
.vector-menu-tabs,
.vector-menu-tabs ul,
.vector-menu-tabs li,
.vector-menu-tabs li a {
    background-color: #f5eddd !important;
}