Skip to content

Commit 28f6e5b

Browse files
committed
update styles for cytoscape linear gradient
1 parent 415d96c commit 28f6e5b

File tree

1 file changed

+14
-7
lines changed

1 file changed

+14
-7
lines changed

cesnet_service_path_plugin/templates/cesnet_service_path_plugin/inc/topology_visualization.html

Lines changed: 14 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -160,9 +160,10 @@
160160
selector: 'node[type="service"]',
161161
style: {
162162
'shape': 'round-rectangle',
163-
'background-color': '#bfdbfe',
163+
'background-fill': 'linear-gradient',
164+
'background-gradient-stop-colors': ['#bfdbfe', '#93c5fd'],
165+
'background-gradient-direction': 'to-bottom-right',
164166
'background-opacity': 0.7,
165-
'background-image': 'linear-gradient(135deg, #bfdbfe 0%, #93c5fd 100%)',
166167
'border-color': '#2563eb',
167168
'border-width': 2,
168169
'border-opacity': 0.8,
@@ -178,7 +179,7 @@
178179
'text-max-width': '200px',
179180
'box-shadow': '0 8px 24px rgba(37, 99, 235, 0.25), 0 2px 8px rgba(37, 99, 235, 0.12), inset 0 1px 2px rgba(255, 255, 255, 0.5)',
180181
'corner-radius': 14
181-
}
182+
}
182183
},
183184

184185
// Segment styling - Medium blue with transparency
@@ -188,7 +189,9 @@
188189
'shape': 'round-rectangle',
189190
'background-color': '#dbeafe',
190191
'background-opacity': 0.7,
191-
'background-image': 'linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%)',
192+
'background-fill': 'linear-gradient',
193+
'background-gradient-stop-colors': ['#bfdbfe', '#93c5fd'],
194+
'background-gradient-direction': 'to-bottom-right',
192195
'border-color': '#3b82f6',
193196
'border-width': 2,
194197
'border-opacity': 0.8,
@@ -214,7 +217,9 @@
214217
'shape': 'round-rectangle',
215218
'background-color': '#7dd3fc',
216219
'background-opacity': 0.75,
217-
'background-image': 'linear-gradient(135deg, #7dd3fc 0%, #38bdf8 100%)',
220+
'background-fill': 'linear-gradient',
221+
'background-gradient-stop-colors': ['#bfdbfe', '#93c5fd'],
222+
'background-gradient-direction': 'to-bottom-right',
218223
'border-color': '#0284c7',
219224
'border-width': 2.5,
220225
'border-opacity': 0.9,
@@ -264,7 +269,9 @@
264269
'shape': 'round-rectangle',
265270
'background-color': '#d1fae5',
266271
'background-opacity': 0.75,
267-
'background-image': 'linear-gradient(135deg, #d1fae5 0%, #dcfce7 100%)',
272+
'background-fill': 'linear-gradient',
273+
'background-gradient-stop-colors': ['#d1fae5', '#dcfce7'],
274+
'background-gradient-direction': 'to-bottom-right',
268275
'border-color': '#10b981',
269276
'border-width': 2,
270277
'border-opacity': 0.9,
@@ -455,7 +462,7 @@
455462
window.location.href = url;
456463
}
457464
});
458-
465+
459466

460467
// Responsive resize
461468
const resizeHandler = function() {

0 commit comments

Comments
 (0)