BorderConnect Wiki

MediaWiki:Common.css: Difference between revisions

← Older edit
No edit summary
Tag: Reverted
No edit summary
 
(7 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;
}
/* --- MAIN MENU CONTAINER --- */
/* Target the dropdown menu container */
.vector-main-menu-container,
#mw-panel {
    border: none !important;
    box-shadow: 0 10px 25px rgba(0,0,0,0.15); /* Soft, deep shadow */
    border-radius: 12px; /* Modern rounded corners */
    padding: 10px 0; /* Add vertical breathing room */
    background-color: #ffffff;
}
/* --- SECTION HEADERS (e.g. "BorderConnect Tools") --- */
/* Make headers subtle and uppercase */
.vector-main-menu-group-label,
.portal h3 {
    color: #6c757d; /* Muted gray text */
    font-size: 0.75rem; /* Smaller text */
    text-transform: uppercase; /* All caps */
    letter-spacing: 1px; /* Spacing between letters */
    font-weight: 700;
    padding: 15px 20px 5px 20px; /* Adjust spacing */
    border: none; /* Remove default lines */
}
/* --- MENU LINKS --- */
/* Style the individual links */
.vector-main-menu-link,
.mw-list-item a {
    color: #333333 !important; /* Darker text for readability */
    padding: 10px 20px; /* Larger click area */
    display: block;
    text-decoration: none !important; /* No underlines */
    transition: all 0.2s ease-in-out; /* Smooth hover transition */
    border-radius: 0; /* Optional: set to 8px if you want rounded links */
    margin: 0 5px; /* Spacing for rounded links (optional) */
}
/* Hover effect for links */
.vector-main-menu-link:hover,
.mw-list-item a:hover {
    background-color: #f0f4f5; /* Light grey/teal tint on hover */
    color: #000 !important;
    padding-left: 25px; /* Slight slide-right effect on hover */
    border-radius: 8px; /* Rounded highlight */
}
/* --- "MOVE TO SIDEBAR" BUTTON --- */
/* Style the utility button to look less like a random link */
.vector-main-menu-action-opt-out,
.vector-main-menu-action-item {
    font-size: 0.8rem;
    color: #888;
    text-align: center;
    border: 1px solid #eee;
    margin: 10px 20px;
    padding: 5px;
    border-radius: 6px;
    transition: background 0.2s;
}
.vector-main-menu-action-opt-out:hover {
    background-color: #f8f9fa;
    color: #555;
    text-decoration: none;
}
/* --- HAMBURGER ICON STYLING --- */
/* Target the menu toggle button in the header */
#p-navigation-label,
.mw-ui-icon-flush-left {
    opacity: 0.8;
    transition: opacity 0.2s;
}
#p-navigation-label:hover,
.mw-ui-icon-flush-left:hover {
    opacity: 1;
    background-color: rgba(255, 255, 255, 0.1); /* Subtle highlight behind icon */
    border-radius: 50%; /* Make the highlight circular */
}
}
Retrieved from "https://wiki.borderconnect.com/index.php?title=MediaWiki:Common.css"