login.component.scss 3.17 KB
Newer Older
Chocobozzz's avatar
Chocobozzz committed
1
2
@import '_variables';
@import '_mixins';
3
4
5
@import './_bootstrap-variables';
@import '~bootstrap/scss/functions';
@import '~bootstrap/scss/variables';
Chocobozzz's avatar
Chocobozzz committed
6

7
8
9
10
label {
  display: block;
}

Chocobozzz's avatar
Chocobozzz committed
11
12
input[type=text],
input[type=email] {
Chocobozzz's avatar
Chocobozzz committed
13
14
  @include peertube-input-text(340px);
}
Chocobozzz's avatar
Chocobozzz committed
15

16
.modal-body {
Chocobozzz's avatar
Chocobozzz committed
17
  text-align: start;
18
19
20
21
22
23
24
25
26
27
28
29
30

  .forgot-password-instructions {
    margin-bottom: 20px;
  }
}

@media screen and (max-width: #{map-get($container-max-widths, sm)}) {
  .modal-body {
    #forgot-password-email {
      width: 100%;
    }
  }

Chocobozzz's avatar
Chocobozzz committed
31
32
  .modal-footer .grey-button {
    display: none;
33
34
35
  }
}

Chocobozzz's avatar
Chocobozzz committed
36
37
.create-an-account,
.forgot-password-button {
38
  color: pvar(--mainForegroundColor);
39
  cursor: pointer;
40
  transition: opacity cubic-bezier(0.39, 0.575, 0.565, 1);
Chocobozzz's avatar
Chocobozzz committed
41

42
  &:hover {
43
44
    text-decoration: none !important;
    opacity: .7 !important;
45
  }
46
}
Chocobozzz's avatar
Chocobozzz committed
47

48
.wrapper {
Chocobozzz's avatar
Chocobozzz committed
49
  display: flex;
50
  justify-content: space-around;
Chocobozzz's avatar
Chocobozzz committed
51
52
  flex-wrap: wrap;

Chocobozzz's avatar
Chocobozzz committed
53
  > div {
54
    flex: 1 1;
Chocobozzz's avatar
Chocobozzz committed
55
56
  }

57
  .login-form-and-externals {
Chocobozzz's avatar
Chocobozzz committed
58
59
60
    @include margin-left(10px);
    @include margin-right(10px);

61
62
63
64
65
    display: flex;
    flex-wrap: wrap;
    font-size: 15px;
    max-width: 450px;
    margin-bottom: 40px;
Chocobozzz's avatar
Chocobozzz committed
66

67
68
69
    form {
      margin: 0;

Chocobozzz's avatar
Chocobozzz committed
70
71
      &,
      input {
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
        width: 100%;
      }

      .additionnal-links {
        display: block;
        text-align: center;
        margin-top: 20px;
        margin-bottom: 20px;

        .forgot-password-button,
        .create-an-account {
          padding: 4px;
          display: inline-block;

          color: var(--mainColor);

Chocobozzz's avatar
Chocobozzz committed
88
89
          &:hover,
          &:active {
90
91
92
93
            color: var(--mainHoverColor);
          }
        }
      }
Chocobozzz's avatar
Chocobozzz committed
94
95
    }

96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
    .external-login-blocks {
      min-width: 200px;

      .block-title {
        font-weight: $font-semibold;
      }

      .external-login-block {
        @include disable-default-a-behaviour;

        cursor: pointer;
        border: 1px solid #d1d7e0;
        border-radius: 5px;
        color: pvar(--mainForegroundColor);
        margin: 10px 10px 0 0;
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 35px;
        min-width: 100px;

        &:hover {
Chocobozzz's avatar
Chocobozzz committed
118
          background-color: rgba(209, 215, 224, 0.5);
119
        }
Chocobozzz's avatar
Chocobozzz committed
120
121
      }
    }
122
123
124
125
126
127
128

    .signup-link {
      display: inline-block;
    }
  }

  .instance-information {
Chocobozzz's avatar
Chocobozzz committed
129
130
131
    @include margin-left(10px);
    @include margin-right(10px);

132
133
134
135
136
137
138
139
140
141
142
143
144
145
    max-width: 600px;
    min-width: 350px;
    margin-bottom: 40px;
  }

  .terms-anchor {
    display: inline;
  }

  .terms-link {
    display: none;
  }
}

Chocobozzz's avatar
Chocobozzz committed
146
@mixin column-reverse-display {
147
148
149
150
  flex-direction: column-reverse;

  .login-form-and-externals,
  .instance-information {
Chocobozzz's avatar
Chocobozzz committed
151
152
153
    @include margin-left(0);
    @include margin-right(0);

154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
    width: 100%;
    max-width: 450px;
    min-width: unset;
    align-self: center;
  }

  .instance-information {
    ::ng-deep .accordion {
      display: none;
    }
  }

  .terms-anchor {
    display: none;
  }

  .terms-link {
    display: inline;
  }
}

@media screen and (max-width: breakpoint(md)) {
  .wrapper {
Chocobozzz's avatar
Chocobozzz committed
177
    @include column-reverse-display();
178
179
180
181
182
183
  }
}

@media screen and (max-width: breakpoint(md) + $menu-width) {
  :host-context(.main-col:not(.expanded)) {
    .wrapper {
Chocobozzz's avatar
Chocobozzz committed
184
      @include column-reverse-display();
185
    }
Chocobozzz's avatar
Chocobozzz committed
186
187
  }
}