Module:Navbox/styles.css: Difference between revisions

From Medalist Wiki
No edit summary
No edit summary
 
Line 1: Line 1:
/* Keep your existing styles, but modify these specific rules */
.navbox {
    border: 1px solid #aaa;
    box-sizing: border-box;
    width: 100%;
    margin: auto;
    clear: both;
    font-size: 88%;
    text-align: center;
    padding: 1px;
}
 
.navbox-inner,
.navbox-subgroup {
    width: 100%;
}
 
.navbox + .navbox-styles + .navbox {
    margin-top: -1px;
}
 
.navbox th,
.navbox-title,
.navbox-abovebelow {
    text-align: center;
    padding-left: 1em;
    padding-right: 1em;
}
 
th.navbox-group {
    white-space: nowrap;
    text-align: right;
}
 
.navbox,
.navbox-subgroup {
    background: #fdfdfd;
}
 
.navbox-list {
    border-color: #fdfdfd;
}
 
.navbox th,
.navbox-title {
    background: #eaeeff;
}


/* Remove the nowrap constraint from list items */
.navbox-abovebelow,
.navbox .hlist dd,
th.navbox-group,
.navbox .hlist dt,
.navbox-subgroup .navbox-title {
.navbox .hlist li {
    background: #ddddff;
     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 */
.navbox-subgroup .navbox-group,
.navbox-subgroup .navbox-abovebelow {
     background: #e6e6ff;
}
 
.navbox-even {
    background: #f7f7f7;
}
 
.navbox-odd {
     background: transparent;
}
 
th.navbox-title1 {
    border-left: 2px solid #fdfdfd;
     width: 100%;
}
}


/* Ensure the navbox list container allows proper flow */
td.navbox-list1 {
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 */
}
}


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


/* Ensure nested lists maintain proper wrapping */
.navbox .hlist dd,
.navbox .hlist dt,
.navbox .hlist li {
    white-space: normal; /* Only change: allow wrapping */
    display: inline;    /* Keep original inline display */
}
 
.navbox .hlist dd dl,
.navbox .hlist dd dl,
.navbox .hlist dt dl,
.navbox .hlist dt dl,
Line 35: Line 98:
.navbox .hlist li ul {
.navbox .hlist li ul {
     white-space: normal;
     white-space: normal;
    width: 100%;  /* Full width for nested lists */
}
}


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

Latest revision as of 07:24, 8 February 2025

.navbox {
    border: 1px solid #aaa;
    box-sizing: border-box;
    width: 100%;
    margin: auto;
    clear: both;
    font-size: 88%;
    text-align: center;
    padding: 1px;
}

.navbox-inner,
.navbox-subgroup {
    width: 100%;
}

.navbox + .navbox-styles + .navbox {
    margin-top: -1px;
}

.navbox th,
.navbox-title,
.navbox-abovebelow {
    text-align: center;
    padding-left: 1em;
    padding-right: 1em;
}

th.navbox-group {
    white-space: nowrap;
    text-align: right;
}

.navbox,
.navbox-subgroup {
    background: #fdfdfd;
}

.navbox-list {
    border-color: #fdfdfd;
}

.navbox th,
.navbox-title {
    background: #eaeeff;
}

.navbox-abovebelow,
th.navbox-group,
.navbox-subgroup .navbox-title {
    background: #ddddff;
}

.navbox-subgroup .navbox-group,
.navbox-subgroup .navbox-abovebelow {
    background: #e6e6ff;
}

.navbox-even {
    background: #f7f7f7;
}

.navbox-odd {
    background: transparent;
}

th.navbox-title1 {
    border-left: 2px solid #fdfdfd;
    width: 100%;
}

td.navbox-list1 {
    text-align: left;
    border-left-width: 2px;
    border-left-style: solid;
}

/* Modified list styles to allow wrapping while preserving other properties */
.navbox .hlist td dl,
.navbox .hlist td ol,
.navbox .hlist td ul,
.navbox td.hlist dl,
.navbox td.hlist ol,
.navbox td.hlist ul {
    padding: 0.125em 0;
}

.navbox .hlist dd,
.navbox .hlist dt,
.navbox .hlist li {
    white-space: normal; /* Only change: allow wrapping */
    display: inline;     /* Keep original inline display */
}

.navbox .hlist dd dl,
.navbox .hlist dt dl,
.navbox .hlist li ol,
.navbox .hlist li ul {
    white-space: normal;
}

ol + .navbox-styles + .navbox,
ul + .navbox-styles + .navbox {
    margin-top: 0.5em;
}