MediaWiki talk:Common.css: Difference between revisions
From Eco - English Wiki
Created page with "talk pageS" |
→Add CSS styles for better navbox: new section |
||
| Line 1: | Line 1: | ||
talk pageS | talk pageS | ||
== Add CSS styles for better navbox == | |||
I'm planning onto adding a navbox to make going from blocks/items easier, just need this css | |||
<nowiki>/**************************** | |||
* Navbox | |||
****************************/ | |||
.navbox { | |||
/* IGNORE EDITOR CALLING THESE ERRORS! It's valid css, just save anyways */ | |||
--navbox-border: #29190B; | |||
--navbox-title-background: var(--theme-accent-color); | |||
--navbox-header-background: #4f3119; | |||
--navbox-header-color: var(--theme-accent-label-color); | |||
--navbox-header-link-color: var(--theme-accent-label-color); | |||
--navbox-list-link-color: #E88F12; | |||
width: 100%; | |||
background: var(--navbox-border); | |||
color: white; | |||
margin: 1em auto; | |||
font-size: 84%; | |||
clear: both; | |||
padding: 2px; | |||
border-spacing: 0; | |||
border: 2px solid var(--navbox-border); | |||
border-radius: 3px; | |||
} | |||
.navbox .navbox-title a, .navbox .navbox-header a, .navbox .navbox-group a, .navbox .mw-collapsible-toggle a:hover { | |||
color: var(--navbox-header-link-color); | |||
} | |||
.navbox + .navbox { | |||
margin-top: -16px; | |||
border-top-left-radius: 0; | |||
border-top-right-radius: 0; | |||
} | |||
.navbox .navbox-title { | |||
color: var(--theme-accent-label-color); | |||
background: var(--navbox-title-background); | |||
font-weight: bold; | |||
} | |||
.navbox .navbox-vde { | |||
float: left; | |||
width: 65px; | |||
} | |||
.navbox .navbox-title-padright { | |||
padding-right: 65px; | |||
} | |||
.navbox .navbox-title-padleft { | |||
padding-left: 65px; | |||
} | |||
.navbox .navbox-subgroup { | |||
border-spacing: 0; | |||
width: 100%; | |||
} | |||
.navbox .navbox-gutter { | |||
height: 2px; | |||
} | |||
.navbox .navbox-subgroup .navbox-gutter { | |||
background: var(--navbox-border); | |||
} | |||
.navbox .navbox-section-row > td { | |||
padding: 0; | |||
height: 100%; | |||
} | |||
.navbox .navbox-section { | |||
width: 100%; | |||
border-spacing: 0; | |||
} | |||
.navbox .navbox-above, .navbox .navbox-below, .navbox .navbox-image { | |||
color: var(--theme-accent-label-color); | |||
background: var(--navbox-header-background); | |||
text-align: center; | |||
} | |||
.navbox .navbox-group, .navbox .navbox-header { | |||
background: var(--navbox-header-background); | |||
color: var(--navbox-header-color); | |||
font-weight: bold; | |||
height: 100%; | |||
padding: 2px 4px; | |||
} | |||
.navbox .navbox-header-collapsible { | |||
padding-left: 65; | |||
} | |||
.navbox .navbox-group { | |||
min-width: 150px; | |||
} | |||
.navbox .navbox-group, .navbox .navbox-image-left { | |||
border-right: 2px solid var(--navbox-border); | |||
} | |||
.navbox .navbox-image-right { | |||
border-left: 2px solid var(--navbox-border); | |||
} | |||
.navbox .navbox-list { | |||
background: var(--theme-article-background-color); | |||
color: var(--theme-article-text-color); | |||
width: 100%; | |||
height: 100%; | |||
padding: 0; | |||
} | |||
.navbox .navbox-list div { | |||
padding: 0px 4px; | |||
} | |||
.navbox .navbox-list.no-group { | |||
text-align: center; | |||
padding-top: 2px; | |||
padding-bottom: 2px; | |||
} | |||
.navbox .navbox-list a { | |||
color: var(--navbox-list-link-color); | |||
} | |||
.navbox .mw-collapsible-toggle { | |||
width: 65px; | |||
}</nowiki> | |||
Revision as of 12:37, 22 May 2023
talk pageS
Add CSS styles for better navbox
I'm planning onto adding a navbox to make going from blocks/items easier, just need this css
/****************************
* Navbox
****************************/
.navbox {
/* IGNORE EDITOR CALLING THESE ERRORS! It's valid css, just save anyways */
--navbox-border: #29190B;
--navbox-title-background: var(--theme-accent-color);
--navbox-header-background: #4f3119;
--navbox-header-color: var(--theme-accent-label-color);
--navbox-header-link-color: var(--theme-accent-label-color);
--navbox-list-link-color: #E88F12;
width: 100%;
background: var(--navbox-border);
color: white;
margin: 1em auto;
font-size: 84%;
clear: both;
padding: 2px;
border-spacing: 0;
border: 2px solid var(--navbox-border);
border-radius: 3px;
}
.navbox .navbox-title a, .navbox .navbox-header a, .navbox .navbox-group a, .navbox .mw-collapsible-toggle a:hover {
color: var(--navbox-header-link-color);
}
.navbox + .navbox {
margin-top: -16px;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.navbox .navbox-title {
color: var(--theme-accent-label-color);
background: var(--navbox-title-background);
font-weight: bold;
}
.navbox .navbox-vde {
float: left;
width: 65px;
}
.navbox .navbox-title-padright {
padding-right: 65px;
}
.navbox .navbox-title-padleft {
padding-left: 65px;
}
.navbox .navbox-subgroup {
border-spacing: 0;
width: 100%;
}
.navbox .navbox-gutter {
height: 2px;
}
.navbox .navbox-subgroup .navbox-gutter {
background: var(--navbox-border);
}
.navbox .navbox-section-row > td {
padding: 0;
height: 100%;
}
.navbox .navbox-section {
width: 100%;
border-spacing: 0;
}
.navbox .navbox-above, .navbox .navbox-below, .navbox .navbox-image {
color: var(--theme-accent-label-color);
background: var(--navbox-header-background);
text-align: center;
}
.navbox .navbox-group, .navbox .navbox-header {
background: var(--navbox-header-background);
color: var(--navbox-header-color);
font-weight: bold;
height: 100%;
padding: 2px 4px;
}
.navbox .navbox-header-collapsible {
padding-left: 65;
}
.navbox .navbox-group {
min-width: 150px;
}
.navbox .navbox-group, .navbox .navbox-image-left {
border-right: 2px solid var(--navbox-border);
}
.navbox .navbox-image-right {
border-left: 2px solid var(--navbox-border);
}
.navbox .navbox-list {
background: var(--theme-article-background-color);
color: var(--theme-article-text-color);
width: 100%;
height: 100%;
padding: 0;
}
.navbox .navbox-list div {
padding: 0px 4px;
}
.navbox .navbox-list.no-group {
text-align: center;
padding-top: 2px;
padding-bottom: 2px;
}
.navbox .navbox-list a {
color: var(--navbox-list-link-color);
}
.navbox .mw-collapsible-toggle {
width: 65px;
}