]> git.immae.eu Git - github/Chocobozzz/PeerTube.git/blame - client/src/app/+search/search.component.scss
Fix upload avatar button
[github/Chocobozzz/PeerTube.git] / client / src / app / +search / search.component.scss
CommitLineData
8cbc40b2
C
1@use 'sass:math';
2@use '_variables' as *;
3@use '_mixins' as *;
57c36b27 4
4429a4a6
C
5@mixin build-channel-img-size ($video-img-width) {
6 $image-size: min(130px, $video-img-width);
8cbc40b2 7 $margin-size: math.div(($video-img-width - $image-size), 2); // So we have the same width than the video miniature
4429a4a6 8
746018f6 9 @include actor-avatar-size($image-size);
4429a4a6
C
10
11 margin: 0 $margin-size 0 $margin-size;
12}
13
57c36b27 14.search-result {
b34a444e 15 padding: 40px;
4429a4a6 16}
57c36b27 17
af7fd04a
C
18.alert-danger {
19 margin-top: 10px;
20}
21
4429a4a6
C
22.results-header {
23 font-size: 16px;
24 padding-bottom: 20px;
25 margin-bottom: 30px;
26 border-bottom: 1px solid #DADADA;
57c36b27 27
4429a4a6
C
28 .first-line {
29 display: flex;
30 flex-direction: row;
0b18f4aa 31
4429a4a6
C
32 .results-counter {
33 flex-grow: 1;
0b18f4aa 34
4429a4a6
C
35 .search-value {
36 font-weight: $font-semibold;
0b18f4aa 37 }
4429a4a6 38 }
0b18f4aa 39
4429a4a6
C
40 .results-filter-button {
41 cursor: pointer;
0b18f4aa 42
4429a4a6
C
43 .icon.icon-filter {
44 @include icon(20px);
27bc9586 45 @include margin-right(5px);
0b18f4aa 46
4429a4a6
C
47 position: relative;
48 top: -1px;
4429a4a6 49 background-image: url('../../assets/images/feather/filter.svg');
0b18f4aa
C
50 }
51 }
57c36b27 52 }
4429a4a6 53}
57c36b27 54
4429a4a6
C
55.entry {
56 display: flex;
57 margin-bottom: 40px;
038907bc 58 max-width: 800px;
4429a4a6 59}
57c36b27 60
4429a4a6
C
61.video-channel-info {
62 flex-grow: 1;
63 margin: 0 10px;
64 width: fit-content;
65}
f37dc0dd 66
4429a4a6
C
67.video-channel-names {
68 @include disable-default-a-behaviour;
f37dc0dd 69
4429a4a6
C
70 display: flex;
71 align-items: baseline;
72 color: pvar(--mainForegroundColor);
73 width: fit-content;
57c36b27
C
74}
75
4429a4a6
C
76.video-channel-display-name {
77 font-weight: $font-semibold;
78 font-size: $video-miniature-row-name-font-size;
79}
8a3183e5 80
4429a4a6 81.video-channel-name {
27bc9586
C
82 @include margin-left(5px);
83
4429a4a6
C
84 font-size: $video-miniature-row-info-font-size;
85 color: pvar(--greyForegroundColor);
4429a4a6 86}
8a3183e5 87
4429a4a6
C
88// Use the same breakpoints than in video-miniature
89@include on-small-main-col {
90 .video-channel {
91 display: grid;
92 grid-template-columns: auto 1fr;
93 grid-template-rows: auto auto;
8a3183e5 94
746018f6
C
95 my-actor-avatar {
96 @include build-channel-img-size($video-thumbnail-medium-width);
97
4429a4a6
C
98 grid-column: 1;
99 grid-row: 1 / -1;
8a3183e5 100 }
4429a4a6 101 }
8a3183e5 102
4429a4a6
C
103 .video-channel-info {
104 grid-column: 2;
105 grid-row: 1;
8a3183e5
K
106 }
107
4429a4a6
C
108 my-subscribe-button {
109 grid-column: 2;
110 grid-row: 2;
111 align-self: end;
8a3183e5
K
112 }
113}
114
4429a4a6 115@include on-mobile-main-col {
746018f6 116 .video-channel my-actor-avatar {
4429a4a6 117 @include build-channel-img-size($video-thumbnail-small-width);
6e930af9 118 }
c182527a 119}
6e930af9 120
c182527a
C
121@media screen and (max-width: $mobile-view) {
122 .search-result {
123 padding: 20px 10px;
57c36b27 124
c182527a
C
125 .results-header {
126 font-size: 15px !important;
127 }
4429a4a6 128 }
57c36b27 129
4429a4a6
C
130 .video-channel-display-name {
131 font-size: $video-miniature-row-mobile-name-font-size;
132 }
133
134 .video-channel-name {
135 font-size: $video-miniature-row-mobile-info-font-size;
57c36b27
C
136 }
137}