مدیاویکی:Mobile.css: تفاوت میان نسخه‌ها

    از ویکی پاسخ
    بدون خلاصۀ ویرایش
    برچسب‌ها: ویرایش همراه ویرایش از وبگاه همراه
    بدون خلاصۀ ویرایش
    خط ۲۹: خط ۲۹:
    }
    }
    /* portals */
    /* portals */
    .portal-column-1-2 {
    .portal-container-2 {
        float: right;
    display: grid;
    width: calc(50% - 8px);
    grid-gap: 15px;  
    grid-template-columns: repeat(3, auto);
    grid-template-rows: auto;
    width: 100%
    }
    }
    .portal-column-right-wide {
    .portal-container-3 {
        float: right;
    display: grid;
        width: 60%;
    grid-gap: 15px;
    grid-template-columns: repeat(3, auto);
    grid-template-rows: auto;
    width: 100%
    }
    }
    .portal-column-left-narrow {
    .portal-container-4 {
        float: left;
    display: grid;
        width: calc(40% - 16px);
    grid-gap: 15px;  
    grid-template-columns: repeat(4, auto);
    grid-template-rows: auto;
    width: 100%
    }
    }
    .portal-column-1-4 {
    .portal-container-5 {
        float: right;
    display: grid;
    width: calc(25% - 16px);
    grid-gap: 15px;  
    grid-template-columns: repeat(5, auto);
    grid-template-rows: auto;
    width: 100%
    }
    }
    .portal-column-3-4 {
    .portal-container-6 {
        float: right;
    display: grid;  
    width: 75%;
    grid-gap: 15px;
    margin-left: 16px;
    grid-template-columns: repeat(6, auto);  
    grid-template-rows: auto;
    width: 100%
    }
    }
    .portal-column-1-3 {
    .portal-container-7 {
    float: right;
    display: grid;
    width: calc(33% - 16px);
    grid-gap: 15px;  
    grid-template-columns: repeat(7, auto);
    grid-template-rows: auto;
    width: 100%
    }
    }
    .portal-column-2-3 {
    .portal-column-2-3 {
        float: right;
    grid-column-end: span 2;  
        width: 67%;
        margin-left: 16px;
    }
    }
    .portal-column-1-6 {
    .portal-column-3-4 {
        float: right;
    grid-column-end: span 3;  
    width: calc(16.6% - 16px);
    }
    }
    .portal-column-1-2,
    .portal-column-1-3,
    .portal-column-1-4,
    .portal-column-1-5,
    .portal-column-1-6,
    .portal-column-1-7 {
    .portal-column-1-7 {
    float: right;
    grid-column-end: span 1;
    width: calc(14.28% - 16px);
    }
    .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;
    }
    }
    @media only screen and (max-width: 800px) {
    .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) {
         /* Decouple the columns on narrow screens */
         /* Decouple the columns on narrow screens */
        .portal-container-2,
        .portal-container-3,
        .portal-container-4,
        .portal-container-5,
        .portal-container-6,
        .portal-container-7 {
    display: block;
    }
         .portal-column-1-2,
         .portal-column-1-2,
        .portal-column-right-wide,
        .portal-column-left-narrow,
         .portal-column-3-4,
         .portal-column-3-4,
         .portal-column-1-3,
         .portal-column-1-3,
         .portal-column-2-3 {
         .portal-column-2-3,
             float: inherit;
        .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;
             width: 100%;
             width: 100%;
             margin: 0;
             margin-top: 16px;
             display: block !important;
             display: block !important;
            text-align: center;
         }
         }
         .portal-column-1-4 {
         .portal-column-1-4 {
    width: calc(50% - 16px);
    wid th: calc(50% - 16px);
         }
         }
         .portal-column-1-6 {
         .portal-column-1-6 {
    width: calc(33.3% - 16px);
    wid th: calc(33.3% - 16px);
         }
         }
         .portal-column-1-7 {
         .portal-column-1-7 {
    float: right;
    flo at: right;
    width: calc(25% - 16px);
    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;
            width: 100%;
            margin: 0;
            display: block !important;
            text-align: center;
        }
    }
    }
    /* ثابت کردن منوی بالا */
    /* ثابت کردن منوی بالا */

    نسخهٔ ‏۷ سپتامبر ۲۰۲۱، ساعت ۰۸:۰۸

    * Vazir Font */
     @font-face {
         font-family: 'vazir';
         src: url('/fonts/Vazir.woff2') format('woff2'), url('/fonts/Vazir.woff') format('woff'), url('/fonts/Vazir.ttf') format('truetype');
    }
    /* Amiri Font */
    @font-face {
      font-family: 'Amiri';
      font-style: normal;
      font-weight: 400;
      src: local('Amiri Regular'), local('Amiri-Regular'), url(https://fonts.gstatic.com/s/amiri/v13/J7aRnpd8CGxBHpUrtLMA7w.woff2) format('woff2');
      unicode-range: U+0600-06FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE80-FEFC;
    }
    body, h1, h2, h3, h4 {
      /* generally a sans-serif font should be here */
      font-family:  vazir, Tahoma, 'Iranian Sans', 'DejaVu Sans', 'Noto Sans Arabic', 'Noto Kufi Arabic', 'Droid Arabic Kufi', sans-serif  !important;
    }
    /* طراحی صفحه اول */
     .mainpage-top {
        background-image: url(/mainpage-top-2.jpg);
        background-repeat: no-repeat;
        background-size: cover;
    	background-position-y: 60%;
    	background-position-x: center;
    }
    /* حذف فاصله خالی اول مقالات */
    p br {
    	display: none;
    }
    /* portals */
    .portal-container-2 {
    	display: grid; 
    	grid-gap: 15px; 
    	grid-template-columns: repeat(3, auto);
    	grid-template-rows: auto;  
    	width: 100%
    }
    .portal-container-3 {
    	display: grid; 
    	grid-gap: 15px; 
    	grid-template-columns: repeat(3, auto); 
    	grid-template-rows: auto;  
    	width: 100%
    }
    .portal-container-4 {
    	display: grid; 
    	grid-gap: 15px; 
    	grid-template-columns: repeat(4, auto); 
    	grid-template-rows: auto;  
    	width: 100%
    }
    .portal-container-5 {
    	display: grid; 
    	grid-gap: 15px; 
    	grid-template-columns: repeat(5, auto); 
    	grid-template-rows: auto;  
    	width: 100%
    }
    .portal-container-6 {
    	display: grid; 
    	grid-gap: 15px; 
    	grid-template-columns: repeat(6, auto); 
    	grid-template-rows: auto;  
    	width: 100%
    }
    .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) {
        /* Decouple the columns on narrow screens */
        .portal-container-2,
        .portal-container-3, 
        .portal-container-4, 
        .portal-container-5, 
        .portal-container-6, 
        .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;
            width: 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;
            width: 100%;
            margin: 0;
            display: block !important;
            text-align: center;
        }
    }
    /* ثابت کردن منوی بالا */
    .header-container.header-chrome {
        position: fixed;
        width: calc(100% - 32px);
        z-index: 1;
    }
    .page-heading {
        margin-top: 54px;
    }
    .overlay {
        z-index: 10
    }
    .header-container.header-chrome.overlay-header-container {
        width: 100%;
    }
    img {
    	max-width: 100%; 
    	height: auto !important;
        clip: rect(auto, auto, auto, auto) !important;
    }