455 lines
8.9 KiB
SCSS
455 lines
8.9 KiB
SCSS
.panel-problems {
|
|
height: 100%;
|
|
|
|
.fa-icon-container {
|
|
padding-right: 0.4rem;
|
|
color: $gray-2;
|
|
i {
|
|
width: 1rem;
|
|
}
|
|
}
|
|
|
|
// <ReactTable /> styles
|
|
.ReactTable {
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.rt-tr-group {
|
|
flex: 0 0 auto;
|
|
border-bottom: solid 1px $problems-border-color;
|
|
border-left: solid 2px rgba(0, 0, 0, 0);
|
|
|
|
&:last-child {
|
|
border-bottom: solid 1px $problems-border-color;
|
|
}
|
|
|
|
&:hover {
|
|
border-left: solid 2px rgba($blue, 0.5);
|
|
}
|
|
|
|
.rt-tr {
|
|
.rt-td {
|
|
border: 0;
|
|
}
|
|
|
|
&:hover {
|
|
background: lighten($problems-table-stripe, 2%);
|
|
box-shadow: 0px 0px 5px rgba($blue, 0.5);
|
|
z-index: 1;
|
|
}
|
|
&.-even {
|
|
background: lighten($problems-table-stripe, 1%);
|
|
&:hover {
|
|
background: lighten($problems-table-stripe, 4%);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.rt-noData {
|
|
z-index: 2;
|
|
}
|
|
|
|
.pagination-bottom {
|
|
margin-top: auto;
|
|
flex: 1 0 auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.-pagination {
|
|
margin-top: auto;
|
|
height: 3rem;
|
|
|
|
.-previous {
|
|
flex: 1;
|
|
}
|
|
|
|
.-center {
|
|
flex: 3;
|
|
|
|
.-pageJump {
|
|
margin: 0px 0.4rem;
|
|
}
|
|
|
|
.select-wrap select {
|
|
width: 8rem;
|
|
}
|
|
}
|
|
|
|
.-next {
|
|
flex: 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
.problem-severity {
|
|
padding: 0px;
|
|
|
|
.severity-cell {
|
|
width: 100%;
|
|
height: 100%;
|
|
padding: 0.45em 0 0.45em 1.1em;
|
|
}
|
|
}
|
|
|
|
.problem-status--new {
|
|
animation: blink-opacity 2s ease-in-out infinite;
|
|
}
|
|
|
|
// .problem-description {
|
|
// font-weight: 500;
|
|
// }
|
|
|
|
.rt-tr .rt-td {
|
|
&.custom-expander {
|
|
text-align: center;
|
|
padding-left: 0rem;
|
|
i {
|
|
color: #676767;
|
|
font-size: 1.2rem;
|
|
}
|
|
& .expanded {
|
|
i {
|
|
color: $blue;
|
|
}
|
|
}
|
|
// background: linear-gradient(to bottom, $dark-5 50%, $dark-2 50%);
|
|
// background-size: 100% 200%;
|
|
// background-position: right bottom;
|
|
// transition: all .3s ease-out;
|
|
}
|
|
&.custom-expander:hover {
|
|
// background-position: right top;
|
|
background-color: lighten($problems-table-stripe, 8%);
|
|
i {
|
|
color: $blue;
|
|
}
|
|
}
|
|
&.last-change {
|
|
text-align: left;
|
|
}
|
|
}
|
|
|
|
.comments-icon {
|
|
float: right;
|
|
padding-right: 0.6rem;
|
|
i {
|
|
color: $gray-2;
|
|
}
|
|
}
|
|
|
|
.problem-tags {
|
|
&.rt-td {
|
|
padding-left: 0.6rem;
|
|
}
|
|
.label-tag, .zbx-tag {
|
|
cursor: pointer;
|
|
margin-right: 0.6rem;
|
|
|
|
&.highlighted {
|
|
box-shadow: 0 0 10px $orange;
|
|
}
|
|
}
|
|
}
|
|
|
|
.problem-details-container {
|
|
display: flex;
|
|
background-color: $problem-details-background;
|
|
border: 1px solid $problems-border-color;
|
|
border-bottom-width: 0px;
|
|
|
|
max-height: 0;
|
|
opacity: 0;
|
|
overflow: hidden;
|
|
transition: all 0.3s ease-out;
|
|
|
|
&.show {
|
|
max-height: 16rem;
|
|
opacity: 1;
|
|
}
|
|
|
|
.problem-details-row {
|
|
display: flex;
|
|
margin-bottom: 0.6rem;
|
|
min-height: 3rem;
|
|
|
|
.problem-value-container {
|
|
flex: 1 0 auto;
|
|
}
|
|
}
|
|
|
|
.problem-details {
|
|
position: relative;
|
|
flex: 10 1 auto;
|
|
padding: 0.5rem 1rem 0.5rem 1.2rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.description-label {
|
|
font-weight: 500;
|
|
font-style: italic;
|
|
color: $text-color-muted;
|
|
}
|
|
|
|
.problem-age {
|
|
font-weight: 500;
|
|
}
|
|
|
|
.problem-tags {
|
|
padding-top: 0.8rem;
|
|
padding-bottom: 0.8rem;
|
|
margin-top: auto;
|
|
}
|
|
|
|
.problem-item-name {
|
|
color: $text-color-muted;
|
|
}
|
|
|
|
.problem-item-value {
|
|
font-weight: 500;
|
|
}
|
|
|
|
.problem-statusbar {
|
|
// margin-top: auto;
|
|
margin-bottom: 0.6rem;
|
|
display: flex;
|
|
flex-direction: row;
|
|
// max-width: 13rem;
|
|
|
|
&.compact .problem-statusbar-item {
|
|
width: 2.5rem;
|
|
padding: 0.4rem 0.4rem 0.4rem 0.8rem;
|
|
}
|
|
|
|
.problem-statusbar-item {
|
|
width: 3rem;
|
|
height: 2rem;
|
|
padding: 0.4rem 0.4rem 0.4rem 1rem;
|
|
background: $problem-statusbar-background;
|
|
margin-right: 2px;
|
|
border-radius: 2px;
|
|
// border: 1px solid $dark-5;
|
|
|
|
&:hover {
|
|
background: darken($problem-statusbar-background, 2%);
|
|
}
|
|
|
|
&.muted {
|
|
.fa-icon-container {
|
|
color: $problem-statusbar-muted;
|
|
}
|
|
}
|
|
&.fired {
|
|
box-shadow: 0px 0px 10px rgba($orange, 0.1);
|
|
.fa-icon-container {
|
|
color: $orange;
|
|
text-shadow: 0px 0px 10px rgba($orange, 0.5);
|
|
// animation: fade-in 1s ease-out;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.problem-actions {
|
|
margin-left: 1.6rem;
|
|
}
|
|
|
|
.problem-action-button {
|
|
&.btn {
|
|
width: 3rem;
|
|
height: 2rem;
|
|
|
|
background-image: none;
|
|
background-color: $action-button-color;
|
|
border: 1px solid darken($action-button-color, 6%);
|
|
border-radius: 1px;
|
|
|
|
&:hover {
|
|
background-color: darken($action-button-color, 4%);
|
|
}
|
|
}
|
|
}
|
|
|
|
.problem-details-middle {
|
|
flex: 1 0 auto;
|
|
padding: 0.6rem 1rem;
|
|
// border: 1px solid $dark-4;
|
|
border-width: 0 1px;
|
|
border-style: solid;
|
|
border-color: $dark-4;
|
|
overflow: auto;
|
|
}
|
|
|
|
.problem-ack-container {
|
|
padding: 0.8rem 0;
|
|
border-top: 2px solid $dark-4;
|
|
overflow: auto;
|
|
}
|
|
|
|
.problem-ack-list {
|
|
display: flex;
|
|
overflow: auto;
|
|
|
|
.problem-ack-col {
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding-right: 0.8rem;
|
|
}
|
|
|
|
.problem-ack-time,
|
|
.problem-ack-user {
|
|
color: $text-color-muted;
|
|
}
|
|
// span {
|
|
// padding-right: 0.6rem;
|
|
// }
|
|
}
|
|
|
|
|
|
.problem-details-right {
|
|
flex: 0 0 auto;
|
|
padding: 0.5rem 2rem;
|
|
// background: $dark-4;
|
|
color: $text-color-muted;
|
|
|
|
&.compact {
|
|
padding: 0.5rem 1rem;
|
|
}
|
|
|
|
.problem-details-right-item {
|
|
margin-bottom: 0.2rem;
|
|
}
|
|
}
|
|
|
|
.problem-maintenance {
|
|
.fa-icon-container {
|
|
color: $orange;
|
|
}
|
|
}
|
|
|
|
.problem-multi-event-type {
|
|
i {
|
|
color: $orange;
|
|
text-shadow: 0px 0px 10px $orange;
|
|
animation: blink-shadow 2s ease-out infinite;
|
|
}
|
|
}
|
|
|
|
.event-timeline {
|
|
position: relative;
|
|
margin-bottom: 0.6rem;
|
|
padding-top: 1.6rem;
|
|
// margin-top: auto;
|
|
|
|
.timeline-info-container {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
transition: all 0.2s ease-out;
|
|
// border: 1px solid $text-color-muted;
|
|
// border-radius: 2px;
|
|
|
|
.event-timestamp {
|
|
font-weight: 500;
|
|
color: $text-color-muted;
|
|
}
|
|
}
|
|
|
|
svg.event-timeline-canvas {
|
|
height: 40px;
|
|
|
|
g.event-timeline-group {
|
|
height: 40px;
|
|
transform: translate(0px, 14px);
|
|
}
|
|
}
|
|
|
|
.problem-event-interval {
|
|
height: 12px;
|
|
// transition: all 0.2s ease-out;
|
|
// opacity: 0.7;
|
|
|
|
&:hover {
|
|
// opacity: 1;
|
|
stroke: $zbx-text-highlighted;
|
|
filter: url(#glowShadow);
|
|
}
|
|
}
|
|
|
|
.problem-event-item {
|
|
circle {
|
|
transition: all 0.2s ease-out;
|
|
}
|
|
|
|
&:hover {
|
|
circle.point-border {
|
|
stroke: $zbx-text-highlighted;
|
|
stroke-width: 1;
|
|
filter: url(#glowShadow);
|
|
}
|
|
.point-core {
|
|
fill: $zbx-text-highlighted;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// .rt-tr-group {
|
|
// transition: top 1s ease-out;
|
|
// animation: all 1s ease;
|
|
// }
|
|
}
|
|
}
|
|
|
|
@keyframes slide-down {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translateY(-20px);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@keyframes blink-opacity {
|
|
0% {
|
|
opacity: 1;
|
|
}
|
|
50% {
|
|
opacity: 0;
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes fade-in {
|
|
0% {
|
|
color: $dark-3;
|
|
text-shadow: unset;
|
|
}
|
|
100% {
|
|
color: $orange;
|
|
text-shadow: 0px 0px 10px rgba($orange, 0.5);
|
|
}
|
|
}
|
|
|
|
@keyframes blink-shadow {
|
|
0% {
|
|
opacity: 1;
|
|
text-shadow: 0px 0px 3px $orange;
|
|
}
|
|
50% {
|
|
opacity: 0.3;
|
|
text-shadow: 0px 0px 10px $orange;
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
text-shadow: 0px 0px 2px $orange;
|
|
}
|
|
}
|