User:Editingthingsforlife/common.css

Revision as of 11:06, 15 May 2025 by Editingthingsforlife (talk | contribs) (Created page with "~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~: ~~~~~~ GLOBAL STYLES ~~~~~~~~: ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~: body { background-color: #1e2228; Dark background for the page: color: #c9d1d9; Light grey text: font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; } a { color: #6cb6ff; Brighter blue for links: } a:hover { color: #...")
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

Note: After publishing, you may have to bypass your browser's cache to see the changes.

  • Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
  • Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
  • Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
/* 11:06, 15 May 2025 (UTC)11:06, 15 May 2025 (UTC)11:06, 15 May 2025 (UTC)11:06, 15 May 2025 (UTC)11:06, 15 May 2025 (UTC)11:06, 15 May 2025 (UTC)~ */
/* 11:06, 15 May 2025 (UTC)~ GLOBAL STYLES 11:06, 15 May 2025 (UTC)[[User:Editingthingsforlife|Editingthingsforlife]] ([[User talk:Editingthingsforlife|talk]]) */
/* 11:06, 15 May 2025 (UTC)11:06, 15 May 2025 (UTC)11:06, 15 May 2025 (UTC)11:06, 15 May 2025 (UTC)11:06, 15 May 2025 (UTC)11:06, 15 May 2025 (UTC)~ */
body {
    background-color: #1e2228; /* Dark background for the page */
    color: #c9d1d9;            /* Light grey text */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
}

a {
    color: #6cb6ff; /* Brighter blue for links */
}
a:hover {
    color: #8ec9ff;
    text-decoration: underline;
}

h1, h2, h3, h4, h5, h6 {
    color: #e6edf3; /* Lighter text for headings */
    border-bottom-color: #30363d;
}

hr {
    border-color: #30363d;
}

/* 11:06, 15 May 2025 (UTC)11:06, 15 May 2025 (UTC)11:06, 15 May 2025 (UTC)11:06, 15 May 2025 (UTC)11:06, 15 May 2025 (UTC)11:06, 15 May 2025 (UTC)~ */
/* 11:06, 15 May 2025 (UTC)~ HEADER (#mw-header) [[User:Editingthingsforlife|Editingthingsforlife]] ([[User talk:Editingthingsforlife|talk]]) 11:06, 15 May 2025 (UTC) */
/* 11:06, 15 May 2025 (UTC)11:06, 15 May 2025 (UTC)11:06, 15 May 2025 (UTC)11:06, 15 May 2025 (UTC)11:06, 15 May 2025 (UTC)11:06, 15 May 2025 (UTC)~ */
#mw-header-container {
    background-color: #2c313a; /* Header background */
    border-bottom: 1px solid #444c56;
}

/* Site name/logo text in header (if you choose to display it there) */
/* The image shows "PRESSURE" in the header, let's assume it's the site name */
#p-logo-text a, /* Timeless specific for text logo */
#mw-header #p-logo a { /* More general if logo is image */
    color: #e6edf3 !important;
    font-weight: bold;
    font-size: 1.5em;
    /* If you want to hide the default logo/text in header to only have it in sidebar:
    display: none !important;
    */
}


/* Search Bar */
#p-search #searchInput {
    background-color: #22272e;
    border: 1px solid #444c56;
    color: #c9d1d9;
    border-radius: 6px;
}
#p-search #searchInput::placeholder {
    color: #8b949e;
}
#p-search .search-toggle,
#p-search .searchButton { /* For older versions */
    /* Style search icon if needed */
}


/* Personal/User Tools (Anonymous, Login, etc.) */
#p-personal ul li a {
    color: #c9d1d9;
}
#p-personal ul li a:hover {
    color: #6cb6ff;
    background-color: #383e47;
}
#p-personal .mw-list-item.selected a { /* Active item */
    background-color: #383e47;
}


/* 11:06, 15 May 2025 (UTC)11:06, 15 May 2025 (UTC)11:06, 15 May 2025 (UTC)11:06, 15 May 2025 (UTC)11:06, 15 May 2025 (UTC)11:06, 15 May 2025 (UTC)~ */
/* 11:06, 15 May 2025 (UTC)~ SIDEBAR (#mw-sidebar) ~~ */
/* 11:06, 15 May 2025 (UTC)11:06, 15 May 2025 (UTC)11:06, 15 May 2025 (UTC)11:06, 15 May 2025 (UTC)11:06, 15 May 2025 (UTC)11:06, 15 May 2025 (UTC)~ */
#mw-sidebar {
    background-color: #2c313a; /* Sidebar background */
    border-right: 1px solid #444c56;
}

