/* * Licensed to the Apache Software Foundation (ASF) under one * or more contributor license agreements. See the NOTICE file * distributed with this work for additional information * regarding copyright ownership. The ASF licenses this file * to you under the Apache License, Version 2.0 (the * "License"); you may not use this file except in compliance * with the License. You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ /* graph.scss */ /* .graph-bg svg { background-image: linear-gradient(to right, $black -10px, rgba(0, 0, 0, 0) 1px), linear-gradient($black -10px, $color_cararra_approx 1px); background-size: 10px 10px; position: relative; } */ .node { cursor: pointer; text { font-size: 10px; font-family: $font_1; } transition: opacity 0.3s linear; rect { stroke: $color_mountain_mist_approx; fill: $white; stroke-width: 1.5px; &.serach-rect { stroke: $color_keppel_approx; fill: transparent; stroke-width: 2.5px } } .label { fill: $color_suva_gray_approx; } circle { -moz-transition: all 0.3s; -webkit-transition: all 0.3s; transition: all 0.3s; stroke-width: 1.5px; &.node-detail-highlight { stroke: $color_havelock_blue_approx; stroke-width: 2px; opacity: 0.8; } &.nodeImage { &.green:hover { stroke: #ffb203; } &.blue:hover { stroke: #4b91e2; } &.currentNode { stroke: #fb4200; } &:hover { -moz-transform: scale(1.4); -webkit-transform: scale(1.4); transform: scale(1.4); } } } &.active { circle { -moz-transform: scale(1.4); -webkit-transform: scale(1.4); transform: scale(1.4); &.nodeImage { &.green { stroke: #ffb203; } &.blue { stroke: #4b91e2; } } } } } .edgePath { .path { cursor: pointer; } } .overlay {} .link { fill: none; stroke: $color_celeste_approx; stroke-width: 1.5px; } .d3-tip { line-height: 1; font-weight: bold; padding: 12px; background: $black_80; color: $white; z-index: 999; max-width: 300px; //Instead of the line below you could use @include border-radius($radius, $vertical-radius) border-radius: 2px; .tip-inner-scroll { overflow: auto; max-height: 300px; } /* Creates a small triangle extender for the tooltip */ &:after { box-sizing: border-box; display: inline; font-size: 10px; width: 100%; line-height: 1; color: rgba(0, 0, 0, 0.8); position: absolute; } /* Nrthward tooltips */ &.n:after { content: "\25BC"; margin: -1px 0 0 0; top: 100%; left: 0; text-align: center; } /* Eastward tooltips */ &.e:after { content: "\25C0"; margin: -4px 0 0 0; top: 50%; left: -8px; } /* Southward tooltips */ &.s:after { content: "\25B2"; margin: 0 0 1px 0; top: -8px; left: 0; text-align: center; } /* Westward tooltips */ &.w:after { content: "\25B6"; margin: -4px 0 0 -1px; top: 50%; left: 100%; } } g.type-TK>rect { fill: $color_bright_turquoise_approx; } .graph-toolbar { background-color: $white; margin-bottom: 10px; padding: 10px; } .legends { >i { >span { font-family: 'Source Sans Pro'; } } } .lineage-box { position: absolute; height: 100%; width: 100%; overflow: hidden; } .graph-button-group { &>div { display: inline-block; } .zoom-button-group {} } .box-panel { position: absolute; top: 37px; border: 1px solid #ccc; width: 250px; max-height: 99%; overflow: auto; transition: all 0.3s ease; right: -273px; background-color: $white; z-index: 999; box-shadow: 1px 19px 22px -17px; border-radius: 10px; max-height: 88%; &.slide-from-left { left: -273px; right: 0px; &.size-lg { left: -373px; } } &.size-lg { width: 350px; } &.show-box-panel { right: 0px !important; &.slide-from-left { left: 0; } } .entity-list { overflow: auto; list-style-type: decimal; list-style-position: outside; padding-left: 15px; } ul>li { word-wrap: break-word; margin-bottom: 5px; text-align: left; &.deleted-relation { a { color: #BB5838 !important; } .deleteBtn { padding: 2px 8px !important; margin: 5px 5px !important; } } } .header { background: $color_havelock_blue_approx; color: white; position: relative; text-align: center; width: 100%; position: sticky; height: 37px; top: 0; z-index: 999; >h4 { padding: 0px 36px 0px 10px; word-break: break-all; } .btn-close { position: absolute; right: 0px; top: 0px; font-size: 18px; &:hover { color: $white; } } } .body { padding: 10px; width: 100%; position: relative; height: calc(100% - 37px); overflow: hidden; } } .btn-gray { border: 1px solid #686868; color: $dark_gray; background: white; &:hover { border: 1px solid #686868; color: $dark_gray !important; background-color: white !important; } } span#zoom_in { border-bottom: 1px solid #625555; } .depth-container { //display: inline-block; //margin-top: 3px; .inline { display: inline-block; } } .resizeGraph { position: relative; width: 100%; height: 64vh; overflow: hidden !important; &.auto-height { height: auto !important; } } .active.fullscreen-mode { position: fixed; height: 100% !important; top: 0; bottom: 0; left: 0; width: 100%; right: 0; padding: 0 !important; z-index: 999; overflow: hidden !important; .resizeGraph { position: fixed; height: 100% !important; .ui-resizable-handle { display: none; } } .lineage-box { padding: 10px !important; } .box-panel { margin: 10px !important; } } @keyframes zoominoutsinglefeatured { 0% { transform: scale(1, 1); } 50% { transform: scale(1.2, 1.2); } 100% { transform: scale(1, 1); } } .wobble { animation: zoominoutsinglefeatured 1s 5; } .hover { g.node { opacity: 0.1 !important; } g.edgePath { opacity: 0 !important; } g.node.hover-active, g.edgePath.hover-active-node { opacity: 1 !important; } }