77 lines
1.4 KiB
SCSS
77 lines
1.4 KiB
SCSS
.block-overview-tooltip {
|
|
position: absolute;
|
|
background: rgba(#11131f, 0.95);
|
|
border-radius: 4px;
|
|
box-shadow: 1px 1px 10px rgba(0,0,0,0.5);
|
|
color: #b1b1b1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
padding: 10px 15px;
|
|
text-align: left;
|
|
min-width: 320px;
|
|
max-width: 320px;
|
|
pointer-events: none;
|
|
z-index: 11;
|
|
|
|
&.clickable {
|
|
pointer-events: all;
|
|
}
|
|
}
|
|
|
|
th, td {
|
|
&.label {
|
|
width: 30%;
|
|
}
|
|
&.value {
|
|
width: 70%;
|
|
text-align: end;
|
|
}
|
|
}
|
|
|
|
.badge.badge-accelerated {
|
|
background-color: #653b9c;
|
|
box-shadow: #ad7de57f 0px 0px 12px -2px;
|
|
color: white;
|
|
animation: acceleratePulse 1s infinite;
|
|
}
|
|
|
|
.tags {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
row-gap: 0.25em;
|
|
margin-top: 0.2em;
|
|
max-width: 100%;
|
|
|
|
.badge {
|
|
border-radius: 0.2rem;
|
|
padding: 0.2em 0.5em;
|
|
margin-right: 0.25em;
|
|
}
|
|
|
|
.filter-tag {
|
|
background: #181b2daf;
|
|
border: solid 1px #105fb0;
|
|
color: white;
|
|
transition: background-color 300ms;
|
|
|
|
&.matching {
|
|
background-color: #105fb0;
|
|
}
|
|
}
|
|
|
|
&.any-mode {
|
|
.filter-tag {
|
|
border: solid 1px #1a9436;
|
|
&.matching {
|
|
background-color: #1a9436;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@keyframes acceleratePulse {
|
|
0% { background-color: #653b9c; box-shadow: #ad7de57f 0px 0px 12px -2px; }
|
|
50% { background-color: #8457bb; box-shadow: #ad7de5 0px 0px 18px -2px;}
|
|
100% { background-color: #653b9c; box-shadow: #ad7de57f 0px 0px 12px -2px; }
|
|
} |