BorderConnect Wiki

MediaWiki:Common.css: Difference between revisions

← Older edit
No edit summary
No edit summary
 
(51 intermediate revisions by the same user not shown)
Line 34: Line 34:
     color: white;
     color: white;
     padding: 60px 30px;
     padding: 60px 30px;
    text-align: center;
     border-radius: var(--bc-radius);
     border-radius: var(--bc-radius);
     margin-bottom: 40px;
     margin-bottom: 40px;
Line 41: Line 40:
     box-shadow: 0 10px 25px rgba(38, 96, 101, 0.25);  
     box-shadow: 0 10px 25px rgba(38, 96, 101, 0.25);  
     border-bottom: 6px solid rgba(0,0,0,0.15);
     border-bottom: 6px solid rgba(0,0,0,0.15);
    /* NEW: Centering Logic */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center;
}
}


Line 50: Line 56:
     border: none;
     border: none;
     text-shadow: 0 2px 4px rgba(0,0,0,0.2);
     text-shadow: 0 2px 4px rgba(0,0,0,0.2);
    width: 100%; /* Ensures text has room to center */
}
}


Line 57: Line 64:
     margin-bottom: 30px;
     margin-bottom: 30px;
     font-weight: 400;
     font-weight: 400;
    width: 100%;    /* Keeps paragraphs centered */
    max-width: 800px; /* Prevents text from stretching too wide on huge screens */
}
}


Line 421: Line 430:
   
   
.mw-header {
.mw-header {
     height: 90px;
     height: 110px;
     padding-top: 0 !important;
     padding-top: 0 !important;
     padding-bottom: 0 !important;
     padding-bottom: 0 !important;
Line 1,842: 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,134: Line 2,190:


/* ============================================================
/* ============================================================
   --- MODERN HEADER SEARCH BAR (FIXED WRAPPERS) ---
   --- YOUTUBE-STYLE CONNECTED SEARCH BAR (FIXED) ---
   ============================================================ */
   ============================================================ */


/* 1. Reset the OUTER Wrappers (Remove default white box) */
/* 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; /* Glassy Teal */
     /* 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;
     color: white !important;
     border-radius: 50px !important; /* Force Pill Shape */
      
     padding: 8px 15px 8px 38px !important; /* Room for icon */
    /* Size & Layout */
     min-height: 36px !important;
     margin: 0 !important;
     box-shadow: none !important;
     height: 38px !important; /* Fixed height */
     transition: all 0.2s ease !important;
     box-shadow: inset 0 1px 2px rgba(0,0,0,0.1) !important;
     width: 100% !important;
}
}


/* 3. Placeholder Text */
/* 3. THE SEARCH BUTTON (Right Half) */
html body .vector-header .cdx-text-input__input::placeholder {
html body .vector-header .cdx-search-input__end-button {
     color: rgba(255, 255, 255, 0.75) !important;
    /* 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;
   
    /* Size & Layout */
    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;
     opacity: 1 !important;
    visibility: visible !important;
    z-index: 2 !important;
}
}


/* 4. FOCUS STATE (Turn White) */
/* 4. HOVER & FOCUS STATES */
html body .vector-header .cdx-text-input__input:focus {
html body .vector-header .cdx-search-input__end-button:hover {
     background-color: #ffffff !important;
     background-color: rgba(255, 255, 255, 0.3) !important;
    color: #2c3e50 !important;
    cursor: pointer !important;
    border-color: #ffffff !important;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.2) !important;
}
}


html body .vector-header .cdx-text-input__input:focus::placeholder {
html body .vector-header .cdx-text-input__input:focus {
     color: #95a5a6 !important;
    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;
}
 
/* 5. FORCE ICON COLOR (Just in case) */
html body .vector-header .cdx-search-input__end-button .vector-icon {
     color: white !important;
    fill: white !important;
    opacity: 1 !important;
}
}


/* ============================================================
/* ============================================================
   --- SEARCH ICON COLOR FIX (FORCE WHITE) ---
   --- SEARCH BAR POLISH (ICON & CONTRAST) ---
   ============================================================ */
   ============================================================ */
