মিডিয়াউইকি:Common.css: সংশোধিত সংস্করণের মধ্যে পার্থক্য
সম্পাদনা সারাংশ নেই ট্যাগ: পুনর্বহালকৃত |
সম্পাদনা সারাংশ নেই ট্যাগ: পুনর্বহালকৃত |
||
৪৮৩ নং লাইন: | ৪৮৩ নং লাইন: | ||
/* | /* ডেস্কটপ ভিউতে ইনফোবক্স ডিজাইন */ | ||
.infobox-person-officeholder { | .infobox-person-officeholder { | ||
width: | width: 70%; /* ডেস্কটপ ভিউতে ৭০% চওড়া */ | ||
margin: 20px auto; | |||
background: #f8f9fa; | display: block; | ||
border: 1px solid #ddd; | background-color: #f8f9fa; /* বক্সের ব্যাকগ্রাউন্ড কালার */ | ||
border: 1px solid #ddd; /* সীমানা */ | |||
box-shadow: 2px | border-radius: 8px; /* গোলাকার কোণা */ | ||
box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1); | |||
padding: 20px; | |||
box-sizing: border-box; /* বক্স সাইজিং ঠিক রাখা */ | |||
overflow: hidden; /* ডিজাইন ঠিক রাখতে */ | |||
} | } | ||
.infobox-title, .infobox-subtitle, .infobox-header { | |||
text-align: center; | |||
padding: 15px; | |||
background-color: #ebecf0; /* টাইটেল বক্স কালার */ | |||
border-radius: 5px; | |||
} | } | ||
.infobox-office, .infobox-organization { | |||
color: #3465c5; | |||
} | } | ||
/* | /* ডেস্কটপ ভিউতে টেবিলের ডিজাইন */ | ||
.infobox- | .infobox-person-officeholder table { | ||
width: 100%; | |||
border-collapse: collapse; | |||
} | } | ||
.infobox- | .infobox-person-officeholder th, | ||
.infobox-person-officeholder td { | |||
padding: 12px; | |||
text-align: left; | |||
padding: | border-bottom: 1px solid #ddd; | ||
text-align: | |||
} | } | ||
.infobox-image-wrapper { | .infobox-image-wrapper { | ||
width: 200px; | |||
margin: 0 auto; | |||
} | } | ||
.infobox-img { | .infobox-img { | ||
width: 100%; | width: 100%; | ||
height: | max-height: 200px; | ||
object-fit: cover; | |||
border-radius: 5px; | |||
} | } | ||
/* ডেস্কটপ ভিউতে সিগনেচার */ | |||
.infobox-signature img { | |||
max-width: 100px; | |||
height: auto; | |||
/* সিগনেচার | |||
.infobox-signature { | |||
} | } | ||
/* | /* মোবাইল ভিউতে ইনফোবক্স ডিজাইন */ | ||
@media (max-width: 767px) { | @media (max-width: 767px) { | ||
.infobox-person-officeholder { | .infobox-person-officeholder { | ||
৫৭১ নং লাইন: | ৫৪৫ নং লাইন: | ||
margin: 10px auto; /* সেন্টার করা */ | margin: 10px auto; /* সেন্টার করা */ | ||
display: block; | display: block; | ||
background-color: #f8f9fa; /* বক্সের ব্যাকগ্রাউন্ড কালার */ | |||
border: 1px solid #ddd; /* সীমানা */ | |||
border-radius: 8px; /* গোলাকার কোণা */ | |||
box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1); | box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1); | ||
border- | padding: 15px; /* কিছু প্যাডিং দিলাম যাতে কন্টেন্ট খুব কাছে না আসে */ | ||
overflow: hidden; /* ডিজাইন ঠিক | box-sizing: border-box; /* বক্স সাইজিং ঠিক রাখা */ | ||
overflow: hidden; /* ডিজাইন ঠিক রাখতে */ | |||
} | } | ||
/* | /* মোবাইল ভিউতে ইনফোবক্সের টেবিল ফিট করা */ | ||
.infobox-person-officeholder table { | .infobox-person-officeholder table { | ||
width: 100%; | width: 100%; | ||
৫৮২ নং লাইন: | ৫৬০ নং লাইন: | ||
} | } | ||
.infobox-person-officeholder th, | .infobox-person-officeholder th, | ||
.infobox-person-officeholder td { | .infobox-person-officeholder td { | ||
৫৯৯ নং লাইন: | ৫৭৬ নং লাইন: | ||
.infobox-img { | .infobox-img { | ||
width: 100%; | width: 100%; | ||
height: auto; | |||
max-height: 250px; | max-height: 250px; | ||
object-fit: cover; /* ছবি ঠিকভাবে বসবে */ | object-fit: cover; /* ছবি ঠিকভাবে বসবে */ | ||
৬০৪ নং লাইন: | ৫৮২ নং লাইন: | ||
} | } | ||
/* মোবাইল ভিউতে সিগনেচার | /* মোবাইল ভিউতে সিগনেচার */ | ||
.infobox-signature img { | .infobox-signature img { | ||
max-width: 80px; | max-width: 80px; | ||
height: auto; | height: auto; | ||
} | |||
/* ইনফোবক্সের হেডার, টাইটেল এবং সেকশনের কালার ঠিক করা */ | |||
.infobox-title, .infobox-subtitle, .infobox-header { | |||
text-align: center; | |||
padding: 10px; | |||
background-color: #ebecf0; /* টাইটেল বক্স কালার */ | |||
border-radius: 5px; | |||
} | |||
/* অফিস এবং অর্গানাইজেশন কালার ঠিক করা */ | |||
.infobox-office, .infobox-organization { | |||
color: #3465c5; | |||
} | } | ||
} | } |