مدیاویکی:Common.css: تفاوت میان نسخهها
Nazarzadeh (بحث | مشارکتها) بدون خلاصۀ ویرایش |
Nazarzadeh (بحث | مشارکتها) بدون خلاصۀ ویرایش |
||
| خط ۱٬۲۶۳: | خط ۱٬۲۶۳: | ||
On wide screens, show these as two columns | On wide screens, show these as two columns | ||
On narrow and mobile screens, let them collapse into a single column */ | On narrow and mobile screens, let them collapse into a single column */ | ||
. | .mainpage-portals { | ||
float: right; | |||
width: 12.5%; | |||
margin: 12px auto; | |||
} | } | ||
.portal- | .portal-container-2 { | ||
display: grid; | |||
grid-gap: 15px; | |||
grid-template-columns: repeat(2, auto); | |||
grid-template-rows: auto; | |||
width: 100% | |||
} | } | ||
.portal- | .portal-container-3 { | ||
display: grid; | |||
grid-gap: 15px; | |||
grid-template-columns: repeat(3, auto); | |||
grid-template-rows: auto; | |||
width: 100% | |||
} | } | ||
.portal- | .portal-container-4 { | ||
display: grid; | |||
grid-gap: 15px; | |||
grid-template-columns: repeat(4, auto); | |||
grid-template-rows: auto; | |||
width: 100% | |||
} | } | ||
.portal- | .portal-container-5 { | ||
display: grid; | |||
grid-gap: 15px; | |||
grid-template-columns: repeat(5, auto); | |||
grid-template-rows: auto; | |||
width: 100% | |||
} | } | ||
.portal- | .portal-container-6 { | ||
display: grid; | |||
grid-gap: 15px; | |||
grid-template-columns: repeat(6, auto); | |||
grid-template-rows: auto; | |||
width: 100% | |||
} | } | ||
@media only screen and (max-width: | .portal-container-7 { | ||
display: grid; | |||
grid-gap: 15px; | |||
grid-template-columns: repeat(7, auto); | |||
grid-template-rows: auto; | |||
width: 100% | |||
} | |||
.portal-column-2-3 { | |||
grid-column-end: span 2; | |||
} | |||
.portal-column-3-4 { | |||
grid-column-end: span 3; | |||
} | |||
.portal-column-1-2, | |||
.portal-column-1-3, | |||
.portal-column-1-4, | |||
.portal-column-1-5, | |||
.portal-column-1-6, | |||
.portal-column-1-7 { | |||
grid-column-end: span 1; | |||
} | |||
.portal-column-2-2 { | |||
grid-column-end: span 2; | |||
} | |||
.portal-column-3-3 { | |||
grid-column-end: span 3; | |||
} | |||
.portal-column-4-4 { | |||
grid-column-end: span 4; | |||
} | |||
.portal-column-5-5 { | |||
grid-column-end: span 5; | |||
} | |||
.portal-column-6-6 { | |||
grid-column-end: span 6; | |||
} | |||
.portal-column-7-7 { | |||
grid-column-end: span 7; | |||
} | |||
@media only screen and (max-width: 700px) { | |||
.mainpage-portals { | |||
width: 25%; | |||
} | |||
/* Decouple the columns on narrow screens */ | /* Decouple the columns on narrow screens */ | ||
.portal-column- | .portal-container-2, | ||
.portal-column- | .portal-container-3, | ||
.portal-column- | .portal-container-4, | ||
.portal-column- | .portal-container-5, | ||
.portal-column- | .portal-container-6, | ||
.portal-column-right- | .portal-container-7 { | ||
display: block; | |||
} | |||
.portal-column-1-2, | |||
.portal-column-3-4, | |||
.portal-column-1-3, | |||
.portal-column-2-3, | |||
.portal-column-2-2, | |||
.portal-column-3-3, | |||
.portal-column-4-4, | |||
.portal-column-5-5, | |||
.portal-column-6-6, | |||
.portal-column-7-7 { | |||
flo at: inherit; | |||
wid th: 100%; | |||
margin-top: 16px; | |||
display: block !important; | |||
text-align: center; | |||
} | |||
.portal-column-1-4 { | |||
wid th: calc(50% - 16px); | |||
} | |||
.portal-column-1-6 { | |||
wid th: calc(33.3% - 16px); | |||
} | |||
.portal-column-1-7 { | |||
flo at: right; | |||
wid th: calc(25% - 16px); | |||
} | |||
} | |||
@media only screen and (max-width: 600px) { | |||
.portal-column-1-4, | |||
.portal-column-1-6, | |||
.portal-column-1-5 { | |||
float: inherit; | float: inherit; | ||
width: | width: 100%; | ||
margin: 0; | |||
display: block !important; | |||
text-align: center; | |||
} | } | ||
} | } | ||
/* temporary fix for T86979 */ | /* temporary fix for T86979 */ | ||
.ui-dialog { right: auto; } | .ui-dialog { right: auto; } | ||