123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151 |
- @import '_mixins';
- @import '_variables';
- @import '_bootstrap-variables';
- @import '~bootstrap/scss/mixins/_breakpoints';
- #search-video {
- @include peertube-input-text($search-input-width);
- padding-left: 10px;
- padding-right: 40px; // For the search icon
- font-size: 14px;
- &::placeholder {
- color: pvar(--inputPlaceholderColor);
- }
- }
- .icon-search {
- @include icon(25px);
- height: 18px;
- // yolo
- position: absolute;
- margin-left: -35px;
- margin-top: 3.5px;
- right: 10px;
- }
- .jump-to-suggestions {
- top: 100%;
- left: 0;
- z-index: z('search-typeahead');
- width: 100%;
- }
- #typeahead-help,
- #typeahead-instructions,
- li.suggestion {
- border: 1px solid pvar(--mainBackgroundColor);
- background: pvar(--mainBackgroundColor);
- transition: .3s ease;
- transition-property: box-shadow;
- cursor: pointer;
- // soft border-radius for the last suggestion and the link inside
- &:last-of-type {
- &, & ::ng-deep a {
- border-bottom-right-radius: 3px;
- border-bottom-left-radius: 3px;
- }
- }
- }
- #typeahead-help,
- #typeahead-instructions {
- margin-top: 10px;
- width: 100%;
- padding: .5rem 1rem;
- white-space: normal;
- ul {
- list-style: none;
- padding: 0;
- margin-bottom: .5rem;
- em {
- font-weight: 600;
- margin-right: 0.2rem;
- font-style: normal;
- }
- }
- }
- #typeahead-container {
- input {
- border: 1px solid pvar(--mainBackgroundColor) !important;
- box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 20px 0px;
- flex-grow: 1;
- transition: box-shadow .3s ease, width .2s ease;
- }
- @media screen and (min-width: $mobile-view) {
- margin-left: 10px;
- }
- @media screen and (max-width: $small-view) {
- flex: 1;
- input {
- width: 70px;
- }
- }
- span {
- right: 10px;
- }
- & > div:last-child {
- // we have to switch the display and not the opacity,
- // to avoid clashing with the rest of the interface.
- display: none;
- }
- &:focus,
- ::ng-deep &:focus-within {
- & > div:last-child {
- @media screen and (min-width: $mobile-view) {
- display: initial !important;
- }
- #typeahead-help,
- #typeahead-instructions,
- li.suggestion {
- box-shadow: rgba(0, 0, 0, 0.2) 0px 10px 20px -5px;
- }
- }
- ::ng-deep input {
- box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 20px 0px;
- border-end-start-radius: 0;
- border-end-end-radius: 0;
- @include media-breakpoint-up(lg) {
- width: 500px;
- }
- }
- }
- }
- .glyphicon {
- top: 3px;
- }
- .advanced-search-status {
- height: max-content;
- cursor: default;
- &.c-help {
- cursor: help;
- }
- }
- .small-title {
- @include in-content-small-title;
- margin-bottom: .5rem;
- }
- ::ng-deep my-suggestion {
- width: 100%;
- }
|