ميدياويكي:Common.css

ملاحظة: بعد النشر، أنت قد تحتاج إلى إفراغ الكاش الخاص بمتصفحك لرؤية التغييرات.

• فايرفوكس / سافاري: أمسك Shift أثناء ضغط Reload، أو اضغط على إما Ctrl-F5 أو Ctrl-R (⌘-R على ماك)
• جوجل كروم: اضغط Ctrl-Shift-R (⌘-Shift-R على ماك)
• إنترنت إكسبلورر/إيدج: أمسك Ctrl أثناء ضغط Refresh، أو اضغط Ctrl-F5
• أوبرا: اضغط Ctrl-F5.

/* الأنماط المتراصة CSS المعروضة هنا ستؤثر على كل الواجهات */

body {
    background: #4E5255;
}

div#bodyContent {
    text-align: justify;
}

li#footer-poweredbyico {
    display: none;
}

li#footer-info-lastmod {
    display: none;
}


ul li {
    margin-bottom: 8px;
    padding-bottom: 5px;
    font-size: 16px;
    line-height: 1.5;
    cursor: pointer;
}

/* Mobile-specific styles for the wordmark and title */
@media (max-width: 768px) {
    #p-logo-text {
        background-size: 30px 30px; /* Adjust size for the mobile logo */
        background-repeat: no-repeat;
        text-indent: 0; /* Reset text indent to show the title */
        width: auto; /* Allow the container to adjust width */
        height: 30px; /* Set height of the logo */
        margin: 0; /* Remove centering margins */
        padding-left: 35px; /* Add padding to the left to make space for the logo */
        display: flex; /* Use flexbox for horizontal alignment */
        align-items: center; /* Vertically center align logo and text */
        right: 10px!important;
    }

    #p-logo-text::before {
        content: ''; /* Create a pseudo-element for the logo */
        display: inline-block;
        width: 45px; /* Width of the logo */
        height: 45px; /* Height of the logo */
        background-image: url("/stories/resources/assets/logo.svg"); /* Path to your mobile logo */
        background-size: contain; /* Scale the logo properly */
        background-repeat: no-repeat;
        margin-left: 5px; /* Space between the logo and title */

    }

    .mw-wiki-title {
        display: inline-block; /* Display title beside the logo */
        font-size: 25px !important; /* Adjust font size as needed */
        font-weight: bold;
        color: #3366cc !important;
        font-family: 'Segoe UI','Segoe UI Emoji','Segoe UI Symbol','Lato','Liberation Sans','Noto Sans','Helvetica Neue','Helvetica',sans-serif !important;
        margin: 0;
        color: inherit; /* Use the inherited color for the title */
    }
}

img.attachment-full.size-full {
    width: 100%;
    height: auto;
}


.related-pages-container {
    display: flex;
    justify-content: center;
    padding: 10px;
}

.related-pages-list {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    padding: 0;
    margin: 0;
    max-width: 100%;
}

.related-page-item {
    width: calc(100% / 2 - 15px); /* For two columns */
    max-width: 200px;
    text-align: center;
}

@media screen and (min-width: 600px) {
    .related-page-item {
        width: calc(100% / 3 - 15px); /* For three columns on larger screens */
    }
}

.related-page-thumbnail {
    width: 100%;
    height: auto;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.related-page-title {
    display: block;
    margin-top: 5px;
    font-size: 14px;
    font-weight: bold;
    color: #333;
}


/* قالب:ResponsiveArticleItem */

    .responsive-article-list ul {
      display: flex;
      flex-wrap: wrap;
      list-style: none;
      padding: 0;
      margin: 0;
      justify-content: space-evenly;
    }

    .responsive-article-list li {
      flex: 1 1 calc(25% - 20px); /* Default: 4 items per row */
      margin: 10px;
      box-sizing: border-box;
      text-align: center;
    }

    .responsive-article-list .item-wrapper {
      display: flex;
      flex-direction: column; /* Ensure thumbnail and title stack vertically */
      align-items: center;
    }

    .responsive-article-list .thumbnail img {
      max-width: 100%;
      height: auto;
      border-radius: 8px;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }

    .responsive-article-list .title {
      margin-top: 8px;
      font-size: 1rem;
      font-weight: bold;
      width: 100%; /* Match the width of the thumbnail */
      text-align: center;
    }

    /* 3 items per row for medium screens */
    @media (max-width: 992px) {
      .responsive-article-list li {
        flex: 1 1 calc(33.333% - 20px);
      }
    }

    /* 2 items per row for small screens */
    @media (max-width: 768px) {
      .responsive-article-list li {
        flex: 1 1 calc(50% - 20px);
      }
    }

    /* 1 item per row for very small screens */
    @media (max-width: 576px) {
      .responsive-article-list li {
        flex: 1 1 100%;
      }
    }