Project

General

Profile

1
/**
2
 * customAlert
3
 * Author: Philippe Assis
4
 * Doc and repo: https://github.com/PhilippeAssis/custom-alert
5
 *
6
 * Alert e confirm personalizados.
7
 * FF, Chromer, IE(>=9)
8
 *
9
 *                              ATENÇÂO
10
 * window.customAlert e window.customConfirm devem permanecer com esses nomes,
11
 * a não ser que você saiba o que esta fazendo.
12
 */
13
#customAlert-overlay, 
14
#customConfirm-overlay { display: none; opacity: 0.5; position: fixed; top: 0px; left: 0px; width: 100vw; height: 100vh; z-index: 99999; background: #000000; }
15
#customAlert { background: #FFFFFF; }
16
#customAlert button { color: #5E5E5E; background: #BABABA; }
17
#customAlert button:hover { color: #E6E6E6; background: #666666; }
18
#customConfirm { background: #FFFFFF; }
19

    
20

    
21
#customConfirm button.cancel,
22
#customConfirm button.confirm { font-weight: bold; }
23

    
24
#customConfirm button.confirm { margin-right: 10px; color: #204625; background: #68BB74; }
25
#customConfirm button.confirm:hover { color: #DCEFDF; background: #3F8D4B; }
26
#customConfirm button.cancel { color: #F8D8D3; background: #E2614B; }
27
#customConfirm button.cancel:hover { color: #F8D8D3; background: #B0321C; }
28

    
29
#customAlert,
30
#customConfirm { border-radius: 5px; width: 40%; font-size: 1.125em; /*display: none;*/ position: fixed; max-width: 100vw; max-height: 100vh; /*z-index: 1000;*/ top: 5%; margin: auto 30%; padding: 0.125em; box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3); -webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3); -webkit-transition: opacity 400ms ease-in 0s; -moz-transition: opacity 400ms ease-in 0s; transition: opacity 400ms ease-in 0s; }
31

    
32
#customAlert header,
33
#customConfirm header { color: #3E6D86; text-align: left; font-size: 1.125em; font-weight: bold; background: rgba(0, 0, 0, 0) linear-gradient(#fff, #999) repeat scroll 0 0; height: 1.925em; }
34

    
35
#customAlert .body,
36
#customConfirm .body { padding: 0; color: #5C5C5C; font-size: 1.125em; background: #FFFFFF; text-align: center; opacity: 1; }
37
#customConfirm .body p { font-weight: bold; color: #F00606; }
38

    
39
#customAlert .footer,
40
#customConfirm .footer { background: #FFFFFF; text-align: center; margin: 1.925em auto 0; }
41
#customAlert button,
42
#customConfirm button { min-width: 3.025em; margin-bottom: 5px; padding: 5px; font-size: 0.9em; word-wrap: break-word; }
43
#customAlert button:hover,
44
#customConfirm button:hover { cursor: pointer; }
45

    
46
#customAlert button.close,
47
#customConfirm button.close {
48
  background: #215a7a none repeat scroll 0 0;
49
  border-radius: 1.925em;
50
  box-shadow: 1px 1px 3px #000000;
51
  color: #ffffff !important;
52
  font-size: 1.225em;
53
  font-weight: bold;
54
  line-height: 2.025em;
55
  position: absolute;
56
  right: -12px;
57
  text-align: center;
58
  text-decoration: none;
59
  top: -10px;
60
  width: 3.025em;
61
}
62
#customAlert button.close:hover,
63
#customConfirm button.close:hover { background: #FE0606 none repeat scroll 0 0; }
64

    
65
div.droplets h2 {
66
  color: #3d6f8a;
67
  font-size: 1.125em;
68
}
69
@media (min-width: 321px) {
70
    #customAlert,
71
    #customConfirm { top: 20%; }
72
}
73
@media (max-width: 550px) {
74
    #customAlert,
75
    #customConfirm { margin-left: -50vw; }
76
}
(7-7/30)