DemiSel
/
encantar-js
Watch 1
Star 0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

Update CSS

customisations
alemart 10 months ago
parent
fb1f1e24cd
commit
9420a2eb88
5 changed files with 96 additions and 61 deletions
Split View Show Diff Stats
  1. 20
    13
      demos/hello-aframe/demo.css
  2. 19
    12
      demos/hello-babylon/demo.css
  3. 19
    12
      demos/hello-three/demo.css
  4. 19
    12
      demos/hello-webgl/demo.css
  5. 19
    12
      demos/hello-world/demo.css

+ 20
- 13
demos/hello-aframe/demo.css View File 

@@ -1,6 +1,6 @@
1 1 
 body {
2 
-    background-color: black;
3 
-    background-image: url("../assets/poster.svg"), linear-gradient(black, 20%, #46346a);
2 
+    background-color: #46346a;
3 
+    background-image: url("../assets/poster.svg");
4 4 
     background-position: center;
5 5 
     background-repeat: no-repeat;
6 6 
     height: 100vh;
 
@@ -10,23 +10,28 @@ body {
10 10
11 11 
 #about {
12 12 
     position: absolute;
13 
-    right: 0;
14 
-    top: 0;
13 
+    right: 0px;
14 
+    top: 0px;
15 
+    width: 80px;
16 
+    height: 80px;
15 17
16 
-    display: inline-block;
18 
+    display: flex;
19 
+    align-items: center;
17 20 
     margin: 0;
18 
-    padding: 0 0.25em;
21 
+    padding: 0;
19 22
20 23 
     color: #fff;
21 
-    font-size: 48px;
24 
+    font-size: 56px;
22 25 
     font-weight: bold;
23 26 
     font-family: monospace;
24 27 
     text-decoration: none;
25 28 
     text-align: center;
26 29
27 
-    border-bottom: 4px solid;
28 
-    border-color: #5c3ba3;
29 
-    background: linear-gradient(0deg, #7b5ec4 0%, #bb7aff 100%);
30 
+    border-width: 0 0 2px 2px;
31 
+    border-radius: 0 0 0 8px;
32 
+    border-style: solid;
33 
+    border-color: #673ab6;
34 
+    background: linear-gradient(0deg, #7e56c2 0%, #9574cd 100%);
30 35 
     -webkit-tap-highlight-color: transparent;
31 36 
 }
32 37 
 
@@ -36,14 +41,16 @@ body {
36 41 
 }
37 42
38 43 
 #about:active {
39 
-    border-color: #a5a500;
40 
-    background: linear-gradient(0deg, #cccc00 0%, #ffff00 100%);
44 
+    border-color: #ddc300;
45 
+    background: linear-gradient(0deg, #ffd500 0%, #ffff00 100%);
41 46 
 }
42 47
43 48 
 #about::before {
44 49 
     content: '\24D8';
50 
+    width: 100%;
51 
+    text-align: center;
45 52 
 }
46 53
47 54 
 #about:focus {
48 55 
     outline: none;
49 
-}
56 
+}

+ 19
- 12
demos/hello-babylon/demo.css View File 

@@ -1,6 +1,6 @@
1 1 
 body {
2 
-    background-color: black;
3 
-    background-image: url("../assets/poster.svg"), linear-gradient(black, 20%, #46346a);
2 
+    background-color: #46346a;
3 
+    background-image: url("../assets/poster.svg");
4 4 
     background-position: center;
5 5 
     background-repeat: no-repeat;
6 6 
     height: 100vh;
 
@@ -17,23 +17,28 @@ body {
17 17
18 18 
 #about {
19 19 
     position: absolute;
20 
-    right: 0;
21 
-    top: 0;
20 
+    right: 0px;
21 
+    top: 0px;
22 
+    width: 80px;
23 
+    height: 80px;
22 24
23 
-    display: inline-block;
25 
+    display: flex;
26 
+    align-items: center;
24 27 
     margin: 0;
25 
-    padding: 0 0.25em;
28 
+    padding: 0;
26 29
27 30 
     color: #fff;
28 
-    font-size: 48px;
31 
+    font-size: 56px;
29 32 
     font-weight: bold;
30 33 
     font-family: monospace;
31 34 
     text-decoration: none;
32 35 
     text-align: center;
33 36
34 
-    border-bottom: 4px solid;
35 
-    border-color: #5c3ba3;
36 
-    background: linear-gradient(0deg, #7b5ec4 0%, #bb7aff 100%);
37 
+    border-width: 0 0 2px 2px;
38 
+    border-radius: 0 0 0 8px;
39 
+    border-style: solid;
40 
+    border-color: #673ab6;
41 
+    background: linear-gradient(0deg, #7e56c2 0%, #9574cd 100%);
37 42 
     -webkit-tap-highlight-color: transparent;
38 43 
 }
39 44 
 
@@ -43,12 +48,14 @@ body {
43 48 
 }
44 49
45 50 
 #about:active {
46 
-    border-color: #a5a500;
47 
-    background: linear-gradient(0deg, #cccc00 0%, #ffff00 100%);
51 
+    border-color: #ddc300;
52 
+    background: linear-gradient(0deg, #ffd500 0%, #ffff00 100%);
48 53 
 }
49 54
50 55 
 #about::before {
51 56 
     content: '\24D8';
57 
+    width: 100%;
58 
+    text-align: center;
52 59 
 }
53 60
54 61 
 #about:focus {

+ 19
- 12
demos/hello-three/demo.css View File 

@@ -1,6 +1,6 @@
1 1 
 body {
2 
-    background-color: black;
3 
-    background-image: url("../assets/poster.svg"), linear-gradient(black, 20%, #46346a);
2 
+    background-color: #46346a;
3 
+    background-image: url("../assets/poster.svg");
4 4 
     background-position: center;
5 5 
     background-repeat: no-repeat;
6 6 
     height: 100vh;
 
@@ -17,23 +17,28 @@ body {
17 17
18 18 
 #about {
19 19 
     position: absolute;
20 
-    right: 0;
21 
-    top: 0;
20 
+    right: 0px;
21 
+    top: 0px;
22 
+    width: 80px;
23 
+    height: 80px;
22 24
23 
-    display: inline-block;
25 
+    display: flex;
26 
+    align-items: center;
24 27 
     margin: 0;
25 
-    padding: 0 0.25em;
28 
+    padding: 0;
26 29
27 30 
     color: #fff;
28 
-    font-size: 48px;
31 
+    font-size: 56px;
29 32 
     font-weight: bold;
30 33 
     font-family: monospace;
31 34 
     text-decoration: none;
32 35 
     text-align: center;
33 36
34 
-    border-bottom: 4px solid;
35 
-    border-color: #5c3ba3;
36 
-    background: linear-gradient(0deg, #7b5ec4 0%, #bb7aff 100%);
37 
+    border-width: 0 0 2px 2px;
38 
+    border-radius: 0 0 0 8px;
39 
+    border-style: solid;
40 
+    border-color: #673ab6;
41 
+    background: linear-gradient(0deg, #7e56c2 0%, #9574cd 100%);
37 42 
     -webkit-tap-highlight-color: transparent;
38 43 
 }
39 44 
 
@@ -43,12 +48,14 @@ body {
43 48 
 }
44 49
45 50 
 #about:active {
46 
-    border-color: #a5a500;
47 
-    background: linear-gradient(0deg, #cccc00 0%, #ffff00 100%);
51 
+    border-color: #ddc300;
52 
+    background: linear-gradient(0deg, #ffd500 0%, #ffff00 100%);
48 53 
 }
49 54
50 55 
 #about::before {
51 56 
     content: '\24D8';
57 
+    width: 100%;
58 
+    text-align: center;
52 59 
 }
53 60
54 61 
 #about:focus {

+ 19
- 12
demos/hello-webgl/demo.css View File 

@@ -1,6 +1,6 @@
1 1 
 body {
2 
-    background-color: black;
3 
-    background-image: url("../assets/poster.svg"), linear-gradient(black, 20%, #46346a);
2 
+    background-color: #46346a;
3 
+    background-image: url("../assets/poster.svg");
4 4 
     background-position: center;
5 5 
     background-repeat: no-repeat;
6 6 
     height: 100vh;
 
@@ -17,23 +17,28 @@ body {
17 17
18 18 
 #about {
19 19 
     position: absolute;
20 
-    right: 0;
21 
-    top: 0;
20 
+    right: 0px;
21 
+    top: 0px;
22 
+    width: 80px;
23 
+    height: 80px;
22 24
23 
-    display: inline-block;
25 
+    display: flex;
26 
+    align-items: center;
24 27 
     margin: 0;
25 
-    padding: 0 0.25em;
28 
+    padding: 0;
26 29
27 30 
     color: #fff;
28 
-    font-size: 48px;
31 
+    font-size: 56px;
29 32 
     font-weight: bold;
30 33 
     font-family: monospace;
31 34 
     text-decoration: none;
32 35 
     text-align: center;
33 36
34 
-    border-bottom: 4px solid;
35 
-    border-color: #5c3ba3;
36 
-    background: linear-gradient(0deg, #7b5ec4 0%, #bb7aff 100%);
37 
+    border-width: 0 0 2px 2px;
38 
+    border-radius: 0 0 0 8px;
39 
+    border-style: solid;
40 
+    border-color: #673ab6;
41 
+    background: linear-gradient(0deg, #7e56c2 0%, #9574cd 100%);
37 42 
     -webkit-tap-highlight-color: transparent;
38 43 
 }
39 44 
 
@@ -43,12 +48,14 @@ body {
43 48 
 }
44 49
45 50 
 #about:active {
46 
-    border-color: #a5a500;
47 
-    background: linear-gradient(0deg, #cccc00 0%, #ffff00 100%);
51 
+    border-color: #ddc300;
52 
+    background: linear-gradient(0deg, #ffd500 0%, #ffff00 100%);
48 53 
 }
49 54
50 55 
 #about::before {
51 56 
     content: '\24D8';
57 
+    width: 100%;
58 
+    text-align: center;
52 59 
 }
53 60
54 61 
 #about:focus {

+ 19
- 12
demos/hello-world/demo.css View File 

@@ -1,6 +1,6 @@
1 1 
 body {
2 
-    background-color: black;
3 
-    background-image: url("../assets/poster.svg"), linear-gradient(black, 20%, #46346a);
2 
+    background-color: #46346a;
3 
+    background-image: url("../assets/poster.svg");
4 4 
     background-position: center;
5 5 
     background-repeat: no-repeat;
6 6 
     height: 100vh;
 
@@ -17,23 +17,28 @@ body {
17 17
18 18 
 #about {
19 19 
     position: absolute;
20 
-    right: 0;
21 
-    top: 0;
20 
+    right: 0px;
21 
+    top: 0px;
22 
+    width: 80px;
23 
+    height: 80px;
22 24
23 
-    display: inline-block;
25 
+    display: flex;
26 
+    align-items: center;
24 27 
     margin: 0;
25 
-    padding: 0 0.25em;
28 
+    padding: 0;
26 29
27 30 
     color: #fff;
28 
-    font-size: 48px;
31 
+    font-size: 56px;
29 32 
     font-weight: bold;
30 33 
     font-family: monospace;
31 34 
     text-decoration: none;
32 35 
     text-align: center;
33 36
34 
-    border-bottom: 4px solid;
35 
-    border-color: #5c3ba3;
36 
-    background: linear-gradient(0deg, #7b5ec4 0%, #bb7aff 100%);
37 
+    border-width: 0 0 2px 2px;
38 
+    border-radius: 0 0 0 8px;
39 
+    border-style: solid;
40 
+    border-color: #673ab6;
41 
+    background: linear-gradient(0deg, #7e56c2 0%, #9574cd 100%);
37 42 
     -webkit-tap-highlight-color: transparent;
38 43 
 }
39 44 
 
@@ -43,12 +48,14 @@ body {
43 48 
 }
44 49
45 50 
 #about:active {
46 
-    border-color: #a5a500;
47 
-    background: linear-gradient(0deg, #cccc00 0%, #ffff00 100%);
51 
+    border-color: #ddc300;
52 
+    background: linear-gradient(0deg, #ffd500 0%, #ffff00 100%);
48 53 
 }
49 54
50 55 
 #about::before {
51 56 
     content: '\24D8';
57 
+    width: 100%;
58 
+    text-align: center;
52 59 
 }
53 60
54 61 
 #about:focus {

Write Preview
Loading…
Cancel
Save