]>
Commit | Line | Data |
---|---|---|
8cbc40b2 C |
1 | @use '_variables' as *; |
2 | @use '_mixins' as *; | |
4beda9e1 | 3 | @use '_account-channel-page' as *; |
8cbc40b2 | 4 | @use '_miniature' as *; |
67264e06 C |
5 | |
6 | .root { | |
f9b8e5c4 W |
7 | --myFontSize: 1rem; |
8 | --myGreyFontSize: 1rem; | |
41eb700f RK |
9 | } |
10 | ||
67264e06 C |
11 | .section-label { |
12 | @include section-label-responsive; | |
d39db21a RK |
13 | } |
14 | ||
67264e06 | 15 | .links { |
0f7407d9 | 16 | @include grid-videos-miniature-margins; |
947d0102 | 17 | |
67264e06 C |
18 | display: flex; |
19 | justify-content: space-between; | |
20 | align-items: center; | |
dd24f1bb C |
21 | |
22 | &.on-channel-page { | |
23 | max-width: $max-channels-width; | |
24 | } | |
900f7820 C |
25 | |
26 | simple-search-input { | |
27bc9586 | 27 | @include margin-left(auto); |
900f7820 | 28 | } |
79bd2632 C |
29 | } |
30 | ||
ee1d0dfb | 31 | .copy-button { |
b15fcd49 C |
32 | @include margin-left(3px); |
33 | ||
931d3430 | 34 | border: 0; |
b15fcd49 C |
35 | |
36 | my-global-icon { | |
37 | width: 15px; | |
38 | } | |
67264e06 C |
39 | } |
40 | ||
41 | .account-info { | |
0f7407d9 | 42 | @include grid-videos-miniature-margins(false, 15px); |
f9b8e5c4 W |
43 | @include padding-top(3.75rem); |
44 | @include padding-bottom(3.75rem); | |
45 | @include margin-bottom(3rem); | |
46 | @include font-size(1rem); | |
900f7820 | 47 | |
67264e06 C |
48 | grid-template-columns: 1fr min-content; |
49 | grid-template-rows: auto auto; | |
50 | ||
218f730c | 51 | background-color: pvar(--submenuBackgroundColor); |
67264e06 C |
52 | } |
53 | ||
54 | .account-avatar-row { | |
f9b8e5c4 | 55 | @include avatar-row-responsive(2rem, var(--myGreyFontSize)); |
67264e06 C |
56 | } |
57 | ||
80badf49 C |
58 | .actor-display-name { |
59 | align-items: center; | |
60 | } | |
61 | ||
67264e06 C |
62 | .description { |
63 | grid-column: 1 / 3; | |
733dbc53 C |
64 | max-width: 1000px; |
65 | word-break: break-word; | |
67264e06 C |
66 | } |
67 | ||
67264e06 C |
68 | .show-more { |
69 | @include show-more-description; | |
f9b8e5c4 | 70 | @include padding-bottom(3.75rem); |
67264e06 | 71 | |
67264e06 C |
72 | text-align: center; |
73 | } | |
74 | ||
75 | .buttons { | |
76 | grid-column: 2; | |
77 | grid-row: 1; | |
78 | ||
79 | display: flex; | |
80 | flex-wrap: wrap; | |
81 | justify-content: flex-end; | |
82 | align-content: flex-start; | |
83 | ||
f9b8e5c4 W |
84 | >*:not(:last-child) { |
85 | @include margin-bottom(1rem); | |
67264e06 | 86 | } |
900f7820 | 87 | |
f9b8e5c4 | 88 | >a { |
900f7820 C |
89 | white-space: nowrap; |
90 | } | |
67264e06 C |
91 | } |
92 | ||
4c8749cb C |
93 | .pt-badge { |
94 | @include margin-right(5px); | |
95 | } | |
96 | ||
67264e06 | 97 | @media screen and (max-width: $small-view) { |
67264e06 C |
98 | |
99 | .description:not(.expanded) { | |
218f730c | 100 | @include fade-text(30px, pvar(--submenuBackgroundColor)); |
931d3430 C |
101 | |
102 | max-height: 70px; | |
67264e06 C |
103 | } |
104 | ||
67264e06 C |
105 | .buttons { |
106 | justify-content: center; | |
107 | } | |
ee1d0dfb | 108 | } |
4682468d K |
109 | |
110 | @media screen and (max-width: $mobile-view) { | |
67264e06 | 111 | .root { |
f9b8e5c4 W |
112 | --myFontSize: $font-size-rem-14px; |
113 | --myGreyFontSize: $font-size-rem-13px; | |
67264e06 C |
114 | } |
115 | ||
116 | .links { | |
117 | margin: auto !important; | |
118 | width: min-content; | |
119 | } | |
f9b8e5c4 | 120 | } |