BorderConnect Wiki

MediaWiki:Common.css: Difference between revisions

← Older edit
No edit summary
No edit summary
 
(17 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,143: Line 2,190:


/* ============================================================
/* ============================================================
   --- MODERN HEADER SEARCH BAR (FINAL "HAS-VALUE" FIX) ---
   --- YOUTUBE-STYLE CONNECTED SEARCH BAR (FIXED) ---
   ============================================================ */
   ============================================================ */


/* 1. Reset the OUTER Wrappers */
/* 1. RESET THE CONTAINER (Fixes the white box glitch) */
html body .vector-header .cdx-search-input,
html body .vector-header .cdx-search-input {
html body .vector-header .cdx-text-input {
    display: flex !important;
     background-color: transparent !important;
    align-items: center !important;
     border: none !important;
    gap: 0 !important; /* Connects the two halves */
     background-color: transparent !important; /* REMOVES THE WHITE BOX */
     border: none !important; /* Removes default border */
     box-shadow: none !important;
     box-shadow: none !important;
    padding: 0 !important; /* Reset any padding */
}
}


/* 2. Style the ACTUAL Input Field (The Pill) */
/* 2. THE INPUT FIELD (Left Half) */
html body .vector-header .cdx-text-input__input {
html body .vector-header .cdx-text-input__input {
     background-color: rgba(255, 255, 255, 0.15) !important;
    /* Shape: Round Left, Flat Right */
     border: 1px solid rgba(255, 255, 255, 0.4) !important;
    border-radius: 40px 0 0 40px !important;
   
    /* Border: Remove right border */
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    border-right: none !important;
   
    /* Colors: Dark translucent background */
     background-color: rgba(0, 0, 0, 0.2) !important;
    color: white !important;
   
    /* Size & Layout */
    margin: 0 !important;
    height: 38px !important; /* Fixed height */
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.1) !important;
    width: 100% !important;
}
 
/* 3. THE SEARCH BUTTON (Right Half) */
html body .vector-header .cdx-search-input__end-button {
    /* Shape: Flat Left, Round Right */
    border-radius: 0 40px 40px 0 !important;
   
    /* Border: Matches the input */
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
     border-left: none !important;
   
    /* Colors: Lighter background so you can see it */
    background-color: rgba(255, 255, 255, 0.15) !important;  
     color: white !important;
     color: white !important;
     border-radius: 50px !important;
      
     padding: 8px 15px 8px 38px !important;
    /* Size & Layout */
     min-height: 36px !important;
    margin: 0 !important;
    height: 38px !important; /* Must match input height */
    width: 50px !important;
     padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
   
    /* Fixes the "invisible" button issue */
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 2 !important;
}
 
/* 4. HOVER & FOCUS STATES */
html body .vector-header .cdx-search-input__end-button:hover {
    background-color: rgba(255, 255, 255, 0.3) !important;
    cursor: pointer !important;
}
 
html body .vector-header .cdx-text-input__input:focus {
    background-color: rgba(0, 0, 0, 0.5) !important; /* Darker when typing */
     border-color: rgba(255, 255, 255, 0.8) !important;
     box-shadow: none !important;
     box-shadow: none !important;
    transition: all 0.2s ease !important;
}
}


/* 3. Placeholder Text */
/* 5. FORCE ICON COLOR (Just in case) */
html body .vector-header .cdx-text-input__input::placeholder {
html body .vector-header .cdx-search-input__end-button .vector-icon {
     color: rgba(255, 255, 255, 0.75) !important;
     color: white !important;
    fill: white !important;
     opacity: 1 !important;
     opacity: 1 !important;
}
}


/* 4. FOCUS STATE (Turn White Background) */
/* ============================================================
html body .vector-header .cdx-text-input__input:focus {
  --- SEARCH BAR POLISH (ICON & CONTRAST) ---
     background-color: #ffffff !important;
  ============================================================ */
    color: #2c3e50 !important;
 
    border-color: #ffffff !important;
/* 1. Hide the text "Search" but keep the button clickable */
     box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.2) !important;
html body .vector-header .cdx-search-input__end-button {
     color: transparent !important; /* Hides the text */
     position: relative !important;
}
}


html body .vector-header .cdx-text-input__input:focus::placeholder {
/* 2. Inject the Magnifying Glass Icon (FontAwesome) */
     color: #95a5a6 !important;
html body .vector-header .cdx-search-input__end-button::after {
    content: "\f002"; /* FontAwesome 'Search' Unicode */
    font-family: "Font Awesome 5 Free", "FontAwesome" !important;
    font-weight: 900 !important;
    font-size: 16px !important;
     color: white !important; /* Icon Color */
   
    /* Center the icon perfectly */
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    opacity: 0.9 !important;
}
}


/* ============================================================
/* ============================================================
   --- SEARCH ICON COLOR FIX (TARGETING "HAS-VALUE") ---
   --- BRIGHTER SEARCH PLACEHOLDER TEXT ---
   ============================================================ */
   ============================================================ */
