MediaWiki:Common.css: Difference between revisions

From EQOA Sandstorm Wiki
Jump to navigationJump to search
No edit summary
No edit summary
Line 86: Line 86:
}
}


/* Apply blue background to major page areas */
/* Core layout backgrounds */
#globalWrapper,
#mw-page-base,
#mw-head-base,
#mw-head,
#mw-panel,
#mw-sidebar,
#content,
#content,
#column-content,
#column-one,
#footer,
#footer,
#p-cactions,
#mw-footer,
#p-personal {
#mw-data-after-content {
   background-color: #405b74 !important;
   background-color: #405b74 !important;
   background-image: none !important;
   background-image: none !important;
Line 100: Line 102:


/* === SIDEBAR STYLING === */
/* === SIDEBAR STYLING === */
#column-one,
#mw-panel,
#column-one a,
#mw-panel h3,
#column-one h5 {
#mw-panel a {
   color: #ffffff !important;
   color: #ffffff !important;
   background: none !important;
   background: none !important;
}
}


#column-one a:hover {
#mw-panel a:hover {
   color: #f68825 !important;
   color: #f68825 !important;
   text-decoration: underline;
   text-decoration: underline;
}
}


/* === LOGO AREA FIX === */
/* === MAIN CONTENT AREA === */
#mw-content-text,
#contentSub,
#siteSub,
#bodyContent {
  background: none !important;
}
 
.mw-body,
#mw-content-text {
  color: #000000;
}
 
/* === LOGO AREA FIX (Transparency Support) === */
 
/* Outer logo container keeps blue background */
#p-logo {
#p-logo {
   background: none !important;         /* allow transparency */
   background-color: #405b74 !important; /* matches sidebar background */
   border: none !important;
   border: none !important;
  position: relative;
  overflow: visible;
}
}


/* Logo link itself shows the actual logo image */
#p-logo a {
#p-logo a {
   display: block;
   display: block;
   background: none !important;         /* transparent logo area */
   background: transparent !important; /* fully transparent for logo visibility */
   border: none !important;
   background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: contain !important;
  width: 100%;
  height: 100%;
}
}


/* If the logo is still hidden, force the image to display */
/* Remove any default overlays or shadows that might block the logo */
#p-logo a img {
#p-logo a img,
   display: block !important;
#p-logo img {
  opacity: 1 !important;
   display: block;
   background: none !important;
   background: none !important;
   border: none !important;
   border: none !important;
   width: 100% !important;
   width: 100%;
   height: auto !important;
   height: auto;
  opacity: 1 !important;
}
}


/* === MAIN CONTENT AREA === */
/* === TOP NAVIGATION BAR THEMING === */
#content {
  background: #cccccc !important;      /* keeps your content boxes visible */
  color: #000000 !important;
  border: 2px solid #ffffff !important;
  padding: 10px;
}


/* === TOP NAVIGATION BAR (orange) === */
/* Top navigation bar (personal tools, tabs) */
 
#mw-head,
/* Tabs (Article, Discussion, Edit, etc.) */
#p-personal,
#p-cactions {
#p-views,
   background-color: #f68825 !important;
#right-navigation,
  border-bottom: 2px solid #ffffff !important;
#left-navigation {
}
   background-color: #405b74 !important;
 
   background-image: none !important;
/* Personal toolbar (Log in, Preferences, etc.) */
   border: none !important;
#p-personal {
   background-color: #f68825 !important;
   border-bottom: 2px solid #ffffff !important;
}
}


/* Text inside navigation bar */
/* Navigation bar text */
#p-cactions a,
#p-personal a,
#p-personal a {
#p-views a,
 
#right-navigation a,
#left-navigation a {
   color: #ffffff !important;
   color: #ffffff !important;
   font-weight: bold;
   font-weight: bold;
}
}


#p-cactions a:hover,
/* Hover and active states (orange accent) */
#p-personal a:hover {
#p-personal a:hover,
   color: #405b74 !important; /* blue hover to match theme */
#p-views a:hover,
#right-navigation a:hover,
#left-navigation a:hover,
#p-personal li.active a,
#p-views li.selected a {
   color: #f68825 !important;
   text-decoration: underline;
   text-decoration: underline;
}
}


/* === FOOTER STYLING === */
/* Remove white separator line if present */
#footer {
#mw-head-base {
  background-color: #405b74 !important;
   border-bottom: none !important;
  color: #ffffff !important;
   border-top: 2px solid #ffffff !important;
}
}

Revision as of 04:43, 13 November 2025

/* CSS placed here will be applied to all skins */
/* Apply styles to the main content area of all special pages */

.ns--1 #content {
    font-size: 16px; /* Adjust font size */
    font-family: Arial, sans-serif; /* Adjust font type */
    color: #FFD700; /* Adjust font color */
    font-style: normal; /* Adjust font style */
    background-color: #c4c4c4; /* Adjust background color */
}

/* Exclude Content Header box */
.ns--1 #content .content-header {
    color: inherit; /* Keep default font color for content header */
    background-color: inherit; /* Keep default background color for content header */
}

