mirror of
https://github.com/opennetworkinglab/onos.git
synced 2025-10-26 05:41:08 +01:00
Re-instating the DARK theme.
Change-Id: Ic499b4991e41747cc9472838397e5e57cd4ad089
This commit is contained in:
Simon Hunt
parent
9912f293d3
commit
bb0f26756a
@ -22,8 +22,11 @@
|
||||
background-color: #518ecc;
|
||||
color: white;
|
||||
}
|
||||
|
||||
|
||||
/* ========== DARK Theme ========== */
|
||||
|
||||
.dark .dialog .dialog-button {
|
||||
/* TODO: dark theme */
|
||||
background-color: #518ecc;
|
||||
color: white;
|
||||
background-color: #345e85;
|
||||
color: #cccccd;
|
||||
}
|
||||
|
||||
@ -21,22 +21,27 @@
|
||||
.light #flash svg g.flashItem rect {
|
||||
fill: #ccc;
|
||||
}
|
||||
.dark #flash svg g.flashItem rect {
|
||||
fill: #555;
|
||||
}
|
||||
|
||||
.light #flash svg g.flashItem text {
|
||||
fill: #333;
|
||||
}
|
||||
.dark #flash svg g.flashItem text {
|
||||
fill: #999;
|
||||
}
|
||||
|
||||
.light .centered {
|
||||
box-shadow: 2px 2px 24px 5px #888;
|
||||
background-color: #eee;
|
||||
}
|
||||
/* TODO: confirm / fix dark*/
|
||||
|
||||
|
||||
/* ========== DARK Theme ========== */
|
||||
|
||||
.dark #flash svg g.flashItem rect {
|
||||
fill: #555;
|
||||
}
|
||||
|
||||
.dark #flash svg g.flashItem text {
|
||||
fill: #999;
|
||||
}
|
||||
|
||||
.dark .centered {
|
||||
box-shadow: 2px 2px 24px 5px #888;
|
||||
background-color: #eee;
|
||||
|
||||
@ -23,9 +23,44 @@
|
||||
color: #3c3a3a;
|
||||
border: 1px solid #c7c7c0;
|
||||
}
|
||||
.dark .floatpanel {
|
||||
/* TODO: dark theme */
|
||||
background-color: white;
|
||||
color: #3c3a3a;
|
||||
|
||||
.light .floatpanel hr {
|
||||
border: 1px solid #c7c7c0;
|
||||
}
|
||||
|
||||
.light .floatpanel .bottom tr:nth-child(odd) {
|
||||
background-color: #f4f4f4;
|
||||
}
|
||||
|
||||
.light .floatpanel .bottom tr:nth-child(even) {
|
||||
background-color: #fbfbfb;
|
||||
}
|
||||
|
||||
|
||||
/* ========== DARK Theme ========== */
|
||||
|
||||
.dark .floatpanel {
|
||||
background-color: #282528;
|
||||
color: #888c8c;
|
||||
border: 1px solid #364144;
|
||||
}
|
||||
|
||||
.dark .floatpanel th {
|
||||
background-color: #242424;
|
||||
}
|
||||
|
||||
.dark .floatpanel h2 {
|
||||
color: #dddddd;
|
||||
}
|
||||
|
||||
.dark .floatpanel hr {
|
||||
border: 1px solid #30303a;
|
||||
}
|
||||
|
||||
.dark .floatpanel .bottom tr:nth-child(odd) {
|
||||
background-color: #333333;
|
||||
}
|
||||
|
||||
.dark .floatpanel .bottom tr:nth-child(even) {
|
||||
background-color: #3a3a3a;
|
||||
}
|
||||
|
||||
@ -18,68 +18,34 @@
|
||||
ONOS GUI -- Masthead (theme) -- CSS file
|
||||
*/
|
||||
|
||||
.light #mast {
|
||||
background-color: #231f20;
|
||||
}
|
||||
.dark #mast {
|
||||
/* TODO: dark theme */
|
||||
#mast {
|
||||
background-color: #231f20;
|
||||
}
|
||||
|
||||
|
||||
.light #mast .nav-menu-button:hover {
|
||||
background-color: #888;
|
||||
}
|
||||
.dark #mast .nav-menu-button:hover {
|
||||
#mast .nav-menu-button:hover {
|
||||
background-color: #888;
|
||||
}
|
||||
|
||||
|
||||
.light #mast-right a {
|
||||
color: #009fdb;
|
||||
}
|
||||
.dark #mast-right a {
|
||||
/* TODO: dark theme */
|
||||
#mast-right a {
|
||||
color: #009fdb;
|
||||
}
|
||||
|
||||
.light #mast nav {
|
||||
#mast nav {
|
||||
color: #009fdb;
|
||||
}
|
||||
|
||||
.dark #mast nav {
|
||||
/* TODO: dark theme */
|
||||
color: #009fdb;
|
||||
}
|
||||
|
||||
|
||||
/* Theme styles for drop down menu */
|
||||
|
||||
.light #mast .dropdown {
|
||||
background-color: #231f20;
|
||||
border: 1px solid #dddddd;
|
||||
}
|
||||
.dark #mast .dropdown {
|
||||
/* TODO: dark theme */
|
||||
#mast .dropdown {
|
||||
background-color: #231f20;
|
||||
border: 1px solid #dddddd;
|
||||
}
|
||||
|
||||
.light #mast .dropdown a {
|
||||
color: #009fdb;
|
||||
border-bottom: solid #444 1px;
|
||||
}
|
||||
.dark #mast .dropdown a {
|
||||
/* TODO: dark theme */
|
||||
#mast .dropdown a {
|
||||
color: #009fdb;
|
||||
border-bottom: solid #444 1px;
|
||||
}
|
||||
|
||||
.light #mast .dropdown a:hover {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.dark #mast .dropdown a:hover {
|
||||
/* TODO: dark theme */
|
||||
#mast .dropdown a:hover {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
@ -18,39 +18,21 @@
|
||||
ONOS GUI -- Navigation (theme) -- CSS file
|
||||
*/
|
||||
|
||||
.light #nav {
|
||||
background-color: #231f20;
|
||||
}
|
||||
.dark #nav {
|
||||
/* TODO: dark theme */
|
||||
#nav {
|
||||
background-color: #231f20;
|
||||
}
|
||||
|
||||
.light #nav .nav-hdr {
|
||||
color: #716b6a;
|
||||
background-color: #3c3a3a;
|
||||
}
|
||||
.dark #nav .nav-hdr {
|
||||
/* TODO: dark theme */
|
||||
#nav .nav-hdr {
|
||||
color: #716b6a;
|
||||
background-color: #3c3a3a;
|
||||
}
|
||||
|
||||
.light #nav a {
|
||||
color: #c7c7c0;
|
||||
border-bottom: solid #3c3a3a 1px;
|
||||
}
|
||||
.dark #nav a {
|
||||
/* TODO: dark theme */
|
||||
#nav a {
|
||||
color: #c7c7c0;
|
||||
border-bottom: solid #3c3a3a 1px;
|
||||
}
|
||||
|
||||
.light #nav a:hover {
|
||||
color: #ffffff;
|
||||
}
|
||||
.dark #nav a:hover {
|
||||
/* TODO: dark theme */
|
||||
#nav a:hover {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
|
||||
@ -21,44 +21,45 @@
|
||||
.light div.close-btn svg.embeddedIcon g.icon .glyph {
|
||||
fill: #333333;
|
||||
}
|
||||
.dark div.close-btn svg.embeddedIcon g.icon .glyph {
|
||||
/* TODO: dark theme */
|
||||
fill: #333333;
|
||||
}
|
||||
|
||||
|
||||
/* Sortable table headers */
|
||||
.light div.tableColSort svg.embeddedIcon .icon .glyph {
|
||||
fill: #353333;
|
||||
}
|
||||
.dark div.tableColSort svg.embeddedIcon .icon .glyph {
|
||||
/* TODO: dark theme */
|
||||
fill: #353333;
|
||||
}
|
||||
|
||||
/* active / inactive (check/xmark) icons */
|
||||
.light svg.embeddedIcon .icon.active .glyph {
|
||||
fill: #04bf34;
|
||||
}
|
||||
.dark svg.embeddedIcon .icon.active .glyph {
|
||||
/* TODO: dark theme */
|
||||
fill: #04bf34;
|
||||
}
|
||||
|
||||
.light svg.embeddedIcon .icon.inactive .glyph {
|
||||
fill: #c0242b;
|
||||
}
|
||||
.dark svg.embeddedIcon .icon.inactive .glyph {
|
||||
/* TODO: dark theme */
|
||||
fill: #c0242b;
|
||||
}
|
||||
|
||||
.light table svg.embeddedIcon .icon .glyph {
|
||||
fill: #3c3a3a;
|
||||
}
|
||||
.dark table svg.embeddedIcon .glyph {
|
||||
/* TODO: dark theme */
|
||||
fill: #3c3a3a;
|
||||
|
||||
/* ========== DARK Theme ========== */
|
||||
|
||||
.dark div.close-btn svg.embeddedIcon g.icon .glyph {
|
||||
fill: #8d8d8d;
|
||||
}
|
||||
|
||||
.dark div.tableColSort svg.embeddedIcon .icon .glyph {
|
||||
fill: #888888;
|
||||
}
|
||||
|
||||
.dark svg.embeddedIcon .icon.active .glyph {
|
||||
fill: #04bf34;
|
||||
}
|
||||
|
||||
.dark svg.embeddedIcon .icon.inactive .glyph {
|
||||
fill: #c0242b;
|
||||
}
|
||||
|
||||
.dark table svg.embeddedIcon .icon .glyph {
|
||||
fill: #9999aa;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -18,8 +18,6 @@
|
||||
/* ------------------------------------------------- */
|
||||
/* Sprite Layer */
|
||||
|
||||
/* TODO: revisit these styles */
|
||||
|
||||
|
||||
#ov-topo svg #topo-sprites .gold1 use {
|
||||
stroke: #fda;
|
||||
@ -52,4 +50,45 @@
|
||||
|
||||
#ov-topo svg #topo-sprites use.fill-blue2 {
|
||||
fill: #bce;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* ========== DARK Theme ========== */
|
||||
|
||||
.dark #ov-topo svg #topo-sprites .gold1 use {
|
||||
stroke: #541;
|
||||
fill: none;
|
||||
}
|
||||
|
||||
.dark #ov-topo svg #topo-sprites .gold1 text {
|
||||
fill: #543;
|
||||
}
|
||||
|
||||
.dark #ov-topo svg #topo-sprites .blue1 use {
|
||||
stroke: #445;
|
||||
fill: none;
|
||||
}
|
||||
|
||||
.dark #ov-topo svg #topo-sprites .blue1 text {
|
||||
fill: #446;
|
||||
}
|
||||
|
||||
.dark #ov-topo svg #topo-sprites .gray1 use {
|
||||
stroke: #333;
|
||||
fill: none;
|
||||
}
|
||||
|
||||
.dark #ov-topo svg #topo-sprites .gray1 text {
|
||||
fill: #444;
|
||||
}
|
||||
|
||||
/* fills */
|
||||
|
||||
.dark #ov-topo svg #topo-sprites use.fill-gray2 {
|
||||
fill: #444;
|
||||
}
|
||||
|
||||
|
||||
.dark #ov-topo svg #topo-sprites use.fill-blue2 {
|
||||
fill: #447;
|
||||
}
|
||||
|
||||
@ -161,14 +161,21 @@
|
||||
}
|
||||
|
||||
// --- Ordinal scales for 7 values.
|
||||
// TODO: migrate these colors to the theme service.
|
||||
|
||||
// Colors per Mojo-Design's color palette..
|
||||
// Colors per Mojo-Design's color palette.. (version one)
|
||||
// blue red dk grey steel lt blue lt red lt grey
|
||||
var lightNorm = ['#5b99d2', '#d05a55', '#716b6b', '#7e9aa8', '#66cef6', '#db7773', '#aeada8' ],
|
||||
lightMute = ['#a8cceb', '#f1a7a7', '#b9b5b5', '#bdcdd5', '#a8e9fd', '#f8c9c9', '#d7d6d4' ],
|
||||
// TODO: dark theme
|
||||
darkNorm = ['#5b99d2', '#d05a55', '#716b6b', '#7e9aa8', '#66cef6', '#db7773', '#aeada8' ],
|
||||
darkMute = ['#a8cceb', '#f1a7a7', '#b9b5b5', '#bdcdd5', '#a8e9fd', '#f8c9c9', '#d7d6d4' ];
|
||||
// var lightNorm = ['#5b99d2', '#d05a55', '#716b6b', '#7e9aa8', '#66cef6', '#db7773', '#aeada8' ],
|
||||
// lightMute = ['#a8cceb', '#f1a7a7', '#b9b5b5', '#bdcdd5', '#a8e9fd', '#f8c9c9', '#d7d6d4' ],
|
||||
|
||||
// Colors per Mojo-Design's color palette.. (version two)
|
||||
// blue lt blue red green brown teal lime
|
||||
var lightNorm = ['#5b99d2', '#66cef6', '#d05a55', '#0f9d58', '#ba7941', '#3dc0bf', '#56af00' ],
|
||||
lightMute = ['#9ebedf', '#abdef5', '#d79a96', '#7cbe99', '#cdab8d', '#96d5d5', '#a0c96d' ],
|
||||
|
||||
darkNorm = ['#5b99d2', '#66cef6', '#d05a55', '#0f9d58', '#ba7941', '#3dc0bf', '#56af00' ],
|
||||
darkMute = ['#9ebedf', '#abdef5', '#d79a96', '#7cbe99', '#cdab8d', '#96d5d5', '#a0c96d' ];
|
||||
|
||||
|
||||
var colors= {
|
||||
light: {
|
||||
|
||||
@ -77,10 +77,59 @@
|
||||
}
|
||||
|
||||
|
||||
/* TODO: dark theme */
|
||||
/* Selected toggle / radio button */
|
||||
/* ========== DARK Theme ========== */
|
||||
|
||||
/* Selected toggle / radio button */
|
||||
.dark .toggleButton.selected svg.embeddedIcon .icon rect,
|
||||
.dark .radioButton.selected svg.embeddedIcon .icon rect {
|
||||
fill: #e7e7e7;
|
||||
fill: #353e45;
|
||||
}
|
||||
|
||||
/* Selected:hover (normal) button */
|
||||
.dark .button:hover svg.embeddedIcon .icon rect {
|
||||
stroke: white;
|
||||
stroke-width: 1px;
|
||||
}
|
||||
|
||||
/* Selected:hover toggle-button */
|
||||
.dark .toggleButton.selected:hover svg.embeddedIcon .icon rect {
|
||||
fill: #444d54;
|
||||
stroke: white;
|
||||
stroke-width: 1px;
|
||||
}
|
||||
|
||||
/* Selected toggle/radio button and normal button glyph color */
|
||||
.dark .button svg.embeddedIcon .glyph,
|
||||
.dark .toggleButton.selected svg.embeddedIcon .glyph,
|
||||
.dark .radioButton.selected svg.embeddedIcon .glyph {
|
||||
fill: #5b99d2;
|
||||
}
|
||||
|
||||
|
||||
/* === UNSELECTED BUTTONS === */
|
||||
|
||||
/* Unselected toggle / radio button */
|
||||
.dark .toggleButton svg.embeddedIcon .icon rect,
|
||||
.dark .radioButton svg.embeddedIcon .icon rect {
|
||||
/* no fill */
|
||||
}
|
||||
|
||||
/* Unselected:hover toggle / radio button */
|
||||
.dark .toggleButton:hover svg.embeddedIcon .icon rect,
|
||||
.dark .radioButton:hover:not(.selected) svg.embeddedIcon .icon rect {
|
||||
fill: #353e45;
|
||||
stroke: white;
|
||||
stroke-width: 1px;
|
||||
}
|
||||
|
||||
/* Unselected toggle / radio button */
|
||||
.dark .toggleButton svg.embeddedIcon .glyph,
|
||||
.dark .radioButton svg.embeddedIcon .glyph {
|
||||
fill: #bbb;
|
||||
}
|
||||
|
||||
/* Unselected:hover toggle / radio button */
|
||||
.dark .toggleButton:hover:not(.selected) svg.embeddedIcon .glyph,
|
||||
.dark .radioButton:hover:not(.selected) svg.embeddedIcon .glyph {
|
||||
fill: #5b99d2;
|
||||
}
|
||||
|
||||
@ -20,19 +20,10 @@
|
||||
background-color: #e5e5e6;
|
||||
color: #3c3a3a;
|
||||
}
|
||||
.dark div.summary-list .table-header td {
|
||||
/* TODO: dark theme */
|
||||
background-color: #e5e5e6;
|
||||
color: #3c3a3a;
|
||||
}
|
||||
|
||||
.light div.summary-list td {
|
||||
color: #3c3a3a;
|
||||
}
|
||||
.dark div.summary-list td {
|
||||
/* TODO: dark theme */
|
||||
color: #3c3a3a;
|
||||
}
|
||||
|
||||
.light div.summary-list tr:nth-child(even) {
|
||||
background-color: #f4f4f4;
|
||||
@ -40,38 +31,18 @@
|
||||
.light div.summary-list tr:nth-child(odd) {
|
||||
background-color: #fbfbfb;
|
||||
}
|
||||
.dark div.summary-list tr:nth-child(even) {
|
||||
/* TODO: dark theme */
|
||||
background-color: #f4f4f4;
|
||||
}
|
||||
.dark div.summary-list tr:nth-child(odd) {
|
||||
/* TODO: dark theme */
|
||||
background-color: #fbfbfb;
|
||||
}
|
||||
|
||||
.light div.summary-list tr.selected {
|
||||
background-color: #dbeffc !important;
|
||||
}
|
||||
|
||||
.dark div.summary-list tr.selected {
|
||||
/* TODO: dark theme */
|
||||
background-color: #dbeffc;
|
||||
}
|
||||
|
||||
.light div.summary-list tr.data-change {
|
||||
/* todo - theme color */
|
||||
background-color: #FDFFDC;
|
||||
}
|
||||
.dark div.summary-list tr.data-change {
|
||||
/* TODO: dark theme */
|
||||
background-color: #FDFFDC;
|
||||
}
|
||||
|
||||
|
||||
/* --- Control Buttons --- */
|
||||
|
||||
/* TODO: dark theme */
|
||||
|
||||
/* INACTIVE */
|
||||
.light .ctrl-btns div svg.embeddedIcon g.icon use {
|
||||
fill: #e0dfd6;
|
||||
@ -108,3 +79,74 @@
|
||||
.light .ctrl-btns div.refresh.active:hover svg.embeddedIcon g.icon use {
|
||||
fill: #ce5b58;
|
||||
}
|
||||
|
||||
|
||||
/* ========== DARK Theme ========== */
|
||||
|
||||
.dark div.summary-list .table-header td {
|
||||
background-color: #222222;
|
||||
color: #cccccc;
|
||||
}
|
||||
|
||||
.dark div.summary-list td {
|
||||
/* note: don't put background-color here */
|
||||
color: #cccccc;
|
||||
}
|
||||
.dark div.summary-list tr.no-data td {
|
||||
background-color: #333333;
|
||||
}
|
||||
|
||||
.dark div.summary-list tr:nth-child(even) {
|
||||
background-color: #333333;
|
||||
}
|
||||
.dark div.summary-list tr:nth-child(odd) {
|
||||
background-color: #3a3a3a;
|
||||
}
|
||||
|
||||
.dark div.summary-list tr.selected {
|
||||
background-color: #304860 !important;
|
||||
}
|
||||
|
||||
|
||||
.dark div.summary-list tr.data-change {
|
||||
background-color: #423708;
|
||||
}
|
||||
|
||||
/* --- Control Buttons --- */
|
||||
|
||||
/* INACTIVE */
|
||||
.dark .ctrl-btns div svg.embeddedIcon g.icon use {
|
||||
fill: #444444;
|
||||
}
|
||||
/* note: no change for inactive buttons when hovered */
|
||||
|
||||
|
||||
/* ACTIVE */
|
||||
.dark .ctrl-btns div.active svg.embeddedIcon g.icon use {
|
||||
fill: #939598;
|
||||
}
|
||||
.dark .ctrl-btns div.active:hover svg.embeddedIcon g.icon use {
|
||||
fill: #ce5b58;
|
||||
}
|
||||
|
||||
/* CURRENT-VIEW */
|
||||
.dark .ctrl-btns div.current-view svg.embeddedIcon g.icon rect {
|
||||
fill: #518ecc;
|
||||
}
|
||||
.dark .ctrl-btns div.current-view svg.embeddedIcon g.icon use {
|
||||
fill: #dddddd;
|
||||
}
|
||||
|
||||
/* REFRESH */
|
||||
.dark .ctrl-btns div.refresh svg.embeddedIcon g.icon use {
|
||||
fill: #364144;
|
||||
}
|
||||
.dark .ctrl-btns div.refresh:hover svg.embeddedIcon g.icon use {
|
||||
fill: #ce5b58;
|
||||
}
|
||||
.dark .ctrl-btns div.refresh.active svg.embeddedIcon g.icon use {
|
||||
fill: #0074a6;
|
||||
}
|
||||
.dark .ctrl-btns div.refresh.active:hover svg.embeddedIcon g.icon use {
|
||||
fill: #ce5b58;
|
||||
}
|
||||
|
||||
@ -18,26 +18,32 @@
|
||||
ONOS GUI -- Toolbar Service (theme) -- CSS file
|
||||
*/
|
||||
|
||||
.light .tbar-arrow svg.embeddedIcon .icon .glyph {
|
||||
fill: #838383;
|
||||
}
|
||||
.dark .tbar-arrow svg.embeddedIcon .icon .glyph {
|
||||
fill: #B2B2B2;
|
||||
}
|
||||
|
||||
.tbar-arrow svg.embeddedIcon .icon rect {
|
||||
stroke: none;
|
||||
}
|
||||
.light .tbar-arrow svg.embeddedIcon .icon rect {
|
||||
fill: none;
|
||||
|
||||
.light .tbar-arrow svg.embeddedIcon .icon .glyph {
|
||||
fill: #838383;
|
||||
}
|
||||
.dark .tbar-arrow svg.embeddedIcon .icon rect {
|
||||
|
||||
.light .tbar-arrow svg.embeddedIcon .icon rect {
|
||||
fill: none;
|
||||
}
|
||||
|
||||
.light .separator {
|
||||
border-color: #ddd;
|
||||
}
|
||||
.dark .separator {
|
||||
border-color: #1A1A1A;
|
||||
|
||||
/* ========== DARK Theme ========== */
|
||||
|
||||
.dark .tbar-arrow svg.embeddedIcon .icon .glyph {
|
||||
fill: #B2B2B2;
|
||||
}
|
||||
|
||||
.dark .tbar-arrow svg.embeddedIcon .icon rect {
|
||||
fill: none;
|
||||
}
|
||||
|
||||
.dark .separator {
|
||||
border-color: #454545;
|
||||
}
|
||||
|
||||
@ -26,8 +26,7 @@
|
||||
}
|
||||
|
||||
.dark #tooltip {
|
||||
/* TODO: dark theme */
|
||||
background-color: #dbeffc;
|
||||
color: #3c3a3a;
|
||||
border-color: #c7c7c0;
|
||||
background-color: #3a3a60;
|
||||
border-color: #6c6a6a;
|
||||
color: #c7c7c0;
|
||||
}
|
||||
|
||||
@ -18,18 +18,50 @@
|
||||
ONOS GUI -- core (theme) -- CSS file
|
||||
*/
|
||||
|
||||
body.light {
|
||||
body {
|
||||
background-color: white;
|
||||
}
|
||||
body.dark {
|
||||
/* TODO: dark theme */
|
||||
background-color: #2b2b2b;
|
||||
|
||||
#view h2 {
|
||||
color: #3c3a3a;
|
||||
}
|
||||
|
||||
.light #view h2 {
|
||||
color: #3c3a3a;
|
||||
a {
|
||||
color: #009fdb;
|
||||
text-decoration: none;
|
||||
}
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
a:visited {
|
||||
color: #7fabdb;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* ========== DARK Theme ========== */
|
||||
|
||||
body.dark {
|
||||
background-color: #282528;
|
||||
}
|
||||
|
||||
.dark #view h2 {
|
||||
/* TODO: dark theme */
|
||||
color: #3c3a3a;
|
||||
color: #6a6e6a;
|
||||
}
|
||||
|
||||
.dark a {
|
||||
color: #007ca6;
|
||||
}
|
||||
.dark a:visited {
|
||||
color: #4f6e90;
|
||||
}
|
||||
|
||||
.dark input {
|
||||
color: #dddddd;
|
||||
background-color: #222222;
|
||||
border: 1px solid #666666;
|
||||
}
|
||||
|
||||
.dark select {
|
||||
color: #dddddd;
|
||||
background-color: #222222;
|
||||
}
|
||||
@ -49,17 +49,3 @@ body {
|
||||
font-size: 21pt;
|
||||
font-weight: lighter;
|
||||
}
|
||||
|
||||
|
||||
/* TODO: dark versions for links */
|
||||
a {
|
||||
color: #009fdb;
|
||||
text-decoration: none;
|
||||
}
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
a:visited {
|
||||
color: #7fabdb;
|
||||
text-decoration: none;
|
||||
}
|
||||
@ -19,14 +19,10 @@
|
||||
*/
|
||||
|
||||
/* -- Drag-n-Drop OAR files -- */
|
||||
.light div.dropping {
|
||||
div.dropping {
|
||||
border: solid 3px #0095d6;
|
||||
}
|
||||
|
||||
.dark div.dropping {
|
||||
/* TODO: dark theme */
|
||||
border: solid 3px #0095d6;
|
||||
}
|
||||
|
||||
/* -- confirmation dialog -- */
|
||||
.light #app-dialog p.strong {
|
||||
@ -34,55 +30,23 @@
|
||||
background-color: #ce5b58;
|
||||
}
|
||||
|
||||
.dark #app-dialog p.strong {
|
||||
/* TODO: dark theme */
|
||||
color: white;
|
||||
background-color: #ce5b58;
|
||||
}
|
||||
|
||||
.light #app-dialog.floatpanel.dialog {
|
||||
background-color: #fff;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
/* ========== DARK Theme ========== */
|
||||
|
||||
|
||||
.dark .app-title {
|
||||
color: #dddddd;
|
||||
}
|
||||
|
||||
/* -- confirmation dialog -- */
|
||||
.dark #app-dialog p.strong {
|
||||
color: red;
|
||||
background-color: #ecd98e;
|
||||
}
|
||||
.dark #app-dialog.floatpanel.dialog {
|
||||
/* TODO: dark theme */
|
||||
background-color: #fff;
|
||||
background-color: #282528;
|
||||
color:#ddddee;
|
||||
}
|
||||
|
||||
/* -- details panel -- */
|
||||
.light #application-details-panel.floatpanel {
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.dark #application-details-panel.floatpanel {
|
||||
/* TODO: dark theme */
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.light #application-details-panel hr {
|
||||
border: 1px solid #c7c7c0;
|
||||
}
|
||||
|
||||
.dark #application-details-panel hr {
|
||||
/* TODO: dark theme */
|
||||
border: 1px solid #c7c7c0;
|
||||
}
|
||||
|
||||
.light #application-details-panel .bottom tr:nth-child(odd) {
|
||||
background-color: #f4f4f4;
|
||||
}
|
||||
|
||||
.light #application-details-panel .bottom tr:nth-child(even) {
|
||||
background-color: #fbfbfb;
|
||||
}
|
||||
|
||||
.dark #application-details-panel .bottom tr:nth-child(odd) {
|
||||
/* TODO: dark theme */
|
||||
background-color: #f4f4f4;
|
||||
}
|
||||
|
||||
.dark #application-details-panel .bottom tr:nth-child(even) {
|
||||
/* TODO: dark theme */
|
||||
background-color: #fbfbfb;
|
||||
}
|
||||
|
||||
|
||||
@ -22,23 +22,14 @@
|
||||
.light .dev-icon svg.embeddedIcon .icon .glyph {
|
||||
fill: #0071bd;
|
||||
}
|
||||
.dark .dev-icon svg.embeddedIcon .icon .glyph {
|
||||
/* TODO: dark theme */
|
||||
fill: #0071bd;
|
||||
}
|
||||
|
||||
.light #device-details-panel .editable {
|
||||
border-bottom: 1px dashed #ca504b;
|
||||
}
|
||||
|
||||
|
||||
.light #device-details-panel .bottom th {
|
||||
background-color: #e5e5e6;
|
||||
}
|
||||
.dark #device-details-panel .bottom th {
|
||||
/* TODO: dark theme */
|
||||
background-color: #e5e5e6;
|
||||
}
|
||||
|
||||
.light #device-details-panel .bottom tr:nth-child(odd) {
|
||||
background-color: #fbfbfb;
|
||||
@ -46,11 +37,13 @@
|
||||
.light #device-details-panel .bottom tr:nth-child(even) {
|
||||
background-color: #f4f4f4;
|
||||
}
|
||||
.dark #device-details-panel .bottom tr:nth-child(odd) {
|
||||
/* TODO: dark theme */
|
||||
background-color: #fbfbfb;
|
||||
|
||||
/* ========== DARK Theme ========== */
|
||||
|
||||
.dark .dev-icon svg.embeddedIcon .icon .glyph {
|
||||
fill: #375b7f;
|
||||
}
|
||||
.dark #device-details-panel .bottom tr:nth-child(even) {
|
||||
/* TODO: dark theme */
|
||||
background-color: #f4f4f4;
|
||||
|
||||
.dark #device-details-panel .editable {
|
||||
border-bottom: 1px dashed #df4f4a;
|
||||
}
|
||||
|
||||
@ -30,18 +30,6 @@
|
||||
.light #ov-flow tr:nth-child(6n) {
|
||||
background-color: #f4f4f4;
|
||||
}
|
||||
.dark #ov-flow tr:nth-child(6n + 1),
|
||||
.dark #ov-flow tr:nth-child(6n + 2),
|
||||
.dark #ov-flow tr:nth-child(6n + 3) {
|
||||
/* TODO: dark theme */
|
||||
background-color: #fbfbfb;
|
||||
}
|
||||
.dark #ov-flow tr:nth-child(6n + 4),
|
||||
.dark #ov-flow tr:nth-child(6n + 5),
|
||||
.dark #ov-flow tr:nth-child(6n) {
|
||||
/* TODO: dark theme */
|
||||
background-color: #f4f4f4;
|
||||
}
|
||||
|
||||
/* highlighted color */
|
||||
.light #ov-flow tr:nth-child(6n + 1).data-change,
|
||||
@ -50,16 +38,6 @@
|
||||
.light #ov-flow tr:nth-child(6n + 4).data-change,
|
||||
.light #ov-flow tr:nth-child(6n + 5).data-change,
|
||||
.light #ov-flow tr:nth-child(6n).data-change {
|
||||
/* TODO: theme */
|
||||
background-color: #fdffdc;
|
||||
}
|
||||
.dark #ov-flow tr:nth-child(6n + 1).data-change,
|
||||
.dark #ov-flow tr:nth-child(6n + 2).data-change,
|
||||
.dark #ov-flow tr:nth-child(6n + 3).data-change,
|
||||
.dark #ov-flow tr:nth-child(6n + 4).data-change,
|
||||
.dark #ov-flow tr:nth-child(6n + 5).data-change,
|
||||
.dark #ov-flow tr:nth-child(6n).data-change {
|
||||
/* TODO: dark theme */
|
||||
background-color: #fdffdc;
|
||||
}
|
||||
|
||||
@ -67,3 +45,25 @@
|
||||
#ov-flow td.treatment {
|
||||
opacity: 0.65;
|
||||
}
|
||||
|
||||
/* ========== DARK Theme ========== */
|
||||
|
||||
.dark #ov-flow tr:nth-child(6n + 1),
|
||||
.dark #ov-flow tr:nth-child(6n + 2),
|
||||
.dark #ov-flow tr:nth-child(6n + 3) {
|
||||
background-color: #333333;
|
||||
}
|
||||
.dark #ov-flow tr:nth-child(6n + 4),
|
||||
.dark #ov-flow tr:nth-child(6n + 5),
|
||||
.dark #ov-flow tr:nth-child(6n) {
|
||||
background-color: #3a3a3a;
|
||||
}
|
||||
|
||||
.dark #ov-flow tr:nth-child(6n + 1).data-change,
|
||||
.dark #ov-flow tr:nth-child(6n + 2).data-change,
|
||||
.dark #ov-flow tr:nth-child(6n + 3).data-change,
|
||||
.dark #ov-flow tr:nth-child(6n + 4).data-change,
|
||||
.dark #ov-flow tr:nth-child(6n + 5).data-change,
|
||||
.dark #ov-flow tr:nth-child(6n).data-change {
|
||||
background-color: #423708;
|
||||
}
|
||||
|
||||
@ -56,7 +56,7 @@
|
||||
</div>
|
||||
|
||||
<div class="search">
|
||||
<input type="text" ng-model="queryTxt" placeholder="Search Text"/>
|
||||
<input type="text" ng-model="queryTxt" placeholder="Search"/>
|
||||
<select ng-model="queryBy">
|
||||
<option value="" disabled>Search By</option>
|
||||
<option value="$">All Fields</option>
|
||||
|
||||
@ -28,29 +28,28 @@
|
||||
background-color: #f4f4f4;
|
||||
}
|
||||
|
||||
.dark #ov-group tr:nth-child(4n + 1),
|
||||
.dark #ov-group tr:nth-child(4n + 2) {
|
||||
/* TODO: dark theme */
|
||||
background-color: #fbfbfb;
|
||||
}
|
||||
.dark #ov-group tr:nth-child(4n + 3),
|
||||
.dark #ov-group tr:nth-child(4n) {
|
||||
/* TODO: dark theme */
|
||||
background-color: #f4f4f4;
|
||||
}
|
||||
|
||||
/* highlighted color */
|
||||
.light #ov-group tr:nth-child(4n + 1).data-change,
|
||||
.light #ov-group tr:nth-child(4n + 2).data-change,
|
||||
.light #ov-group tr:nth-child(4n + 3).data-change,
|
||||
.light #ov-group tr:nth-child(4n).data-change {
|
||||
/* TODO: theme */
|
||||
background-color: #fdffdc;
|
||||
}
|
||||
|
||||
/* ========== DARK Theme ========== */
|
||||
|
||||
.dark #ov-group tr:nth-child(4n + 1),
|
||||
.dark #ov-group tr:nth-child(4n + 2) {
|
||||
background-color: #333333;
|
||||
}
|
||||
.dark #ov-group tr:nth-child(4n + 3),
|
||||
.dark #ov-group tr:nth-child(4n) {
|
||||
background-color: #3a3a3a;
|
||||
}
|
||||
|
||||
.dark #ov-group tr:nth-child(4n + 1).data-change,
|
||||
.dark #ov-group tr:nth-child(4n + 2).data-change,
|
||||
.dark #ov-group tr:nth-child(4n + 3).data-change,
|
||||
.dark #ov-group tr:nth-child(4n).data-change {
|
||||
/* TODO: dark theme */
|
||||
background-color: #fdffdc;
|
||||
background-color: #423708;
|
||||
}
|
||||
|
||||
@ -29,18 +29,6 @@
|
||||
.light #ov-intent tr:nth-child(6n) {
|
||||
background-color: #f4f4f4;
|
||||
}
|
||||
.dark #ov-intent tr:nth-child(6n + 1),
|
||||
.dark #ov-intent tr:nth-child(6n + 2),
|
||||
.dark #ov-intent tr:nth-child(6n + 3) {
|
||||
/* TODO: dark theme */
|
||||
background-color: #fbfbfb;
|
||||
}
|
||||
.dark #ov-intent tr:nth-child(6n + 4),
|
||||
.dark #ov-intent tr:nth-child(6n + 5),
|
||||
.dark #ov-intent tr:nth-child(6n) {
|
||||
/* TODO: dark theme */
|
||||
background-color: #f4f4f4;
|
||||
}
|
||||
|
||||
.light #ov-intent tr:nth-child(6n + 1).data-change,
|
||||
.light #ov-intent tr:nth-child(6n + 2).data-change,
|
||||
@ -48,16 +36,6 @@
|
||||
.light #ov-intent tr:nth-child(6n + 4).data-change,
|
||||
.light #ov-intent tr:nth-child(6n + 5).data-change,
|
||||
.light #ov-intent tr:nth-child(6n).data-change {
|
||||
/* TODO: theme */
|
||||
background-color: #fdffdc;
|
||||
}
|
||||
.dark #ov-intent tr:nth-child(6n + 1).data-change,
|
||||
.dark #ov-intent tr:nth-child(6n + 2).data-change,
|
||||
.dark #ov-intent tr:nth-child(6n + 3).data-change,
|
||||
.dark #ov-intent tr:nth-child(6n + 4).data-change,
|
||||
.dark #ov-intent tr:nth-child(6n + 5).data-change,
|
||||
.dark #ov-intent tr:nth-child(6n).data-change {
|
||||
/* TODO: dark theme */
|
||||
background-color: #fdffdc;
|
||||
}
|
||||
|
||||
@ -65,3 +43,25 @@
|
||||
#ov-intent td.details {
|
||||
opacity: 0.65;
|
||||
}
|
||||
|
||||
/* ========== DARK Theme ========== */
|
||||
|
||||
.dark #ov-intent tr:nth-child(6n + 1),
|
||||
.dark #ov-intent tr:nth-child(6n + 2),
|
||||
.dark #ov-intent tr:nth-child(6n + 3) {
|
||||
background-color: #333333;
|
||||
}
|
||||
.dark #ov-intent tr:nth-child(6n + 4),
|
||||
.dark #ov-intent tr:nth-child(6n + 5),
|
||||
.dark #ov-intent tr:nth-child(6n) {
|
||||
background-color: #3a3a3a;
|
||||
}
|
||||
|
||||
.dark #ov-intent tr:nth-child(6n + 1).data-change,
|
||||
.dark #ov-intent tr:nth-child(6n + 2).data-change,
|
||||
.dark #ov-intent tr:nth-child(6n + 3).data-change,
|
||||
.dark #ov-intent tr:nth-child(6n + 4).data-change,
|
||||
.dark #ov-intent tr:nth-child(6n + 5).data-change,
|
||||
.dark #ov-intent tr:nth-child(6n).data-change {
|
||||
background-color: #423708;
|
||||
}
|
||||
|
||||
@ -27,29 +27,30 @@
|
||||
.light #ov-meter tr:nth-child(4n) {
|
||||
background-color: #f4f4f4;
|
||||
}
|
||||
.dark #ov-meter tr:nth-child(4n + 1),
|
||||
.dark #ov-meter tr:nth-child(4n + 2) {
|
||||
/* TODO: dark theme */
|
||||
background-color: #fbfbfb;
|
||||
}
|
||||
.dark #ov-meter tr:nth-child(4n + 3),
|
||||
.dark #ov-meter tr:nth-child(4n) {
|
||||
/* TODO: dark theme */
|
||||
background-color: #f4f4f4;
|
||||
}
|
||||
|
||||
/* highlighted color */
|
||||
.light #ov-meter tr:nth-child(4n + 1).data-change,
|
||||
.light #ov-meter tr:nth-child(4n + 2).data-change,
|
||||
.light #ov-meter tr:nth-child(4n + 3).data-change,
|
||||
.light #ov-meter tr:nth-child(4n).data-change {
|
||||
/* TODO: theme */
|
||||
background-color: #fdffdc;
|
||||
}
|
||||
|
||||
|
||||
/* ========== DARK Theme ========== */
|
||||
|
||||
.dark #ov-meter tr:nth-child(4n + 1),
|
||||
.dark #ov-meter tr:nth-child(4n + 2) {
|
||||
background-color: #333333;
|
||||
}
|
||||
.dark #ov-meter tr:nth-child(4n + 3),
|
||||
.dark #ov-meter tr:nth-child(4n) {
|
||||
background-color: #3a3a3a;
|
||||
}
|
||||
|
||||
.dark #ov-meter tr:nth-child(4n + 1).data-change,
|
||||
.dark #ov-meter tr:nth-child(4n + 2).data-change,
|
||||
.dark #ov-meter tr:nth-child(4n + 3).data-change,
|
||||
.dark #ov-meter tr:nth-child(4n).data-change {
|
||||
/* TODO: dark theme */
|
||||
background-color: #fdffdc;
|
||||
background-color: #423708;
|
||||
}
|
||||
|
||||
@ -1,33 +0,0 @@
|
||||
/*
|
||||
* Copyright 2016-present Open Networking Laboratory
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
/*
|
||||
ONOS GUI -- Processor View (theme) -- CSS file
|
||||
*/
|
||||
|
||||
.light #ov-processor .current-view use {
|
||||
fill: white;
|
||||
}
|
||||
.dark #ov-processor .current-view use {
|
||||
fill: #304860;
|
||||
}
|
||||
|
||||
.light #ov-processor .current-view rect {
|
||||
fill: deepskyblue;
|
||||
}
|
||||
.dark #ov-processor .current-view rect {
|
||||
fill: #eee;
|
||||
}
|
||||
@ -1,5 +1,5 @@
|
||||
/*
|
||||
* Copyright 2016-present Open Networking Laboratory
|
||||
* Copyright 2017-present Open Networking Laboratory
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
@ -15,6 +15,19 @@
|
||||
*/
|
||||
|
||||
/*
|
||||
ONOS GUI -- Port View (theme) -- CSS file
|
||||
ONOS GUI -- Settings View (theme) -- CSS file
|
||||
*/
|
||||
|
||||
|
||||
/* ========== DARK Theme ========== */
|
||||
|
||||
/* -- Drag-n-Drop OAR files -- */
|
||||
|
||||
.dark .floatpanel .settings-title-1 {
|
||||
color: #dddddd;
|
||||
}
|
||||
|
||||
.dark .floatpanel .settings-title-2 {
|
||||
color: #eeeeee;
|
||||
}
|
||||
|
||||
@ -87,6 +87,9 @@
|
||||
#topo-p-instance .online svg .glyph {
|
||||
fill: #fff;
|
||||
}
|
||||
.dark #topo-p-instance .online svg .glyph.overlay {
|
||||
fill: #fff;
|
||||
}
|
||||
|
||||
|
||||
/* offline */
|
||||
@ -253,7 +256,6 @@
|
||||
opacity: .5;
|
||||
stroke-dasharray: 8 4;
|
||||
}
|
||||
/* TODO: Review for not-permitted links */
|
||||
#ov-topo svg .link.not-permitted {
|
||||
stroke: rgb(255,0,0);
|
||||
stroke-width: 5.0;
|
||||
@ -384,3 +386,256 @@
|
||||
#ov-topo svg #topo-sprites use.fill-blue2 {
|
||||
fill: #bce;
|
||||
}
|
||||
|
||||
|
||||
/* ==================================================================== */
|
||||
/* From here are the DARK theme styles - mirroring the above styles */
|
||||
/* ==================================================================== */
|
||||
|
||||
/* --- Base SVG Layer --- */
|
||||
|
||||
.dark #ov-topo svg {
|
||||
background-color: #152439;
|
||||
}
|
||||
|
||||
|
||||
/* --- "No Devices" Layer --- */
|
||||
|
||||
.dark #ov-topo svg .noDevsBird {
|
||||
fill: #8f4848;
|
||||
}
|
||||
|
||||
.dark #ov-topo svg #topo-noDevsLayer text {
|
||||
fill: #445461;
|
||||
}
|
||||
|
||||
/* --- Topo Map --- */
|
||||
|
||||
.dark #ov-topo svg #topo-map {
|
||||
stroke-width: 2px;
|
||||
stroke: #37404d;
|
||||
fill: #212c3a;
|
||||
}
|
||||
|
||||
/* --- general topo-panel styling --- */
|
||||
|
||||
.dark .topo-p {
|
||||
background-color: #2f313c;
|
||||
color: #c2c2b7;
|
||||
}
|
||||
.dark .topo-p svg {
|
||||
background: #8e1e24;
|
||||
}
|
||||
|
||||
.dark .topo-p svg .glyph {
|
||||
fill: #c2c2b7;
|
||||
}
|
||||
|
||||
.dark .topo-p hr {
|
||||
background-color: #616876;
|
||||
}
|
||||
|
||||
.dark .topo-p div.actionBtn svg use.glyph {
|
||||
fill: #5a7f96;
|
||||
}
|
||||
|
||||
.dark #topo-p-detail .header svg .glyph {
|
||||
fill: #91292f;
|
||||
}
|
||||
|
||||
.dark #toolbar-topo-tbar .tbar-row.right {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
/* --- Topo Instance Panel --- */
|
||||
|
||||
.dark #topo-p-instance {
|
||||
background-color: #2f313c;
|
||||
color: #c2c2b7;
|
||||
border: 1px solid #364144;
|
||||
|
||||
}
|
||||
|
||||
.dark #topo-p-instance svg rect {
|
||||
stroke-width: 0;
|
||||
fill: #525660;
|
||||
}
|
||||
|
||||
/* body of an instance */
|
||||
.dark #topo-p-instance .online svg rect {
|
||||
opacity: 1;
|
||||
fill: #838992;
|
||||
}
|
||||
|
||||
.dark #topo-p-instance svg .glyph {
|
||||
fill: #ddd;
|
||||
}
|
||||
.dark #topo-p-instance .online svg .glyph {
|
||||
fill: #fff;
|
||||
}
|
||||
.dark #topo-p-instance .online svg .glyph.overlay {
|
||||
fill: #c7c7c7;
|
||||
}
|
||||
|
||||
/* offline */
|
||||
.dark #topo-p-instance svg .badgeIcon {
|
||||
opacity: 0.4;
|
||||
fill: #939598;
|
||||
}
|
||||
|
||||
/* online */
|
||||
.dark #topo-p-instance .online svg .badgeIcon {
|
||||
opacity: 1.0;
|
||||
fill: #939598;
|
||||
}
|
||||
.dark #topo-p-instance .online svg .badgeIcon.bird {
|
||||
fill: #ffffff;
|
||||
}
|
||||
|
||||
.dark #topo-p-instance svg text {
|
||||
text-anchor: left;
|
||||
opacity: 0.5;
|
||||
fill: #aaa;
|
||||
}
|
||||
|
||||
.dark #topo-p-instance .online svg text {
|
||||
opacity: 1.0;
|
||||
fill: #fff;
|
||||
}
|
||||
|
||||
.dark #topo-p-instance .onosInst.mastership {
|
||||
opacity: 0.3;
|
||||
}
|
||||
.dark #topo-p-instance .onosInst.mastership.affinity {
|
||||
opacity: 1.0;
|
||||
}
|
||||
.dark #topo-p-instance .onosInst.mastership.affinity svg rect {
|
||||
filter: url(#blue-glow);
|
||||
}
|
||||
|
||||
.dark.firefox #topo-p-instance .onosInst.mastership.affinity svg rect {
|
||||
filter: url("data:image/svg+xml;utf8, <svg xmlns = \'http://www.w3.org/2000/svg\'><filter x=\"-50%\" y=\"-50%\" width=\"200%\" height=\"200%\" id=\"blue-glow\"><feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.7 0 0 0 1 0 \"></feColorMatrix><feGaussianBlur stdDeviation=\"3\" result=\"coloredBlur\"></feGaussianBlur><feMerge><feMergeNode in=\"coloredBlur\"></feMergeNode><feMergeNode in=\"SourceGraphic\"></feMergeNode></feMerge></filter></svg>#blue-glow");
|
||||
}
|
||||
|
||||
/* --- Topo Nodes --- */
|
||||
|
||||
/* Device Nodes */
|
||||
|
||||
/* note: device without the 'online' class is offline */
|
||||
.dark #ov-topo svg .node.device rect {
|
||||
fill: #707070;
|
||||
}
|
||||
.dark #ov-topo svg .node.device text {
|
||||
fill: #444;
|
||||
}
|
||||
.dark #ov-topo svg .node.device use {
|
||||
fill: #eee;
|
||||
}
|
||||
|
||||
.dark #ov-topo svg .node.device.online rect {
|
||||
fill: #525660;
|
||||
}
|
||||
.dark #ov-topo svg .node.device.online text {
|
||||
fill: #fff;
|
||||
}
|
||||
.dark #ov-topo svg .node.device.online use {
|
||||
fill: #fff;
|
||||
}
|
||||
|
||||
.dark #ov-topo svg .node.device.selected rect {
|
||||
stroke-width: 2.0;
|
||||
stroke: #009fdb;
|
||||
}
|
||||
|
||||
|
||||
/* Host Nodes */
|
||||
|
||||
.dark #ov-topo svg .node.host {
|
||||
}
|
||||
|
||||
.dark #ov-topo svg .node.host text {
|
||||
stroke: none;
|
||||
font: 9pt sans-serif;
|
||||
fill: #ad5781;
|
||||
}
|
||||
|
||||
.dark #ov-topo svg .node.host circle {
|
||||
stroke: #a3a596;
|
||||
fill: #8f8272;
|
||||
}
|
||||
.dark #ov-topo svg .node.host.selected .hostIcon > circle {
|
||||
stroke-width: 2.0;
|
||||
stroke: #009fdb;
|
||||
}
|
||||
|
||||
.dark #ov-topo svg .node.host use {
|
||||
fill: #000;
|
||||
}
|
||||
|
||||
/* --- Topo Links --- */
|
||||
.dark #ov-topo svg .link.not-permitted {
|
||||
stroke: rgb(255, 60, 60);
|
||||
}
|
||||
|
||||
/* Port traffic color visualization for Kbps, Mbps, and Gbps */
|
||||
/* .. values good for both light and dark themes */
|
||||
|
||||
/* Primary, Secondary (optical too) colors good for both themes */
|
||||
|
||||
/* Link Labels */
|
||||
.dark #ov-topo svg .linkLabel rect {
|
||||
fill: #555;
|
||||
}
|
||||
|
||||
.dark #ov-topo svg .linkLabel text {
|
||||
fill: #eee;
|
||||
}
|
||||
|
||||
/* Port Labels */
|
||||
|
||||
.dark #ov-topo svg .portLabel rect {
|
||||
fill: #222;
|
||||
}
|
||||
|
||||
.dark #ov-topo svg .portLabel text {
|
||||
fill: #eee;
|
||||
}
|
||||
|
||||
/* Number of Links Labels */
|
||||
|
||||
.dark #ov-topo text.numLinkText {
|
||||
fill: #eee;
|
||||
}
|
||||
|
||||
|
||||
/* Sprite Layer */
|
||||
|
||||
.dark #ov-topo svg #topo-sprites .gold1 use {
|
||||
stroke: #541;
|
||||
}
|
||||
.dark #ov-topo svg #topo-sprites .gold1 text {
|
||||
fill: #543;
|
||||
}
|
||||
|
||||
.dark #ov-topo svg #topo-sprites .blue1 use {
|
||||
stroke: #445;
|
||||
}
|
||||
.dark #ov-topo svg #topo-sprites .blue1 text {
|
||||
fill: #446;
|
||||
}
|
||||
|
||||
.dark #ov-topo svg #topo-sprites .gray1 use {
|
||||
stroke: #333;
|
||||
}
|
||||
.dark #ov-topo svg #topo-sprites .gray1 text {
|
||||
fill: #444;
|
||||
}
|
||||
|
||||
/* fills */
|
||||
.dark #ov-topo svg #topo-sprites use.fill-gray2 {
|
||||
fill: #444;
|
||||
}
|
||||
|
||||
.dark #ov-topo svg #topo-sprites use.fill-blue2 {
|
||||
fill: #447;
|
||||
}
|
||||
|
||||
@ -227,7 +227,6 @@
|
||||
<link rel="stylesheet" href="app/view/flow/flow.css">
|
||||
<link rel="stylesheet" href="app/view/flow/flow-theme.css">
|
||||
<link rel="stylesheet" href="app/view/port/port.css">
|
||||
<link rel="stylesheet" href="app/view/port/port-theme.css">
|
||||
<link rel="stylesheet" href="app/view/group/group.css">
|
||||
<link rel="stylesheet" href="app/view/group/group-theme.css">
|
||||
<link rel="stylesheet" href="app/view/meter/meter.css">
|
||||
@ -240,9 +239,9 @@
|
||||
<link rel="stylesheet" href="app/view/app/app.css">
|
||||
<link rel="stylesheet" href="app/view/app/app-theme.css">
|
||||
<link rel="stylesheet" href="app/view/settings/settings.css">
|
||||
<link rel="stylesheet" href="app/view/settings/settings-theme.css">
|
||||
<link rel="stylesheet" href="app/view/cluster/cluster.css">
|
||||
<link rel="stylesheet" href="app/view/processor/processor.css">
|
||||
<link rel="stylesheet" href="app/view/processor/processor-theme.css">
|
||||
<link rel="stylesheet" href="app/view/tunnel/tunnel.css">
|
||||
|
||||
<!-- Contributed stylesheets injected here -->
|
||||
|
||||
@ -157,38 +157,36 @@ describe('factory: fw/svg/svgUtil.js', function() {
|
||||
expect(sus.cat7().getColor('foo', false, 'light')).toEqual('#5b99d2');
|
||||
});
|
||||
|
||||
it('should provide red', function () {
|
||||
expect(sus.cat7().getColor('bar', false, 'light')).toEqual('#d05a55');
|
||||
it('should provide lt-blue', function () {
|
||||
expect(sus.cat7().getColor('bar', false, 'light')).toEqual('#66cef6');
|
||||
});
|
||||
|
||||
it('should provide paler shade of blue for muted', function () {
|
||||
expect(sus.cat7().getColor('foo', true, 'light')).toEqual('#a8cceb');
|
||||
expect(sus.cat7().getColor('foo', true, 'light')).toEqual('#9ebedf');
|
||||
});
|
||||
|
||||
// TODO: dark theme required
|
||||
xit('should provide an alternate (dark) shade of blue', function () {
|
||||
it('should provide an alternate (dark) shade of blue', function () {
|
||||
expect(sus.cat7().getColor('foo', false, 'dark')).toEqual('#5b99d2');
|
||||
});
|
||||
|
||||
// TODO: dark theme required
|
||||
xit('should provide an alternate (dark) shade of blue for muted', function () {
|
||||
expect(sus.cat7().getColor('foo', true, 'dark')).toEqual('#a8cceb');
|
||||
it('should provide an alternate (dark) shade of blue for muted', function () {
|
||||
expect(sus.cat7().getColor('foo', true, 'dark')).toEqual('#9ebedf');
|
||||
});
|
||||
|
||||
it('should iterate across the colors', function () {
|
||||
expect(sus.cat7().getColor('foo', false, 'light')).toEqual('#5b99d2');
|
||||
expect(sus.cat7().getColor('bar', false, 'light')).toEqual('#d05a55');
|
||||
expect(sus.cat7().getColor('baz', false, 'light')).toEqual('#716b6b');
|
||||
expect(sus.cat7().getColor('zoo', false, 'light')).toEqual('#7e9aa8');
|
||||
expect(sus.cat7().getColor('sdh', false, 'light')).toEqual('#66cef6');
|
||||
expect(sus.cat7().getColor('goo', false, 'light')).toEqual('#db7773');
|
||||
expect(sus.cat7().getColor('pip', false, 'light')).toEqual('#aeada8');
|
||||
expect(sus.cat7().getColor('bar', false, 'light')).toEqual('#66cef6');
|
||||
expect(sus.cat7().getColor('baz', false, 'light')).toEqual('#d05a55');
|
||||
expect(sus.cat7().getColor('zoo', false, 'light')).toEqual('#0f9d58');
|
||||
expect(sus.cat7().getColor('sdh', false, 'light')).toEqual('#ba7941');
|
||||
expect(sus.cat7().getColor('goo', false, 'light')).toEqual('#3dc0bf');
|
||||
expect(sus.cat7().getColor('pip', false, 'light')).toEqual('#56af00');
|
||||
|
||||
// and cycle back to the first color for item #8
|
||||
expect(sus.cat7().getColor('bri', false, 'light')).toEqual('#5b99d2');
|
||||
|
||||
// and return the same color for the same ID
|
||||
expect(sus.cat7().getColor('zoo', false, 'light')).toEqual('#7e9aa8');
|
||||
expect(sus.cat7().getColor('zoo', false, 'light')).toEqual('#0f9d58');
|
||||
});
|
||||
|
||||
// === translate(), scale(), skewX(), rotate()
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user