[Web GPU] Add demos to webkit.org
[WebKit-https.git] / Websites / webkit.org / demos / webgpu / css / style.css
1 /* This demo is based on webgl-compute-bitonicSort, found at https://github.com/9ballsyndrome/WebGL_Compute_shader. */
2
3 body {
4     background-color: rgb(35%, 65%, 85%);
5     margin: 0;
6     padding: 0;
7     height: 100vh;
8     display: flex;
9     align-items: center;
10     justify-content: center;
11 }
12
13 canvas {
14     display: block;
15     width: 100vw;
16     height: 100vh;
17 }
18
19 body.error canvas {
20     display: none;
21 }
22
23 h1 {
24     font-size: 1.5rem;
25 }
26
27 #container {
28     position: relative;
29 }
30
31 select {
32     zoom: 2;
33 }
34
35 div#log {
36     background-color: rgb(231, 231, 231);
37     padding: 20px;
38 }
39
40 body.error {
41     display: flex;
42     align-items: center;
43     justify-content: center;
44     background-color: rgb(85%, 35%, 35%);
45 }
46
47 body.error #contents {
48     display: none;
49 }
50
51 #error {
52     margin: 0;
53     padding: 0;
54     width: 50vw;
55     display: none;
56     text-align: center;
57 }
58
59 @media (max-width: 480px) {
60     #error {
61         width: 100vw;
62     }
63 }
64
65 body.error #error {
66     display: block;
67 }
68
69 #error h2 {
70     font-weight: bold;
71     font-size: 40px;
72     margin-bottom: 20px;
73 }
74
75 #error p {
76     font-size: 30px;
77 }