MediaWiki:Common.css: Difference between revisions

← Older edit Newer edit →

@@ Line 1: / Line 1: @@
 /* CSS placed here will be applied to all skins */
+/* ===== VECTOR 2022 FULL WIDTH ===== */
+.skin-vector-2022 .mw-page-container {
+    max-width: 100% !important;
+    padding-left: 0 !important;
+    padding-right: 0 !important;
+}
+.skin-vector-2022 .vector-page-toolbar,
+.skin-vector-2022 .mw-header {
+    max-width: 100% !important;
+}
+.skin-vector-2022 #mw-content-container {
+    max-width: 100% !important;
+}
+.skin-vector-2022 .mw-content-container {
+    max-width: 100% !important;
+}
+/* ===== PINNED SIDEBAR ===== */
+@media (min-width: 1024px) {
+    .skin-vector-2022 .vector-sidebar-container {
+        position: sticky !important;
+        top: 60px !important;
+        height: calc(100vh - 60px) !important;
+        overflow-y: auto !important;
+    }
+    /* Force sidebar to always show pinned */
+    .skin-vector-2022 .mw-sidebar--pinned {
+        display: block !important;
+    }
+}
+/* ===== CARD LAYOUT ===== */
+.card {
+    background: #fff;
+    border-radius: 10px;
+    box-shadow: 0 2px 12px rgba(0,0,0,0.1);
+    overflow: hidden;
+    transition: transform 0.2s ease, box-shadow 0.2s ease;
+    height: 100%;
+}
+.card:hover {
+    transform: translateY(-4px);
+    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
+}
+.row {
+    display: flex !important;
+    flex-wrap: wrap !important;
+    gap: 24px !important;
+    padding: 16px 0 !important;
+}
+.column {
+    flex: 1 1 280px !important;
+    min-width: 260px !important;
+    max-width: 380px !important;
+}
+.fakeimg {
+    overflow: hidden;
+    height: 220px;
+    background: #f0f0f0;
+}
+.fakeimg img,
+.fakeimg a img {
+    width: 100% !important;
+    height: 220px !important;
+    object-fit: cover !important;
+    display: block !important;
+}
+.cha-cont {
+    padding: 16px !important;
+}
+.cha-title {
+    font-size: 11px !important;
+    color: #888 !important;
+    text-transform: uppercase !important;
+    letter-spacing: 0.8px !important;
+    display: block !important;
+    margin-bottom: 6px !important;
+}
+.cha-cont h2 {
+    font-size: 16px !important;
+    margin: 0 0 14px !important;
+    color: #1a1a2e !important;
+    line-height: 1.4 !important;
+    border: none !important;
+}
+/* ===== BUTTONS ===== */
+.btn-grp { margin-top: 10px; }
+.btn {
+    display: inline-block !important;
+    padding: 8px 18px !important;
+    border-radius: 5px !important;
+    font-size: 13px !important;
+    font-weight: 600 !important;
+    cursor: pointer !important;
+    text-decoration: none !important;
+}
+.btn-2 {
+    background-color: #2e7d32 !important;
+    color: #fff !important;
+}
+.btn-2 a,
+.btn-2 a:visited {
+    color: #fff !important;
+    text-decoration: none !important;
+}
+.btn-2:hover { background-color: #1b5e20 !important; }
+/* ===== HERO IMAGE ===== */
+.hero-img {
+    width: 100% !important;
+    max-height: 420px !important;
+    overflow: hidden !important;
+}
+.hero-img img,
+.hero-img a img {
+    width: 100% !important;
+    max-height: 420px !important;
+    object-fit: cover !important;
+    display: block !important;
+}
+/* ===== BANNER ===== */
+.banner-cont {
+    background: #f8f9fa !important;
+    border-left: 4px solid #2e7d32 !important;
+    margin: 20px 0 !important;
+    border-radius: 4px !important;
+}
+.banner-cont p {
+    font-size: 15px !important;
+    line-height: 1.7 !important;
+    color: #333 !important;
+    margin: 0 !important;
+}
+/* ===== SECTION TITLES ===== */
+.ch-title {
+    font-size: 22px !important;
+    color: #1a1a2e !important;
+    margin: 24px 0 8px !important;
+    padding-bottom: 8px !important;
+    border-bottom: 2px solid #2e7d32 !important;
+}
+/* ===== MOBILE ===== */
+@media (max-width: 768px) {
+    .row {
+        flex-direction: column !important;
+        gap: 16px !important;
+    }
+    .column {
+        max-width: 100% !important;
+        min-width: unset !important;
+        width: 100% !important;
+    }
+    .fakeimg,
+    .fakeimg img,
+    .fakeimg a img {
+        height: 160px !important;
+    }
+    .hero-img,
+    .hero-img img,
+    .hero-img a img {
+        max-height: 200px !important;
+    }
+    .btn {
+        display: block !important;
+        text-align: center !important;
+        width: 100% !important;
+        box-sizing: border-box !important;
+    }
+}
 /* ===== FULL VIEWPORT WIDTH ===== */
 .mw-page-container,