Module:Navpills/styles.css

.template-navpills {

   display: grid;
   gap: 0.5rem;
   grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
   grid-auto-rows: 3rem;
   font-size: 0.875rem;

}

.template-navpill {

   position: relative;
   border: var(--tg-border-base);
   border-radius: var( --tg-border-radius-medium);
   font-weight: var(--tg-font-weight-medium);
   line-height: var(--tg-line-height-xx-small);
   overflow: hidden;

}

.template-navpill-background {

   position: absolute;
   inset: 0;
   pointer-events: none;

}

.template-navpill-background:after {

   content: "";
   position: absolute;
   inset: 0;
   background: linear-gradient(to right, #000, transparent);
   transition: transform 250ms ease;

}

.template-navpill-background img {

   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: 100ms ease;
   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 1rem;
   display: flex;
   align-items: center;
   color: var(--tg-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: rgba(255, 255, 255, 0.3);

}

.template-navpill:active {

   background: rgba(255, 255, 255, 0.1);

}