Browse Source

removed inverse btn styling and added bgColor to generic oauth and grafana.com login buttons, added styling so log in button uses dark theme inverse btn styling both for dark and light theme

Patrick O'Carroll 7 years ago
parent
commit
190432296d
3 changed files with 13 additions and 4 deletions
  1. 2 2
      public/app/partials/login.html
  2. 2 2
      public/sass/_variables.scss
  3. 9 0
      public/sass/pages/_login.scss

+ 2 - 2
public/app/partials/login.html

@@ -55,12 +55,12 @@
             <i class="btn-service-icon fa fa-gitlab"></i>
             <i class="btn-service-icon fa fa-gitlab"></i>
             Sign in with GitLab
             Sign in with GitLab
           </a>
           </a>
-          <a class="btn btn-medium btn-inverse btn-service btn-service--grafanacom login-btn" href="login/grafana_com" target="_self"
+          <a class="btn btn-medium btn-service btn-service--grafanacom login-btn" href="login/grafana_com" target="_self"
             ng-if="oauth.grafana_com">
             ng-if="oauth.grafana_com">
             <i class="btn-service-icon"></i>
             <i class="btn-service-icon"></i>
             Sign in with Grafana.com
             Sign in with Grafana.com
           </a>
           </a>
-          <a class="btn btn-medium btn-inverse btn-service btn-service--oauth login-btn" href="login/generic_oauth" target="_self"
+          <a class="btn btn-medium btn-service btn-service--oauth login-btn" href="login/generic_oauth" target="_self"
             ng-if="oauth.generic_oauth">
             ng-if="oauth.generic_oauth">
             <i class="btn-service-icon fa fa-sign-in"></i>
             <i class="btn-service-icon fa fa-sign-in"></i>
             Sign in with {{oauth.generic_oauth.name}}
             Sign in with {{oauth.generic_oauth.name}}

+ 2 - 2
public/sass/_variables.scss

@@ -197,7 +197,7 @@ $external-services: (
     github: (bgColor: #464646, borderColor: #393939, icon: ''),
     github: (bgColor: #464646, borderColor: #393939, icon: ''),
     gitlab: (bgColor: #fc6d26, borderColor: #e24329, icon: ''),
     gitlab: (bgColor: #fc6d26, borderColor: #e24329, icon: ''),
     google: (bgColor: #e84d3c, borderColor: #b83e31, icon: ''),
     google: (bgColor: #e84d3c, borderColor: #b83e31, icon: ''),
-    grafanacom: (bgColor: inherit, borderColor: #393939, icon: ''),
-    oauth: (bgColor: inherit, borderColor: #393939, icon: '')
+    grafanacom: (bgColor: #262628, borderColor: #393939, icon: ''),
+    oauth: (bgColor: #262628, borderColor: #393939, icon: '')
   )
   )
   !default;
   !default;

+ 9 - 0
public/sass/pages/_login.scss

@@ -76,6 +76,15 @@ select:-webkit-autofill:focus {
       margin-left: 1rem;
       margin-left: 1rem;
     }
     }
   }
   }
+  & .btn-inverse {
+    color: #e3e3e3;
+    text-shadow: 0px 1px 0 rgba(0, 0, 0, 0.1);
+    background-color: #2a2a2c;
+    background-image: linear-gradient(to bottom, #262628, #303032);
+    background-repeat: repeat-x;
+    border-color: #262628;
+    box-shadow: -1px -1px 0 0 rgba(255, 255, 255, 0.1), 1px 1px 0 0 rgba(0, 0, 0, 0.3);
+  }
 }
 }
 
 
 .login-button-forgot-password {
 .login-button-forgot-password {