Module:Navbox/styles.css: Difference between revisions

Revision as of 07:22, 8 February 2025

/* Keep your existing styles, but modify these specific rules */

/* Remove the nowrap constraint from list items */
.navbox .hlist dd,
.navbox .hlist dt,
.navbox .hlist li {
    white-space: normal;  /* Changed from nowrap to allow wrapping */
    display: inline-block;  /* Keep items inline while allowing breaks */
    padding-right: 0.5em;  /* Add some spacing between items */
}

/* Ensure the navbox list container allows proper flow */
td.navbox-list1 {
    text-align: left;
    border-left-width: 2px;
    border-left-style: solid;
    width: 100%;  /* Ensure full width is used */
}

/* Add this new style to handle wrapping within the list */
.navbox .hlist ul,
.navbox .hlist ol,
.navbox .hlist dl {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25em;  /* Small gap between wrapped items */
    justify-content: flex-start;  /* Align items to the left */
    padding: 0.125em 0;
}

/* Ensure nested lists maintain proper wrapping */
.navbox .hlist dd dl,
.navbox .hlist dt dl,
.navbox .hlist li ol,
.navbox .hlist li ul {
    white-space: normal;
    width: 100%;  /* Full width for nested lists */
}

/* Optional: Add responsive handling for very small screens */
@media screen and (max-width: 480px) {
    .navbox .hlist dd,
    .navbox .hlist dt,
    .navbox .hlist li {
        padding-right: 0.25em;  /* Smaller padding on mobile */
    }
}

@@ Line 1: / Line 1: @@
-.navbox {
+/* Keep your existing styles, but modify these specific rules */
-	border: 1px solid #aaa;
-	box-sizing: border-box;
-	width: 100%;
-	margin: auto;
-	clear: both;
-	font-size: 88%;
-	text-align: center;
-	padding: 1px;
-}
-.navbox-inner,
+/* Remove the nowrap constraint from list items */
-.navbox-subgroup {
+.navbox .hlist dd,
-	width: 100%;
+.navbox .hlist dt,
-}
+.navbox .hlist li {
+    white-space: normal;  /* Changed from nowrap to allow wrapping */
-.navbox + .navbox-styles + .navbox {
+    display: inline-block;  /* Keep items inline while allowing breaks */
-	/* Single pixel border between adjacent navboxes */
+    padding-right: 0.5em;  /* Add some spacing between items */
-	margin-top: -1px;
-}
-.navbox th,
-.navbox-title,
-.navbox-abovebelow {
-	text-align: center;
-	/* Title and above/below styles */
-	padding-left: 1em;
-	padding-right: 1em;
-}
-th.navbox-group {
-	/* Group style */
-	white-space: nowrap;
-	/* @noflip */
-	text-align: right;
-}
-.navbox,
-.navbox-subgroup {
-	background: #fdfdfd;
-}
-.navbox-list {
-	/* Must match background color */
-	border-color: #fdfdfd;
-}
-.navbox th,
-.navbox-title {
-	/* Level 1 color */
-	background: #eaeeff;
-}
-.navbox-abovebelow,
-th.navbox-group,
-.navbox-subgroup .navbox-title {
-	/* Level 2 color */
-	background: #ddddff;
-}
-.navbox-subgroup .navbox-group,
-.navbox-subgroup .navbox-abovebelow {
-	/* Level 3 color */
-	background: #e6e6ff;
-}
-.navbox-even {
-	/* Even row striping */
-	background: #f7f7f7;
-}
-.navbox-odd {
-	/* Odd row striping */
-	background: transparent;
-}
-th.navbox-title1 {
-	border-left: 2px solid #fdfdfd;
-	width: 100%;
 }
+/* Ensure the navbox list container allows proper flow */
 td.navbox-list1 {
-	text-align: left;
+    text-align: left;
-	border-left-width: 2px;
+    border-left-width: 2px;
-	border-left-style: solid;
+    border-left-style: solid;
-}
+    width: 100%;  /* Ensure full width is used */
-.navbox .hlist td dl,
-.navbox .hlist td ol,
-.navbox .hlist td ul,
-.navbox td.hlist dl,
-.navbox td.hlist ol,
-.navbox td.hlist ul {
-	/* Adjust hlist padding in navboxes */
-	padding: 0.125em 0;
 }
-.navbox .hlist dd,
+/* Add this new style to handle wrapping within the list */
-.navbox .hlist dt,
+.navbox .hlist ul,
-.navbox .hlist li {
+.navbox .hlist ol,
-	/* Nowrap list items in navboxes */
+.navbox .hlist dl {
-	white-space: nowrap;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.25em;  /* Small gap between wrapped items */
+    justify-content: flex-start;  /* Align items to the left */
+    padding: 0.125em 0;
 }
+/* Ensure nested lists maintain proper wrapping */
 .navbox .hlist dd dl,
 .navbox .hlist dt dl,
 .navbox .hlist li ol,
 .navbox .hlist li ul {
-	/* But allow parent list items to be wrapped */
+    white-space: normal;
-	white-space: normal;
+    width: 100%;  /* Full width for nested lists */
 }
-ol + .navbox-styles + .navbox,
+/* Optional: Add responsive handling for very small screens */
-ul + .navbox-styles + .navbox {
+@media screen and (max-width: 480px) {
-	/* Prevent lists from clinging to navboxes */
+    .navbox .hlist dd,
-	margin-top: 0.5em;
+    .navbox .hlist dt,
+    .navbox .hlist li {
+        padding-right: 0.25em;  /* Smaller padding on mobile */
+    }
 }