MediaWiki:Common.css: mudanças entre as edições

MediaWiki:Common.css (ver código-fonte)

Edição das 23h30min de 1 de maio de 2023

1 219 bytes adicionados , 1 de maio de 2023

sem sumário de edição

Rag

Burocratas, Administradores da interface, Administradores, Editores de widget

988

edições

@@ Linha 2: / Linha 2: @@
 .select-box {
    position: relative;
+  display: flex;
+  width: 400px;
+  flex-direction: column;
 }
-.search-box {
+.select-box .options-container {
-   display: block;
+   background: #2f3640;
+  color: #f5f6fa;
+  max-height: 0;
    width: 100%;
-   padding: 8px;
+   opacity: 0;
-   box-sizing: border-box;
+   transition: all 0.4s;
-   border: 1px solid #ccc;
+  border-radius: 8px;
-   border-radius: 4px;
+   overflow: hidden;
+  order: 1;
+}
+.selected {
+  background: #2f3640;
+   border-radius: 8px;
+  margin-bottom: 8px;
+  color: #f5f6fa;
+  position: relative;
+  order: 0;
 }
-.options-list {
+.selected::after {
+  content: "";
+  background: url("img/arrow-down.svg");
+  background-size: contain;
+  background-repeat: no-repeat;
    position: absolute;
-   top: 100%;
+   height: 100%;
+  width: 32px;
+  right: 10px;
+  top: 5px;
+  transition: all 0.4s;
+}
+.select-box .options-container.active {
+  max-height: 240px;
+  opacity: 1;
+  overflow-y: scroll;
+  margin-top: 54px;
+}
+.select-box .options-container.active + .selected::after {
+  transform: rotateX(180deg);
+  top: -6px;
+}
+.select-box .options-container::-webkit-scrollbar {
+  width: 8px;
+  background: #0d141f;
+  border-radius: 0 8px 8px 0;
+}
+.select-box .options-container::-webkit-scrollbar-thumb {
+  background: #525861;
+  border-radius: 0 8px 8px 0;
+}
+.select-box .option,
+.selected {
+  padding: 12px 24px;
+  cursor: pointer;
+}
+.select-box .option:hover {
+  background: #414b57;
+}
+.select-box label {
+  cursor: pointer;
+}
+.select-box .option .radio {
+  display: none;
+}
+/* Searchbox */
+.search-box input {
    width: 100%;
-   max-height: 200px;
+   padding: 12px 16px;
-   overflow: auto;
+  font-family: "Roboto", sans-serif;
+   font-size: 16px;
+  position: absolute;
+  border-radius: 8px 8px 0 0;
+  z-index: 100;
+  border: 8px solid #2f3640;
    opacity: 0;
    pointer-events: none;
-   transition: opacity 0.2s ease;
+   transition: all 0.4s;
 }
-.options-list option {
+.search-box input:focus {
-   padding: 8px;
+   outline: none;
-  font-size: 16px;
-  background-color: #fff;
 }
-.options-list option:hover {
+.select-box .options-container.active ~ .search-box input {
-  background-color: #f2f2f2;
-}
-.show {
    opacity: 1;
    pointer-events: auto;
-}
-.hide {
-  display: none;
 }
 /**/