MediaWiki:Common.css: Difference between revisions
No edit summary |
No edit summary |
||
| Line 4: | Line 4: | ||
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&display=swap'); | @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&display=swap'); | ||
/* Espaçamento do container no menu lateral */ | |||
/* | |||
.gtranslate_wrapper { | .gtranslate_wrapper { | ||
padding: 8px 0; | padding: 8px 0; | ||
margin-bottom: 10px; | margin-bottom: 10px; | ||
} | } | ||
/* Estilo moderno do seletor com chevron SVG personalizado */ | |||
.gt_selector { | .gt_selector { | ||
-webkit-appearance: none !important; | |||
-moz-appearance: none !important; | |||
appearance: none !important; /* Oculta a seta nativa do sistema */ | |||
width: 100% !important; | width: 100% !important; | ||
max-width: 100% !important; | max-width: 100% !important; | ||
height: | height: 38px !important; | ||
padding: 6px 12px !important; | |||
/* Padding: Cima, Direita (espaço para o chevron), Baixo, Esquerda */ | |||
padding: 6px 36px 6px 12px !important; | |||
font-family: inherit !important; | font-family: inherit !important; | ||
font-size: 0.875rem !important; | font-size: 0.875rem !important; | ||
font-weight: 500 !important; | |||
color: #202122 !important; | color: #202122 !important; | ||
background-color: #ffffff !important; | background-color: #ffffff !important; | ||
/* Chevron SVG limpo e posicionado a 14px da margem direita */ | |||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%3C202122' d='M2.22 4.47a.75.75 0 011.06 0L6 7.19l2.72-2.72a.75.75 0 111.06 1.06l-3.25 3.25a.75.75 0 01-1.06 0L2.22 5.53a.75.75 0 010-1.06z'/%3E%3C/svg%3E") !important; | |||
background-repeat: no-repeat !important; | |||
background-position: right 14px center !important; | |||
background-size: 12px 12px !important; | |||
border: 1px solid #a2a9b1 !important; | border: 1px solid #a2a9b1 !important; | ||
border-radius: 6px !important; | border-radius: 6px !important; | ||
outline: none !important; | outline: none !important; | ||
cursor: pointer !important; | cursor: pointer !important; | ||
transition: border-color 0.2s ease, box-shadow 0.2s ease !important; | |||
/* Animação suave para borda, sombra e rotação do ícone */ | |||
transition: border-color 0.2s ease, box-shadow 0.2s ease, background-position 0.2s ease, transform 0.2s ease !important; | |||
box-sizing: border-box !important; | box-sizing: border-box !important; | ||
} | } | ||
/* Efeito ao passar o rato | /* Efeito ao passar o rato (Hover) */ | ||
.gt_selector:hover { | .gt_selector:hover { | ||
border-color: #72777d !important; | border-color: #72777d !important; | ||
background-color: #f8f9fa !important; | |||
} | } | ||
/* Estado focado/ativo (Focus / Open): Anima a rotação do chevron e ajusta a borda */ | |||
.gt_selector:focus { | .gt_selector:focus { | ||
border-color: #36c !important; | border-color: #36c !important; | ||
box-shadow: | box-shadow: 0 0 0 1px #36c !important; | ||
/* Inverte o chevron para cima com animação suave quando aberto */ | |||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%3C36c' d='M2.22 7.53a.75.75 0 010-1.06l3.25-3.25a.75.75 0 011.06 0l3.25 3.25a.75.75 0 11-1.06 1.06L6 4.81 3.28 7.53a.75.75 0 01-1.06 0z'/%3E%3C/svg%3E") !important; | |||
} | } | ||