Misthios/grafana-zabbix
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

problems: styles tweaks

Browse Source
This commit is contained in:
Alexander Zobnin
2018-12-25 12:47:51 +03:00
parent 66178c0f8a
commit b448c4117d
3 changed files with 50 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
src/sass/_panel-problems.scss
View File

@@ -27,6 +27,12 @@
&:hover { &:hover {
border-left: solid 2px rgba($blue, 0.5); border-left: solid 2px rgba($blue, 0.5);
.rt-tr {
background: $problems-table-row-hovered;
box-shadow: 0px 0px 5px rgba($blue, 0.5);
z-index: 1;
}
.rt-tr.-even { .rt-tr.-even {
margin-left: 0; margin-left: 0;
background: $problems-table-row-hovered; background: $problems-table-row-hovered;
@@ -38,6 +44,7 @@
.problem-details-container { .problem-details-container {
border-left-color: rgba($blue, 0.5); border-left-color: rgba($blue, 0.5);
box-shadow: 0px 0px 5px rgba($blue, 0.5);
} }
} }
@@ -46,11 +53,11 @@
border: 0; border: 0;
} }
&:hover { // &:hover {
background: $problems-table-row-hovered; // background: $problems-table-row-hovered;
box-shadow: 0px 0px 5px rgba($blue, 0.5); // box-shadow: 0px 0px 5px rgba($blue, 0.5);
z-index: 1; // z-index: 1;
} // }
&.-even { &.-even {
background: $problems-table-stripe; background: $problems-table-stripe;
@@ -228,13 +235,21 @@
margin-top: auto; margin-top: auto;
} }
.problem-item-name { .problem-item {
color: $text-muted; // border-bottom: solid 2px transparent;
// &:hover {
// border-bottom: solid 2px $blue;
// }
.problem-item-name {
color: $text-muted;
}
.problem-item-value {
font-weight: 500;
}
} }
.problem-item-value {
font-weight: 500;
}
.problem-statusbar { .problem-statusbar {
// margin-top: auto; // margin-top: auto;
@@ -267,7 +282,7 @@
} }
} }
&.fired { &.fired {
box-shadow: 0px 0px 10px rgba($problem-statusbar-fired, 0.1); box-shadow: $problem-statusbar-glow;
.fa-icon-container { .fa-icon-container {
color: $problem-statusbar-fired; color: $problem-statusbar-fired;
text-shadow: 0px 0px 10px rgba($problem-statusbar-fired, 0.5); text-shadow: 0px 0px 10px rgba($problem-statusbar-fired, 0.5);
@@ -304,17 +319,17 @@
.problem-details-middle { .problem-details-middle {
flex: 1 0 auto; flex: 1 0 auto;
padding: 0.6rem 1rem; padding: 0.6rem 1rem;
// border: 1px solid $dark-4;
border-width: 0 1px;
border-style: solid;
border-color: $dark-4;
overflow: auto; overflow: auto;
box-shadow: 1px 0 10px $problem-container-shadow;
} }
.problem-ack-container { .problem-ack-container {
padding: 1.2rem 0; margin-top: 0.6rem;
margin-left: -0.6rem;
padding: 1.2rem 0.6rem;
// border-top: 2px solid $dark-4; // border-top: 2px solid $dark-4;
overflow: auto; overflow: auto;
box-shadow: -2px 2px 10px $problem-container-shadow
} }
.problem-ack-list { .problem-ack-list {
@@ -349,6 +364,17 @@
.problem-details-right-item { .problem-details-right-item {
margin-bottom: 0.2rem; margin-bottom: 0.2rem;
// border-bottom: solid 2px transparent;
&:hover {
// box-shadow: 1px 0 10px $problem-container-shadow;
// border-bottom: solid 2px $blue;
color: $text-color-emphasis;
.fa-icon-container {
color: $text-color-emphasis;
}
}
} }
} }

4
src/sass/_variables.dark.scss
View File

@@ -8,8 +8,12 @@ $problems-border-color: $dark-1;
$problems-table-stripe: $dark-3; $problems-table-stripe: $dark-3;
$problems-table-row-hovered: darken($problems-table-stripe, 2%); $problems-table-row-hovered: darken($problems-table-stripe, 2%);
$problem-details-background: $dark-3; $problem-details-background: $dark-3;
$problem-statusbar-background: $dark-2; $problem-statusbar-background: $dark-2;
$problem-statusbar-muted: $dark-3; $problem-statusbar-muted: $dark-3;
$problem-statusbar-fired: $orange; $problem-statusbar-fired: $orange;
$problem-statusbar-glow: 0px 0px 10px rgba($problem-statusbar-fired, 0.1);
$problem-event-highlighted: $white; $problem-event-highlighted: $white;
$problem-expander-highlighted: lighten($problems-table-stripe, 8%); $problem-expander-highlighted: lighten($problems-table-stripe, 8%);
$problem-container-shadow: rgba($gray-2, 0.2)

4
src/sass/_variables.light.scss
View File

@@ -8,8 +8,12 @@ $problems-border-color: $dark-1;
$problems-table-stripe: $gray-6; $problems-table-stripe: $gray-6;
$problems-table-row-hovered: $gray-4; $problems-table-row-hovered: $gray-4;
$problem-details-background: $gray-6; $problem-details-background: $gray-6;
$problem-statusbar-background: $gray-4; $problem-statusbar-background: $gray-4;
$problem-statusbar-muted: $gray-5; $problem-statusbar-muted: $gray-5;
$problem-statusbar-fired: #ca4c17; $problem-statusbar-fired: #ca4c17;
$problem-statusbar-glow: inset 0px 0px 10px rgba($problem-statusbar-fired, 0.5);
$problem-event-highlighted: $white; $problem-event-highlighted: $white;
$problem-expander-highlighted: darken($problems-table-stripe, 20%); $problem-expander-highlighted: darken($problems-table-stripe, 20%);
$problem-container-shadow: rgba($gray-2, 0.5)