|
|
| Line 1: |
Line 1: |
| .template-navpills {
| | <includeonly>{{#invoke:Navpills|navpills}}</includeonly><noinclude> |
| display: grid;
| | Navpills is used to create a grid of navigation button. It is powered by [[Module:Navpills]]. |
| gap: var( --space-xs );
| |
| grid-template-columns: repeat( auto-fill, minmax( 160px, 1fr ) );
| |
| grid-auto-rows: 3rem;
| |
| font-size: var( --font-size-small );
| |
| }
| |
|
| |
|
| .template-navpill {
| | == Example == |
| position: relative;
| | <pre><nowiki> |
| border: 1px solid var( --border-color-base );
| | {{Navpills |
| border-radius: var( --border-radius-medium );
| | |page1 = Gandalf |
| font-weight: var( --font-weight-medium );
| | |page2 = Frodo |
| line-height: var( --line-height-xx-small );
| | |page3 = Gollum |
| overflow: hidden;
| | |text3 = Best character |
| }
| | |image3 = The Lord of the Rings - The Return of the King - Gollum poster.jpg |
| | }} |
| | </nowiki></pre> |
|
| |
|
| .template-navpill-background {
| | will give: |
| position: absolute;
| |
| inset: 0;
| |
| pointer-events: none;
| |
| }
| |
|
| |
|
| .template-navpill-background:after {
| | {{Navpills |
| content: '';
| | |page1 = Gandalf |
| position: absolute;
| | |page2 = Frodo |
| inset: 0;
| | |page3 = Gollum |
| background: linear-gradient(to right, #000, transparent);
| | |text3 = Best character |
| transition: transform 250ms ease;
| | |image3 = The Lord of the Rings - The Return of the King - Gollum poster.jpg |
| } | | }} |
|
| |
|
| .template-navpill-background img {
| | [[Category:Utility templates]] |
| width: 100%;
| | </noinclude> |
| height: 100%;
| |
| object-fit: cover;
| |
| transition: var( --transition-hover );
| |
| transition-property: transform;
| |
| }
| |
| | |
| .template-navpill:hover .template-navpill-background::after {
| |
| transform: translateX( -100% );
| |
| }
| |
| | |
| .template-navpill:hover .template-navpill-background img {
| |
| transform: scale( 1.1 );
| |
| }
| |
| | |
| .template-navpill > a {
| |
| position: relative;
| |
| padding: 0 var( --space-md );
| |
| display: flex;
| |
| align-items: center;
| |
| color: var( --color-emphasized );
| |
| text-decoration: none;
| |
| height: 100%;
| |
| }
| |
| | |
| .template-navpill > .template-navpill-background + a {
| |
| color: #fff;
| |
| text-shadow: -1px 0 .2em #000, 0 1px .2em #000, 1px 0 .2em #000, 0 -1px .2em #000;
| |
| }
| |
| | |
| .template-navpill:hover {
| |
| background: var( --background-color-button-quiet--hover );
| |
| }
| |
| | |
| .template-navpill:active {
| |
| background: var( --background-color-button-quiet--active );
| |
| }
| |
Navpills is used to create a grid of navigation button. It is powered by Module:Navpills.
Example
{{Navpills
|page1 = Gandalf
|page2 = Frodo
|page3 = Gollum
|text3 = Best character
|image3 = The Lord of the Rings - The Return of the King - Gollum poster.jpg
}}
will give:
