https://moshicom.com/assets/js/relax.js

1$.noty.themes.relax = {
2    name    : 'relax',
3    helpers : {},
4    modal   : {
5        css: {
6            position       : 'fixed',
7            width          : '100%',
8            height         : '100%',
9            backgroundColor: '#000',
10            zIndex         : 10000,
11            opacity        : 0.6,
12            display        : 'none',
13            left           : 0,
14            top            : 0
15        }
16    },
17    style   : function() {
18
19        this.$bar.css({
20            overflow    : 'hidden',
21            margin      : '4px 0',
22            borderRadius: '5px'
23        });
24
25        this.$message.css({
26            fontSize  : '14px',
27            lineHeight: '16px',
28            textAlign : 'center',
29            padding   : '20px 50px 20px 10px',
30            width     : 'auto',
31            position  : 'relative'
32        });
33
34        this.$closeButton.css({
35            position  : 'absolute',
36            top       : 12,
37            right     : 12,
38            width     : 32,
39            height    : 32,
40            //background: "url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAQAAAAnOwc2AAAAxUlEQVR4AR3MPUoDURSA0e++uSkkOxC3IAOWNtaCIDaChfgXBMEZbQRByxCwk+BasgQRZLSYoLgDQbARxry8nyumPcVRKDfd0Aa8AsgDv1zp6pYd5jWOwhvebRTbzNNEw5BSsIpsj/kurQBnmk7sIFcCF5yyZPDRG6trQhujXYosaFoc+2f1MJ89uc76IND6F9BvlXUdpb6xwD2+4q3me3bysiHvtLYrUJto7PD/ve7LNHxSg/woN2kSz4txasBdhyiz3ugPGetTjm3XRokAAAAASUVORK5CYII=)",
41            background: "center / 40% no-repeat transparent url(data:image/svg+xml;charset=utf8,%3Csvg%20id%3D%22close%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%3E%3Cpath%20fill%3D%22%23FFF%22%20d%3D%22M4.7%2C2.58%2C17.42%2C15.3a1.49%2C1.49%2C0%2C0%2C1%2C0%2C2.12h0a1.49%2C1.49%2C0%2C0%2C1-2.12%2C0L2.58%2C4.7a1.49%2C1.49%2C0%2C0%2C1%2C0-2.12h0A1.49%2C1.49%2C0%2C0%2C1%2C4.7%2C2.58Z%22%2F%3E%3Cpath%20fill%3D%22%23FFF%22%20d%3D%22M17.42%2C4.7%2C4.7%2C17.42a1.49%2C1.49%2C0%2C0%2C1-2.12%2C0h0a1.49%2C1.49%2C0%2C0%2C1%2C0-2.12L15.3%2C2.58a1.49%2C1.49%2C0%2C0%2C1%2C2.12%2C0h0A1.49%2C1.49%2C0%2C0%2C1%2C17.42%2C4.7Z%22%2F%3E%3C%2Fsvg%3E)",
42            // display   : 'none',
43            cursor    : 'pointer',
44            borderRadius: '16px'
45        });
46
47        this.$buttons.css({
48            padding        : 5,
49            textAlign      : 'right',
50            borderTop      : '1px solid #EBEBEB',
51            backgroundColor: '#fff'
52        });
53
54        this.$buttons.find('button').css({
55            marginLeft: 5
56        });
57
58        this.$buttons.find('button:first').css({
59            marginLeft: 0
60        });
61
62        this.$bar.on({
63            mouseenter: function() {
64                $(this).find('.noty_close').stop().fadeTo('normal', 1);
65            },
66            mouseleave: function() {
67                $(this).find('.noty_close').stop().fadeTo('normal', 0);
68            }
69        });
70
71        switch(this.options.layout.name) {
72            case 'top':
73                this.$bar.css({
74                    borderBottom: '2px solid #EBEBEB',
75                    borderLeft  : '2px solid #EBEBEB',
76                    borderRight : '2px solid #EBEBEB',
77                    borderTop   : '2px solid #EBEBEB',
78                    boxShadow   : "0 2px 4px rgba(0, 0, 0, 0.1)"
79                });
80                break;
81            case 'topCenter':
82            case 'center':
83            case 'bottomCenter':
84            case 'inline':
85                this.$bar.css({
86                    border   : '1px solid #EBEBEB',
87                    boxShadow: "0 2px 4px rgba(0, 0, 0, 0.1)"
88                });
89                this.$message.css({fontSize: '13px', textAlign: 'center'});
90                break;
91            case 'topLeft':
92            case 'topRight':
93            case 'bottomLeft':
94            case 'bottomRight':
95            case 'centerLeft':
96            case 'centerRight':
97                this.$bar.css({
98                    border   : '1px solid #EBEBEB',
99                    boxShadow: "0 2px 4px rgba(0, 0, 0, 0.1)"
100                });
101                this.$message.css({fontSize: '13px', textAlign: 'left'});
102                break;
103            case 'bottom':
104                this.$bar.css({
105                    borderTop   : '2px solid #EBEBEB',
106                    borderLeft  : '2px solid #EBEBEB',
107                    borderRight : '2px solid #EBEBEB',
108                    borderBottom: '2px solid #EBEBEB',
109                    boxShadow   : "0 -2px 4px rgba(0, 0, 0, 0.1)"
110                });
111                break;
112            default:
113                this.$bar.css({
114                    border   : '2px solid #EBEBEB',
115                    boxShadow: "0 2px 4px rgba(0, 0, 0, 0.1)"
116                });
117                break;
118        }
119
120        switch(this.options.type) {
121            case 'alert':
122            case 'notification':
123                this.$bar.css({backgroundColor: '#F0F4F7', borderColor: '#E2E7EB', color: '#44484B'});
124                this.$closeButton.css({backgroundColor: '#E2E7EB'});
125                break;
126            case 'warning':
127                this.$bar.css({backgroundColor: '#FDEFD0', borderColor: '#F9CE6C', color: '#44484B'});
128                this.$buttons.css({borderTop: '1px solid #F9CE6C'});
129                this.$closeButton.css({backgroundColor: '#F9CE6C'});
130                break;
131            case 'error':
132                this.$bar.css({backgroundColor: '#FEDEE6', borderColor: '#FD95AC', color: '#44484B'});
133                this.$message.css({fontWeight: 'bold'});
134                this.$buttons.css({borderTop: '1px solid #FD95AC'});
135                this.$closeButton.css({backgroundColor: '#FD95AC'});
136                break;
137            case 'information':
138                this.$bar.css({backgroundColor: '#EDF7FA', borderColor: '#CAE4EE', color: '#44484B'});
139                this.$buttons.css({borderTop: '1px solid #CAE4EE'});
140                this.$closeButton.css({backgroundColor: '#CAE4EE'});
141                break;
142            case 'success':
143                this.$bar.css({backgroundColor: '#C1F3E4', borderColor: '#65DDB8', color: '#44484B'});
144                this.$buttons.css({borderTop: '1px solid #65DDB8'});
145                this.$closeButton.css({backgroundColor: '#65DDB8'});
146                break;
147            default:

148                this.$bar.css({backgroundColor: '#FFF', borderColor: '#EBEBEB', color: '#44484B'});
149                this.$closeButton.css({backgroundColor: '#EBEBEB'});
150                break;
151        }
152    },
153    callback: {
154        onShow : function() {
155            this.options.closeWith = ['click', 'button'];
156        },
157        onClose: function() {
158
159        }
160    }
161};