MediaWiki:Common.css: Difference between revisions

Revision as of 11:41, 5 March 2026

.infobox {
border-collapse: collapse;
border: 1px solid #aaa;
background: #f9f9f9;
font-size: 90%;
}
.infobox th,
.infobox td {
padding: 4px 6px;
}
.infobox th {
background: #e6e6e6;
}




/* Infobox (company) design */
.infobox.vcard{
 width: 320px; /* change width */
 float: right;
 clear: right;
 margin: 0 0 16px 16px;
 border: 1px solid #cfd8dc;
 background: #ffffff;
 border-radius: 10px;
 overflow: hidden;
 box-shadow: 0 6px 18px rgba(0,0,0,.08);
 font-size: 14px; /* base font size */
 line-height: 1.35;
}

.infobox.vcard th,
.infobox.vcard td{
 padding: 8px 10px; /* spacing */
 border-top: 1px solid #eef2f5;
 vertical-align: top;
}

.infobox.vcard th{
 width: 38%;
 background: #f7f9fb; /* left column color */
 color: #263238;
 font-weight: 600;
 text-align: left;
}

.infobox.vcard td{
 color: #37474f;
}

.infobox.vcard th[colspan="2"]{
 background:#1f2937; /* NEW (dark) */
 color:#ffffff;
}
 text-align: center;
 font-size: 16px; /* title font size */
 border-top: 0;
}

.infobox.vcard img{
 max-width: 220px; /* logo size */
 height: auto;
}



/* ==== Infobox company styling ==== */
.infobox.vcard {
 width: 320px; /* box width */
 float: right;
 clear: right;
 margin: 0 0 16px 16px;
 border: 1px solid #cfd8dc;
 background: #ffffff;
 border-radius: 10px;
 overflow: hidden;
 box-shadow: 0 6px 18px rgba(0,0,0,.08);
 font-size: 14px; /* text size */
 line-height: 1.4;
}

/* All header + data cells */
.infobox.vcard th,
.infobox.vcard td {
 padding: 8px 10px;
 border-top: 1px solid #eef2f5;
 vertical-align: top;
}

/* Left column (labels) */
.infobox.vcard th {
 width: 38%;
 background: #f7f9fb;
 color: #263238;
 font-weight: 600;
 text-align: left;
}

/* Right column (values) */
.infobox.vcard td {
 color: #37474f;
}

/* Title row */
.infobox.vcard th[colspan="2"] {
 background: #0b5ed7; /* title bar color */
 color: #ffffff;
 text-align: center;
 font-size: 16px; /* title font size */
 border-top: 0;
}

/* Logo */
.infobox.vcard img {
 max-width: 220px;
 height: auto;
}

.infobox-verified{
 text-align:center;
 padding:6px 10px;
 border-top:1px solid #eef2f5;
 color:#16a34a;
 font-weight:900;
 font-size:18px;
}

.infobox-verified::before{
 content:"✓";
}



.infobox-title{
 background:#0b5ed7; /* title background */
 color:#fff; /* title text */
 text-align:center;
 font-size:16px;
}



.infobox-verified{
 text-align:center;
 padding:8px 10px;
 border-top:1px solid #eef2f5;
}

.infobox-verified::before{
 content:"✓";
 display:inline-block;
 width:22px;
 height:22px;
 line-height:22px;
 text-align:center;
 border-radius:50%;
 background:#0b5ed7; /* circle color */
 color:#fff; /* tick color */
 font-weight:900;
 font-size:14px;
}



.infobox-title{
 background:#0b5ed7;
 color:#fff;
 text-align:center;
 font-size:16px;
 position:relative;
 padding:10px 36px 10px 12px; /* space for badge */
}

.infobox-title .infobox-verified{
 position:absolute;
 right:10px;
 top:50%;
 transform:translateY(-50%);
}

.infobox-title .infobox-verified::before{
 content:"✓";
 display:inline-block;
 width:22px;
 height:22px;
 line-height:22px;
 text-align:center;
 border-radius:50%;
 background:#ffffff; /* circle */
 color:#0b5ed7; /* tick */
 font-weight:900;
 font-size:14px;
}





/* Vector: verified tick beside PAGE title */
body.page-verified #firstHeading{
 position: relative;
 display: inline-block;
 padding-right: 34px;
}

body.page-verified #firstHeading::after{
 content:"✓";
 position:absolute;
 right:0;
 top:50%;
 transform:translateY(-50%);
 width:22px;
 height:22px;
 line-height:22px;
 text-align:center;
 border-radius:50%;
 background:#0b5ed7;
 color:#fff;
 font-weight:900;
 font-size:14px;
}



/* Verified tick beside page title ONLY on Claimsify */
body.page-Claimsify #firstHeading{
 position:relative;
 display:inline-block;
 padding-right:34px;
}
body.page-Claimsify #firstHeading::after{
 content:"✓";
 position:absolute;
 right:0;
 top:50%;
 transform:translateY(-50%);
 width:22px;
 height:22px;
 line-height:22px;
 text-align:center;
 border-radius:50%;
 background:#0b5ed7;
 color:#fff;
 font-weight:900;
 font-size:14px;
}


