مدیاویکی:Common.css: تفاوت میان نسخهها
بدون خلاصۀ ویرایش |
بدون خلاصۀ ویرایش |
||
| خط ۲۴۴: | خط ۲۴۴: | ||
.mp-left { | .mp-left { | ||
order: 2; | order: 2; | ||
} | |||
} | |||
/**************************** newspaper *******************************/ | |||
/* Newspaper Issue Page */ | |||
.nw-page { | |||
direction: rtl; | |||
max-width: 1180px; | |||
margin: 0 auto; | |||
padding: 24px 18px; | |||
font-family: Vazirmatn, Tahoma, Arial, sans-serif; | |||
color: #111827; | |||
} | |||
.nw-grid { | |||
display: grid; | |||
grid-template-columns: 260px 1fr; | |||
gap: 22px; | |||
direction: ltr; | |||
align-items: start; | |||
} | |||
.nw-main, | |||
.nw-side { | |||
direction: rtl; | |||
} | |||
.nw-main { | |||
display: flex; | |||
flex-direction: column; | |||
gap: 22px; | |||
} | |||
.nw-side { | |||
display: flex; | |||
flex-direction: column; | |||
gap: 18px; | |||
} | |||
.nw-card { | |||
background: #fff; | |||
border: 1px solid #e5e7eb; | |||
border-radius: 12px; | |||
box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06); | |||
overflow: hidden; | |||
} | |||
.nw-card-header { | |||
padding: 18px 20px 8px; | |||
} | |||
.nw-card-title { | |||
font-size: 1.25rem; | |||
font-weight: 800; | |||
color: #111827; | |||
} | |||
.nw-card-body { | |||
padding: 14px 20px 22px; | |||
line-height: 2; | |||
font-size: 0.98rem; | |||
} | |||
.nw-hero { | |||
display: flex; | |||
justify-content: space-between; | |||
align-items: center; | |||
min-height: 92px; | |||
} | |||
.nw-hero h1 { | |||
margin: 0; | |||
font-size: 1.7rem; | |||
font-weight: 900; | |||
} | |||
.nw-subtitle { | |||
color: #6b7280; | |||
margin-top: 8px; | |||
} | |||
.nw-badge { | |||
display: inline-block; | |||
background: #eff6ff; | |||
color: #2563eb; | |||
border-radius: 999px; | |||
padding: 5px 12px; | |||
font-weight: 700; | |||
font-size: 0.85rem; | |||
} | |||
.nw-cover { | |||
background: #dbeafe; | |||
height: 330px; | |||
display: flex; | |||
align-items: center; | |||
justify-content: center; | |||
overflow: hidden; | |||
} | |||
.nw-cover img { | |||
width: 100%; | |||
height: 100%; | |||
object-fit: cover; | |||
} | |||
.nw-caption { | |||
padding: 12px 14px; | |||
text-align: center; | |||
font-size: 0.9rem; | |||
color: #6b7280; | |||
border-top: 1px solid #e5e7eb; | |||
} | |||
.nw-meta { | |||
display: grid; | |||
grid-template-columns: 1fr 1fr; | |||
gap: 10px 18px; | |||
} | |||
.nw-meta-label { | |||
color: #6b7280; | |||
} | |||
.nw-meta-value { | |||
font-weight: 700; | |||
} | |||
.nw-actions { | |||
display: flex; | |||
justify-content: center; | |||
gap: 12px; | |||
flex-wrap: wrap; | |||
} | |||
.nw-button { | |||
display: inline-block; | |||
background: #2563eb; | |||
color: #fff !important; | |||
text-decoration: none; | |||
border-radius: 8px; | |||
padding: 10px 18px; | |||
font-weight: 800; | |||
} | |||
.nw-button:hover { | |||
background: #1d4ed8; | |||
text-decoration: none; | |||
} | |||
.nw-highlights { | |||
counter-reset: item; | |||
margin: 0; | |||
padding: 0; | |||
list-style: none; | |||
} | |||
.nw-highlights li { | |||
counter-increment: item; | |||
margin-bottom: 10px; | |||
} | |||
.nw-highlights li::before { | |||
content: counter(item); | |||
display: inline-flex; | |||
width: 22px; | |||
height: 22px; | |||
align-items: center; | |||
justify-content: center; | |||
background: #eff6ff; | |||
color: #2563eb; | |||
border-radius: 6px; | |||
margin-left: 8px; | |||
font-weight: 800; | |||
font-size: 0.8rem; | |||
} | |||
.nw-entry-list { | |||
margin: 0; | |||
padding-right: 20px; | |||
} | |||
.nw-entry-list li { | |||
margin-bottom: 9px; | |||
} | |||
.nw-gallery { | |||
display: grid; | |||
grid-template-columns: repeat(4, 1fr); | |||
gap: 14px; | |||
} | |||
.nw-gallery-item { | |||
height: 135px; | |||
background: #f3f4f6; | |||
border: 1px solid #e5e7eb; | |||
border-radius: 8px; | |||
overflow: hidden; | |||
} | |||
.nw-gallery-item img { | |||
width: 100%; | |||
height: 100%; | |||
object-fit: cover; | |||
} | |||
.nw-prev-next { | |||
display: flex; | |||
justify-content: space-between; | |||
align-items: center; | |||
} | |||
.nw-muted { | |||
color: #6b7280; | |||
font-size: 0.9rem; | |||
} | |||
@media screen and (max-width: 850px) { | |||
.nw-grid { | |||
display: flex; | |||
flex-direction: column; | |||
} | |||
.nw-main { | |||
order: 1; | |||
} | |||
.nw-side { | |||
order: 2; | |||
} | |||
.nw-meta { | |||
grid-template-columns: 1fr; | |||
} | |||
.nw-gallery { | |||
grid-template-columns: repeat(2, 1fr); | |||
} | |||
.nw-hero { | |||
flex-direction: column; | |||
align-items: flex-start; | |||
gap: 12px; | |||
} | } | ||
} | } | ||