]>
Commit | Line | Data |
---|---|---|
8cbc40b2 C |
1 | @use '_variables' as *; |
2 | @use '_mixins' as *; | |
08c1efbe | 3 | |
2a491182 F |
4 | h1 { |
5 | display: flex; | |
6 | justify-content: space-between; | |
7 | ||
8 | my-global-icon { | |
9 | position: relative; | |
10 | top: -2px; | |
11 | } | |
12 | ||
13 | .button-link { | |
14 | @include peertube-button-link; | |
15 | @include grey-button; | |
16 | @include button-with-icon(18px, 3px, -1px); | |
17 | } | |
cd262619 C |
18 | } |
19 | ||
08c1efbe | 20 | .create-button { |
457bb213 | 21 | @include create-button; |
08c1efbe C |
22 | } |
23 | ||
4f5d0459 RK |
24 | input[type=text] { |
25 | @include peertube-input-text(300px); | |
26 | } | |
27 | ||
cd262619 | 28 | my-edit-button { |
27bc9586 | 29 | @include margin-right(10px); |
08c1efbe C |
30 | } |
31 | ||
32 | .video-channel { | |
22a16e36 | 33 | @include row-blocks; |
deb8b9cd | 34 | |
8165d00a | 35 | padding-bottom: 0; |
08c1efbe | 36 | |
746018f6 | 37 | my-actor-avatar { |
27bc9586 | 38 | @include margin-right(10px); |
08c1efbe | 39 | } |
cd262619 | 40 | } |
08c1efbe | 41 | |
cd262619 C |
42 | .video-channel-info { |
43 | flex-grow: 1; | |
44 | } | |
08c1efbe | 45 | |
cd262619 C |
46 | .video-channel-names { |
47 | @include disable-default-a-behaviour; | |
48 | ||
49 | width: fit-content; | |
50 | display: flex; | |
51 | align-items: baseline; | |
52 | color: pvar(--mainForegroundColor); | |
53 | } | |
54 | ||
55 | .video-channel-display-name { | |
56 | font-weight: $font-semibold; | |
57 | font-size: 18px; | |
58 | } | |
59 | ||
60 | .video-channel-name { | |
27bc9586 C |
61 | @include margin-left(5px); |
62 | ||
cd262619 C |
63 | font-size: 14px; |
64 | color: $grey-actor-name; | |
cd262619 C |
65 | } |
66 | ||
4beda9e1 C |
67 | .video-channel-followers { |
68 | color: pvar(--mainForegroundColor); | |
69 | } | |
70 | ||
cd262619 C |
71 | .video-channel-buttons { |
72 | margin-top: 10px; | |
73 | min-width: 190px; | |
08c1efbe C |
74 | } |
75 | ||
439b6b7b C |
76 | .chart-container { |
77 | // Sync these values with the template | |
78 | width: 40vw; | |
79 | height: 100px; | |
8165d00a RK |
80 | } |
81 | ||
d607fc24 | 82 | .video-channels-header { |
83 | margin-bottom: 30px; | |
84 | } | |
85 | ||
ece3029b | 86 | @media screen and (max-width: $small-view) { |
f2bbd1e1 C |
87 | .video-channels-header { |
88 | text-align: center; | |
89 | } | |
90 | ||
08c1efbe | 91 | .video-channel { |
4682468d K |
92 | padding-bottom: 10px; |
93 | ||
08c1efbe | 94 | img { |
27bc9586 | 95 | @include margin-right(0); |
08c1efbe C |
96 | } |
97 | ||
98 | .video-channel-buttons { | |
8a3183e5 K |
99 | align-self: center; |
100 | } | |
101 | } | |
cd262619 C |
102 | |
103 | .video-channel-info { | |
104 | padding-bottom: 10px; | |
105 | text-align: center; | |
106 | } | |
107 | ||
108 | .video-channel-names { | |
109 | flex-direction: column; | |
110 | align-items: center !important; | |
111 | margin: auto; | |
112 | } | |
113 | ||
114 | .video-channel-name { | |
27bc9586 | 115 | @include margin-left(0 !important); |
cd262619 | 116 | } |
8a3183e5 K |
117 | } |
118 | ||
d607fc24 | 119 | @media screen and (max-width: $mobile-view) { |
120 | .video-channels-header { | |
121 | flex-direction: column; | |
122 | ||
123 | input[type=text] { | |
124 | width: 100% !important; | |
125 | margin-bottom: 12px; | |
126 | } | |
127 | } | |
128 | } | |
129 | ||
8a3183e5 K |
130 | @media screen and (min-width: breakpoint(lg)) { |
131 | :host-context(.main-col:not(.expanded)) { | |
132 | .video-channel-buttons { | |
133 | float: right; | |
134 | } | |
135 | } | |
136 | } | |
137 | ||
138 | @media screen and (min-width: $small-view) { | |
139 | :host-context(.expanded) { | |
140 | .video-channel-buttons { | |
141 | float: right; | |
08c1efbe C |
142 | } |
143 | } | |
144 | } |