Jump to content

MediaWiki:Mobile.css: Difference between revisions

← Older edit
No edit summary
No edit summary
 
(8 intermediate revisions by the same user not shown)
Line 1: Line 1:
/* All CSS here will be loaded for users of the mobile site */
/* All CSS here will be loaded for users of the mobile site */


/* new front page CSS */
/* inZOI Wiki Mobile Styles */
@media (max-width: 768px) {
  /* Show/hide appropriate views */
  .desktop-view {
    display: none;
  }
  .mobile-view {
    display: block;
  }
  /* Hero section adjustments - MORE COMPACT */
  .hero-banner {
    padding: 0.3em 0.2em; /* SMALLER - Reduced padding */
    margin: 0.4em 0; /* SMALLER - Reduced margin */
    border-radius: 4px; /* SMALLER - Optional: slightly smaller radius */
  }
  .hero-banner img {
    max-height: 150px; /* SMALLER - Reduced image height */
    display: block; /* Ensure no extra space below image */
    margin: 0 auto; /* Keep centered */
  }
  .hero-title {
    font-size: 1.4em; /* SMALLER */
    margin-top: 0.15em; /* TIGHTER */
    margin-bottom: 0; /* TIGHTER */
    line-height: 1.2; /* TIGHTER */
  }
  .hero-subtitle {
    font-size: 0.9em; /* SMALLER */
    margin-top: 0.1em; /* TIGHTER */
    margin-bottom: 0.1em; /* TIGHTER */
    line-height: 1.2; /* TIGHTER */
  }
  .quick-access-buttons {
    flex-direction: column;
    align-items: center;
    margin-top: 1em; /* Adjusted slightly */
  }
  .button {
    width: 80%;
    text-align: center;
    margin-bottom: 0.5em;
    padding: 0.5em 1em; /* Slightly smaller buttons */
  }
  /* About Section adjustments - MORE COMPACT */
  .about-section {
    padding: 0.5em 0.3em; /* SMALLER - Reduced padding */
    margin: 0.4em 0; /* SMALLER - Reduced margin, use 0 horizontal margin for full width */
    font-size: 0.9em; /* SMALLER */
    line-height: 1.4; /* TIGHTER */
    width: 100%; /* Ensure it takes full width */
    box-sizing: border-box; /* Include padding in width calculation */
    border-radius: 4px; /* SMALLER - Optional: slightly smaller radius */
  }
  .about-section h2 {
    font-size: 1.2em; /* SMALLER */
    margin-bottom: 0.2em; /* TIGHTER */
  }
  .about-section p {
    margin-bottom: 0.2em; /* TIGHTER */
  }
  /* Featured content adjustments */
  .featured-cards {
    grid-template-columns: 1fr;
  }
  /* Main sections mobile - FULL WIDTH */
  .main-sections-mobile {
    margin: 0.8em 0; /* SMALLER - Reduced top/bottom margin, NO horizontal margin */
    width: 100%; /* Use full width */
    max-width: none; /* Override any inherited max-width */
    box-sizing: border-box; /* Include padding in width */
  }
  .wiki-table-mobile {
    width: 100%;
    border-spacing: 0; /* TIGHTER - Remove spacing between table cells (borders will touch if any) */
    margin: 0; /* Remove default margins */
    background-color: #f8f9fa; /* Keep background */
    border-radius: 0; /* REMOVED - No rounded corners for edge-to-edge */
    padding: 0; /* REMOVED - No padding on the table container itself */
    box-shadow: none; /* REMOVED - Optional: remove shadow for edge-to-edge */
    box-sizing: border-box;
    display: block; /* Ensure block behavior */
    border-collapse: collapse; /* Make borders merge if needed */
  }
  /* Style table headers and cells within the full-width table */
  .wiki-table-mobile th,
  .wiki-table-mobile td {
      width: 100% !important; /* Force full width */
      display: block; /* Stack elements vertically */
      box-sizing: border-box; /* Include padding/border in width */
      border-radius: 0; /* No radius on individual cells/headers */
      /* Add borders if desired for separation */
      border-left: none;
      border-right: none;
      border-bottom: 1px solid #ddd; /* Example border */
  }
  .wiki-table-mobile th {
      padding: 0.8em 0.5em; /* Adjust padding */
      font-size: 1.1em; /* Slightly smaller header font */
      border-top: 1px solid #ddd; /* Example border */
  }
  .wiki-table-mobile td {
      padding: 0.8em 0.5em; /* Adjust padding */
      background-color: #fff; /* Reset background if needed */
      box-shadow: none; /* Remove individual cell shadows */
  }
  /* Remove bottom border from the very last cell */
  .wiki-table-mobile tr:last-child td:last-child {
      border-bottom: none;
  }
  /* Ensure two-column lists inside stack */
  .two-column,
  .two-column-mobile,
  .two-column-list { /* Target all similar classes */
    column-count: 1; /* Force single column */
    grid-template-columns: 1fr; /* Ensure grid also stacks */
    display: block; /* Override grid if necessary */
  }
  .two-column-list li,
  .two-column li { /* Add some spacing if needed */
      margin-bottom: 0.3em;
  }
  /* Stats adjustments - Make them full width too */
  .stats-container {
    flex-direction: column;
    gap: 0.5em; /* Reduce gap */
    width: 100%;
    box-sizing: border-box;
  }
  .stat-box {
    width: 100%;
    margin-bottom: 0.5em; /* Space between boxes */
    padding: 0.8em; /* Adjust padding */
    border-radius: 4px;
    box-sizing: border-box;
  }
  .wiki-stats {
    padding: 1em 0.2em; /* Adjust container padding */
    margin: 0.8em 0; /* Use 0 horizontal margin */
    width: 100%;
    box-sizing: border-box;
    border-radius: 0; /* Optional: remove radius */
  }
  .wiki-stats h2 {
      font-size: 1.5em; /* Adjust size */
      margin-bottom: 0.6em; /* Adjust spacing */
  }
  /* Footer adjustments - Make full width */
  .wiki-footer {
    padding: 1em 0.5em; /* Adjust padding */
    border-radius: 0; /* REMOVED - Optional for edge-to-edge */
    margin-top: 1em; /* Adjust spacing */
    width: 100%;
    box-sizing: border-box;
  }
  .footer-links {
    flex-direction: column;
    gap: 8px; /* Adjust gap */
  }
  /* Featured content section header adjustments (if used on mobile) */
  .featured-content .section-header {
    flex-direction: column;
    text-align: center;
  }
  .featured-content .section-header h2 {
    margin-bottom: 0.5em;
    text-align: center;
  }
  /* Card content alignment */
  .card-content {
    text-align: center;
  }
  /* List item spacing inside sections */
  .section-content ul {
    padding-left: 1em; /* Keep some indent */
    margin-top: 0.3em;
    margin-bottom: 0.3em;
  }
  .section-content li {
    margin-bottom: 0.3em; /* Reduce list item spacing */
  }
} /* End of @media (max-width: 768px) */
/* Remove redundant rules in smaller breakpoint if covered above */
@media (max-width: 480px) {
  /* Further adjustments for very small screens ONLY if needed */
  /* Most rules from 768px should cascade down */
  .hero-banner img {
    max-height: 120px; /* Even smaller image if needed */
  }
  .hero-title {
      font-size: 1.3em;
  }
  .hero-subtitle {
      font-size: 0.85em;
  }
  .about-section {
    padding: 0.4em 0.2em;
    font-size: 0.85em;
  }
  .about-section h2 {
    font-size: 1.1em;
  }
  .wiki-table-mobile th,
  .wiki-table-mobile td {
      padding: 0.6em 0.4em; /* Slightly less padding on very small screens */
  }
  .wiki-table-mobile th {
      font-size: 1.0em;
  }
  /* .two-column etc rules already set to 1 column above */
} /* End of @media (max-width: 480px) */
/* Keep infobox full width */
.infobox {
.infobox {
     position: relative !important;
     position: relative !important;
     width: 100% !important;
     width: 100% !important;
    float: none !important;
    clear: both !important;
    margin: 0.5em 0 !important; /* Adjust margin */
    box-sizing: border-box; /* Add box-sizing */
}
}
Retrieved from "https://inzoiwiki.com/wiki/MediaWiki:Mobile.css"