Bri Prebilic Cole | 264c5ec | 2015-04-07 10:22:26 -0700 | [diff] [blame] | 1 | /* |
| 2 | * Copyright 2015 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 | /* ------ for summary-list tables ------ */ |
| 18 | |
Bri Prebilic Cole | e568ead | 2015-05-01 09:51:28 -0700 | [diff] [blame] | 19 | div.summary-list { |
| 20 | margin: 0 20px 16px 10px; |
Bri Prebilic Cole | 264c5ec | 2015-04-07 10:22:26 -0700 | [diff] [blame] | 21 | font-size: 10pt; |
| 22 | border-spacing: 0; |
| 23 | } |
| 24 | |
Bri Prebilic Cole | 6e1b4a5 | 2015-08-03 17:10:44 -0700 | [diff] [blame^] | 25 | div.loading-wheel { |
| 26 | display: inline-block; |
| 27 | position: absolute; |
| 28 | margin-top: 40px; |
| 29 | left: 47%; |
| 30 | animation: spin reverse 2s ease infinite; |
| 31 | z-index: 1000; |
| 32 | } |
| 33 | |
| 34 | @keyframes spin { |
| 35 | to { |
| 36 | transform: rotate(360deg); |
| 37 | } |
| 38 | } |
| 39 | |
| 40 | div.loading-wheel svg.embeddedIcon g.icon .glyph { |
| 41 | opacity: .8; |
| 42 | } |
| 43 | .light div.loading-wheel svg.embeddedIcon g.icon .glyph { |
| 44 | fill: #964949; |
| 45 | } |
| 46 | .dark div.loading-wheel svg.embeddedIcon g.icon .glyph { |
| 47 | fill: whitesmoke; |
| 48 | } |
| 49 | |
Bri Prebilic Cole | e568ead | 2015-05-01 09:51:28 -0700 | [diff] [blame] | 50 | div.summary-list table { |
| 51 | border-collapse: collapse; |
| 52 | table-layout: fixed; |
| 53 | empty-cells: show; |
| 54 | margin: 0; |
| 55 | } |
| 56 | |
| 57 | div.summary-list div.table-body { |
| 58 | overflow-y: scroll; |
| 59 | } |
| 60 | |
Bri Prebilic Cole | 0a6ffb6 | 2015-06-04 09:32:12 -0700 | [diff] [blame] | 61 | div.summary-list div.table-body::-webkit-scrollbar { |
| 62 | display: none; |
| 63 | } |
| 64 | |
Bri Prebilic Cole | e568ead | 2015-05-01 09:51:28 -0700 | [diff] [blame] | 65 | div.summary-list tr.no-data td { |
Bri Prebilic Cole | 264c5ec | 2015-04-07 10:22:26 -0700 | [diff] [blame] | 66 | text-align: center; |
| 67 | font-style: italic; |
| 68 | } |
| 69 | |
Bri Prebilic Cole | e568ead | 2015-05-01 09:51:28 -0700 | [diff] [blame] | 70 | .light div.summary-list tr:nth-child(even) { |
Bri Prebilic Cole | 264c5ec | 2015-04-07 10:22:26 -0700 | [diff] [blame] | 71 | background-color: #ddd; |
| 72 | } |
Bri Prebilic Cole | e568ead | 2015-05-01 09:51:28 -0700 | [diff] [blame] | 73 | .light div.summary-list tr:nth-child(odd) { |
Bri Prebilic Cole | 264c5ec | 2015-04-07 10:22:26 -0700 | [diff] [blame] | 74 | background-color: #eee; |
| 75 | } |
Bri Prebilic Cole | e568ead | 2015-05-01 09:51:28 -0700 | [diff] [blame] | 76 | .dark div.summary-list tr:nth-child(even) { |
Bri Prebilic Cole | 264c5ec | 2015-04-07 10:22:26 -0700 | [diff] [blame] | 77 | background-color: #333; |
| 78 | } |
Bri Prebilic Cole | e568ead | 2015-05-01 09:51:28 -0700 | [diff] [blame] | 79 | .dark div.summary-list tr:nth-child(odd) { |
Bri Prebilic Cole | 264c5ec | 2015-04-07 10:22:26 -0700 | [diff] [blame] | 80 | background-color: #444; |
| 81 | } |
| 82 | |
Bri Prebilic Cole | e568ead | 2015-05-01 09:51:28 -0700 | [diff] [blame] | 83 | .light div.summary-list tr.selected { |
Bri Prebilic Cole | 264c5ec | 2015-04-07 10:22:26 -0700 | [diff] [blame] | 84 | background-color: deepskyblue; |
| 85 | } |
| 86 | |
Bri Prebilic Cole | e568ead | 2015-05-01 09:51:28 -0700 | [diff] [blame] | 87 | .dark div.summary-list tr.selected { |
Bri Prebilic Cole | 264c5ec | 2015-04-07 10:22:26 -0700 | [diff] [blame] | 88 | background-color: #304860; |
| 89 | } |
| 90 | |
Bri Prebilic Cole | 0bc4de2 | 2015-07-20 17:07:55 -0700 | [diff] [blame] | 91 | /* highlighting */ |
| 92 | div.summary-list tr { |
| 93 | transition: background-color 500ms; |
| 94 | } |
| 95 | .light div.summary-list tr.data-change { |
| 96 | background-color: #FDFFDC; |
| 97 | } |
| 98 | .dark div.summary-list tr.data-change { |
| 99 | background-color: #5A5600; |
| 100 | } |
| 101 | |
Bri Prebilic Cole | e568ead | 2015-05-01 09:51:28 -0700 | [diff] [blame] | 102 | div.summary-list td { |
Bri Prebilic Cole | 264c5ec | 2015-04-07 10:22:26 -0700 | [diff] [blame] | 103 | padding: 6px; |
| 104 | text-align: left; |
Bri Prebilic Cole | e568ead | 2015-05-01 09:51:28 -0700 | [diff] [blame] | 105 | word-wrap: break-word; |
Bri Prebilic Cole | 264c5ec | 2015-04-07 10:22:26 -0700 | [diff] [blame] | 106 | } |
| 107 | |
Bri Prebilic Cole | e568ead | 2015-05-01 09:51:28 -0700 | [diff] [blame] | 108 | div.summary-list .table-header td { |
Bri Prebilic Cole | 264c5ec | 2015-04-07 10:22:26 -0700 | [diff] [blame] | 109 | letter-spacing: 0.02em; |
| 110 | cursor: pointer; |
Bri Prebilic Cole | e568ead | 2015-05-01 09:51:28 -0700 | [diff] [blame] | 111 | font-weight: bold; |
Bri Prebilic Cole | 264c5ec | 2015-04-07 10:22:26 -0700 | [diff] [blame] | 112 | } |
Bri Prebilic Cole | e568ead | 2015-05-01 09:51:28 -0700 | [diff] [blame] | 113 | div.summary-list .table-header td:first-child { |
Bri Prebilic Cole | 264c5ec | 2015-04-07 10:22:26 -0700 | [diff] [blame] | 114 | border-radius: 8px 0 0 0; |
| 115 | } |
Bri Prebilic Cole | e568ead | 2015-05-01 09:51:28 -0700 | [diff] [blame] | 116 | div.summary-list .table-header td:last-child { |
Bri Prebilic Cole | 264c5ec | 2015-04-07 10:22:26 -0700 | [diff] [blame] | 117 | border-radius: 0 8px 0 0; |
| 118 | } |
| 119 | |
Bri Prebilic Cole | e568ead | 2015-05-01 09:51:28 -0700 | [diff] [blame] | 120 | .light div.summary-list .table-header td { |
Bri Prebilic Cole | 264c5ec | 2015-04-07 10:22:26 -0700 | [diff] [blame] | 121 | background-color: #bbb; |
| 122 | } |
Bri Prebilic Cole | e568ead | 2015-05-01 09:51:28 -0700 | [diff] [blame] | 123 | .dark div.summary-list .table-header td { |
Bri Prebilic Cole | 264c5ec | 2015-04-07 10:22:26 -0700 | [diff] [blame] | 124 | background-color: #222; |
| 125 | color: #ccc; |
| 126 | } |
| 127 | |
| 128 | /* rows are selectable */ |
Bri Prebilic Cole | e568ead | 2015-05-01 09:51:28 -0700 | [diff] [blame] | 129 | div.summary-list .table-body td { |
Bri Prebilic Cole | 264c5ec | 2015-04-07 10:22:26 -0700 | [diff] [blame] | 130 | cursor: pointer; |
| 131 | } |
| 132 | |
Bri Prebilic Cole | e568ead | 2015-05-01 09:51:28 -0700 | [diff] [blame] | 133 | .dark div.summary-list td { |
Bri Prebilic Cole | 264c5ec | 2015-04-07 10:22:26 -0700 | [diff] [blame] | 134 | color: #ccc; |
| 135 | } |
Bri Prebilic Cole | 41d6765 | 2015-06-02 10:23:04 -0700 | [diff] [blame] | 136 | |
| 137 | /* Tabular view upper right control buttons */ |
| 138 | |
| 139 | div.ctrl-btns { |
| 140 | display: inline-block; |
| 141 | float: right; |
| 142 | height: 44px; |
| 143 | margin-right: 24px; |
| 144 | margin-top: 7px; |
| 145 | } |
| 146 | |
| 147 | |
| 148 | div.ctrl-btns div { |
| 149 | display: inline-block; |
| 150 | padding: 4px; |
| 151 | cursor: pointer; |
| 152 | } |
| 153 | |
Bri Prebilic Cole | 9b1fb9a | 2015-07-01 13:57:11 -0700 | [diff] [blame] | 154 | div.ctrl-btns div.separator { |
| 155 | cursor: auto; |
| 156 | width: 24px; |
| 157 | border: none; |
| 158 | } |
| 159 | |
Bri Prebilic Cole | 41d6765 | 2015-06-02 10:23:04 -0700 | [diff] [blame] | 160 | /* Inactive */ |
| 161 | .light .ctrl-btns div g.icon rect, |
| 162 | .light .ctrl-btns div:hover g.icon rect { |
| 163 | fill: #eee; |
| 164 | } |
| 165 | .dark .ctrl-btns div g.icon rect, |
| 166 | .dark .ctrl-btns div:hover g.icon rect { |
| 167 | fill: #222; |
| 168 | } |
| 169 | |
| 170 | .light .ctrl-btns div g.icon use { |
| 171 | fill: #ddd; |
| 172 | } |
| 173 | .dark .ctrl-btns div g.icon use { |
| 174 | fill: #333; |
| 175 | } |
| 176 | |
| 177 | /* Active hover */ |
| 178 | .light .ctrl-btns div.active:hover g.icon rect { |
| 179 | fill: #800; |
| 180 | } |
| 181 | |
| 182 | .dark .ctrl-btns div.active:hover g.icon rect { |
| 183 | fill: #CE5650; |
| 184 | } |
| 185 | |
| 186 | /* Active */ |
| 187 | .light .ctrl-btns div.active g.icon use { |
| 188 | fill: #fff; |
| 189 | } |
| 190 | .dark .ctrl-btns div.active g.icon use { |
| 191 | fill: #eee; |
| 192 | } |
| 193 | |
| 194 | .light .ctrl-btns div.active g.icon rect { |
| 195 | fill: #bbb; |
| 196 | } |
| 197 | .dark .ctrl-btns div.active g.icon rect { |
| 198 | fill: #444; |
| 199 | } |
| 200 | |
| 201 | /* Refresh button specific */ |
Bri Prebilic Cole | eef67ae | 2015-07-01 16:26:59 -0700 | [diff] [blame] | 202 | .light .ctrl-btns div.refresh.active g.icon rect { |
| 203 | fill: #964949; |
| 204 | } |
| 205 | |
| 206 | .dark .ctrl-btns div.refresh.active g.icon rect { |
| 207 | fill: #9B4641; |
| 208 | } |
Bri Prebilic Cole | 41d6765 | 2015-06-02 10:23:04 -0700 | [diff] [blame] | 209 | .light .ctrl-btns div.refresh:hover g.icon rect { |
Bri Prebilic Cole | eef67ae | 2015-07-01 16:26:59 -0700 | [diff] [blame] | 210 | fill: #964949; |
Bri Prebilic Cole | 41d6765 | 2015-06-02 10:23:04 -0700 | [diff] [blame] | 211 | } |
| 212 | |
| 213 | .dark .ctrl-btns div.refresh:hover g.icon rect { |
Bri Prebilic Cole | eef67ae | 2015-07-01 16:26:59 -0700 | [diff] [blame] | 214 | fill: #9B4641; |
Bri Prebilic Cole | 41d6765 | 2015-06-02 10:23:04 -0700 | [diff] [blame] | 215 | } |