Jump to content
🚛
Streamline your cross-border operation. From ACE & ACI eManifests to PARS tracking and U.S. In-Bond filing, BorderConnect is the fastest way to cross.
Start Free Trial

MediaWiki:Common.css: Difference between revisions

From BorderConnect Wiki
← Older editNewer edit →
No edit summary
No edit summary
Line 1: Line 1:
/* CSS placed here will be applied to all skins */
/* ============================================================
  BorderConnect Main Page Portal Styles
  Scoped to .bc-wrap so it won't impact other wiki pages.
  ============================================================ */


/* {{pp|small=yes}} */
.bc-wrap {
 
    max-width: 1200px;
.mw-logo-icon {
    margin: 0 auto;
display: none !important;
}
}


.mw-logo-container {
/* HERO */
     background-image: url( https://wiki.borderconnect.com/images/6/6f/Borderconnect-wiki-logo.png ) !important;
.bc-hero {
     float: left;
     background: linear-gradient(135deg, #226065 0%, #1f4b4f 60%, #17373a 100%);
    margin-right: 10px;
     border-radius: 16px;
     width: 158px;
     padding: 22px 22px 18px 22px;
     height: 45px;
     color: #fff;
     max-width: 158px !important;
     box-shadow: 0 10px 30px rgba(0,0,0,.15);
}
}


.mw-logo-wordmark {
.bc-hero h1 {
     display: none !important;
    margin: 0 0 6px 0;
    font-size: 28px;
    line-height: 1.15;
     color: #fff;
}
}


.mp-box {
.bc-hero p {
border: 1px solid #aaa; /* all border colors overriden on specific elements */
    margin: 0;
padding: 0 0.5em 0.5em;
    opacity: .92;
margin-top: 15px;
    font-size: 15px;
    max-width: 900px;
}
}


.mp-h2,
.bc-hero .bc-meta {
body.skin-timeless .mp-h2 { /* Timeless needs a higher specificity */
    margin-top: 10px;
border: 1px solid #aaa; /* all border colors overriden on specific elements */
    font-size: 13px;
margin: 0.5em 0;
    opacity: .9;
padding: 0.2em 0.4em !important;
font-size: 120% !important;
font-weight: bold !important;
font-family: inherit !important;
}
}


.vector-body h2 {
.bc-hero .bc-kicker {
     margin: 0.5em 0;
    font-size: 12px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: rgba(255,255,255,.85);
     margin-top: 10px;
}
}


.mp-later {
/* Pills */
font-size: 85%;
.bc-pillrow {
font-weight: normal;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}
}


#mp-topbanner {
.bc-pill {
background: #f9f9f9;
    display: inline-block;
border-color: #ddd;
    padding: 6px 10px;
     margin-top: 4px;
    border-radius: 999px;
}
     border: 1px solid rgba(255,255,255,.18);
@media screen {
    background: rgba(255,255,255,.10);
html.skin-theme-clientpref-night #mp-topbanner {
    font-size: 13px;
background-color: #171a1d;
     white-space: nowrap;
     border-color: #676767;
}
}
}


#mp-welcomecount {
.bc-pill a {
text-align: center;
    color: #fff !important;
margin: 0.4em;
    text-decoration: none;
}
}


#mp-welcome {
.bc-pill:hover {
font-size: 162%;
    background: rgba(255,255,255,.16);
padding: 0.1em;
    border-color: rgba(255,255,255,.22);
}
}


#mp-welcome h1 {
/* Cards + grids */
font-size: inherit;
.bc-grid {
font-family: inherit;
    display: grid;
display: inline;
    grid-template-columns: 1fr;
border: none;
    gap: 14px;
    margin-top: 14px;
}
}


#mp-free {
@media (min-width: 980px) {
font-size: 95%;
    .bc-grid { grid-template-columns: 1fr 1fr; }
}
}


#articlecount {
.bc-2col {
font-size: 85%;
    display: grid;
    gap: 12px;
    grid-template-columns: 1fr;
    margin-top: 14px;
}
}


