diff options
Diffstat (limited to 'client/src/app/+accounts/account-video-channels/account-video-channels.component.scss')
-rw-r--r-- | client/src/app/+accounts/account-video-channels/account-video-channels.component.scss | 166 |
1 files changed, 149 insertions, 17 deletions
diff --git a/client/src/app/+accounts/account-video-channels/account-video-channels.component.scss b/client/src/app/+accounts/account-video-channels/account-video-channels.component.scss index 4957e91d7..ca4c35cb4 100644 --- a/client/src/app/+accounts/account-video-channels/account-video-channels.component.scss +++ b/client/src/app/+accounts/account-video-channels/account-video-channels.component.scss | |||
@@ -3,37 +3,169 @@ | |||
3 | @import '_miniature'; | 3 | @import '_miniature'; |
4 | 4 | ||
5 | .margin-content { | 5 | .margin-content { |
6 | @include fluid-videos-miniature-layout; | 6 | @include fluid-videos-miniature-margins; |
7 | } | 7 | } |
8 | 8 | ||
9 | .section { | 9 | .channel { |
10 | @include miniature-rows; | 10 | max-width: $max-channels-width; |
11 | background-color: pvar(--channelBackgroundColor); | ||
12 | padding: 15px; | ||
11 | 13 | ||
12 | padding-top: 0 !important; | 14 | margin: 30px 0; |
13 | 15 | ||
14 | .section-title { | 16 | display: grid; |
17 | grid-template-columns: 1fr auto; | ||
18 | grid-template-rows: auto auto; | ||
19 | column-gap: 15px; | ||
20 | } | ||
21 | |||
22 | .channel-avatar-row { | ||
23 | grid-column: 1; | ||
24 | grid-row: 1; | ||
25 | |||
26 | display: grid; | ||
27 | grid-template-columns: auto auto 1fr; | ||
28 | grid-template-rows: auto 1fr; | ||
29 | |||
30 | .avatar-link { | ||
31 | grid-column: 1; | ||
32 | grid-row: 1 / 3; | ||
33 | margin-right: 30px; | ||
34 | } | ||
35 | |||
36 | img { | ||
37 | @include channel-avatar(75px); | ||
38 | } | ||
39 | |||
40 | a { | ||
41 | color: pvar(--mainForegroundColor); | ||
42 | } | ||
43 | |||
44 | h2 { | ||
45 | grid-row: 1; | ||
46 | grid-column: 2; | ||
47 | font-size: 20px; | ||
48 | line-height: 1; | ||
49 | font-weight: $font-bold; | ||
50 | margin: 0; | ||
51 | } | ||
52 | |||
53 | .actor-counters { | ||
54 | grid-row: 1; | ||
55 | grid-column: 3; | ||
56 | color: pvar(--greyForegroundColor); | ||
57 | font-size: 16px; | ||
58 | display: flex; | ||
15 | align-items: center; | 59 | align-items: center; |
60 | margin-left: 15px; | ||
16 | } | 61 | } |
17 | 62 | ||
18 | .videos { | 63 | .actor-counters > *:not(:last-child)::after { |
19 | overflow: hidden; | 64 | content: '•'; |
65 | margin: 0 10px; | ||
66 | color: pvar(--mainColor); | ||
67 | } | ||
20 | 68 | ||
21 | .no-results { | 69 | .description-html { |
22 | height: 50px; | 70 | grid-column: 2 / 4; |
23 | } | 71 | grid-row: 2; |
72 | |||
73 | max-height: 80px; | ||
74 | font-size: 16px; | ||
75 | |||
76 | @include fade-text(30px, pvar(--channelBackgroundColor)); | ||
77 | } | ||
78 | } | ||
79 | |||
80 | my-subscribe-button { | ||
81 | grid-row: 1; | ||
82 | grid-column: 2; | ||
83 | } | ||
84 | |||
85 | .videos { | ||
86 | display: flex; | ||
87 | grid-column: 1 / 3; | ||
88 | grid-row: 2; | ||
89 | margin-top: 30px; | ||
90 | |||
91 | position: relative; | ||
92 | overflow: hidden; | ||
93 | |||
94 | my-video-miniature { | ||
95 | margin-right: 15px; | ||
24 | } | 96 | } |
25 | 97 | ||
26 | my-video-miniature ::ng-deep my-video-actions-dropdown > my-action-dropdown { | 98 | .no-results { |
27 | // Fix our overflow | 99 | height: auto; |
28 | position: absolute; | ||
29 | } | 100 | } |
30 | } | 101 | } |
31 | 102 | ||
103 | .miniature-show-channel { | ||
104 | height: 100%; | ||
105 | position: absolute; | ||
106 | right: 0; | ||
107 | background: linear-gradient(90deg, transparent 0, pvar(--channelBackgroundColor) 45px); | ||
108 | padding: ($video-thumbnail-height / 2 - 10px) 15px 0 60px; | ||
109 | z-index: z(miniature) + 1; | ||
110 | |||
111 | a { | ||
112 | color: pvar(--mainColor); | ||
113 | font-size: 16px; | ||
114 | font-weight: $font-semibold; | ||
115 | } | ||
116 | } | ||
117 | |||
118 | .button-show-channel { | ||
119 | display: none; | ||
120 | } | ||
121 | |||
32 | @media screen and (max-width: $mobile-view) { | 122 | @media screen and (max-width: $mobile-view) { |
33 | .section { | 123 | .channel-avatar-row { |
34 | .section-title { | 124 | grid-template-columns: auto auto auto 1fr; |
35 | flex-direction: column; | 125 | |
36 | align-items: normal; | 126 | .avatar-link { |
127 | grid-row: 1 / 4; | ||
128 | } | ||
129 | |||
130 | h2 { | ||
131 | font-size: 16px; | ||
132 | } | ||
133 | |||
134 | .actor-counters { | ||
135 | margin: 0; | ||
136 | font-size: 13px; | ||
137 | grid-row: 2; | ||
138 | grid-column: 2 / 4; | ||
139 | } | ||
140 | |||
141 | .description-html { | ||
142 | grid-row: 3; | ||
143 | font-size: 14px; | ||
37 | } | 144 | } |
38 | } | 145 | } |
146 | |||
147 | .show-channel a { | ||
148 | @include peertube-button-link; | ||
149 | @include orange-button-inverted; | ||
150 | } | ||
151 | |||
152 | .videos { | ||
153 | display: none; | ||
154 | } | ||
155 | |||
156 | my-subscribe-button, | ||
157 | .button-show-channel { | ||
158 | grid-column: 1 / 4; | ||
159 | grid-row: 3; | ||
160 | margin-top: 15px; | ||
161 | } | ||
162 | |||
163 | my-subscribe-button { | ||
164 | justify-self: start; | ||
165 | } | ||
166 | |||
167 | .button-show-channel { | ||
168 | display: block; | ||
169 | justify-self: end; | ||
170 | } | ||
39 | } | 171 | } |