MediaWiki:Common.css: Difference between revisions

(13 intermediate revisions by the same user not shown)

Line 4:

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&display=swap');

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

/* Espaçamento do seletor para afastar do "Main menu" e da "Main page" */

.gtranslate_wrapper {

~~padding~~: ~~8px 0~~;

margin-top: 18px !important; /* Espaço acima (Main menu) */

margin-bottom: ~~10px~~;

margin-bottom: 24px !important; /* Espaço abaixo (Main page) */

padding: 0 !important;

display: block !important;

}

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

/* Estilização da caixa e seta personalizada */

.~~gt_selector~~ {

.gtranslate_wrapper select {

-webkit-appearance: none !important;

-moz-appearance: none !important;

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

appearance: none !important;

width: 100% !important;

max-width: 100% !important;

~~height~~: ~~38px~~ !important;

padding: 6px 36px 6px 12px !important; /* 36px à direita dá margem ao chevron */

height: auto !important;

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

line-height: 1.4 !important;

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

box-sizing: border-box !important;

cursor: pointer !important;

~~font-family~~: ~~inherit~~ !important;

~~font~~-~~size~~: 0.~~875rem~~ !important;

/* Seta SVG personalizada afastada 14px da direita */

~~font~~-~~weight~~: ~~500 !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="%23000000" 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;

~~color: #202122~~ !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;~~

transition: border-color 0.2s ease !important;

~~border-radius: 6px !important;~~

~~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;

}

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

/* Animação: inverte a seta ao focar/abrir o select */

.~~gt_selector~~:~~hover~~ {

.gtranslate_wrapper select:focus {

~~border-color~~: ~~#72777d~~ !important;

outline: none !important;

background-~~color~~: ~~#f8f9fa~~ !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="%23000000" d="M2.22 7.53a.75.75 0 011.06 0L6 4.81l2.72 2.72a.75.75 0 101.06-1.06l-3.25-3.25a.75.75 0 00-1.06 0L2.22 6.47a.75.75 0 000 1.06z"/></svg>') !important;

}

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

~~.gt_selector:focus {~~

~~border-color: #36c !important;~~

~~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;

}