MediaWiki:Common.css: Difference between revisions
MediaWiki interface page
More actions
No edit summary |
No edit summary Tag: Reverted |
||
| Line 38: | Line 38: | ||
.spoiler.revealed { | .spoiler.revealed { | ||
filter: none; | filter: none; | ||
} | |||
/* Treeverse Season 2 Alpha – responsive CTA banner */ | |||
.tv-cta { | |||
display: flex; | |||
justify-content: center; | |||
margin: 16px 0; | |||
} | |||
.tv-cta__btn { | |||
--tv-bg1: #ff8c00; | |||
--tv-bg2: #ff5e00; | |||
--tv-text: #ffffff; | |||
--tv-border: rgba(255, 255, 255, 0.25); | |||
--tv-shadow: rgba(0, 0, 0, 0.25); | |||
display: inline-flex; | |||
align-items: center; | |||
gap: 12px; | |||
width: 100%; | |||
max-width: 780px; | |||
padding: 14px 18px; | |||
border-radius: 16px; | |||
text-decoration: none; | |||
color: var(--tv-text); | |||
font-weight: 700; | |||
background: linear-gradient(45deg, var(--tv-bg1), var(--tv-bg2)); | |||
border: 1px solid var(--tv-border); | |||
box-shadow: 0 6px 18px var(--tv-shadow); | |||
transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease; | |||
} | |||
.tv-cta__btn:hover, | |||
.tv-cta__btn:focus-visible { | |||
transform: translateY(-1px); | |||
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35); | |||
filter: brightness(1.02); | |||
outline: none; | |||
} | |||
.tv-cta__left { | |||
display: flex; | |||
align-items: center; | |||
gap: 10px; | |||
min-width: 0; | |||
} | |||
.tv-cta__eyebrow { | |||
font-size: 12px; | |||
font-weight: 600; | |||
opacity: 0.9; | |||
letter-spacing: 0.04em; | |||
text-transform: uppercase; | |||
white-space: nowrap; | |||
} | |||
.tv-cta__label { | |||
font-size: clamp(16px, 2.5vw, 22px); | |||
line-height: 1.15; | |||
} | |||
.tv-cta__icon { | |||
flex-shrink: 0; | |||
width: 28px; | |||
height: 28px; | |||
filter: drop-shadow(0 2px 2px rgba(0,0,0,0.25)); | |||
} | |||
@media (max-width: 420px) { | |||
.tv-cta__btn { padding: 12px 14px; border-radius: 14px; } | |||
.tv-cta__icon { width: 24px; height: 24px; } | |||
.tv-cta__eyebrow { display: none; } | |||
} | |||
@media (prefers-color-scheme: dark) { | |||
.tv-cta__btn { | |||
--tv-border: rgba(255, 255, 255, 0.15); | |||
--tv-shadow: rgba(0, 0, 0, 0.55); | |||
} | |||
} | |||
@media (prefers-reduced-motion: reduce) { | |||
.tv-cta__btn { transition: none; } | |||
} | } | ||