This repository has been archived on 2025-09-14. You can view files and clone it, but cannot push or open issues or pull requests.
Files
cyber-narrator-cn-ui/src/assets/css/components/views/charts/chart.scss
2023-08-08 16:47:46 +08:00

574 lines
11 KiB
SCSS

.ip-detail__open-port {
display: flex;
height: 100%;
width: 100%;
.open-port__table {
flex: 1;
display: table;
height: 100%;
border-right: 1px solid $--right-box-border-color;
.open-port__table-row {
display: table-row;
font-size: 14px;
color: #333333;
}
.open-port__table-row.open-port__table-row--header {
padding: 13px 30px 0;
height: 40px;
color: #6B717B;
}
.open-port__table-cell {
display: table-cell;
vertical-align: middle;
padding: 13px 30px;
}
}
.open-port__chart {
display: flex;
flex-direction: column;
flex: 0 0 30%;
height: 100%;
.open-port__chart-title {
padding-left: 20px;
line-height: 50px;
flex: 0 0 50px;
}
.open-port__chart-body {
flex: 1;
}
}
}
.ip-detail__hosted-domain, .app-detail__related-domain {
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
.hosted-domain__list, .related-domain__list {
display: flex;
flex-direction: column;
flex: 0 0 25%;
overflow: auto;
padding-bottom: 20px;
border-bottom: 1px solid $--right-box-border-color;
.hosted-domain__list-title, .related-domain__list-title {
padding: 13px 30px 0;
height: 40px;
color: #6B717B;
}
.hosted-domain__list-body, .related-domain__list-body {
display: flex;
flex-direction: column;
height: calc(100% - 40px);
overflow: hidden auto;
}
.hosted-domain__list-row, .related-domain__list-row {
padding: 5px 30px;
color: #3976CB;
i {
color: #B8C1D1;
}
}
}
.hosted-domain__chart, .related-domain__chart {
display: flex;
flex-direction: column;
flex: 1;
&>div {
flex: 0 0 50%;
display: flex;
flex-direction: column;
.hosted-domain__chart-title {
padding-left: 20px;
line-height: 50px;
flex: 0 0 50px;
}
.chart-drawing {
flex: 1;
}
}
}
}
.domain-detail-list {
display: table;
width: 100%;
.domain-detail-list__row {
display: table-row;
//&:last-of-type {
//.domain-detail-list__label, .domain-detail-list__content {
// border-bottom: none;
//}
//}
.domain-detail-list__label {
display: table-cell;
padding: 8px 30px;
border-bottom: 1px solid $--content-right-background-color;
min-width: 170px;
font-size: 14px;
color: #6B717B;
}
.domain-detail-list__content {
display: table-cell;
font-size: 14px;
border-bottom: 1px solid $--content-right-background-color;
color: #3976CB;
}
}
}
.crypto-eventList__record {
display: flex;
height: 100%;
width: 100%;
.record__table {
display: table;
height: 100%;
width: 100%;
.record__table-row {
display: table-row;
font-size: 14px;
color: #333333;
}
.record__table-row.record__table-row--header {
padding: 13px 30px 0;
height: 40px;
color: #6B717B;
}
.record__table-cell {
display: table-cell;
vertical-align: middle;
padding-left: 10px;
padding-top: 15px;
padding-bottom: 0;
.record_second{
color:#7e8088;
font-size:12px;
}
.circle-red {
color: #EC7F66;
font-size: 28px;
}
}
.record__table-cell:first-of-type {
padding-left:30px;
}
}
}
.entity-detail__dns-record {
display: flex;
height: 100%;
width: 100%;
.dns-record__table {
display: table;
height: 100%;
width: 100%;
.dns-record__table-row {
display: table-row;
font-size: 14px;
color: #333333;
}
.dns-record__table-row.dns-record__table-row--header {
padding: 13px 30px 0;
height: 40px;
color: #6B717B;
}
.dns-record__table-cell {
display: table-cell;
border-bottom: 1px solid $--content-right-background-color;
vertical-align: middle;
padding: 13px 30px;
}
.dns-record__table-row:not(.dns-record__table-row--header) .dns-record__table-cell:last-of-type {
color: #3976CB;
}
}
}
.app-detail__related-domain {
flex-direction: row;
.related-domain__list {
border-bottom: none;
}
.related-domain__chart {
flex-direction: row;
border-left: 1px solid $--right-box-border-color;
padding: 3vh 5vw;
&>div {
flex: 0 0 50%;
display: flex;
flex-direction: column;
.related-domain__chart-title {
padding-left: 20px;
line-height: 50px;
flex: 0 0 50px;
color: #3976CB;
}
.chart-drawing {
flex: 1;
}
}
}
}
.sankey-box {
width: 100%;
height: 100%;
position: relative;
.sankey__label {
position: absolute;
color: #333;
bottom: 50px;
font-weight: bold;
transform: translateX(-50%);
}
}
.sankey__tooltip {
width: 270px;
height: 170px;
padding: 5px;
display: flex;
flex-direction: column;
.sankey__tooltip-row {
display: flex;
padding: 2px 0;
.sankey__row-label {
flex: 0 0 98px;
color: #666;
}
.sankey__row-value {
flex: 1;
color: #333;
}
}
.sankey__tooltip-table {
padding: 2px 0 2px 22px;
display: table;
.sankey__table-row {
display: table-row;
padding: 1px 0 4px 0;
.sankey__table-cell {
display: table-cell;
font-size: 12px;
color: #333;
}
.sankey__table-cell:first-of-type {
color: #999;
}
}
}
}
.map-tooltip {
display: flex;
flex-direction: column;
padding: 3px 3px 0;
.map-tooltip__title {
display: flex;
align-items: center;
padding-bottom: 4px;
font-size: 12px;
color: #353636;
font-weight: bold;
}
.map-tooltip__content {
display: flex;
flex-direction: column;
font-size: 12px;
.content-title {
padding: 3px 0 2px;
font-size: 12px;
color: #046ECA;
font-weight: bold;
}
.content-row {
display: flex;
padding-left: 12px;
&.content-row--score {
position: relative;
span {
position: absolute;
left: 0;
top: calc(50% - 3px);
height: 6px;
width: 6px;
border-radius: 50%;
}
}
.row__label {
width: 190px;
color: #575757;
padding-right: 5px;
}
.row__value {
width: 80px;
text-align: end;
font-weight: bold;
color: #353636;
}
}
}
}
.position-icon {
font-size: 24px;
color: #EC7F66;
}
.circle1{
position: relative;
width:28px;
height:28px;
line-height: 28px;
border:1px solid #dd674d;
background:#FFFFFF;
border-radius:50%;
-moz-border-radius:50%;
margin:auto;
z-index: 1;
}
.circle1::after {
position: absolute;
content: '';
background: #dd674d;
bottom: 3px;
right: 3px;
left: 3px;
top: 3px;
z-index: 5;
border-radius: 50%;
}
.arrow {
position: relative;
display: inline-block;
line-height: 0;
background-color: #aeaeae;
&.arrow-hor {
width: 24px;
height: 2px;
margin-bottom: 3px;
}
&.arrow-hor.right::before {
content: '';
position: absolute;
top: -4px;
right: -8px;
border: 5px solid transparent;
border-left: 5px solid #aeaeae;
}
}
.nz-chart-tooltip{
border-color: transparent !important;
}
.nz-chart-tooltip .cn-chart-tooltip-box{
display: flex;
>span:first-child{
margin-top: 8px;
}
.cn-chart-tooltip-content{
flex: 1;
display: inline-block;
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
font-size:14px;
color:#666;
font-weight:400;
margin-left:2px ;
}
.cn-chart-tooltip-value{
float:right;
margin-left:20px;
font-size:14px;
color:#666;
font-weight:900;
}
}
.cn-chart__single-value {
.chart__loading {
top: 0;
height: 100%;
}
}
.chart__loading {
position: absolute;
height: 100%;
width: 100%;
left: 0;
top: 0;
background-color: rgba(255, 255, 255, .2);
z-index: 1;
/*img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
&.loading-img--large {
height: 30px;
width: 30px;
}
&.loading-img--small {
height: 14px;
width: 14px;
}
&.loading-img--default {
height: 20px;
width: 20px;
}
}*/
@keyframes cn-loading__inner {
0% { opacity: 1 }
100% { opacity: 0 }
}
.cn-loading {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: inline-block;
overflow: hidden;
background: transparent;
&.cn-loading--default {
width: 27px;
height: 27px;
.cn-loading__inner {
div {
width: 6px;
height: 6px;
border-radius: 3px / 3px;
transform-origin: 3px 13px;
}
}
}
&.cn-loading--small {
width: 20px;
height: 20px;
.cn-loading__inner {
div {
width: 5px;
height: 5px;
border-radius: 3px / 3px;
transform-origin: 0 9px;
}
}
}
.cn-loading__inner {
width: 100%;
height: 100%;
position: relative;
transform: translateZ(0) scale(1);
backface-visibility: hidden;
transform-origin: 0 0;
div {
left: 10px;
top: 0;
position: absolute;
animation: cn-loading__inner linear 1s infinite;
background: #3c76cc;
box-sizing: content-box;
}
div:nth-child(1) {
transform: rotate(0deg);
animation-delay: -0.875s;
background: #3c76cc;
}
div:nth-child(2) {
transform: rotate(45deg);
animation-delay: -0.75s;
background: #3c76cc;
}
div:nth-child(3) {
transform: rotate(90deg);
animation-delay: -0.625s;
background: #3c76cc;
}
div:nth-child(4) {
transform: rotate(135deg);
animation-delay: -0.5s;
background: #3c76cc;
}
div:nth-child(5) {
transform: rotate(180deg);
animation-delay: -0.375s;
background: #3c76cc;
}
div:nth-child(6) {
transform: rotate(225deg);
animation-delay: -0.25s;
background: #3c76cc;
}
div:nth-child(7) {
transform: rotate(270deg);
animation-delay: -0.125s;
background: #3c76cc;
}
div:nth-child(8) {
transform: rotate(315deg);
animation-delay: 0s;
background: #3c76cc;
}
}
}
}
.map-back {
position: absolute;
right: 12px;
top: 15px;
color: $--color-primary;
cursor: pointer;
z-index: 2;
}
.panel-chart__no-data.all-clear {
flex-direction: column;
.no-recent-alerts {
display: flex;
flex-direction: column;
color: #333333;
font-weight: 400;
text-align: center;
i {
color: #23BF9A;
font-size: 48px;
}
span {
font-size: 22px;
margin: 5px 0;
}
}
no-detection {
font-size: 12px;
color: #333;
}
}