web/gui/src/main/webapp/app/view/topo/topo.css

/*
 * 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 --- */

.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;
    /*stroke: #88b;*/
}
.dark #ov-topo svg #topo-map {
    stroke: #444;
}


/* --- Topo Summary Panel --- */

#topo-p-summary {
    /* Base css from panel.css */
    
}

#topo-p-summary svg {
    display: inline-block;
    width: 42px;
    height: 42px;
}

#topo-p-summary h2 {
    position: absolute;
    margin: 0 4px;
    top: 20px;
    left: 50px;
}
.light #topo-p-summary h2 {
    color: black;
}
.dark #topo-p-summary h2 {
    color: #ddd;
}

#topo-p-summary h3 {
    margin: 0 4px;
    top: 20px;
    left: 50px;
}
.light #topo-p-summary h3 {
    color: black;
}
.dark #topo-p-summary h3 {
    color: #ddd;
}

#topo-p-summary p, table {
    margin: 4px 4px;
}

#topo-p-summary td.label {
    font-style: italic;
    padding-right: 12px;
    /* works for both light and dark themes ... */
    color: #777;
}

#topo-p-summary td.value {
}

#topo-p-summary hr {
    height: 1px;
    border: 0;
}
.light #topo-p-summary hr {
    background-color: #ccc;
    color: #ccc;
}
.dark #topo-p-summary hr {
    background-color: #888;
    color: #888;
}


/* --- Topo Detail Panel --- */

/* TODO: add CSS rules */


/* --- 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;
}
#topo-p-instance .onosInst.mastership.affinity svg rect {
    /* TODO: add blue glow */
    /*filter: url(#blue-glow);*/
}