عرض مصدر أرابيكا:الصفحة الرئيسية/styles.css

/* ------------------ تنسيق المحتوى الأساسي ------------------ */
/* المحتوى الأساسي */
.mp-main {
	display: flex;
	flex-wrap: nowrap;
	max-width: 100%; /* EI8 - EI7 */
}

/* العمود الأيمن */
.mp-right {
	flex: 65%;
	display: flex;
	flex-direction: column;
	float: right; /* EI9 - EI8 - EI7 */
	max-width: 65%; /* EI9 - EI8 - EI7 */
	width: 64%; /* EI6 - EI5 - EI4 */
}

.mp-tfa /* مقالة اليوم المختارة */ {
	flex-grow: 1;
}
.mp-tga /* مقالة اليوم الجيدة */ {
	flex-grow: 2;
}
.mp-tfl /* قائمة اليوم المختارة */ {
	flex-grow: 3;
}
.mp-tfi /* صورة اليوم المختارة */ {
	flex-grow: 4;
}
.mp-tfp /* بوابة اليوم المختارة */ {
	flex-grow: 5;
}
.mp-what /* ما هي أرابيكا  */ {
	flex-grow: 6;
}

/* العمود الأيسر */
.mp-left {
	flex: 35%;
    display: flex;
    flex-direction: column;
    float: left; /* EI9 - EI8 - EI7*/
	max-width: 35%; /* EI9 - EI8 - EI7*/
	width: 35%; /* EI6 - EI5 - EI4 */
}

.mp-itn /* في الأخبار */ {
	flex-grow: 1;
}
.mp-itd /* في هذا اليوم */ {
	flex-grow: 2;
}
.mp-dyk /* هل تعلم */ {
	flex-grow: 3;
}
.mp-said /* قيل */ {
	flex-grow: 4;
}
.mp-cil /* الصحيح في اللغة */ {
	flex-grow: 5;
}
.mp-creatbox /* هل تود إنشاء مقالة */{
	flex-grow: 6;
}
/* 
إخفاء قسم (ما هي أرابيكا) في العمود الأيسر في الشاشات الأكثر من 845بكسل 
لأجل عرضه في آخر الترتيب في الشاشات الأقل من 845بكسل
*/ 
@media screen and (min-width: 845px) {
	.mp-whatresponsive {
		display: none;
	}
}

/* تنسيق الأقسام */
.mp-Sec {
	padding: 10px;
	margin: 3px;
	border: 1px solid #c6c9ff;
	border-radius: 5px;
	color: #000;
	background: #fafaff;
}
.mp-SecTitle {
    position: relative;
    height: 25px;
    margin:2px 0 8px 0;
    top:4px;
}
.mp-SecCont {
    position: absolute;
    right: 4px;
    top: -5px;
}
.mp-SecBg {
    position: relative;
    right: -8px;
    top: 0;
}
.mp-SecIcon {
    position: absolute;
    right: -3px;
    top: -6px;
}
.mp-h2 {
    position: absolute;
    right: 40px;
    top: 1px;
    font-weight: bold;
    font-size: 130%;
}

/* ضبط حجم الصور على مختلف الشاشات */
body img {
   	max-width: 100%;
    height: auto;
}
   
/* تنسيق المحتوى الأساسي على الشاشات الأقل من 845بكسل */
@media screen and (max-width: 845px) {
	/* المحتوى الأساسي */
	.mp-main {
    	flex-direction: column;
    }
    
    /* العمود الأيمن */
    .mp-right {
		float: none; /* EI9 */
		min-width: 100%; /* EI9 */
	}
	
	/* ترتيب الأقسام في العمود الأيمن */
    .mp-tfa /* مقالة اليوم المختارة */ {
		order: 1;
	}
	.mp-tga /* مقالة اليوم الجيدة */ {
		order: 3;
	}
	.mp-tfl /* قائمة اليوم المختارة */ {
		order: 4;
	}
	.mp-tfi /* صورة اليوم المختارة */ {
		order: 2;
	}
	
	/* العمود الأيسر */
	.mp-left {
		float: none; /* EI9 */
		min-width: 100%; /* EI9 */
	}
	
	/* ترتيب الأقسام في العمود الأيسر */
	.mp-itn /* في الأخبار */ {
		order: 1;
	}
	.mp-itd /* في هذا اليوم */ {
		order: 2;
	}
	.mp-dyk /* هل تعلم */ {
		order: 3;
	}
	.mp-whatresponsive /* ما هي أرابيكا */ {
		order: 4;
	}
	
	/* أقسام مخفية */
	.mp-tfp, /* بوابة اليوم المختارة */
    .mp-said, /* قيل */
    .mp-cil, /* الصحيح في اللغة */
    .mp-creatbox, /* هل تود إنشاء مقالة */ 
    .mp-what /* ما هي أرابيكا (العمود الأيمن) */ {
  		display:none;
    }
}

/* تنسيق الصفحة الرئيسية على تطبيق أرابيكا على الاندرويد */
.pcs-widen-image-ancestor {
	width: initial !important;
	height: initial !important;
}
div[class="mp-SecCont pcs-widen-image-ancestor"] {
	position: initial !important;
}

/* ------------------ تنسيق قسمي المقدمة ومشاريع شقيقة ------------------ */
/* المقدمة ومشاريع شقيقة */
.mp-intro,
.mp-sister {
	background: #f8f8f8;
	clear: both;
}

/* ضبط تمركز محتوى قسم مشاريع شقيقة */
#sister-projects-list {
	width: 100% !important;
	text-align: center !important;
}
#sister-projects-list div {
	text-align: right !important;
}

/* تنسيق المقدمة على واجهة منيرفانيو على سطح المكتب */
.mp-intro  tr:nth-child(2)  table {
	float: left !important;
}

/* تنسيق المقدمة ومشاريع شقيقة على الشاشات الأقل من 845 بكسل */
@media screen and (max-width: 845px) {
	/* تنسيق المقدمة على واجهة منيرفانيو */
	body.skin-minerva table,
	body.skin-minerva tbody,
	body.skin-minerva tr,
    body.skin-minerva td {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box;
    }
    
    /* تنسيق المقدمة على باقي الواجهات */
    body table,
	body tbody,
	body tr,
    body td {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box;
    }
    
    /* ضبط تمركز قسم البوابات في المقدمة */
    #wikiportals tbody tr:nth-child(1) {
    	text-align: center;
    }
}

/* تنسيق المقدمة على الشاشات الأكثر من 480بكسل */
@media screen and (min-width: 480px) {
	#wikiportals tbody tr:nth-child(1) {
    	columns: 3 auto;
    }	
}

/* تنسيق المقدمة على الشاشات الأقل من 480بكسل و الأكثر من 320بكسل */
@media screen and (min-width: 320px) and (max-width: 480px) {
	#wikiportals tbody tr:nth-child(1) {
    	columns: 2 auto;
    }	
}