/* Sidebar Logo (the prominent circular one) */
#p-logo {
    padding: 20px 15px;
    text-align: center;
}
#p-logo a {
    display: block;
    width: 120px; /* Adjust to your logo's width */
    height: 120px; /* Adjust to your logo's height */
    margin: 0 auto;
    background-image: url(/wiki/Special:Redirect/file/Site-logo.png); /* Adjust path if needed */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    text-indent: -9999px; /* Hide text if any */
}

/* Sidebar Navigation Sections (Portals) */
#mw-sidebar .vector-menu-heading, /* Timeless uses vector-menu classes */
#mw-sidebar .portal h3 { /* Fallback for older/custom structures */
    color: #e6edf3;
    font-weight: bold;
    padding: 10px 15px;
    margin: 0;
    border-top: 1px solid #444c56;
    border-bottom: 1px solid #444c56;
    font-size: 0.95em;
    text-transform: uppercase;
}
#mw-sidebar .vector-menu-portal:first-of-type .vector-menu-heading,
#mw-sidebar .portal:first-of-type h3 {
    border-top: none; /* No top border for the very first section */
}

#mw-sidebar .vector-menu-content ul,
#mw-sidebar .portal .body ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

#mw-sidebar .vector-menu-content ul li a,
#mw-sidebar .portal .body ul li a {
    color: #a2b0bd; /* Slightly muted link color for sidebar */
    display: block;
    padding: 8px 15px 8px 25px; /* Indent links a bit */
    text-decoration: none;
    font-size: 0.9em;
}

#mw-sidebar .vector-menu-content ul li a:hover,
#mw-sidebar .portal .body ul li a:hover {
    background-color: #383e47;
    color: #e6edf3;
}

#mw-sidebar .vector-menu-content ul li.selected a { /* Active page in sidebar */
    background-color: #1e2228; /* Darker for active */
    color: #e6edf3;
    font-weight: bold;
}


/* 11:06, 15 May 2025 (UTC)11:06, 15 May 2025 (UTC)11:06, 15 May 2025 (UTC)11:06, 15 May 2025 (UTC)11:06, 15 May 2025 (UTC)11:06, 15 May 2025 (UTC)~ */
/* 11:06, 15 May 2025 (UTC)~ CONTENT AREA 11:06, 15 May 2025 (UTC)11:06, 15 May 2025 (UTC)~ */
/* 11:06, 15 May 2025 (UTC)11:06, 15 May 2025 (UTC)11:06, 15 May 2025 (UTC)11:06, 15 May 2025 (UTC)11:06, 15 May 2025 (UTC)11:06, 15 May 2025 (UTC)~ */
#mw-content-container {
    /* No specific background, inherits from body */
}

#content {
    background-color: #22272e; /* Content area background */
    border: 1px solid #444c56;
    padding: 25px;
    margin: 15px; /* Spacing from edges */
    border-radius: 6px;
}

/* Page Title */
#firstHeading {
    color: #e6edf3;
    border-bottom: 1px solid #444c56;
    padding-bottom: 0.5em;
    margin-bottom: 0.7em;
    font-size: 2.2em;
}
/* Hide title on main page if banner text serves as title */
.page-Main_Page #firstHeading {
    display: none;
}


/* Tabs (View, Discussion, Edit, History, etc.) */
#p-views ul {
    border-bottom-color: #444c56; /* Line under tabs */
}
#p-views ul li a {
    color: #c9d1d9;
    background-color: transparent;
    border-radius: 6px 6px 0 0; /* Rounded top corners */
    border-bottom: none !important; /* Remove default bottom border */
    padding: 0.5em 1em;
}
#p-views ul li.selected a,
#p-views ul li a:hover {
    color: #e6edf3;
    background-color: #383e47; /* Background for active/hover tab */
    border: 1px solid #444c56;
    border-bottom: 1px solid #383e47 !important; /* Make bottom blend with background */
}
#p-views ul li.selected a {
    font-weight: bold;
}

/* Action links above title (View source, History, Purge) */
#p-cactions ul li a { /* Timeless specific for content actions */
    color: #a2b0bd;
}
#p-cactions ul li a:hover {
    color: #6cb6ff;
}


