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
2022-03-31 14:35:10 +08:00

410 lines
7.6 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: 13px 30px;
border-bottom: 1px solid $--content-right-background-color;
min-width: 170px;
color: #6B717B;
}
.domain-detail-list__content {
display: table-cell;
padding: 13px 0 ;
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 {
padding-bottom: 10px;
color: #fff;
font-size: 16px;
}
.map-tooltip__content {
display: flex;
flex-direction: column;
font-size: 14px;
.content-row {
.row__label {
color: #ddd;
padding-right: 5px;
}
.row__value {
color: #fff;
}
}
}
}
.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%;
background-color: #fefefe;
z-index: 1;
opacity: .8;
i {
position: absolute;
left: calc(50% - 15px);
top: calc(50% - 15px);
font-size: 30px;
color: #aaa;
}
}
.map-back {
position: absolute;
right: 12px;
top: 15px;
color: $--color-primary;
cursor: pointer;
z-index: 2;
}