« Modèle:Navbox/styles.css » : différence entre les versions

De Pikmin FR
fr>Fxfxfx0
Redirection supprimée vers Module:Navbox/styles.css
fr>Fxfxfx0
mAucun résumé des modifications
Ligne 1 : Ligne 1 :
{{Supprimer|Contient une redirection, le .css ne peut être collé}}
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;
}
}

Version du 9 mai 2024 à 05:57

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. `` */ } table.navbox-group > tbody > tr > td { width: unset !important; } }