feat(ux): YouTube-identical search bar, clear button, mobile overlay & animated voice modal v1.2.0

2026-08-29 21:47:30 +03:00
parent 5d2ef55356
commit 485e6923a8
3 changed files with 604 additions and 144 deletions
@@ -405,3 +405,306 @@ my-header .action-buttons {
 .yaktube-admin-login-link a:hover {
  text-decoration: underline;
 }
+
+/* -------------------------------------------------------------------------- */
+/* YOUTUBE-STYLE SEARCH BAR & VOICE SEARCH MODAL (v1.2.0)                     */
+/* -------------------------------------------------------------------------- */
+
+/* Header Search Container Pill Styling */
+my-search-typeahead,
+.search-container,
+.header-search {
+  display: flex !important;
+  align-items: center !important;
+  position: relative !important;
+}
+
+.yaktube-search-pill-wrapper {
+  display: flex !important;
+  align-items: center !important;
+  background: #121212 !important;
+  border: 1px solid #303030 !important;
+  border-radius: 40px !important;
+  padding: 2px 6px 2px 14px !important;
+  transition: all 0.2s ease !important;
+  width: 100% !important;
+  max-width: 580px !important;
+  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4) !important;
+}
+
+.yaktube-search-pill-wrapper:focus-within {
+  border-color: #ff8f37 !important;
+  box-shadow:
+    0 0 0 1px #ff8f37,
+    0 0 12px rgba(255, 143, 55, 0.3) !important;
+  background: #0f0f0f !important;
+}
+
+.yaktube-search-pill-wrapper input {
+  background: transparent !important;
+  border: none !important;
+  color: #f1f1f1 !important;
+  font-size: 15px !important;
+  padding: 8px 6px !important;
+  width: 100% !important;
+  outline: none !important;
+  box-shadow: none !important;
+}
+
+.yaktube-search-pill-wrapper input::placeholder {
+  color: #888 !important;
+  font-size: 14px !important;
+}
+
+/* Clear Button Inside Pill */
+.yaktube-clear-search-btn {
+  background: rgba(255, 255, 255, 0.12) !important;
+  color: #aaa !important;
+  border: none !important;
+  border-radius: 50% !important;
+  width: 24px !important;
+  height: 24px !important;
+  display: none;
+  align-items: center !important;
+  justify-content: center !important;
+  font-size: 12px !important;
+  font-weight: 700 !important;
+  cursor: pointer !important;
+  margin: 0 6px !important;
+  transition: all 0.2s ease !important;
+  flex-shrink: 0 !important;
+}
+
+.yaktube-clear-search-btn:hover {
+  background: rgba(255, 255, 255, 0.25) !important;
+  color: #fff !important;
+}
+
+/* Search Submit Button on Right of Pill */
+.yaktube-search-submit-btn {
+  background: #222222 !important;
+  color: #f1f1f1 !important;
+  border: none !important;
+  border-left: 1px solid #303030 !important;
+  border-radius: 0 40px 40px 0 !important;
+  padding: 8px 18px !important;
+  cursor: pointer !important;
+  display: inline-flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  font-size: 14px !important;
+  transition: all 0.2s ease !important;
+  margin: -2px -6px -2px 0 !important;
+}
+
+.yaktube-search-submit-btn:hover {
+  background: #272727 !important;
+  color: #ff8f37 !important;
+}
+
+/* YouTube Circular Voice Button Beside Search Box */
+.yaktube-voice-search-btn {
+  background: #1f1f1f !important;
+  color: #f1f1f1 !important;
+  border: 1px solid rgba(255, 255, 255, 0.08) !important;
+  border-radius: 50% !important;
+  width: 40px !important;
+  height: 40px !important;
+  display: inline-flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  font-size: 18px !important;
+  cursor: pointer !important;
+  margin-left: 10px !important;
+  transition: all 0.25s ease !important;
+  flex-shrink: 0 !important;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
+}
+
+.yaktube-voice-search-btn:hover {
+  background: #2a2a2a !important;
+  border-color: #ff8f37 !important;
+  color: #ff8f37 !important;
+  transform: scale(1.06) !important;
+}
+
+/* YouTube-Style Voice Search Modal Overlay */
+.yaktube-voice-modal-overlay {
+  position: fixed !important;
+  top: 0 !important;
+  left: 0 !important;
+  width: 100vw !important;
+  height: 100vh !important;
+  background: rgba(0, 0, 0, 0.75) !important;
+  backdrop-filter: blur(8px) !important;
+  z-index: 99999 !important;
+  display: flex !important;
+  align-items: flex-start !important;
+  justify-content: center !important;
+  padding-top: 80px !important;
+  animation: yaktube-fade-in 0.2s ease !important;
+}
+
+.yaktube-voice-modal-card {
+  background: #212121 !important;
+  border: 1px solid rgba(255, 255, 255, 0.1) !important;
+  border-radius: 16px !important;
+  width: 90% !important;
+  max-width: 560px !important;
+  padding: 24px 28px !important;
+  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.7) !important;
+  color: #fff !important;
+  position: relative !important;
+}
+
+.yaktube-voice-modal-header {
+  display: flex !important;
+  justify-content: space-between !important;
+  align-items: center !important;
+  margin-bottom: 24px !important;
+}
+
+.yaktube-voice-modal-title {
+  font-size: 20px !important;
+  font-weight: 500 !important;
+  margin: 0 !important;
+  color: #f1f1f1 !important;
+}
+
+.yaktube-voice-modal-close-btn {
+  background: transparent !important;
+  border: none !important;
+  color: #aaa !important;
+  font-size: 20px !important;
+  cursor: pointer !important;
+  width: 36px !important;
+  height: 36px !important;
+  border-radius: 50% !important;
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  transition: all 0.2s ease !important;
+}
+
+.yaktube-voice-modal-close-btn:hover {
+  background: rgba(255, 255, 255, 0.1) !important;
+  color: #fff !important;
+}
+
+.yaktube-voice-modal-body {
+  text-align: center !important;
+  padding: 10px 0 20px 0 !important;
+}
+
+.yaktube-voice-status-text {
+  font-size: 22px !important;
+  font-weight: 600 !important;
+  color: #f1f1f1 !important;
+  margin-bottom: 12px !important;
+  min-height: 30px !important;
+}
+
+.yaktube-voice-transcript-preview {
+  font-size: 16px !important;
+  color: #ff8f37 !important;
+  font-weight: 500 !important;
+  margin-bottom: 30px !important;
+  min-height: 24px !important;
+  word-break: break-word !important;
+}
+
+/* Pulsing Mic Circle Animation */
+.yaktube-voice-mic-wrapper {
+  position: relative !important;
+  display: inline-flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  margin: 10px 0 25px 0 !important;
+}
+
+.yaktube-voice-mic-pulse-btn {
+  background: #cc0000 !important;
+  color: #fff !important;
+  border: none !important;
+  border-radius: 50% !important;
+  width: 76px !important;
+  height: 76px !important;
+  font-size: 34px !important;
+  cursor: pointer !important;
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  box-shadow: 0 4px 20px rgba(204, 0, 0, 0.5) !important;
+  z-index: 2 !important;
+  transition: all 0.2s ease !important;
+}
+
+.yaktube-voice-mic-pulse-btn:hover {
+  transform: scale(1.05) !important;
+}
+
+.yaktube-voice-mic-pulse-btn.yaktube-idle-mic {
+  background: #333 !important;
+  box-shadow: none !important;
+}
+
+.yaktube-voice-ripple {
+  position: absolute !important;
+  width: 76px !important;
+  height: 76px !important;
+  border-radius: 50% !important;
+  background: rgba(204, 0, 0, 0.4) !important;
+  animation: yaktube-ripple-wave 1.6s infinite ease-out !important;
+  z-index: 1 !important;
+}
+
+@keyframes yaktube-ripple-wave {
+  0% {
+    transform: scale(1);
+    opacity: 0.8;
+  }
+  100% {
+    transform: scale(2.2);
+    opacity: 0;
+  }
+}
+
+.yaktube-voice-hint-text {
+  font-size: 13px !important;
+  color: #888 !important;
+  margin-top: 10px !important;
+}
+
+/* Mobile Search Overlay Mode */
+@media (max-width: 768px) {
+  body.yaktube-mobile-search-active my-header .header-left,
+  body.yaktube-mobile-search-active my-header .header-right,
+  body.yaktube-mobile-search-active my-header .user-menu {
+    display: none !important;
+  }
+  body.yaktube-mobile-search-active my-search-typeahead,
+  body.yaktube-mobile-search-active .search-container {
+    width: 100% !important;
+    max-width: 100% !important;
+    display: flex !important;
+  }
+  .yaktube-search-back-btn {
+    display: inline-flex !important;
+  }
+}
+
+.yaktube-search-back-btn {
+  display: none;
+  background: transparent !important;
+  border: none !important;
+  color: #fff !important;
+  font-size: 20px !important;
+  width: 36px !important;
+  height: 36px !important;
+  border-radius: 50% !important;
+  align-items: center !important;
+  justify-content: center !important;
+  cursor: pointer !important;
+  margin-right: 8px !important;
+  flex-shrink: 0 !important;
+}