/* clear fix */
@media (min-width: 980px) {
.mp-contains-float::after {
    .bc-2col { grid-template-columns: 1fr 1fr; }
  content: "";
  display: block;
  clear: both;
}
}


#mp-banner {
.bc-card {
background: #fff;
    background: #fff;
border-color: #fff;
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 14px;
    padding: 16px 16px 14px 16px;
    box-shadow: 0 8px 20px rgba(0,0,0,.06);
}
}


#mp-left {
.bc-card h2 {
background: #f5fffa;
    margin: 0 0 10px 0;
border-color: #cef2e0;
    font-size: 18px;
}
     line-height: 1.2;
@media screen {
html.skin-theme-clientpref-night #mp-left {
background-color: #0b1e1c;
     border-color: #104437;
}
}
}


#mp-left .mp-h2 {
.bc-card h3 {
background: #cef2e0;
    margin: 14px 0 8px 0;
border-color: #a3bfb1;
     font-size: 15px;
}
@media screen {
html.skin-theme-clientpref-night #mp-left .mp-h2 {
background-color: #104437;
     border-color: #2f4d41;
}
}
}


#mp-left-aci {
.bc-subtle {
background: #fff5fa;
    color: #555;
border-color: #f2cedd;
    font-size: 13px;
}
     line-height: 1.45;
@media screen {
html.skin-theme-clientpref-night #mp-left-aci {
background-color: #1c1b1c;
     border-color: #65525a;
}
}
}


#mp-left-aci .mp-h2 {
.bc-mini {
background: #f2cedd;
    font-size: 12px;
border-color: #bfa3af;
     color: #666;
}
@media screen {
html.skin-theme-clientpref-night #mp-left-aci .mp-h2 {
background-color: #611937;
     border-color: #752c4b;
}
}
}


/* Accent borders (keeps your color intent) */
.bc-accent-aci      { border-left: 6px solid #2563eb; } /* blue */
.bc-accent-ace      { border-left: 6px solid #dc2626; } /* red */
.bc-accent-ib      { border-left: 6px solid #7c3aed; } /* purple */
.bc-accent-soft    { border-left: 6px solid #0f766e; } /* teal */
.bc-accent-ref      { border-left: 6px solid #334155; } /* slate */
.bc-accent-onboard  { border-left: 6px solid #f59e0b; } /* amber */


#mp-left-abi {
.bc-divider {
background: #fff7f2;
    height: 1px;
border-color: #f6ddcc;
    background: rgba(0,0,0,.08);
}
     margin: 14px 0;
@media screen {
html.skin-theme-clientpref-night #mp-left-abi{
background-color: #1c1b1a;
     border-color: #81736a;
}
}
}


#mp-left-abi .mp-h2 {
/* Button grid */
background: #f6ddcc;
.bc-btngrid {
border-color: #ddc7b8;
    display: grid;
}
    grid-template-columns: 1fr;
@media screen {
    gap: 10px;
html.skin-theme-clientpref-night #mp-left-abi .mp-h2 {
     margin-top: 10px;
background-color: #593218;
     border-color: #975527;
}
}
}


#mp-right {
@media (min-width: 980px) {
background: #f7f5ff;
    .bc-btngrid { grid-template-columns: 1fr 1fr; }
border-color: #e7e1ff;
}
@media screen {
html.skin-theme-clientpref-night #mp-right {
background-color: #130e20;
    border-color: #643b99;
}
}
}


#mp-right .mp-h2 {
.bc-btn {
background: #e6e0ff;
    display: block;
border-color: #c7afc2;
    padding: 10px 12px;
}
    border-radius: 12px;
@media screen {
    border: 1px solid rgba(0,0,0,.10);
html.skin-theme-clientpref-night #mp-right .mp-h2 {
    background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(0,0,0,.02) 100%);
background-color: #7545ab;
    box-shadow: 0 6px 14px rgba(0,0,0,.06);
     border-color: #7757a1;
     text-decoration: none !important;
}
}
}


