MediaWiki:Common.css：修订间差异

以互动方式浏览历史

←上一编辑下一编辑→

@@ 第78行： / 第78行： @@
      padding-left: 0;
 }
-/* 对齐搜索按钮 */
+/* 搜索框 */
-div#simpleSearch button#searchButton {
+#simpleSearch {
-    padding-top: .1em;
+  min-width: 100px;
-     padding-bottom: .2em;
+  max-width: 220px;
-     padding-right: .1em;
+  background-image: none;
+  border-radius: 20px;
+  padding: 0px 10px;
+  border: 2px solid var(--theme-color);
+  opacity: 0.625;
+  display: flex;
+  align-items: center;
+  transition: width 0.4s;
+}
+#simpleSearch:hover {
+  border-color: var(--theme-color) !important;
+}
+#simpleSearch:focus-within {
+  width: 240px;
+}
+#searchInput::-webkit-input-placeholder {
+  color: var(--theme-color) !important;
+}
+#searchInput::input-placeholder {
+  color: var(--theme-color) !important;
+}
+#simpleSearch #searchButton {
+  right: 8px !important;
+  -webkit-mask-size: contain;
+  mask-size: contain;
+  -webkit-mask-position: center;
+  mask-position: center;
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E %3Cpath d='M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z'%3E%3C/path%3E %3C/svg%3E");
+  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E %3Cpath d='M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z'%3E%3C/path%3E %3C/svg%3E");
+  background-color: var(--theme-color) !important;
+  background-image: none !important;
+  background-color: var(--theme-color) !important;
+  width: 20px !important;
+  height: 20px !important;
+  padding-block-start: 21px;
+}
+#simpleSearch:hover>#searchButton {
+  animation: shake 0.4s 1 forwards;
+}
+@keyframes shake {
+%,
+% {
+     transform: rotate(5deg) scale(1.05);
+  }
+%,
+% {
+     transform: rotate(-5deg) scale(1.05);
+  }
+% {
+    transform: rotate(0deg) scale(1.05);
+  }
 }
 /* 右上通知处奇怪的数字移除 */

MediaWiki:Common.css：修订间差异

imported>=海豚=