BorderConnect Wiki

MediaWiki:Common.css: Difference between revisions

← Older edit
No edit summary
No edit summary
 
(4 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. 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;
}
}


/* 2. Style the "Searching for..." or "Results for..." header */
/* 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,486: Line 2,540:
     color: #ffffff !important;
     color: #ffffff !important;
     font-weight: bold !important;
     font-weight: bold !important;
}
/* --- FIX SEARCH DROPDOWN READABILITY IN DARK MODE (ALL RESOLUTIONS) --- */
/* 1. Main text: Target desktop, tablet, and mobile search overlays */
html.skin-theme-clientpref-night .cdx-typeahead-search__menu .cdx-search-result-title,
html.skin-theme-clientpref-night .cdx-typeahead-search__menu .cdx-menu-item__text,
html.skin-theme-clientpref-night .vector-search-box-vue .cdx-menu-item__text,
html.skin-theme-clientpref-night .cdx-search-result-title {
    color: #f8f9fa !important; /* Off-white for high readability */
}
/* 2. Descriptions: If you have subtext under the titles, make it a lighter gray */
html.skin-theme-clientpref-night .cdx-typeahead-search__menu .cdx-menu-item__text__description,
html.skin-theme-clientpref-night .cdx-search-result__description {
    color: #c8ccd1 !important;
}
/* 3. Matched text: The bolded letters the user typed */
html.skin-theme-clientpref-night .cdx-typeahead-search__menu .cdx-search-result-title b,
html.skin-theme-clientpref-night .cdx-typeahead-search__menu .cdx-search-result-title strong,
html.skin-theme-clientpref-night .cdx-search-result-title b {
    color: #ffffff !important; /* Pure white */
    font-weight: bold !important;
}
/* 4. Bottom link: "Search for pages containing..." */
html.skin-theme-clientpref-night .cdx-typeahead-search__menu .cdx-menu-item--search-page,
html.skin-theme-clientpref-night .cdx-typeahead-search__menu .cdx-menu-item--search-page * {
    color: #8ab4f8 !important; /* Readable modern blue */
}
/* 5. Mobile Background & Hover Fix: Ensure the overlay itself stays dark */
html.skin-theme-clientpref-night .cdx-typeahead-search__menu,
html.skin-theme-clientpref-night .vector-search-box-vue .cdx-menu {
    background-color: #202122 !important; /* Force dark background on mobile */
}
html.skin-theme-clientpref-night .cdx-menu-item:hover,
html.skin-theme-clientpref-night .cdx-menu-item.cdx-menu-item--selected,
html.skin-theme-clientpref-night .cdx-typeahead-search__menu .cdx-menu-item:active {
    background-color: #3c4043 !important; /* Highlight color */
}
}
Retrieved from "https://wiki.borderconnect.com/index.php?title=MediaWiki:Common.css"