/* Ensure links in the main content area of special pages follow the same styling */
.ns--1 #content > :not(.content-header) a {
    font-size: 16px; /* Adjust font size for links */
    font-family: Arial, sans-serif; /* Adjust font type for links */
    color: #FFD700 !important; /* Adjust font color for links */
    font-style: normal; /* Adjust font style for links */
    text-decoration: none; /* Remove underline from links */
}

/* Ensure visited links in the main content area of special pages follow the same styling */
.ns--1 #content > :not(.content-header) a:visited {
    color: #FFD700 !important; /* Adjust font color for visited links */
}

/* Ensure links in the main content area of special pages follow the same styling on hover */
.ns--1 #content > :not(.content-header) a:hover {
    color: #8e2631 !important; /* Adjust font color for links on hover */
    text-decoration: underline; /* Underline links on hover */
}

/* Apply the same style for URL text or any external links */
.ns--1 #content > :not(.content-header) a.external {
    font-size: 16px; /* Adjust font size for external links */
    font-family: Arial, sans-serif; /* Adjust font type for external links */
    color: #8e2631 !important; /* Adjust font color for external links */
    font-style: normal; /* Adjust font style for external links */
    text-decoration: none; /* Remove underline from external links */
}

/* Ensure external links in the main content area follow the same styling on hover */
.ns--1 #content > :not(.content-header) a.external:hover {
    color: #8e2631 !important; /* Adjust font color for external links on hover */
    text-decoration: underline; /* Underline external links on hover */
}

/* Style headers in the main content area of special pages */
.ns--1 #content > :not(.content-header) h1,
.ns--1 #content > :not(.content-header) h2,
.ns--1 #content > :not(.content-header) h3,
.ns--1 #content > :not(.content-header) h4,
.ns--1 #content > :not(.content-header) h5,
.ns--1 #content > :not(.content-header) h6 {
    font-size: 24px; /* Adjust font size for headers */
    font-family: Arial, sans-serif; /* Adjust font type for headers */
    color: #8e2631; /* Adjust font color for headers */
    font-style: normal; /* Adjust font style for headers */
}

/* Style headers in the main content area of special pages on hover */
.ns--1 #content > :not(.content-header) h1:hover,
.ns--1 #content > :not(.content-header) h2:hover,
.ns--1 #content > :not(.content-header) h3:hover,
.ns--1 #content > :not(.content-header) h4:hover,
.ns--1 #content > :not(.content-header) h5:hover,
.ns--1 #content > :not(.content-header) h6:hover {
    color: #8e2631; /* Adjust font color for headers on hover */
}







/* === GLOBAL PAGE BACKGROUND === */
html, body {
  background-color: #405b74 !important;
  background-image: none !important;
}

/* Core layout backgrounds */
#mw-page-base,
#mw-head-base,
#mw-head,
#mw-panel,
#mw-sidebar,
#content,
#footer,
#mw-footer,
#mw-data-after-content {
  background-color: #405b74 !important;
  background-image: none !important;
  border: none !important;
}

/* === SIDEBAR STYLING === */
#mw-panel,
#mw-panel h3,
#mw-panel a {
  color: #ffffff !important;
  background: none !important;
}

#mw-panel a:hover {
  color: #f68825 !important;
  text-decoration: underline;
}

/* === MAIN CONTENT AREA === */
#mw-content-text,
#contentSub,
#siteSub,
#bodyContent {
  background: none !important;
}

.mw-body,
#mw-content-text {
  color: #000000;
}

/* === LOGO AREA FIX (Transparency Support) === */

/* Outer logo container keeps blue background */
#p-logo {
  background-color: #405b74 !important; /* matches sidebar background */
  border: none !important;
  position: relative;
  overflow: visible;
}

/* Logo link itself shows the actual logo image */
#p-logo a {
  display: block;
  background: transparent !important;  /* fully transparent for logo visibility */
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: contain !important;
  width: 100%;
  height: 100%;
}

/* Remove any default overlays or shadows that might block the logo */
#p-logo a img,
#p-logo img {
  display: block;
  background: none !important;
  border: none !important;
  width: 100%;
  height: auto;
  opacity: 1 !important;
}

/* === TOP NAVIGATION BAR THEMING === */

/* Top navigation bar (personal tools, tabs) */
#mw-head,
#p-personal,
#p-views,
#right-navigation,
#left-navigation {
  background-color: #405b74 !important;
  background-image: none !important;
  border: none !important;
}

/* Navigation bar text */
#p-personal a,
#p-views a,
#right-navigation a,
#left-navigation a {
  color: #ffffff !important;
  font-weight: bold;
}

/* Hover and active states (orange accent) */
#p-personal a:hover,
#p-views a:hover,
#right-navigation a:hover,
#left-navigation a:hover,
#p-personal li.active a,
#p-views li.selected a {
  color: #f68825 !important;
  text-decoration: underline;
}

/* Remove white separator line if present */
#mw-head-base {
  border-bottom: none !important;
}