diff options
author | André Oliveira <37463445+SpecialAro@users.noreply.github.com> | 2022-07-06 13:11:17 +0100 |
---|---|---|
committer | GitHub <noreply@github.com> | 2022-07-06 12:11:17 +0000 |
commit | eb7cd3b3384976509ead7f9e0d76afe1e3b47b4a (patch) | |
tree | 23d81c5927e69d56b83e9b6b269e2f76dcb7458f /src | |
parent | 6.0.0-nightly.90 [skip ci] (diff) | |
download | ferdium-app-eb7cd3b3384976509ead7f9e0d76afe1e3b47b4a.tar.gz ferdium-app-eb7cd3b3384976509ead7f9e0d76afe1e3b47b4a.tar.zst ferdium-app-eb7cd3b3384976509ead7f9e0d76afe1e3b47b4a.zip |
Fix styling on welcome screen (#433)
Diffstat (limited to 'src')
-rw-r--r-- | src/styles/welcome.scss | 203 |
1 files changed, 109 insertions, 94 deletions
diff --git a/src/styles/welcome.scss b/src/styles/welcome.scss index 3ffc3f227..3f90964a6 100644 --- a/src/styles/welcome.scss +++ b/src/styles/welcome.scss | |||
@@ -1,120 +1,135 @@ | |||
1 | .auth .welcome { | 1 | .auth { |
2 | height: auto; | 2 | height: calc(100% - 28px); |
3 | 3 | ||
4 | &__content { | 4 | .welcome { |
5 | align-items: center; | ||
6 | color: #fff; | ||
7 | display: flex; | ||
8 | justify-content: center; | ||
9 | height: auto; | 5 | height: auto; |
10 | } | 6 | width: 480px; |
11 | 7 | display: flex; | |
12 | &__logo { | 8 | flex-direction: column; |
13 | width: 100px; | 9 | flex-wrap: wrap; |
14 | } | ||
15 | 10 | ||
16 | &__text { | 11 | &__content { |
17 | h1 { | 12 | align-items: center; |
18 | font-size: 60px; | 13 | color: #fff; |
19 | letter-spacing: -0.4rem; | ||
20 | margin-bottom: 5px; | ||
21 | color: rgb(255, 255, 255); | ||
22 | justify-content: center; | ||
23 | margin-top: 5%; | ||
24 | display: flex; | 14 | display: flex; |
15 | justify-content: center; | ||
16 | height: auto; | ||
25 | } | 17 | } |
26 | 18 | ||
27 | h2 { | 19 | &__logo { |
28 | margin-bottom: 0; | 20 | width: 100px; |
29 | margin-left: 2px; | ||
30 | } | 21 | } |
31 | 22 | ||
32 | &__change-server { | 23 | &__text { |
33 | display: flex; | 24 | h1 { |
34 | margin: 10% auto auto auto; | 25 | font-size: 60px; |
35 | justify-content: center; | 26 | letter-spacing: -0.4rem; |
36 | color: #999; | 27 | margin-bottom: 5px; |
28 | color: rgb(255, 255, 255); | ||
29 | justify-content: center; | ||
30 | margin-top: 5%; | ||
31 | display: flex; | ||
32 | } | ||
33 | |||
34 | h2 { | ||
35 | margin-bottom: 0; | ||
36 | margin-left: 2px; | ||
37 | } | ||
38 | |||
39 | &__change-server { | ||
40 | display: flex; | ||
41 | margin: 10% auto auto auto; | ||
42 | justify-content: center; | ||
43 | color: #999; | ||
44 | } | ||
37 | } | 45 | } |
38 | } | ||
39 | |||
40 | &__services { | ||
41 | height: 100%; | ||
42 | margin-left: -450px; | ||
43 | max-height: 600px; | ||
44 | max-width: 800px; | ||
45 | width: 100%; | ||
46 | } | ||
47 | 46 | ||
48 | &__buttons { | 47 | &__services { |
49 | display: block; | 48 | height: 100%; |
50 | margin-top: 100px; | 49 | margin-left: -450px; |
51 | text-align: center; | 50 | max-height: 600px; |
52 | height: auto; | 51 | max-width: 800px; |
53 | 52 | width: 100%; | |
54 | .button { | ||
55 | margin-right: 25px; | ||
56 | } | 53 | } |
57 | } | ||
58 | 54 | ||
59 | .button { | 55 | &__buttons { |
60 | border-color: #fff; | 56 | display: block; |
61 | color: #fff; | 57 | margin-top: 100px; |
62 | cursor: pointer; | 58 | text-align: center; |
59 | height: auto; | ||
63 | 60 | ||
64 | &:hover { | 61 | @media screen and (max-height: 750px) { |
65 | background: #fff; | 62 | margin-top: 70px; |
66 | color: $theme-brand-primary; | 63 | } |
67 | } | ||
68 | 64 | ||
69 | &__inverted { | 65 | .button { |
70 | background: #fff; | 66 | margin-right: 25px; |
71 | color: $theme-brand-primary; | 67 | } |
72 | } | 68 | } |
73 | 69 | ||
74 | &__inverted:hover { | 70 | .button { |
75 | background: none; | 71 | border-color: #fff; |
76 | color: #fff; | 72 | color: #fff; |
73 | cursor: pointer; | ||
74 | |||
75 | &:hover { | ||
76 | background: #fff; | ||
77 | color: $theme-brand-primary; | ||
78 | } | ||
79 | |||
80 | &__inverted { | ||
81 | background: #fff; | ||
82 | color: $theme-brand-primary; | ||
83 | } | ||
84 | |||
85 | &__inverted:hover { | ||
86 | background: none; | ||
87 | color: #fff; | ||
88 | } | ||
89 | |||
90 | &__change-server { | ||
91 | display: flex; | ||
92 | margin: 0 0 0 1%; | ||
93 | color: #999; | ||
94 | text-decoration: underline; | ||
95 | } | ||
96 | |||
97 | &__change-server:hover { | ||
98 | display: flex; | ||
99 | margin: 0 0 0 1%; | ||
100 | color: rgb(20, 122, 255); | ||
101 | text-decoration: none; | ||
102 | } | ||
77 | } | 103 | } |
78 | 104 | ||
79 | &__change-server { | 105 | &__featured-services { |
80 | display: flex; | 106 | align-items: center; |
81 | margin: 0 0 0 1%; | 107 | background: #fff; |
82 | color: #999; | 108 | border-radius: 6px; |
83 | text-decoration: underline; | ||
84 | } | ||
85 | |||
86 | &__change-server:hover { | ||
87 | display: flex; | 109 | display: flex; |
88 | margin: 0 0 0 1%; | 110 | flex-wrap: wrap; |
89 | color: rgb(20, 122, 255); | 111 | margin: 80px auto 0 auto; |
90 | text-decoration: none; | 112 | padding: 20px 20px 5px; |
113 | text-align: center; | ||
114 | width: 480px; | ||
115 | height: auto; | ||
116 | @media screen and (max-height: 700px) { | ||
117 | display: none; | ||
118 | } | ||
91 | } | 119 | } |
92 | } | ||
93 | 120 | ||
94 | &__featured-services { | 121 | &__featured-service { |
95 | align-items: center; | 122 | margin: 0 10px 15px; |
96 | background: #fff; | ||
97 | border-radius: 6px; | ||
98 | display: flex; | ||
99 | flex-wrap: wrap; | ||
100 | margin: 80px auto 0 auto; | ||
101 | padding: 20px 20px 5px; | ||
102 | text-align: center; | ||
103 | width: 480px; | ||
104 | height: auto; | ||
105 | } | ||
106 | |||
107 | &__featured-service { | ||
108 | margin: 0 10px 15px; | ||
109 | height: 35px; | ||
110 | @media (prefers-reduced-motion: no-preference) { | ||
111 | transition: 0.5s filter, 0.5s opacity; | ||
112 | } | ||
113 | width: 35px; | ||
114 | |||
115 | img { | ||
116 | width: 35px; | ||
117 | height: 35px; | 123 | height: 35px; |
124 | @media (prefers-reduced-motion: no-preference) { | ||
125 | transition: 0.5s filter, 0.5s opacity; | ||
126 | } | ||
127 | width: 35px; | ||
128 | |||
129 | img { | ||
130 | width: 35px; | ||
131 | height: 35px; | ||
132 | } | ||
118 | } | 133 | } |
119 | } | 134 | } |
120 | } | 135 | } |