/* Target the placeholder text and force it to be brighter */
html body .vector-header .cdx-text-input__input::placeholder {
    color: rgba(255, 255, 255, 0.85) !important; /* Increased opacity for brightness */
    opacity: 1 !important; /* Ensure browser doesn't dim it automatically */
}
/* Optional: Even brighter on focus/click */
html body .vector-header .cdx-text-input__input:focus::placeholder {
    color: rgba(255, 255, 255, 0.6) !important; /* Dim slightly when typing starts */
}


/* ============================================================
/* ============================================================
   --- SEARCH ICON FIX (DIRECT SVG TARGETING) ---
   --- REMOVE LEFT SEARCH ICON & FIX PADDING ---
   ============================================================ */
   ============================================================ */


/* 7. The Search BUTTON (Right side) */
/* 1. Hide the Start Icon (The one on the left) */
html body .vector-header .cdx-search-input__end-button {
html body .vector-header .cdx-text-input__icon,
    background-color: rgba(255, 255, 255, 0.2) !important;
html body .vector-header .cdx-search-input__start-icon,
    color: white !important;
html body .vector-header .cdx-text-input__icon-vue {
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
     display: none !important;
    border-radius: 50px !important;
    margin-left: 8px !important;
    padding: 0 20px !important;
    min-height: 36px !important;
     font-weight: 600 !important;
}
}


html body .vector-header .cdx-search-input__end-button:hover {
/* 2. Adjust Input Padding (So text starts at the edge) */
     background-color: #ffffff !important;
/* We reduce padding-left from ~38px to 20px since the icon is gone */
    color: #266065 !important;
html body .vector-header .cdx-text-input__input {
    transform: translateY(-1px) !important;
     padding-left: 20px !important;
}
}


/* ============================================================
/* ============================================================
   --- 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,230: 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,339: Line 2,465:


/* ============================================================
/* ============================================================
   --- TOC SPECIFIC SCROLL FIX (PUSHED DOWN FURTHER) ---
   --- TOC SPECIFIC SCROLL FIX (MAX WIDTH / NO CUTOFF) ---
   ============================================================ */
   ============================================================ */


Line 2,348: Line 2,474:
     transition: all 0.3s ease !important;
     transition: all 0.3s ease !important;
     top: 75px !important;  
     top: 75px !important;  
   
    /* WIDTH FIX: Fill the sidebar column completely, but don't overflow */
    width: 100% !important;
    min-width: unset !important; /* Remove the forced 300px */
    box-sizing: border-box !important; /* Ensures padding doesn't make it wider than 100% */
}
}


/* 2. THE PUSH DOWN (On Scroll) - INCREASED VALUES */
/* 2. THE PUSH DOWN (On Scroll) */
html body.bc-scrolled #vector-toc-pinned-container,
html body.bc-scrolled #vector-toc-pinned-container,
html body.bc-scrolled #mw-panel-toc,
html body.bc-scrolled #mw-panel-toc,
html body.bc-scrolled .vector-toc {
html body.bc-scrolled .vector-toc {
     /* Increased from 120px to 140px */
     /* Push down values */
     top: 140px !important;  
     top: 140px !important;  
   
    /* Increased padding buffer */
     padding-top: 30px !important;
     padding-top: 30px !important;
      
      
     /* Adjust height to prevent cutoff at bottom */
     /* Adjust height */
     max-height: calc(100vh - 160px) !important;
     max-height: calc(100vh - 160px) !important;
     overflow-y: auto !important;
   
    /* SCROLLBAR MANAGEMENT */
     overflow-y: auto !important; 
    overflow-x: hidden !important; /* Prevents horizontal scrollbar */
}
 
/* ============================================================
  --- DARK MODE TOC FIX (VARIABLE OVERRIDE) ---
  ============================================================ */
 
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-label,
html.skin-theme-clientpref-night .vector-pinnable-header-label {
    color: #4db6ac !important; /* Bright Teal */
    border-bottom-color: #444 !important;
}
 
/* 4. The Individual Links (Force them white) */
html.skin-theme-clientpref-night .vector-toc-link,
html.skin-theme-clientpref-night .vector-toc-text,
html.skin-theme-clientpref-night .vector-toc .vector-toc-list-item a {
    color: #e0e0e0 !important;
    opacity: 1 !important;
}
 
/* 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 .vector-toc-list-item a:hover {
    color: #4db6ac !important;
    text-decoration: none !important;
}
 
/* 6. Active/Selected State (Bright White + Teal Border) */
html.skin-theme-clientpref-night .vector-toc-list-item-active > .vector-toc-link .vector-toc-text {
    color: #ffffff !important;
    font-weight: bold !important;
}
}
Retrieved from "https://wiki.borderconnect.com/index.php?title=MediaWiki:Common.css"