mirror of https://github.com/Chocobozzz/PeerTube
156 lines
2.7 KiB
SCSS
156 lines
2.7 KiB
SCSS
@import '_mixins';
|
|
@import '_variables';
|
|
@import '_bootstrap-variables';
|
|
@import '~bootstrap/scss/mixins/_breakpoints';
|
|
|
|
#search-video {
|
|
@include peertube-input-text($search-input-width);
|
|
|
|
@include padding-left(10px);
|
|
@include padding-right(40px); // For the search icon
|
|
|
|
font-size: 14px;
|
|
|
|
&::placeholder {
|
|
color: pvar(--inputPlaceholderColor);
|
|
}
|
|
}
|
|
|
|
.icon-search {
|
|
@include icon(25px);
|
|
@include margin-left(-35px);
|
|
|
|
height: 18px;
|
|
|
|
// yolo
|
|
position: absolute;
|
|
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 {
|
|
@include margin-right(0.2rem);
|
|
|
|
font-weight: 600;
|
|
font-style: normal;
|
|
}
|
|
}
|
|
}
|
|
|
|
#typeahead-container {
|
|
input {
|
|
border: 1px solid pvar(--mainBackgroundColor) !important;
|
|
box-shadow: rgba(0, 0, 0, 0.1) 0 1px 20px 0;
|
|
flex-grow: 1;
|
|
transition: box-shadow .3s ease, width .2s ease;
|
|
}
|
|
|
|
@media screen and (min-width: $mobile-view) {
|
|
@include 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) 0 10px 20px -5px;
|
|
}
|
|
}
|
|
|
|
::ng-deep input {
|
|
box-shadow: rgba(0, 0, 0, 0.2) 0 1px 20px 0;
|
|
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%;
|
|
}
|