/* 1. Hide the text "Search" but keep the button clickable */
html body .vector-header .cdx-search-input__end-button {
    color: transparent !important; /* Hides the text */
    position: relative !important;
}
/* 2. Inject the Magnifying Glass Icon (FontAwesome) */
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 (PERMANENT WHITE) ---
   --- BRIGHTER SEARCH PLACEHOLDER TEXT ---
   ============================================================ */
   ============================================================ */


/* 5. The Search ICON (Magnifying Glass) - DEFAULT STATE */
/* Target the placeholder text and force it to be brighter */
/* We target the icon when the input is NOT focused */
html body .vector-header .cdx-text-input__input::placeholder {
html body .vector-header .cdx-search-input:not(:focus-within) .cdx-text-input__icon,
    color: rgba(255, 255, 255, 0.85) !important; /* Increased opacity for brightness */
html body .vector-header .cdx-search-input:not(:focus-within) .cdx-search-input__start-icon {
    opacity: 1 !important; /* Ensure browser doesn't dim it automatically */
     color: #ffffff !important;
}
    fill: #ffffff !important; 
 
    opacity: 1 !important;
/* Optional: Even brighter on focus/click */
    filter: brightness(0) invert(1) !important; /* Force White */
html body .vector-header .cdx-text-input__input:focus::placeholder {
    z-index: 10 !important;
    color: rgba(255, 255, 255, 0.6) !important; /* Dim slightly when typing starts */
}
 
/* ============================================================
  --- REMOVE LEFT SEARCH ICON & FIX PADDING ---
  ============================================================ */
 
/* 1. Hide the Start Icon (The one on the left) */
html body .vector-header .cdx-text-input__icon,
html body .vector-header .cdx-search-input__start-icon,
html body .vector-header .cdx-text-input__icon-vue {
     display: none !important;
}
}


/* 6. Icon Color ON FOCUS (Turn Dark Grey) */
/* 2. Adjust Input Padding (So text starts at the edge) */
/* Only when the user is actually typing or clicking inside */
/* We reduce padding-left from ~38px to 20px since the icon is gone */
html body .vector-header .cdx-search-input:focus-within .cdx-text-input__icon,
html body .vector-header .cdx-text-input__input {
html body .vector-header .cdx-search-input:focus-within .cdx-search-input__start-icon {
     padding-left: 20px !important;
     color: #546e7a !important;
    fill: #546e7a !important;
    filter: none !important;   
    opacity: 1 !important;
}
}


/* 7. The Search BUTTON (Right side) */
/* ============================================================
html body .vector-header .cdx-search-input__end-button {
  --- SEARCH RESULT DROPDOWN TEXT (LIGHT & DARK MODE FIX) ---
    background-color: rgba(255, 255, 255, 0.2) !important;
  ============================================================ */
    color: white !important;
 
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
/* 1. LIGHT MODE TEXT */
    border-radius: 50px !important;
html:not(.skin-theme-clientpref-night) body .cdx-menu-item__content,
    margin-left: 8px !important;
html:not(.skin-theme-clientpref-night) body .cdx-menu-item__text,
     padding: 0 20px !important;
html:not(.skin-theme-clientpref-night) body .cdx-typeahead-search-menu__item-title,
     min-height: 36px !important;
html:not(.skin-theme-clientpref-night) body .cdx-menu-item__description {
    font-weight: 600 !important;
     color: #2c3e50 !important; /* Dark Grey */
     filter: none !important;  
}
}


html body .vector-header .cdx-search-input__end-button:hover {
/* 2. DARK MODE TEXT */
     background-color: #ffffff !important;
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 {
    color: #7f8c8d !important;
    text-transform: uppercase;
    font-size: 0.75rem;
}
 
/* 5. HOVER STATES (LIGHT MODE) */
html:not(.skin-theme-clientpref-night) body .cdx-menu-item--enabled.cdx-menu-item--selected,
html:not(.skin-theme-clientpref-night) body .cdx-menu-item--enabled:hover {
     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;
}
 
/* 6. HOVER STATES (DARK MODE) */
html.skin-theme-clientpref-night body .cdx-menu-item: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;  
}
 
