From b6c738b3cfede0c0cc98fef43beaff889a6a4e19 Mon Sep 17 00:00:00 2001 From: HWFord <54360213+HWFord@users.noreply.github.com> Date: Tue, 31 Oct 2023 17:16:16 +0100 Subject: [PATCH] fixes #2028 Move search filters css and script combines In search_filters.inc add the combine scripts and css specific to search, Remove them from index.tpl In index keep fontello combine, only in if search Remove pwg-icon class to avoid icon conflits with themes Move search CSS to its own file, remove it from theme.css, It has also been taken from modus Have specific CSS for clear and dark themes (they handle only color) --- themes/default/css/clear-search.css | 257 ++++++ themes/default/css/dark-search.css | 257 ++++++ themes/default/css/search.css | 706 ++++++++++++++++ .../template/include/search_filters.inc.tpl | 7 + themes/default/template/index.tpl | 6 +- themes/default/theme.css | 796 +----------------- 6 files changed, 1255 insertions(+), 774 deletions(-) create mode 100644 themes/default/css/clear-search.css create mode 100644 themes/default/css/dark-search.css create mode 100644 themes/default/css/search.css diff --git a/themes/default/css/clear-search.css b/themes/default/css/clear-search.css new file mode 100644 index 000000000..a2408d6b0 --- /dev/null +++ b/themes/default/css/clear-search.css @@ -0,0 +1,257 @@ +/* Search default clear colros */ +.filter .filter-icon { + color: #474747; +} + +.filter-manager-popin, +.tags-found-popin, +.albums-found-popin { + background-color: rgba(0,0,0,0.7); +} + +.filter-manager-popin-container, +.tags-found-popin-container, +.albums-found-popin-container { + background: white; +} + +.filter-manager-close, +.tags-found-close, +.albums-found-close { + color: white; +} + +.filter-manager-popin .mcs-popin-title, +.tags-found-popin .mcs-popin-title, +.albums-found-popin .mcs-popin-title { + color: #ff7700; +} + +.mcs-popin-desc { + color:#777; +} + +.tags-found-container .tag-item, +.albums-found-container .album-item { + background: #F4AB4F; + color: #525252; +} + +.tags-found-container .tag-item a, +.albums-found-container .album-item a { + color: inherit; +} + +.filter-manager-popin label span { + border: 1px solid #777; +} + +.filter-manager-popin :checked + span { + border: 1px solid #777; + background: #777; + color: white; +} + +.filter-manager, +.filter-validate { + background: #ff7700bb; + color: white; +} + +.filter-manager:hover, +.filter-validate:hover { + background: #ff7700; +} + +.filter-cancel { + background: #e8e8ea; + color: #777; +} + +.filter-cancel:hover { + background: #dadada; +} + +.mcs-container .filter { + border: 1px solid #888; +} + +.filter-form { + background: white; + box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.6); + color: black; +} + +.filter-actions { + color: #aaa; +} + +.filter-actions > *:hover{ + color: #777; +} + +.mcs-container .filter-filled { + background: #ffeacf; + border: 1px solid #ff7700 !important; + color: #ff7700!important; +} + +.mcs-container .filter-filled .filter-icon { + color: #ff7700!important; +} + +.word-help { + color: #888; +} + +#word-search { + background: #eee; + color: #444; +} + + +.filetypes-option:nth-child(odd), +.added_by-option:nth-child(odd), +.date_posted-option:nth-child(odd) label { + background: #f3f3f3; +} + +.filetypes-option label .checked-icon, +.added_by-option label .checked-icon, +.date_posted-option label .checked-icon{ + color: #ff7700; +} + +.filetypes-option label .ext-badge, +.added_by-option label .added_by-badge, +.date_posted-option label .date_posted-badge { + background: #ff7700; + color: white; +} + +.filetypes-option input:checked + label { + background: #fff5e8; +} + +.date_posted-option input:checked + label { + background: rgba(244, 171, 79, 0.17); +} + +.head-button-2 { + color: #777; +} + +.head-button-2 { + background: #fafafa; + box-shadow: 0px 2px #00000024; +} + +.head-button-2:hover { + background: #eee; + color: #555 !important; +} + +.breadcrumb-item { + background-color: #f4ab4f; +} + +.breadcrumb-item:hover .icon-cancel-circled{ + color: black; +} + +.breadcrumb-item.add-item { + color: #777; + transition: 0.3s; +} + +.breadcrumb-item a:hover { + color: #3A3A3A; +} + +.breadcrumb-item .icon-cancel-circled:hover { + color: #ff7700; +} + +.linkedAlbumPopIn { + background-color: rgba(0,0,0,0.7); +} + +.linkedAlbumPopInContainer { + background-color: white; +} + +.ClosePopIn { + color: white; +} + +.ClosePopIn:hover { + color: white; +} + +.search-result-item { + background-color: #fafafa; + box-shadow: 0px 2px #00000024; + color: #777; +} + +.clear-all { + color: #c4c4c4; +} + +.clear-all.clickable { + color: #ff7700; +} + +.mcs-no-result .text span:first-child{ + color: #ff7700; +} + +.mcs-no-result .text span:last-child{ + color: #6e6e6e; +} + +.filter-form .filter-form-title { + color: #ff7700; +} + + +.filter-tag-form .selectize-input, +.filter-author-form .selectize-input, +.filter-added_by-form .selectize-input { + background: #eee; +} + +.filter-tag-form .selectize-input input, +.filter-author-form .selectize-input input, +.filter-added_by-form .selectize-input input { + background: transparent !important; + color: #444 !important; +} + +.filter-tag-form .selectize-input input::placeholder, +.filter-author-form .selectize-input input::placeholder, +.filter-added_by-form .selectize-input input::placeholder { + color: #444; +} + +.filter-tag-form .selectize-control.multi .selectize-input > div, +.filter-tag-form .selectize-control.multi .selectize-input [data-value].active, +.filter-author-form .selectize-control.multi .selectize-input > div, +.filter-author-form .selectize-control.multi .selectize-input [data-value].active, +.filter-added_by-form .selectize-control.multi .selectize-input > div, +.filter-added_by-form .selectize-control.multi .selectize-input [data-value].active { + background: #ffa835; + color: black; +} + +.filter-tag-form .selectize-dropdown, +.filter-author-form .selectize-dropdown, +.filter-added_by-form .selectize-dropdown { + background: #eee; +} + +.filter-tag-form .selectize-dropdown .option.active, +.filter-author-form .selectize-dropdown .option.active, +.filter-added_by-form .selectize-dropdown .option.active { + background: #ccc; +} \ No newline at end of file diff --git a/themes/default/css/dark-search.css b/themes/default/css/dark-search.css new file mode 100644 index 000000000..c011fee4a --- /dev/null +++ b/themes/default/css/dark-search.css @@ -0,0 +1,257 @@ +/* Search */ +.filter .filter-icon { + color:#aeaeae; +} + +.filter-manager-popin, +.tags-found-popin, +.albums-found-popin { + background-color: rgba(0,0,0,0.7); +} + +.filter-manager-popin-container, +.tags-found-popin-container, +.albums-found-popin-container { + background: #333; +} + +.filter-manager-close, +.tags-found-close, +.albums-found-close { + color: #777; +} + +.filter-manager-popin .mcs-popin-title, +.tags-found-popin .mcs-popin-title, +.albums-found-popin .mcs-popin-title { + color: #ff7700bb; +} + +.mcs-popin-desc { + color:#777; +} + +.tags-found-container .tag-item, +.albums-found-container .album-item { + background: #F4AB4F; + color: #525252; +} + +.tags-found-container .tag-item a, +.albums-found-container .album-item a { + color: inherit; +} + +.filter-manager-popin label span { + border: 1px solid #777; +} + +.filter-manager-popin :checked + span { + border: 1px solid #555; + background: #555; + color: #ccc; +} + +.filter-manager, +.filter-validate { + background: #ff7700bb; + color: #ffeacf; +} + +.filter-manager:hover, +.filter-validate:hover { + background: #ff7700bb; +} + +.filter-cancel { + background: #555; + color: #ccc; +} + +.filter-cancel:hover { + background: #444; +} + +.mcs-container .filter { + border: 1px solid #aeaeae; + color:#aeaeae; +} + +.filter-form { + background: #333; + box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.6); + color: #bbb; +} + +.filter-actions { + color: #aaa; +} + +.filter-actions > *:hover{ + color: #777; +} + +.mcs-container .filter-filled { + background: #ff7700bb; + border: 1px solid #ffeacf !important; + color: #ffeacf!important; +} + +.mcs-container .filter-filled .filter-icon { + color: #ffeacf!important; +} + +.word-help { + color: #888; +} + +#word-search { + background: #777; + color: #eee; +} + +.filetypes-option:nth-child(odd), +.added_by-option:nth-child(odd), +.date_posted-option:nth-child(odd) label { + background: #f3f3f3; +} + +.filetypes-option label .checked-icon, +.added_by-option label .checked-icon, +.date_posted-option label .checked-icon{ + color: #ff7700bb; +} + +.filetypes-option label .ext-badge, +.added_by-option label .added_by-badge, +.date_posted-option label .date_posted-badge { + background: #ff7700bb; + color: white; +} + +.filetypes-option input:checked + label { + background: #fff5e8; +} + +.date_posted-option input:checked + label { + background: rgba(244, 171, 79, 0.17); +} + +.head-button-2 { + color: #777; + background: #fafafa; + box-shadow: 0px 2px #00000024; +} + +.head-button-2:hover { + background: #eee; + color: #555 !important; +} + +.breadcrumb-item { + background-color: #f4ab4f; +} + +.breadcrumb-item:hover .icon-cancel-circled{ + color: black; +} + +.breadcrumb-item.add-item { + color: #777; +} + +.breadcrumb-item a:hover { + color: #3A3A3A; +} + +.breadcrumb-item .icon-cancel-circled:hover { + color: #ff7700bb; +} + +.linkedAlbumPopIn { + background-color: rgba(0,0,0,0.7); +} + +.linkedAlbumPopInContainer { + background-color: white; +} + +.ClosePopIn { + color: white; +} + +.search-result-item { + background-color: #fafafa; + box-shadow: 0px 2px #00000024; + color: #777; +} + +.clear-all { + color: #777; +} + +.clear-all.clickable { + color: #ff7700bb; +} + +.ClosePopIn:hover { + color: white; +} + +.mcs-no-result .text span:first-child{ + color: #ff7700bb; +} + +.mcs-no-result .text span:last-child{ + color: #6e6e6e; +} + +.filter-form .filter-form-title { + color: #ff7700bb; +} + + +.filter-tag-form .selectize-input, +.filter-author-form .selectize-input, +.filter-added_by-form .selectize-input { + background: #555; +} + +.filter-tag-form .selectize-input input, +.filter-author-form .selectize-input input, +.filter-added_by-form .selectize-input input { + color: #ccc ; +} + +.filter-tag-form .selectize-input input::placeholder, +.filter-author-form .selectize-input input::placeholder, +.filter-added_by-form .selectize-input input::placeholder { + color: #ccc; +} + +.filter-tag-form .selectize-control.multi .selectize-input > div, +.filter-tag-form .selectize-control.multi .selectize-input [data-value].active, +.filter-author-form .selectize-control.multi .selectize-input > div, +.filter-author-form .selectize-control.multi .selectize-input [data-value].active, +.filter-added_by-form .selectize-control.multi .selectize-input > div, +.filter-added_by-form .selectize-control.multi .selectize-input [data-value].active { + background: #ffa835; + color: black; +} + + +.filter-tag-form .selectize-dropdown, +.filter-author-form .selectize-dropdown, +.filter-added_by-form .selectize-dropdown { + background: #eee; +} + +.filter-tag-form .selectize-dropdown .option.active, +.filter-author-form .selectize-dropdown .option.active, +.filter-added_by-form .selectize-dropdown .option.active { + background: #555; +} + +.filter-tag-form .selectize-dropdown .selectize-dropdown-content{ + background-color: #444; +} \ No newline at end of file diff --git a/themes/default/css/search.css b/themes/default/css/search.css new file mode 100644 index 000000000..411ac52a4 --- /dev/null +++ b/themes/default/css/search.css @@ -0,0 +1,706 @@ +/* Search specific CSS, colors are defined in seperate files*/ +.filter-container { + display: flex; + flex-direction: row; + flex-wrap: wrap; + gap: 10px; +} + +.filter-manager-popin, +.tags-found-popin, +.albums-found-popin { + position: fixed; + z-index: 100; + left: 0; + top: 0; + width: 100%; + height: 100%; + overflow: auto; + display: none; +} + +.filter-manager-popin-container, +.tags-found-popin-container, +.albums-found-popin-container { + display:flex; + position:absolute; + left:50%; + top: 50%; + transform:translate(-50%, -48%); + text-align:left; + padding:20px; + flex-direction:column; + border-radius:15px; + align-items:center; + width: 400px; +} + +.filter-manager-close, +.tags-found-close, +.albums-found-close { + position: absolute; + right: -40px; + top: -40px; + font-size: 30px; + cursor: pointer; +} + +.filter-manager .mcs-icon::before { + margin: 0 5px 0 -2px; + transform: rotate(90deg); +} + +.filter-manager-popin .mcs-popin-title, +.tags-found-popin .mcs-popin-title, +.albums-found-popin .mcs-popin-title { + width: 100%; + font-size: 19px; + font-weight: 700; + margin: 0 0 20px 0; +} + +.mcs-popin-desc { + margin: 0 0 20px 0; +} + +.tags-found-container, +.albums-found-container { + display: flex; + flex-direction: row; + flex-wrap: wrap; + gap: 5px; +} + +.albums-found-container { + flex-direction: column; + align-items: flex-start; + width: 100%; +} + +.tags-found-container .tag-item, +.albums-found-container .album-item { + padding: 3px 6px; + border-radius: 5px; + max-width: 150px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + cursor: default; + direction: rtl; + text-align: left; +} + +.albums-found-container .album-item { + max-width: -moz-available; + max-width: -webkit-fill-available; + max-width: fill-available; +} + +.tags-found-container .tag-item a, +.albums-found-container .album-item a { + color: inherit; +} + +.filter-manager-popin .filter-manager-controller-container { + display: flex; + flex-direction: row; + gap: 15px; + flex-wrap: wrap; + margin-bottom: 20px; +} + +.filter-manager-popin .filter-manager-controller-container .mcs-icon::before { + display: inline-block; + width: 15px; +} + +.filter-manager-popin label { + white-space: nowrap; + margin: 6px 0; +} + +.filter-manager-popin label span { + border-radius: 20px; + padding: 5px 10px; +} + +.filter-manager-popin :checked + span { + border-radius: 20px; + padding: 5px 10px; +} + +.filter-manager-popin input[type='checkbox'] { + display: none; +} + +.filter-manager-actions { + display: flex; + margin: 0 0 0 auto; + gap: 10px; +} + +.mcs-container { + display: flex; + flex-direction: row; + gap: 10px 15px; + align-items: center; + flex-wrap: wrap; + margin: 0 15px; +} + +.filter-manager, +.filter-validate { + transition: 0.3s; + cursor: pointer; + border-radius: 5px; + font-size: 15px; + font-weight: 600; + padding: 4px 10px; + white-space: nowrap; +} + +.filter-cancel { + transition: 0.3s; + cursor: pointer; + border-radius: 5px; + font-size: 15px; + font-weight: 600; + padding: 4px 10px; +} + +.mcs-icon.pwg-icon-cog { + margin-right: 5px; +} + +.mcs-container .filter { + font-size: 15px; + position: relative; + border-radius: 20px; + padding: 3px 6px; + cursor: pointer; + display: none; +} + +.filter span { + margin: 0 3px; +} + +.filter .filter-arrow::before { + transition: 0.3s; +} + +.filter.show-filter-dropdown .filter-arrow::before { + transform: rotate(180deg); +} + +.filter-form { + display: none; + position: absolute; + z-index: 5; + padding: 20px; + border-radius: 5px; + top: 35px; + left: 0; + cursor: default; + flex-direction: column; +} + +.filter-form label { + cursor: pointer; +} + +.filter-actions { + position: absolute; + display: flex; + flex-direction: row; + top: 20px; + right: 20px; + gap: 5px; +} + +.filter-actions > *{ + cursor: pointer; + transition: 0.3s; +} + +.filter-actions span{ + margin: 0; +} + +.filter-filetypes-form .filter-actions, +.filter-date_posted-form .filter-actions { + gap: 5px; +} + +.word-help { + text-decoration: underline; + font-size: 14px; + cursor: pointer; +} + +#word-search { + margin: 0 0 10px 0; + width: -moz-available; + width: -webkit-fill-available; + border-radius: 5px; +} + +.word-search-options, +.filter-tag-form .search-params, +.filter-album-form .search-params { + display: flex; + flex-direction: row; + white-space: nowrap; + gap: 0 20px; + margin: 5px 0; +} + +.filter-validate { + width: fit-content; + margin-left: auto; +} + +.form-container .filter-validate { + width: fit-content; + margin-left: 20px; +} + +.filter .search-words { + max-width: 200px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.filter-word-form .search-params { + display: flex; + flex-direction: row; + gap: 5px 15px; + flex-wrap: wrap; +} + +.filter-word-form span { + margin: 0; +} + +.filter-word-form .search-params-title { + font-size: 16px; + font-weight: 600; + margin-top: 15px; +} + +.filter-filetypes-form { + width: 200px; +} + +.filter-date_posted-form { + width: 250px; +} + +.filetypes-option-container, +.added_by-option-container, +.date_posted-option-container { + display: flex; + flex-direction: column; + margin: 20px 0 20px 0; +} + +.date_posted-option-container { + margin: 10px 0 10px 0; +} + +.filetypes-option input, +.added_by-option input, +.date_posted-option input { + display: none; +} + +.filetypes-option label, +.added_by-option label, +.date_posted-option label { + display: flex; + flex-direction: row; + align-items: baseline; + position: relative; + padding: 5px; +} + +.filetypes-option label .checked-icon, +.added_by-option label .checked-icon, +.date_posted-option label .checked-icon{ + display: none; + position: absolute; + left: 0; + top: 4px; + margin: 5px; +} + +.filetypes-option label .ext-name, +.added_by-option label .added_by-name, +.date_posted-option label .date-period { + margin-left: 30px; + text-transform: uppercase; +} + +.added_by-option label .added_by-name{ + white-space: nowrap; + margin-right: 10px; +} + +.date_posted-option label .date-period{ + margin-left: 30px; +} + +.filetypes-option label .ext-badge, +.added_by-option label .added_by-badge, +.date_posted-option label .date_posted-badge { + margin-left: auto; + border-radius: 10px; + padding: 0 5px; + font-weight: 600; +} + +.filetypes-option input:checked + label .checked-icon, +.added_by-option input:checked + label .checked-icon, +.date_posted-option input:checked + label .checked-icon{ + display: flex; +} + +.filter-album-form { + width: 400px; +} + +.filter-album-form .search-sub-cats { + margin-top: 10px; +} + +.head-button-2 { + position: relative; + padding: 5px 12px 5px 8px; + border-radius: 5px; + font-weight: bold; + display: flex; + align-items: baseline; + cursor: pointer; + transition: 0.2s; + width: fit-content; +} + +.head-button-2:active { + box-shadow: none; + transform: translateY(2px); +} + +.head-button-2 p { + margin: 0; + white-space: nowrap; +} + +.head-button-2:hover { + text-decoration: none !important; +} + +.breadcrumb-item { + margin: 0 10px 5px 0px; + padding: 4px 8px; + border-radius: 5px; + font-weight: bold; + display: flex; + align-items: center; + position: relative; +} + +.breadcrumb-item .link-path { + margin-right: 15px; + white-space: nowrap; +} + +.breadcrumb-item .remove-item { + margin-left: auto; + cursor: pointer; +} + +.breadcrumb-item a { + padding: 0 5px; + font-weight: 400; +} + +.breadcrumb-item .icon-cancel-circled, +.breadcrumb-item .help-item { + margin-left: auto !important; + cursor: pointer; + position: absolute; + right: 10px; +} + +.breadcrumb-item.add-item { + width: min-content; + cursor: pointer; + transition: 0.3s; +} + +#addLinkedAlbum { + display:none; +} + +.linkedAlbumPopIn { + position: fixed; + z-index: 100; + left: 0; + top: 0; + width: 100%; + height: 100%; + overflow: auto; +} + +.linkedAlbumPopInContainer { + display:flex; + position:absolute; + left:50%; + top: 50%; + transform:translate(-50%, -48%); + text-align:left; + padding:20px; + flex-direction:column; + border-radius:15px; + align-items:center; + width: 400px; + height: 400px; +} + +.linkedAlbumPopInContainer .AddIconContainer { + margin-top: 20px; +} + +.ClosePopIn { + position: absolute; + right: -40px; + top: -40px; + font-size: 30px; +} + +.ClosePopIn:hover { + text-decoration: none; + cursor: pointer; +} + +.linkedAlbumPopInContainer .AddIcon { + border-radius: 9999px; + padding: 10px; + font-size: 2em; +} + +.AddIconTitle { + font-size: 1.4em; + font-weight: bold; + text-align: center; + margin-bottom: 10px; + margin-top: 15px; +} + +#linkedAlbumSearch .search-icon { + position: absolute; + transform: translate(7px, 8px); + font-size: 18px; + top: auto; +} + +.linkedAlbumPopInContainer #searchResult { + width: 100%; + overflow-y: auto; + max-height: 400px; + margin: 10px 0 0 0; +} + +.search-cancel-linked-album { + opacity: 0.4; + cursor: pointer; + position: absolute; + font-size: 18px; + transform: translate(215px, 8px); +} + +.search-cancel-linked-album:hover { + opacity: 1; +} + +.search-result-item { + margin: 10px 0px; + padding: 5px 10px; + height: 25px; + border-radius: 5px; + font-weight: bold; + display: flex; + align-items: center; + cursor: pointer; +} + +.search-result-path { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 80%; + direction: rtl; + text-align: left; +} + +.search-result-item .icon-plus-circled{ + margin-left: auto; + cursor: pointer; +} + +.search-result-item .notClickable { + opacity: 0.3; +} + +.linkedAlbumPopInContainer .searching { + margin-top: 10px; +} + +.clear-all { + cursor: not-allowed; + font-weight: 600; + white-space: nowrap; +} + +.clear-all.clickable { + cursor: pointer; +} + +.mcs-container .filter-manager-controller-container label { + cursor: pointer; +} + +.mcs-no-result { + margin: 30vh 0 0 0; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +.mcs-no-result .text { + display: flex; + flex-direction: column; + width: fit-content; + align-items: center; + text-align: center; +} + +.mcs-no-result .text span:first-child{ + font-size: 18px; + font-weight: 700; + margin: 0 0 15px 0; + max-width: 450px; +} + +.mcs-no-result .text span:last-child{ + font-size: 15px; + font-weight: 500; + max-width: 350px; +} + +.filter-form .filter-form-title { + font-weight: bold; + margin-bottom: 10px; +} + +.filter-tag-form .selectize-control, +.filter-author-form .selectize-control, +.filter-added_by-form .selectize-control { + margin-top: 10px; +} + +.filter-tag-form .selectize-input, +.filter-author-form .selectize-input, +.filter-added_by-form .selectize-input { + border-radius: 5px; + padding: 5px; + width: 350px; + display: flex; + flex-direction: row; + flex-wrap: wrap; + gap: 5px; +} + +.filter-tag-form .selectize-input input, +.filter-author-form .selectize-input input, +.filter-added_by-form .selectize-input input { + height: 16px; + padding: 0; + height: 26px; +} + +.filter-tag-form .selectize-control.multi .selectize-input > div, +.filter-tag-form .selectize-control.multi .selectize-input [data-value].active, +.filter-author-form .selectize-control.multi .selectize-input > div, +.filter-author-form .selectize-control.multi .selectize-input [data-value].active, +.filter-added_by-form .selectize-control.multi .selectize-input > div, +.filter-added_by-form .selectize-control.multi .selectize-input [data-value].active { + padding: 2px 4px; + border-radius: 5px; + width: fit-content; + gap: 5px; + height: fit-content; +} + +.filter-tag-form .selectize-control.multi .selectize-input > div .remove, +.filter-author-form .selectize-control.multi .selectize-input > div .remove, +.filter-added_by-form .selectize-control.multi .selectize-input > div .remove { + text-decoration: none; + border: none; + margin: 0 0 0 10px; +} + +.filter-tag-form .selectize-dropdown, +.filter-author-form .selectize-dropdown, +.filter-added_by-form .selectize-dropdown { + padding: 0; + max-height: 100px; + overflow-y: scroll; + position: absolute; +} + +.filter-tag-form .selectize-dropdown .option, +.filter-author-form .selectize-dropdown .option, +.filter-added_by-form .selectize-dropdown .option { + padding: 0 5px; +} + +.filter-tag-form .selectize-dropdown .option.active, +.filter-author-form .selectize-dropdown .option.active, +.filter-added_by-form .selectize-dropdown .option.active { + border-radius: 5px; +} + +.filter-tag-form .form-container, +.filter-author-form .form-container, +.filter-added_by-form .form-container { + display: flex; + flex-direction: row; + align-items: flex-end; +} + +.filter-validate .loading { + display: none; +} + +.filter-album-form .add-album-button { + width: fit-content; +} + +.filetypes-option, +.added_by-option{ + min-width:150px!important; +} + +.filter-filetypes-form .form-container, +.filter-added_by-form .form-container, +.filter-date_posted .form-container { + max-height: 300px; + overflow-y: auto; +} + +.section-search .sticky-top{ + z-index: 10!important; +} diff --git a/themes/default/template/include/search_filters.inc.tpl b/themes/default/template/include/search_filters.inc.tpl index 18f5636c6..e2d7a9e19 100644 --- a/themes/default/template/include/search_filters.inc.tpl +++ b/themes/default/template/include/search_filters.inc.tpl @@ -1,3 +1,10 @@ +{combine_script id='jquery.selectize' load='footer' path='themes/default/js/plugins/selectize.min.js'} +{combine_css path="admin/themes/default/fontello/css/animation.css" order=10} {* order 10 is required, see issue 1080 *} +{combine_script id='jquery.tipTip' load='header' path='themes/default/js/plugins/jquery.tipTip.minified.js'} +{combine_css path="themes/default/css/search.css" order=-100} +{combine_css path="themes/default/css/{$themeconf.colorscheme}-search.css" order=-100} +{combine_css path="themes/default/vendor/fontello/css/fontello.css" order=-10} + {footer_script} {if isset($GP)} global_params = {$GP}; diff --git a/themes/default/template/index.tpl b/themes/default/template/index.tpl index 10599dd14..e437bc63b 100644 --- a/themes/default/template/index.tpl +++ b/themes/default/template/index.tpl @@ -1,7 +1,4 @@ {combine_script id='core.switchbox' load='async' require='jquery' path='themes/default/js/switchbox.js'} -{combine_script id='jquery.selectize' load='footer' path='themes/default/js/plugins/selectize.min.js'} -{combine_css path="admin/themes/default/fontello/css/animation.css" order=10} {* order 10 is required, see issue 1080 *} -{combine_script id='jquery.tipTip' load='header' path='themes/default/js/plugins/jquery.tipTip.minified.js'} {$MENUBAR} @@ -16,8 +13,9 @@