Simon Hunt | 0b05d4a | 2014-10-21 21:50:15 -0700 | [diff] [blame] | 1 | /* |
Thomas Vachuska | 4f1a60c | 2014-10-28 13:39:07 -0700 | [diff] [blame^] | 2 | * Copyright 2014 Open Networking Laboratory |
Thomas Vachuska | 781d18b | 2014-10-27 10:31:25 -0700 | [diff] [blame] | 3 | * |
Thomas Vachuska | 4f1a60c | 2014-10-28 13:39:07 -0700 | [diff] [blame^] | 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 |
Thomas Vachuska | 781d18b | 2014-10-27 10:31:25 -0700 | [diff] [blame] | 7 | * |
Thomas Vachuska | 4f1a60c | 2014-10-28 13:39:07 -0700 | [diff] [blame^] | 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. |
Thomas Vachuska | 781d18b | 2014-10-27 10:31:25 -0700 | [diff] [blame] | 15 | */ |
| 16 | |
| 17 | /* |
Simon Hunt | 0b05d4a | 2014-10-21 21:50:15 -0700 | [diff] [blame] | 18 | ONOS CSS file |
| 19 | |
| 20 | @author Simon Hunt |
| 21 | */ |
| 22 | |
| 23 | body, html { |
| 24 | height: 100%; |
| 25 | } |
| 26 | |
| 27 | /* |
| 28 | * Classes |
| 29 | */ |
| 30 | |
| 31 | span.title { |
Simon Hunt | 19cb098 | 2014-10-23 16:44:49 -0700 | [diff] [blame] | 32 | color: #37b; |
| 33 | font-size: 14pt; |
Simon Hunt | 0b05d4a | 2014-10-21 21:50:15 -0700 | [diff] [blame] | 34 | font-style: italic; |
Simon Hunt | 19cb098 | 2014-10-23 16:44:49 -0700 | [diff] [blame] | 35 | vertical-align: 10px; |
Simon Hunt | 0b05d4a | 2014-10-21 21:50:15 -0700 | [diff] [blame] | 36 | } |
| 37 | |
| 38 | span.radio { |
| 39 | color: darkslateblue; |
Simon Hunt | 19cb098 | 2014-10-23 16:44:49 -0700 | [diff] [blame] | 40 | font-size: 10pt; |
Simon Hunt | 0b05d4a | 2014-10-21 21:50:15 -0700 | [diff] [blame] | 41 | } |
| 42 | |
| 43 | span.right { |
| 44 | float: right; |
| 45 | } |
| 46 | |
| 47 | /* |
Simon Hunt | 5cd0e8f | 2014-10-27 16:18:40 -0700 | [diff] [blame] | 48 | * Radio Buttons |
| 49 | */ |
| 50 | |
| 51 | span.radio { |
| 52 | margin: 4px 0; |
| 53 | border: 1px dotted #222; |
| 54 | padding: 1px 6px; |
| 55 | color: #eee; |
| 56 | cursor: pointer; |
| 57 | } |
| 58 | |
| 59 | span.radio.active { |
| 60 | background-color: #bbb; |
| 61 | border: 1px solid #eee; |
| 62 | padding: 1px 6px; |
| 63 | color: #666; |
| 64 | font-weight: bold; |
| 65 | } |
| 66 | |
| 67 | /* |
Simon Hunt | 0b05d4a | 2014-10-21 21:50:15 -0700 | [diff] [blame] | 68 | * === DEBUGGING ====== |
| 69 | */ |
| 70 | svg { |
Simon Hunt | 3ab76a8 | 2014-10-22 13:07:32 -0700 | [diff] [blame] | 71 | /*border: 1px dashed red;*/ |
Simon Hunt | 0b05d4a | 2014-10-21 21:50:15 -0700 | [diff] [blame] | 72 | } |
| 73 | |
| 74 | |
| 75 | /* |
| 76 | * Network Graph elements ====================================== |
| 77 | */ |
| 78 | |
Simon Hunt | 2c9e0c2 | 2014-10-23 15:12:58 -0700 | [diff] [blame] | 79 | svg .link { |
Simon Hunt | 0b05d4a | 2014-10-21 21:50:15 -0700 | [diff] [blame] | 80 | fill: none; |
| 81 | stroke: #666; |
Simon Hunt | d35961b | 2014-10-28 08:49:48 -0700 | [diff] [blame] | 82 | stroke-width: 2.0px; |
Simon Hunt | 0b05d4a | 2014-10-21 21:50:15 -0700 | [diff] [blame] | 83 | opacity: .7; |
| 84 | /*marker-end: url(#end);*/ |
| 85 | |
| 86 | transition: opacity 250ms; |
| 87 | -webkit-transition: opacity 250ms; |
| 88 | -moz-transition: opacity 250ms; |
| 89 | } |
| 90 | |
Simon Hunt | 2c9e0c2 | 2014-10-23 15:12:58 -0700 | [diff] [blame] | 91 | svg .node rect { |
Simon Hunt | 0b05d4a | 2014-10-21 21:50:15 -0700 | [diff] [blame] | 92 | stroke-width: 1.5px; |
| 93 | |
| 94 | transition: opacity 250ms; |
| 95 | -webkit-transition: opacity 250ms; |
| 96 | -moz-transition: opacity 250ms; |
| 97 | } |
| 98 | |
Simon Hunt | 2c9e0c2 | 2014-10-23 15:12:58 -0700 | [diff] [blame] | 99 | svg .node.device.roadm rect { |
| 100 | fill: #229; |
| 101 | } |
Simon Hunt | 5cd0e8f | 2014-10-27 16:18:40 -0700 | [diff] [blame] | 102 | |
Simon Hunt | 2c9e0c2 | 2014-10-23 15:12:58 -0700 | [diff] [blame] | 103 | svg .node.device.switch rect { |
| 104 | fill: #55f; |
Simon Hunt | 3ab76a8 | 2014-10-22 13:07:32 -0700 | [diff] [blame] | 105 | } |
| 106 | |
Simon Hunt | 2c9e0c2 | 2014-10-23 15:12:58 -0700 | [diff] [blame] | 107 | svg .node.host rect { |
| 108 | fill: #787; |
Simon Hunt | 3ab76a8 | 2014-10-22 13:07:32 -0700 | [diff] [blame] | 109 | } |
| 110 | |
| 111 | svg .node text { |
| 112 | fill: white; |
Simon Hunt | 0b05d4a | 2014-10-21 21:50:15 -0700 | [diff] [blame] | 113 | font: 10px sans-serif; |
| 114 | pointer-events: none; |
| 115 | } |
| 116 | |
Simon Hunt | 5cd0e8f | 2014-10-27 16:18:40 -0700 | [diff] [blame] | 117 | /* for debugging */ |
| 118 | svg .node circle.debug { |
| 119 | fill: white; |
| 120 | stroke: red; |
| 121 | } |
| 122 | svg .node rect.debug { |
| 123 | fill: yellow; |
| 124 | stroke: red; |
| 125 | opacity: 0.35; |
| 126 | } |
| 127 | |
| 128 | |
Simon Hunt | 3ab76a8 | 2014-10-22 13:07:32 -0700 | [diff] [blame] | 129 | svg .node.selected rect { |
Simon Hunt | 0b05d4a | 2014-10-21 21:50:15 -0700 | [diff] [blame] | 130 | filter: url(#blue-glow); |
| 131 | } |
| 132 | |
Simon Hunt | 3ab76a8 | 2014-10-22 13:07:32 -0700 | [diff] [blame] | 133 | svg .link.inactive, |
| 134 | svg .node.inactive rect, |
Simon Hunt | 1c5f8b6 | 2014-10-22 14:43:01 -0700 | [diff] [blame] | 135 | svg .node.inactive text, |
| 136 | svg .node.inactive image { |
Simon Hunt | 0b05d4a | 2014-10-21 21:50:15 -0700 | [diff] [blame] | 137 | opacity: .2; |
| 138 | } |
| 139 | |
Simon Hunt | 3ab76a8 | 2014-10-22 13:07:32 -0700 | [diff] [blame] | 140 | svg .node.inactive.selected rect, |
Simon Hunt | 1c5f8b6 | 2014-10-22 14:43:01 -0700 | [diff] [blame] | 141 | svg .node.inactive.selected text, |
| 142 | svg .node.inactive.selected image { |
Simon Hunt | 0b05d4a | 2014-10-21 21:50:15 -0700 | [diff] [blame] | 143 | opacity: .6; |
| 144 | } |
| 145 | |
Simon Hunt | 5cd0e8f | 2014-10-27 16:18:40 -0700 | [diff] [blame] | 146 | /* |
| 147 | * === currently unused =============================================== |
| 148 | */ |
| 149 | |
| 150 | svg marker#end { |
| 151 | fill: #666; |
| 152 | stroke: #666; |
| 153 | stroke-width: 1.5px; |
| 154 | } |
| 155 | |
Simon Hunt | 3ab76a8 | 2014-10-22 13:07:32 -0700 | [diff] [blame] | 156 | svg .legend { |
Simon Hunt | 0b05d4a | 2014-10-21 21:50:15 -0700 | [diff] [blame] | 157 | position: fixed; |
| 158 | } |
| 159 | |
Simon Hunt | 3ab76a8 | 2014-10-22 13:07:32 -0700 | [diff] [blame] | 160 | svg .legend .category rect { |
Simon Hunt | 0b05d4a | 2014-10-21 21:50:15 -0700 | [diff] [blame] | 161 | stroke-width: 1px; |
| 162 | } |
| 163 | |
Simon Hunt | 3ab76a8 | 2014-10-22 13:07:32 -0700 | [diff] [blame] | 164 | svg .legend .category text { |
Simon Hunt | 0b05d4a | 2014-10-21 21:50:15 -0700 | [diff] [blame] | 165 | fill: #000; |
| 166 | font: 10px sans-serif; |
| 167 | pointer-events: none; |
| 168 | } |
| 169 | |
| 170 | /* |
| 171 | * ============================================================= |
| 172 | */ |
| 173 | |
| 174 | /* |
| 175 | * Specific structural elements |
| 176 | */ |
| 177 | |
| 178 | #frame { |
| 179 | width: 100%; |
| 180 | height: 100%; |
Simon Hunt | 2c9e0c2 | 2014-10-23 15:12:58 -0700 | [diff] [blame] | 181 | background-color: #fff; |
Simon Hunt | 0b05d4a | 2014-10-21 21:50:15 -0700 | [diff] [blame] | 182 | } |
| 183 | |
| 184 | #mast { |
Simon Hunt | 19cb098 | 2014-10-23 16:44:49 -0700 | [diff] [blame] | 185 | height: 36px; |
| 186 | padding: 4px; |
Simon Hunt | 2c9e0c2 | 2014-10-23 15:12:58 -0700 | [diff] [blame] | 187 | background-color: #ccc; |
Simon Hunt | 0b05d4a | 2014-10-21 21:50:15 -0700 | [diff] [blame] | 188 | vertical-align: baseline; |
| 189 | } |
| 190 | |