MediaWiki:Gadget-GrAnnotations.css: Difference between revisions
Undo revision 5750 by Chandrashekars (talk) Tag: Undo |
No edit summary |
||
| Line 708: | Line 708: | ||
body.skin-minerva #mw-content-text .mw-parser-output > *:first-child { | body.skin-minerva #mw-content-text .mw-parser-output > *:first-child { | ||
scroll-margin-top: calc(var(--gr-bar-h) + 8px); | scroll-margin-top: calc(var(--gr-bar-h) + 8px); | ||
} | |||
/* ══════════════════════════════════════════════════════════════════ | |||
SELECTION FAB — terracotta theme, slightly bigger | |||
══════════════════════════════════════════════════════════════════ */ | |||
#gra-fab { | |||
background: #b5451b !important; | |||
border: none !important; | |||
border-radius: 28px !important; | |||
padding: 5px 4px !important; | |||
box-shadow: 0 3px 14px rgba(181,69,27,0.35) !important; | |||
gap: 2px !important; | |||
} | |||
.gra-fab-btn { | |||
width: 42px !important; | |||
height: 42px !important; | |||
border-radius: 50% !important; | |||
background: transparent !important; | |||
transition: background 0.12s !important; | |||
} | |||
.gra-fab-btn:hover { | |||
background: rgba(255,255,255,0.18) !important; | |||
} | |||
.gra-fab-btn .gra-icon { | |||
width: 22px !important; | |||
height: 22px !important; | |||
filter: brightness(0) invert(1) !important; | |||
} | |||
.gra-fab-tooltip { | |||
background: rgba(30,30,30,0.88) !important; | |||
font-size: 11px !important; | |||
} | |||
/* Search icon in FAB using an inline SVG data-URI */ | |||
.gra-icon-search { | |||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='16.5' y1='16.5' x2='22' y2='22'/%3E%3C/svg%3E") !important; | |||
} | |||
/* ══════════════════════════════════════════════════════════════════ | |||
MOBILE BOTTOM BAR — terracotta theme | |||
══════════════════════════════════════════════════════════════════ */ | |||
#gra-mobile-bar-inner { | |||
background: #b5451b !important; | |||
border-top: none !important; | |||
border-radius: 16px 16px 0 0 !important; | |||
box-shadow: 0 -4px 20px rgba(181,69,27,0.35) !important; | |||
} | |||
.gra-mob-btn { | |||
color: rgba(255,255,255,0.92) !important; | |||
border-right-color: rgba(255,255,255,0.18) !important; | |||
min-height: 76px !important; | |||
padding: 16px 8px !important; | |||
font-size: 12px !important; | |||
} | |||
.gra-mob-btn:active { | |||
background: rgba(0,0,0,0.12) !important; | |||
} | |||
.gra-mob-btn .gra-icon { | |||
width: 26px !important; | |||
height: 26px !important; | |||
filter: brightness(0) invert(1) !important; | |||
} | |||
.gra-mob-label { | |||
color: rgba(255,255,255,0.88) !important; | |||
font-size: 11px !important; | |||
font-weight: 500 !important; | |||
} | |||
.gra-mob-dismiss { | |||
color: rgba(255,255,255,0.70) !important; | |||
} | |||
.gra-mob-dismiss .gra-mob-label { | |||
color: rgba(255,255,255,0.60) !important; | |||
} | |||
.gra-mob-dismiss span[style] { | |||
color: rgba(255,255,255,0.70) !important; | |||
} | } | ||