|
|
| (91 intermediate revisions by the same user not shown) |
| Line 1: |
Line 1: |
| /* ================================================================ | | /* Load Malayalam Google Fonts */ |
| AbhiprayaVedi - Ver4.1 — Timeless Skin, Gap Fix
| | @import url('https://fonts.googleapis.com/css2?family=Manjari:wght@400;700&family=Meera:wght@400;700&display=swap'); |
| ================================================================ */
| |
|
| |
|
| /* ----------------------------------------------------------------
| | :lang(ml), |
| TIMELESS SKIN: Reduce gap between tab bar and article content
| | :lang(ml) * { |
| Timeless adds padding inside #mw-content-text and also the
| | font-family: 'Manjari', 'Meera', 'Rachana', 'Noto Sans Malayalam', sans-serif !important; |
| .article-container itself has top padding — both must be zeroed.
| |
| ---------------------------------------------------------------- */
| |
| | |
| #firstHeading {
| |
| margin-bottom: 4px !important; | |
| padding-bottom: 2px !important;
| |
| } | | } |
|
| |
|
| /* Timeless-specific: this is the direct parent of .mw-parser-output */ | | /* Hide namespace subtitle for published articles */ |
| #mw-content-text {
| | .mw-displaytitle-subtitle { |
| padding-top: 0 !important;
| | display: none !important; |
| margin-top: 0 !important;
| |
| }
| |
| | |
| .mw-body-content { | |
| margin-top: 0 !important; | |
| padding-top: 0 !important;
| |
| } | | } |
|
| |
|
| .mw-parser-output {
| | /* Global minor tweaks only */ |
| margin-top: 0 !important;
| |
| padding-top: 0 !important;
| |
| }
| |
| | |
| /* Timeless wraps everything in .page-content — zero that too */ | |
| .page-content {
| |
| padding-top: 0 !important;
| |
| margin-top: 0 !important;
| |
| }
| |
| | |
| /* ================================================================
| |
| BASE FONT SIZE
| |
| ================================================================ */
| |
| | |
| body { | | body { |
| font-size: 17px;
| | line-height: 1.7; |
| } | | } |
|
| |
|
| /* Timeless skin content area selector (replaces #content) */ | | /* Main Article Title (Skin H1) */ |
| .mw-body { | | #firstHeading, |
| font-size: 1.05em; | | .mw-first-heading { |
| | font-size: 2.4em !important; |
| | font-weight: bold !important; |
| | margin-bottom: 0.4em !important; |
| | color: #222; |
| | border-bottom: solid 4px #36c; |
| } | | } |
| | /* ================ FORCE MALAYALAM FONTS - HIGHEST PRIORITY ================ */ |
|
| |
|
| /* ================================================================
| | body:lang(ml), |
| ARTICLE CONTAINER
| | .mw-body:lang(ml), |
| ================================================================ */
| | .mw-body-content:lang(ml), |
| | | #content:lang(ml), |
| .article-container { | | .mw-parser-output:lang(ml), |
| max-width: 1200px;
| | .article-content:lang(ml), |
| margin: 0 auto;
| | .intro-box:lang(ml), |
| padding: 0 20px 20px 20px; /* FIX: top padding 0 — removes gap under title */
| | p:lang(ml), |
| font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; | | span:lang(ml), |
| font-size: 1.05em; | | div:lang(ml) { |
| | font-family: 'Manjari', 'Meera', 'Rachana', 'Noto Sans Malayalam', 'Nirmala UI', sans-serif !important; |
| | line-height: 1.85 !important; |
| } | | } |
|
| |
|
| /* Suppress empty <p> tags the wikitext parser inserts before/after divs */ | | /* Extra force for article body */ |
| .mw-parser-output > p:empty,
| | .article-content * { |
| .article-container > p:empty { | | font-family: 'Manjari', 'Meera', 'Rachana', 'Noto Sans Malayalam', sans-serif !important; |
| display: none !important; | |
| margin: 0 !important;
| |
| padding: 0 !important;
| |
| } | | } |
|
| |
|
| /* Malayalam Font Support */ | | /* Malayalam Headings */ |
| .article-container[data-language="Malayalam"] {
| | h1:lang(ml), h2:lang(ml), h3:lang(ml), h4:lang(ml) { |
| font-family: 'Manjari', 'Meera', 'Rachana', 'AnjaliOldLipi', 'Noto Sans Malayalam', sans-serif; | | font-family: 'Manjari', 'Meera', 'Rachana', 'Noto Sans Malayalam', sans-serif !important; |
| line-height: 1.75;
| |
| } | | } |
|
| |
|
| /* ================================================================ | | /* Force Malayalam Font on Main Article Title */ |
| HEADER - Timeless: force compact, override any skin defaults
| | #firstHeading, |
| ================================================================ */
| | .mw-first-heading, |
| | | .firstHeading { |
| .article-header { | | font-family: 'Manjari', 'Meera', 'Rachana', 'Noto Sans Malayalam', sans-serif !important; |
| background: #f8f9fa;
| | font-weight: bold !important; |
| border-bottom: 2px solid #495057;
| |
| padding: 6px 16px !important; /* !important to override Timeless defaults */
| |
| margin-top: 0 !important;
| |
| margin-bottom: 10px !important;
| |
| border-radius: 6px;
| |
| }
| |
| .article-container .author-info p { | |
| margin: 0 !important; | |
| padding: 0 !important;
| |
| display: contents !important;
| |
| }
| |
| .author-info {
| |
| display: flex !important;
| |
| align-items: center !important;
| |
| justify-content: space-between !important; | |
| gap: 15px;
| |
| flex-wrap: wrap;
| |
| font-size: 1.1em;
| |
| } | | } |
|
| |
|
| .author-name {
| | /* Also for Malayalam in general headings */ |
| font-weight: 700;
| | :lang(ml) h1, |
| font-size: 1.3em;
| | :lang(ml) h2, |
| color: #212529;
| | :lang(ml) h3 { |
| flex: 0 0 auto; | | font-family: 'Manjari', 'Meera', 'Rachana', 'Noto Sans Malayalam', sans-serif !important; |
| } | | } |
|
| |
|
| .date-info {
| | /* Hide top tabs (Submissions, Discussion, Edit, etc.) for anonymous users */ |
| color: #6c757d;
| | .anon .mw-indicators, |
| font-size: 1.05em;
| | .anon #mw-content-subtitle, |
| flex: 1 1 auto;
| | .anon .vector-page-toolbar, |
| text-align: center;
| | .anon .mw-editsection, |
| }
| | .anon #ca-edit, |
| | | .anon #ca-edit-source, |
| .category-badge {
| | .anon #ca-history, |
| background: #667eea;
| | .anon #ca-view { |
| color: white;
| | display: none !important; |
| padding: 5px 12px;
| |
| border-radius: 20px;
| |
| font-size: 0.88em;
| |
| font-weight: 600;
| |
| flex: 0 0 auto;
| |
| }
| |
| | |
| /* ================================================================ | |
| INTRODUCTION
| |
| ================================================================ */
| |
| .article-container .introduction-section p { | |
| margin: 0 !important;
| |
| padding: 0 !important;
| |
| }
| |
| .introduction-section { | |
| background: linear-gradient(135deg, #fff9e6 0%, #fff3cd 100%);
| |
| border-left: 5px solid #f59e0b;
| |
| padding: 10px 10px !important; /* !important to override Timeless */
| |
| margin-top: 0 !important;
| |
| margin-bottom: 10px !important;
| |
| border-radius: 6px;
| |
| font-size: 1.12em;
| |
| line-height: 1.45;
| |
| color: #78350f;
| |
| font-weight: 550;
| |
| }
| |
| | |
| /* ================================================================
| |
| CONTENT LAYOUT
| |
| ================================================================ */
| |
| | |
| .content-wrapper { | |
| display: flex;
| |
| gap: 30px;
| |
| margin-bottom: 30px;
| |
| }
| |
| | |
| .main-content { | |
| flex: 1 1 70%;
| |
| min-width: 0;
| |
| }
| |
| | |
| .right-sidebar { | |
| flex: 0 0 300px; | |
| } | | } |
|
| |
|
| @media (max-width: 968px) {
| | /* Force Malayalam on Main Title */ |
| .content-wrapper {
| | #firstHeading, |
| flex-direction: column;
| | .mw-first-heading, |
| } | | .firstHeading { |
| .right-sidebar {
| | font-family: 'Manjari', 'Meera', 'Rachana', 'Noto Sans Malayalam', sans-serif !important; |
| flex: 1 1 auto;
| | font-size: 2.35em !important; |
| max-width: 100%;
| | font-weight: 700 !important; |
| }
| |
| } | | } |
|
| |
|
| /* ================================================================ | | /* English Title Size */ |
| ARTICLE TEXT
| | :lang(en) #firstHeading, |
| ================================================================ */
| | :lang(en) .mw-first-heading { |
| | | font-size: 2.45em !important; |
| .article-text { | |
| font-size: 1.15em; | |
| line-height: 1.85;
| |
| color: #212529;
| |
| text-align: left;
| |
| } | | } |
|
| |
|
| .article-text p {
| | /* ================ HIDE SIDE PANELS FOR ANONYMOUS USERS ================ */ |
| margin-bottom: 1.2em;
| |
| }
| |
|
| |
|
| .article-text h2 { | | /* വായനക്കാർ ലോഗിൻ ചെയ്തിട്ടില്ലെങ്കിൽ (Anonymous) മാത്രം ഈ സ്റ്റൈലുകൾ ബാധകമാകും */ |
| font-size: 1.6em;
| | body.user-anonymous .article-sidebar, |
| margin-top: 1.5em;
| | body.user-anonymous #mw-panel, |
| margin-bottom: 0.8em;
| | body.user-anonymous .mw-sidebar, |
| color: #212529; | | body.user-anonymous #sidebar, |
| border-bottom: 2px solid #dee2e6; | | body.user-anonymous .right-sidebar { |
| padding-bottom: 0.3em; | | display: none !important; /* സൈഡ് പാനലുകൾ പൂർണ്ണമായി മറയ്ക്കുന്നു */ |
| | width: 0 !important; |
| | visibility: hidden !important; |
| } | | } |
|
| |
|
| .article-text h3 {
| | /* |
| font-size: 1.3em;
| | * സൈഡ് പാനൽ മറയ്ക്കുമ്പോൾ പ്രധാന ലേഖന ഭാഗം (Main Content Area) |
| margin-top: 1.3em;
| | * പേജിന്റെ മുഴുവൻ വീതിയിലേക്കും (Full Width) മനോഹരമായി വ്യാപിച്ചു നിൽക്കാൻ താഴെ പറയുന്നവ സഹായിക്കും. |
| margin-bottom: 0.7em;
| | */ |
| color: #495057;
| | body.user-anonymous #content, |
| }
| | body.user-anonymous #mw-content-text, |
| | | body.user-anonymous .article-content, |
| /* ================================================================ | | body.user-anonymous .mw-body { |
| IMAGES
| |
| ================================================================ */
| |
| | |
| /* ================================================================
| |
| MODERN MEDIAWIKI FILE/IMAGE RENDERING (figure-based, 1.38+)
| |
| Timeless uses figure[typeof~="mw:File/Thumb"] not .thumb
| |
| ================================================================ */
| |
| | |
| /* Left-aligned image — remove left margin so it sits flush */
| |
| .article-container figure[typeof~="mw:File/Thumb"] { | |
| margin-left: 0 !important; | | margin-left: 0 !important; |
| margin-right: 20px !important; | | margin-right: 0 !important; |
| margin-bottom: 6px !important;
| | width: 100% !important; |
| }
| | max-width: 100% !important; |
| | |
| /* Kill the skin's margin on the image element itself */
| |
| .article-container figure[typeof~="mw:File/Thumb"] > :not(figcaption).mw-file-element {
| |
| margin: 0 !important;
| |
| }
| |
| | |
| /* Reduce padding below caption */
| |
| .article-container figure[typeof~="mw:File/Thumb"] figcaption {
| |
| padding: 4px 4px !important;
| |
| margin-top: 2px !important; | |
| line-height: 1.4 !important;
| |
| font-size: 0.92em !important;
| |
| }
| |
| | |
| /* Also keep old .thumb rules for backward compatibility */
| |
| .article-container .thumb {
| |
| margin-left: 0 !important;
| |
| margin-bottom: 4px !important;
| |
| }
| |
| | |
| .image-left {
| |
| float: left;
| |
| margin: 0 20px 8px 0;
| |
| max-width: 420px;
| |
| }
| |
| | |
| .image-left .thumb {
| |
| background: #f8f9fa;
| |
| border: 1px solid #dee2e6;
| |
| }
| |
| | |
| .content-image {
| |
| margin: 15px 0 8px 0;
| |
| clear: both;
| |
| }
| |
| | |
| .thumb {
| |
| margin-bottom: 6px !important;
| |
| }
| |
| | |
| .thumbinner {
| |
| padding-bottom: 4px !important;
| |
| }
| |
| | |
| .thumbcaption {
| |
| font-size: 0.95em !important;
| |
| line-height: 1.45 !important;
| |
| padding: 5px 6px !important;
| |
| }
| |
| | |
| /* ================================================================
| |
| AUTHOR INFOBOX
| |
| ================================================================ */
| |
| | |
| .author-infobox {
| |
| background: #f8f9fa;
| |
| border: 1px solid #ced4da;
| |
| border-radius: 8px;
| |
| margin-bottom: 10px;
| |
| overflow: hidden;
| |
| }
| |
| | |
| .author-photo {
| |
| text-align: center;
| |
| padding: 10px;
| |
| background: white;
| |
| border-bottom: 1px solid #dee2e6;
| |
| }
| |
| | |
| .author-photo img {
| |
| max-width: 100%; | |
| height: auto;
| |
| border-radius: 6px;
| |
| }
| |
| | |
| .author-name-box {
| |
| text-align: center;
| |
| padding: 10px 15px;
| |
| font-size: 1.2em;
| |
| font-weight: 500;
| |
| color: #212529;
| |
| background: #e9ecef;
| |
| border-bottom: 1px solid #dee2e6;
| |
| }
| |
| | |
| .author-name-box a {
| |
| color: #0056b3;
| |
| text-decoration: none;
| |
| }
| |
| | |
| .author-name-box a:hover {
| |
| text-decoration: underline;
| |
| }
| |
| | |
| .author-bio {
| |
| padding: 12px 15px;
| |
| font-size: 1em;
| |
| line-height: 1.65;
| |
| color: #495057;
| |
| }
| |
| | |
| /* ================================================================
| |
| HIGHLIGHTS
| |
| ================================================================ */
| |
| | |
| .highlight-box {
| |
| background: #d4edda;
| |
| border: 1px solid #c3e6cb;
| |
| border-left: 4px solid #28a745;
| |
| border-radius: 6px;
| |
| margin-bottom: 8px;
| |
| overflow: hidden;
| |
| }
| |
| | |
| .highlight-title {
| |
| background: #28a745;
| |
| color: white;
| |
| padding: 7px 14px;
| |
| font-size: 1.3em;
| |
| text-align: center;
| |
| }
| |
| | |
| .highlight-text {
| |
| padding: 12px 12px;
| |
| font-size: 1em;
| |
| line-height: 1.65;
| |
| color: #155724;
| |
| }
| |
| | |
| /* ================================================================
| |
| KEY POINTS
| |
| ================================================================ */
| |
| | |
| .keypoints-float {
| |
| background: #fff3cd;
| |
| border: 1px solid #ffc107;
| |
| border-radius: 6px;
| |
| overflow: hidden;
| |
| margin-bottom: 20px;
| |
| }
| |
| | |
| .keypoints-header {
| |
| background: #ffc107;
| |
| color: #212529;
| |
| padding: 7px 14px;
| |
| font-size: 1.3em;
| |
| text-align: center;
| |
| }
| |
| | |
| .keypoints-list {
| |
| list-style: none;
| |
| padding: 0;
| |
| margin: 0;
| |
| }
| |
| | |
| .keypoints-list li {
| |
| padding: 11px 14px 11px 30px;
| |
| border-bottom: 1px solid #ffeaa7;
| |
| position: relative;
| |
| font-size: 1em;
| |
| line-height: 1.6;
| |
| color: #856404;
| |
| }
| |
| | |
| .keypoints-list li:nth-child(1) {
| |
| margin-bottom: 4px;
| |
| }
| |
| | |
| .keypoints-list li:last-child {
| |
| border-bottom: none;
| |
| }
| |
| | |
| .keypoints-list li:before {
| |
| content: "▸";
| |
| position: absolute;
| |
| left: 12px;
| |
| color: #f59e0b;
| |
| font-weight: bold;
| |
| font-size: 1.1em;
| |
| }
| |
| | |
| /* ================================================================
| |
| SOURCE ATTRIBUTION
| |
| ================================================================ */
| |
| | |
| .source-attribution {
| |
| background: #e7f3ff;
| |
| border: 1px solid #bee5eb;
| |
| border-left: 4px solid #17a2b8;
| |
| padding: 12px 16px;
| |
| margin: 20px 0;
| |
| border-radius: 6px;
| |
| font-size: 1em;
| |
| line-height: 1.65;
| |
| color: #0c5460;
| |
| }
| |
| | |
| .source-attribution a {
| |
| color: #0056b3;
| |
| text-decoration: underline;
| |
| }
| |
| | |
| /* ================================================================
| |
| MOBILE RESPONSIVE
| |
| ================================================================ */
| |
| | |
| @media (max-width: 768px) {
| |
| .author-info {
| |
| flex-direction: column;
| |
| align-items: flex-start;
| |
| gap: 10px;
| |
| }
| |
| .date-info {
| |
| text-align: left;
| |
| }
| |
| .category-badge {
| |
| align-self: flex-start;
| |
| }
| |
| }
| |
| | |
| /* ================================================================
| |
| PRINT
| |
| ================================================================ */
| |
| | |
| @media print {
| |
| .article-container {
| |
| max-width: 100%;
| |
| font-size: 12pt;
| |
| }
| |
| .content-wrapper {
| |
| display: block;
| |
| }
| |
| .right-sidebar {
| |
| float: right;
| |
| width: 250px;
| |
| margin-left: 20px;
| |
| }
| |
| }
| |
| | |
| /* ================================================================
| |
| ACCESSIBILITY
| |
| ================================================================ */
| |
| | |
| a:focus,
| |
| button:focus {
| |
| outline: 2px solid #667eea;
| |
| outline-offset: 2px;
| |
| }
| |
| | |
| @media (prefers-contrast: high) {
| |
| .article-container {
| |
| border: 2px solid currentColor;
| |
| }
| |
| .article-header {
| |
| border-bottom: 3px solid currentColor;
| |
| }
| |
| }
| |
| | |
| /* ================================================================
| |
| ABHIPRAYAVEDI HOMEPAGE STYLES
| |
| Append these to MediaWiki:Common.css after existing rules.
| |
| All classes prefixed with "av-" to avoid conflicts with
| |
| Timeless skin and MediaWiki default classes.
| |
| ================================================================ */
| |
| | |
| /* ----------------------------------------------------------------
| |
| FIX: Timeless h1/h2 top margins on main page are too large.
| |
| Scoped to .av-homepage to avoid affecting article pages.
| |
| ---------------------------------------------------------------- */
| |
| | |
| .av-homepage {
| |
| max-width: 1200px;
| |
| margin: 0 auto;
| |
| padding: 0 16px 30px 16px;
| |
| font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
| |
| 'Manjari', 'Noto Sans Malayalam', sans-serif;
| |
| }
| |
| | |
| /* Suppress empty <p> tags parser generates between divs */
| |
| .av-homepage > p:empty {
| |
| display: none !important;
| |
| margin: 0 !important;
| |
| }
| |
| | |
| /* ----------------------------------------------------------------
| |
| SECTION HEADERS — bilingual, consistent font sizing
| |
| Using spans instead of h= elements avoids Timeless margin issues.
| |
| ---------------------------------------------------------------- */
| |
| | |
| .av-section-header {
| |
| margin: 24px 0 12px 0;
| |
| padding-bottom: 6px;
| |
| border-bottom: 3px solid #495057;
| |
| line-height: 1.3;
| |
| }
| |
| | |
| .av-section-title-en {
| |
| font-size: 1.25em;
| |
| font-weight: 700;
| |
| color: #212529;
| |
| font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
| |
| }
| |
| | |
| .av-section-title-ml {
| |
| /* Malayalam script renders optically larger at same em size —
| |
| reduce slightly to visually match the English label */
| |
| font-size: 1.2em;
| |
| font-weight: 700;
| |
| color: #495057;
| |
| font-family: 'Manjari', 'Meera', 'Noto Sans Malayalam', sans-serif;
| |
| }
| |
| | |
| .av-section-divider {
| |
| color: #adb5bd;
| |
| font-size: 1.1em;
| |
| margin: 0 4px;
| |
| }
| |
| | |
| /* ----------------------------------------------------------------
| |
| FEATURED ARTICLE
| |
| ---------------------------------------------------------------- */
| |
| | |
| .av-featured {
| |
| display: flex;
| |
| gap: 24px;
| |
| align-items: flex-start;
| |
| background: #f8f9fa;
| |
| border-left: 5px solid #667eea;
| |
| border-radius: 8px;
| |
| padding: 16px;
| |
| margin-bottom: 8px;
| |
| }
| |
| | |
| .av-featured-image p,
| |
| .av-story-card .av-card-image p,
| |
| .av-latest-card .av-card-image p {
| |
| margin: 0 !important;
| |
| padding: 0 !important;
| |
| display: contents !important;
| |
| }
| |
| .av-featured-image img {
| |
| max-width: 300px;
| |
| width: 100%;
| |
| border-radius: 6px;
| |
| display: block;
| |
| }
| |
| | |
| .av-featured-image {
| |
| flex: 0 0 auto;
| |
| }
| |
| | |
| .av-featured-body {
| |
| flex: 1 1 auto;
| |
| }
| |
| | |
| .av-featured-title {
| |
| font-size: 1.45em;
| |
| font-weight: 700;
| |
| line-height: 1.4;
| |
| margin-bottom: 10px;
| |
| font-family: 'Manjari', 'Meera', 'Noto Sans Malayalam',
| |
| -apple-system, sans-serif;
| |
| }
| |
| | |
| .av-featured-title a {
| |
| color: #212529;
| |
| text-decoration: none;
| |
| }
| |
| | |
| .av-featured-title a:hover {
| |
| color: #667eea;
| |
| text-decoration: underline;
| |
| }
| |
| | |
| .av-featured-intro {
| |
| font-size: 1.05em;
| |
| line-height: 1.75;
| |
| color: #495057;
| |
| margin-bottom: 12px;
| |
| font-family: 'Manjari', 'Meera', 'Noto Sans Malayalam',
| |
| -apple-system, sans-serif;
| |
| }
| |
| | |
| .av-featured-meta {
| |
| display: flex;
| |
| gap: 10px;
| |
| align-items: center;
| |
| font-size: 0.92em;
| |
| }
| |
| | |
| /* ----------------------------------------------------------------
| |
| TOP STORIES — 3-column card row
| |
| ---------------------------------------------------------------- */
| |
| | |
| .av-cards-row {
| |
| display: flex;
| |
| gap: 20px;
| |
| margin-bottom: 8px;
| |
| }
| |
| | |
| .av-story-card {
| |
| flex: 1 1 0;
| |
| background: white;
| |
| border: 1px solid #dee2e6;
| |
| border-radius: 8px;
| |
| overflow: hidden;
| |
| display: flex;
| |
| flex-direction: column;
| |
| }
| |
| | |
| .av-story-card .av-card-image img,
| |
| .av-latest-card .av-card-image img {
| |
| width: 100%;
| |
| height: 160px;
| |
| object-fit: cover;
| |
| display: block;
| |
| }
| |
| | |
| .av-card-noimage {
| |
| width: 100%;
| |
| height: 120px;
| |
| background: #e9ecef;
| |
| }
| |
| | |
| .av-card-body {
| |
| padding: 12px 14px;
| |
| display: flex;
| |
| flex-direction: column;
| |
| gap: 6px;
| |
| flex: 1 1 auto;
| |
| }
| |
| | |
| .av-card-title {
| |
| font-size: 1.05em;
| |
| font-weight: 700;
| |
| line-height: 1.4;
| |
| font-family: 'Manjari', 'Meera', 'Noto Sans Malayalam',
| |
| -apple-system, sans-serif;
| |
| }
| |
| | |
| .av-card-title a {
| |
| color: #212529;
| |
| text-decoration: none;
| |
| }
| |
| | |
| .av-card-title a:hover {
| |
| color: #667eea;
| |
| }
| |
| | |
| .av-card-intro {
| |
| font-size: 0.95em;
| |
| color: #6c757d;
| |
| line-height: 1.6;
| |
| font-family: 'Manjari', 'Meera', 'Noto Sans Malayalam',
| |
| -apple-system, sans-serif;
| |
| }
| |
| | |
| .av-card-meta {
| |
| font-size: 0.85em;
| |
| color: #868e96;
| |
| margin-top: auto;
| |
| padding-top: 6px;
| |
| border-top: 1px solid #f1f3f5;
| |
| }
| |
| | |
| /* ----------------------------------------------------------------
| |
| LATEST ARTICLES — auto grid (SMW or manual)
| |
| ---------------------------------------------------------------- */
| |
| | |
| .av-latest-grid {
| |
| display: grid;
| |
| grid-template-columns: repeat(4, 1fr);
| |
| gap: 16px;
| |
| margin-bottom: 8px;
| |
| }
| |
| | |
| .av-latest-card {
| |
| background: white;
| |
| border: 1px solid #dee2e6;
| |
| border-radius: 8px;
| |
| overflow: hidden;
| |
| display: flex;
| |
| flex-direction: column;
| |
| }
| |
| | |
| /* ----------------------------------------------------------------
| |
| META BADGES shared across featured/cards/latest
| |
| ---------------------------------------------------------------- */
| |
| | |
| .av-meta-author {
| |
| font-weight: 600;
| |
| color: #495057;
| |
| }
| |
| | |
| .av-meta-date {
| |
| color: #868e96;
| |
| }
| |
| | |
| .av-meta-category {
| |
| background: #667eea;
| |
| color: white;
| |
| padding: 2px 10px;
| |
| border-radius: 12px;
| |
| font-size: 0.82em;
| |
| font-weight: 600;
| |
| }
| |
| | |
| /* ----------------------------------------------------------------
| |
| BROWSE BY LANGUAGE
| |
| ---------------------------------------------------------------- */
| |
| | |
| .av-browse-row {
| |
| display: flex;
| |
| gap: 20px;
| |
| margin-bottom: 8px;
| |
| }
| |
| | |
| .av-browse-box {
| |
| flex: 1 1 0;
| |
| padding: 16px 20px;
| |
| border-radius: 8px;
| |
| }
| |
| | |
| .av-browse-ml {
| |
| background: #e8f4fd;
| |
| border-left: 4px solid #4a9edd;
| |
| }
| |
| | |
| .av-browse-en {
| |
| background: #fff8e6;
| |
| border-left: 4px solid #f59e0b;
| |
| }
| |
| | |
| .av-browse-heading {
| |
| font-size: 1.15em;
| |
| font-weight: 700;
| |
| margin-bottom: 10px;
| |
| color: #212529;
| |
| font-family: 'Manjari', 'Meera', 'Noto Sans Malayalam',
| |
| -apple-system, sans-serif;
| |
| }
| |
| | |
| .av-browse-list {
| |
| list-style: none;
| |
| padding: 0;
| |
| margin: 0;
| |
| }
| |
| | |
| .av-browse-list li {
| |
| padding: 5px 0;
| |
| border-bottom: 1px solid rgba(0,0,0,0.07);
| |
| font-size: 0.98em;
| |
| }
| |
| | |
| .av-browse-list li:last-child {
| |
| border-bottom: none;
| |
| }
| |
| | |
| .av-browse-list a {
| |
| color: #0056b3;
| |
| text-decoration: none;
| |
| }
| |
| | |
| .av-browse-list a:hover {
| |
| text-decoration: underline;
| |
| }
| |
| | |
| /* ----------------------------------------------------------------
| |
| RESPONSIVE — tablet and mobile
| |
| ---------------------------------------------------------------- */
| |
| | |
| @media (max-width: 900px) {
| |
| .av-latest-grid {
| |
| grid-template-columns: repeat(2, 1fr);
| |
| }
| |
| }
| |
| | |
| @media (max-width: 700px) {
| |
| .av-featured {
| |
| flex-direction: column;
| |
| }
| |
| .av-featured-image img {
| |
| max-width: 100%;
| |
| }
| |
| .av-cards-row {
| |
| flex-direction: column;
| |
| }
| |
| .av-browse-row {
| |
| flex-direction: column;
| |
| }
| |
| .av-latest-grid {
| |
| grid-template-columns: repeat(2, 1fr);
| |
| }
| |
| } | | } |
|
| |
|
| @media (max-width: 480px) {
| | /* ആർട്ടിക്കിൾ പേജിനുള്ളിലെ മെയിൻ കണ്ടെന്റ് ഏരിയയുടെ വീതി ക്രമീകരണം */ |
| .av-latest-grid {
| | body.user-anonymous .article-main-wrapper { |
| grid-template-columns: 1fr;
| | width: 100% !important; |
| } | | float: none !important; |
| } | | } |
