Template:Navbox/styles.css: Difference between revisions
From Inkipedia, the Splatoon wiki
(mobile: try to unset more display:inline-table that may have a possibility of breaking the expected layout (unsure)) |
m (mobile: try swapping width and max-width to attempt to fix Safari/WebKit) |
||
| Line 39: | Line 39: | ||
table.navbox { | table.navbox { | ||
display: table !important; /* remove the `display:inline-table` property so that the table can be centred */ | display: table !important; /* remove the `display:inline-table` property so that the table can be centred */ | ||
width: 630px; /* for a somewhat smooth transition when resizing window ~ ((850 - 30 * 2) * 80%) */ | max-width: 630px; /* for a somewhat smooth transition when resizing window ~ ((850 - 30 * 2) * 80%) */ | ||
width: 100%; | |||
} | } | ||
Latest revision as of 16:37, 4 May 2024
table.navbox {
margin: auto;
width: 80%;
border-radius: 20px;
border-spacing: 2px;
}
table.navbox > tbody > tr:first-child > td > div {
font-size: 17px;
font-weight: bold;
text-align: center;
margin-left: 56px;
}
table.navbox > tbody > tr:not(:first-child) > td {
background-color: rgba(255, 255, 255, 0.5);
border-radius: 18px;
padding: 0;
}
table.navbox > tbody > tr:not(:first-child) > td > div {
box-shadow: 0 0 15px rgba(255, 255, 255, 0.5) inset;
border-radius: 18px;
padding: 4px 4px 0 4px;
}
table.navbox-group {
border: 2px solid;
border-radius: 14px;
width: 100%;
border-spacing: 2px;
margin-bottom: 4px;
}
table.navbox-group > tbody > tr > th:first-child {
border-radius: 11px 0 0 11px;
text-align: center;
font-weight: bold;
}
/* This matches the transition width of the Timeless skin */
@media (max-width: 850px) {
table.navbox {
display: table !important; /* remove the `display:inline-table` property so that the table can be centred */
max-width: 630px; /* for a somewhat smooth transition when resizing window ~ ((850 - 30 * 2) * 80%) */
width: 100%;
}
table.navbox-group {
display: table !important; /* remove the `display:inline-table` property (not sure if this has any effect) */
}
table.navbox-group > tbody > tr {
display: flex !important; /* force table row to be laid out vertically */
flex-flow: column;
gap: 2px;
}
table.navbox-group > tbody > tr > th:first-child {
width: unset !important;
border-radius: 11px 11px 0 0;
position: sticky;
top: 0;
z-index: 1; /* show above `position:relative` elements, e.g. `<sup>` */
}
table.navbox-group > tbody > tr > td {
width: unset !important;
}
}
