diff --git a/themes/default/theme.css b/themes/default/theme.css index f454bf698..b08a8ecd0 100644 --- a/themes/default/theme.css +++ b/themes/default/theme.css @@ -835,4 +835,814 @@ LEGEND { #TagsGroupRemoveTag span, #TagsGroupRemoveTag i{ display:none; +} + +/* Search */ + +.filter-container { + display: flex; + flex-direction: row; + flex-wrap: wrap; + gap: 10px; +} + +.filter .filter-icon { + color: #474747; +} + +.filter-manager-popin, +.tags-found-popin, +.albums-found-popin { + position: fixed; + z-index: 100; + left: 0; + top: 0; + width: 100%; + height: 100%; + overflow: auto; + background-color: rgba(0,0,0,0.7); + 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; + background: white; +} + +.filter-manager-close, +.tags-found-close, +.albums-found-close { + position: absolute; + right: -40px; + top: -40px; + font-size: 30px; + color: white; + 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; + color: #ff7700; + font-weight: 700; + 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 { + background: #F4AB4F; + color: #525252; + 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: 1px solid #777; + border-radius: 20px; + padding: 5px 10px; +} + +.filter-manager-popin :checked + span { + border: 1px solid #777; + background: #777; + color: white; + 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 { + background: #ff7700bb; + transition: 0.3s; + cursor: pointer; + color: white; + border-radius: 5px; + font-size: 15px; + font-weight: 600; + padding: 4px 10px; + white-space: nowrap; +} +.filter-manager:hover, +.filter-validate:hover { + background: #ff7700; +} + +.filter-cancel { + background: #e8e8ea; + transition: 0.3s; + cursor: pointer; + color: #777; + border-radius: 5px; + font-size: 15px; + font-weight: 600; + padding: 4px 10px; +} +.filter-cancel:hover { + background: #dadada; +} + +.mcs-icon.pwg-icon-cog { + margin-right: 5px; +} + +.mcs-container .filter { + font-size: 15px; + position: relative; + border-radius: 20px; + padding: 3px 6px; + border: 1px solid #888; + 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-filled { + background: #ffeacf; + border: 1px solid #ff7700 !important; + color: #ff7700; +} +.filter-filled .filter-icon { + color: #ff7700; +} + +.filter-form { + display: none; + background: white; + position: absolute; + z-index: 5; + padding: 20px; + border-radius: 5px; + box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.6); + top: 35px; + left: 0; + cursor: default; + flex-direction: column; + color: black; +} + +.filter-form label { + cursor: pointer; +} + +.filter-actions { + position: absolute; + display: flex; + flex-direction: row; + top: 20px; + right: 20px; + color: #aaa; + gap: 5px; +} +.filter-actions > *{ + cursor: pointer; + transition: 0.3s; +} +.filter-actions > *:hover{ + color: #777; +} +.filter-actions span{ + margin: 0; +} + +.filter-filetypes-form .filter-actions, +.filter-date_posted-form .filter-actions { + gap: 5px; +} + +.word-help { + text-decoration: underline; + color: #888; + font-size: 14px; + cursor: pointer; +} + +#word-search { + margin: 0 0 10px 0; + width: -moz-available; + width: -webkit-fill-available; + background: #eee; + color: #444; + 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, +.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:nth-child(odd), +.date_posted-option:nth-child(odd) label { + background: #f3f3f3; +} + +.filetypes-option input, +.date_posted-option input { + display: none; +} +.filetypes-option label, +.date_posted-option label { + display: flex; + flex-direction: row; + align-items: baseline; + position: relative; + padding: 5px; +} +/* .date_posted-option label { + width: 230px; + transform: translateX(-20px); +} */ +.filetypes-option label .checked-icon, +.date_posted-option label .checked-icon{ + display: none; + position: absolute; + left: 0; + top: 4px; + margin: 5px; + color: #ff7700; +} + +.filetypes-option label .ext-name { + margin-left: 30px; + text-transform: uppercase; +} +.date_posted-option label .date-period{ + margin-left: 30px; +} + +.filetypes-option label .ext-badge, +.date_posted-option label .date_posted-badge { + margin-left: auto; + background: #ff7700; + border-radius: 10px; + padding: 0 5px; + color: white; + font-weight: 600; +} + +.filetypes-option input:checked + label .checked-icon, +.date_posted-option input:checked + label .checked-icon{ + display: flex; +} +.filetypes-option input:checked + label { + background: #fff5e8; +} +.date_posted-option input:checked + label { + background: rgba(244, 171, 79, 0.17); +} + +.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; + color: #777; + 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 { + background: #fafafa; + box-shadow: 0px 2px #00000024; +} + +.head-button-2:hover { + background: #eee; + text-decoration: none !important; + color: inherit !important; + color: #555 !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:hover .icon-cancel-circled{ + color: black; +} + +.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; + color: #777; + transition: 0.3s; +} + +.breadcrumb-item a:hover { + color: #3A3A3A; +} + +#addLinkedAlbum { + display:none; +} + +.linkedAlbumPopIn { + position: fixed; + z-index: 100; + left: 0; + top: 0; + width: 100%; + height: 100%; + overflow: auto; + background-color: rgba(0,0,0,0.7); +} + +.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; + color: white; +} + +.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; + background-color: #fafafa; + box-shadow: 0px 2px #00000024; + border-radius: 5px; + font-weight: bold; + color: #777; + 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 { + color: #c4c4c4; + cursor: not-allowed; + font-weight: 600; + white-space: nowrap; +} + +.clear-all.clickable { + color: #ff7700; + cursor: pointer; +} + +.mcs-side-results { + display: flex; + flex-direction: row; + gap: 5px; + margin: 15px 0 0 15px; +} + +.mcs-side-results > div { + background: #fafafa; + box-shadow: 0px 2px #00000024; + + position: relative; + padding: 4px 10px; + border-radius: 5px; + font-weight: 600; + display: flex; + align-items: center; + cursor: pointer; + margin-right: 10px; + color: #777; + width: fit-content; +} +.mcs-side-results > div:hover { + background: #eee; + color: #777; +} +.mcs-side-results > div:active { + transform: translateY(2px); + box-shadow: none; +} + +.mcs-side-results > div p{ + margin: 0 0 0 10px; + white-space: nowrap; + font-size: 15px; +} + +.mcs-side-results .mcs-side-badge { + border-radius: 25px; + font-weight: 700; + color: #fafafa; + margin-left: 5px; + padding: 2px 5px!important; + font-size: 10px; + + background: #777; +} + +.ClosePopIn:hover { + text-decoration: none; + color: white; + 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; + color: #ff7700; + margin: 0 0 15px 0; + max-width: 450px; +} +.mcs-no-result .text span:last-child{ + font-size: 15px; + font-weight: 500; + color: #6e6e6e; + max-width: 350px; +} + +.filter-form .filter-form-title { + color: #ff7700; + 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 { + background: #eee; + 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 { + background: transparent; + color: #444; + height: 16px; + padding: 0; + height: 26px; +} +.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; + 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 { + background: #eee; + 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 { + background: #ccc; + 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; +} + +.linkedAlbumPopInContainer { + background-color: white; +} +.breadcrumb-item { + background-color: #f4ab4f; +} +.breadcrumb-item .icon-cancel-circled:hover { + color: #ff7700; +} + +.filter-validate .loading { + display: none; +} + +.filter-album-form .add-album-button { + width: fit-content; } \ No newline at end of file