BorderConnect Wiki

MediaWiki:Common.css: Difference between revisions

← Older edit
No edit summary
No edit summary
 
(9 intermediate revisions by the same user not shown)
Line 1,851: Line 1,851:
     font-size: 16px; /* slightly larger base font */
     font-size: 16px; /* slightly larger base font */
}
}
/* ============================================================
  --- WIKITABLE (BORDERLESS & ZEBRA STRIPED) ---
  ============================================================ */
/* 1. Main Table Container */
.wikitable {
.wikitable {
     width: 100%;
     width: 100%;
     border: none;
     border: none !important; /* Kills outer border */
     box-shadow: 0 2px 8px rgba(0,0,0,0.05); /* Soft shadow instead of heavy borders */
     box-shadow: 0 2px 8px rgba(0,0,0,0.05); /* Keeps the soft shadow */
     border-radius: 8px;
     border-radius: 8px;
     overflow: hidden;
     overflow: hidden;
    border-collapse: separate !important; /* Required for rounded corners */
    border-spacing: 0;
    margin: 1em 0; /* Breathing room around the table */
}
}
/* 2. Header Cells */
.wikitable th {
.wikitable th {
     background-color: var(--bc-blue); /* Use your brand teal */
     background-color: var(--bc-blue) !important; /* Brand Teal */
     color: white;
     color: white !important;
     text-transform: uppercase;
     text-transform: uppercase;
     font-size: 0.85rem;
     font-size: 0.85rem;
    padding: 14px 16px !important;
    border: none !important; /* Kills header borders */
    text-align: left;
}
/* 3. Standard Data Cells (Odd Rows / Default) */
.wikitable td {
    background-color: #ffffff !important; /* Clean white background */
    border: none !important; /* Kills inner cell borders */
    padding: 12px 16px !important; /* Comfortable spacing */
    color: var(--bc-text);
}
/* 4. Zebra Striping (Even Rows) */
.wikitable tr:nth-child(even) td {
    background-color: var(--bc-bg-page) !important; /* Uses your theme's light grey/teal background */
}
/* ============================================================
  --- WIKITABLE DARK MODE OVERRIDES ---
  ============================================================ */
/* 1. Dark Mode Headers */
html.skin-theme-clientpref-night .wikitable th {
    background-color: #263238 !important; /* Dark Slate */
    color: #80cbc4 !important; /* Bright Teal Text */
}
/* 2. Dark Mode Data Cells (Odd Rows) */
html.skin-theme-clientpref-night .wikitable td {
    background-color: #1e1e1e !important; /* Dark Card Background */
    color: #e0e0e0 !important; /* Off-white text */
}
/* 3. Dark Mode Zebra Striping (Even Rows) */
html.skin-theme-clientpref-night .wikitable tr:nth-child(even) td {
    background-color: #2a2b2e !important; /* Slightly lighter charcoal for contrast */
}
}


Line 2,283: Line 2,330:


/* ============================================================
/* ============================================================
   --- FIX SEARCH RESULT DROPDOWN TEXT (MAKE VISIBLE) ---
   --- SEARCH RESULT DROPDOWN TEXT (LIGHT & DARK MODE FIX) ---
   ============================================================ */
   ============================================================ */


/* 1. Force the title/text of the search results to be dark */
/* 1. LIGHT MODE TEXT */
html body .cdx-menu-item__content,
html:not(.skin-theme-clientpref-night) body .cdx-menu-item__content,
html body .cdx-menu-item__text,
html:not(.skin-theme-clientpref-night) body .cdx-menu-item__text,
html body .cdx-typeahead-search-menu__item-title,
html:not(.skin-theme-clientpref-night) body .cdx-typeahead-search-menu__item-title,
html body .cdx-menu-item__description {
html:not(.skin-theme-clientpref-night) body .cdx-menu-item__description {
     color: #2c3e50 !important; /* Dark Grey */
     color: #2c3e50 !important; /* Dark Grey */
     filter: none !important;   /* Ensure no white filters are active */
     filter: none !important;  
}
}


/* 2. Style the "Searching for..." or "Results for..." header */
/* 2. DARK MODE TEXT */
html.skin-theme-clientpref-night body .cdx-menu-item__content,
html.skin-theme-clientpref-night body .cdx-menu-item__text,
html.skin-theme-clientpref-night body .cdx-typeahead-search-menu__item-title,
html.skin-theme-clientpref-night body .cdx-menu-item__description,
html.skin-theme-clientpref-night body .cdx-search-result-title {
    color: #f8f9fa !important; /* Off-White */
    filter: none !important;
}
 
/* 3. MATCHED TYPED LETTERS (DARK MODE) */
html.skin-theme-clientpref-night body .cdx-menu-item__content b,
html.skin-theme-clientpref-night body .cdx-menu-item__text b,
html.skin-theme-clientpref-night body .cdx-typeahead-search-menu__item-title b,
html.skin-theme-clientpref-night body .cdx-search-result-title b {
    color: #ffffff !important;
    font-weight: bold !important;
}
 
/* 4. HEADER TEXT ("Searching for...") */
html body .cdx-menu__header {
html body .cdx-menu__header {
     color: #7f8c8d !important;
     color: #7f8c8d !important;
Line 2,302: Line 2,368:
}
}