#mp-right-ace {
.bc-btn:hover {
background: #f5faff;
    transform: translateY(-1px);
border-color: #cedff2;
     box-shadow: 0 10px 18px rgba(0,0,0,.08);
}
@media screen {
html.skin-theme-clientpref-night #mp-right-ace {
background-color: #0d1a27;
     border-color: #082849;
}
}
}


#mp-right-ace .mp-h2 {
.bc-btn strong {
background: #cedff2;
    display: block;
border-color: #a3b0bf;
    font-size: 14px;
}
     margin-bottom: 2px;
@media screen {
html.skin-theme-clientpref-night #mp-right-ace .mp-h2 {
background-color: #082849;
     border-color: #1d4d85;
}
}
}


#mp-right-software {
.bc-btn span {
background: #f1f6f6;
    display: block;
border-color: #DEEAEA;
    font-size: 12px;
}
     color: #555;
@media screen {
html.skin-theme-clientpref-night #mp-right-software {
background-color: #092323;
     border-color: #0a4545;
}
}
}


#mp-right-software .mp-h2 {
/* Make lists inside bc sections tighter & cleaner */
background: #DEEAEA;
.bc-cleanlist ul,
border-color: #c8d3d3;
.bc-cleanlist ol {
}
    margin: 0;
@media screen {
     padding-left: 18px;
html.skin-theme-clientpref-night #mp-right-software .mp-h2 {
background-color: #265151;
     border-color: #207b7b;
}
}
 
#mp-middle {
background: #fff5fa;
border-color: #f2cedd;
}
}


#mp-middle .mp-h2 {
.bc-cleanlist li {
background: #f2cedd;
    margin: 6px 0;
border-color: #bfa3af;
}
}


#mp-lower {
/* Image container polish */
background: #faf5ff;
.bc-inlineimg {
border-color: #ddcef2;
     border-radius: 12px;
}
@media screen {
html.skin-theme-clientpref-night #mp-lower {
background-color: #130e20;
    border-color: #7545ab;
}
}
 
#mp-lower .mp-h2 {
background: #ddcef2;
border-color: #afa3bf;
}
@media screen {
html.skin-theme-clientpref-night #mp-lower .mp-h2 {
background-color: #7545ab;
    border-color: #7757a1;
}
}
 
#mp-bottom {
/* no background */
border-color: #e2e2e2;
}
@media screen {
html.skin-theme-clientpref-night #mp-bottom {
background-color: #171a1d;
    border-color: #676767;
}
}
 
#mp-bottom .mp-h2 {
background: #eee;
border-color: #ddd;
}
 
@media screen {
html.skin-theme-clientpref-night #mp-bottom .mp-h2 {
background-color: #3d3d3d;
     border-color: #676767;
}
}
 
@media (max-width: 875px) {
/* We need to improve Template:POTD as used on the main page so that these
* hacks aren't necessary */
#mp-tfp table,
#mp-tfp tr,
#mp-tfp td,
#mp-tfp tbody {
display: block !important;
width: 100% !important;
box-sizing: border-box;
}
 
#mp-tfp tr:first-child td:first-child a {
text-align: center;
display: table;
margin: 0 auto;
}
}
 
@media (min-width: 875px) {
#mp-upper {
display: flex;
}
#mp-left {
flex: 1 1 70%;
margin-right: 2px;
}
#mp-right {
flex: 1 1 30%;
margin-left: 2px;
}
 
    #mp-left-aci {
flex: 1 1 50%;
margin-right: 2px;
}
    #mp-left-abi {
flex: 1 1 50%;
margin-right: 2px;
}
 
#mp-right-ace {
flex: 1 1 50%;
margin-left: 2px;
}
 
    #mp-right-software {
flex: 1 1 50%;
margin-left: 2px;
}
}
 
