mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
added angular gradient to page and login. Tweaked header underline to not be so heavy. Tweaked stacked logo on login. Created an alternative to avatar when there's no connection to gravatar - could use work, but I think you get the idea.
This commit is contained in:
@@ -50,6 +50,7 @@ $critical: #ed2e18;
|
||||
// -------------------------
|
||||
$body-bg: rgb(20,20,20);
|
||||
$page-bg: $dark-2;
|
||||
$page-img-bg: url('../img/angle_gradient_rev.png');
|
||||
$body-color: $gray-4;
|
||||
$text-color: $gray-4;
|
||||
|
||||
@@ -74,6 +75,7 @@ $hr-border-color: rgba(0,0,0,.1) !default;
|
||||
$component-active-color: #fff !default;
|
||||
$component-active-bg: $brand-primary !default;
|
||||
|
||||
|
||||
// Panel
|
||||
// -------------------------
|
||||
$panel-bg: $dark-2;
|
||||
|
||||
@@ -54,8 +54,9 @@ $critical: #EC2128;
|
||||
// Scaffolding
|
||||
// -------------------------
|
||||
|
||||
$body-bg: $white;
|
||||
$page-bg: $white;
|
||||
$body-bg: $white;
|
||||
$page-bg: $white;
|
||||
$page-img-bg: url('../img/angle_gradient_light_rev.png');
|
||||
$body-color: $gray-1;
|
||||
$text-color: $gray-1;
|
||||
|
||||
@@ -80,6 +81,7 @@ $hr-border-color: $dark-3 !default;
|
||||
$component-active-color: $white !default;
|
||||
$component-active-bg: $brand-primary !default;
|
||||
|
||||
|
||||
// Panel
|
||||
// -------------------------
|
||||
|
||||
|
||||
@@ -281,7 +281,7 @@ div.flot-text {
|
||||
border-top: 0;
|
||||
border-right: 0;
|
||||
border-left: 0;
|
||||
border-bottom: 2px solid transparent;
|
||||
border-bottom: 1px solid transparent;
|
||||
padding: 1.2rem .5rem .4rem .5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -189,6 +189,15 @@
|
||||
|
||||
.sidemenu-org-avatar {
|
||||
width: 44px;
|
||||
background-color: $gray-2;
|
||||
border-radius: 50%;
|
||||
.no-avatar {
|
||||
color: $brand-primary;
|
||||
text-shadow: 0 1px 0 $dark-1;
|
||||
padding-left: 17px;
|
||||
position: relative;
|
||||
top: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.sidemenu-org-avatar > img {
|
||||
|
||||
@@ -20,6 +20,10 @@
|
||||
|
||||
.page-container {
|
||||
background-color: $page-bg;
|
||||
background-image: $page-img-bg; /* this is an experiment */
|
||||
background-position: left;
|
||||
background-size: 60%;
|
||||
background-repeat: no-repeat;
|
||||
position: relative;
|
||||
padding: ($spacer * 2) ($spacer * 4);
|
||||
max-width: 1060px;
|
||||
@@ -30,7 +34,6 @@
|
||||
|
||||
.page-header {
|
||||
padding: $spacer 0 $spacer/2 0;
|
||||
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: flex-end;
|
||||
@@ -40,7 +43,7 @@
|
||||
border-top: 0;
|
||||
border-right: 0;
|
||||
border-left: 0;
|
||||
border-bottom: 4px solid transparent;
|
||||
border-bottom: 1px solid transparent;
|
||||
|
||||
h1 {
|
||||
font-style: italic;
|
||||
|
||||
@@ -1,3 +1,13 @@
|
||||
.login-container {
|
||||
background-image: $page-img-bg; /* this is an experiment */
|
||||
background-position: left;
|
||||
background-size: 60%;
|
||||
background-repeat: no-repeat;
|
||||
min-width: 100%;
|
||||
margin-left: 0;
|
||||
margin-top: -26px; /* BAD HACK - experiement to see how it looks */
|
||||
padding-top: $spacer * 5; /* BAD HACK - experiement to see how it looks */
|
||||
}
|
||||
|
||||
.login-form {
|
||||
display: inline-block;
|
||||
@@ -6,11 +16,12 @@
|
||||
|
||||
.login-box {
|
||||
max-width: 700px;
|
||||
margin: $spacer * 2 auto 0 auto;
|
||||
margin: 0 auto; /* was $spacer * 2 auto 0 auto; */
|
||||
}
|
||||
|
||||
.login-box-logo {
|
||||
text-align: center;
|
||||
margin-bottom: $spacer * 2;
|
||||
img {
|
||||
width: 6rem;
|
||||
}
|
||||
@@ -173,7 +184,7 @@
|
||||
width: 125px;
|
||||
}
|
||||
.icon-gf-grafana_wordmark {
|
||||
top: -90px;
|
||||
top: -5px;
|
||||
font-size: 3rem;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user