onos.css
1.87 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
/*
ONOS CSS file
@author Simon Hunt
*/
body, html {
height: 100%;
}
/*
* Classes
*/
span.title {
color: #37b;
font-size: 14pt;
font-style: italic;
vertical-align: 10px;
}
span.radio {
color: darkslateblue;
font-size: 10pt;
}
span.right {
float: right;
}
/*
* === DEBUGGING ======
*/
svg {
/*border: 1px dashed red;*/
}
/*
* Network Graph elements ======================================
*/
svg .link {
fill: none;
stroke: #666;
stroke-width: 1.5px;
opacity: .7;
/*marker-end: url(#end);*/
transition: opacity 250ms;
-webkit-transition: opacity 250ms;
-moz-transition: opacity 250ms;
}
marker#end {
fill: #666;
stroke: #666;
stroke-width: 1.5px;
}
svg .node rect {
stroke-width: 1.5px;
transition: opacity 250ms;
-webkit-transition: opacity 250ms;
-moz-transition: opacity 250ms;
}
svg .node.device.roadm rect {
fill: #229;
}
svg .node.device.switch rect {
fill: #55f;
}
svg .node.host rect {
fill: #787;
}
svg .node text {
fill: white;
font: 10px sans-serif;
pointer-events: none;
}
svg .node.selected rect {
filter: url(#blue-glow);
}
svg .link.inactive,
svg .node.inactive rect,
svg .node.inactive text,
svg .node.inactive image {
opacity: .2;
}
svg .node.inactive.selected rect,
svg .node.inactive.selected text,
svg .node.inactive.selected image {
opacity: .6;
}
svg .legend {
position: fixed;
}
svg .legend .category rect {
stroke-width: 1px;
}
svg .legend .category text {
fill: #000;
font: 10px sans-serif;
pointer-events: none;
}
/*
* =============================================================
*/
/*
* Specific structural elements
*/
#frame {
width: 100%;
height: 100%;
background-color: #fff;
}
#mast {
height: 36px;
padding: 4px;
background-color: #ccc;
vertical-align: baseline;
}