MediaWiki:Common.css: Difference between revisions

← Older edit

@@ Line 4: / Line 4: @@
 @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&display=swap');
-/* Container do Seletor */
+/* Espaçamento do seletor para afastar do "Main menu" e da "Main page" */
-.gtranslate_wrapper#custom-lang-selector {
+.gtranslate_wrapper {
-   position: relative;
+   margin-top: 18px !important;    /* Espaço acima (Main menu) */
-  width: 100%;
+   margin-bottom: 24px !important; /* Espaço abaixo (Main page) */
-   margin-bottom: 12px;
+   padding: 0 !important;
-   font-family: inherit;
+   display: block !important;
-   user-select: none;
 }
-/* Botão Principal */
+/* Estilização da caixa e seta personalizada */
-.custom-lang-trigger {
+.gtranslate_wrapper select {
-   display: flex;
+   -webkit-appearance: none !important;
-  align-items: center;
+   -moz-appearance: none !important;
-  justify-content: space-between;
+   appearance: none !important;
-  height: 38px;
-  padding: 0 14px;
+   width: 100% !important;
-   background-color: #ffffff;
+   max-width: 100% !important;
-  border: 1px solid #a2a9b1;
+   padding: 6px 36px 6px 12px !important; /* 36px à direita dá margem ao chevron */
-  border-radius: 6px;
+   height: auto !important;
-   cursor: pointer;
+   line-height: 1.4 !important;
-   box-sizing: border-box;
+   box-sizing: border-box !important;
-   transition: border-color 0.2s ease, box-shadow 0.2s ease;
+   cursor: pointer !important;
-}
-.custom-lang-trigger:hover,
-.gtranslate_wrapper#custom-lang-selector.open .custom-lang-trigger {
-   border-color: #1B2826;
-   box-shadow: 0 0 0 1px #1B2826;
-}
-.custom-lang-current {
-  font-size: 0.875rem;
-  font-weight: 500;
-  color: #1B2826;
-}
-/* Seta / Chevron com Animação de Rotação Smooth */
-.custom-lang-arrow {
-  width: 12px;
-   height: 12px;
-   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="%231B2826" 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>');
-   background-repeat: no-repeat;
-  background-position: center;
-  transition: transform 0.25s ease;
-}
-/* Rotação do Chevron ao Abrir */
-.gtranslate_wrapper#custom-lang-selector.open .custom-lang-arrow {
-  transform: rotate(180deg);
-}
-/* Menu Dropdown Suspenso */
-.custom-lang-menu {
-  display: none;
-  position: absolute;
-  top: calc(100% + 4px);
-  left: 0;
-  right: 0;
-  background: #ffffff;
-  border: 1px solid #1B2826;
-  border-radius: 6px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-  z-index: 9999;
-  overflow: hidden;
-}
-.gtranslate_wrapper#custom-lang-selector.open .custom-lang-menu {
-  display: block;
-}
-/* Opções de Idioma */
-.custom-lang-option {
-  padding: 8px 14px;
-  font-size: 0.875rem;
-  color: #1B2826;
-   cursor: pointer;
-  transition: background-color 0.15s ease, color 0.15s ease;
-}
-/* Hover e Item Selecionado em Verde Escuro (#1B2826) */
+  /* Seta SVG personalizada afastada 14px da direita */
-.custom-lang-option:hover {
+  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;
-   background-color: #1B2826;
+  background-repeat: no-repeat !important;
-   color: #ffffff;
+  background-position: right 14px center !important;
+   background-size: 12px 12px !important;
+  transition: border-color 0.2s ease !important;
 }
-.custom-lang-option.selected {
+/* Animação: inverte a seta ao focar/abrir o select */
-   background-color: #1B2826;
+.gtranslate_wrapper select:focus {
-   color: #BFFF00; /* Texto em Verde Lima para a linguagem ativa */
+   outline: none !important;
-  font-weight: 600;
+   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;
 }