.note-info {
    background-color: #F6EFE5;
    background-image: url(https://upload.wikimedia.org/wikipedia/commons/d/d5/OOjs_UI_icon_reference_20_ac6600.svg);
    background-size: 25px;
    padding-left: 40px;
    min-height: 28px;
    background-position: left 7px top 50%;
    padding: 0.5em 0.5em 0.5em 40px;
    margin-top: 1em;
    margin-bottom: 1em;
     overflow: hidden;
     overflow: hidden;
    background-repeat: no-repeat;
     border: 1px solid rgba(0,0,0,.10);
     border: 1px solid #ac6600;
     box-shadow: 0 8px 18px rgba(0,0,0,.06);
     width: 100%;
}
@media screen {
html.skin-theme-clientpref-night .note-info {
background-color: #332410;
}
}
}


.note-reminder {
/* Slightly improve mp-box aesthetics without breaking existing layout */
    background-color: #fff9ea;
.mp-box {
    background-image: url("https://upload.wikimedia.org/wikipedia/commons/a/a8/OOjs_UI_icon_lightbulb-yellow.svg");
     border-radius: 10px;
    background-size: 25px;
    padding-left: 40px;
    min-height: 28px;
    background-position: left 7px top 50%;
    padding: 0.5em 0.5em 0.5em 40px;
    margin-top: 1em;
    margin-bottom: 1em;
    overflow: hidden;
    background-repeat: no-repeat;
    border: 1px solid #fc3;
    width: 100%;
}
@media screen {
html.skin-theme-clientpref-night .note-reminder {
background-color: #332914;
}
}
 
.note-warning {
    background-color: #fee7e6;
    background-image: url("https://upload.wikimedia.org/wikipedia/commons/b/bf/OOjs_UI_icon_notice-destructive.svg");
    background-size: 25px;
    padding-left: 40px;
    min-height: 28px;
    background-position: left 7px top 50%;
    padding: 0.5em 0.5em 0.5em 40px;
    margin-top: 1em;
    margin-bottom: 1em;
    overflow: hidden;
    background-repeat: no-repeat;
    border: 1px solid #c33;
    width: 100%;
}
@media screen {
html.skin-theme-clientpref-night .note-warning {
background-color: #331817;
}
}
 
.note-disambig{
    background-color: #f1f1f1;
    background-image: url("https://upload.wikimedia.org/wikipedia/commons/5/5f/Disambig_gray.svg");
    background-size: 25px;
    padding-left: 40px;
    min-height: 28px;
    background-position: left 7px top 50%;
    padding: 0.5em 0.5em 0.5em 40px;
    margin-top: 1em;
    margin-bottom: 1em;
    overflow: hidden;
    background-repeat: no-repeat;
    border: 1px solid #b7b7b7;
    width: 100%;
}
@media screen {
html.skin-theme-clientpref-night .note-disambig {
background-color: #272727;
}
}
 
.note-download{
    background-color: #f7f7f7;
    background-image: url("https://upload.wikimedia.org/wikipedia/commons/2/2e/Download_icon_black.svg");
    background-size: 25px;
    padding-left: 40px;
    min-height: 28px;
    background-position: left 7px top 50%;
    padding: 0.5em 0.5em 0.5em 40px;
    margin-top: 1em;
    margin-bottom: 1em;
    overflow: hidden;
    background-repeat: no-repeat;
     border: 1px solid #d3d3d3;
    width: 100%;
}
@media screen {
html.skin-theme-clientpref-night .note-download {
background-color: #272727;
}
}
}


