MediaWiki talk:Common.css: Difference between revisions
From Eco - English Wiki
Created page with "talk pageS" Tag: 2017 source edit |
→Add CSS styles for better navbox: new section Tag: 2017 source edit |
||
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 11:37, 22 May 2023
talk pageS
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; }