xref: /openbmc/phosphor-webui/app/login/styles/index.scss (revision 6f7ec80eb14084228cd7d8dae580da4b794c2595) 
1#login {
2  @include mediaQuery(medium) {
3    background: linear-gradient(to right, $background-01 49.999%, $background-02 50%);
4    @include fastTransition-all;
5  }
6}
7
8.login__wrapper {
9  position: relative;
10  padding-top: 1em;
11  color: $primary-dark;
12  .row {
13    max-width: 1080px;
14  }
15  @include mediaQuery(small) {
16    top: 50%;
17    transform: translateY(-50%);
18  }
19  @include mediaQuery(medium) {
20    left: 0;
21    margin-left: 0;
22  }
23  .login__logo {
24    max-width: 200px;
25    display: block;
26    margin: 0 auto 2em;
27    @include mediaQuery(small) {
28      margin: 0 auto;
29    }
30  }
31
32  // Must be applied to the <main> element in the app
33  // Required to create an elegant page transition
34  @include page-transition;
35  &.ng-leave-active,
36  &.ng-enter {
37    @include page-transition-visibility;
38  }
39}
40
41#login__form {
42  color: $primary-dark;
43  background: transparent;
44  padding: 1em 0;
45  display: block;
46  overflow: hidden;
47  @include mediaQuery(small) {
48    max-width: 50%;
49    margin: 0 auto;
50  }
51  @include mediaQuery(medium) {
52    padding: 0 3em;
53    max-width: 100%;
54  }
55  @include mediaQuery(large) {
56    padding: 0 0 0 6em;
57  }
58  @include fastTransition-all;
59
60  input:disabled,
61  input:disabled:hover {
62    background-color: $background-03;
63    cursor: default;
64  }
65}
66
67.login__desc {
68  text-align: center;
69  font-size: 2em;
70  margin: 0.5em 0 2em;
71  font-weight: bold;
72}
73
74.login__server-info {
75  margin-top: 2em;
76  margin-left: 0;
77  padding-left: 0;
78  list-style-type: none;
79  @include mediaQuery(small) {
80    max-width: 50%;
81  }
82  @include mediaQuery(medium) {
83    max-width: 90%;
84  }
85  li {
86    padding: 1em 0;
87    border-top: 1px solid $border-color-01;
88  }
89  p {
90    margin-bottom: 0;
91    display: inline-block;
92    font-family: "Courier New", helvetica, arial, sans-serif;
93    font-weight: 700;
94  }
95  .login__info-label {
96    display: inline-block;
97    min-width: 200px;
98    @include fontFamily;
99  }
100}
101
102.login__status {
103  color: $status-ok;
104  &.error {
105    color: $status-error;
106  }
107}
108