monad-jump/style.css at main · futreall/monad-jump · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
/* style.css */
:root{
    --p:#a259ff;
    --bg1:#1e0b41;
    --bg2:#3d1584;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html,body{
    height:100%;display:flex;justify-content:center;align-items:center;
    font-family:system-ui;background:linear-gradient(var(--bg1),var(--bg2));
    color:#fff;overflow:hidden;
  }
  /* game area */
  #game{position:relative;width:375px;height:667px;border-radius:20px;
        overflow:hidden;box-shadow:0 0 20px #0006}
  #player{position:absolute;width:32px;height:32px}

  /* platforms */
  .plat{position:absolute;width:68px;height:14px;border-radius:8px}
  .plat.static{background:var(--p)}
  .plat.mov   {background:#c08dff}
  .plat.spring{background:#ffd86b}
  .hide{opacity:0;pointer-events:none}

  /* ui */
  #ui{position:fixed;top:8px;left:8px;font:600 1.2rem system-ui}
  #overlay{
    position:fixed;inset:0;display:flex;flex-direction:column;
    justify-content:center;align-items:center;gap:1rem;
    background:rgba(30,11,65,.8);z-index:2
  }
  button{
    background:var(--p);border:none;color:#fff;padding:10px 20px;
    border-radius:12px;font-weight:600;cursor:pointer;
    box-shadow:0 4px 10px #0004
  }
  button:active{transform:scale(.95)}
  .preview{width:160px;border-radius:16px;box-shadow:0 0 10px #0006}