blob: e092da04cd676c4362c4c20987f0221fba3f1458 [file] [log] [blame]
Simon Hunt195cb382014-11-03 17:50:51 -08001/*
2 * Copyright 2014 Open Networking Laboratory
3 *
4 * Licensed under the Apache License, Version 2.0 (the "License");
5 * you may not use this file except in compliance with the License.
6 * You may obtain a copy of the License at
7 *
8 * http://www.apache.org/licenses/LICENSE-2.0
9 *
10 * Unless required by applicable law or agreed to in writing, software
11 * distributed under the License is distributed on an "AS IS" BASIS,
12 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 * See the License for the specific language governing permissions and
14 * limitations under the License.
15 */
16
17/*
18 ONOS GUI -- Base Framework -- CSS file
19
20 @author Simon Hunt
21 */
22
23html, body {
24 height: 100%;
25}
26
Simon Hunt25248912014-11-04 11:25:48 -080027div.onosView {
28 display: none;
29}
30
31div.onosView.currentView {
32 display: block;
33}
34
Thomas Vachuska65368e32014-11-08 16:10:20 -080035#alerts {
Simon Hunt1a9eff92014-11-07 11:06:34 -080036 display: none;
37 position: absolute;
38 z-index: 2000;
39 opacity: 0.65;
40 background-color: #006;
41 color: white;
42 top: 80px;
43 left: 40px;
44 padding: 3px 6px;
45 box-shadow: 4px 6px 12px #777;
46}
47
Thomas Vachuska65368e32014-11-08 16:10:20 -080048#alerts pre {
Simon Hunt1a9eff92014-11-07 11:06:34 -080049 margin: 0.2em 6px;
50}
51
Thomas Vachuska65368e32014-11-08 16:10:20 -080052#alerts span.close {
Simon Hunt1a9eff92014-11-07 11:06:34 -080053 color: #6af;
54 float: right;
55 right: 2px;
56 cursor: pointer;
57}
58
Thomas Vachuska65368e32014-11-08 16:10:20 -080059#alerts span.close:hover {
Simon Hunt1a9eff92014-11-07 11:06:34 -080060 color: #fff;
61}
62
Thomas Vachuska65368e32014-11-08 16:10:20 -080063#alerts p.footnote {
64 text-align: right;
65 font-size: 8pt;
66 margin: 8px 0 0 0;
67 color: #66d;
68}
69
Simon Hunt25248912014-11-04 11:25:48 -080070/*
71 * ==============================================================
72 * END OF NEW ONOS.JS file
73 * ==============================================================
74 */
Simon Hunt195cb382014-11-03 17:50:51 -080075
76/*
77 * === DEBUGGING ======
78 */
79svg {
80 /*border: 1px dashed red;*/
81}
82
83svg #bg {
84 opacity: 0.5;
85}
86
87
88/*
89 * Network Graph elements ======================================
90 */
91
Simon Hunt195cb382014-11-03 17:50:51 -080092
93svg g.portLayer rect.port {
94 fill: #ccc;
95}
96
97svg g.portLayer text {
98 font: 8pt sans-serif;
99 pointer-events: none;
100}
101
Simon Hunt195cb382014-11-03 17:50:51 -0800102
Simon Hunt195cb382014-11-03 17:50:51 -0800103
Simon Hunt195cb382014-11-03 17:50:51 -0800104/* for debugging */
105svg .node circle.debug {
106 fill: white;
107 stroke: red;
108}
109svg .node rect.debug {
110 fill: yellow;
111 stroke: red;
112 opacity: 0.35;
113}
114
115
Simon Hunt195cb382014-11-03 17:50:51 -0800116
117svg .link.inactive,
118svg .port.inactive,
119svg .portText.inactive,
120svg .node.inactive rect,
121svg .node.inactive circle,
122svg .node.inactive text,
123svg .node.inactive image {
124 opacity: .1;
125}
126
127svg .node.inactive.selected rect,
128svg .node.inactive.selected text,
129svg .node.inactive.selected image {
130 opacity: .6;
131}
132
133/*
134 * =============================================================
135 */
136
137/*
138 * Specific structural elements
139 */
140
141/* This is to ensure that the body does not expand to account for the
142 flyout details pane, that is positioned "off screen".
143 */
144body {
145 overflow: hidden;
146}
147
148
149#frame {
150 width: 100%;
151 height: 100%;
152 background-color: #fff;
153}
154
155#flyout {
156 position: absolute;
157 z-index: 100;
158 display: block;
159 top: 10%;
160 width: 280px;
161 right: -300px;
162 opacity: 0;
163 background-color: rgba(255,255,255,0.8);
164
165 padding: 10px;
166 color: black;
167 font-size: 10pt;
168 box-shadow: 2px 2px 16px #777;
169}
170
171#flyout h2 {
172 margin: 8px 4px;
173 color: black;
174 vertical-align: middle;
175}
176
177#flyout h2 img {
178 height: 32px;
179 padding-right: 8px;
180 vertical-align: middle;
181}
182
183#flyout p, table {
184 margin: 4px 4px;
185}
186
187#flyout td.label {
188 font-style: italic;
189 color: #777;
190 padding-right: 12px;
191}
192
193#flyout td.value {
194
195}
196
197#flyout hr {
198 height: 1px;
199 color: #ccc;
200 background-color: #ccc;
201 border: 0;
202}
203