/* Infobox title: remove extra top white line and reduce gap */
.infobox-title{
 border-top:0 !important;
 padding-top:8px !important;
 padding-bottom:8px !important;
 padding-right:30px !important; /* less space reserved for tick */
}

.infobox-title .infobox-verified{
 right:6px !important; /* bring tick closer to the name */
 margin:0 !important;
 padding:0 !important;
 border:0 !important;
 background:transparent !important;
}

.infobox-title .infobox-verified::before{
 width:18px !important;
 height:18px !important;
 line-height:18px !important;
 font-size:12px !important;
}


/* Infobox title: tighter spacing between name and verified badge */
.infobox-title{
 padding-right:24px !important; /* was reserving too much space */
}

.infobox-title .infobox-verified{
 right:4px !important; /* bring badge closer */
}




/* Draw the verified badge inside the infobox title (no extra text gap) */
.infobox-title{
 position:relative;
 padding-right:28px !important;
}

.infobox-title::after{
 content:"✓";
 position:absolute;
 right:6px;
 top:50%;
 transform:translateY(-50%);
 width:18px;
 height:18px;
 line-height:18px;
 text-align:center;
 border-radius:50%;
 background:#fff;
 color:#0b5ed7;
 font-weight:900;
 font-size:12px;
}



/* FORCE verified badge beside infobox name */
.infobox-title{
 position:relative !important;
 display:block !important;
 padding-right:30px !important;
 overflow:visible !important;
}

.infobox-title::after{
 content:"✓" !important;
 position:absolute !important;
 right:6px !important;
 top:50% !important;
 transform:translateY(-50%) !important;
 width:18px !important;
 height:18px !important;
 line-height:18px !important;
 text-align:center !important;
 border-radius:50% !important;
 background:#fff !important;
 color:#0b5ed7 !important;
 font-weight:900 !important;
 font-size:12px !important;
 z-index:9999 !important;
}



/* Infobox verified badge: top-right beside the name (not above) */
.infobox-title{
 position:relative !important;
 padding-right:30px !important;
 padding-top:10px !important;
 padding-bottom:10px !important;
}

.infobox-title::after{
 top:10px !important; /* align with title text line */
 right:6px !important;
 transform:none !important; /* stop vertical centering that pushes it up */
}



/* Fix infobox title layout (Vector tables) */
.infobox-title{
 display:table-cell !important; /* revert from block */
 vertical-align:middle !important;
 position:relative !important;
 padding-right:30px !important;
 line-height:1.2 !important;
}

/* Keep badge on the same line, right side */
.infobox-title::after{
 top:50% !important;
 transform:translateY(-50%) !important;
 right:6px !important;
}



/* Remove any previous badge on the cell */
.infobox-title::after{ content:none !important; }

/* Anchor badge to the text span */
.infobox-title .infobox-name{
 position:relative !important;
 display:inline-block !important;
 padding-right:26px !important; /* space for badge */
}

.infobox-title .infobox-name::after{
 content:"✓" !important;
 position:absolute !important;
 right:4px !important;
 top:50% !important;
 transform:translateY(-50%) !important;
 width:18px !important;
 height:18px !important;
 line-height:18px !important;
 text-align:center !important;
 border-radius:50% !important;
 background:#fff !important;
 color:#0b5ed7 !important;
 font-weight:900 !important;
 font-size:12px !important;
}



/* Rounded offer box on Main Page */
.offer-box{
 background:#19b4b6;
 color:#fff;
 padding:16px 18px;
 border-radius:18px;
 text-align:center;
 font-weight:600;
}
.offer-box .price{
 font-size:22px;
 font-weight:800;
 display:block;
 margin:6px 0;
}
.offer-box .small{
 font-size:13px;
 font-weight:500;
 opacity:.95;
}


/* Main Page layout (Vector) */
.mp-wrap{max-width:1100px;margin:0 auto;padding:10px 0}
.mp-hero{background:linear-gradient(135deg,#0ea5a7,#1f6feb);color:#fff;border-radius:22px;padding:22px 20px;box-shadow:0 10px 26px rgba(0,0,0,.12)}
.mp-hero h2{margin:0 0 8px 0;font-size:26px}
.mp-hero p{margin:0;opacity:.95;font-size:15px;line-height:1.5}
.mp-cta{margin-top:14px;display:flex;gap:10px;flex-wrap:wrap}
.mp-btn{display:inline-block;padding:11px 16px;border-radius:9999px;font-weight:700;text-decoration:none}
.mp-btn.primary{background:#fff;color:#0b3b3c !important}
.mp-btn.ghost{border:2px solid rgba(255,255,255,.75);color:#fff !important}

.offer-box{margin-top:14px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.25);backdrop-filter:blur(6px);
 border-radius:18px;padding:14px 14px;text-align:center}
.offer-box .price{font-size:22px;font-weight:800;display:block;margin:6px 0}
.offer-box .small{font-size:13px;font-weight:500;opacity:.95}

.mp-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:16px}
@media (max-width:900px){.mp-grid{grid-template-columns:1fr}}
.mp-card{background:#fff;border:1px solid #e6e6e6;border-radius:18px;padding:14px 14px;box-shadow:0 8px 18px rgba(0,0,0,.06)}
.mp-card h3{margin:0 0 8px 0;font-size:18px}
.mp-card p{margin:0;color:#333;line-height:1.55}