diff options
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.css | 780 |
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; -} - |