diff options
author | Chocobozzz <me@florianbigard.com> | 2022-06-14 13:54:54 +0200 |
---|---|---|
committer | Chocobozzz <me@florianbigard.com> | 2022-06-15 13:31:53 +0200 |
commit | 6f03f944c34f78b38a68128413b55186e0676949 (patch) | |
tree | 81a0c79184cb5ac800c31f1d5334471ee506ac19 /client/src/app/+signup/+register/register.component.scss | |
parent | 936ce6e5635f3a52acbc799e1fcba9a948a7e390 (diff) | |
download | PeerTube-6f03f944c34f78b38a68128413b55186e0676949.tar.gz PeerTube-6f03f944c34f78b38a68128413b55186e0676949.tar.zst PeerTube-6f03f944c34f78b38a68128413b55186e0676949.zip |
Redesign register steps
Diffstat (limited to 'client/src/app/+signup/+register/register.component.scss')
-rw-r--r-- | client/src/app/+signup/+register/register.component.scss | 93 |
1 files changed, 55 insertions, 38 deletions
diff --git a/client/src/app/+signup/+register/register.component.scss b/client/src/app/+signup/+register/register.component.scss index 53093a81a..5d0df81bd 100644 --- a/client/src/app/+signup/+register/register.component.scss +++ b/client/src/app/+signup/+register/register.component.scss | |||
@@ -2,7 +2,7 @@ | |||
2 | @use '_mixins' as *; | 2 | @use '_mixins' as *; |
3 | 3 | ||
4 | .alert { | 4 | .alert { |
5 | font-size: 15px; | 5 | font-size: 16px; |
6 | text-align: center; | 6 | text-align: center; |
7 | } | 7 | } |
8 | 8 | ||
@@ -10,61 +10,75 @@ | |||
10 | padding-top: 30vh; | 10 | padding-top: 30vh; |
11 | } | 11 | } |
12 | 12 | ||
13 | .wrapper { | 13 | .header-title { |
14 | font-weight: normal; | ||
15 | font-size: 15px; | ||
16 | background-color: pvar(--mainColorVeryLight); | ||
17 | padding: 35px 25px 15px 25px; | ||
18 | margin: 0; | ||
19 | } | ||
20 | |||
21 | .register-content { | ||
22 | font-size: 16px; | ||
23 | } | ||
24 | |||
25 | my-instance-about-accordion { | ||
26 | display: block; | ||
27 | margin-bottom: 25px; | ||
28 | } | ||
29 | |||
30 | .step-buttons { | ||
14 | display: flex; | 31 | display: flex; |
15 | flex-direction: column; | 32 | flex-wrap: wrap; |
33 | align-items: center; | ||
16 | 34 | ||
17 | .register-form { | 35 | .skip-step { |
18 | max-width: 600px; | 36 | @include margin-right(30px); |
19 | align-self: center; | 37 | |
38 | display: inline-block; | ||
20 | } | 39 | } |
21 | 40 | ||
22 | .register-form, | 41 | .skip-step-description { |
23 | .instance-information { | 42 | margin-top: 5px; |
24 | width: 100%; | 43 | font-size: 14px; |
25 | } | 44 | } |
26 | 45 | ||
27 | .instance-information { | 46 | .underline-orange { |
28 | margin-bottom: 15px; | 47 | color: pvar(--mainForegroundColor); |
48 | |||
49 | &:hover { | ||
50 | opacity: 0.8; | ||
51 | } | ||
29 | } | 52 | } |
30 | } | ||
31 | 53 | ||
32 | input:not([type=submit]) { | 54 | button, |
33 | @include peertube-input-text(100%); | 55 | .skip-step { |
34 | display: block; | 56 | margin-top: 20px; |
57 | margin-bottom: 20px; | ||
58 | } | ||
35 | 59 | ||
36 | &#username, | 60 | .skip-step, |
37 | &#name { | 61 | button[cdkStepperNext] { |
38 | width: auto !important; | 62 | @include margin-left(auto); |
39 | flex-grow: 1; | 63 | } |
64 | |||
65 | .skip-step + button[cdkStepperNext] { | ||
66 | @include margin-left(0); | ||
40 | } | 67 | } |
41 | } | 68 | } |
42 | 69 | ||
43 | input[type=submit], | ||
44 | button { | 70 | button { |
45 | @include peertube-button; | 71 | @include peertube-button-big; |
46 | 72 | ||
47 | &[cdkStepperNext] { | 73 | &[cdkStepperNext] { |
48 | @include orange-button; | 74 | @include orange-button; |
49 | |||
50 | // Chrome does not support inline-end | ||
51 | float: right; | ||
52 | float: inline-end; | ||
53 | } | 75 | } |
54 | 76 | ||
55 | &[cdkStepperPrevious] { | 77 | &[cdkStepperPrevious] { |
56 | @include grey-button; | 78 | @include grey-button; |
57 | |||
58 | // Chrome does not support inline-start | ||
59 | float: left; | ||
60 | float: inline-start; | ||
61 | } | 79 | } |
62 | } | 80 | } |
63 | 81 | ||
64 | .name-information { | ||
65 | margin-top: 10px; | ||
66 | } | ||
67 | |||
68 | .done-loader { | 82 | .done-loader { |
69 | display: flex; | 83 | display: flex; |
70 | justify-content: center; | 84 | justify-content: center; |
@@ -73,13 +87,16 @@ button { | |||
73 | 87 | ||
74 | my-loader { | 88 | my-loader { |
75 | margin-bottom: 20px; | 89 | margin-bottom: 20px; |
90 | } | ||
91 | } | ||
76 | 92 | ||
77 | ::ng-deep .loader div { | 93 | @media screen and (max-width: $small-view) { |
78 | border-color: pvar(--mainColor) transparent transparent transparent; | 94 | .step-buttons { |
79 | } | 95 | justify-content: space-between; |
80 | 96 | ||
81 | + div { | 97 | .skip-step, |
82 | font-size: 15px; | 98 | button[cdkStepperNext] { |
99 | @include margin-left(0); | ||
83 | } | 100 | } |
84 | } | 101 | } |
85 | } | 102 | } |