]> git.immae.eu Git - github/Chocobozzz/PeerTube.git/blob - client/src/app/+search/search.component.scss
39eaadb35ef64bc4fe90b96f1de90e40f089fa03
[github/Chocobozzz/PeerTube.git] / client / src / app / +search / search.component.scss
1 @import '_variables';
2 @import '_mixins';
3
4 @mixin build-channel-img-size ($video-img-width) {
5 $image-size: min(130px, $video-img-width);
6 $margin-size: ($video-img-width - $image-size) / 2; // So we have the same width than the video miniature
7
8 @include channel-avatar($image-size);
9
10 margin: 0 $margin-size 0 $margin-size;
11 }
12
13 .search-result {
14 padding: 40px;
15 }
16
17 .results-header {
18 font-size: 16px;
19 padding-bottom: 20px;
20 margin-bottom: 30px;
21 border-bottom: 1px solid #DADADA;
22
23 .first-line {
24 display: flex;
25 flex-direction: row;
26
27 .results-counter {
28 flex-grow: 1;
29
30 .search-value {
31 font-weight: $font-semibold;
32 }
33 }
34
35 .results-filter-button {
36 cursor: pointer;
37
38 .icon.icon-filter {
39 @include icon(20px);
40
41 position: relative;
42 top: -1px;
43 margin-right: 5px;
44 background-image: url('../../assets/images/feather/filter.svg');
45 }
46 }
47 }
48 }
49
50 .entry {
51 display: flex;
52 margin-bottom: 40px;
53 }
54
55 .video-channel {
56 img {
57 @include build-channel-img-size($video-thumbnail-width);
58 }
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 font-size: $video-miniature-row-info-font-size;
83 color: pvar(--greyForegroundColor);
84 margin-left: 5px;
85 }
86
87 // Use the same breakpoints than in video-miniature
88 @include on-small-main-col {
89 .video-channel {
90 display: grid;
91 grid-template-columns: auto 1fr;
92 grid-template-rows: auto auto;
93
94 .link-avatar {
95 grid-column: 1;
96 grid-row: 1 / -1;
97 }
98
99 img {
100 @include build-channel-img-size($video-thumbnail-medium-width);
101 }
102 }
103
104 .video-channel-info {
105 grid-column: 2;
106 grid-row: 1;
107 }
108
109 my-subscribe-button {
110 grid-column: 2;
111 grid-row: 2;
112 align-self: end;
113 }
114 }
115
116 @include on-mobile-main-col {
117 .video-channel img {
118 @include build-channel-img-size($video-thumbnail-small-width);
119 }
120 }
121
122 @media screen and (max-width: $mobile-view) {
123 .search-result {
124 padding: 20px 10px;
125
126 .results-header {
127 font-size: 15px !important;
128 }
129 }
130
131 .video-channel-display-name {
132 font-size: $video-miniature-row-mobile-name-font-size;
133 }
134
135 .video-channel-name {
136 font-size: $video-miniature-row-mobile-info-font-size;
137 }
138 }