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