/* 11:06, 15 May 2025 (UTC)11:06, 15 May 2025 (UTC)11:06, 15 May 2025 (UTC)11:06, 15 May 2025 (UTC)11:06, 15 May 2025 (UTC)11:06, 15 May 2025 (UTC)~ */
/* 11:06, 15 May 2025 (UTC)~ FOOTER 11:06, 15 May 2025 (UTC)11:06, 15 May 2025 (UTC)11:06, 15 May 2025 (UTC)~~ */
/* 11:06, 15 May 2025 (UTC)11:06, 15 May 2025 (UTC)11:06, 15 May 2025 (UTC)11:06, 15 May 2025 (UTC)11:06, 15 May 2025 (UTC)11:06, 15 May 2025 (UTC)~ */
#footer {
    background-color: #2c313a;
    border-top: 1px solid #444c56;
    color: #8b949e;
    padding: 20px;
    margin-top: 15px;
}
#footer ul li {
    color: #8b949e;
}
#footer ul li a {
    color: #6cb6ff;
}

/* 11:06, 15 May 2025 (UTC)11:06, 15 May 2025 (UTC)11:06, 15 May 2025 (UTC)11:06, 15 May 2025 (UTC)11:06, 15 May 2025 (UTC)11:06, 15 May 2025 (UTC)~ */
/* 11:06, 15 May 2025 (UTC)~ MAIN PAGE BANNER 11:06, 15 May 2025 (UTC)~~ */
/* 11:06, 15 May 2025 (UTC)11:06, 15 May 2025 (UTC)11:06, 15 May 2025 (UTC)11:06, 15 May 2025 (UTC)11:06, 15 May 2025 (UTC)11:06, 15 May 2025 (UTC)~ */
/* This section applies ONLY to the Main Page. */
/* Add the class "page-Main_Page" to the body tag via JS or ensure your skin does. */
/* If not, you might need to put this HTML structure directly on your Main Page wiki code. */

.page-Main_Page #mainpage-banner-container {
    background-image: url(/wiki/Special:Redirect/file/Mainpage-banner-bg.jpg); /* ADJUST PATH! */
    background-size: cover;
    background-position: center center;
    height: 350px; /* Adjust height as needed */
    display: flex;
    align-items: center; /* Vertically center content */
    justify-content: flex-start; /* Align content to the left */
    padding: 0 50px; /* Padding left/right */
    margin: -25px -25px 25px -25px; /* Overcome #content padding and add bottom margin */
    position: relative; /* For potential overlays or absolute positioning */
    border-radius: 6px 6px 0 0; /* Match content box top corners */
}

/* CSS Text version of "P RESSURE WIKI" - This is complex! */
/* Using an image for this text is highly recommended. */
.page-Main_Page #mainpage-banner-text {
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; /* Chunky font */
    color: white;
    text-shadow: 2px 2px 5px rgba(0,0,0,0.6);
    line-height: 1;
}

.page-Main_Page .banner-char-p {
    font-size: 180px; /* Large P */
    display: block;
    line-height: 0.65; /* Adjust to pull RESSURE up */
    position: relative; /* For the white line */
    margin-bottom: -20px; /* Fine-tuning */
}

/* The white line */
.page-Main_Page .banner-char-p::after {
    content: '';
    display: block;
    background-color: white;
    height: 20px; /* Thickness of the bar */
    width: 280px; /* Length of the bar, adjust */
    position: absolute;
    left: calc(100% - 45px);  /* Position it after the 'P'. Adjust the 45px based on P's width */
    top: 55%; /* Vertical position, adjust this carefully */
    transform: translateY(-50%);
    box-shadow: 1px 1px 3px rgba(0,0,0,0.5);
}

.page-Main_Page .banner-word-ressure {
    font-size: 80px;
    display: block;
    margin-left: 110px; /* Adjust to align with the bar start, depends on P size */
    letter-spacing: -1px;
}

.page-Main_Page .banner-word-wiki {
    font-size: 45px;
    display: block;
    font-weight: normal; /* Less bold than RESSURE */
    margin-left: 110px; /* Align with RESSURE */
    margin-top: 5px;
}


/* Welcome message and stats below banner */
.page-Main_Page #mainpage-welcome-section {
    text-align: center;
    margin-bottom: 30px;
    padding: 10px;
    background-color: #2c313a; /* Slightly different background for this section */
    border: 1px solid #444c56;
    border-radius: 6px;
}
.page-Main_Page #mainpage-welcome-section h2 {
    font-size: 1.8em;
    color: #e6edf3;
    border-bottom: none;
    margin-top: 0.5em;
    margin-bottom: 0.3em;
}
.page-Main_Page .site-stats {
    color: #a2b0bd;
    font-size: 0.95em;
}

/* General content styling within main page content area */
.page-Main_Page #content p {
    line-height: 1.6;
}