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