Template:GameContent/NavTables.css: Difference between revisions
Jump to navigation
Jump to search
Lightning266 (talk | contribs) (Test) |
Lightning266 (talk | contribs) m (New) |
||
| Line 1: | Line 1: | ||
/* Main container for all sections */ | |||
/* Main container */ | .content-container { | ||
.container { | |||
display: flex; | display: flex; | ||
flex-wrap: wrap; | flex-wrap: wrap; | ||
| Line 8: | Line 7: | ||
border: 1px solid #ccc; | border: 1px solid #ccc; | ||
border-radius: 10px; | border-radius: 10px; | ||
margin: | margin: 0; | ||
background-color: #f9f9f9; | background-color: #f9f9f9; | ||
padding: 10px; | padding: 10px; | ||
} | } | ||
/* Each | /* Each section/box */ | ||
. | .content-box { | ||
flex: 1 1 22%; | flex: 1 1 22%; | ||
min-width: 200px; | |||
padding: 5px; | padding: 5px; | ||
border: 1px solid #ccc; | border: 1px solid #ccc; | ||
border-radius: 10px; | border-radius: 10px; | ||
| Line 23: | Line 22: | ||
} | } | ||
/* | /* Tables inside each box */ | ||
.table { | .content-box table { | ||
border-spacing: 0; | border-spacing: 0; | ||
width: 100%; | width: 100%; | ||
} | } | ||
/* Table | /* Table headers and cells */ | ||
. | .content-box th, | ||
.content-box td { | |||
padding: 5px; | padding: 5px; | ||
border-bottom: 1px solid #ccc; | |||
} | } | ||
.content-box th { | |||
. | text-align: left; | ||
} | } | ||
.content-box td:last-child { | |||
. | text-align: right; | ||
} | } | ||
/* | /* Icons in headers and cells */ | ||
. | .content-box th img, | ||
.content-box td img { | |||
width: 25px; | width: 25px; | ||
} | } | ||
/* Larger padding for special links/images */ | |||
.content-box .large-padding { | |||
/* Larger padding for | |||
. | |||
padding: 10px; | padding: 10px; | ||
} | } | ||
/* Mobile layout: stack sections vertically */ | |||
/* Mobile layout */ | |||
@media screen and (max-width: 768px) { | @media screen and (max-width: 768px) { | ||
.content-container { | |||
flex-direction: column; | |||
} | |||
.content-box { | |||
flex: 1 1 100%; | |||
width: 100%; | |||
} | |||
} | } | ||
Revision as of 06:20, 13 October 2025
/* Main container for all sections */
.content-container {
display: flex;
flex-wrap: wrap;
gap: 10px;
border: 1px solid #ccc;
border-radius: 10px;
margin: 0;
background-color: #f9f9f9;
padding: 10px;
}
/* Each section/box */
.content-box {
flex: 1 1 22%;
min-width: 200px;
padding: 5px;
border: 1px solid #ccc;
border-radius: 10px;
background-color: #f9f9f9;
}
/* Tables inside each box */
.content-box table {
border-spacing: 0;
width: 100%;
}
/* Table headers and cells */
.content-box th,
.content-box td {
padding: 5px;
border-bottom: 1px solid #ccc;
}
.content-box th {
text-align: left;
}
.content-box td:last-child {
text-align: right;
}
/* Icons in headers and cells */
.content-box th img,
.content-box td img {
width: 25px;
}
/* Larger padding for special links/images */
.content-box .large-padding {
padding: 10px;
}
/* Mobile layout: stack sections vertically */
@media screen and (max-width: 768px) {
.content-container {
flex-direction: column;
}
.content-box {
flex: 1 1 100%;
width: 100%;
}
}