.note-active{
/* Night mode support */
    background-color: #D4EDDA;
    background-image: url("https://upload.wikimedia.org/wikipedia/commons/5/51/Noun_Project_coding_icon_2752876.svg");
    background-size: 25px;
    padding-left: 40px;
    min-height: 28px;
    background-position: left 7px top 50%;
    padding: 0.5em 0.5em 0.5em 40px;
    margin-top: 1em;
    margin-bottom: 1em;
    overflow: hidden;
    background-repeat: no-repeat;
    border: 1px solid #6a776d;
    width: 100%;
}
@media screen {
@media screen {
html.skin-theme-clientpref-night .note-active {
html.skin-theme-clientpref-night .bc-card {
background-color: #233127;
    background-color: #171a1d;
}
    border-color: #3a3a3a;
}
}


div.embedvideo.ev_center {
html.skin-theme-clientpref-night .bc-subtle,
    margin-left: auto;
html.skin-theme-clientpref-night .bc-mini,
    margin-right: auto;
html.skin-theme-clientpref-night .bc-btn span {
    margin-bottom: 1em;
     color: #cfcfcf;
     background-color: #F8F9FA !important;
}
}


div.embedvideo.ev_center .thumbcaption {
html.skin-theme-clientpref-night .bc-btn {
     text-align: center;
     background: linear-gradient(180deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.03) 100%);
    padding-top: 0.5em;
     border-color: rgba(255,255,255,.12);
     padding-bottom: 0.5em;
}
}


div.embedvideo.ev_right .thumbcaption {
html.skin-theme-clientpref-night .bc-divider {
    text-align: left;
     background: rgba(255,255,255,.12);
    padding-top: 0.5em;
     padding-bottom: 0.5em;
}
}


div.embedvideo.ev_right {
html.skin-theme-clientpref-night .bc-inlineimg {
     clear: left;
     border-color: rgba(255,255,255,.12);
    float: left;
    margin-left: 0;
    background-color: #F8F9FA !important;
    width: 100%;
}
}
@media (min-width: 500px) {
div.embedvideo.ev_right {
clear: right;
        float: right;
        margin-left: 1em;
        background-color: #F8F9FA !important;
}
}
.infobox {
    border: 1px solid #a2a9b1;
    border-spacing: 3px;
    background-color: #f8f9fa;
    color: black;
    margin: 0.5em 0 0.5em 1em;
    padding: 0.2em;
    float: right;
    clear: right;
    font-size: 88%;
    line-height: 1.5em;
    width: 22em;
}
#sister-projects-list {
    display: flex;
    flex-wrap: wrap;
    line-height: inherit;
    list-style: none;
    margin: 0;
    padding: 0;
}
@media (min-width: 360px)
.mw-parser-output #sister-projects-list li>div:first-child {
    min-width: 50px;
}
.mw-parser-output #sister-projects-list li>div:first-child {
    text-align: center;
}
@media (min-width: 360px)
.mw-parser-output #sister-projects-list li {
    width: 33%;
    min-width: 20em;
    white-space: nowrap;
    flex: 1 0 25%;
}
.mw-parser-output #sister-projects-list li {
    display: inline-block;
    flex: 0 0 33.3%;
}
.mw-parser-output #sister-projects-list li>div {
    display: inline-block;
    vertical-align: middle;
    padding: 6px 4px;
}
.mw-parser-output a {
    word-wrap: break-word;
}
.banner-img {
    width: 100%;
    max-width: 960px;
    height: auto;
}
}

Revision as of 17:43, 22 January 2026

/* ============================================================
   BorderConnect Main Page Portal Styles
   Scoped to .bc-wrap so it won't impact other wiki pages.
   ============================================================ */

.bc-wrap {
    max-width: 1200px;
    margin: 0 auto;
}

/* HERO */
.bc-hero {
    background: linear-gradient(135deg, #226065 0%, #1f4b4f 60%, #17373a 100%);
    border-radius: 16px;
    padding: 22px 22px 18px 22px;
    color: #fff;
    box-shadow: 0 10px 30px rgba(0,0,0,.15);
}

.bc-hero h1 {
    margin: 0 0 6px 0;
    font-size: 28px;
    line-height: 1.15;
    color: #fff;
}

.bc-hero p {
    margin: 0;
    opacity: .92;
    font-size: 15px;
    max-width: 900px;
}

.bc-hero .bc-meta {
    margin-top: 10px;
    font-size: 13px;
    opacity: .9;
}

.bc-hero .bc-kicker {
    font-size: 12px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: rgba(255,255,255,.85);
    margin-top: 10px;
}

/* Pills */
.bc-pillrow {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.bc-pill {
    display: inline-block;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.18);
    background: rgba(255,255,255,.10);
    font-size: 13px;
    white-space: nowrap;
}

.bc-pill a {
    color: #fff !important;
    text-decoration: none;
}

.bc-pill:hover {
    background: rgba(255,255,255,.16);
    border-color: rgba(255,255,255,.22);
}

/* Cards + grids */
.bc-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    margin-top: 14px;
}

