22 | Playing with edge labels. 23 |
24 | 25 | 26 | 27 | 60 | 61 | 62 | 64 | -------------------------------------------------------------------------------- /snmplldpnetworkmap.py: -------------------------------------------------------------------------------- 1 | import argparse 2 | import itertools 3 | import os 4 | import pprint 5 | import sqlite3 6 | import sys 7 | import json 8 | import collections 9 | import pysnmp.hlapi as hlapi 10 | import pysnmp.proto.rfc1902 as rfc1902 11 | from pysnmp.hlapi import * 12 | 13 | NEIGHBOUR_PORT_OID = '1.0.8802.1.1.2.1.4.1.1.8.0' 14 | NEIGHBOUR_NAME_OID = '1.0.8802.1.1.2.1.4.1.1.9' 15 | PARENT_NAME_OID = '1.0.8802.1.1.2.1.3.3' 16 | 17 | 18 | def snmp_walk(host, oid, format='str', strip_prefix=True, community='public'): 19 | res = [] 20 | for (errorIndication, 21 | errorStatus, 22 | errorIndex, 23 | varBinds) in hlapi.nextCmd(hlapi.SnmpEngine(), 24 | hlapi.CommunityData(community), 25 | hlapi.UdpTransportTarget((host, 161), timeout=4.0, retries=3), 26 | hlapi.ContextData(), 27 | hlapi.ObjectType(hlapi.ObjectIdentity(oid)), 28 | lookupMib=False, 29 | lexicographicMode=False): 30 | if errorIndication: 31 | raise ConnectionError(f'SNMP error: "{str(errorIndication)}". Status={str(errorStatus)}') 32 | elif errorStatus: 33 | raise ConnectionError('errorStatus: %s at %s' % (errorStatus.prettyPrint(), 34 | errorIndex and varBinds[int(errorIndex) - 1][0] or '?')) 35 | else: 36 | print(varBinds) 37 | for x in varBinds: 38 | k, v = x 39 | if strip_prefix: 40 | k = str(k)[len(str(oid)) + 1:] 41 | if isinstance(v, rfc1902.Integer): 42 | res.append((str(k), int(v))) 43 | else: 44 | if format == 'numbers': 45 | res.append((str(k), v.asNumbers())) 46 | elif format == 'hex': 47 | res.append((str(k), v.asOctets().hex())) 48 | elif format == 'raw': 49 | res.append((str(k), v)) 50 | elif format == 'bin': 51 | res.append((str(k), v.asOctets())) 52 | elif format == 'int': 53 | res.append((str(k), int(v))) 54 | elif format == 'preview': 55 | res.append((str(k), str(v))) 56 | elif format == 'any': 57 | try: 58 | res.append((str(k), v.asOctets().decode('utf-8'))) 59 | except UnicodeDecodeError: 60 | res.append((str(k), '0x' + v.asOctets().hex())) 61 | elif format == 'str': 62 | res.append((str(k), v.asOctets().decode(v.encoding))) 63 | else: 64 | assert False, "Unknown format for walk()." 65 | res = {a: b for a, b in res} 66 | return res 67 | 68 | 69 | def read_id_from_oid_tail(oid, with_len=True): 70 | parts = [int(x) for x in oid.split('.')] 71 | if with_len: 72 | assert (parts[-5] == 3) # number of elements 73 | return '.'.join([str(x) for x in parts[-2:-1]]) 74 | 75 | 76 | class MissingOidParameter(Exception): 77 | """ 78 | Custom exception used when the OID is missing. 79 | """ 80 | pass 81 | 82 | 83 | def is_file_valid(filepath): 84 | """ 85 | Check if a file exists or not. 86 | 87 | Args: 88 | filepath (str): Path to the switches file 89 | Returns: 90 | filepath or raise exception if invalid 91 | """ 92 | 93 | if not os.path.exists(filepath): 94 | raise ValueError('Invalid filepath') 95 | return filepath 96 | 97 | 98 | def get_cli_arguments(): 99 | """ 100 | Simple command line parser function. 101 | """ 102 | 103 | parser = argparse.ArgumentParser(description="") 104 | parser.add_argument( 105 | '-f', 106 | '--file', 107 | type=is_file_valid, 108 | help='Path to the switches file' 109 | ) 110 | return parser 111 | 112 | 113 | def get_switches_from_file(): 114 | """Return data as a list from a file. 115 | 116 | The file format is the following: 117 | 118 | community_string1, snmp_port1, ip1 119 | community_string2, snmp_port2, ip2 120 | community_string3, snmp_port3, ip3 121 | 122 | The output: 123 | 124 | [ 125 | {"community": "community_string1", "snmp_port": "snmp_port1", "ip": "ip1"}, 126 | {"community": "community_string2", "snmp_port": "snmp_port2", "ip": "ip2"}, 127 | {"community": "community_string3", "snmp_port": "snmp_port3", "ip": "ip3"}, 128 | ] 129 | """ 130 | 131 | args = get_cli_arguments().parse_args() 132 | switches_info = [] 133 | with open(args.file) as switches_info_fp: 134 | for line in switches_info_fp: 135 | line = line.rstrip().split(',') 136 | switches_info.append({ 137 | 'community': line[0].strip(), 138 | 'snmp_port': line[1].strip(), 139 | 'ip': line[2].strip(), 140 | }) 141 | return switches_info 142 | 143 | 144 | def parse_neighbours_ports_result(result): 145 | """ 146 | One line of result looks like this: 147 | 148 | result = iso.0.8802.1.1.2.1.4.1.1.8.0.2.3 = 2 149 | 150 | Where the last "2" from the OID is the local port and the value 151 | after '=' is the remote port (2) 152 | """ 153 | if not result: 154 | raise MissingOidParameter('No OID provided.') 155 | 156 | value = result.split(' = ') 157 | if not value: 158 | return 'Missing entire value for OID={}'.format(result) 159 | else: 160 | oid, port = value 161 | local_port = re.search(r'{}\.(\d+)'.format(NEIGHBOUR_PORT_OID[2:]), oid).group(1) 162 | 163 | if port: 164 | remote_port = re.search(r'(\d+)', port).group(1) 165 | else: 166 | remote_port = 'Unknown' 167 | 168 | return 'local_port', local_port, 'remote_port', remote_port 169 | 170 | 171 | def parse_parent_name(result): 172 | """ 173 | One line of result looks like this: 174 | 175 | result = iso.0.8802.1.1.2.1.3.3.0 = Switch01 176 | 177 | The name of the parent is "Switch01" 178 | """ 179 | 180 | if not result: 181 | raise MissingOidParameter('No OID provided.') 182 | 183 | value = result.split(' = ') 184 | if not value: 185 | return 'Missing entire value for OID={}'.format(result) 186 | else: 187 | return 'Unknown' if not value[-1] else value[-1] 188 | 189 | 190 | def parse_neighbour_names_results(result): 191 | """ 192 | One line of result looks like this: 193 | 194 | result = iso.0.8802.1.1.2.1.4.1.1.9.0.2.3 = HP-2920-24G 195 | 196 | The name of the parent is "Switch01" 197 | """ 198 | 199 | if not result: 200 | raise MissingOidParameter('No OID provided.') 201 | 202 | value = result.split(' = ') 203 | if not value: 204 | return 'Missing entire value for OID={}'.format(result) 205 | else: 206 | return ('name', 'Unknown') if not value[-1] else ('name', value[-1]) 207 | 208 | 209 | def main(): 210 | con = sqlite3.connect(':memory:') 211 | cursorObj = con.cursor() 212 | cursorObj.execute("CREATE TABLE lldpLocSysName(LocSysName text PRIMARY KEY)") 213 | con.commit() 214 | 215 | cursorObj.execute( 216 | "CREATE TABLE lldpLocPortId(LocSysName text,id text, LocPortId text, primary key (LocSysName,id) )") 217 | con.commit() 218 | 219 | cursorObj.execute( 220 | "CREATE TABLE lldpRemPortId(LocSysName text,RemSysName text,id text, RemPortId text, primary key (LocSysName,RemSysName,id) )") 221 | con.commit() 222 | 223 | data = {} 224 | switches_filedata = get_switches_from_file() 225 | 226 | for switch in switches_filedata: 227 | community = switch.get('community') 228 | snmp_port = switch.get('snmp_port') 229 | ip = switch.get('ip') 230 | # Read lldpLocSysName table 231 | print(" - Reading device lldpLocSysName table...", file=sys.stderr) 232 | print("lldpLocSysName",ip) 233 | lldpLocSysName = snmp_walk(ip, '1.0.8802.1.1.2.1.3.3', 'str', community=community) 234 | gLocSysName = '' 235 | for id, LocSysName in lldpLocSysName.items(): 236 | print('id=', id) 237 | print('LocSysName=', LocSysName) 238 | gLocSysName = LocSysName 239 | cursorObj.execute("INSERT INTO lldpLocSysName VALUES('" + LocSysName + "')") 240 | con.commit() 241 | 242 | cursorObj.execute('SELECT * FROM lldpLocSysName') 243 | 244 | rows = cursorObj.fetchall() 245 | 246 | for row in rows: 247 | print(row) 248 | 249 | print(" - Reading device lldpLocPortId table...", file=sys.stderr) 250 | lldpLocPortId = snmp_walk(ip, '1.0.8802.1.1.2.1.3.7.1.3', 'str', community=community) 251 | for id, LocPortId in lldpLocPortId.items(): 252 | print('id=', id) 253 | print('LocPortId=', LocPortId) 254 | print(gLocSysName) 255 | cursorObj.execute( 256 | "INSERT INTO lldpLocPortId VALUES('" + gLocSysName + "','" + id + "','" + LocPortId + "')") 257 | con.commit() 258 | cursorObj.execute('SELECT * FROM lldpLocPortId') 259 | 260 | rows = cursorObj.fetchall() 261 | 262 | for row in rows: 263 | print(row) 264 | 265 | print(" - Reading device lldpRemSysName table...", file=sys.stderr) 266 | lldpRemSysName = snmp_walk(ip, '1.0.8802.1.1.2.1.4.1.1.9', 'str', community=community) 267 | for id, RemSysName in lldpRemSysName.items(): 268 | print('id=', read_id_from_oid_tail(id, with_len=False)) 269 | print('RemSysName=', RemSysName) 270 | cursorObj.execute( 271 | "INSERT INTO lldpRemPortId VALUES('" + gLocSysName + "','" + RemSysName + "','" + read_id_from_oid_tail( 272 | id, with_len=False) + "','')") 273 | con.commit() 274 | 275 | print(" - Reading device lldpRemPortId table...", file=sys.stderr) 276 | lldpRemPortId = snmp_walk(ip, '1.0.8802.1.1.2.1.4.1.1.7', 'any', community=community) 277 | for id, RemPortId in lldpRemPortId.items(): 278 | print('id=', read_id_from_oid_tail(id, with_len=False)) 279 | print('RemPortId=', RemPortId) 280 | cursorObj.execute( 281 | "UPDATE lldpRemPortId SET RemPortId='" + RemPortId + "' where LocSysName='" + gLocSysName + "' and RemSysName='" + RemSysName + "' and id='" + read_id_from_oid_tail( 282 | id, with_len=False) + "'") 283 | con.commit() 284 | cursorObj.execute('SELECT * FROM lldpRemPortId') 285 | rows = cursorObj.fetchall() 286 | 287 | for row in rows: 288 | print(row) 289 | 290 | cursorObj.execute('SELECT * FROM lldpRemPortId') 291 | rows = cursorObj.fetchall() 292 | 293 | for row in rows: 294 | print(row) 295 | 296 | cursorObj.execute( 297 | 'SELECT r.LocSysName,l.LocPortId,r.RemSysName,r.RemPortId FROM lldpRemPortId r,lldpLocPortId l where r.LocSysName=l.LocSysName and r.id=l.id and r.RemSysName in (SELECT * FROM lldpLocSysName)') 298 | rows = cursorObj.fetchall() 299 | dictLocRem = {} 300 | for row in rows: 301 | print(row) 302 | 303 | print('sorted:', sorted(row)) 304 | dictLocRem[tuple(sorted(row))] = row 305 | print('dedup:\n') 306 | print(dictLocRem) 307 | print('dedup values:\n') 308 | for value in dictLocRem.values(): 309 | print(value) 310 | 311 | name = '' 312 | for (error_indication, error_status, error_index, var_binds) in nextCmd( 313 | SnmpEngine(), 314 | CommunityData(community), 315 | UdpTransportTarget((ip, snmp_port)), 316 | ContextData(), 317 | ObjectType(ObjectIdentity(PARENT_NAME_OID)), 318 | lexicographicMode=False 319 | ): 320 | # this should always return one result 321 | name = parse_parent_name(str(var_binds[0])) 322 | 323 | if not name: 324 | print('Could not retrieve name of switch. Moving to the next one...') 325 | continue 326 | 327 | neighbour_names = [] 328 | neighbour_local_remote_ports = [] 329 | 330 | for (error_indication, error_status, error_index, var_binds) in nextCmd( 331 | SnmpEngine(), 332 | CommunityData(community), 333 | UdpTransportTarget((ip, snmp_port)), 334 | ContextData(), 335 | ObjectType(ObjectIdentity(NEIGHBOUR_NAME_OID)), 336 | lexicographicMode=False 337 | ): 338 | for var_bind in var_binds: 339 | neighbour_names.append( 340 | parse_neighbour_names_results(str(var_bind)) 341 | ) 342 | 343 | for (error_indication, error_status, error_index, var_binds) in nextCmd( 344 | SnmpEngine(), 345 | CommunityData(community), 346 | UdpTransportTarget((ip, snmp_port)), 347 | ContextData(), 348 | ObjectType(ObjectIdentity(NEIGHBOUR_PORT_OID)), 349 | lexicographicMode=False 350 | ): 351 | for var_bind in var_binds: 352 | neighbour_local_remote_ports.append( 353 | parse_neighbours_ports_result(str(var_bind)) 354 | ) 355 | 356 | neighbours = [] 357 | for a, b in itertools.zip_longest( 358 | neighbour_names, 359 | neighbour_local_remote_ports, 360 | fillvalue='unknown' 361 | ): 362 | neighbours.append({ 363 | a[0]: a[1], 364 | b[0]: b[1], 365 | b[2]: b[3] 366 | }) 367 | 368 | data[name] = { 369 | 'ip': ip, 370 | 'neighbors': neighbours 371 | } 372 | strnodes = '' 373 | cursorObj.execute('SELECT * FROM lldpLocSysName') 374 | 375 | rows = cursorObj.fetchall() 376 | 377 | for row in rows: 378 | print(row[0]) 379 | strnodes = strnodes + "{id: '" + row[0] + "', label: '" + row[0] + "'},\n" 380 | 381 | print(strnodes) 382 | # Convert query to objects of key-value pairs 383 | objects_list = [] 384 | for row in rows: 385 | d = collections.OrderedDict() 386 | d["id"] = row[0] 387 | d["label"] = row[0] 388 | objects_list.append(d) 389 | j = json.dumps(objects_list, indent=4) 390 | with open("nodes.js", "w") as f: 391 | f.write("var nodes = new vis.DataSet(" + j + ");") 392 | stredges = '' 393 | cursorObj.execute( 394 | 'SELECT r.LocSysName,l.LocPortId,r.RemSysName,r.RemPortId FROM lldpRemPortId r,lldpLocPortId l where r.LocSysName=l.LocSysName and r.id=l.id and r.RemSysName in (SELECT * FROM lldpLocSysName)') 395 | rows = cursorObj.fetchall() 396 | dictLocRem = {} 397 | for row in rows: 398 | print(row) 399 | 400 | print('sorted:', sorted(row)) 401 | dictLocRem[tuple(sorted(row))] = row 402 | print('dedup:\n') 403 | print(dictLocRem) 404 | print('dedup values:\n') 405 | for row in dictLocRem.values(): 406 | print(row) 407 | stredges = stredges + "{from: '" + row[0] + "', to: '" + row[2] + "', label: '" + "1G" + "', labelFrom: '" + \ 408 | row[1] + "', labelTo: '" + row[3] + "', arrows: '" + "from,to" + "'},\n" 409 | print(stredges) 410 | # Convert query to objects of key-value pairs 411 | objects_list = [] 412 | for row in rows: 413 | d = collections.OrderedDict() 414 | d["from"] = row[0] 415 | d["to"] = row[2] 416 | d["label"] = "1G" 417 | d["labelFrom"] = row[1] 418 | d["labelTo"] = row[3] 419 | d["arrows"] = "from,to" 420 | objects_list.append(d) 421 | j = json.dumps(objects_list, indent=4) 422 | with open("edges.js", "w") as f: 423 | f.write("var edges = new vis.DataSet(" + j + ");") 424 | return data 425 | 426 | 427 | if __name__ == '__main__': 428 | all_data = main() 429 | pprint.pprint(all_data, indent=4) 430 | -------------------------------------------------------------------------------- /vis/img/network/acceptDeleteIcon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/allwaysoft/Python-SNMP-LLDP-SQLite3-vis.js-topology/b0b76c4d014abe35ddd303f675c0ef24225f9886/vis/img/network/acceptDeleteIcon.png -------------------------------------------------------------------------------- /vis/img/network/addNodeIcon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/allwaysoft/Python-SNMP-LLDP-SQLite3-vis.js-topology/b0b76c4d014abe35ddd303f675c0ef24225f9886/vis/img/network/addNodeIcon.png -------------------------------------------------------------------------------- /vis/img/network/backIcon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/allwaysoft/Python-SNMP-LLDP-SQLite3-vis.js-topology/b0b76c4d014abe35ddd303f675c0ef24225f9886/vis/img/network/backIcon.png -------------------------------------------------------------------------------- /vis/img/network/connectIcon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/allwaysoft/Python-SNMP-LLDP-SQLite3-vis.js-topology/b0b76c4d014abe35ddd303f675c0ef24225f9886/vis/img/network/connectIcon.png -------------------------------------------------------------------------------- /vis/img/network/cross.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/allwaysoft/Python-SNMP-LLDP-SQLite3-vis.js-topology/b0b76c4d014abe35ddd303f675c0ef24225f9886/vis/img/network/cross.png -------------------------------------------------------------------------------- /vis/img/network/cross2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/allwaysoft/Python-SNMP-LLDP-SQLite3-vis.js-topology/b0b76c4d014abe35ddd303f675c0ef24225f9886/vis/img/network/cross2.png -------------------------------------------------------------------------------- /vis/img/network/deleteIcon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/allwaysoft/Python-SNMP-LLDP-SQLite3-vis.js-topology/b0b76c4d014abe35ddd303f675c0ef24225f9886/vis/img/network/deleteIcon.png -------------------------------------------------------------------------------- /vis/img/network/downArrow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/allwaysoft/Python-SNMP-LLDP-SQLite3-vis.js-topology/b0b76c4d014abe35ddd303f675c0ef24225f9886/vis/img/network/downArrow.png -------------------------------------------------------------------------------- /vis/img/network/editIcon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/allwaysoft/Python-SNMP-LLDP-SQLite3-vis.js-topology/b0b76c4d014abe35ddd303f675c0ef24225f9886/vis/img/network/editIcon.png -------------------------------------------------------------------------------- /vis/img/network/leftArrow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/allwaysoft/Python-SNMP-LLDP-SQLite3-vis.js-topology/b0b76c4d014abe35ddd303f675c0ef24225f9886/vis/img/network/leftArrow.png -------------------------------------------------------------------------------- /vis/img/network/minus.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/allwaysoft/Python-SNMP-LLDP-SQLite3-vis.js-topology/b0b76c4d014abe35ddd303f675c0ef24225f9886/vis/img/network/minus.png -------------------------------------------------------------------------------- /vis/img/network/plus.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/allwaysoft/Python-SNMP-LLDP-SQLite3-vis.js-topology/b0b76c4d014abe35ddd303f675c0ef24225f9886/vis/img/network/plus.png -------------------------------------------------------------------------------- /vis/img/network/rightArrow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/allwaysoft/Python-SNMP-LLDP-SQLite3-vis.js-topology/b0b76c4d014abe35ddd303f675c0ef24225f9886/vis/img/network/rightArrow.png -------------------------------------------------------------------------------- /vis/img/network/upArrow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/allwaysoft/Python-SNMP-LLDP-SQLite3-vis.js-topology/b0b76c4d014abe35ddd303f675c0ef24225f9886/vis/img/network/upArrow.png -------------------------------------------------------------------------------- /vis/img/network/zoomExtends.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/allwaysoft/Python-SNMP-LLDP-SQLite3-vis.js-topology/b0b76c4d014abe35ddd303f675c0ef24225f9886/vis/img/network/zoomExtends.png -------------------------------------------------------------------------------- /vis/vis-network.min.css: -------------------------------------------------------------------------------- 1 | .vis .overlay{position:absolute;top:0;left:0;width:100%;height:100%;z-index:10}.vis-active{box-shadow:0 0 10px #86d5f8}.vis [class*=span]{min-height:0;width:auto}div.vis-configuration{position:relative;display:block;float:left;font-size:12px}div.vis-configuration-wrapper{display:block;width:700px}div.vis-configuration-wrapper::after{clear:both;content:"";display:block}div.vis-configuration.vis-config-option-container{display:block;width:495px;background-color:#fff;border:2px solid #f7f8fa;border-radius:4px;margin-top:20px;left:10px;padding-left:5px}div.vis-configuration.vis-config-button{display:block;width:495px;height:25px;vertical-align:middle;line-height:25px;background-color:#f7f8fa;border:2px solid #ceced0;border-radius:4px;margin-top:20px;left:10px;padding-left:5px;cursor:pointer;margin-bottom:30px}div.vis-configuration.vis-config-button.hover{background-color:#4588e6;border:2px solid #214373;color:#fff}div.vis-configuration.vis-config-item{display:block;float:left;width:495px;height:25px;vertical-align:middle;line-height:25px}div.vis-configuration.vis-config-item.vis-config-s2{left:10px;background-color:#f7f8fa;padding-left:5px;border-radius:3px}div.vis-configuration.vis-config-item.vis-config-s3{left:20px;background-color:#e4e9f0;padding-left:5px;border-radius:3px}div.vis-configuration.vis-config-item.vis-config-s4{left:30px;background-color:#cfd8e6;padding-left:5px;border-radius:3px}div.vis-configuration.vis-config-header{font-size:18px;font-weight:700}div.vis-configuration.vis-config-label{width:120px;height:25px;line-height:25px}div.vis-configuration.vis-config-label.vis-config-s3{width:110px}div.vis-configuration.vis-config-label.vis-config-s4{width:100px}div.vis-configuration.vis-config-colorBlock{top:1px;width:30px;height:19px;border:1px solid #444;border-radius:2px;padding:0;margin:0;cursor:pointer}input.vis-configuration.vis-config-checkbox{left:-5px}input.vis-configuration.vis-config-rangeinput{position:relative;top:-5px;width:60px;padding:1px;margin:0;pointer-events:none}input.vis-configuration.vis-config-range{-webkit-appearance:none;border:0 solid #fff;background-color:rgba(0,0,0,0);width:300px;height:20px}input.vis-configuration.vis-config-range::-webkit-slider-runnable-track{width:300px;height:5px;background:#dedede;background:-moz-linear-gradient(top,#dedede 0,#c8c8c8 99%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#dedede),color-stop(99%,#c8c8c8));background:-webkit-linear-gradient(top,#dedede 0,#c8c8c8 99%);background:-o-linear-gradient(top,#dedede 0,#c8c8c8 99%);background:-ms-linear-gradient(top,#dedede 0,#c8c8c8 99%);background:linear-gradient(to bottom,#dedede 0,#c8c8c8 99%);border:1px solid #999;box-shadow:#aaa 0 0 3px 0;border-radius:3px}input.vis-configuration.vis-config-range::-webkit-slider-thumb{-webkit-appearance:none;border:1px solid #14334b;height:17px;width:17px;border-radius:50%;background:#3876c2;background:-moz-linear-gradient(top,#3876c2 0,#385380 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#3876c2),color-stop(100%,#385380));background:-webkit-linear-gradient(top,#3876c2 0,#385380 100%);background:-o-linear-gradient(top,#3876c2 0,#385380 100%);background:-ms-linear-gradient(top,#3876c2 0,#385380 100%);background:linear-gradient(to bottom,#3876c2 0,#385380 100%);box-shadow:#111927 0 0 1px 0;margin-top:-7px}input.vis-configuration.vis-config-range:focus{outline:0}input.vis-configuration.vis-config-range:focus::-webkit-slider-runnable-track{background:#9d9d9d;background:-moz-linear-gradient(top,#9d9d9d 0,#c8c8c8 99%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#9d9d9d),color-stop(99%,#c8c8c8));background:-webkit-linear-gradient(top,#9d9d9d 0,#c8c8c8 99%);background:-o-linear-gradient(top,#9d9d9d 0,#c8c8c8 99%);background:-ms-linear-gradient(top,#9d9d9d 0,#c8c8c8 99%);background:linear-gradient(to bottom,#9d9d9d 0,#c8c8c8 99%)}input.vis-configuration.vis-config-range::-moz-range-track{width:300px;height:10px;background:#dedede;background:-moz-linear-gradient(top,#dedede 0,#c8c8c8 99%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#dedede),color-stop(99%,#c8c8c8));background:-webkit-linear-gradient(top,#dedede 0,#c8c8c8 99%);background:-o-linear-gradient(top,#dedede 0,#c8c8c8 99%);background:-ms-linear-gradient(top,#dedede 0,#c8c8c8 99%);background:linear-gradient(to bottom,#dedede 0,#c8c8c8 99%);border:1px solid #999;box-shadow:#aaa 0 0 3px 0;border-radius:3px}input.vis-configuration.vis-config-range::-moz-range-thumb{border:none;height:16px;width:16px;border-radius:50%;background:#385380}input.vis-configuration.vis-config-range:-moz-focusring{outline:1px solid #fff;outline-offset:-1px}input.vis-configuration.vis-config-range::-ms-track{width:300px;height:5px;background:0 0;border-color:transparent;border-width:6px 0;color:transparent}input.vis-configuration.vis-config-range::-ms-fill-lower{background:#777;border-radius:10px}input.vis-configuration.vis-config-range::-ms-fill-upper{background:#ddd;border-radius:10px}input.vis-configuration.vis-config-range::-ms-thumb{border:none;height:16px;width:16px;border-radius:50%;background:#385380}input.vis-configuration.vis-config-range:focus::-ms-fill-lower{background:#888}input.vis-configuration.vis-config-range:focus::-ms-fill-upper{background:#ccc}.vis-configuration-popup{position:absolute;background:rgba(57,76,89,.85);border:2px solid #f2faff;line-height:30px;height:30px;width:150px;text-align:center;color:#fff;font-size:14px;border-radius:4px;-webkit-transition:opacity .3s ease-in-out;-moz-transition:opacity .3s ease-in-out;transition:opacity .3s ease-in-out}.vis-configuration-popup:after,.vis-configuration-popup:before{left:100%;top:50%;border:solid transparent;content:" ";height:0;width:0;position:absolute;pointer-events:none}.vis-configuration-popup:after{border-color:rgba(136,183,213,0);border-left-color:rgba(57,76,89,.85);border-width:8px;margin-top:-8px}.vis-configuration-popup:before{border-color:rgba(194,225,245,0);border-left-color:#f2faff;border-width:12px;margin-top:-12px}div.vis-tooltip{position:absolute;visibility:hidden;padding:5px;white-space:nowrap;font-family:verdana;font-size:14px;color:#000;background-color:#f5f4ed;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;border:1px solid #808074;box-shadow:3px 3px 10px rgba(0,0,0,.2);pointer-events:none;z-index:5}div.vis-color-picker{position:absolute;top:0;left:30px;margin-top:-140px;margin-left:30px;width:310px;height:444px;z-index:1;padding:10px;border-radius:15px;background-color:#fff;display:none;box-shadow:rgba(0,0,0,.5) 0 0 10px 0}div.vis-color-picker div.vis-arrow{position:absolute;top:147px;left:5px}div.vis-color-picker div.vis-arrow::after,div.vis-color-picker div.vis-arrow::before{right:100%;top:50%;border:solid transparent;content:" ";height:0;width:0;position:absolute;pointer-events:none}div.vis-color-picker div.vis-arrow:after{border-color:rgba(255,255,255,0);border-right-color:#fff;border-width:30px;margin-top:-30px}div.vis-color-picker div.vis-color{position:absolute;width:289px;height:289px;cursor:pointer}div.vis-color-picker div.vis-brightness{position:absolute;top:313px}div.vis-color-picker div.vis-opacity{position:absolute;top:350px}div.vis-color-picker div.vis-selector{position:absolute;top:137px;left:137px;width:15px;height:15px;border-radius:15px;border:1px solid #fff;background:#4c4c4c;background:-moz-linear-gradient(top,#4c4c4c 0,#595959 12%,#666 25%,#474747 39%,#2c2c2c 50%,#000 51%,#111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#4c4c4c),color-stop(12%,#595959),color-stop(25%,#666),color-stop(39%,#474747),color-stop(50%,#2c2c2c),color-stop(51%,#000),color-stop(60%,#111),color-stop(76%,#2b2b2b),color-stop(91%,#1c1c1c),color-stop(100%,#131313));background:-webkit-linear-gradient(top,#4c4c4c 0,#595959 12%,#666 25%,#474747 39%,#2c2c2c 50%,#000 51%,#111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%);background:-o-linear-gradient(top,#4c4c4c 0,#595959 12%,#666 25%,#474747 39%,#2c2c2c 50%,#000 51%,#111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%);background:-ms-linear-gradient(top,#4c4c4c 0,#595959 12%,#666 25%,#474747 39%,#2c2c2c 50%,#000 51%,#111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%);background:linear-gradient(to bottom,#4c4c4c 0,#595959 12%,#666 25%,#474747 39%,#2c2c2c 50%,#000 51%,#111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%)}div.vis-color-picker div.vis-new-color{position:absolute;width:140px;height:20px;border:1px solid rgba(0,0,0,.1);border-radius:5px;top:380px;left:159px;text-align:right;padding-right:2px;font-size:10px;color:rgba(0,0,0,.4);vertical-align:middle;line-height:20px}div.vis-color-picker div.vis-initial-color{position:absolute;width:140px;height:20px;border:1px solid rgba(0,0,0,.1);border-radius:5px;top:380px;left:10px;text-align:left;padding-left:2px;font-size:10px;color:rgba(0,0,0,.4);vertical-align:middle;line-height:20px}div.vis-color-picker div.vis-label{position:absolute;width:300px;left:10px}div.vis-color-picker div.vis-label.vis-brightness{top:300px}div.vis-color-picker div.vis-label.vis-opacity{top:338px}div.vis-color-picker div.vis-button{position:absolute;width:68px;height:25px;border-radius:10px;vertical-align:middle;text-align:center;line-height:25px;top:410px;border:2px solid #d9d9d9;background-color:#f7f7f7;cursor:pointer}div.vis-color-picker div.vis-button.vis-cancel{left:5px}div.vis-color-picker div.vis-button.vis-load{left:82px}div.vis-color-picker div.vis-button.vis-apply{left:159px}div.vis-color-picker div.vis-button.vis-save{left:236px}div.vis-color-picker input.vis-range{width:290px;height:20px}div.vis-network div.vis-manipulation{box-sizing:content-box;border-width:0;border-bottom:1px;border-style:solid;border-color:#d6d9d8;background:#fff;background:-moz-linear-gradient(top,#fff 0,#fcfcfc 48%,#fafafa 50%,#fcfcfc 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#fff),color-stop(48%,#fcfcfc),color-stop(50%,#fafafa),color-stop(100%,#fcfcfc));background:-webkit-linear-gradient(top,#fff 0,#fcfcfc 48%,#fafafa 50%,#fcfcfc 100%);background:-o-linear-gradient(top,#fff 0,#fcfcfc 48%,#fafafa 50%,#fcfcfc 100%);background:-ms-linear-gradient(top,#fff 0,#fcfcfc 48%,#fafafa 50%,#fcfcfc 100%);background:linear-gradient(to bottom,#fff 0,#fcfcfc 48%,#fafafa 50%,#fcfcfc 100%);padding-top:4px;position:absolute;left:0;top:0;width:100%;height:28px}div.vis-network div.vis-edit-mode{position:absolute;left:0;top:5px;height:30px}div.vis-network div.vis-close{position:absolute;right:0;top:0;width:30px;height:30px;background-position:20px 3px;background-repeat:no-repeat;background-image:url(img/network/cross.png);cursor:pointer;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}div.vis-network div.vis-close:hover{opacity:.6}div.vis-network div.vis-edit-mode div.vis-button,div.vis-network div.vis-manipulation div.vis-button{float:left;font-family:verdana;font-size:12px;-moz-border-radius:15px;border-radius:15px;display:inline-block;background-position:0 0;background-repeat:no-repeat;height:24px;margin-left:10px;cursor:pointer;padding:0 8px 0 8px;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}div.vis-network div.vis-manipulation div.vis-button:hover{box-shadow:1px 1px 8px rgba(0,0,0,.2)}div.vis-network div.vis-manipulation div.vis-button:active{box-shadow:1px 1px 8px rgba(0,0,0,.5)}div.vis-network div.vis-manipulation div.vis-button.vis-back{background-image:url(img/network/backIcon.png)}div.vis-network div.vis-manipulation div.vis-button.vis-none:hover{box-shadow:1px 1px 8px transparent;cursor:default}div.vis-network div.vis-manipulation div.vis-button.vis-none:active{box-shadow:1px 1px 8px transparent}div.vis-network div.vis-manipulation div.vis-button.vis-none{padding:0}div.vis-network div.vis-manipulation div.notification{margin:2px;font-weight:700}div.vis-network div.vis-manipulation div.vis-button.vis-add{background-image:url(img/network/addNodeIcon.png)}div.vis-network div.vis-edit-mode div.vis-button.vis-edit,div.vis-network div.vis-manipulation div.vis-button.vis-edit{background-image:url(img/network/editIcon.png)}div.vis-network div.vis-edit-mode div.vis-button.vis-edit.vis-edit-mode{background-color:#fcfcfc;border:1px solid #ccc}div.vis-network div.vis-manipulation div.vis-button.vis-connect{background-image:url(img/network/connectIcon.png)}div.vis-network div.vis-manipulation div.vis-button.vis-delete{background-image:url(img/network/deleteIcon.png)}div.vis-network div.vis-edit-mode div.vis-label,div.vis-network div.vis-manipulation div.vis-label{margin:0 0 0 23px;line-height:25px}div.vis-network div.vis-manipulation div.vis-separator-line{float:left;display:inline-block;width:1px;height:21px;background-color:#bdbdbd;margin:0 7px 0 15px}div.vis-network div.vis-navigation div.vis-button{width:34px;height:34px;-moz-border-radius:17px;border-radius:17px;position:absolute;display:inline-block;background-position:2px 2px;background-repeat:no-repeat;cursor:pointer;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}div.vis-network div.vis-navigation div.vis-button:hover{box-shadow:0 0 3px 3px rgba(56,207,21,.3)}div.vis-network div.vis-navigation div.vis-button:active{box-shadow:0 0 1px 3px rgba(56,207,21,.95)}div.vis-network div.vis-navigation div.vis-button.vis-up{background-image:url(img/network/upArrow.png);bottom:50px;left:55px}div.vis-network div.vis-navigation div.vis-button.vis-down{background-image:url(img/network/downArrow.png);bottom:10px;left:55px}div.vis-network div.vis-navigation div.vis-button.vis-left{background-image:url(img/network/leftArrow.png);bottom:10px;left:15px}div.vis-network div.vis-navigation div.vis-button.vis-right{background-image:url(img/network/rightArrow.png);bottom:10px;left:95px}div.vis-network div.vis-navigation div.vis-button.vis-zoomIn{background-image:url(img/network/plus.png);bottom:10px;right:15px}div.vis-network div.vis-navigation div.vis-button.vis-zoomOut{background-image:url(img/network/minus.png);bottom:10px;right:55px}div.vis-network div.vis-navigation div.vis-button.vis-zoomExtends{background-image:url(img/network/zoomExtends.png);bottom:50px;right:15px} -------------------------------------------------------------------------------- /vis/vis-timeline-graph2d.min.css: -------------------------------------------------------------------------------- 1 | .vis .overlay{position:absolute;top:0;left:0;width:100%;height:100%;z-index:10}.vis-active{box-shadow:0 0 10px #86d5f8}.vis [class*=span]{min-height:0;width:auto}div.vis-configuration{position:relative;display:block;float:left;font-size:12px}div.vis-configuration-wrapper{display:block;width:700px}div.vis-configuration-wrapper::after{clear:both;content:"";display:block}div.vis-configuration.vis-config-option-container{display:block;width:495px;background-color:#fff;border:2px solid #f7f8fa;border-radius:4px;margin-top:20px;left:10px;padding-left:5px}div.vis-configuration.vis-config-button{display:block;width:495px;height:25px;vertical-align:middle;line-height:25px;background-color:#f7f8fa;border:2px solid #ceced0;border-radius:4px;margin-top:20px;left:10px;padding-left:5px;cursor:pointer;margin-bottom:30px}div.vis-configuration.vis-config-button.hover{background-color:#4588e6;border:2px solid #214373;color:#fff}div.vis-configuration.vis-config-item{display:block;float:left;width:495px;height:25px;vertical-align:middle;line-height:25px}div.vis-configuration.vis-config-item.vis-config-s2{left:10px;background-color:#f7f8fa;padding-left:5px;border-radius:3px}div.vis-configuration.vis-config-item.vis-config-s3{left:20px;background-color:#e4e9f0;padding-left:5px;border-radius:3px}div.vis-configuration.vis-config-item.vis-config-s4{left:30px;background-color:#cfd8e6;padding-left:5px;border-radius:3px}div.vis-configuration.vis-config-header{font-size:18px;font-weight:700}div.vis-configuration.vis-config-label{width:120px;height:25px;line-height:25px}div.vis-configuration.vis-config-label.vis-config-s3{width:110px}div.vis-configuration.vis-config-label.vis-config-s4{width:100px}div.vis-configuration.vis-config-colorBlock{top:1px;width:30px;height:19px;border:1px solid #444;border-radius:2px;padding:0;margin:0;cursor:pointer}input.vis-configuration.vis-config-checkbox{left:-5px}input.vis-configuration.vis-config-rangeinput{position:relative;top:-5px;width:60px;padding:1px;margin:0;pointer-events:none}input.vis-configuration.vis-config-range{-webkit-appearance:none;border:0 solid #fff;background-color:rgba(0,0,0,0);width:300px;height:20px}input.vis-configuration.vis-config-range::-webkit-slider-runnable-track{width:300px;height:5px;background:#dedede;background:-moz-linear-gradient(top,#dedede 0,#c8c8c8 99%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#dedede),color-stop(99%,#c8c8c8));background:-webkit-linear-gradient(top,#dedede 0,#c8c8c8 99%);background:-o-linear-gradient(top,#dedede 0,#c8c8c8 99%);background:-ms-linear-gradient(top,#dedede 0,#c8c8c8 99%);background:linear-gradient(to bottom,#dedede 0,#c8c8c8 99%);border:1px solid #999;box-shadow:#aaa 0 0 3px 0;border-radius:3px}input.vis-configuration.vis-config-range::-webkit-slider-thumb{-webkit-appearance:none;border:1px solid #14334b;height:17px;width:17px;border-radius:50%;background:#3876c2;background:-moz-linear-gradient(top,#3876c2 0,#385380 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#3876c2),color-stop(100%,#385380));background:-webkit-linear-gradient(top,#3876c2 0,#385380 100%);background:-o-linear-gradient(top,#3876c2 0,#385380 100%);background:-ms-linear-gradient(top,#3876c2 0,#385380 100%);background:linear-gradient(to bottom,#3876c2 0,#385380 100%);box-shadow:#111927 0 0 1px 0;margin-top:-7px}input.vis-configuration.vis-config-range:focus{outline:0}input.vis-configuration.vis-config-range:focus::-webkit-slider-runnable-track{background:#9d9d9d;background:-moz-linear-gradient(top,#9d9d9d 0,#c8c8c8 99%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#9d9d9d),color-stop(99%,#c8c8c8));background:-webkit-linear-gradient(top,#9d9d9d 0,#c8c8c8 99%);background:-o-linear-gradient(top,#9d9d9d 0,#c8c8c8 99%);background:-ms-linear-gradient(top,#9d9d9d 0,#c8c8c8 99%);background:linear-gradient(to bottom,#9d9d9d 0,#c8c8c8 99%)}input.vis-configuration.vis-config-range::-moz-range-track{width:300px;height:10px;background:#dedede;background:-moz-linear-gradient(top,#dedede 0,#c8c8c8 99%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#dedede),color-stop(99%,#c8c8c8));background:-webkit-linear-gradient(top,#dedede 0,#c8c8c8 99%);background:-o-linear-gradient(top,#dedede 0,#c8c8c8 99%);background:-ms-linear-gradient(top,#dedede 0,#c8c8c8 99%);background:linear-gradient(to bottom,#dedede 0,#c8c8c8 99%);border:1px solid #999;box-shadow:#aaa 0 0 3px 0;border-radius:3px}input.vis-configuration.vis-config-range::-moz-range-thumb{border:none;height:16px;width:16px;border-radius:50%;background:#385380}input.vis-configuration.vis-config-range:-moz-focusring{outline:1px solid #fff;outline-offset:-1px}input.vis-configuration.vis-config-range::-ms-track{width:300px;height:5px;background:0 0;border-color:transparent;border-width:6px 0;color:transparent}input.vis-configuration.vis-config-range::-ms-fill-lower{background:#777;border-radius:10px}input.vis-configuration.vis-config-range::-ms-fill-upper{background:#ddd;border-radius:10px}input.vis-configuration.vis-config-range::-ms-thumb{border:none;height:16px;width:16px;border-radius:50%;background:#385380}input.vis-configuration.vis-config-range:focus::-ms-fill-lower{background:#888}input.vis-configuration.vis-config-range:focus::-ms-fill-upper{background:#ccc}.vis-configuration-popup{position:absolute;background:rgba(57,76,89,.85);border:2px solid #f2faff;line-height:30px;height:30px;width:150px;text-align:center;color:#fff;font-size:14px;border-radius:4px;-webkit-transition:opacity .3s ease-in-out;-moz-transition:opacity .3s ease-in-out;transition:opacity .3s ease-in-out}.vis-configuration-popup:after,.vis-configuration-popup:before{left:100%;top:50%;border:solid transparent;content:" ";height:0;width:0;position:absolute;pointer-events:none}.vis-configuration-popup:after{border-color:rgba(136,183,213,0);border-left-color:rgba(57,76,89,.85);border-width:8px;margin-top:-8px}.vis-configuration-popup:before{border-color:rgba(194,225,245,0);border-left-color:#f2faff;border-width:12px;margin-top:-12px}div.vis-tooltip{position:absolute;visibility:hidden;padding:5px;white-space:nowrap;font-family:verdana;font-size:14px;color:#000;background-color:#f5f4ed;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;border:1px solid #808074;box-shadow:3px 3px 10px rgba(0,0,0,.2);pointer-events:none;z-index:5}.vis-current-time{background-color:#ff7f6e;width:2px;z-index:1;pointer-events:none}.vis-rolling-mode-btn{height:40px;width:40px;position:absolute;top:7px;right:20px;border-radius:50%;font-size:28px;cursor:pointer;opacity:.8;color:#fff;font-weight:700;text-align:center;background:#3876c2}.vis-rolling-mode-btn:before{content:"\26F6"}.vis-rolling-mode-btn:hover{opacity:1}.vis-custom-time{background-color:#6e94ff;width:2px;cursor:move;z-index:1}.vis-panel.vis-background.vis-horizontal .vis-grid.vis-horizontal{position:absolute;width:100%;height:0;border-bottom:1px solid}.vis-panel.vis-background.vis-horizontal .vis-grid.vis-minor{border-color:#e5e5e5}.vis-panel.vis-background.vis-horizontal .vis-grid.vis-major{border-color:#bfbfbf}.vis-data-axis .vis-y-axis.vis-major{width:100%;position:absolute;color:#4d4d4d;white-space:nowrap}.vis-data-axis .vis-y-axis.vis-major.vis-measure{padding:0;margin:0;border:0;visibility:hidden;width:auto}.vis-data-axis .vis-y-axis.vis-minor{position:absolute;width:100%;color:#bebebe;white-space:nowrap}.vis-data-axis .vis-y-axis.vis-minor.vis-measure{padding:0;margin:0;border:0;visibility:hidden;width:auto}.vis-data-axis .vis-y-axis.vis-title{position:absolute;color:#4d4d4d;white-space:nowrap;bottom:20px;text-align:center}.vis-data-axis .vis-y-axis.vis-title.vis-measure{padding:0;margin:0;visibility:hidden;width:auto}.vis-data-axis .vis-y-axis.vis-title.vis-left{bottom:0;-webkit-transform-origin:left top;-moz-transform-origin:left top;-ms-transform-origin:left top;-o-transform-origin:left top;transform-origin:left bottom;-webkit-transform:rotate(-90deg);-moz-transform:rotate(-90deg);-ms-transform:rotate(-90deg);-o-transform:rotate(-90deg);transform:rotate(-90deg)}.vis-data-axis .vis-y-axis.vis-title.vis-right{bottom:0;-webkit-transform-origin:right bottom;-moz-transform-origin:right bottom;-ms-transform-origin:right bottom;-o-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);-ms-transform:rotate(90deg);-o-transform:rotate(90deg);transform:rotate(90deg)}.vis-legend{background-color:rgba(247,252,255,.65);padding:5px;border:1px solid #b3b3b3;box-shadow:2px 2px 10px rgba(154,154,154,.55)}.vis-legend-text{white-space:nowrap;display:inline-block}.vis-item{position:absolute;color:#1a1a1a;border-color:#97b0f8;border-width:1px;background-color:#d5ddf6;display:inline-block;z-index:1}.vis-item.vis-selected{border-color:#ffc200;background-color:#fff785;z-index:2}.vis-editable.vis-selected{cursor:move}.vis-item.vis-point.vis-selected{background-color:#fff785}.vis-item.vis-box{text-align:center;border-style:solid;border-radius:2px}.vis-item.vis-point{background:0 0}.vis-item.vis-dot{position:absolute;padding:0;border-width:4px;border-style:solid;border-radius:4px}.vis-item.vis-range{border-style:solid;border-radius:2px;box-sizing:border-box}.vis-item.vis-background{border:none;background-color:rgba(213,221,246,.4);box-sizing:border-box;padding:0;margin:0}.vis-item .vis-item-overflow{position:relative;width:100%;height:100%;padding:0;margin:0;overflow:hidden}.vis-item-visible-frame{white-space:nowrap}.vis-item.vis-range .vis-item-content{position:relative;display:inline-block}.vis-item.vis-background .vis-item-content{position:absolute;display:inline-block}.vis-item.vis-line{padding:0;position:absolute;width:0;border-left-width:1px;border-left-style:solid}.vis-item .vis-item-content{white-space:nowrap;box-sizing:border-box;padding:5px}.vis-item .vis-onUpdateTime-tooltip{position:absolute;background:#4f81bd;color:#fff;width:200px;text-align:center;white-space:nowrap;padding:5px;border-radius:1px;transition:.4s;-o-transition:.4s;-moz-transition:.4s;-webkit-transition:.4s}.vis-item .vis-delete,.vis-item .vis-delete-rtl{position:absolute;top:0;width:24px;height:24px;box-sizing:border-box;padding:0 5px;cursor:pointer;-webkit-transition:background .2s linear;-moz-transition:background .2s linear;-ms-transition:background .2s linear;-o-transition:background .2s linear;transition:background .2s linear}.vis-item .vis-delete{right:-24px}.vis-item .vis-delete-rtl{left:-24px}.vis-item .vis-delete-rtl:after,.vis-item .vis-delete:after{content:"\00D7";color:red;font-family:arial,sans-serif;font-size:22px;font-weight:700;-webkit-transition:color .2s linear;-moz-transition:color .2s linear;-ms-transition:color .2s linear;-o-transition:color .2s linear;transition:color .2s linear}.vis-item .vis-delete-rtl:hover,.vis-item .vis-delete:hover{background:red}.vis-item .vis-delete-rtl:hover:after,.vis-item .vis-delete:hover:after{color:#fff}.vis-item .vis-drag-center{position:absolute;width:100%;height:100%;top:0;left:0;cursor:move}.vis-item.vis-range .vis-drag-left{position:absolute;width:24px;max-width:20%;min-width:2px;height:100%;top:0;left:-4px;cursor:w-resize}.vis-item.vis-range .vis-drag-right{position:absolute;width:24px;max-width:20%;min-width:2px;height:100%;top:0;right:-4px;cursor:e-resize}.vis-range.vis-item.vis-readonly .vis-drag-left,.vis-range.vis-item.vis-readonly .vis-drag-right{cursor:auto}.vis-itemset{position:relative;padding:0;margin:0;box-sizing:border-box}.vis-itemset .vis-background,.vis-itemset .vis-foreground{position:absolute;width:100%;height:100%;overflow:visible}.vis-axis{position:absolute;width:100%;height:0;left:0;z-index:1}.vis-foreground .vis-group{position:relative;box-sizing:border-box;border-bottom:1px solid #bfbfbf}.vis-foreground .vis-group:last-child{border-bottom:none}.vis-nesting-group{cursor:pointer}.vis-nested-group{background:#f5f5f5}.vis-label.vis-nesting-group.expanded:before{content:"\25BC"}.vis-label.vis-nesting-group.collapsed-rtl:before{content:"\25C0"}.vis-label.vis-nesting-group.collapsed:before{content:"\25B6"}.vis-overlay{position:absolute;top:0;left:0;width:100%;height:100%;z-index:10}.vis-labelset{position:relative;overflow:hidden;box-sizing:border-box}.vis-labelset .vis-label{position:relative;left:0;top:0;width:100%;color:#4d4d4d;box-sizing:border-box}.vis-labelset .vis-label{border-bottom:1px solid #bfbfbf}.vis-labelset .vis-label.draggable{cursor:pointer}.vis-labelset .vis-label:last-child{border-bottom:none}.vis-labelset .vis-label .vis-inner{display:inline-block;padding:5px}.vis-labelset .vis-label .vis-inner.vis-hidden{padding:0}.vis-panel{position:absolute;padding:0;margin:0;box-sizing:border-box}.vis-panel.vis-bottom,.vis-panel.vis-center,.vis-panel.vis-left,.vis-panel.vis-right,.vis-panel.vis-top{border:1px #bfbfbf}.vis-panel.vis-center,.vis-panel.vis-left,.vis-panel.vis-right{border-top-style:solid;border-bottom-style:solid;overflow:hidden}.vis-left.vis-panel.vis-vertical-scroll,.vis-right.vis-panel.vis-vertical-scroll{height:100%;overflow-x:hidden;overflow-y:scroll}.vis-left.vis-panel.vis-vertical-scroll{direction:rtl}.vis-left.vis-panel.vis-vertical-scroll .vis-content{direction:ltr}.vis-right.vis-panel.vis-vertical-scroll{direction:ltr}.vis-right.vis-panel.vis-vertical-scroll .vis-content{direction:rtl}.vis-panel.vis-bottom,.vis-panel.vis-center,.vis-panel.vis-top{border-left-style:solid;border-right-style:solid}.vis-background{overflow:hidden}.vis-panel>.vis-content{position:relative}.vis-panel .vis-shadow{position:absolute;width:100%;height:1px;box-shadow:0 0 10px rgba(0,0,0,.8)}.vis-panel .vis-shadow.vis-top{top:-1px;left:0}.vis-panel .vis-shadow.vis-bottom{bottom:-1px;left:0}.vis-graph-group0{fill:#4f81bd;fill-opacity:0;stroke-width:2px;stroke:#4f81bd}.vis-graph-group1{fill:#f79646;fill-opacity:0;stroke-width:2px;stroke:#f79646}.vis-graph-group2{fill:#8c51cf;fill-opacity:0;stroke-width:2px;stroke:#8c51cf}.vis-graph-group3{fill:#75c841;fill-opacity:0;stroke-width:2px;stroke:#75c841}.vis-graph-group4{fill:#ff0100;fill-opacity:0;stroke-width:2px;stroke:#ff0100}.vis-graph-group5{fill:#37d8e6;fill-opacity:0;stroke-width:2px;stroke:#37d8e6}.vis-graph-group6{fill:#042662;fill-opacity:0;stroke-width:2px;stroke:#042662}.vis-graph-group7{fill:#00ff26;fill-opacity:0;stroke-width:2px;stroke:#00ff26}.vis-graph-group8{fill:#f0f;fill-opacity:0;stroke-width:2px;stroke:#f0f}.vis-graph-group9{fill:#8f3938;fill-opacity:0;stroke-width:2px;stroke:#8f3938}.vis-timeline .vis-fill{fill-opacity:.1;stroke:none}.vis-timeline .vis-bar{fill-opacity:.5;stroke-width:1px}.vis-timeline .vis-point{stroke-width:2px;fill-opacity:1}.vis-timeline .vis-legend-background{stroke-width:1px;fill-opacity:.9;fill:#fff;stroke:#c2c2c2}.vis-timeline .vis-outline{stroke-width:1px;fill-opacity:1;fill:#fff;stroke:#e5e5e5}.vis-timeline .vis-icon-fill{fill-opacity:.3;stroke:none}.vis-time-axis{position:relative;overflow:hidden}.vis-time-axis.vis-foreground{top:0;left:0;width:100%}.vis-time-axis.vis-background{position:absolute;top:0;left:0;width:100%;height:100%}.vis-time-axis .vis-text{position:absolute;color:#4d4d4d;padding:3px;overflow:hidden;box-sizing:border-box;white-space:nowrap}.vis-time-axis .vis-text.vis-measure{position:absolute;padding-left:0;padding-right:0;margin-left:0;margin-right:0;visibility:hidden}.vis-time-axis .vis-grid.vis-vertical{position:absolute;border-left:1px solid}.vis-time-axis .vis-grid.vis-vertical-rtl{position:absolute;border-right:1px solid}.vis-time-axis .vis-grid.vis-minor{border-color:#e5e5e5}.vis-time-axis .vis-grid.vis-major{border-color:#bfbfbf}.vis-timeline{position:relative;border:1px solid #bfbfbf;overflow:hidden;padding:0;margin:0;box-sizing:border-box}.vis-loading-screen{width:100%;height:100%;position:absolute;top:0;left:0} -------------------------------------------------------------------------------- /vis/vis.css: -------------------------------------------------------------------------------- 1 | .vis .overlay { 2 | position: absolute; 3 | top: 0; 4 | left: 0; 5 | width: 100%; 6 | height: 100%; 7 | 8 | /* Must be displayed above for example selected Timeline items */ 9 | z-index: 10; 10 | } 11 | 12 | .vis-active { 13 | box-shadow: 0 0 10px #86d5f8; 14 | } 15 | 16 | /* override some bootstrap styles screwing up the timelines css */ 17 | 18 | .vis [class*="span"] { 19 | min-height: 0; 20 | width: auto; 21 | } 22 | 23 | div.vis-configuration { 24 | position:relative; 25 | display:block; 26 | float:left; 27 | font-size:12px; 28 | } 29 | 30 | div.vis-configuration-wrapper { 31 | display:block; 32 | width:700px; 33 | } 34 | 35 | div.vis-configuration-wrapper::after { 36 | clear: both; 37 | content: ""; 38 | display: block; 39 | } 40 | 41 | div.vis-configuration.vis-config-option-container{ 42 | display:block; 43 | width:495px; 44 | background-color: #ffffff; 45 | border:2px solid #f7f8fa; 46 | border-radius:4px; 47 | margin-top:20px; 48 | left:10px; 49 | padding-left:5px; 50 | } 51 | 52 | div.vis-configuration.vis-config-button{ 53 | display:block; 54 | width:495px; 55 | height:25px; 56 | vertical-align: middle; 57 | line-height:25px; 58 | background-color: #f7f8fa; 59 | border:2px solid #ceced0; 60 | border-radius:4px; 61 | margin-top:20px; 62 | left:10px; 63 | padding-left:5px; 64 | cursor: pointer; 65 | margin-bottom:30px; 66 | } 67 | 68 | div.vis-configuration.vis-config-button.hover{ 69 | background-color: #4588e6; 70 | border:2px solid #214373; 71 | color:#ffffff; 72 | } 73 | 74 | div.vis-configuration.vis-config-item{ 75 | display:block; 76 | float:left; 77 | width:495px; 78 | height:25px; 79 | vertical-align: middle; 80 | line-height:25px; 81 | } 82 | 83 | 84 | div.vis-configuration.vis-config-item.vis-config-s2{ 85 | left:10px; 86 | background-color: #f7f8fa; 87 | padding-left:5px; 88 | border-radius:3px; 89 | } 90 | div.vis-configuration.vis-config-item.vis-config-s3{ 91 | left:20px; 92 | background-color: #e4e9f0; 93 | padding-left:5px; 94 | border-radius:3px; 95 | } 96 | div.vis-configuration.vis-config-item.vis-config-s4{ 97 | left:30px; 98 | background-color: #cfd8e6; 99 | padding-left:5px; 100 | border-radius:3px; 101 | } 102 | 103 | div.vis-configuration.vis-config-header{ 104 | font-size:18px; 105 | font-weight: bold; 106 | } 107 | 108 | div.vis-configuration.vis-config-label{ 109 | width:120px; 110 | height:25px; 111 | line-height: 25px; 112 | } 113 | 114 | div.vis-configuration.vis-config-label.vis-config-s3{ 115 | width:110px; 116 | } 117 | div.vis-configuration.vis-config-label.vis-config-s4{ 118 | width:100px; 119 | } 120 | 121 | div.vis-configuration.vis-config-colorBlock{ 122 | top:1px; 123 | width:30px; 124 | height:19px; 125 | border:1px solid #444444; 126 | border-radius:2px; 127 | padding:0px; 128 | margin:0px; 129 | cursor:pointer; 130 | } 131 | 132 | input.vis-configuration.vis-config-checkbox { 133 | left:-5px; 134 | } 135 | 136 | 137 | input.vis-configuration.vis-config-rangeinput{ 138 | position:relative; 139 | top:-5px; 140 | width:60px; 141 | /*height:13px;*/ 142 | padding:1px; 143 | margin:0; 144 | pointer-events:none; 145 | } 146 | 147 | input.vis-configuration.vis-config-range{ 148 | /*removes default webkit styles*/ 149 | -webkit-appearance: none; 150 | 151 | /*fix for FF unable to apply focus style bug */ 152 | border: 0px solid white; 153 | background-color:rgba(0,0,0,0); 154 | 155 | /*required for proper track sizing in FF*/ 156 | width: 300px; 157 | height:20px; 158 | } 159 | input.vis-configuration.vis-config-range::-webkit-slider-runnable-track { 160 | width: 300px; 161 | height: 5px; 162 | background: #dedede; /* Old browsers */ 163 | background: -moz-linear-gradient(top, #dedede 0%, #c8c8c8 99%); /* FF3.6+ */ 164 | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#dedede), color-stop(99%,#c8c8c8)); /* Chrome,Safari4+ */ 165 | background: -webkit-linear-gradient(top, #dedede 0%,#c8c8c8 99%); /* Chrome10+,Safari5.1+ */ 166 | background: -o-linear-gradient(top, #dedede 0%, #c8c8c8 99%); /* Opera 11.10+ */ 167 | background: -ms-linear-gradient(top, #dedede 0%,#c8c8c8 99%); /* IE10+ */ 168 | background: linear-gradient(to bottom, #dedede 0%,#c8c8c8 99%); /* W3C */ 169 | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dedede', endColorstr='#c8c8c8',GradientType=0 ); /* IE6-9 */ 170 | 171 | border: 1px solid #999999; 172 | box-shadow: #aaaaaa 0px 0px 3px 0px; 173 | border-radius: 3px; 174 | } 175 | input.vis-configuration.vis-config-range::-webkit-slider-thumb { 176 | -webkit-appearance: none; 177 | border: 1px solid #14334b; 178 | height: 17px; 179 | width: 17px; 180 | border-radius: 50%; 181 | background: #3876c2; /* Old browsers */ 182 | background: -moz-linear-gradient(top, #3876c2 0%, #385380 100%); /* FF3.6+ */ 183 | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3876c2), color-stop(100%,#385380)); /* Chrome,Safari4+ */ 184 | background: -webkit-linear-gradient(top, #3876c2 0%,#385380 100%); /* Chrome10+,Safari5.1+ */ 185 | background: -o-linear-gradient(top, #3876c2 0%,#385380 100%); /* Opera 11.10+ */ 186 | background: -ms-linear-gradient(top, #3876c2 0%,#385380 100%); /* IE10+ */ 187 | background: linear-gradient(to bottom, #3876c2 0%,#385380 100%); /* W3C */ 188 | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3876c2', endColorstr='#385380',GradientType=0 ); /* IE6-9 */ 189 | box-shadow: #111927 0px 0px 1px 0px; 190 | margin-top: -7px; 191 | } 192 | input.vis-configuration.vis-config-range:focus { 193 | outline: none; 194 | } 195 | input.vis-configuration.vis-config-range:focus::-webkit-slider-runnable-track { 196 | background: #9d9d9d; /* Old browsers */ 197 | background: -moz-linear-gradient(top, #9d9d9d 0%, #c8c8c8 99%); /* FF3.6+ */ 198 | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#9d9d9d), color-stop(99%,#c8c8c8)); /* Chrome,Safari4+ */ 199 | background: -webkit-linear-gradient(top, #9d9d9d 0%,#c8c8c8 99%); /* Chrome10+,Safari5.1+ */ 200 | background: -o-linear-gradient(top, #9d9d9d 0%,#c8c8c8 99%); /* Opera 11.10+ */ 201 | background: -ms-linear-gradient(top, #9d9d9d 0%,#c8c8c8 99%); /* IE10+ */ 202 | background: linear-gradient(to bottom, #9d9d9d 0%,#c8c8c8 99%); /* W3C */ 203 | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9d9d9d', endColorstr='#c8c8c8',GradientType=0 ); /* IE6-9 */ 204 | } 205 | 206 | input.vis-configuration.vis-config-range::-moz-range-track { 207 | width: 300px; 208 | height: 10px; 209 | background: #dedede; /* Old browsers */ 210 | background: -moz-linear-gradient(top, #dedede 0%, #c8c8c8 99%); /* FF3.6+ */ 211 | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#dedede), color-stop(99%,#c8c8c8)); /* Chrome,Safari4+ */ 212 | background: -webkit-linear-gradient(top, #dedede 0%,#c8c8c8 99%); /* Chrome10+,Safari5.1+ */ 213 | background: -o-linear-gradient(top, #dedede 0%, #c8c8c8 99%); /* Opera 11.10+ */ 214 | background: -ms-linear-gradient(top, #dedede 0%,#c8c8c8 99%); /* IE10+ */ 215 | background: linear-gradient(to bottom, #dedede 0%,#c8c8c8 99%); /* W3C */ 216 | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dedede', endColorstr='#c8c8c8',GradientType=0 ); /* IE6-9 */ 217 | 218 | border: 1px solid #999999; 219 | box-shadow: #aaaaaa 0px 0px 3px 0px; 220 | border-radius: 3px; 221 | } 222 | input.vis-configuration.vis-config-range::-moz-range-thumb { 223 | border: none; 224 | height: 16px; 225 | width: 16px; 226 | 227 | border-radius: 50%; 228 | background: #385380; 229 | } 230 | 231 | /*hide the outline behind the border*/ 232 | input.vis-configuration.vis-config-range:-moz-focusring{ 233 | outline: 1px solid white; 234 | outline-offset: -1px; 235 | } 236 | 237 | input.vis-configuration.vis-config-range::-ms-track { 238 | width: 300px; 239 | height: 5px; 240 | 241 | /*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */ 242 | background: transparent; 243 | 244 | /*leave room for the larger thumb to overflow with a transparent border */ 245 | border-color: transparent; 246 | border-width: 6px 0; 247 | 248 | /*remove default tick marks*/ 249 | color: transparent; 250 | } 251 | input.vis-configuration.vis-config-range::-ms-fill-lower { 252 | background: #777; 253 | border-radius: 10px; 254 | } 255 | input.vis-configuration.vis-config-range::-ms-fill-upper { 256 | background: #ddd; 257 | border-radius: 10px; 258 | } 259 | input.vis-configuration.vis-config-range::-ms-thumb { 260 | border: none; 261 | height: 16px; 262 | width: 16px; 263 | border-radius: 50%; 264 | background: #385380; 265 | } 266 | input.vis-configuration.vis-config-range:focus::-ms-fill-lower { 267 | background: #888; 268 | } 269 | input.vis-configuration.vis-config-range:focus::-ms-fill-upper { 270 | background: #ccc; 271 | } 272 | 273 | .vis-configuration-popup { 274 | position: absolute; 275 | background: rgba(57, 76, 89, 0.85); 276 | border: 2px solid #f2faff; 277 | line-height:30px; 278 | height:30px; 279 | width:150px; 280 | text-align:center; 281 | color: #ffffff; 282 | font-size:14px; 283 | border-radius:4px; 284 | -webkit-transition: opacity 0.3s ease-in-out; 285 | -moz-transition: opacity 0.3s ease-in-out; 286 | transition: opacity 0.3s ease-in-out; 287 | } 288 | .vis-configuration-popup:after, .vis-configuration-popup:before { 289 | left: 100%; 290 | top: 50%; 291 | border: solid transparent; 292 | content: " "; 293 | height: 0; 294 | width: 0; 295 | position: absolute; 296 | pointer-events: none; 297 | } 298 | 299 | .vis-configuration-popup:after { 300 | border-color: rgba(136, 183, 213, 0); 301 | border-left-color: rgba(57, 76, 89, 0.85); 302 | border-width: 8px; 303 | margin-top: -8px; 304 | } 305 | .vis-configuration-popup:before { 306 | border-color: rgba(194, 225, 245, 0); 307 | border-left-color: #f2faff; 308 | border-width: 12px; 309 | margin-top: -12px; 310 | } 311 | div.vis-tooltip { 312 | position: absolute; 313 | visibility: hidden; 314 | padding: 5px; 315 | white-space: nowrap; 316 | 317 | font-family: verdana; 318 | font-size:14px; 319 | color:#000000; 320 | background-color: #f5f4ed; 321 | 322 | -moz-border-radius: 3px; 323 | -webkit-border-radius: 3px; 324 | border-radius: 3px; 325 | border: 1px solid #808074; 326 | 327 | box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2); 328 | pointer-events: none; 329 | 330 | z-index: 5; 331 | } 332 | 333 | 334 | div.vis-color-picker { 335 | position:absolute; 336 | top: 0px; 337 | left: 30px; 338 | margin-top:-140px; 339 | margin-left:30px; 340 | width:310px; 341 | height:444px; 342 | z-index: 1; 343 | padding: 10px; 344 | border-radius:15px; 345 | background-color:#ffffff; 346 | display: none; 347 | box-shadow: rgba(0,0,0,0.5) 0px 0px 10px 0px; 348 | } 349 | 350 | div.vis-color-picker div.vis-arrow { 351 | position: absolute; 352 | top:147px; 353 | left:5px; 354 | } 355 | 356 | div.vis-color-picker div.vis-arrow::after, 357 | div.vis-color-picker div.vis-arrow::before { 358 | right: 100%; 359 | top: 50%; 360 | border: solid transparent; 361 | content: " "; 362 | height: 0; 363 | width: 0; 364 | position: absolute; 365 | pointer-events: none; 366 | } 367 | 368 | div.vis-color-picker div.vis-arrow:after { 369 | border-color: rgba(255, 255, 255, 0); 370 | border-right-color: #ffffff; 371 | border-width: 30px; 372 | margin-top: -30px; 373 | } 374 | 375 | div.vis-color-picker div.vis-color { 376 | position:absolute; 377 | width: 289px; 378 | height: 289px; 379 | cursor: pointer; 380 | } 381 | 382 | 383 | 384 | div.vis-color-picker div.vis-brightness { 385 | position: absolute; 386 | top:313px; 387 | } 388 | 389 | div.vis-color-picker div.vis-opacity { 390 | position:absolute; 391 | top:350px; 392 | } 393 | 394 | div.vis-color-picker div.vis-selector { 395 | position:absolute; 396 | top:137px; 397 | left:137px; 398 | width:15px; 399 | height:15px; 400 | border-radius:15px; 401 | border:1px solid #ffffff; 402 | background: #4c4c4c; /* Old browsers */ 403 | background: -moz-linear-gradient(top, #4c4c4c 0%, #595959 12%, #666666 25%, #474747 39%, #2c2c2c 50%, #000000 51%, #111111 60%, #2b2b2b 76%, #1c1c1c 91%, #131313 100%); /* FF3.6+ */ 404 | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4c4c4c), color-stop(12%,#595959), color-stop(25%,#666666), color-stop(39%,#474747), color-stop(50%,#2c2c2c), color-stop(51%,#000000), color-stop(60%,#111111), color-stop(76%,#2b2b2b), color-stop(91%,#1c1c1c), color-stop(100%,#131313)); /* Chrome,Safari4+ */ 405 | background: -webkit-linear-gradient(top, #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%); /* Chrome10+,Safari5.1+ */ 406 | background: -o-linear-gradient(top, #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%); /* Opera 11.10+ */ 407 | background: -ms-linear-gradient(top, #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%); /* IE10+ */ 408 | background: linear-gradient(to bottom, #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%); /* W3C */ 409 | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313',GradientType=0 ); /* IE6-9 */ 410 | } 411 | 412 | 413 | 414 | div.vis-color-picker div.vis-new-color { 415 | position:absolute; 416 | width:140px; 417 | height:20px; 418 | border:1px solid rgba(0,0,0,0.1); 419 | border-radius:5px; 420 | top:380px; 421 | left:159px; 422 | text-align:right; 423 | padding-right:2px; 424 | font-size:10px; 425 | color:rgba(0,0,0,0.4); 426 | vertical-align:middle; 427 | line-height:20px; 428 | 429 | } 430 | 431 | div.vis-color-picker div.vis-initial-color { 432 | position:absolute; 433 | width:140px; 434 | height:20px; 435 | border:1px solid rgba(0,0,0,0.1); 436 | border-radius:5px; 437 | top:380px; 438 | left:10px; 439 | text-align:left; 440 | padding-left:2px; 441 | font-size:10px; 442 | color:rgba(0,0,0,0.4); 443 | vertical-align:middle; 444 | line-height:20px; 445 | } 446 | 447 | div.vis-color-picker div.vis-label { 448 | position:absolute; 449 | width:300px; 450 | left:10px; 451 | } 452 | 453 | div.vis-color-picker div.vis-label.vis-brightness { 454 | top:300px; 455 | } 456 | 457 | div.vis-color-picker div.vis-label.vis-opacity { 458 | top:338px; 459 | } 460 | 461 | div.vis-color-picker div.vis-button { 462 | position:absolute; 463 | width:68px; 464 | height:25px; 465 | border-radius:10px; 466 | vertical-align: middle; 467 | text-align:center; 468 | line-height: 25px; 469 | top:410px; 470 | border:2px solid #d9d9d9; 471 | background-color: #f7f7f7; 472 | cursor:pointer; 473 | } 474 | 475 | div.vis-color-picker div.vis-button.vis-cancel { 476 | /*border:2px solid #ff4e33;*/ 477 | /*background-color: #ff7761;*/ 478 | left:5px; 479 | } 480 | div.vis-color-picker div.vis-button.vis-load { 481 | /*border:2px solid #a153e6;*/ 482 | /*background-color: #cb8dff;*/ 483 | left:82px; 484 | } 485 | div.vis-color-picker div.vis-button.vis-apply { 486 | /*border:2px solid #4588e6;*/ 487 | /*background-color: #82b6ff;*/ 488 | left:159px; 489 | } 490 | div.vis-color-picker div.vis-button.vis-save { 491 | /*border:2px solid #45e655;*/ 492 | /*background-color: #6dff7c;*/ 493 | left:236px; 494 | } 495 | 496 | 497 | div.vis-color-picker input.vis-range { 498 | width: 290px; 499 | height:20px; 500 | } 501 | 502 | /* TODO: is this redundant? 503 | div.vis-color-picker input.vis-range-brightness { 504 | width: 289px !important; 505 | } 506 | 507 | 508 | div.vis-color-picker input.vis-saturation-range { 509 | width: 289px !important; 510 | }*/ 511 | div.vis-network div.vis-manipulation { 512 | box-sizing: content-box; 513 | 514 | border-width: 0; 515 | border-bottom: 1px; 516 | border-style:solid; 517 | border-color: #d6d9d8; 518 | background: #ffffff; /* Old browsers */ 519 | background: -moz-linear-gradient(top, #ffffff 0%, #fcfcfc 48%, #fafafa 50%, #fcfcfc 100%); /* FF3.6+ */ 520 | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(48%,#fcfcfc), color-stop(50%,#fafafa), color-stop(100%,#fcfcfc)); /* Chrome,Safari4+ */ 521 | background: -webkit-linear-gradient(top, #ffffff 0%,#fcfcfc 48%,#fafafa 50%,#fcfcfc 100%); /* Chrome10+,Safari5.1+ */ 522 | background: -o-linear-gradient(top, #ffffff 0%,#fcfcfc 48%,#fafafa 50%,#fcfcfc 100%); /* Opera 11.10+ */ 523 | background: -ms-linear-gradient(top, #ffffff 0%,#fcfcfc 48%,#fafafa 50%,#fcfcfc 100%); /* IE10+ */ 524 | background: linear-gradient(to bottom, #ffffff 0%,#fcfcfc 48%,#fafafa 50%,#fcfcfc 100%); /* W3C */ 525 | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#fcfcfc',GradientType=0 ); /* IE6-9 */ 526 | 527 | padding-top:4px; 528 | position: absolute; 529 | left: 0; 530 | top: 0; 531 | width: 100%; 532 | height: 28px; 533 | } 534 | 535 | div.vis-network div.vis-edit-mode { 536 | position:absolute; 537 | left: 0; 538 | top: 5px; 539 | height: 30px; 540 | } 541 | 542 | /* FIXME: shouldn't the vis-close button be a child of the vis-manipulation div? */ 543 | 544 | div.vis-network div.vis-close { 545 | position:absolute; 546 | right: 0; 547 | top: 0; 548 | width: 30px; 549 | height: 30px; 550 | 551 | background-position: 20px 3px; 552 | background-repeat: no-repeat; 553 | background-image: url("img/network/cross.png"); 554 | cursor: pointer; 555 | -webkit-touch-callout: none; 556 | -webkit-user-select: none; 557 | -khtml-user-select: none; 558 | -moz-user-select: none; 559 | -ms-user-select: none; 560 | user-select: none; 561 | } 562 | 563 | div.vis-network div.vis-close:hover { 564 | opacity: 0.6; 565 | } 566 | 567 | div.vis-network div.vis-manipulation div.vis-button, 568 | div.vis-network div.vis-edit-mode div.vis-button { 569 | float:left; 570 | font-family: verdana; 571 | font-size: 12px; 572 | -moz-border-radius: 15px; 573 | border-radius: 15px; 574 | display:inline-block; 575 | background-position: 0px 0px; 576 | background-repeat:no-repeat; 577 | height:24px; 578 | margin-left: 10px; 579 | /*vertical-align:middle;*/ 580 | cursor: pointer; 581 | padding: 0px 8px 0px 8px; 582 | -webkit-touch-callout: none; 583 | -webkit-user-select: none; 584 | -khtml-user-select: none; 585 | -moz-user-select: none; 586 | -ms-user-select: none; 587 | user-select: none; 588 | } 589 | 590 | div.vis-network div.vis-manipulation div.vis-button:hover { 591 | box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.20); 592 | } 593 | 594 | div.vis-network div.vis-manipulation div.vis-button:active { 595 | box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.50); 596 | } 597 | 598 | div.vis-network div.vis-manipulation div.vis-button.vis-back { 599 | background-image: url("img/network/backIcon.png"); 600 | } 601 | 602 | div.vis-network div.vis-manipulation div.vis-button.vis-none:hover { 603 | box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.0); 604 | cursor: default; 605 | } 606 | div.vis-network div.vis-manipulation div.vis-button.vis-none:active { 607 | box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.0); 608 | } 609 | div.vis-network div.vis-manipulation div.vis-button.vis-none { 610 | padding: 0; 611 | } 612 | div.vis-network div.vis-manipulation div.notification { 613 | margin: 2px; 614 | font-weight: bold; 615 | } 616 | 617 | div.vis-network div.vis-manipulation div.vis-button.vis-add { 618 | background-image: url("img/network/addNodeIcon.png"); 619 | } 620 | 621 | div.vis-network div.vis-manipulation div.vis-button.vis-edit, 622 | div.vis-network div.vis-edit-mode div.vis-button.vis-edit { 623 | background-image: url("img/network/editIcon.png"); 624 | } 625 | 626 | div.vis-network div.vis-edit-mode div.vis-button.vis-edit.vis-edit-mode { 627 | background-color: #fcfcfc; 628 | border: 1px solid #cccccc; 629 | } 630 | 631 | div.vis-network div.vis-manipulation div.vis-button.vis-connect { 632 | background-image: url("img/network/connectIcon.png"); 633 | } 634 | 635 | div.vis-network div.vis-manipulation div.vis-button.vis-delete { 636 | background-image: url("img/network/deleteIcon.png"); 637 | } 638 | /* top right bottom left */ 639 | div.vis-network div.vis-manipulation div.vis-label, 640 | div.vis-network div.vis-edit-mode div.vis-label { 641 | margin: 0 0 0 23px; 642 | line-height: 25px; 643 | } 644 | div.vis-network div.vis-manipulation div.vis-separator-line { 645 | float:left; 646 | display:inline-block; 647 | width:1px; 648 | height:21px; 649 | background-color: #bdbdbd; 650 | margin: 0px 7px 0 15px; /*top right bottom left*/ 651 | } 652 | 653 | /* TODO: is this redundant? 654 | div.network-navigation_wrapper { 655 | position: absolute; 656 | left: 0; 657 | top: 0; 658 | width: 100%; 659 | height: 100%; 660 | } 661 | */ 662 | 663 | div.vis-network div.vis-navigation div.vis-button { 664 | width:34px; 665 | height:34px; 666 | -moz-border-radius: 17px; 667 | border-radius: 17px; 668 | position:absolute; 669 | display:inline-block; 670 | background-position: 2px 2px; 671 | background-repeat:no-repeat; 672 | cursor: pointer; 673 | -webkit-touch-callout: none; 674 | -webkit-user-select: none; 675 | -khtml-user-select: none; 676 | -moz-user-select: none; 677 | -ms-user-select: none; 678 | user-select: none; 679 | } 680 | 681 | div.vis-network div.vis-navigation div.vis-button:hover { 682 | box-shadow: 0 0 3px 3px rgba(56, 207, 21, 0.30); 683 | } 684 | 685 | div.vis-network div.vis-navigation div.vis-button:active { 686 | box-shadow: 0 0 1px 3px rgba(56, 207, 21, 0.95); 687 | } 688 | 689 | div.vis-network div.vis-navigation div.vis-button.vis-up { 690 | background-image: url("img/network/upArrow.png"); 691 | bottom:50px; 692 | left:55px; 693 | } 694 | div.vis-network div.vis-navigation div.vis-button.vis-down { 695 | background-image: url("img/network/downArrow.png"); 696 | bottom:10px; 697 | left:55px; 698 | } 699 | div.vis-network div.vis-navigation div.vis-button.vis-left { 700 | background-image: url("img/network/leftArrow.png"); 701 | bottom:10px; 702 | left:15px; 703 | } 704 | div.vis-network div.vis-navigation div.vis-button.vis-right { 705 | background-image: url("img/network/rightArrow.png"); 706 | bottom:10px; 707 | left:95px; 708 | } 709 | div.vis-network div.vis-navigation div.vis-button.vis-zoomIn { 710 | background-image: url("img/network/plus.png"); 711 | bottom:10px; 712 | right:15px; 713 | } 714 | div.vis-network div.vis-navigation div.vis-button.vis-zoomOut { 715 | background-image: url("img/network/minus.png"); 716 | bottom:10px; 717 | right:55px; 718 | } 719 | div.vis-network div.vis-navigation div.vis-button.vis-zoomExtends { 720 | background-image: url("img/network/zoomExtends.png"); 721 | bottom:50px; 722 | right:15px; 723 | } 724 | .vis-timeline { 725 | /* 726 | -webkit-transition: height .4s ease-in-out; 727 | transition: height .4s ease-in-out; 728 | */ 729 | } 730 | 731 | .vis-panel { 732 | /* 733 | -webkit-transition: height .4s ease-in-out, top .4s ease-in-out; 734 | transition: height .4s ease-in-out, top .4s ease-in-out; 735 | */ 736 | } 737 | 738 | .vis-axis { 739 | /* 740 | -webkit-transition: top .4s ease-in-out; 741 | transition: top .4s ease-in-out; 742 | */ 743 | } 744 | 745 | /* TODO: get animation working nicely 746 | 747 | .vis-item { 748 | -webkit-transition: top .4s ease-in-out; 749 | transition: top .4s ease-in-out; 750 | } 751 | 752 | .vis-item.line { 753 | -webkit-transition: height .4s ease-in-out, top .4s ease-in-out; 754 | transition: height .4s ease-in-out, top .4s ease-in-out; 755 | } 756 | /**/ 757 | .vis-current-time { 758 | background-color: #FF7F6E; 759 | width: 2px; 760 | z-index: 1; 761 | pointer-events: none; 762 | } 763 | 764 | .vis-rolling-mode-btn { 765 | height: 40px; 766 | width: 40px; 767 | position: absolute; 768 | top: 7px; 769 | right: 20px; 770 | border-radius: 50%; 771 | font-size: 28px; 772 | cursor: pointer; 773 | opacity: 0.8; 774 | color: white; 775 | font-weight: bold; 776 | text-align: center; 777 | background: #3876c2; 778 | } 779 | .vis-rolling-mode-btn:before { 780 | content: "\26F6"; 781 | } 782 | 783 | .vis-rolling-mode-btn:hover { 784 | opacity: 1; 785 | } 786 | .vis-custom-time { 787 | background-color: #6E94FF; 788 | width: 2px; 789 | cursor: move; 790 | z-index: 1; 791 | } 792 | 793 | .vis-panel.vis-background.vis-horizontal .vis-grid.vis-horizontal { 794 | position: absolute; 795 | width: 100%; 796 | height: 0; 797 | border-bottom: 1px solid; 798 | } 799 | 800 | .vis-panel.vis-background.vis-horizontal .vis-grid.vis-minor { 801 | border-color: #e5e5e5; 802 | } 803 | 804 | .vis-panel.vis-background.vis-horizontal .vis-grid.vis-major { 805 | border-color: #bfbfbf; 806 | } 807 | 808 | 809 | .vis-data-axis .vis-y-axis.vis-major { 810 | width: 100%; 811 | position: absolute; 812 | color: #4d4d4d; 813 | white-space: nowrap; 814 | } 815 | 816 | .vis-data-axis .vis-y-axis.vis-major.vis-measure { 817 | padding: 0; 818 | margin: 0; 819 | border: 0; 820 | visibility: hidden; 821 | width: auto; 822 | } 823 | 824 | 825 | .vis-data-axis .vis-y-axis.vis-minor { 826 | position: absolute; 827 | width: 100%; 828 | color: #bebebe; 829 | white-space: nowrap; 830 | } 831 | 832 | .vis-data-axis .vis-y-axis.vis-minor.vis-measure { 833 | padding: 0; 834 | margin: 0; 835 | border: 0; 836 | visibility: hidden; 837 | width: auto; 838 | } 839 | 840 | .vis-data-axis .vis-y-axis.vis-title { 841 | position: absolute; 842 | color: #4d4d4d; 843 | white-space: nowrap; 844 | bottom: 20px; 845 | text-align: center; 846 | } 847 | 848 | .vis-data-axis .vis-y-axis.vis-title.vis-measure { 849 | padding: 0; 850 | margin: 0; 851 | visibility: hidden; 852 | width: auto; 853 | } 854 | 855 | .vis-data-axis .vis-y-axis.vis-title.vis-left { 856 | bottom: 0; 857 | -webkit-transform-origin: left top; 858 | -moz-transform-origin: left top; 859 | -ms-transform-origin: left top; 860 | -o-transform-origin: left top; 861 | transform-origin: left bottom; 862 | -webkit-transform: rotate(-90deg); 863 | -moz-transform: rotate(-90deg); 864 | -ms-transform: rotate(-90deg); 865 | -o-transform: rotate(-90deg); 866 | transform: rotate(-90deg); 867 | } 868 | 869 | .vis-data-axis .vis-y-axis.vis-title.vis-right { 870 | bottom: 0; 871 | -webkit-transform-origin: right bottom; 872 | -moz-transform-origin: right bottom; 873 | -ms-transform-origin: right bottom; 874 | -o-transform-origin: right bottom; 875 | transform-origin: right bottom; 876 | -webkit-transform: rotate(90deg); 877 | -moz-transform: rotate(90deg); 878 | -ms-transform: rotate(90deg); 879 | -o-transform: rotate(90deg); 880 | transform: rotate(90deg); 881 | } 882 | 883 | .vis-legend { 884 | background-color: rgba(247, 252, 255, 0.65); 885 | padding: 5px; 886 | border: 1px solid #b3b3b3; 887 | box-shadow: 2px 2px 10px rgba(154, 154, 154, 0.55); 888 | } 889 | 890 | .vis-legend-text { 891 | /*font-size: 10px;*/ 892 | white-space: nowrap; 893 | display: inline-block 894 | } 895 | 896 | .vis-item { 897 | position: absolute; 898 | color: #1A1A1A; 899 | border-color: #97B0F8; 900 | border-width: 1px; 901 | background-color: #D5DDF6; 902 | display: inline-block; 903 | z-index: 1; 904 | /*overflow: hidden;*/ 905 | } 906 | 907 | .vis-item.vis-selected { 908 | border-color: #FFC200; 909 | background-color: #FFF785; 910 | 911 | /* z-index must be higher than the z-index of custom time bar and current time bar */ 912 | z-index: 2; 913 | } 914 | 915 | .vis-editable.vis-selected { 916 | cursor: move; 917 | } 918 | 919 | .vis-item.vis-point.vis-selected { 920 | background-color: #FFF785; 921 | } 922 | 923 | .vis-item.vis-box { 924 | text-align: center; 925 | border-style: solid; 926 | border-radius: 2px; 927 | } 928 | 929 | .vis-item.vis-point { 930 | background: none; 931 | } 932 | 933 | .vis-item.vis-dot { 934 | position: absolute; 935 | padding: 0; 936 | border-width: 4px; 937 | border-style: solid; 938 | border-radius: 4px; 939 | } 940 | 941 | .vis-item.vis-range { 942 | border-style: solid; 943 | border-radius: 2px; 944 | box-sizing: border-box; 945 | } 946 | 947 | .vis-item.vis-background { 948 | border: none; 949 | background-color: rgba(213, 221, 246, 0.4); 950 | box-sizing: border-box; 951 | padding: 0; 952 | margin: 0; 953 | } 954 | 955 | .vis-item .vis-item-overflow { 956 | position: relative; 957 | width: 100%; 958 | height: 100%; 959 | padding: 0; 960 | margin: 0; 961 | overflow: hidden; 962 | } 963 | 964 | .vis-item-visible-frame { 965 | white-space: nowrap; 966 | } 967 | 968 | .vis-item.vis-range .vis-item-content { 969 | position: relative; 970 | display: inline-block; 971 | } 972 | 973 | .vis-item.vis-background .vis-item-content { 974 | position: absolute; 975 | display: inline-block; 976 | } 977 | 978 | .vis-item.vis-line { 979 | padding: 0; 980 | position: absolute; 981 | width: 0; 982 | border-left-width: 1px; 983 | border-left-style: solid; 984 | } 985 | 986 | .vis-item .vis-item-content { 987 | white-space: nowrap; 988 | box-sizing: border-box; 989 | padding: 5px; 990 | } 991 | 992 | .vis-item .vis-onUpdateTime-tooltip { 993 | position: absolute; 994 | background: #4f81bd; 995 | color: white; 996 | width: 200px; 997 | text-align: center; 998 | white-space: nowrap; 999 | padding: 5px; 1000 | border-radius: 1px; 1001 | transition: 0.4s; 1002 | -o-transition: 0.4s; 1003 | -moz-transition: 0.4s; 1004 | -webkit-transition: 0.4s; 1005 | } 1006 | 1007 | .vis-item .vis-delete, .vis-item .vis-delete-rtl { 1008 | position: absolute; 1009 | top: 0px; 1010 | width: 24px; 1011 | height: 24px; 1012 | box-sizing: border-box; 1013 | padding: 0px 5px; 1014 | cursor: pointer; 1015 | 1016 | -webkit-transition: background 0.2s linear; 1017 | -moz-transition: background 0.2s linear; 1018 | -ms-transition: background 0.2s linear; 1019 | -o-transition: background 0.2s linear; 1020 | transition: background 0.2s linear; 1021 | } 1022 | 1023 | .vis-item .vis-delete { 1024 | right: -24px; 1025 | } 1026 | 1027 | .vis-item .vis-delete-rtl { 1028 | left: -24px; 1029 | } 1030 | 1031 | .vis-item .vis-delete:after, .vis-item .vis-delete-rtl:after { 1032 | content: "\00D7"; /* MULTIPLICATION SIGN */ 1033 | color: red; 1034 | font-family: arial, sans-serif; 1035 | font-size: 22px; 1036 | font-weight: bold; 1037 | 1038 | -webkit-transition: color 0.2s linear; 1039 | -moz-transition: color 0.2s linear; 1040 | -ms-transition: color 0.2s linear; 1041 | -o-transition: color 0.2s linear; 1042 | transition: color 0.2s linear; 1043 | } 1044 | 1045 | .vis-item .vis-delete:hover, .vis-item .vis-delete-rtl:hover { 1046 | background: red; 1047 | } 1048 | 1049 | .vis-item .vis-delete:hover:after, .vis-item .vis-delete-rtl:hover:after { 1050 | color: white; 1051 | } 1052 | 1053 | .vis-item .vis-drag-center { 1054 | position: absolute; 1055 | width: 100%; 1056 | height: 100%; 1057 | top: 0; 1058 | left: 0px; 1059 | cursor: move; 1060 | } 1061 | 1062 | .vis-item.vis-range .vis-drag-left { 1063 | position: absolute; 1064 | width: 24px; 1065 | max-width: 20%; 1066 | min-width: 2px; 1067 | height: 100%; 1068 | top: 0; 1069 | left: -4px; 1070 | 1071 | cursor: w-resize; 1072 | } 1073 | 1074 | .vis-item.vis-range .vis-drag-right { 1075 | position: absolute; 1076 | width: 24px; 1077 | max-width: 20%; 1078 | min-width: 2px; 1079 | height: 100%; 1080 | top: 0; 1081 | right: -4px; 1082 | 1083 | cursor: e-resize; 1084 | } 1085 | 1086 | .vis-range.vis-item.vis-readonly .vis-drag-left, 1087 | .vis-range.vis-item.vis-readonly .vis-drag-right { 1088 | cursor: auto; 1089 | } 1090 | 1091 | 1092 | .vis-itemset { 1093 | position: relative; 1094 | padding: 0; 1095 | margin: 0; 1096 | 1097 | box-sizing: border-box; 1098 | } 1099 | 1100 | .vis-itemset .vis-background, 1101 | .vis-itemset .vis-foreground { 1102 | position: absolute; 1103 | width: 100%; 1104 | height: 100%; 1105 | overflow: visible; 1106 | } 1107 | 1108 | .vis-axis { 1109 | position: absolute; 1110 | width: 100%; 1111 | height: 0; 1112 | left: 0; 1113 | z-index: 1; 1114 | } 1115 | 1116 | .vis-foreground .vis-group { 1117 | position: relative; 1118 | box-sizing: border-box; 1119 | border-bottom: 1px solid #bfbfbf; 1120 | } 1121 | 1122 | .vis-foreground .vis-group:last-child { 1123 | border-bottom: none; 1124 | } 1125 | 1126 | .vis-nesting-group { 1127 | cursor: pointer; 1128 | } 1129 | 1130 | .vis-nested-group { 1131 | background: #f5f5f5; 1132 | } 1133 | 1134 | .vis-label.vis-nesting-group.expanded:before { 1135 | content: "\25BC"; 1136 | } 1137 | 1138 | .vis-label.vis-nesting-group.collapsed-rtl:before { 1139 | content: "\25C0"; 1140 | } 1141 | 1142 | .vis-label.vis-nesting-group.collapsed:before { 1143 | content: "\25B6"; 1144 | } 1145 | 1146 | .vis-overlay { 1147 | position: absolute; 1148 | top: 0; 1149 | left: 0; 1150 | width: 100%; 1151 | height: 100%; 1152 | z-index: 10; 1153 | } 1154 | 1155 | .vis-labelset { 1156 | position: relative; 1157 | 1158 | overflow: hidden; 1159 | 1160 | box-sizing: border-box; 1161 | } 1162 | 1163 | .vis-labelset .vis-label { 1164 | position: relative; 1165 | left: 0; 1166 | top: 0; 1167 | width: 100%; 1168 | color: #4d4d4d; 1169 | 1170 | box-sizing: border-box; 1171 | } 1172 | 1173 | .vis-labelset .vis-label { 1174 | border-bottom: 1px solid #bfbfbf; 1175 | } 1176 | 1177 | .vis-labelset .vis-label.draggable { 1178 | cursor: pointer; 1179 | } 1180 | 1181 | .vis-labelset .vis-label:last-child { 1182 | border-bottom: none; 1183 | } 1184 | 1185 | .vis-labelset .vis-label .vis-inner { 1186 | display: inline-block; 1187 | padding: 5px; 1188 | } 1189 | 1190 | .vis-labelset .vis-label .vis-inner.vis-hidden { 1191 | padding: 0; 1192 | } 1193 | 1194 | .vis-panel { 1195 | position: absolute; 1196 | 1197 | padding: 0; 1198 | margin: 0; 1199 | 1200 | box-sizing: border-box; 1201 | } 1202 | 1203 | .vis-panel.vis-center, 1204 | .vis-panel.vis-left, 1205 | .vis-panel.vis-right, 1206 | .vis-panel.vis-top, 1207 | .vis-panel.vis-bottom { 1208 | border: 1px #bfbfbf; 1209 | } 1210 | 1211 | .vis-panel.vis-center, 1212 | .vis-panel.vis-left, 1213 | .vis-panel.vis-right { 1214 | border-top-style: solid; 1215 | border-bottom-style: solid; 1216 | overflow: hidden; 1217 | } 1218 | 1219 | .vis-left.vis-panel.vis-vertical-scroll, .vis-right.vis-panel.vis-vertical-scroll { 1220 | height: 100%; 1221 | overflow-x: hidden; 1222 | overflow-y: scroll; 1223 | } 1224 | 1225 | .vis-left.vis-panel.vis-vertical-scroll { 1226 | direction: rtl; 1227 | } 1228 | 1229 | .vis-left.vis-panel.vis-vertical-scroll .vis-content { 1230 | direction: ltr; 1231 | } 1232 | 1233 | .vis-right.vis-panel.vis-vertical-scroll { 1234 | direction: ltr; 1235 | } 1236 | 1237 | .vis-right.vis-panel.vis-vertical-scroll .vis-content { 1238 | direction: rtl; 1239 | } 1240 | 1241 | .vis-panel.vis-center, 1242 | .vis-panel.vis-top, 1243 | .vis-panel.vis-bottom { 1244 | border-left-style: solid; 1245 | border-right-style: solid; 1246 | } 1247 | 1248 | .vis-background { 1249 | overflow: hidden; 1250 | } 1251 | 1252 | .vis-panel > .vis-content { 1253 | position: relative; 1254 | } 1255 | 1256 | .vis-panel .vis-shadow { 1257 | position: absolute; 1258 | width: 100%; 1259 | height: 1px; 1260 | box-shadow: 0 0 10px rgba(0,0,0,0.8); 1261 | /* TODO: find a nice way to ensure vis-shadows are drawn on top of items 1262 | z-index: 1; 1263 | */ 1264 | } 1265 | 1266 | .vis-panel .vis-shadow.vis-top { 1267 | top: -1px; 1268 | left: 0; 1269 | } 1270 | 1271 | .vis-panel .vis-shadow.vis-bottom { 1272 | bottom: -1px; 1273 | left: 0; 1274 | } 1275 | .vis-graph-group0 { 1276 | fill:#4f81bd; 1277 | fill-opacity:0; 1278 | stroke-width:2px; 1279 | stroke: #4f81bd; 1280 | } 1281 | 1282 | .vis-graph-group1 { 1283 | fill:#f79646; 1284 | fill-opacity:0; 1285 | stroke-width:2px; 1286 | stroke: #f79646; 1287 | } 1288 | 1289 | .vis-graph-group2 { 1290 | fill: #8c51cf; 1291 | fill-opacity:0; 1292 | stroke-width:2px; 1293 | stroke: #8c51cf; 1294 | } 1295 | 1296 | .vis-graph-group3 { 1297 | fill: #75c841; 1298 | fill-opacity:0; 1299 | stroke-width:2px; 1300 | stroke: #75c841; 1301 | } 1302 | 1303 | .vis-graph-group4 { 1304 | fill: #ff0100; 1305 | fill-opacity:0; 1306 | stroke-width:2px; 1307 | stroke: #ff0100; 1308 | } 1309 | 1310 | .vis-graph-group5 { 1311 | fill: #37d8e6; 1312 | fill-opacity:0; 1313 | stroke-width:2px; 1314 | stroke: #37d8e6; 1315 | } 1316 | 1317 | .vis-graph-group6 { 1318 | fill: #042662; 1319 | fill-opacity:0; 1320 | stroke-width:2px; 1321 | stroke: #042662; 1322 | } 1323 | 1324 | .vis-graph-group7 { 1325 | fill:#00ff26; 1326 | fill-opacity:0; 1327 | stroke-width:2px; 1328 | stroke: #00ff26; 1329 | } 1330 | 1331 | .vis-graph-group8 { 1332 | fill:#ff00ff; 1333 | fill-opacity:0; 1334 | stroke-width:2px; 1335 | stroke: #ff00ff; 1336 | } 1337 | 1338 | .vis-graph-group9 { 1339 | fill: #8f3938; 1340 | fill-opacity:0; 1341 | stroke-width:2px; 1342 | stroke: #8f3938; 1343 | } 1344 | 1345 | .vis-timeline .vis-fill { 1346 | fill-opacity:0.1; 1347 | stroke: none; 1348 | } 1349 | 1350 | 1351 | .vis-timeline .vis-bar { 1352 | fill-opacity:0.5; 1353 | stroke-width:1px; 1354 | } 1355 | 1356 | .vis-timeline .vis-point { 1357 | stroke-width:2px; 1358 | fill-opacity:1.0; 1359 | } 1360 | 1361 | 1362 | .vis-timeline .vis-legend-background { 1363 | stroke-width:1px; 1364 | fill-opacity:0.9; 1365 | fill: #ffffff; 1366 | stroke: #c2c2c2; 1367 | } 1368 | 1369 | 1370 | .vis-timeline .vis-outline { 1371 | stroke-width:1px; 1372 | fill-opacity:1; 1373 | fill: #ffffff; 1374 | stroke: #e5e5e5; 1375 | } 1376 | 1377 | .vis-timeline .vis-icon-fill { 1378 | fill-opacity:0.3; 1379 | stroke: none; 1380 | } 1381 | 1382 | .vis-time-axis { 1383 | position: relative; 1384 | overflow: hidden; 1385 | } 1386 | 1387 | .vis-time-axis.vis-foreground { 1388 | top: 0; 1389 | left: 0; 1390 | width: 100%; 1391 | } 1392 | 1393 | .vis-time-axis.vis-background { 1394 | position: absolute; 1395 | top: 0; 1396 | left: 0; 1397 | width: 100%; 1398 | height: 100%; 1399 | } 1400 | 1401 | .vis-time-axis .vis-text { 1402 | position: absolute; 1403 | color: #4d4d4d; 1404 | padding: 3px; 1405 | overflow: hidden; 1406 | box-sizing: border-box; 1407 | 1408 | white-space: nowrap; 1409 | } 1410 | 1411 | .vis-time-axis .vis-text.vis-measure { 1412 | position: absolute; 1413 | padding-left: 0; 1414 | padding-right: 0; 1415 | margin-left: 0; 1416 | margin-right: 0; 1417 | visibility: hidden; 1418 | } 1419 | 1420 | .vis-time-axis .vis-grid.vis-vertical { 1421 | position: absolute; 1422 | border-left: 1px solid; 1423 | } 1424 | 1425 | .vis-time-axis .vis-grid.vis-vertical-rtl { 1426 | position: absolute; 1427 | border-right: 1px solid; 1428 | } 1429 | 1430 | .vis-time-axis .vis-grid.vis-minor { 1431 | border-color: #e5e5e5; 1432 | } 1433 | 1434 | .vis-time-axis .vis-grid.vis-major { 1435 | border-color: #bfbfbf; 1436 | } 1437 | 1438 | 1439 | .vis-timeline { 1440 | position: relative; 1441 | border: 1px solid #bfbfbf; 1442 | overflow: hidden; 1443 | padding: 0; 1444 | margin: 0; 1445 | box-sizing: border-box; 1446 | } 1447 | 1448 | .vis-loading-screen { 1449 | width: 100%; 1450 | height: 100%; 1451 | position: absolute; 1452 | top: 0; 1453 | left: 0; 1454 | } -------------------------------------------------------------------------------- /vis/vis.min.css: -------------------------------------------------------------------------------- 1 | .vis .overlay{position:absolute;top:0;left:0;width:100%;height:100%;z-index:10}.vis-active{box-shadow:0 0 10px #86d5f8}.vis [class*=span]{min-height:0;width:auto}div.vis-configuration{position:relative;display:block;float:left;font-size:12px}div.vis-configuration-wrapper{display:block;width:700px}div.vis-configuration-wrapper::after{clear:both;content:"";display:block}div.vis-configuration.vis-config-option-container{display:block;width:495px;background-color:#fff;border:2px solid #f7f8fa;border-radius:4px;margin-top:20px;left:10px;padding-left:5px}div.vis-configuration.vis-config-button{display:block;width:495px;height:25px;vertical-align:middle;line-height:25px;background-color:#f7f8fa;border:2px solid #ceced0;border-radius:4px;margin-top:20px;left:10px;padding-left:5px;cursor:pointer;margin-bottom:30px}div.vis-configuration.vis-config-button.hover{background-color:#4588e6;border:2px solid #214373;color:#fff}div.vis-configuration.vis-config-item{display:block;float:left;width:495px;height:25px;vertical-align:middle;line-height:25px}div.vis-configuration.vis-config-item.vis-config-s2{left:10px;background-color:#f7f8fa;padding-left:5px;border-radius:3px}div.vis-configuration.vis-config-item.vis-config-s3{left:20px;background-color:#e4e9f0;padding-left:5px;border-radius:3px}div.vis-configuration.vis-config-item.vis-config-s4{left:30px;background-color:#cfd8e6;padding-left:5px;border-radius:3px}div.vis-configuration.vis-config-header{font-size:18px;font-weight:700}div.vis-configuration.vis-config-label{width:120px;height:25px;line-height:25px}div.vis-configuration.vis-config-label.vis-config-s3{width:110px}div.vis-configuration.vis-config-label.vis-config-s4{width:100px}div.vis-configuration.vis-config-colorBlock{top:1px;width:30px;height:19px;border:1px solid #444;border-radius:2px;padding:0;margin:0;cursor:pointer}input.vis-configuration.vis-config-checkbox{left:-5px}input.vis-configuration.vis-config-rangeinput{position:relative;top:-5px;width:60px;padding:1px;margin:0;pointer-events:none}input.vis-configuration.vis-config-range{-webkit-appearance:none;border:0 solid #fff;background-color:rgba(0,0,0,0);width:300px;height:20px}input.vis-configuration.vis-config-range::-webkit-slider-runnable-track{width:300px;height:5px;background:#dedede;background:-moz-linear-gradient(top,#dedede 0,#c8c8c8 99%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#dedede),color-stop(99%,#c8c8c8));background:-webkit-linear-gradient(top,#dedede 0,#c8c8c8 99%);background:-o-linear-gradient(top,#dedede 0,#c8c8c8 99%);background:-ms-linear-gradient(top,#dedede 0,#c8c8c8 99%);background:linear-gradient(to bottom,#dedede 0,#c8c8c8 99%);border:1px solid #999;box-shadow:#aaa 0 0 3px 0;border-radius:3px}input.vis-configuration.vis-config-range::-webkit-slider-thumb{-webkit-appearance:none;border:1px solid #14334b;height:17px;width:17px;border-radius:50%;background:#3876c2;background:-moz-linear-gradient(top,#3876c2 0,#385380 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#3876c2),color-stop(100%,#385380));background:-webkit-linear-gradient(top,#3876c2 0,#385380 100%);background:-o-linear-gradient(top,#3876c2 0,#385380 100%);background:-ms-linear-gradient(top,#3876c2 0,#385380 100%);background:linear-gradient(to bottom,#3876c2 0,#385380 100%);box-shadow:#111927 0 0 1px 0;margin-top:-7px}input.vis-configuration.vis-config-range:focus{outline:0}input.vis-configuration.vis-config-range:focus::-webkit-slider-runnable-track{background:#9d9d9d;background:-moz-linear-gradient(top,#9d9d9d 0,#c8c8c8 99%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#9d9d9d),color-stop(99%,#c8c8c8));background:-webkit-linear-gradient(top,#9d9d9d 0,#c8c8c8 99%);background:-o-linear-gradient(top,#9d9d9d 0,#c8c8c8 99%);background:-ms-linear-gradient(top,#9d9d9d 0,#c8c8c8 99%);background:linear-gradient(to bottom,#9d9d9d 0,#c8c8c8 99%)}input.vis-configuration.vis-config-range::-moz-range-track{width:300px;height:10px;background:#dedede;background:-moz-linear-gradient(top,#dedede 0,#c8c8c8 99%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#dedede),color-stop(99%,#c8c8c8));background:-webkit-linear-gradient(top,#dedede 0,#c8c8c8 99%);background:-o-linear-gradient(top,#dedede 0,#c8c8c8 99%);background:-ms-linear-gradient(top,#dedede 0,#c8c8c8 99%);background:linear-gradient(to bottom,#dedede 0,#c8c8c8 99%);border:1px solid #999;box-shadow:#aaa 0 0 3px 0;border-radius:3px}input.vis-configuration.vis-config-range::-moz-range-thumb{border:none;height:16px;width:16px;border-radius:50%;background:#385380}input.vis-configuration.vis-config-range:-moz-focusring{outline:1px solid #fff;outline-offset:-1px}input.vis-configuration.vis-config-range::-ms-track{width:300px;height:5px;background:0 0;border-color:transparent;border-width:6px 0;color:transparent}input.vis-configuration.vis-config-range::-ms-fill-lower{background:#777;border-radius:10px}input.vis-configuration.vis-config-range::-ms-fill-upper{background:#ddd;border-radius:10px}input.vis-configuration.vis-config-range::-ms-thumb{border:none;height:16px;width:16px;border-radius:50%;background:#385380}input.vis-configuration.vis-config-range:focus::-ms-fill-lower{background:#888}input.vis-configuration.vis-config-range:focus::-ms-fill-upper{background:#ccc}.vis-configuration-popup{position:absolute;background:rgba(57,76,89,.85);border:2px solid #f2faff;line-height:30px;height:30px;width:150px;text-align:center;color:#fff;font-size:14px;border-radius:4px;-webkit-transition:opacity .3s ease-in-out;-moz-transition:opacity .3s ease-in-out;transition:opacity .3s ease-in-out}.vis-configuration-popup:after,.vis-configuration-popup:before{left:100%;top:50%;border:solid transparent;content:" ";height:0;width:0;position:absolute;pointer-events:none}.vis-configuration-popup:after{border-color:rgba(136,183,213,0);border-left-color:rgba(57,76,89,.85);border-width:8px;margin-top:-8px}.vis-configuration-popup:before{border-color:rgba(194,225,245,0);border-left-color:#f2faff;border-width:12px;margin-top:-12px}div.vis-tooltip{position:absolute;visibility:hidden;padding:5px;white-space:nowrap;font-family:verdana;font-size:14px;color:#000;background-color:#f5f4ed;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;border:1px solid #808074;box-shadow:3px 3px 10px rgba(0,0,0,.2);pointer-events:none;z-index:5}div.vis-color-picker{position:absolute;top:0;left:30px;margin-top:-140px;margin-left:30px;width:310px;height:444px;z-index:1;padding:10px;border-radius:15px;background-color:#fff;display:none;box-shadow:rgba(0,0,0,.5) 0 0 10px 0}div.vis-color-picker div.vis-arrow{position:absolute;top:147px;left:5px}div.vis-color-picker div.vis-arrow::after,div.vis-color-picker div.vis-arrow::before{right:100%;top:50%;border:solid transparent;content:" ";height:0;width:0;position:absolute;pointer-events:none}div.vis-color-picker div.vis-arrow:after{border-color:rgba(255,255,255,0);border-right-color:#fff;border-width:30px;margin-top:-30px}div.vis-color-picker div.vis-color{position:absolute;width:289px;height:289px;cursor:pointer}div.vis-color-picker div.vis-brightness{position:absolute;top:313px}div.vis-color-picker div.vis-opacity{position:absolute;top:350px}div.vis-color-picker div.vis-selector{position:absolute;top:137px;left:137px;width:15px;height:15px;border-radius:15px;border:1px solid #fff;background:#4c4c4c;background:-moz-linear-gradient(top,#4c4c4c 0,#595959 12%,#666 25%,#474747 39%,#2c2c2c 50%,#000 51%,#111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#4c4c4c),color-stop(12%,#595959),color-stop(25%,#666),color-stop(39%,#474747),color-stop(50%,#2c2c2c),color-stop(51%,#000),color-stop(60%,#111),color-stop(76%,#2b2b2b),color-stop(91%,#1c1c1c),color-stop(100%,#131313));background:-webkit-linear-gradient(top,#4c4c4c 0,#595959 12%,#666 25%,#474747 39%,#2c2c2c 50%,#000 51%,#111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%);background:-o-linear-gradient(top,#4c4c4c 0,#595959 12%,#666 25%,#474747 39%,#2c2c2c 50%,#000 51%,#111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%);background:-ms-linear-gradient(top,#4c4c4c 0,#595959 12%,#666 25%,#474747 39%,#2c2c2c 50%,#000 51%,#111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%);background:linear-gradient(to bottom,#4c4c4c 0,#595959 12%,#666 25%,#474747 39%,#2c2c2c 50%,#000 51%,#111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%)}div.vis-color-picker div.vis-new-color{position:absolute;width:140px;height:20px;border:1px solid rgba(0,0,0,.1);border-radius:5px;top:380px;left:159px;text-align:right;padding-right:2px;font-size:10px;color:rgba(0,0,0,.4);vertical-align:middle;line-height:20px}div.vis-color-picker div.vis-initial-color{position:absolute;width:140px;height:20px;border:1px solid rgba(0,0,0,.1);border-radius:5px;top:380px;left:10px;text-align:left;padding-left:2px;font-size:10px;color:rgba(0,0,0,.4);vertical-align:middle;line-height:20px}div.vis-color-picker div.vis-label{position:absolute;width:300px;left:10px}div.vis-color-picker div.vis-label.vis-brightness{top:300px}div.vis-color-picker div.vis-label.vis-opacity{top:338px}div.vis-color-picker div.vis-button{position:absolute;width:68px;height:25px;border-radius:10px;vertical-align:middle;text-align:center;line-height:25px;top:410px;border:2px solid #d9d9d9;background-color:#f7f7f7;cursor:pointer}div.vis-color-picker div.vis-button.vis-cancel{left:5px}div.vis-color-picker div.vis-button.vis-load{left:82px}div.vis-color-picker div.vis-button.vis-apply{left:159px}div.vis-color-picker div.vis-button.vis-save{left:236px}div.vis-color-picker input.vis-range{width:290px;height:20px}div.vis-network div.vis-manipulation{box-sizing:content-box;border-width:0;border-bottom:1px;border-style:solid;border-color:#d6d9d8;background:#fff;background:-moz-linear-gradient(top,#fff 0,#fcfcfc 48%,#fafafa 50%,#fcfcfc 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#fff),color-stop(48%,#fcfcfc),color-stop(50%,#fafafa),color-stop(100%,#fcfcfc));background:-webkit-linear-gradient(top,#fff 0,#fcfcfc 48%,#fafafa 50%,#fcfcfc 100%);background:-o-linear-gradient(top,#fff 0,#fcfcfc 48%,#fafafa 50%,#fcfcfc 100%);background:-ms-linear-gradient(top,#fff 0,#fcfcfc 48%,#fafafa 50%,#fcfcfc 100%);background:linear-gradient(to bottom,#fff 0,#fcfcfc 48%,#fafafa 50%,#fcfcfc 100%);padding-top:4px;position:absolute;left:0;top:0;width:100%;height:28px}div.vis-network div.vis-edit-mode{position:absolute;left:0;top:5px;height:30px}div.vis-network div.vis-close{position:absolute;right:0;top:0;width:30px;height:30px;background-position:20px 3px;background-repeat:no-repeat;background-image:url(img/network/cross.png);cursor:pointer;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}div.vis-network div.vis-close:hover{opacity:.6}div.vis-network div.vis-edit-mode div.vis-button,div.vis-network div.vis-manipulation div.vis-button{float:left;font-family:verdana;font-size:12px;-moz-border-radius:15px;border-radius:15px;display:inline-block;background-position:0 0;background-repeat:no-repeat;height:24px;margin-left:10px;cursor:pointer;padding:0 8px 0 8px;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}div.vis-network div.vis-manipulation div.vis-button:hover{box-shadow:1px 1px 8px rgba(0,0,0,.2)}div.vis-network div.vis-manipulation div.vis-button:active{box-shadow:1px 1px 8px rgba(0,0,0,.5)}div.vis-network div.vis-manipulation div.vis-button.vis-back{background-image:url(img/network/backIcon.png)}div.vis-network div.vis-manipulation div.vis-button.vis-none:hover{box-shadow:1px 1px 8px transparent;cursor:default}div.vis-network div.vis-manipulation div.vis-button.vis-none:active{box-shadow:1px 1px 8px transparent}div.vis-network div.vis-manipulation div.vis-button.vis-none{padding:0}div.vis-network div.vis-manipulation div.notification{margin:2px;font-weight:700}div.vis-network div.vis-manipulation div.vis-button.vis-add{background-image:url(img/network/addNodeIcon.png)}div.vis-network div.vis-edit-mode div.vis-button.vis-edit,div.vis-network div.vis-manipulation div.vis-button.vis-edit{background-image:url(img/network/editIcon.png)}div.vis-network div.vis-edit-mode div.vis-button.vis-edit.vis-edit-mode{background-color:#fcfcfc;border:1px solid #ccc}div.vis-network div.vis-manipulation div.vis-button.vis-connect{background-image:url(img/network/connectIcon.png)}div.vis-network div.vis-manipulation div.vis-button.vis-delete{background-image:url(img/network/deleteIcon.png)}div.vis-network div.vis-edit-mode div.vis-label,div.vis-network div.vis-manipulation div.vis-label{margin:0 0 0 23px;line-height:25px}div.vis-network div.vis-manipulation div.vis-separator-line{float:left;display:inline-block;width:1px;height:21px;background-color:#bdbdbd;margin:0 7px 0 15px}div.vis-network div.vis-navigation div.vis-button{width:34px;height:34px;-moz-border-radius:17px;border-radius:17px;position:absolute;display:inline-block;background-position:2px 2px;background-repeat:no-repeat;cursor:pointer;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}div.vis-network div.vis-navigation div.vis-button:hover{box-shadow:0 0 3px 3px rgba(56,207,21,.3)}div.vis-network div.vis-navigation div.vis-button:active{box-shadow:0 0 1px 3px rgba(56,207,21,.95)}div.vis-network div.vis-navigation div.vis-button.vis-up{background-image:url(img/network/upArrow.png);bottom:50px;left:55px}div.vis-network div.vis-navigation div.vis-button.vis-down{background-image:url(img/network/downArrow.png);bottom:10px;left:55px}div.vis-network div.vis-navigation div.vis-button.vis-left{background-image:url(img/network/leftArrow.png);bottom:10px;left:15px}div.vis-network div.vis-navigation div.vis-button.vis-right{background-image:url(img/network/rightArrow.png);bottom:10px;left:95px}div.vis-network div.vis-navigation div.vis-button.vis-zoomIn{background-image:url(img/network/plus.png);bottom:10px;right:15px}div.vis-network div.vis-navigation div.vis-button.vis-zoomOut{background-image:url(img/network/minus.png);bottom:10px;right:55px}div.vis-network div.vis-navigation div.vis-button.vis-zoomExtends{background-image:url(img/network/zoomExtends.png);bottom:50px;right:15px}.vis-current-time{background-color:#ff7f6e;width:2px;z-index:1;pointer-events:none}.vis-rolling-mode-btn{height:40px;width:40px;position:absolute;top:7px;right:20px;border-radius:50%;font-size:28px;cursor:pointer;opacity:.8;color:#fff;font-weight:700;text-align:center;background:#3876c2}.vis-rolling-mode-btn:before{content:"\26F6"}.vis-rolling-mode-btn:hover{opacity:1}.vis-custom-time{background-color:#6e94ff;width:2px;cursor:move;z-index:1}.vis-panel.vis-background.vis-horizontal .vis-grid.vis-horizontal{position:absolute;width:100%;height:0;border-bottom:1px solid}.vis-panel.vis-background.vis-horizontal .vis-grid.vis-minor{border-color:#e5e5e5}.vis-panel.vis-background.vis-horizontal .vis-grid.vis-major{border-color:#bfbfbf}.vis-data-axis .vis-y-axis.vis-major{width:100%;position:absolute;color:#4d4d4d;white-space:nowrap}.vis-data-axis .vis-y-axis.vis-major.vis-measure{padding:0;margin:0;border:0;visibility:hidden;width:auto}.vis-data-axis .vis-y-axis.vis-minor{position:absolute;width:100%;color:#bebebe;white-space:nowrap}.vis-data-axis .vis-y-axis.vis-minor.vis-measure{padding:0;margin:0;border:0;visibility:hidden;width:auto}.vis-data-axis .vis-y-axis.vis-title{position:absolute;color:#4d4d4d;white-space:nowrap;bottom:20px;text-align:center}.vis-data-axis .vis-y-axis.vis-title.vis-measure{padding:0;margin:0;visibility:hidden;width:auto}.vis-data-axis .vis-y-axis.vis-title.vis-left{bottom:0;-webkit-transform-origin:left top;-moz-transform-origin:left top;-ms-transform-origin:left top;-o-transform-origin:left top;transform-origin:left bottom;-webkit-transform:rotate(-90deg);-moz-transform:rotate(-90deg);-ms-transform:rotate(-90deg);-o-transform:rotate(-90deg);transform:rotate(-90deg)}.vis-data-axis .vis-y-axis.vis-title.vis-right{bottom:0;-webkit-transform-origin:right bottom;-moz-transform-origin:right bottom;-ms-transform-origin:right bottom;-o-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);-ms-transform:rotate(90deg);-o-transform:rotate(90deg);transform:rotate(90deg)}.vis-legend{background-color:rgba(247,252,255,.65);padding:5px;border:1px solid #b3b3b3;box-shadow:2px 2px 10px rgba(154,154,154,.55)}.vis-legend-text{white-space:nowrap;display:inline-block}.vis-item{position:absolute;color:#1a1a1a;border-color:#97b0f8;border-width:1px;background-color:#d5ddf6;display:inline-block;z-index:1}.vis-item.vis-selected{border-color:#ffc200;background-color:#fff785;z-index:2}.vis-editable.vis-selected{cursor:move}.vis-item.vis-point.vis-selected{background-color:#fff785}.vis-item.vis-box{text-align:center;border-style:solid;border-radius:2px}.vis-item.vis-point{background:0 0}.vis-item.vis-dot{position:absolute;padding:0;border-width:4px;border-style:solid;border-radius:4px}.vis-item.vis-range{border-style:solid;border-radius:2px;box-sizing:border-box}.vis-item.vis-background{border:none;background-color:rgba(213,221,246,.4);box-sizing:border-box;padding:0;margin:0}.vis-item .vis-item-overflow{position:relative;width:100%;height:100%;padding:0;margin:0;overflow:hidden}.vis-item-visible-frame{white-space:nowrap}.vis-item.vis-range .vis-item-content{position:relative;display:inline-block}.vis-item.vis-background .vis-item-content{position:absolute;display:inline-block}.vis-item.vis-line{padding:0;position:absolute;width:0;border-left-width:1px;border-left-style:solid}.vis-item .vis-item-content{white-space:nowrap;box-sizing:border-box;padding:5px}.vis-item .vis-onUpdateTime-tooltip{position:absolute;background:#4f81bd;color:#fff;width:200px;text-align:center;white-space:nowrap;padding:5px;border-radius:1px;transition:.4s;-o-transition:.4s;-moz-transition:.4s;-webkit-transition:.4s}.vis-item .vis-delete,.vis-item .vis-delete-rtl{position:absolute;top:0;width:24px;height:24px;box-sizing:border-box;padding:0 5px;cursor:pointer;-webkit-transition:background .2s linear;-moz-transition:background .2s linear;-ms-transition:background .2s linear;-o-transition:background .2s linear;transition:background .2s linear}.vis-item .vis-delete{right:-24px}.vis-item .vis-delete-rtl{left:-24px}.vis-item .vis-delete-rtl:after,.vis-item .vis-delete:after{content:"\00D7";color:red;font-family:arial,sans-serif;font-size:22px;font-weight:700;-webkit-transition:color .2s linear;-moz-transition:color .2s linear;-ms-transition:color .2s linear;-o-transition:color .2s linear;transition:color .2s linear}.vis-item .vis-delete-rtl:hover,.vis-item .vis-delete:hover{background:red}.vis-item .vis-delete-rtl:hover:after,.vis-item .vis-delete:hover:after{color:#fff}.vis-item .vis-drag-center{position:absolute;width:100%;height:100%;top:0;left:0;cursor:move}.vis-item.vis-range .vis-drag-left{position:absolute;width:24px;max-width:20%;min-width:2px;height:100%;top:0;left:-4px;cursor:w-resize}.vis-item.vis-range .vis-drag-right{position:absolute;width:24px;max-width:20%;min-width:2px;height:100%;top:0;right:-4px;cursor:e-resize}.vis-range.vis-item.vis-readonly .vis-drag-left,.vis-range.vis-item.vis-readonly .vis-drag-right{cursor:auto}.vis-itemset{position:relative;padding:0;margin:0;box-sizing:border-box}.vis-itemset .vis-background,.vis-itemset .vis-foreground{position:absolute;width:100%;height:100%;overflow:visible}.vis-axis{position:absolute;width:100%;height:0;left:0;z-index:1}.vis-foreground .vis-group{position:relative;box-sizing:border-box;border-bottom:1px solid #bfbfbf}.vis-foreground .vis-group:last-child{border-bottom:none}.vis-nesting-group{cursor:pointer}.vis-nested-group{background:#f5f5f5}.vis-label.vis-nesting-group.expanded:before{content:"\25BC"}.vis-label.vis-nesting-group.collapsed-rtl:before{content:"\25C0"}.vis-label.vis-nesting-group.collapsed:before{content:"\25B6"}.vis-overlay{position:absolute;top:0;left:0;width:100%;height:100%;z-index:10}.vis-labelset{position:relative;overflow:hidden;box-sizing:border-box}.vis-labelset .vis-label{position:relative;left:0;top:0;width:100%;color:#4d4d4d;box-sizing:border-box}.vis-labelset .vis-label{border-bottom:1px solid #bfbfbf}.vis-labelset .vis-label.draggable{cursor:pointer}.vis-labelset .vis-label:last-child{border-bottom:none}.vis-labelset .vis-label .vis-inner{display:inline-block;padding:5px}.vis-labelset .vis-label .vis-inner.vis-hidden{padding:0}.vis-panel{position:absolute;padding:0;margin:0;box-sizing:border-box}.vis-panel.vis-bottom,.vis-panel.vis-center,.vis-panel.vis-left,.vis-panel.vis-right,.vis-panel.vis-top{border:1px #bfbfbf}.vis-panel.vis-center,.vis-panel.vis-left,.vis-panel.vis-right{border-top-style:solid;border-bottom-style:solid;overflow:hidden}.vis-left.vis-panel.vis-vertical-scroll,.vis-right.vis-panel.vis-vertical-scroll{height:100%;overflow-x:hidden;overflow-y:scroll}.vis-left.vis-panel.vis-vertical-scroll{direction:rtl}.vis-left.vis-panel.vis-vertical-scroll .vis-content{direction:ltr}.vis-right.vis-panel.vis-vertical-scroll{direction:ltr}.vis-right.vis-panel.vis-vertical-scroll .vis-content{direction:rtl}.vis-panel.vis-bottom,.vis-panel.vis-center,.vis-panel.vis-top{border-left-style:solid;border-right-style:solid}.vis-background{overflow:hidden}.vis-panel>.vis-content{position:relative}.vis-panel .vis-shadow{position:absolute;width:100%;height:1px;box-shadow:0 0 10px rgba(0,0,0,.8)}.vis-panel .vis-shadow.vis-top{top:-1px;left:0}.vis-panel .vis-shadow.vis-bottom{bottom:-1px;left:0}.vis-graph-group0{fill:#4f81bd;fill-opacity:0;stroke-width:2px;stroke:#4f81bd}.vis-graph-group1{fill:#f79646;fill-opacity:0;stroke-width:2px;stroke:#f79646}.vis-graph-group2{fill:#8c51cf;fill-opacity:0;stroke-width:2px;stroke:#8c51cf}.vis-graph-group3{fill:#75c841;fill-opacity:0;stroke-width:2px;stroke:#75c841}.vis-graph-group4{fill:#ff0100;fill-opacity:0;stroke-width:2px;stroke:#ff0100}.vis-graph-group5{fill:#37d8e6;fill-opacity:0;stroke-width:2px;stroke:#37d8e6}.vis-graph-group6{fill:#042662;fill-opacity:0;stroke-width:2px;stroke:#042662}.vis-graph-group7{fill:#00ff26;fill-opacity:0;stroke-width:2px;stroke:#00ff26}.vis-graph-group8{fill:#f0f;fill-opacity:0;stroke-width:2px;stroke:#f0f}.vis-graph-group9{fill:#8f3938;fill-opacity:0;stroke-width:2px;stroke:#8f3938}.vis-timeline .vis-fill{fill-opacity:.1;stroke:none}.vis-timeline .vis-bar{fill-opacity:.5;stroke-width:1px}.vis-timeline .vis-point{stroke-width:2px;fill-opacity:1}.vis-timeline .vis-legend-background{stroke-width:1px;fill-opacity:.9;fill:#fff;stroke:#c2c2c2}.vis-timeline .vis-outline{stroke-width:1px;fill-opacity:1;fill:#fff;stroke:#e5e5e5}.vis-timeline .vis-icon-fill{fill-opacity:.3;stroke:none}.vis-time-axis{position:relative;overflow:hidden}.vis-time-axis.vis-foreground{top:0;left:0;width:100%}.vis-time-axis.vis-background{position:absolute;top:0;left:0;width:100%;height:100%}.vis-time-axis .vis-text{position:absolute;color:#4d4d4d;padding:3px;overflow:hidden;box-sizing:border-box;white-space:nowrap}.vis-time-axis .vis-text.vis-measure{position:absolute;padding-left:0;padding-right:0;margin-left:0;margin-right:0;visibility:hidden}.vis-time-axis .vis-grid.vis-vertical{position:absolute;border-left:1px solid}.vis-time-axis .vis-grid.vis-vertical-rtl{position:absolute;border-right:1px solid}.vis-time-axis .vis-grid.vis-minor{border-color:#e5e5e5}.vis-time-axis .vis-grid.vis-major{border-color:#bfbfbf}.vis-timeline{position:relative;border:1px solid #bfbfbf;overflow:hidden;padding:0;margin:0;box-sizing:border-box}.vis-loading-screen{width:100%;height:100%;position:absolute;top:0;left:0} -------------------------------------------------------------------------------- /下载 (4).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/allwaysoft/Python-SNMP-LLDP-SQLite3-vis.js-topology/b0b76c4d014abe35ddd303f675c0ef24225f9886/下载 (4).png --------------------------------------------------------------------------------