]> git.immae.eu Git - github/Chocobozzz/PeerTube.git/blob - client/src/app/search/search.component.scss
Translated using Weblate (Hungarian)
[github/Chocobozzz/PeerTube.git] / client / src / app / search / search.component.scss
1 @import '_variables';
2 @import '_mixins';
3
4 .search-result {
5 padding: 40px;
6
7 .results-header {
8 font-size: 16px;
9 padding-bottom: 20px;
10 margin-bottom: 30px;
11 border-bottom: 1px solid #DADADA;
12
13 .first-line {
14 display: flex;
15 flex-direction: row;
16
17 .results-counter {
18 flex-grow: 1;
19
20 .search-value {
21 font-weight: $font-semibold;
22 }
23 }
24
25 .results-filter-button {
26 cursor: pointer;
27
28 .icon.icon-filter {
29 @include icon(20px);
30
31 position: relative;
32 top: -1px;
33 margin-right: 5px;
34 background-image: url('../../assets/images/search/filter.svg');
35 }
36 }
37 }
38 }
39
40 .entry {
41 display: flex;
42 min-height: 130px;
43 padding-bottom: 20px;
44 margin-bottom: 20px;
45
46 &.video-channel {
47 img {
48 $image-size: 130px;
49 $margin-size: ($video-thumbnail-width - $image-size) / 2; // So we have the same width than the video miniature
50
51 @include avatar($image-size);
52
53 margin: 0 ($margin-size + 10) 0 $margin-size;
54 }
55
56 .video-channel-info {
57 flex-grow: 1;
58 width: fit-content;
59
60 .video-channel-names {
61 @include disable-default-a-behaviour;
62
63 display: flex;
64 align-items: baseline;
65 color: var(--mainForegroundColor);
66 width: fit-content;
67
68 .video-channel-display-name {
69 font-weight: $font-semibold;
70 font-size: 18px;
71 }
72
73 .video-channel-name {
74 font-size: 14px;
75 color: $grey-actor-name;
76 margin-left: 5px;
77 }
78 }
79 }
80 }
81 }
82 }
83
84 @media screen and (min-width: $small-view) and (max-width: breakpoint(xl)) {
85 .video-channel-info .video-channel-names {
86 flex-direction: column !important;
87
88 .video-channel-name {
89 @include ellipsis; // Ellipsis and max-width on channel-name to not break screen
90
91 max-width: 250px;
92 margin-left: 0 !important;
93 }
94 }
95
96 :host-context(.main-col:not(.expanded)) {
97 // Override the min-width: 500px to not break screen
98 ::ng-deep .video-miniature-information {
99 min-width: 300px !important;
100 }
101 }
102 }
103
104 @media screen and (min-width: $small-view) and (max-width: breakpoint(lg)) {
105 :host-context(.main-col:not(.expanded)) {
106 .video-channel-info .video-channel-names {
107 .video-channel-name {
108 max-width: 160px;
109 }
110 }
111
112 // Override the min-width: 500px to not break screen
113 ::ng-deep .video-miniature-information {
114 min-width: 223px !important;
115 }
116 }
117
118 :host-context(.expanded) {
119 // Override the min-width: 500px to not break screen
120 ::ng-deep .video-miniature-information {
121 min-width: 300px !important;
122 }
123 }
124 }
125
126 @media screen and (max-width: $small-view) {
127 .search-result {
128 .entry.video-channel,
129 .entry.video {
130 flex-direction: column;
131 height: auto;
132 justify-content: center;
133 align-items: center;
134 text-align: center;
135
136 img {
137 margin: 0;
138 }
139
140 img {
141 margin: 0;
142 }
143
144 .video-channel-info .video-channel-names {
145 align-items: center;
146 flex-direction: column !important;
147
148 .video-channel-name {
149 margin-left: 0 !important;
150 }
151 }
152
153 my-subscribe-button {
154 margin-top: 5px;
155 }
156 }
157 }
158 }
159
160 @media screen and (max-width: $mobile-view) {
161 .search-result {
162 padding: 20px 10px;
163
164 .results-header {
165 font-size: 15px !important;
166 }
167
168 .entry {
169 &.video {
170 .video-info-name,
171 .video-info-account {
172 margin: auto;
173 }
174
175 my-video-thumbnail {
176 margin-right: 0 !important;
177
178 ::ng-deep .video-thumbnail {
179 width: 100%;
180 height: auto;
181
182 img {
183 width: 100%;
184 height: auto;
185 }
186 }
187 }
188 }
189 }
190 }
191 }