aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/sass
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2021-03-26 13:20:37 +0100
committerChocobozzz <chocobozzz@cpy.re>2021-03-31 09:05:51 +0200
commit67264e060b6068399dae9a67abae035a73b84af1 (patch)
treedabb735a530c9389c941f7ff1d44fa4b5f6db03e /client/src/sass
parent60c35932f6a14cfe83bb0e54407427cce70171ea (diff)
downloadPeerTube-67264e060b6068399dae9a67abae035a73b84af1.tar.gz
PeerTube-67264e060b6068399dae9a67abae035a73b84af1.tar.zst
PeerTube-67264e060b6068399dae9a67abae035a73b84af1.zip
Redesign account page
Diffstat (limited to 'client/src/sass')
-rw-r--r--client/src/sass/include/_actor.scss86
1 files changed, 86 insertions, 0 deletions
diff --git a/client/src/sass/include/_actor.scss b/client/src/sass/include/_actor.scss
new file mode 100644
index 000000000..5e9607318
--- /dev/null
+++ b/client/src/sass/include/_actor.scss
@@ -0,0 +1,86 @@
1@import '_variables';
2
3@mixin section-label-responsive {
4 color: pvar(--mainColor);
5 font-size: 12px;
6 margin-bottom: 15px;
7 font-weight: $font-bold;
8 letter-spacing: 2.5px;
9
10 @media screen and (max-width: $mobile-view) {
11 font-size: 10px;
12 letter-spacing: 2.1px;
13 margin-bottom: 5px;
14 }
15}
16
17@mixin show-more-description {
18 color: pvar(--mainColor);
19 cursor: pointer;
20 margin: 10px auto 45px auto;
21}
22
23@mixin avatar-row-responsive ($img-margin, $grey-font-size) {
24 display: flex;
25 grid-column: 1;
26 margin-bottom: 30px;
27
28 .channel-avatar {
29 @include channel-avatar(120px);
30 }
31
32 .account-avatar {
33 @include avatar(120px);
34 }
35
36 > div {
37 margin-left: $img-margin;
38 }
39
40 .actor-info {
41 display: flex;
42
43 > div:first-child {
44 flex-grow: 1;
45 }
46 }
47
48 .actor-display-name {
49 display: flex;
50 flex-wrap: wrap;
51 }
52
53 h1 {
54 font-size: 28px;
55 font-weight: $font-bold;
56 margin: 0;
57 }
58
59 .actor-handle,
60 .actor-counters {
61 color: pvar(--greyForegroundColor);
62 font-size: $grey-font-size;
63 }
64
65 .actor-counters > *:not(:last-child)::after {
66 content: '•';
67 margin: 0 10px;
68 color: pvar(--mainColor);
69 }
70
71 @media screen and (max-width: $mobile-view) {
72 margin-bottom: 15px;
73
74 h1 {
75 font-size: 22px;
76 }
77
78 .channel-avatar {
79 @include channel-avatar(80px);
80 }
81
82 .account-avatar {
83 @include avatar(120px);
84 }
85 }
86}