1 | .falert.container {
|
2 | position: fixed;
|
3 | top: 70px;
|
4 | right: 75px;
|
5 | width: 450px;
|
6 | height: 100px;
|
7 | z-index: 9;
|
8 | background-color: transparent;
|
9 | }
|
10 |
|
11 | .falert.body {
|
12 | width: inherit;
|
13 | height: inherit;
|
14 | position: absolute;
|
15 | z-index: 10;
|
16 | box-shadow: 5px 10px 15px rgba(0, 0, 0, 0.5);
|
17 | padding: 0.5em;
|
18 | border-radius: 10px;
|
19 | border-width: 5px;
|
20 | border-style: solid;
|
21 | cursor: pointer;
|
22 | }
|
23 |
|
24 | .falert.body.notice {
|
25 | color: brown;
|
26 | border-color: darkblue;
|
27 | background-color: wheat;
|
28 | }
|
29 |
|
30 | .falert.body.fatal {
|
31 | color: yellow;
|
32 | border-color: black;
|
33 | background-color: red;
|
34 | }
|
35 |
|
36 | .falert.body.warning {
|
37 | color: floralwhite;
|
38 | border-color: darkblue;
|
39 | background-color: forestgreen;
|
40 | }
|
41 |
|
42 | .falert.body::after {
|
43 | content: "✖";
|
44 | font-size: x-large;
|
45 | font-family: monospace;
|
46 | text-align: center;
|
47 | display: inline-block;
|
48 | position: absolute;
|
49 | right: 0px;
|
50 | top: 0px;
|
51 | width: 25px;
|
52 | height: 25px;
|
53 | color: rgba(255, 255, 255, 0.666);
|
54 | cursor: pointer;
|
55 | }
|
56 |
|
57 | .breathing {
|
58 | animation-name: breathing;
|
59 | animation-duration: 23s;
|
60 | animation-delay: 3s;
|
61 | animation-timing-function: ease-in-out;
|
62 | animation-fill-mode: none;
|
63 | animation-iteration-count: infinite;
|
64 | animation-direction: alternate-reverse;
|
65 | }
|
66 |
|
67 | .swaying {
|
68 | animation-name: swaying;
|
69 | animation-duration: 17s;
|
70 | animation-delay: 5s;
|
71 | animation-timing-function: ease-in-out;
|
72 | animation-fill-mode: both;
|
73 | animation-iteration-count: infinite;
|
74 | animation-direction: alternate-reverse;
|
75 | }
|
76 |
|
77 | .flyin {
|
78 | transform: scale(0);
|
79 | animation-name: flyin;
|
80 | animation-iteration-count: 1;
|
81 | animation-duration: 250ms;
|
82 | animation-timing-function: linear;
|
83 | animation-fill-mode: forwards;
|
84 | }
|
85 |
|
86 | .falert h2,
|
87 | .falert p {
|
88 | margin: 0;
|
89 | padding: 0;
|
90 | font-size: small;
|
91 | }
|
92 |
|
93 | @keyframes breathing {
|
94 | 0% {
|
95 | transform: scale3d(1, 1, 1) rotate3d(0);
|
96 | box-shadow: 7px 7px 10px rgb(100, 100, 100);
|
97 | }
|
98 |
|
99 | 50% {
|
100 | transform: scale3d(1.05, 1.05, 1.05) rotate3d(0, 0, 1, 3deg);
|
101 | box-shadow: 13px 13px 15px rgb(100, 100, 100);
|
102 | }
|
103 |
|
104 | 75% {
|
105 | transform: scale3d(0.95, 0.95, 0.95) rotate3d(2, 1, 0, -20deg);
|
106 | box-shadow: 3px 3px 8px rgb(100, 100, 100);
|
107 | }
|
108 | }
|
109 |
|
110 | @keyframes swaying {
|
111 |
|
112 | 0%,
|
113 | 100% {
|
114 | transform: translate(0);
|
115 | }
|
116 |
|
117 | 33% {
|
118 | transform: translate(-17px) rotate3d(0, 0, 1, -2deg);
|
119 | }
|
120 |
|
121 | 66% {
|
122 | transform: translate(2px, 10px);
|
123 | }
|
124 | }
|
125 |
|
126 | @keyframes flyin {
|
127 | from {
|
128 | transform: scale(0);
|
129 | }
|
130 |
|
131 | to {
|
132 | transform: scale(1);
|
133 | }
|
134 | } |
\ | No newline at end of file |