otf-frontend/client/src/app/account/account.component.scss

   1 /*  Copyright (c) 2019 AT&T Intellectual Property.                             #\r
   2 #                                                                              #\r
   3 #   Licensed under the Apache License, Version 2.0 (the "License");            #\r
   4 #   you may not use this file except in compliance with the License.           #\r
   5 #   You may obtain a copy of the License at                                    #\r
   6 #                                                                              #\r
   7 #       http://www.apache.org/licenses/LICENSE-2.0                             #\r
   8 #                                                                              #\r
   9 #   Unless required by applicable law or agreed to in writing, software        #\r
  10 #   distributed under the License is distributed on an "AS IS" BASIS,          #\r
  11 #   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.   #\r
  12 #   See the License for the specific language governing permissions and        #\r
  13 #   limitations under the License.                                             #\r
  14 ##############################################################################*/\r
  15 \r
  16 \r
  17 $topnav-background-color: #222;\r
  18 :host {\r
  19   display: block;\r
  20 }\r
  21 .account-page {\r
  22   position: absolute;\r
  23   top: 0;\r
  24   left: 0;\r
  25   right: 0;\r
  26   bottom: 0;\r
  27   overflow: auto;\r
  28   background: $topnav-background-color;\r
  29   text-align: center;\r
  30   color: #fff;\r
  31   padding: 3em;\r
  32   .col-lg-4 {\r
  33     padding: 0;\r
  34   }\r
  35   .input-lg {\r
  36     height: 46px;\r
  37     padding: 10px 16px;\r
  38     font-size: 18px;\r
  39     line-height: 1.3333333;\r
  40     border-radius: 0;\r
  41   }\r
  42   .input-underline {\r
  43     background: 0 0;\r
  44     border: none;\r
  45     box-shadow: none;\r
  46     border-bottom: 2px solid rgba(255, 255, 255, 0.5);\r
  47     color: #fff;\r
  48     border-radius: 0;\r
  49   }\r
  50   .input-underline:focus {\r
  51     border-bottom: 2px solid #fff;\r
  52     box-shadow: none;\r
  53   }\r
  54   .rounded-btn {\r
  55     -webkit-border-radius: 50px;\r
  56     border-radius: 50px;\r
  57     color: rgba(255, 255, 255, 0.8);\r
  58     background: $topnav-background-color;\r
  59     border: 2px solid rgba(255, 255, 255, 0.8);\r
  60     font-size: 18px;\r
  61     line-height: 40px;\r
  62     padding: 0 25px;\r
  63   }\r
  64   .rounded-btn:hover,\r
  65   .rounded-btn:focus,\r
  66   .rounded-btn:active,\r
  67   .rounded-btn:visited {\r
  68     color: rgba(255, 255, 255, 1);\r
  69     border: 2px solid rgba(255, 255, 255, 1);\r
  70     outline: none;\r
  71   }\r
  72 \r
  73   h1 {\r
  74     font-weight: 300;\r
  75     margin-top: 20px;\r
  76     margin-bottom: 10px;\r
  77     font-size: 36px;\r
  78     small {\r
  79       color: rgba(255, 255, 255, 0.7);\r
  80     }\r
  81   }\r
  82 \r
  83   .form-group {\r
  84     padding: 8px 0;\r
  85     input::-webkit-input-placeholder {\r
  86       color: rgba(255, 255, 255, 0.6) !important;\r
  87     }\r
  88 \r
  89     input:-moz-placeholder {\r
  90       /* Firefox 18- */\r
  91       color: rgba(255, 255, 255, 0.6) !important;\r
  92     }\r
  93 \r
  94     input::-moz-placeholder {\r
  95       /* Firefox 19+ */\r
  96       color: rgba(255, 255, 255, 0.6) !important;\r
  97     }\r
  98 \r
  99     input:-ms-input-placeholder {\r
 100       color: rgba(255, 255, 255, 0.6) !important;\r
 101     }\r
 102   }\r
 103   .form-content {\r
 104     padding: 30px 0;\r
 105   }\r
 106   .user-avatar {\r
 107     -webkit-border-radius: 50%;\r
 108     border-radius: 50%;\r
 109     border: 2px solid #fff;\r
 110   }\r
 111 \r
 112   #verifyMessage{\r
 113     margin-top: 100px\r
 114   }\r
 115 }\r