reprogl

1
@import 'settings';
2

3
body {
4
    background: #76b852; /* fallback for old browsers */
5
    background: rgb(141, 194, 111);
6
    background: linear-gradient(90deg, rgba(141, 194, 111, 1) 0%, rgba(118, 184, 82, 1) 50%);
7
    font-family: $main-font;
8
    -webkit-font-smoothing: antialiased;
9
    -moz-osx-font-smoothing: grayscale;
10
    font-size: 14px;
11
}
12

13
.login-page {
14
    width: 360px;
15
    padding: 14% 0 0;
16
    margin: auto;
17
}
18
.form {
19
    position: absolute;
20
    box-sizing: border-box;
21
    z-index: 1;
22
    top: 50%;
23
    left: 50%;
24
    background: #FFFFFF;
25
    max-width: 400px;
26
    margin: -130px 0 0 -200px;
27
    padding: 45px;
28
    text-align: center;
29
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
30

31
    input {
32
        font-family: $main-font;
33
        outline: 0;
34
        background: #f2f2f2;
35
        width: 100%;
36
        border: 0;
37
        margin: 0 0 15px;
38
        padding: 15px;
39
        box-sizing: border-box;
40
        font-size: 14px;
41
    }
42

43
    button {
44
        font-family: $main-font;
45
        text-transform: uppercase;
46
        outline: 0;
47
        background: #4CAF50;
48
        width: 100%;
49
        border: 0;
50
        padding: 15px;
51
        color: #FFFFFF;
52
        font-size: 14px;
53
        -webkit-transition: all 0.3 ease;
54
        transition: all 0.3 ease;
55
        cursor: pointer;
56

57
        &:hover, &:active, &:focus {
58
            background: #43A047;
59
        }
60
    }
61

62
    .message {
63
        margin: 15px 0 0;
64
        color: #b3b3b3;
65
        font-size: 12px;
66
        a {
67
            color: #4CAF50;
68
            text-decoration: none;
69
        }
70
    }
71

72
    .error {
73
        display: block;
74
        padding: 15px;
75
        color: $color-error;
76
        margin: 0 0 15px;
77
        background-color: lighten($color-error, 35%);
78
    }
79

80
    .register-form {
81
        display: none;
82
    }
83

84
    .unsubscribe-form {
85
        img {
86
            position: absolute;
87
            top: -30px;
88
            right: -88px;
89
            border: white solid 8px;
90
        }
91

92
        p {
93
            margin-top: 0;
94
            margin-right: 43px;
95
            margin-bottom: 24px;
96
            min-height: rem-calc(78);
97
        }
98
    }
99
}
100

101
.container {
102
    position: relative;
103
    z-index: 1;
104
    max-width: 300px;
105
    margin: 0 auto;
106

107
    &:before, &:after {
108
        content: "";
109
        display: block;
110
        clear: both;
111
    }
112

113
    .info {
114
        margin: 50px auto;
115
        text-align: center;
116
        h1 {
117
            margin: 0 0 15px;
118
            padding: 0;
119
            font-size: 36px;
120
            font-weight: 300;
121
            color: #1a1a1a;
122
        }
123
        span {
124
            color: #4d4d4d;
125
            font-size: 12px;
126
            a {
127
                color: #000000;
128
                text-decoration: none;
129
            }
130
            .fa {
131
                color: #EF3B3A;
132
            }
133
        }
134
    }
135
}
136