PopupManager/example.css at master · princessmiku/PopupManager · 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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
/*
    Change it as you need it, but note that display must be none and
    when the function is called it is set to flex.

    In this case, the window that is called is centered on the screen
    and the background is darkened slightly. To display something in
    the center, it is recommended to use a div.
 */

* {
    margin: 0;
    padding: 0;
    color: white;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: seagreen;
    height: 90vh;
}

button {
    display: flex;
    padding: 2px 5px;
    background-color: darkgreen;
    border: none;
    border-radius: 5px;
    font-size: large;
    cursor: pointer;
}

.button-list {
    display: flex;
    gap: 5px;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

.pm-popup {
    position: fixed;

    width: 100%;
    height: 100%;
    top: 0;
    left: 0;

    display: none;
    align-items: center;
    justify-content: center;

    background-color: rgba(0,0,0,0.7);
}


.pm-popup-box {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 20px;
    background-color: darkslategray;
    border-radius: 10px;
}