]> git.immae.eu Git - github/Chocobozzz/PeerTube.git/blob - client/src/app/search/search.component.scss
Add hook to alter player build options
[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 (max-width: $small-view) {
85 .video-channel-names {
86 flex-direction: column !important;
87
88 .video-channel-name {
89 margin-left: 0 !important;
90 }
91 }
92 }
93
94 @media screen and (max-width: $mobile-view) {
95 .search-result {
96 padding: 20px 10px;
97
98 .results-header {
99 font-size: 15px !important;
100 }
101
102 .entry {
103 flex-direction: column;
104 height: auto;
105 justify-content: center;
106 align-items: center;
107 text-align: center;
108
109 &.video {
110 .video-info-name,
111 .video-info-account {
112 margin: auto;
113 }
114
115 my-video-thumbnail {
116 margin-right: 0 !important;
117
118 ::ng-deep .video-thumbnail {
119 width: 100%;
120 height: auto;
121
122 img {
123 width: 100%;
124 height: auto;
125 }
126 }
127 }
128 }
129
130 &.video-channel {
131 .video-channel-info .video-channel-names {
132 align-items: center;
133 }
134
135 my-subscribe-button {
136 margin-top: 5px;
137 }
138 }
139 }
140 }
141 }