]> git.immae.eu Git - github/Chocobozzz/PeerTube.git/blame_incremental - client/src/app/+search/search.component.scss
Add video-playlist-element.created hook (#4196)
[github/Chocobozzz/PeerTube.git] / client / src / app / +search / search.component.scss
... / ...
CommitLineData
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 actor-avatar-size($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 @include margin-right(5px);
41
42 position: relative;
43 top: -1px;
44 background-image: url('../../assets/images/feather/filter.svg');
45 }
46 }
47 }
48}
49
50.entry {
51 display: flex;
52 margin-bottom: 40px;
53 max-width: 800px;
54}
55
56.video-channel my-actor-avatar {
57 @include build-channel-img-size($video-thumbnail-width);
58}
59
60.video-channel-info {
61 flex-grow: 1;
62 margin: 0 10px;
63 width: fit-content;
64}
65
66.video-channel-names {
67 @include disable-default-a-behaviour;
68
69 display: flex;
70 align-items: baseline;
71 color: pvar(--mainForegroundColor);
72 width: fit-content;
73}
74
75.video-channel-display-name {
76 font-weight: $font-semibold;
77 font-size: $video-miniature-row-name-font-size;
78}
79
80.video-channel-name {
81 @include margin-left(5px);
82
83 font-size: $video-miniature-row-info-font-size;
84 color: pvar(--greyForegroundColor);
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 my-actor-avatar {
95 @include build-channel-img-size($video-thumbnail-medium-width);
96
97 grid-column: 1;
98 grid-row: 1 / -1;
99 }
100 }
101
102 .video-channel-info {
103 grid-column: 2;
104 grid-row: 1;
105 }
106
107 my-subscribe-button {
108 grid-column: 2;
109 grid-row: 2;
110 align-self: end;
111 }
112}
113
114@include on-mobile-main-col {
115 .video-channel my-actor-avatar {
116 @include build-channel-img-size($video-thumbnail-small-width);
117 }
118}
119
120@media screen and (max-width: $mobile-view) {
121 .search-result {
122 padding: 20px 10px;
123
124 .results-header {
125 font-size: 15px !important;
126 }
127 }
128
129 .video-channel-display-name {
130 font-size: $video-miniature-row-mobile-name-font-size;
131 }
132
133 .video-channel-name {
134 font-size: $video-miniature-row-mobile-info-font-size;
135 }
136}