MediaWiki:Common.css: Difference between revisions

Line 6:

/* Espaçamento do container no menu lateral */

.gtranslate_wrapper {

padding: 8px 0;

padding: 8px 0 !important;

margin-bottom: 10px;

margin-bottom: 10px !important;

}

/* ~~Estilo moderno~~ do ~~seletor com chevron SVG personalizado~~ */

/* Estilização direta do elemento select e da classe do GTranslate */

.gtranslate_wrapper select,

.gt_selector {

-webkit-appearance: none !important;

-moz-appearance: none !important;

appearance: none !important; ~~/* Oculta a seta nativa do sistema */~~

appearance: none !important;

width: 100% !important;

Line 20:

Line 21:

height: 38px !important;

/* ~~Padding~~: Cima, Direita (espaço para o chevron), Baixo, Esquerda */

/* Espaço interno: Cima, Direita (espaço para o chevron), Baixo, Esquerda */

padding: 6px 36px 6px 12px !important;

Line 29:

Line 30:

background-color: #ffffff !important;

/* Chevron SVG limpo e posicionado a 14px da ~~margem~~ direita */

/* Chevron SVG limpo e posicionado a 14px da borda 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-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12"><path fill="%23202122" 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"/></svg>') !important;

background-repeat: no-repeat !important;

background-position: right 14px center !important;

Line 39:

Line 40:

outline: none !important;

cursor: pointer !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;

transition: border-color 0.2s ease, box-shadow 0.2s ease !important;

}

/* Efeito ~~ao passar o rato (~~Hover) */

/* Efeito Hover */

.gtranslate_wrapper select:hover,

.gt_selector:hover {

border-color: #72777d !important;

Line 51:

}

/* Estado ~~focado~~/~~ativo (Focus / Open)~~: ~~Anima~~ a ~~rotação do~~ chevron ~~e ajusta a borda~~ */

/* Estado de Foco / Abertura: muda a borda e inverte o chevron para cima */

.gtranslate_wrapper select:focus,

.gt_selector:focus {

border-color: #36c !important;

box-shadow: 0 0 0 1px #36c !important;

background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12"><path fill="%233366cc" 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"/></svg>') !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;

}