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
Unified 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 
 body {
 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 
     background-position: center;
 4 
     background-position: center;
5 
     background-repeat: no-repeat;
 5 
     background-repeat: no-repeat;
6 
     height: 100vh;
 6 
     height: 100vh;
10
10
11 
 #about {
 11 
 #about {
12 
     position: absolute;
 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 
     margin: 0;
 20 
     margin: 0;
18 
-    padding: 0 0.25em;
21 
+    padding: 0;
19
22
20 
     color: #fff;
 23 
     color: #fff;
21 
-    font-size: 48px;
24 
+    font-size: 56px;
22 
     font-weight: bold;
 25 
     font-weight: bold;
23 
     font-family: monospace;
 26 
     font-family: monospace;
24 
     text-decoration: none;
 27 
     text-decoration: none;
25 
     text-align: center;
 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 
     -webkit-tap-highlight-color: transparent;
 35 
     -webkit-tap-highlight-color: transparent;
31 
 }
 36 
 }
32
37
36 
 }
 41 
 }
37
42
38 
 #about:active {
 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 
 #about::before {
 48 
 #about::before {
44 
     content: '\24D8';
 49 
     content: '\24D8';
50 
+    width: 100%;
51 
+    text-align: center;
45 
 }
 52 
 }
46
53
47 
 #about:focus {
 54 
 #about:focus {
48 
     outline: none;
 55 
     outline: none;
49 
-}
56 
+}

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

1 
 body {
 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 
     background-position: center;
 4 
     background-position: center;
5 
     background-repeat: no-repeat;
 5 
     background-repeat: no-repeat;
6 
     height: 100vh;
 6 
     height: 100vh;
17
17
18 
 #about {
 18 
 #about {
19 
     position: absolute;
 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 
     margin: 0;
 27 
     margin: 0;
25 
-    padding: 0 0.25em;
28 
+    padding: 0;
26
29
27 
     color: #fff;
 30 
     color: #fff;
28 
-    font-size: 48px;
31 
+    font-size: 56px;
29 
     font-weight: bold;
 32 
     font-weight: bold;
30 
     font-family: monospace;
 33 
     font-family: monospace;
31 
     text-decoration: none;
 34 
     text-decoration: none;
32 
     text-align: center;
 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 
     -webkit-tap-highlight-color: transparent;
 42 
     -webkit-tap-highlight-color: transparent;
38 
 }
 43 
 }
39
44
43 
 }
 48 
 }
44
49
45 
 #about:active {
 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 
 #about::before {
 55 
 #about::before {
51 
     content: '\24D8';
 56 
     content: '\24D8';
57 
+    width: 100%;
58 
+    text-align: center;
52 
 }
 59 
 }
53
60
54 
 #about:focus {
 61 
 #about:focus {

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

1 
 body {
 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 
     background-position: center;
 4 
     background-position: center;
5 
     background-repeat: no-repeat;
 5 
     background-repeat: no-repeat;
6 
     height: 100vh;
 6 
     height: 100vh;
17
17
18 
 #about {
 18 
 #about {
19 
     position: absolute;
 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 
     margin: 0;
 27 
     margin: 0;
25 
-    padding: 0 0.25em;
28 
+    padding: 0;
26
29
27 
     color: #fff;
 30 
     color: #fff;
28 
-    font-size: 48px;
31 
+    font-size: 56px;
29 
     font-weight: bold;
 32 
     font-weight: bold;
30 
     font-family: monospace;
 33 
     font-family: monospace;
31 
     text-decoration: none;
 34 
     text-decoration: none;
32 
     text-align: center;
 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 
     -webkit-tap-highlight-color: transparent;
 42 
     -webkit-tap-highlight-color: transparent;
38 
 }
 43 
 }
39
44
43 
 }
 48 
 }
44
49
45 
 #about:active {
 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 
 #about::before {
 55 
 #about::before {
51 
     content: '\24D8';
 56 
     content: '\24D8';
57 
+    width: 100%;
58 
+    text-align: center;
52 
 }
 59 
 }
53
60
54 
 #about:focus {
 61 
 #about:focus {

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

1 
 body {
 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 
     background-position: center;
 4 
     background-position: center;
5 
     background-repeat: no-repeat;
 5 
     background-repeat: no-repeat;
6 
     height: 100vh;
 6 
     height: 100vh;
17
17
18 
 #about {
 18 
 #about {
19 
     position: absolute;
 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 
     margin: 0;
 27 
     margin: 0;
25 
-    padding: 0 0.25em;
28 
+    padding: 0;
26
29
27 
     color: #fff;
 30 
     color: #fff;
28 
-    font-size: 48px;
31 
+    font-size: 56px;
29 
     font-weight: bold;
 32 
     font-weight: bold;
30 
     font-family: monospace;
 33 
     font-family: monospace;
31 
     text-decoration: none;
 34 
     text-decoration: none;
32 
     text-align: center;
 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 
     -webkit-tap-highlight-color: transparent;
 42 
     -webkit-tap-highlight-color: transparent;
38 
 }
 43 
 }
39
44
43 
 }
 48 
 }
44
49
45 
 #about:active {
 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 
 #about::before {
 55 
 #about::before {
51 
     content: '\24D8';
 56 
     content: '\24D8';
57 
+    width: 100%;
58 
+    text-align: center;
52 
 }
 59 
 }
53
60
54 
 #about:focus {
 61 
 #about:focus {

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

1 
 body {
 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 
     background-position: center;
 4 
     background-position: center;
5 
     background-repeat: no-repeat;
 5 
     background-repeat: no-repeat;
6 
     height: 100vh;
 6 
     height: 100vh;
17
17
18 
 #about {
 18 
 #about {
19 
     position: absolute;
 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 
     margin: 0;
 27 
     margin: 0;
25 
-    padding: 0 0.25em;
28 
+    padding: 0;
26
29
27 
     color: #fff;
 30 
     color: #fff;
28 
-    font-size: 48px;
31 
+    font-size: 56px;
29 
     font-weight: bold;
 32 
     font-weight: bold;
30 
     font-family: monospace;
 33 
     font-family: monospace;
31 
     text-decoration: none;
 34 
     text-decoration: none;
32 
     text-align: center;
 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 
     -webkit-tap-highlight-color: transparent;
 42 
     -webkit-tap-highlight-color: transparent;
38 
 }
 43 
 }
39
44
43 
 }
 48 
 }
44
49
45 
 #about:active {
 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 
 #about::before {
 55 
 #about::before {
51 
     content: '\24D8';
 56 
     content: '\24D8';
57 
+    width: 100%;
58 
+    text-align: center;
52 
 }
 59 
 }
53
60
54 
 #about:focus {
 61 
 #about:focus {

Write Preview
Loading…
Cancel
Save