Template:Bconomy navbox/styles.css: Difference between revisions
Appearance
Style the year expand controls and month header |
No edit summary |
||
| (5 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
.bc-navbox.bc-navbox-panel { | |||
clear: both; | clear: both; | ||
overflow: hidden; | overflow: hidden; | ||
padding: 0; | padding: 0; | ||
background: var(--bc-surface); | background: var(--bc-surface); | ||
border: 1px solid var(--bc-border); | |||
border-radius: 8px; | border-radius: 8px; | ||
color: var(--bc-text); | |||
} | |||
.bc-navbox-panel > .mw-collapsible-toggle { | |||
float: right; | |||
position: relative; | |||
margin: 16px 16px 0 8px; | |||
padding: 0; | |||
font-size: 0.875rem; | |||
line-height: 1.4; | |||
} | |||
.bc-navbox-panel.mw-collapsed > .bc-navbox-title { | |||
border-bottom: 0; | |||
} | |||
.bc-home > .bc-navbox-panel { | |||
margin-top: 16px; | |||
} | } | ||
.bc-navbox-panel > .bc-navbox-title { | .bc-navbox-panel > .bc-navbox-title { | ||
margin: 0; | |||
padding: 12px 16px; | padding: 12px 16px; | ||
background: var(--bc-selected); | background: var(--bc-selected); | ||
border-bottom: 1px solid var(--bc-border); | border-bottom: 1px solid var(--bc-border); | ||
text-align: | text-align: start; | ||
font-size: 1.25rem; | font-size: 1.25rem; | ||
font-weight: 400; | |||
line-height: 1.4; | |||
} | } | ||
.bc-navbox-panel > .mw- | .bc-navbox-panel > .bc-navbox-title a, | ||
.bc-navbox-panel > .bc-navbox-title .mw-selflink { | |||
color: inherit; | |||
font-weight: inherit; | |||
} | } | ||
.bc-navbox-panel .bc-navbox-table, | |||
.bc-navbox-panel .bc-navbox-months { | .bc-navbox-panel .bc-navbox-months { | ||
width: 100%; | width: 100%; | ||
table-layout: fixed; | |||
border-collapse: collapse; | border-collapse: collapse; | ||
margin: 0; | margin: 0; | ||
} | } | ||
.bc-navbox-panel .bc-navbox-table > tbody > tr > th, | |||
.bc-navbox-panel .bc-navbox-table > tbody > tr > td, | |||
.bc-navbox-panel .bc-navbox-months th, | .bc-navbox-panel .bc-navbox-months th, | ||
.bc-navbox-panel .bc-navbox-months td { | .bc-navbox-panel .bc-navbox-months td { | ||
box-sizing: border-box; | |||
padding: 10px 16px; | padding: 10px 16px; | ||
border: 0; | border: 0; | ||
border-bottom: 1px solid var(--bc-border); | border-bottom: 1px solid var(--bc-border); | ||
text-align: start; | text-align: start; | ||
vertical-align: | vertical-align: top; | ||
white-space: normal; | |||
overflow-wrap: break-word; | |||
} | } | ||
.bc-navbox-panel .bc-navbox-table > tbody > tr > th, | |||
width: | .bc-navbox-panel .bc-navbox-months th { | ||
width: 12rem; | |||
background: var(--bc-raised); | background: var(--bc-raised); | ||
color: var(--bc-text); | color: var(--bc-text); | ||
font-weight: 400; | |||
} | } | ||
.bc-navbox-panel .bc-navbox-months th { | |||
width: | width: 8rem; | ||
} | } | ||
.bc-navbox-panel .bc-navbox-years > tbody > tr > .bc-navbox-year { | |||
padding: | width: 4rem; | ||
padding-left: 16px; | |||
padding-right: 10px; | |||
} | } | ||
.bc-navbox-panel .bc-navbox- | .bc-navbox-panel .bc-navbox-table .mw-selflink { | ||
color: var(--bc-text); | |||
background: | background: transparent; | ||
font-weight: 400; | |||
text-decoration: none; | |||
} | } | ||
.bc-navbox-panel .bc-navbox-table > tbody > tr:last-child > th, | |||
.bc-navbox-panel .bc-navbox-table > tbody > tr:last-child > td, | |||
.bc-navbox-panel .bc-navbox-months tr:last-child > th, | .bc-navbox-panel .bc-navbox-months tr:last-child > th, | ||
.bc-navbox-panel .bc-navbox-months tr:last-child > td { | .bc-navbox-panel .bc-navbox-months tr:last-child > td { | ||
border-bottom: 0; | border-bottom: 0; | ||
} | } | ||
.bc-navbox-panel .bc-navbox- | .bc-navbox-panel .bc-navbox-table > tbody > tr > .bc-navbox-year-body { | ||
padding: | padding: 0; | ||
} | } | ||
.bc-navbox-panel ul.bc-release-links { | |||
margin: 0; | margin: 0; | ||
padding: 0; | padding: 0; | ||
| Line 76: | Line 101: | ||
margin: 0; | margin: 0; | ||
padding: 10px 16px; | padding: 10px 16px; | ||
text-align: | border-top: 1px solid var(--bc-border); | ||
text-align: start; | |||
} | } | ||
@media (max-width: 640px) { | @media (max-width: 640px) { | ||
.bc-navbox-panel .bc-navbox-table > tbody > tr > th, | |||
.bc-navbox-panel .bc-navbox-table > tbody > tr > td, | |||
.bc-navbox-panel .bc-navbox-months th, | .bc-navbox-panel .bc-navbox-months th, | ||
.bc-navbox-panel .bc-navbox-months td { | .bc-navbox-panel .bc-navbox-months td { | ||
display: table-cell; | |||
text-align: start; | |||
padding: 10px 12px; | |||
} | |||
.bc-navbox-panel .bc-navbox-table > tbody > tr > .bc-navbox-year, | |||
.bc-navbox-panel .bc-navbox-table > tbody > tr > .bc-navbox-year-body { | |||
display: block; | display: block; | ||
width: auto; | width: auto; | ||
padding-left: 12px; | |||
padding-right: 12px; | |||
} | } | ||
. | .bc-navbox-panel .bc-navbox-table > tbody > tr > .bc-navbox-year-body { | ||
padding: 0; | |||
} | |||
} | |||
@media (max-width: 480px) { | |||
.bc-navbox-panel .bc-navbox-table > tbody > tr > th, | |||
.bc-navbox-panel .bc-navbox-table > tbody > tr > td, | |||
.bc-navbox-panel .bc-navbox-months th, | |||
.bc-navbox-panel .bc-navbox-months td { | |||
display: block; | |||
width: auto; | width: auto; | ||
padding: 10px 12px; | |||
} | |||
.bc-navbox-panel .bc-navbox-table > tbody > tr > th, | |||
.bc-navbox-panel .bc-navbox-months th { | |||
border-bottom: 0; | |||
} | |||
.bc-navbox-panel .bc-navbox-table > tbody > tr > .bc-navbox-year-body { | |||
padding: 0; | |||
} | } | ||
} | } | ||
Latest revision as of 15:04, 4 November 2026
.bc-navbox.bc-navbox-panel {
clear: both;
overflow: hidden;
padding: 0;
background: var(--bc-surface);
border: 1px solid var(--bc-border);
border-radius: 8px;
color: var(--bc-text);
}
.bc-navbox-panel > .mw-collapsible-toggle {
float: right;
position: relative;
margin: 16px 16px 0 8px;
padding: 0;
font-size: 0.875rem;
line-height: 1.4;
}
.bc-navbox-panel.mw-collapsed > .bc-navbox-title {
border-bottom: 0;
}
.bc-home > .bc-navbox-panel {
margin-top: 16px;
}
.bc-navbox-panel > .bc-navbox-title {
margin: 0;
padding: 12px 16px;
background: var(--bc-selected);
border-bottom: 1px solid var(--bc-border);
text-align: start;
font-size: 1.25rem;
font-weight: 400;
line-height: 1.4;
}
.bc-navbox-panel > .bc-navbox-title a,
.bc-navbox-panel > .bc-navbox-title .mw-selflink {
color: inherit;
font-weight: inherit;
}
.bc-navbox-panel .bc-navbox-table,
.bc-navbox-panel .bc-navbox-months {
width: 100%;
table-layout: fixed;
border-collapse: collapse;
margin: 0;
}
.bc-navbox-panel .bc-navbox-table > tbody > tr > th,
.bc-navbox-panel .bc-navbox-table > tbody > tr > td,
.bc-navbox-panel .bc-navbox-months th,
.bc-navbox-panel .bc-navbox-months td {
box-sizing: border-box;
padding: 10px 16px;
border: 0;
border-bottom: 1px solid var(--bc-border);
text-align: start;
vertical-align: top;
white-space: normal;
overflow-wrap: break-word;
}
.bc-navbox-panel .bc-navbox-table > tbody > tr > th,
.bc-navbox-panel .bc-navbox-months th {
width: 12rem;
background: var(--bc-raised);
color: var(--bc-text);
font-weight: 400;
}
.bc-navbox-panel .bc-navbox-months th {
width: 8rem;
}
.bc-navbox-panel .bc-navbox-years > tbody > tr > .bc-navbox-year {
width: 4rem;
padding-left: 16px;
padding-right: 10px;
}
.bc-navbox-panel .bc-navbox-table .mw-selflink {
color: var(--bc-text);
background: transparent;
font-weight: 400;
text-decoration: none;
}
.bc-navbox-panel .bc-navbox-table > tbody > tr:last-child > th,
.bc-navbox-panel .bc-navbox-table > tbody > tr:last-child > td,
.bc-navbox-panel .bc-navbox-months tr:last-child > th,
.bc-navbox-panel .bc-navbox-months tr:last-child > td {
border-bottom: 0;
}
.bc-navbox-panel .bc-navbox-table > tbody > tr > .bc-navbox-year-body {
padding: 0;
}
.bc-navbox-panel ul.bc-release-links {
margin: 0;
padding: 0;
list-style: none;
}
.bc-navbox-panel .bc-release-links li {
display: inline;
}
.bc-navbox-panel .bc-release-links li + li::before {
content: " · ";
}
.bc-navbox-panel .bc-navbox-archive {
margin: 0;
padding: 10px 16px;
border-top: 1px solid var(--bc-border);
text-align: start;
}
@media (max-width: 640px) {
.bc-navbox-panel .bc-navbox-table > tbody > tr > th,
.bc-navbox-panel .bc-navbox-table > tbody > tr > td,
.bc-navbox-panel .bc-navbox-months th,
.bc-navbox-panel .bc-navbox-months td {
display: table-cell;
text-align: start;
padding: 10px 12px;
}
.bc-navbox-panel .bc-navbox-table > tbody > tr > .bc-navbox-year,
.bc-navbox-panel .bc-navbox-table > tbody > tr > .bc-navbox-year-body {
display: block;
width: auto;
padding-left: 12px;
padding-right: 12px;
}
.bc-navbox-panel .bc-navbox-table > tbody > tr > .bc-navbox-year-body {
padding: 0;
}
}
@media (max-width: 480px) {
.bc-navbox-panel .bc-navbox-table > tbody > tr > th,
.bc-navbox-panel .bc-navbox-table > tbody > tr > td,
.bc-navbox-panel .bc-navbox-months th,
.bc-navbox-panel .bc-navbox-months td {
display: block;
width: auto;
padding: 10px 12px;
}
.bc-navbox-panel .bc-navbox-table > tbody > tr > th,
.bc-navbox-panel .bc-navbox-months th {
border-bottom: 0;
}
.bc-navbox-panel .bc-navbox-table > tbody > tr > .bc-navbox-year-body {
padding: 0;
}
}