aboutsummaryrefslogtreecommitdiffstats
path: root/src/styles/welcome.scss
diff options
context:
space:
mode:
authorLibravatar André Oliveira <37463445+SpecialAro@users.noreply.github.com>2022-07-06 13:11:17 +0100
committerLibravatar GitHub <noreply@github.com>2022-07-06 12:11:17 +0000
commiteb7cd3b3384976509ead7f9e0d76afe1e3b47b4a (patch)
tree23d81c5927e69d56b83e9b6b269e2f76dcb7458f /src/styles/welcome.scss
parent6.0.0-nightly.90 [skip ci] (diff)
downloadferdium-app-eb7cd3b3384976509ead7f9e0d76afe1e3b47b4a.tar.gz
ferdium-app-eb7cd3b3384976509ead7f9e0d76afe1e3b47b4a.tar.zst
ferdium-app-eb7cd3b3384976509ead7f9e0d76afe1e3b47b4a.zip
Fix styling on welcome screen (#433)
Diffstat (limited to 'src/styles/welcome.scss')
-rw-r--r--src/styles/welcome.scss203
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}
generated by cgit v1.2.3-54-g00ecf (git 2.45.2) at 2024-07-04 00:57:38 +0000