https://www.telephones.wiki/index.php?action=history&feed=atom&title=Template%3ATemplateStyles 2026-05-13T12:52:49Z Revision history for this page on the wiki MediaWiki 1.44.0 https://www.telephones.wiki/index.php?title=Template:TemplateStyles&diff=41&oldid=prev 2025-08-19T05:05:15Z

<p>Created page with &quot;<span class="autocomment">Contribute button: </span> .wp-contrib-cta { display: flex; justify-content: center; margin: 1rem 0; } .wp-contrib-cta__btn { <span class="autocomment">layout: </span> display: flex; align-items: center; justify-content: center; <span class="autocomment">centers the label: </span> gap: 0.75rem; width: min(100%, 28rem); padding: 0.9rem 1.2rem; <span class="autocomment">vibe: </span> background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%); color: #fff; border-radius: 999px; font-weight: 700; font-size: clamp(14px, 2.8vw,...&quot;</p> <p><b>New page</b></p><div>/* Contribute button */<br /> .wp-contrib-cta {<br /> display: flex;<br /> justify-content: center;<br /> margin: 1rem 0;<br /> }<br /> <br /> .wp-contrib-cta__btn {<br /> /* layout */<br /> display: flex;<br /> align-items: center;<br /> justify-content: center; /* centers the label */<br /> gap: 0.75rem;<br /> width: min(100%, 28rem);<br /> padding: 0.9rem 1.2rem;<br /> <br /> /* vibe */<br /> background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);<br /> color: #fff;<br /> border-radius: 999px;<br /> font-weight: 700;<br /> font-size: clamp(14px, 2.8vw, 18px);<br /> text-decoration: none;<br /> box-shadow: 0 10px 25px rgba(37, 99, 235, 0.35),<br /> 0 2px 6px rgba(0, 0, 0, 0.15);<br /> border: 1px solid rgba(255,255,255,0.18);<br /> transition: transform 120ms ease, box-shadow 120ms ease, filter 120ms ease;<br /> }<br /> <br /> .wp-contrib-cta__btn:hover {<br /> transform: translateY(-1px);<br /> box-shadow: 0 14px 30px rgba(37, 99, 235, 0.45),<br /> 0 4px 10px rgba(0, 0, 0, 0.18);<br /> filter: brightness(1.03);<br /> }<br /> <br /> .wp-contrib-cta__btn:active {<br /> transform: translateY(0);<br /> box-shadow: 0 6px 18px rgba(37, 99, 235, 0.35),<br /> 0 2px 6px rgba(0, 0, 0, 0.14);<br /> }<br /> <br /> .wp-contrib-cta__btn:focus-visible {<br /> outline: 3px solid #a5b4fc; /* soft indigo focus ring */<br /> outline-offset: 3px;<br /> }<br /> <br /> .wp-contrib-cta__icon,<br /> .wp-contrib-cta__arrow {<br /> /* fixed space so the label stays visually centered,<br /> even with icons on both sides */<br /> width: 1.5em;<br /> height: 1.5em;<br /> display: inline-flex;<br /> align-items: center;<br /> justify-content: center;<br /> flex: 0 0 1.5em;<br /> line-height: 1;<br /> }<br /> <br /> .wp-contrib-cta__text {<br /> text-align: center;<br /> flex: 0 1 auto;<br /> line-height: 1.2;<br /> }<br /> <br /> /* smooth arrow nudge on hover (respects reduced motion) */<br /> @media (prefers-reduced-motion: no-preference) {<br /> .wp-contrib-cta__btn:hover .wp-contrib-cta__arrow {<br /> transform: translateX(2px);<br /> transition: transform 120ms ease;<br /> }<br /> }<br /> <br /> /* dark mode-ish pages (if your skin flips bg), keep contrast decent */<br /> @media (prefers-color-scheme: dark) {<br /> .wp-contrib-cta__btn {<br /> border-color: rgba(255,255,255,0.22);<br /> }<br /> }</div>

CaptainChris