@media (min-width: 980px) {
    .bc-grid { grid-template-columns: 1fr 1fr; }
}

.bc-2col {
    display: grid;
    gap: 12px;
    grid-template-columns: 1fr;
    margin-top: 14px;
}

@media (min-width: 980px) {
    .bc-2col { grid-template-columns: 1fr 1fr; }
}

.bc-card {
    background: #fff;
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 14px;
    padding: 16px 16px 14px 16px;
    box-shadow: 0 8px 20px rgba(0,0,0,.06);
}

.bc-card h2 {
    margin: 0 0 10px 0;
    font-size: 18px;
    line-height: 1.2;
}

.bc-card h3 {
    margin: 14px 0 8px 0;
    font-size: 15px;
}

.bc-subtle {
    color: #555;
    font-size: 13px;
    line-height: 1.45;
}

.bc-mini {
    font-size: 12px;
    color: #666;
}

/* Accent borders (keeps your color intent) */
.bc-accent-aci      { border-left: 6px solid #2563eb; } /* blue */
.bc-accent-ace      { border-left: 6px solid #dc2626; } /* red */
.bc-accent-ib       { border-left: 6px solid #7c3aed; } /* purple */
.bc-accent-soft     { border-left: 6px solid #0f766e; } /* teal */
.bc-accent-ref      { border-left: 6px solid #334155; } /* slate */
.bc-accent-onboard  { border-left: 6px solid #f59e0b; } /* amber */

.bc-divider {
    height: 1px;
    background: rgba(0,0,0,.08);
    margin: 14px 0;
}

/* Button grid */
.bc-btngrid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 10px;
}

@media (min-width: 980px) {
    .bc-btngrid { grid-template-columns: 1fr 1fr; }
}

.bc-btn {
    display: block;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(0,0,0,.10);
    background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(0,0,0,.02) 100%);
    box-shadow: 0 6px 14px rgba(0,0,0,.06);
    text-decoration: none !important;
}

.bc-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 18px rgba(0,0,0,.08);
}

.bc-btn strong {
    display: block;
    font-size: 14px;
    margin-bottom: 2px;
}

.bc-btn span {
    display: block;
    font-size: 12px;
    color: #555;
}

/* Make lists inside bc sections tighter & cleaner */
.bc-cleanlist ul,
.bc-cleanlist ol {
    margin: 0;
    padding-left: 18px;
}

.bc-cleanlist li {
    margin: 6px 0;
}

/* Image container polish */
.bc-inlineimg {
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(0,0,0,.10);
    box-shadow: 0 8px 18px rgba(0,0,0,.06);
}

/* Slightly improve mp-box aesthetics without breaking existing layout */
.mp-box {
    border-radius: 10px;
}

/* Night mode support */
@media screen {
html.skin-theme-clientpref-night .bc-card {
    background-color: #171a1d;
    border-color: #3a3a3a;
}

html.skin-theme-clientpref-night .bc-subtle,
html.skin-theme-clientpref-night .bc-mini,
html.skin-theme-clientpref-night .bc-btn span {
    color: #cfcfcf;
}

html.skin-theme-clientpref-night .bc-btn {
    background: linear-gradient(180deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.03) 100%);
    border-color: rgba(255,255,255,.12);
}

html.skin-theme-clientpref-night .bc-divider {
    background: rgba(255,255,255,.12);
}

html.skin-theme-clientpref-night .bc-inlineimg {
    border-color: rgba(255,255,255,.12);
}
}
Retrieved from "https://wiki.borderconnect.com/index.php?title=MediaWiki:Common.css&oldid=2313"