MediaWiki:Common.css: відмінності між версіями
About banner: 1px 4-color gradient border on all sides via mask trick
(About banner: lighter, taller, no fill — only colored accent stripe) |
(About banner: 1px 4-color gradient border on all sides via mask trick) |
||
| Рядок 663: | Рядок 663: | ||
} | } | ||
/* MinervaNeue — баннер "Про Країнопедію" зверху drawer ( | /* MinervaNeue — баннер "Про Країнопедію" зверху drawer (1px gradient border з усіх сторін) */ | ||
.skin-minerva .drawer-about-banner { | .skin-minerva .drawer-about-banner { | ||
display: flex; | display: flex; | ||
| Рядок 669: | Рядок 669: | ||
justify-content: space-between; | justify-content: space-between; | ||
margin: 12px; | margin: 12px; | ||
padding: 44px 20px | padding: 44px 20px; | ||
background: transparent; | background: transparent; | ||
border-radius: 14px; | border-radius: 14px; | ||
color: #1a2240 !important; | color: #1a2240 !important; | ||
| Рядок 677: | Рядок 676: | ||
font-family: "Manrope", sans-serif; | font-family: "Manrope", sans-serif; | ||
position: relative; | position: relative; | ||
order: -10; | order: -10; | ||
transition: | transition: transform .15s ease; | ||
} | } | ||
/* Gradient border на всі 4 сторони (mask-trick зберігає прозорий фон) */ | |||
.skin-minerva .drawer-about-banner::before { | .skin-minerva .drawer-about-banner::before { | ||
content: ""; | content: ""; | ||
position: absolute; | position: absolute; | ||
inset: 0; | |||
border-radius: 14px; | |||
padding: 1px; | |||
background: linear-gradient( | background: linear-gradient( | ||
135deg, | |||
#00b898 0 | #00b898 0%, | ||
#f8b020 | #f8b020 35%, | ||
#1070b0 | #1070b0 65%, | ||
#f84840 | #f84840 100% | ||
); | ); | ||
-webkit-mask: | |||
linear-gradient(#000 0 0) content-box, | |||
linear-gradient(#000 0 0); | |||
-webkit-mask-composite: xor; | |||
mask-composite: exclude; | |||
pointer-events: none; | |||
} | } | ||
.skin-minerva .drawer-about-banner__title { | .skin-minerva .drawer-about-banner__title { | ||
| Рядок 713: | Рядок 719: | ||
text-decoration: none !important; | text-decoration: none !important; | ||
color: #1a2240 !important; | color: #1a2240 !important; | ||
} | } | ||
.skin-minerva .drawer-about-banner:hover .drawer-about-banner__arrow, | .skin-minerva .drawer-about-banner:hover .drawer-about-banner__arrow, | ||