YakNet/peertube-plugin-yaktube-ondemand
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(a11y): remove repetitive card titles, clean date buttons & simplify search header v1.2.2

Browse Source
This commit is contained in:
Enes Yakıştır
2026-08-29 22:43:55 +03:00
parent 51979ed8eb
commit 1342281bef
3 changed files with 49 additions and 158 deletions
Download Patch File Download Diff File Expand all files Collapse all files
style.css
+26 -61
View File
@@ -408,29 +408,20 @@ my-header .action-buttons {
/* -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */
/* YOUTUBE-STYLE SEARCH BAR & VOICE SEARCH MODAL (v1.2.1) */
/* -------------------------------------------------------------------------- */
/* YOUTUBE-STYLE SEARCH BAR & VOICE SEARCH MODAL (v1.2.2 - A11y Optimized) */
/* -------------------------------------------------------------------------- */
/* Desktop & Common Pill Styling */
@media (min-width: 769px) {
my-search-typeahead,
.search-container,
.header-search {
display: flex !important;
align-items: center !important;
position: relative !important;
width: 100% !important;
max-width: 580px !important;
margin: 0 auto !important;
}
.yaktube-search-back-btn {
display: none !important;
}
.yaktube-mobile-search-trigger {
display: none !important;
}
/* Header Search Container Pill Styling */
my-search-typeahead,
.search-container,
.header-search {
display: flex !important;
align-items: center !important;
position: relative !important;
width: 100% !important;
max-width: 580px !important;
margin: 0 auto !important;
}
.yaktube-search-pill-wrapper {
@@ -439,7 +430,7 @@ my-header .action-buttons {
background: #121212 !important;
border: 1px solid #303030 !important;
border-radius: 40px !important;
padding: 2px 6px 2px 14px !important;
padding: 2px 10px 2px 14px !important;
transition: all 0.2s ease !important;
width: 100% !important;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4) !important;
@@ -493,28 +484,6 @@ my-header .action-buttons {
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;
@@ -528,7 +497,7 @@ my-header .action-buttons {
justify-content: center !important;
font-size: 18px !important;
cursor: pointer !important;
margin-left: 10px !important;
margin-left: 8px !important;
transition: all 0.25s ease !important;
flex-shrink: 0 !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
@@ -541,6 +510,16 @@ my-header .action-buttons {
transform: scale(1.06) !important;
}
/* Hide back button on desktop */
@media (min-width: 769px) {
.yaktube-search-back-btn {
display: none !important;
}
.yaktube-mobile-search-trigger {
display: none !important;
}
}
/* YouTube-Style Voice Search Modal Overlay */
.yaktube-voice-modal-overlay {
position: fixed !important;
@@ -688,27 +667,13 @@ my-header .action-buttons {
margin-top: 10px !important;
}
/* -------------------------------------------------------------------------- */
/* MOBILE SEARCH OVERLAY MODE (< 768px) */
/* -------------------------------------------------------------------------- */
/* Mobile Search Overlay (< 768px) */
@media (max-width: 768px) {
/* Default Mobile State: Hide Full Search Input */
body:not(.yaktube-mobile-search-active) my-search-typeahead,
body:not(.yaktube-mobile-search-active) .search-container,
body:not(.yaktube-mobile-search-active) .header-search {
body:not(.yaktube-mobile-search-active) .search-container {
display: none !important;
}
.yaktube-mobile-search-trigger {
display: inline-flex !important;
}
/* Active Mobile Search Overlay: Full Width Bar */
body.yaktube-mobile-search-active my-header {
padding: 0 8px !important;
position: relative !important;
}
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,