member
1,308
edits
Template:GameContent/NavTables.css: Difference between revisions
Jump to navigation
Jump to search
m
New
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%; | |||
} | |||
} | } | ||