]> git.immae.eu Git - github/Chocobozzz/PeerTube.git/blame - client/src/app/search/search.component.scss
Add ability to search video channels
[github/Chocobozzz/PeerTube.git] / client / src / app / search / search.component.scss
CommitLineData
57c36b27
C
1@import '_variables';
2@import '_mixins';
3
4.no-result {
0b18f4aa 5 height: 40vh;
57c36b27
C
6 display: flex;
7 align-items: center;
8 justify-content: center;
9 font-size: 16px;
10 font-weight: $font-semibold;
11}
12
13.search-result {
b34a444e 14 padding: 40px;
57c36b27 15
0b18f4aa
C
16 .results-header {
17 font-size: 16px;
57c36b27
C
18 padding-bottom: 20px;
19 margin-bottom: 30px;
20 border-bottom: 1px solid #DADADA;
21
0b18f4aa
C
22 .first-line {
23 display: flex;
24 flex-direction: row;
25
26 .results-counter {
27 flex-grow: 1;
28
29 .search-value {
30 font-weight: $font-semibold;
31 }
32 }
33
34 .results-filter-button {
35
36 .icon.icon-filter {
37 @include icon(20px);
38
39 position: relative;
40 top: -1px;
41 margin-right: 5px;
42 background-image: url('../../assets/images/search/filter.svg');
43 }
44 }
45 }
46
47 .results-filter {
48 // Animation when we show/hide the filters
49 transition: max-height 0.3s;
50 display: block !important;
51 overflow: hidden !important;
52 max-height: 0;
53
54 &.show {
6e930af9 55 max-height: 1500px;
0b18f4aa 56 }
57c36b27
C
57 }
58 }
59
60 .entry {
61 display: flex;
62 min-height: 130px;
63 padding-bottom: 20px;
64 margin-bottom: 20px;
65
66 &.video {
67
68 my-video-thumbnail {
69 margin-right: 10px;
70 }
71
72 .video-info {
73 flex-grow: 1;
74
75 .video-info-name {
76 @include disable-default-a-behaviour;
77
78 color: #000;
79 display: block;
80 width: fit-content;
81 font-size: 18px;
82 font-weight: $font-semibold;
83 }
84
85 .video-info-date-views {
86 font-size: 14px;
87 }
88
89 .video-info-account {
90 @include disable-default-a-behaviour;
91
92 display: block;
93 width: fit-content;
94 overflow: hidden;
95 text-overflow: ellipsis;
96 white-space: nowrap;
97 font-size: 14px;
98 color: #585858;
99
100 &:hover {
101 color: #303030;
102 }
103 }
104 }
105 }
f37dc0dd
C
106
107 &.video-channel {
108
109 img {
110 @include avatar(120px);
111
112 margin: 0 50px 0 40px;
113 }
114
115 .video-channel-info {
116
117
118 flex-grow: 1;
119 width: fit-content;
120
121 .video-channel-names {
122 @include disable-default-a-behaviour;
123
124 display: flex;
125 align-items: baseline;
126 color: #000;
127 width: fit-content;
128
129 .video-channel-display-name {
130 font-weight: $font-semibold;
131 font-size: 18px;
132 }
133
134 .video-channel-name {
135 font-size: 14px;
136 color: $grey-actor-name;
137 margin-left: 5px;
138 }
139 }
140 }
141 }
57c36b27
C
142 }
143}
144
145@media screen and (max-width: 800px) {
0933bb4a
C
146 .search-result {
147 margin: 20px 10px;
148 }
149
6e930af9
C
150 .results-header {
151 font-size: 15px !important;
152 }
153
57c36b27
C
154 .entry {
155 flex-direction: column;
156 height: auto;
157 text-align: center;
158
159 &.video {
6e930af9
C
160 .video-info-name,
161 .video-info-account {
57c36b27
C
162 margin: auto;
163 }
164
165 my-video-thumbnail {
0933bb4a
C
166 margin-right: 0 !important;
167
168 /deep/ .video-thumbnail {
169 width: 100%;
170 height: auto;
171
172 img {
173 width: 100%;
174 height: auto;
175 }
176 }
57c36b27
C
177 }
178 }
179 }
180}