diff --git a/odex25_base/fims_general_search_tree_view/static/src/css/list_search.css b/odex25_base/fims_general_search_tree_view/static/src/css/list_search.css index ea14e5efa..de65349d0 100644 --- a/odex25_base/fims_general_search_tree_view/static/src/css/list_search.css +++ b/odex25_base/fims_general_search_tree_view/static/src/css/list_search.css @@ -11,56 +11,127 @@ padding: 12px; } -/* Search container styles */ +/* Enhanced search container styles */ .oe_search_container { - background-color: #f8f9fa; - padding: 10px; - border-radius: 4px; - margin-bottom: 10px; + background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); + padding: 12px; + border-radius: 6px; + margin-bottom: 12px; + border: 1px solid #dee2e6; + box-shadow: 0 1px 3px rgba(0,0,0,0.1); + transition: all 0.3s ease; } +.oe_search_container:hover { + box-shadow: 0 2px 6px rgba(0,0,0,0.15); +} + +/* Enhanced search input styles */ .oe_search_input { transition: all 0.3s ease; + border-radius: 4px; + font-size: 14px; } .oe_search_input:focus { border-color: #007bff !important; - box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25); + box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25) !important; outline: none; + background-color: #fff; } +.oe_search_input::placeholder { + color: #6c757d; + font-style: italic; +} + +/* Enhanced clear button */ .oe_clear_search { min-width: 70px; + border-radius: 4px; + transition: all 0.2s ease; } +.oe_clear_search:hover { + background-color: #6c757d !important; + border-color: #6c757d !important; + transform: translateY(-1px); +} + +/* Enhanced search count display */ .oe_search_count { - color: #6c757d; + color: #28a745; font-size: 0.9em; - font-weight: 500; + font-weight: 600; + padding: 4px 8px; + background-color: rgba(40, 167, 69, 0.1); + border-radius: 4px; + border: 1px solid rgba(40, 167, 69, 0.2); + transition: all 0.3s ease; } -/* Loading indicator */ +/* Enhanced loading indicator */ .oe_search_loading { display: inline-block; margin-left: 10px; + color: #007bff; } -.oe_search_loading:after { - content: " "; - display: inline-block; - width: 16px; - height: 16px; - border-radius: 50%; - border: 2px solid #007bff; - border-color: #007bff transparent #007bff transparent; - animation: oe-search-spin 1.2s linear infinite; +.oe_search_loading i { + animation: enhanced-search-spin 1s linear infinite; } -@keyframes oe-search-spin { - 0% { - transform: rotate(0deg); +/* Responsive design improvements */ +@media (max-width: 768px) { + .oe_search_container { + flex-direction: column; + gap: 10px; } - 100% { - transform: rotate(360deg); + + .oe_search_input { + width: 100%; + margin-bottom: 10px; + } + + .oe_clear_search, + .oe_search_count { + align-self: flex-start; } } + +/* Enhanced loading animation */ +@keyframes enhanced-search-spin { + 0% { transform: rotate(0deg); } + 100% { transform: rotate(360deg); } +} + +/* Accessibility improvements */ +.oe_search_input:focus-visible { + outline: 2px solid #007bff; + outline-offset: 2px; +} + +.oe_clear_search:focus-visible { + outline: 2px solid #007bff; + outline-offset: 2px; +} + +/* Arabic text support enhancements */ +.oe_search_input[dir="rtl"] { + text-align: right; + direction: rtl; +} + +.oe_search_container[dir="rtl"] { + direction: rtl; +} + +.oe_search_container[dir="rtl"] .oe_clear_search { + margin-right: 8px; + margin-left: 0; +} + +.oe_search_container[dir="rtl"] .oe_search_count { + margin-right: 8px; + margin-left: 0; +} \ No newline at end of file