summaryrefslogtreecommitdiffstats
path: root/framework/src/onos/web/gui/src/main/webapp/app/view/topo/topo.css
diff options
context:
space:
mode:
Diffstat (limited to 'framework/src/onos/web/gui/src/main/webapp/app/view/topo/topo.css')
-rw-r--r--framework/src/onos/web/gui/src/main/webapp/app/view/topo/topo.css780
1 files changed, 0 insertions, 780 deletions
diff --git a/framework/src/onos/web/gui/src/main/webapp/app/view/topo/topo.css b/framework/src/onos/web/gui/src/main/webapp/app/view/topo/topo.css
deleted file mode 100644
index 0319b9b7..00000000
--- a/framework/src/onos/web/gui/src/main/webapp/app/view/topo/topo.css
+++ /dev/null
@@ -1,780 +0,0 @@
-/*
- * Copyright 2014,2015 Open Networking Laboratory
- *
- * Licensed 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.
- */
-
-/*
- ONOS GUI -- Topology View -- CSS file
- */
-
-/* --- Base SVG Layer --- */
-
-#ov-topo svg {
- /* prevents the little cut/copy/paste square that would appear on iPad */
- -webkit-user-select: none;
-}
-.light #ov-topo svg {
- background-color: #fff;
-}
-.dark #ov-topo svg {
- background-color: #2b2b2b;
-}
-
-
-/* --- "No Devices" Layer --- */
-
-#ov-topo svg #topo-noDevsLayer {
- visibility: hidden;
-}
-
-.light #ov-topo svg .noDevsBird {
- fill: #ecd;
-}
-.dark #ov-topo svg .noDevsBird {
- fill: #683434;
-}
-
-#ov-topo svg #topo-noDevsLayer text {
- font-size: 60pt;
- font-style: italic;
-}
-.light #ov-topo svg #topo-noDevsLayer text {
- fill: #dde;
-}
-.dark #ov-topo svg #topo-noDevsLayer text {
- fill: #3b3b4f;
-}
-
-
-/* --- Topo Map --- */
-
-#ov-topo svg #topo-map {
- stroke-width: 2px;
- fill: transparent;
-}
-
-.light #ov-topo svg #topo-map {
- stroke: #ddd;
-}
-.dark #ov-topo svg #topo-map {
- stroke: #444;
-}
-
-
-/* --- Topo Summary Panel --- */
-
-#topo-p-summary {
- /* Base css from panel.css */
-}
-
-/* --- Topo Detail Panel --- */
-
-#topo-p-detail {
- /* Base css from panel.css */
- top: 338px;
-}
-html[data-platform='iPad'] #topo-p-detail {
- top: 354px;
-}
-
-#topo-p-detail .actionBtns .actionBtn {
- display: inline-block;
-}
-#topo-p-detail .actionBtns .actionBtn svg {
- width: 30px;
- height: 30px;
-}
-
-/* --- Topo Dialog Panel --- */
-
-#topo-p-dialog .dialog-button {
- display: inline-block;
- cursor: pointer;
- height: 20px;
- padding: 2px 6px;
- margin: 4px;
- float: right;
-}
-
-.light #topo-p-dialog .dialog-button {
- background-color: #fec;
-}
-.dark #topo-p-dialog .dialog-button {
- background-color: #369;
-}
-
-/* --- general topo-panel styling --- */
-
-.topo-p div.header div.icon {
- vertical-align: middle;
- display: inline-block;
-}
-.topo-p div.body {
- overflow-y: scroll;
-}
-
-.topo-p div.body::-webkit-scrollbar {
- display: none;
-}
-
-.topo-p svg {
- display: inline-block;
- width: 42px;
- height: 42px;
-}
-
-.light .topo-p svg .glyph {
- fill: #222;
-}
-
-.dark .topo-p svg .glyph.overlay {
- fill: #222;
-}
-
-.dark .topo-p svg .glyph {
- fill: #ddd;
-}
-.light .topo-p svg .glyph.overlay {
- fill: #fff;
-}
-
-
-.topo-p h2 {
- padding: 0 4px;
- margin: 0;
- word-wrap: break-word;
- display: inline-block;
- width: 210px;
- vertical-align: middle;
-}
-.light .topo-p h2 {
- color: black;
-}
-.dark .topo-p h2 {
- color: #ddd;
-}
-
-.topo-p h3 {
- padding: 0 4px;
- margin: 0;
- word-wrap: break-word;
- top: 20px;
- left: 50px;
-}
-.light .topo-p h3 {
- color: black;
-}
-.dark .topo-p h3 {
- color: #ddd;
-}
-
-.topo-p p, table {
- padding: 4px;
- margin: 0;
-}
-
-.topo-p td {
- word-wrap: break-word;
-}
-.topo-p td.label {
- font-style: italic;
- padding-right: 12px;
- /* works for both light and dark themes ... */
- color: #777;
-}
-.topo-p td.value {
-}
-
-.topo-p hr {
- height: 1px;
- border: 0;
-}
-.light .topo-p hr {
- background-color: #ccc;
- color: #ccc;
-}
-.dark .topo-p hr {
- background-color: #888;
- color: #888;
-}
-
-/* --- Topo Instance Panel --- */
-
-#topo-p-instance {
- height: 100px;
-}
-
-#topo-p-instance div.onosInst {
- display: inline-block;
- width: 170px;
- height: 85px;
- cursor: pointer;
-}
-
-#topo-p-instance svg rect {
- stroke-width: 3.5;
-}
-#topo-p-instance .online svg rect {
- opacity: 1;
-}
-.light #topo-p-instance svg rect {
- fill: #ccc;
- stroke: #aaa;
-}
-.light #topo-p-instance .online svg rect {
- fill: #9cf;
- stroke: #555;
-}
-.dark #topo-p-instance svg rect {
- fill: #666;
- stroke: #222;
-}
-.dark #topo-p-instance .online svg rect {
- fill: #9cf;
- stroke: #999;
-}
-
-
-#topo-p-instance svg .glyph {
- fill: #888;
- fill-rule: evenodd;
-}
-#topo-p-instance .online svg .glyph {
- fill: #000;
-}
-
-#topo-p-instance svg .badgeIcon {
- fill-rule: evenodd;
- opacity: 0.4;
-}
-.light #topo-p-instance svg .badgeIcon {
- fill: #777;
-}
-.dark #topo-p-instance svg .badgeIcon {
- fill: #555;
-}
-
-#topo-p-instance .online svg .badgeIcon {
- opacity: 1.0;
-}
-.light #topo-p-instance .online svg .badgeIcon {
- fill: #fff;
-}
-.dark #topo-p-instance .online svg .badgeIcon {
- fill: #fff;
-}
-
-#topo-p-instance svg text {
- text-anchor: middle;
- opacity: 0.3;
-}
-#topo-p-instance .online svg text {
- opacity: 1.0;
-}
-.light #topo-p-instance svg text {
- fill: #444;
-}
-.light #topo-p-instance .online svg text {
- fill: #eee;
-}
-.dark #topo-p-instance svg text {
- fill: #aaa;
-}
-.dark #topo-p-instance .online svg text {
- fill: #ccc;
-}
-
-#topo-p-instance svg text.instTitle {
- font-size: 11pt;
- font-weight: bold;
-}
-#topo-p-instance svg text.instLabel {
- font-size: 9pt;
- font-style: italic;
-}
-
-#topo-p-instance .onosInst.mastership {
- opacity: 0.3;
-}
-#topo-p-instance .onosInst.mastership.affinity {
- opacity: 1.0;
-}
-.light #topo-p-instance .onosInst.mastership.affinity svg rect {
- filter: url(#blue-glow);
-}
-.dark #topo-p-instance .onosInst.mastership.affinity svg rect {
- filter: url(#yellow-glow);
-}
-.light.firefox #topo-p-instance .onosInst.mastership.affinity svg rect {
- filter: url("data:image/svg+xml;utf8, <svg xmlns = \'http://www.w3.org/2000/svg\'><filter x=\"-50%\" y=\"-50%\" width=\"200%\" height=\"200%\" id=\"blue-glow\"><feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.7 0 0 0 1 0 \"></feColorMatrix><feGaussianBlur stdDeviation=\"3\" result=\"coloredBlur\"></feGaussianBlur><feMerge><feMergeNode in=\"coloredBlur\"></feMergeNode><feMergeNode in=\"SourceGraphic\"></feMergeNode></feMerge></filter></svg>#blue-glow");
-}
-.dark.firefox #topo-p-instance .onosInst.mastership.affinity svg rect {
- filter: url("data:image/svg+xml;utf8, <svg xmlns = \'http://www.w3.org/2000/svg\'><filter x=\"-50%\" y=\"-50%\" width=\"200%\" height=\"200%\" id=\"yellow-glow\"><feColorMatrix type=\"matrix\" values=\"0 0 0 0 1.0 0 0 0 0 1.0 0 0 0 0 0.3 0 0 0 1 0 \"></feColorMatrix><feGaussianBlur stdDeviation=\"3\" result=\"coloredBlur\"></feGaussianBlur><feMerge><feMergeNode in=\"coloredBlur\"></feMergeNode><feMergeNode in=\"SourceGraphic\"></feMergeNode></feMerge></filter></svg>#yellow-glow");
-}
-
-
-/* --- Toolbar --- */
-
-#toolbar-topo-tbar .tbar-row.right {
- width: 100%;
-}
-
-#toolbar-topo-tbar .tbar-row-text {
- height: 21px;
- text-align: right;
- padding: 8px 60px 0 0;
- font-style: italic;
-}
-
-
-/* --- Topo Nodes --- */
-
-#ov-topo svg .suppressed {
- opacity: 0.5 !important;
-}
-
-#ov-topo svg .suppressedmax {
- opacity: 0.2 !important;
-}
-
-#ov-topo svg .node {
- cursor: pointer;
-}
-
-.light #ov-topo svg .node.selected rect,
-.light #ov-topo svg .node.selected circle {
- fill: #f90;
- filter: url(#blue-glow);
-}
-.dark #ov-topo svg .node.selected rect,
-.dark #ov-topo svg .node.selected circle {
- fill: #f90;
- filter: url(#yellow-glow);
-}
-.light.firefox #ov-topo svg .node.selected rect,
-.light.firefox #ov-topo svg .node.selected circle {
- filter: url("data:image/svg+xml;utf8, <svg xmlns = \'http://www.w3.org/2000/svg\'><filter x=\"-50%\" y=\"-50%\" width=\"200%\" height=\"200%\" id=\"blue-glow\"><feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.7 0 0 0 1 0 \"></feColorMatrix><feGaussianBlur stdDeviation=\"3\" result=\"coloredBlur\"></feGaussianBlur><feMerge><feMergeNode in=\"coloredBlur\"></feMergeNode><feMergeNode in=\"SourceGraphic\"></feMergeNode></feMerge></filter></svg>#blue-glow");
-}
-.dark.firefox #ov-topo svg .node.selected rect,
-.dark.firefox #ov-topo svg .node.selected circle {
- filter: url("data:image/svg+xml;utf8, <svg xmlns = \'http://www.w3.org/2000/svg\'><filter x=\"-50%\" y=\"-50%\" width=\"200%\" height=\"200%\" id=\"yellow-glow\"><feColorMatrix type=\"matrix\" values=\"0 0 0 0 1.0 0 0 0 0 1.0 0 0 0 0 0.3 0 0 0 1 0 \"></feColorMatrix><feGaussianBlur stdDeviation=\"3\" result=\"coloredBlur\"></feGaussianBlur><feMerge><feMergeNode in=\"coloredBlur\"></feMergeNode><feMergeNode in=\"SourceGraphic\"></feMergeNode></feMerge></filter></svg>#yellow-glow");
-}
-
-#ov-topo svg .node text {
- pointer-events: none;
-}
-
-/* Device Nodes */
-
-#ov-topo svg .node.device {
-}
-
-#ov-topo svg .node.device rect {
- stroke-width: 1.5;
-}
-
-#ov-topo svg .node.device.fixed rect {
- stroke-width: 1.5;
-}
-.light #ov-topo svg .node.device.fixed rect {
- stroke: #aaa;
-}
-.dark #ov-topo svg .node.device.fixed rect {
- stroke: #999;
-}
-
-/* note: device is offline without the 'online' class */
-.light #ov-topo svg .node.device {
- fill: #777;
-}
-.dark #ov-topo svg .node.device {
- fill: #555;
-}
-
-.light #ov-topo svg .node.device rect {
- stroke: #666;
-}
-.light #ov-topo svg .node.device rect {
- stroke: #999;
-}
-
-.light #ov-topo svg .node.device.online {
- fill: #6e7fa3;
-}
-.dark #ov-topo svg .node.device.online {
- fill: #4E5C7F;
-}
-
-/* note: device is offline without the 'online' class */
-#ov-topo svg .node.device text {
- fill: #bbb;
- font: 10pt sans-serif;
-}
-
-#ov-topo svg .node.device.online text {
- fill: white;
-}
-
-#ov-topo svg .node.device .svgIcon rect {
- fill: #aaa;
-}
-#ov-topo svg .node.device .svgIcon use {
- fill: #777;
-}
-#ov-topo svg .node.device.selected .svgIcon rect {
- fill: #f90;
-}
-#ov-topo svg .node.device.online .svgIcon rect {
- fill: #ccc;
-}
-#ov-topo svg .node.device.online .svgIcon use {
- fill: #000;
-}
-#ov-topo svg .node.device.online.selected .svgIcon rect {
- fill: #f90;
-}
-
-/* Badges */
-/* (... works for both light and dark themes...) */
-#ov-topo svg .node .badge circle {
- stroke: #aaa;
-}
-
-#ov-topo svg .node .badge.badgeInfo circle {
- fill: #99d;
-}
-
-#ov-topo svg .node .badge.badgeWarn circle {
- fill: #da2;
-}
-
-#ov-topo svg .node .badge.badgeError circle {
- fill: #e44;
-}
-
-#ov-topo svg .node .badge use {
- fill: white !important;
-}
-
-#ov-topo svg .node .badge.badgeInfo use {
- fill: #448;
-}
-
-#ov-topo svg .node .badge text {
- fill: white !important;
-}
-
-#ov-topo svg .node .badge.badgeInfo text {
- fill: #448;
-}
-
-/* Host Nodes */
-
-#ov-topo svg .node.host {
-}
-
-#ov-topo svg .node.host text {
- stroke: none;
- font: 9pt sans-serif;
-}
-.light #ov-topo svg .node.host text {
- fill: #846;
-}
-.dark #ov-topo svg .node.host text {
- fill: #BB809D;
-}
-
-.light svg .node.host circle {
- stroke: #000;
- fill: #edb;
-}
-.dark svg .node.host circle {
- stroke: #eee;
- fill: #B2A180;
-}
-
-.light svg .node.host .svgIcon {
- fill: #444;
-}
-.dark svg .node.host .svgIcon {
- fill: #222;
-}
-
-/* --- Topo Links --- */
-
-#ov-topo svg .link {
- opacity: .9;
-}
-
-#ov-topo svg .link.selected,
-#ov-topo svg .link.enhanced {
- stroke-width: 4.5px;
-}
-.light #ov-topo svg .link.selected,
-.light #ov-topo svg .link.enhanced {
- filter: url(#blue-glow);
-}
-.dark #ov-topo svg .link.selected,
-.dark #ov-topo svg .link.enhanced {
- filter: url(#yellow-glow);
-}
-.light.firefox #ov-topo svg .link.selected,
-.light.firefox #ov-topo svg .link.enhanced {
- filter: url("data:image/svg+xml;utf8, <svg xmlns = \'http://www.w3.org/2000/svg\'><filter x=\"-50%\" y=\"-50%\" width=\"200%\" height=\"200%\" id=\"blue-glow\"><feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.7 0 0 0 1 0 \"></feColorMatrix><feGaussianBlur stdDeviation=\"3\" result=\"coloredBlur\"></feGaussianBlur><feMerge><feMergeNode in=\"coloredBlur\"></feMergeNode><feMergeNode in=\"SourceGraphic\"></feMergeNode></feMerge></filter></svg>#blue-glow");
-}
-.dark.firefox #ov-topo svg .link.selected,
-.dark.firefox #ov-topo svg .link.enhanced {
- filter: url("data:image/svg+xml;utf8, <svg xmlns = \'http://www.w3.org/2000/svg\'><filter x=\"-50%\" y=\"-50%\" width=\"200%\" height=\"200%\" id=\"yellow-glow\"><feColorMatrix type=\"matrix\" values=\"0 0 0 0 1.0 0 0 0 0 1.0 0 0 0 0 0.3 0 0 0 1 0 \"></feColorMatrix><feGaussianBlur stdDeviation=\"3\" result=\"coloredBlur\"></feGaussianBlur><feMerge><feMergeNode in=\"coloredBlur\"></feMergeNode><feMergeNode in=\"SourceGraphic\"></feMergeNode></feMerge></filter></svg>#yellow-glow");
-
-}
-
-#ov-topo svg .link.inactive {
- opacity: .5;
- stroke-dasharray: 8 4;
-}
-
-#ov-topo svg .link.secondary {
- stroke-width: 3px;
-}
-.light #ov-topo svg .link.secondary {
- stroke: rgba(0,153,51,0.5);
-}
-.dark #ov-topo svg .link.secondary {
- stroke: rgba(121,231,158,0.5);
-}
-
-/* Port traffic color visualization for Kbps, Mbps, and Gbps */
-
-.light #ov-topo svg .link.secondary.port-traffic-Kbps {
- stroke: rgb(0,153,51);
- stroke-width: 5.0;
-}
-.dark #ov-topo svg .link.secondary.port-traffic-Kbps {
- stroke: rgb(98, 153, 118);
- stroke-width: 5.0;
-}
-
-.light #ov-topo svg .link.secondary.port-traffic-Mbps {
- stroke: rgb(128,145,27);
- stroke-width: 6.5;
-}
-.dark #ov-topo svg .link.secondary.port-traffic-Mbps {
- stroke: rgb(91, 109, 54);
- stroke-width: 6.5;
-}
-
-.light #ov-topo svg .link.secondary.port-traffic-Gbps {
- stroke: rgb(255, 137, 3);
- stroke-width: 8.0;
-}
-.dark #ov-topo svg .link.secondary.port-traffic-Gbps {
- stroke: rgb(174, 119, 55);
- stroke-width: 8.0;
-}
-
-.light #ov-topo svg .link.secondary.port-traffic-Gbps-choked {
- stroke: rgb(183, 30, 21);
- stroke-width: 8.0;
-}
-.dark #ov-topo svg .link.secondary.port-traffic-Gbps-choked {
- stroke: rgb(127, 40, 39);
- stroke-width: 8.0;
-}
-
-
-#ov-topo svg .link.animated {
- stroke-dasharray: 8 5;
- animation: ants 5s infinite linear;
- /* below line will be added via Javascript based on path */
- /*animation-direction: reverse;*/
-}
-@keyframes ants {
- from {
- stroke-dashoffset: 0;
- }
- to {
- stroke-dashoffset: 400;
- }
-}
-
-#ov-topo svg .link.primary {
- stroke-width: 4px;
-}
-.light #ov-topo svg .link.primary {
- stroke: #ffA300;
-}
-.dark #ov-topo svg .link.primary {
- stroke: #D58E0F;
-}
-
-#ov-topo svg .link.secondary.optical {
- stroke-width: 4px;
-}
-.light #ov-topo svg .link.secondary.optical {
- stroke: rgba(128,64,255,0.5);
-}
-.dark #ov-topo svg .link.secondary.optical {
- stroke: rgba(164,139,215,0.5);
-}
-
-#ov-topo svg .link.primary.optical {
- stroke-width: 6px;
-}
-.light #ov-topo svg .link.primary.optical {
- stroke: #74f;
-}
-.dark #ov-topo svg .link.primary.optical {
- stroke: #7352CD;
-}
-
-/* Link Labels */
-
-#ov-topo svg .linkLabel rect {
- stroke: none;
-}
-.light #ov-topo svg .linkLabel rect {
- fill: #eee;
-}
-.dark #ov-topo svg .linkLabel rect {
- fill: #555;
-}
-
-#ov-topo svg .linkLabel text {
- text-anchor: middle;
- stroke-width: 0.1;
- font-size: 9pt;
-}
-.light #ov-topo svg .linkLabel text {
- fill: #444;
-}
-.dark #ov-topo svg .linkLabel text {
- fill: #eee;
-}
-
-/* Port Labels */
-
-#ov-topo svg .portLabel rect {
- stroke: none;
-}
-.light #ov-topo svg .portLabel rect {
- fill: #eee;
-}
-.dark #ov-topo svg .portLabel rect {
- fill: #222;
-}
-
-#ov-topo svg .portLabel text {
- text-anchor: middle;
- stroke-width: 0.1;
- font-size: 11pt;
-}
-.light #ov-topo svg .portLabel text {
- fill: #444;
-}
-.dark #ov-topo svg .portLabel text {
- fill: #eee;
-}
-
-/* Number of Links Labels */
-#ov-topo line.numLinkHash {
- stroke-width: 3;
-}
-
-#ov-topo text.numLinkText {
- font-size: 15pt;
-}
-
-#ov-topo text.numLinkText {
- text-anchor: middle;
-}
-
-.light #ov-topo text.numLinkText {
- fill: #444;
-}
-.dark #ov-topo text.numLinkText {
- fill: #eee;
-}
-
-/* ------------------------------------------------- */
-/* Sprite Layer */
-
-#ov-topo svg #topo-sprites use {
- stroke-width: 2;
-}
-#ov-topo svg #topo-sprites text {
- text-anchor: middle;
- font-size: 20pt;
- font-style: italic;
-}
-
-.light #ov-topo svg #topo-sprites .gold1 use {
- stroke: #fda;
- fill: none;
-}
-.dark #ov-topo svg #topo-sprites .gold1 use {
- stroke: #541;
- fill: none;
-}
-.light #ov-topo svg #topo-sprites .gold1 text {
- fill: #eda;
-}
-.dark #ov-topo svg #topo-sprites .gold1 text {
- fill: #543;
-}
-
-.light #ov-topo svg #topo-sprites .blue1 use {
- stroke: #bbd;
- fill: none;
-}
-.dark #ov-topo svg #topo-sprites .blue1 use {
- stroke: #445;
- fill: none;
-}
-.light #ov-topo svg #topo-sprites .blue1 text {
- fill: #cce;
-}
-.dark #ov-topo svg #topo-sprites .blue1 text {
- fill: #446;
-}
-
-.light #ov-topo svg #topo-sprites .gray1 use {
- stroke: #ccc;
- fill: none;
-}
-.dark #ov-topo svg #topo-sprites .gray1 use {
- stroke: #333;
- fill: none;
-}
-.light #ov-topo svg #topo-sprites .gray1 text {
- fill: #ddd;
-}
-.dark #ov-topo svg #topo-sprites .gray1 text {
- fill: #444;
-}
-
-/* fills */
-.light #ov-topo svg #topo-sprites use.fill-gray2 {
- fill: #eee;
-}
-.dark #ov-topo svg #topo-sprites use.fill-gray2 {
- fill: #444;
-}
-
-.light #ov-topo svg #topo-sprites use.fill-blue2 {
- fill: #bce;
-}
-.dark #ov-topo svg #topo-sprites use.fill-blue2 {
- fill: #447;
-}
-