/* 7. BOTTOM LINK ("Search for pages containing...") */
html:not(.skin-theme-clientpref-night) body .cdx-typeahead-search-menu__footer {
     color: #266065 !important;
     color: #266065 !important;
     transform: translateY(-1px) !important;
     border-top: 1px solid #eee !important;
}
html.skin-theme-clientpref-night body .cdx-menu-item--search-page,
html.skin-theme-clientpref-night body .cdx-menu-item--search-page * {
    color: #8ab4f8 !important;
}
 
/* --- UPDATED LINK GRID (4 COLUMNS) --- */
.bc-linkgrid {
    display: grid !important;
    /* Force exactly 4 columns of equal width */
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 20px !important;
    width: 100% !important;
    margin-top: 20px;
}
 
/* Ensure tiles take up equal height and look like clean cards */
.bc-linktile a {
    display: flex !important;
    flex-direction: row !important; /* Icon next to text */
    align-items: center !important;
    padding: 15px !important;
    height: 100% !important;
    box-sizing: border-box !important;
    justify-content: flex-start !important;
}
 
/* Mobile Responsiveness: Stack to 2 columns on tablets, 1 on phones */
@media screen and (max-width: 1024px) {
    .bc-linkgrid { grid-template-columns: repeat(2, 1fr) !important; }
}
 
@media screen and (max-width: 600px) {
    .bc-linkgrid { grid-template-columns: 1fr !important; }
}
 
/* ============================================================
  --- UNIFIED SIDEBAR SCROLL FIX (TOC & TOOLS) ---
  ============================================================ */
 
/* 1. INITIAL STATE (At the top of the page) */
/* Target all possible sidebar containers (Left & Right) */
html body #vector-toc-pinned-container,      /* Left: Pinned TOC */
html body #vector-page-tools-pinned-container, /* Right: Pinned Tools */
html body .vector-main-menu-container,      /* Left: Main Menu */
html body .vector-column-end,                /* Right: Generic Column */
html body #mw-panel-toc,                    /* Left: Alternate TOC ID */
html body #p-appearance {                    /* Right: Appearance Menu */
    position: sticky !important;
    top: 75px !important;  /* Starting position below the static header */
    transition: top 0.3s ease, max-height 0.3s ease !important;
    z-index: 99 !important;
}
 
/* 2. SCROLLED STATE (Slide Down) */
/* When JS adds 'bc-scrolled', push everything down to clear the fixed header */
html body.bc-scrolled #vector-toc-pinned-container,
html body.bc-scrolled #vector-page-tools-pinned-container,
html body.bc-scrolled .vector-main-menu-container,
html body.bc-scrolled .vector-column-end,
html body.bc-scrolled #mw-panel-toc,
html body.bc-scrolled #p-appearance {
   
    /* Adjust height so you can still scroll to the bottom of the sidebar */
    max-height: calc(100vh - 130px) !important;
    overflow-y: auto !important;
}
 
/* 3. FLOATING TOC FIX (For unpinned TOC inside articles) */
/* Prevents the floating TOC from getting hidden if it's not in the sidebar */
html body.bc-scrolled .mw-parser-output #toc {
    margin-top: 50px !important;
    transition: margin-top 0.3s ease !important;
}
 
/* ============================================================
  --- TOC SPECIFIC SCROLL FIX (MAX WIDTH / NO CUTOFF) ---
  ============================================================ */
 
/* 1. Target the TOC Container specifically */
html body #vector-toc-pinned-container,
html body #mw-panel-toc,
html body .vector-toc {
    transition: all 0.3s ease !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) */
html body.bc-scrolled #vector-toc-pinned-container,
html body.bc-scrolled #mw-panel-toc,
html body.bc-scrolled .vector-toc {
    /* Push down values */
    top: 140px !important;
    padding-top: 30px !important;
   
    /* Adjust height */
    max-height: calc(100vh - 160px) !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"