Merge remote-tracking branch 'upstream/dev' into theme_switcher

2025-04-29 18:55:30 +01:00
parent 62e9c32082
commit a68805b55d
116 changed files with 8020 additions and 3095 deletions
@@ -0,0 +1,79 @@
+.search-icon {
+    width: 2.3rem;
+}
+
+.search-icon-container {
+    position: relative;
+    flex-shrink: 0;
+}
+
+/* gives a wider hit area for the 3 people that will notice the animation : ) */
+.search-icon-container::before {
+    content: '';
+    position: absolute;
+    inset: -1rem;
+}
+
+.search-icon-container:hover > .search-icon {
+    animation: searchIconHover 2.9s forwards;
+}
+
+@keyframes searchIconHover {
+    0%, 39% { translate: 0 0; }
+    20% { scale: 1.3; }
+    40% { scale: 1; }
+    50% { translate: -30% 30%; }
+    70% { translate: 30% -30%; }
+    90% { translate: -30% -30%; }
+    100% { translate: 0 0; }
+}
+
+.search {
+    transition: border-color .2s;
+    position: relative;
+}
+
+.search:hover {
+    border-color: var(--color-text-subdue);
+}
+
+.search:focus-within {
+    border-color: var(--color-primary);
+}
+
+.search-input {
+    border: 0;
+    background: none;
+    width: 100%;
+    height: 6rem;
+    font: inherit;
+    outline: none;
+    color: var(--color-text-highlight);
+}
+
+.search-input::placeholder {
+    color: var(--color-text-base-muted);
+    opacity: 1;
+}
+
+.search-bangs { display: none; }
+
+.search-bang {
+    border-radius: calc(var(--border-radius) * 2);
+    background: var(--color-widget-background-highlight);
+    padding: 0.3rem 1rem;
+    flex-shrink: 0;
+    font-size: var(--font-size-h5);
+    animation: searchBangsEntrance .3s cubic-bezier(0.25, 1, 0.5, 1) backwards;
+}
+
+@keyframes searchBangsEntrance {
+    0% {
+        opacity: 0;
+        transform: translateX(-10px);
+    }
+}
+
+.search-bang:empty {
+    display: none;
+}