SingUP_style_CSS/style.css at master · Levii01/SingUP_style_CSS · 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
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
body
{
  /* Background pattern from subtlepatterns.com */
  background-image: url("img/hexellence.png");
  font-size: 20px;
}

#container
{
  background-color: #ffffff;
  width: 300px;
  padding: 50px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 100px;
  box-shadow: 5px;
  -webkit-box-shadow: 6px 8px 32px 5px rgba(20,15,20,1);
  -moz-box-shadow: 6px 8px 32px 5px rgba(20,15,20,1);
  box-shadow: 6px 8px 32px 5px rgba(20,15,20,1);
}

input[type=text],
input[type=password]
{
  width: 300px;
  background-color: #efefef;
  color: #666;
  border: 2px solid #ddd;
  border-radius: 5px;
  font-size: 20px;
  padding: 10px;
  box-sizing: border-box;
  outline: none;
  margin-top: 10px;
}

input[type=text]:focus,
input[type=password]:focus
{
  -webkit-box-shadow: 0px 0px 10px 2px rgba(165,205,165,1);
  -moz-box-shadow: 0px 0px 10px 2px rgba(165,205,165,1);
  box-shadow: 0px 0px 10px 2px rgba(165,205,165,1);
  border: 2px solid #a5cda5;
  background-color: #e9f3e9;
  color: #428c42;
}


input[type=submit]
{
  width: 300px;
  background-color: #36b03c;
  color: #ffffff;
  font-size: 20px;
  padding: 15px 10px;
  margin-top: 10px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  letter-spacing: 2px;
  outline: none;
  margin-top: 20px;
}

input[type=submit]:hover
{
    background-color: #37b93d;
}

input[type=submit]:focus
{
  -webkit-box-shadow: 0px 0px 15px 5px rgba(165,205,165,1);
  -moz-box-shadow: 0px 0px 15px 5px rgba(165,205,165,1);
  box-shadow: 0px 0px 15px 5px rgba(165,205,165,1);
}

input::-webkit-input-placeholder
{
    color: #999;
}
input:focus::-webkit-input-placeholder
{
    color: #428C42;
}
/* Firefox < 19 */
input:-moz-placeholder
{
    color: #999;
}
input:focus:-moz-placeholder
{
    color: #428C42;
}
/* Firefox > 19 */
input::-moz-placeholder
{
    color: #999;
}
input:focus::-moz-placeholder
{
    color: #428C42;
}
/* Internet Explorer 10 */
input:-ms-input-placeholder
{
    color: #999;
}
input:focus:-ms-input-placeholder
{
    color: #428C42;
}