Template:NavTables.css: Difference between revisions
Lightning266 (talk | contribs) (Created page with ".nav-container { display: flex; flex-wrap: wrap; gap: 10px; border: 1px solid #ccc; border-radius: 10px; margin: 0; background-color: #f9f9f9; padding: 10px; } .nav-card { flex: 1 1 22%; padding: 5px; min-width: 200px; border: 1px solid #ccc; border-radius: 10px; background-color: #f9f9f9; } .nav-table { border-spacing: 0; width: 100%; } .nav-header-left { border-bottom: 1px solid; text-align: left; padding: 5px; } .nav-header-ri...") |
Lightning266 (talk | contribs) m (Mobile support test) |
||
| (3 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
. | |||
__CONTENTMODEL__ Sanitized CSS | |||
/* Main container */ | |||
.container { | |||
display: flex; | |||
flex-wrap: wrap; | |||
gap: 10px; | |||
border: 1px solid #ccc; | |||
border-radius: 10px; | |||
margin: 0px; | |||
background-color: #f9f9f9; | |||
padding: 10px; | |||
} | |||
/* Each table container */ | |||
.table-container { | |||
flex: 1 1 22%; | |||
padding: 5px; | |||
min-width: 200px; | |||
border: 1px solid #ccc; | |||
border-radius: 10px; | |||
background-color: #f9f9f9; | |||
} | |||
/* Table styling */ | |||
.table { | |||
border-spacing: 0; | |||
width: 100%; | |||
} | |||
/* Table header */ | |||
.table th { | |||
border-bottom: 1px solid; | |||
text-align: left; | |||
padding: 5px; | |||
} | |||
/* Table cell */ | |||
.table td { | |||
padding: 5px; | |||
} | |||
/* Table header icons */ | |||
.table th img { | |||
width: 25px; | |||
} | |||
/* Specific padding adjustments for elements */ | |||
.table .table-header img { | |||
width: 25px; | |||
} | |||
.table .item-icon img { | |||
width: 25px; | |||
} | |||
/* Larger padding for specific links or images */ | |||
.table .large-padding { | |||
padding: 10px; | |||
} | |||
/* Desktop/tablet default */ | |||
.navtables-container { | |||
display: flex; | display: flex; | ||
flex-wrap: wrap; | flex-wrap: wrap; | ||
| Line 5: | Line 67: | ||
border: 1px solid #ccc; | border: 1px solid #ccc; | ||
border-radius: 10px; | border-radius: 10px; | ||
background-color: #f9f9f9; | background-color: #f9f9f9; | ||
padding: 10px; | padding: 10px; | ||
} | } | ||
. | /* Each box */ | ||
.navtables-section { | |||
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 19: | Line 81: | ||
} | } | ||
/* Mobile layout */ | |||
@media screen and (max-width: 768px) { | |||
.navtables-container { | |||
flex-direction: column; | |||
} | |||
. | |||
} | |||
. | .navtables-section { | ||
flex: 1 1 100%; | |||
width: 100%; | |||
} | |||
} | } | ||
Latest revision as of 05:07, 13 October 2025
__CONTENTMODEL__ Sanitized CSS /* Main container */ .container {
display: flex; flex-wrap: wrap; gap: 10px; border: 1px solid #ccc; border-radius: 10px; margin: 0px; background-color: #f9f9f9; padding: 10px;
}
/* Each table container */ .table-container {
flex: 1 1 22%; padding: 5px; min-width: 200px; border: 1px solid #ccc; border-radius: 10px; background-color: #f9f9f9;
}
/* Table styling */ .table {
border-spacing: 0; width: 100%;
}
/* Table header */ .table th {
border-bottom: 1px solid; text-align: left; padding: 5px;
}
/* Table cell */ .table td {
padding: 5px;
}
/* Table header icons */ .table th img {
width: 25px;
}
/* Specific padding adjustments for elements */ .table .table-header img {
width: 25px;
}
.table .item-icon img {
width: 25px;
}
/* Larger padding for specific links or images */ .table .large-padding {
padding: 10px;
}
/* Desktop/tablet default */ .navtables-container {
display: flex; flex-wrap: wrap; gap: 10px; border: 1px solid #ccc; border-radius: 10px; background-color: #f9f9f9; padding: 10px;
}
/* Each box */ .navtables-section {
flex: 1 1 22%; min-width: 200px; padding: 5px; border: 1px solid #ccc; border-radius: 10px; background-color: #f9f9f9;
}
/* Mobile layout */ @media screen and (max-width: 768px) {
.navtables-container {
flex-direction: column;
}
.navtables-section {
flex: 1 1 100%;
width: 100%;
}
}