/* 3. Hover state: Ensure text stays dark when a result is highlighted */
/* 5. HOVER STATES (LIGHT MODE) */
html body .cdx-menu-item--enabled.cdx-menu-item--selected,
html:not(.skin-theme-clientpref-night) body .cdx-menu-item--enabled.cdx-menu-item--selected,
html body .cdx-menu-item--enabled:hover {
html:not(.skin-theme-clientpref-night) body .cdx-menu-item--enabled:hover {
     background-color: #f4f7f9 !important;
     background-color: #f4f7f9 !important;
}
html:not(.skin-theme-clientpref-night) body .cdx-menu-item--enabled.cdx-menu-item--selected .cdx-menu-item__text,
html:not(.skin-theme-clientpref-night) body .cdx-menu-item--enabled:hover .cdx-menu-item__text {
    color: #266065 !important;
}
}


html body .cdx-menu-item--enabled.cdx-menu-item--selected .cdx-menu-item__text,
/* 6. HOVER STATES (DARK MODE) */
html body .cdx-menu-item--enabled:hover .cdx-menu-item__text {
html.skin-theme-clientpref-night body .cdx-menu-item:hover,
     color: #266065 !important; /* Change to your brand teal on hover */
html.skin-theme-clientpref-night body .cdx-menu-item.cdx-menu-item--selected,
html.skin-theme-clientpref-night body .cdx-typeahead-search__menu .cdx-menu-item:active {
     background-color: #3c4043 !important;  
}
}


/* 4. Fix Search Footer (the "Search for pages containing...") */
/* 7. BOTTOM LINK ("Search for pages containing...") */
html body .cdx-typeahead-search-menu__footer {
html:not(.skin-theme-clientpref-night) body .cdx-typeahead-search-menu__footer {
     color: #266065 !important;
     color: #266065 !important;
     border-top: 1px solid #eee !important;
     border-top: 1px solid #eee !important;
}
}
/* Smooth the transition between JS color swaps */
html.skin-theme-clientpref-night body .cdx-menu-item--search-page,
.cdx-text-input__icon, .cdx-search-input__start-icon {
html.skin-theme-clientpref-night body .cdx-menu-item--search-page * {
    transition: filter 0.2s ease, opacity 0.2s ease !important;
     color: #8ab4f8 !important;
}
 
@media screen and (min-width: 1680px) {
    .mw-page-container, .vector-header-container .mw-header, .vector-header-container .vector-sticky-header {
        padding-left: 3.25rem;
        padding-right: 3.25rem;
        margin-top: -1.5rem;
}
 
/* Ensure featured card content uses full width on small screens */
@media screen and (max-width: 900px) {
     .bc-featured-flex {
        flex-direction: column !important;
    }
    .bc-featured-flex .bc-screenshot-frame {
        width: 100% !important;
        flex: none !important;
    }
}
}


Line 2,444: Line 2,498:


/* ============================================================
/* ============================================================
   --- DARK MODE TOC TEXT FIXES ---
   --- DARK MODE TOC FIX (VARIABLE OVERRIDE) ---
   ============================================================ */
   ============================================================ */


/* 1. The "Contents" Header (Currently dark blue, changing to Bright Teal) */
html.skin-theme-clientpref-night .vector-toc {
    /* 1. Force the skin's internal text variables to Light Grey */
    --color-base: #e0e0e0 !important;
    --color-emphasized: #ffffff !important;
    --color-subtle: #b0bec5 !important;
    --color-placeholder: #b0bec5 !important;
   
    /* 2. Force links to be Light Grey */
    color: #e0e0e0 !important;
}
 
/* 3. The "Contents" Header & Toggle */
html.skin-theme-clientpref-night .vector-toc-title,
html.skin-theme-clientpref-night .vector-toc-title,
html.skin-theme-clientpref-night #toctitle h2 {
html.skin-theme-clientpref-night #vector-toc-label,
html.skin-theme-clientpref-night .vector-pinnable-header-label {
     color: #4db6ac !important; /* Bright Teal */
     color: #4db6ac !important; /* Bright Teal */
     border-bottom: 2px solid #444 !important; /* Subtle dark divider */
     border-bottom-color: #444 !important;
}
}


/* 2. The TOC Links (Overview, Search Options, etc.) */
/* 4. The Individual Links (Force them white) */
/* Currently dark blue, changing to Off-White/Light Grey */
html.skin-theme-clientpref-night .vector-toc-link,
html.skin-theme-clientpref-night .vector-toc-link,
html.skin-theme-clientpref-night .vector-toc-text,
html.skin-theme-clientpref-night .vector-toc-text,
html.skin-theme-clientpref-night #toc a {
html.skin-theme-clientpref-night .vector-toc .vector-toc-list-item a {
     color: #e0e0e0 !important;  
     color: #e0e0e0 !important;
    opacity: 1 !important;
}
}


/* 3. Hover State (Bright Teal) */
/* 5. Hover State (Teal) */
html.skin-theme-clientpref-night .vector-toc-link:hover .vector-toc-text,
html.skin-theme-clientpref-night .vector-toc-link:hover,
html.skin-theme-clientpref-night .vector-toc-link:hover,
html.skin-theme-clientpref-night .vector-toc-link:hover .vector-toc-text,
html.skin-theme-clientpref-night .vector-toc .vector-toc-list-item a:hover {
html.skin-theme-clientpref-night #toc a:hover {
     color: #4db6ac !important;
     color: #4db6ac !important;
     text-decoration: none !important;
     text-decoration: none !important;
}
}


/* 4. Fix the "hide/show" toggle button text */
/* 6. Active/Selected State (Bright White + Teal Border) */
html.skin-theme-clientpref-night .vector-toc-toggle {
html.skin-theme-clientpref-night .vector-toc-list-item-active > .vector-toc-link .vector-toc-text {
     color: #b0bec5 !important;
     color: #ffffff !important;
    font-weight: bold !important;
}
}
Retrieved from "https://wiki.borderconnect.com/index.php?title=MediaWiki:Common.css"