]> git.immae.eu Git - github/Chocobozzz/PeerTube.git/blame - client/src/app/+accounts/accounts.component.scss
Redesign account's channels page
[github/Chocobozzz/PeerTube.git] / client / src / app / +accounts / accounts.component.scss
CommitLineData
170726f5
C
1@import '_variables';
2@import '_mixins';
67264e06
C
3@import '_actor';
4@import '_miniature';
5
6.root {
900f7820 7 --myGlobalTopPadding: 60px;
67264e06
C
8 --myImgMargin: 30px;
9 --myFontSize: 16px;
10 --myGreyFontSize: 16px;
41eb700f
RK
11}
12
67264e06
C
13.section-label {
14 @include section-label-responsive;
d39db21a
RK
15}
16
67264e06 17.links {
900f7820 18 @include fluid-videos-miniature-margins;
947d0102 19
67264e06
C
20 display: flex;
21 justify-content: space-between;
22 align-items: center;
900f7820
C
23 max-width: $max-channels-width;
24
25 simple-search-input {
26 margin-left: auto;
27 }
79bd2632
C
28}
29
30my-user-moderation-dropdown,
31.badge {
32 margin-left: 10px;
33
34 position: relative;
35 top: 3px;
36}
37
38.badge {
39 font-size: 13px;
ee1d0dfb
C
40}
41
42.copy-button {
43 border: none;
67264e06
C
44}
45
46.account-info {
900f7820
C
47 @include fluid-videos-miniature-margins(false, 15px);
48
67264e06
C
49 display: grid;
50 grid-template-columns: 1fr min-content;
51 grid-template-rows: auto auto;
52
53 background-color: pvar(--submenuColor);
54 margin-bottom: 45px;
900f7820 55 padding-top: var(--myGlobalTopPadding);
67264e06
C
56 font-size: var(--myFontSize);
57}
58
59.account-avatar-row {
60 @include avatar-row-responsive(var(--myImgMargin), var(--myGreyFontSize));
61}
62
63.description {
64 grid-column: 1 / 3;
65}
66
67.created-at {
68 margin-top: 15px;
69 color: pvar(--greyForegroundColor);
70 padding-bottom: 60px;
71}
72
73.show-more {
74 @include show-more-description;
75
76 display: none;
77 text-align: center;
78}
79
80.buttons {
81 grid-column: 2;
82 grid-row: 1;
83
84 display: flex;
85 flex-wrap: wrap;
86 justify-content: flex-end;
87 align-content: flex-start;
88
89 > *:not(:last-child) {
90 margin-bottom: 15px;
91 }
900f7820
C
92
93 > a {
94 white-space: nowrap;
95 }
67264e06
C
96}
97
98@media screen and (max-width: $small-view) {
99 .root {
900f7820 100 --myGlobalTopPadding: 45px;
67264e06
C
101 --myChannelImgMargin: 15px;
102 }
103
104 .account-info {
105 display: block;
106 padding-bottom: 60px;
107 }
108
109 .description:not(.expanded) {
110 max-height: 70px;
111
112 @include fade-text(30px, pvar(--submenuColor));
113 }
114
115 .show-more {
116 display: block;
117 }
118
119 .buttons {
120 justify-content: center;
121 }
ee1d0dfb 122}
4682468d
K
123
124@media screen and (max-width: $mobile-view) {
67264e06 125 .root {
900f7820 126 --myGlobalTopPadding: 15px;
67264e06
C
127 --myFontSize: 14px;
128 --myGreyFontSize: 13px;
129 }
130
131 .account-info {
132 display: block;
133 padding-bottom: 30px;
134 }
135
136 .links {
137 margin: auto !important;
138 width: min-content;
139 }
140
141 .show-more {
142 margin-bottom: 30px;
4682468d
K
143 }
144}