/* * 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; } rect { stroke: $color_mountain_mist_approx; fill: $white; stroke-width: 1.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; &.nodeImage { &.green:hover { stroke: #8bc152; } &.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: #8bc152; } &.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; } .zoomButtonGroup { background-color: $white; position: absolute; top: 4px; right: 5px; } .graph-toolbar { background-color: $white; margin-bottom: 10px; padding: 10px; } .legends { >i { >span { font-family: 'Source Sans Pro'; } } } .lineage-box { .lineage-edge-details { position: absolute; left: 0; overflow: auto; top: 0px; max-height: 100%; box-shadow: 4px 13px 14px -12px; background: #e7e7e7; transform: scaleX(0); width: 200px; transition: transform 0.3s ease-in; &.open { transform: scaleX(1); } .title { background: black; color: white; padding: 10px; padding-left: 17px; margin-top: 0; font-size: 14px; .navigation-font { font-family: sans-serif; padding: 0px 5px; color: #fb4200; } } .close-details { position: absolute; top: 0; color: white; left: 0; height: 21px; width: 21px; cursor: pointer; font-size: 16px; } .propagation-list { overflow: auto; list-style-type: none; list-style-position: outside; padding-left: 30px; } .overlay { position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: #d2d2d2b8; z-index: 99; } ul>li { word-wrap: break-word; margin-bottom: 5px; text-align: left; } } }