홍길동 / onos

Go to a project
Toggle navigation Toggle navigation pinning
Simon Hunt
11f662f6 1 parent e397aa3b

Separating theme from layout for CSS files. 

Change-Id: I4c3cec28b30de8026df4298f65ebf6ad92faf68f
Inline Side-by-side
Showing 47 changed files with 1950 additions and 1383 deletions
/*
* 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 -- Dialog Service (theme) -- CSS file
*/
.light .dialog h2 {
color: black;
}
.dark .dialog h2 {
color: #ddd;
}
.dialog .dialog-button {
/* color works for both light and dark themes */
background-color: #c55;
color: white;
}
......@@ -15,7 +15,7 @@
*/
/*
ONOS GUI -- Dialog Service -- CSS file
ONOS GUI -- Dialog Service (layout) -- CSS file
*/
.dialog h2 {
......@@ -26,12 +26,6 @@
width: 210px;
vertical-align: middle;
}
.light .dialog h2 {
color: black;
}
.dark .dialog h2 {
color: #ddd;
}
.dialog .dialog-button {
border-radius: 3px;
......@@ -41,8 +35,4 @@
padding: 6px 8px 2px 8px;
margin: 4px;
float: right;
/* color works for both light and dark themes */
background-color: #c55;
color: white;
}
......
/*
* 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 -- Flash Service (theme) -- CSS file
*/
.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 .centered {
box-shadow: 2px 2px 24px 5px #888;
background-color: #eee;
}
......@@ -15,7 +15,7 @@
*/
/*
ONOS GUI -- Flash Service -- CSS file
ONOS GUI -- Flash Service (layout) -- CSS file
*/
#flash {
......@@ -28,22 +28,20 @@
opacity: 0.8;
}
.light #flash svg g.flashItem rect {
fill: #ccc;
}
.dark #flash svg g.flashItem rect {
fill: #555;
}
#flash svg g.flashItem text {
stroke: none;
text-anchor: middle;
alignment-baseline: middle;
font-size: 16pt;
}
.light #flash svg g.flashItem text {
fill: #333;
}
.dark #flash svg g.flashItem text {
fill: #999;
/* Used for temp div */
.centered {
position: fixed;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
margin: 0;
padding: 10px;
}
......
/*
* 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 -- Panel Service (theme) -- CSS file
*/
.light .floatpanel {
background-color: rgba(255,255,255,0.8);
color: black;
box-shadow: 0 2px 12px #777;
}
.dark .floatpanel {
background-color: rgba(50,50,50,0.8);
color: #ccc;
box-shadow: 0 2px 12px #000;
}
......@@ -15,7 +15,7 @@
*/
/*
ONOS GUI -- Panel Service -- CSS file
ONOS GUI -- Panel Service (layout) -- CSS file
*/
.floatpanel {
......@@ -41,14 +41,3 @@
html[data-platform='iPad'] .floatpanel {
top: 80px;
}
.light .floatpanel {
background-color: rgba(255,255,255,0.8);
color: black;
box-shadow: 0 2px 12px #777;
}
.dark .floatpanel {
background-color: rgba(50,50,50,0.8);
color: #ccc;
box-shadow: 0 2px 12px #000;
}
......
/*
* 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 -- Quick Help Service (theme) -- CSS file
*/
#quickhelp svg g.help rect {
fill: black;
opacity: 0.7;
}
#quickhelp svg text.title {
fill: #999;
}
#quickhelp svg g.keyItem {
fill: white;
}
#quickhelp svg g line.qhrowsep {
stroke: #888;
stroke-dasharray: 2 2;
}
#quickhelp svg text.key {
fill: #add;
}
#quickhelp svg text.desc {
fill: #ddd;
}
......@@ -15,7 +15,7 @@
*/
/*
ONOS GUI -- Quick Help Service -- CSS file
ONOS GUI -- Quick Help Service (layout) -- CSS file
*/
#quickhelp {
......@@ -28,37 +28,13 @@
opacity: 1;
}
#quickhelp svg g.help rect {
fill: black;
opacity: 0.7;
}
#quickhelp svg text.title {
font-size: 10pt;
font-style: italic;
text-anchor: middle;
fill: #999;
}
#quickhelp svg g.keyItem {
fill: white;
}
#quickhelp svg g line.qhrowsep {
stroke: #888;
stroke-dasharray: 2 2;
}
#quickhelp svg text {
font-size: 7pt;
alignment-baseline: middle;
}
#quickhelp svg text.key {
fill: #add;
}
#quickhelp svg text.desc {
fill: #ddd;
}
......
/*
* 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 -- Veil Service (theme) -- CSS file
*/
.light #veil {
background-color: rgba(0,0,0,0.75);
}
.dark #veil {
background-color: rgba(64,64,64,0.75);
}
#veil .msg p {
color: #ddd;
}
#veil svg .glyph {
fill: #222;
}
......@@ -15,7 +15,7 @@
*/
/*
ONOS GUI -- Veil Service -- CSS file
ONOS GUI -- Veil Service (layout) -- CSS file
*/
#veil {
......@@ -26,13 +26,6 @@
left: 0;
}
.light #veil {
background-color: rgba(0,0,0,0.75);
}
.dark #veil {
background-color: rgba(64,64,64,0.75);
}
#veil .msg {
position: absolute;
padding: 60px;
......@@ -42,9 +35,4 @@
display: block;
font-size: 14pt;
font-style: italic;
color: #ddd;
}
#veil svg .glyph {
fill: #222;
}
......
/*
* 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 -- Masthead (theme) -- CSS file
*/
.light #mast {
background-color: #bbb;
box-shadow: 0 2px 8px #777;
}
.dark #mast {
background-color: #444;
box-shadow: 0 2px 8px #222;
}
.light #mast .nav-menu-button:hover {
background-color: #ddd;
}
.dark #mast .nav-menu-button:hover {
background-color: #777;
}
#mast img.logo:hover {
/* need something better */
/*background-color: #888;*/
}
.light #mast .title {
color: #369;
}
.dark #mast .title {
color: #eee;
}
.light #mast-right a {
color: #369;
}
.dark #mast-right a {
color: #eee;
}
.light #mast nav {
color: #369;
}
.dark #mast nav {
color: #eee;
}
/* Theme styles for drop down menu */
.light #mast .dropdown {
background-color: #bbb;
box-shadow: 0 2px 8px #777;
}
.dark #mast .dropdown {
background-color: #444;
box-shadow: 0 2px 8px #111;
}
.light #mast .dropdown a {
color: #369;
border-bottom: solid #ccc 1px;
}
.dark #mast .dropdown a {
color: #eee;
border-bottom: solid #333 1px;
}
.light #mast .dropdown a:hover {
background-color: #ddd;
}
.dark #mast .dropdown a:hover {
background-color: #777;
}
......@@ -15,7 +15,7 @@
*/
/*
ONOS GUI -- Masthead -- CSS file
ONOS GUI -- Masthead (layout) -- CSS file
*/
#mast {
......@@ -28,15 +28,6 @@ html[data-platform='iPad'] #mast {
padding-top: 16px;
}
.light #mast {
background-color: #bbb;
box-shadow: 0 2px 8px #777;
}
.dark #mast {
background-color: #444;
box-shadow: 0 2px 8px #222;
}
#mast .nav-menu-button {
width: 30px;
height: 30px;
......@@ -44,12 +35,6 @@ html[data-platform='iPad'] #mast {
margin-bottom: 4px;
cursor: pointer;
}
.light #mast .nav-menu-button:hover {
background-color: #ddd;
}
.dark #mast .nav-menu-button:hover {
background-color: #777;
}
#mast img.logo {
height: 38px;
......@@ -57,23 +42,12 @@ html[data-platform='iPad'] #mast {
padding-right: 8px;
}
#mast img.logo:hover {
/* need something better */
/*background-color: #888;*/
}
#mast .title {
font-size: 14pt;
font-style: italic;
vertical-align: 12px;
}
.light #mast .title {
color: #369;
}
.dark #mast .title {
color: #eee;
}
#mast-right {
display: inline-block;
......@@ -84,21 +58,6 @@ html[data-platform='iPad'] #mast {
line-height: 44px;
}
.light #mast-right a {
color: #369;
}
.dark #mast-right a {
color: #eee;
}
.light #mast nav {
color: #369;
}
.dark #mast nav {
color: #eee;
}
/*
MAST HEAD DROPDOWN MENU
......@@ -145,33 +104,3 @@ html[data-platform='iPad'] #mast {
html[data-platform='iPad'] #mast .dropdown {
top: 57px;
}
/* Theme styles for drop down menu */
.light #mast .dropdown {
background-color: #bbb;
box-shadow: 0 2px 8px #777;
}
.dark #mast .dropdown {
background-color: #444;
box-shadow: 0 2px 8px #111;
}
.light #mast .dropdown a {
color: #369;
border-bottom: solid #ccc 1px;
}
.dark #mast .dropdown a {
color: #eee;
border-bottom: solid #333 1px;
}
.light #mast .dropdown a:hover {
background-color: #ddd;
}
.dark #mast .dropdown a:hover {
background-color: #777;
}
\ No newline at end of file
......
/*
* 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 -- Navigation (theme) -- CSS file
*/
.light #nav {
background-color: #bbb;
box-shadow: 0 2px 8px #777;
}
.dark #nav {
background-color: #444;
box-shadow: 0 2px 8px #111;
}
.light #nav .nav-hdr {
color: #ddd;
border-bottom: solid 1px #999;
background-color: #aaa;
}
.dark #nav .nav-hdr {
color: #888;
border-bottom: solid 1px #444;
background-color: #555;
}
.light #nav a {
color: #369;
border-bottom: solid #ccc 1px;
}
.dark #nav a {
color: #eee;
border-bottom: solid #333 1px;
}
.light #nav a:hover {
background-color: #ddd;
}
.dark #nav a:hover {
background-color: #777;
}
#nav a div svg.embeddedIcon g.icon .glyph {
fill: #c66;
}
......@@ -15,7 +15,7 @@
*/
/*
ONOS GUI -- Navigation -- CSS file
ONOS GUI -- Navigation (layout) -- CSS file
*/
#nav {
......@@ -31,31 +31,11 @@ html[data-platform='iPad'] #nav {
top: 57px;
}
.light #nav {
background-color: #bbb;
box-shadow: 0 2px 8px #777;
}
.dark #nav {
background-color: #444;
box-shadow: 0 2px 8px #111;
}
#nav .nav-hdr {
font-style: italic;
padding: 6px 8px 6px 8px;
}
.light #nav .nav-hdr {
color: #ddd;
border-bottom: solid 1px #999;
background-color: #aaa;
}
.dark #nav .nav-hdr {
color: #888;
border-bottom: solid 1px #444;
background-color: #555;
}
#nav a {
text-decoration: none;
font-size: 14pt;
......@@ -63,28 +43,8 @@ html[data-platform='iPad'] #nav {
padding: 8px 16px 6px 12px;
}
.light #nav a {
color: #369;
border-bottom: solid #ccc 1px;
}
.dark #nav a {
color: #eee;
border-bottom: solid #333 1px;
}
.light #nav a:hover {
background-color: #ddd;
}
.dark #nav a:hover {
background-color: #777;
}
#nav a div {
display: inline-block;
vertical-align: middle;
padding-right: 4px;
}
#nav a div svg.embeddedIcon g.icon .glyph {
fill: #c66;
}
......
/*
* 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 -- Glyph Service (theme) -- CSS file
*/
.light svg .glyph,
.dark svg .glyph.overlay {
fill: black;
}
.dark svg .glyph,
.light svg .glyph.overlay {
fill: white;
}
......@@ -15,20 +15,10 @@
*/
/*
ONOS GUI -- Glyph Service -- CSS file
ONOS GUI -- Glyph Service (layout) -- CSS file
*/
svg .glyph {
stroke: none;
fill-rule: evenodd;
}
.light svg .glyph,
.dark svg .glyph.overlay {
fill: black;
}
.dark svg .glyph,
.light svg .glyph.overlay {
fill: white;
}
......
/*
* 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 -- Icon Service (theme) -- CSS file
*/
.light svg.embeddedIcon g.icon .glyph {
fill: white;
}
.dark svg.embeddedIcon g.icon .glyph {
fill: white;
}
/* Sortable table headers */
.light div.tableColSort svg.embeddedIcon .icon .glyph {
fill: black;
}
.dark div.tableColSort svg.embeddedIcon .icon .glyph {
fill: #ccc;
}
.light svg.embeddedIcon .icon.active .glyph {
fill: green;
}
.dark svg.embeddedIcon .icon.active .glyph {
fill: #308C10;
}
.light table svg.embeddedIcon {
fill: #ccc;
}
.dark table svg.embeddedIcon {
fill: #222;
}
.light table svg.embeddedIcon .glyph {
fill: #333;
}
.dark table svg.embeddedIcon .glyph {
fill: #ccc;
}
.light svg.embeddedIcon .icon.active .glyph {
fill: green;
}
.light svg.embeddedIcon .icon.inactive .glyph {
fill: darkred;
}
.dark svg.embeddedIcon .icon.active .glyph {
fill: #308C10;
}
.dark svg.embeddedIcon .icon.inactive .glyph {
fill: #AD2D2D;
}
......@@ -15,7 +15,7 @@
*/
/*
ONOS GUI -- Icon Service -- CSS file
ONOS GUI -- Icon Service (layout) -- CSS file
*/
svg#IconLibDefs {
......@@ -37,56 +37,9 @@ svg.embeddedIcon g.icon rect {
svg.embeddedIcon g.icon .glyph {
stroke: none;
fill: white;
fill-rule: evenodd;
}
/* Sortable table headers */
.light div.tableColSort svg.embeddedIcon .icon .glyph {
fill: black;
}
.dark div.tableColSort svg.embeddedIcon .icon .glyph {
fill: #ccc;
}
/* color schemes for specific icon classes */
svg.embeddedIcon .icon.appInactive .glyph {
fill: none;
}
.light svg.embeddedIcon .icon.active .glyph {
fill: green;
}
.dark svg.embeddedIcon .icon.active .glyph {
fill: #308C10;
}
.light table svg.embeddedIcon {
fill: #ccc;
}
.dark table svg.embeddedIcon {
fill: #222;
}
.light table svg.embeddedIcon .glyph {
fill: #333;
}
.dark table svg.embeddedIcon .glyph {
fill: #ccc;
}
.light svg.embeddedIcon .icon.active .glyph {
fill: green;
}
.light svg.embeddedIcon .icon.inactive .glyph {
fill: darkred;
}
.dark svg.embeddedIcon .icon.active .glyph {
fill: #308C10;
}
.dark svg.embeddedIcon .icon.inactive .glyph {
fill: #AD2D2D;
}
......
/*
* 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 -- Button Service (theme) -- CSS file
*/
/* Selected button color */
.light .button svg.embeddedIcon .icon rect,
.light .toggleButton.selected svg.embeddedIcon .icon rect,
.light .radioButton.selected svg.embeddedIcon .icon rect {
fill: #838383;
}
.light .button:hover svg.embeddedIcon .icon rect,
.light .toggleButton.selected:hover svg.embeddedIcon .icon rect
/* NOTE: selected radio button should NOT have hover highlight */
{
fill: #444444;
}
.light .button svg.embeddedIcon .glyph,
.light .toggleButton.selected svg.embeddedIcon .glyph,
.light .radioButton.selected svg.embeddedIcon .glyph {
fill: white;
}
.dark .button svg.embeddedIcon .icon rect,
.dark .toggleButton.selected svg.embeddedIcon .icon rect,
.dark .radioButton.selected svg.embeddedIcon .icon rect {
fill: #151515;
}
.dark .button:hover svg.embeddedIcon .icon rect,
.dark .toggleButton.selected:hover svg.embeddedIcon .icon rect
/* NOTE: selected radio button should NOT have hover highlight */
{
fill: #444;
}
.dark .button svg.embeddedIcon .glyph,
.dark .toggleButton.selected svg.embeddedIcon .glyph,
.dark .radioButton.selected svg.embeddedIcon .glyph {
fill: #B2B2B2;
}
/* Unselected button color */
.light .toggleButton svg.embeddedIcon .icon rect,
.light .radioButton svg.embeddedIcon .icon rect {
fill: #eee;
}
.light .toggleButton:hover svg.embeddedIcon .icon rect,
.light .radioButton:hover:not(.selected) svg.embeddedIcon .icon rect {
fill: #ccc;
}
.light .toggleButton svg.embeddedIcon .glyph,
.light .radioButton svg.embeddedIcon .glyph {
fill: #bbb;
}
.light .toggleButton:hover:not(.selected) svg.embeddedIcon .glyph,
.light .radioButton:hover:not(.selected) svg.embeddedIcon .glyph {
fill: #999;
}
.dark .toggleButton svg.embeddedIcon .icon rect,
.dark .radioButton svg.embeddedIcon .icon rect {
fill: #303030;
}
.dark .toggleButton:hover:not(.selected) svg.embeddedIcon .icon rect,
.dark .radioButton:hover:not(.selected) svg.embeddedIcon .icon rect {
fill: #555;
}
.dark .toggleButton svg.embeddedIcon .glyph,
.dark .radioButton svg.embeddedIcon .glyph {
fill: #565656;
}
.dark .toggleButton:hover:not(.selected) svg.embeddedIcon .glyph,
.dark .radioButton:hover:not(.selected) svg.embeddedIcon .glyph {
fill: #777;
}
......@@ -15,7 +15,7 @@
*/
/*
ONOS GUI -- Button Service -- CSS file
ONOS GUI -- Button Service (layout) -- CSS file
*/
.button,
......@@ -39,82 +39,3 @@
.radioButton svg.embeddedIcon .icon rect{
stroke: none;
}
/* Selected button color */
.light .button svg.embeddedIcon .icon rect,
.light .toggleButton.selected svg.embeddedIcon .icon rect,
.light .radioButton.selected svg.embeddedIcon .icon rect {
fill: #838383;
}
.light .button:hover svg.embeddedIcon .icon rect,
.light .toggleButton.selected:hover svg.embeddedIcon .icon rect
/* NOTE: selected radio button should NOT have hover highlight */
{
fill: #444444;
}
.light .button svg.embeddedIcon .glyph,
.light .toggleButton.selected svg.embeddedIcon .glyph,
.light .radioButton.selected svg.embeddedIcon .glyph {
fill: white;
}
.dark .button svg.embeddedIcon .icon rect,
.dark .toggleButton.selected svg.embeddedIcon .icon rect,
.dark .radioButton.selected svg.embeddedIcon .icon rect {
fill: #151515;
}
.dark .button:hover svg.embeddedIcon .icon rect,
.dark .toggleButton.selected:hover svg.embeddedIcon .icon rect
/* NOTE: selected radio button should NOT have hover highlight */
{
fill: #444;
}
.dark .button svg.embeddedIcon .glyph,
.dark .toggleButton.selected svg.embeddedIcon .glyph,
.dark .radioButton.selected svg.embeddedIcon .glyph {
fill: #B2B2B2;
}
/* Unselected button color */
.light .toggleButton svg.embeddedIcon .icon rect,
.light .radioButton svg.embeddedIcon .icon rect {
fill: #eee;
}
.light .toggleButton:hover svg.embeddedIcon .icon rect,
.light .radioButton:hover:not(.selected) svg.embeddedIcon .icon rect {
fill: #ccc;
}
.light .toggleButton svg.embeddedIcon .glyph,
.light .radioButton svg.embeddedIcon .glyph {
fill: #bbb;
}
.light .toggleButton:hover:not(.selected) svg.embeddedIcon .glyph,
.light .radioButton:hover:not(.selected) svg.embeddedIcon .glyph {
fill: #999;
}
.dark .toggleButton svg.embeddedIcon .icon rect,
.dark .radioButton svg.embeddedIcon .icon rect {
fill: #303030;
}
.dark .toggleButton:hover:not(.selected) svg.embeddedIcon .icon rect,
.dark .radioButton:hover:not(.selected) svg.embeddedIcon .icon rect {
fill: #555;
}
.dark .toggleButton svg.embeddedIcon .glyph,
.dark .radioButton svg.embeddedIcon .glyph {
fill: #565656;
}
.dark .toggleButton:hover:not(.selected) svg.embeddedIcon .glyph,
.dark .radioButton:hover:not(.selected) svg.embeddedIcon .glyph {
fill: #777;
}
......
/*
* 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.
*/
/* ------ for summary-list tables (theme) ------ */
.light div.summary-list tr:nth-child(even) {
background-color: #ddd;
}
.light div.summary-list tr:nth-child(odd) {
background-color: #eee;
}
.dark div.summary-list tr:nth-child(even) {
background-color: #333;
}
.dark div.summary-list tr:nth-child(odd) {
background-color: #444;
}
.light div.summary-list tr.selected {
background-color: deepskyblue !important;
}
.dark div.summary-list tr.selected {
background-color: #304860;
}
/* highlighting */
.light div.summary-list tr.data-change {
background-color: #FDFFDC;
}
.dark div.summary-list tr.data-change {
background-color: #5A5600;
}
.light div.summary-list .table-header td {
background-color: #bbb;
}
.dark div.summary-list .table-header td {
background-color: #222;
color: #ccc;
}
.dark div.summary-list td {
color: #ccc;
}
/* Inactive */
.light .ctrl-btns div g.icon rect,
.light .ctrl-btns div:hover g.icon rect {
fill: #eee;
}
.dark .ctrl-btns div g.icon rect,
.dark .ctrl-btns div:hover g.icon rect {
fill: #222;
}
.light .ctrl-btns div g.icon use {
fill: #ddd;
}
.dark .ctrl-btns div g.icon use {
fill: #333;
}
/* Active hover */
.light .ctrl-btns div.active:hover g.icon rect {
fill: #800;
}
.dark .ctrl-btns div.active:hover g.icon rect {
fill: #CE5650;
}
/* Active */
.light .ctrl-btns div.active g.icon use {
fill: #fff;
}
.dark .ctrl-btns div.active g.icon use {
fill: #eee;
}
.light .ctrl-btns div.active g.icon rect {
fill: #bbb;
}
.dark .ctrl-btns div.active g.icon rect {
fill: #444;
}
/* Refresh button specific */
.light .ctrl-btns div.refresh.active g.icon rect {
fill: #964949;
}
.dark .ctrl-btns div.refresh.active g.icon rect {
fill: #9B4641;
}
.light .ctrl-btns div.refresh:hover g.icon rect {
fill: #964949;
}
.dark .ctrl-btns div.refresh:hover g.icon rect {
fill: #9B4641;
}
......@@ -14,7 +14,7 @@
* limitations under the License.
*/
/* ------ for summary-list tables ------ */
/* ------ for summary-list tables (layout) ------ */
div.summary-list {
margin: 0 20px 16px 10px;
......@@ -42,37 +42,11 @@ div.summary-list tr.no-data td {
font-style: italic;
}
.light div.summary-list tr:nth-child(even) {
background-color: #ddd;
}
.light div.summary-list tr:nth-child(odd) {
background-color: #eee;
}
.dark div.summary-list tr:nth-child(even) {
background-color: #333;
}
.dark div.summary-list tr:nth-child(odd) {
background-color: #444;
}
.light div.summary-list tr.selected {
background-color: deepskyblue !important;
}
.dark div.summary-list tr.selected {
background-color: #304860;
}
/* highlighting */
div.summary-list tr {
transition: background-color 500ms;
}
.light div.summary-list tr.data-change {
background-color: #FDFFDC;
}
.dark div.summary-list tr.data-change {
background-color: #5A5600;
}
div.summary-list td {
padding: 6px;
......@@ -92,23 +66,11 @@ div.summary-list .table-header td:last-child {
border-radius: 0 8px 0 0;
}
.light div.summary-list .table-header td {
background-color: #bbb;
}
.dark div.summary-list .table-header td {
background-color: #222;
color: #ccc;
}
/* rows are selectable */
div.summary-list .table-body td {
cursor: pointer;
}
.dark div.summary-list td {
color: #ccc;
}
/* Tabular view upper right control buttons */
div.ctrl-btns {
......@@ -119,7 +81,6 @@ div.ctrl-btns {
margin-top: 7px;
}
div.ctrl-btns div {
display: inline-block;
padding: 4px;
......@@ -131,60 +92,3 @@ div.ctrl-btns div.separator {
width: 24px;
border: none;
}
/* Inactive */
.light .ctrl-btns div g.icon rect,
.light .ctrl-btns div:hover g.icon rect {
fill: #eee;
}
.dark .ctrl-btns div g.icon rect,
.dark .ctrl-btns div:hover g.icon rect {
fill: #222;
}
.light .ctrl-btns div g.icon use {
fill: #ddd;
}
.dark .ctrl-btns div g.icon use {
fill: #333;
}
/* Active hover */
.light .ctrl-btns div.active:hover g.icon rect {
fill: #800;
}
.dark .ctrl-btns div.active:hover g.icon rect {
fill: #CE5650;
}
/* Active */
.light .ctrl-btns div.active g.icon use {
fill: #fff;
}
.dark .ctrl-btns div.active g.icon use {
fill: #eee;
}
.light .ctrl-btns div.active g.icon rect {
fill: #bbb;
}
.dark .ctrl-btns div.active g.icon rect {
fill: #444;
}
/* Refresh button specific */
.light .ctrl-btns div.refresh.active g.icon rect {
fill: #964949;
}
.dark .ctrl-btns div.refresh.active g.icon rect {
fill: #9B4641;
}
.light .ctrl-btns div.refresh:hover g.icon rect {
fill: #964949;
}
.dark .ctrl-btns div.refresh:hover g.icon rect {
fill: #9B4641;
}
......
/*
* 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 -- 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;
}
.dark .tbar-arrow svg.embeddedIcon .icon rect {
fill: none;
}
.light .separator {
border-color: #ddd;
}
.dark .separator {
border-color: #1A1A1A;
}
......@@ -15,17 +15,9 @@
*/
/*
ONOS GUI -- Toolbar Service -- CSS file
ONOS GUI -- Toolbar Service (layout) -- CSS file
*/
.light .tbar-arrow svg.embeddedIcon .icon .glyph {
fill: #838383;
}
.dark .tbar-arrow svg.embeddedIcon .icon .glyph {
fill: #B2B2B2;
}
div.tbar-arrow {
position: absolute;
top: 53%;
......@@ -42,17 +34,6 @@ div.tbar-arrow {
margin-right: -3%;
}
.tbar-arrow svg.embeddedIcon .icon rect {
stroke: none;
}
.light .tbar-arrow svg.embeddedIcon .icon rect {
fill: none;
}
.dark .tbar-arrow svg.embeddedIcon .icon rect {
fill: none;
}
.toolbar {
line-height: 125%;
}
......@@ -60,8 +41,6 @@ div.tbar-arrow {
display: inline-block;
}
.separator {
border: 1px solid;
margin: 0 4px 0 4px;
......@@ -69,9 +48,3 @@ div.tbar-arrow {
height: 23px;
width: 0;
}
.light .separator {
border-color: #ddd;
}
.dark .separator {
border-color: #1A1A1A;
}
......
/*
* 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 -- Tooltip Service (theme) -- CSS file
*/
.light #tooltip {
background-color: #ddd;
color: #444;
border-color: #ccc;
}
.dark #tooltip {
background-color: #151515;
color: #B2B2B2;
border-color: #252525;
}
......@@ -15,7 +15,7 @@
*/
/*
ONOS GUI -- Tooltip Service -- CSS file
ONOS GUI -- Tooltip Service (layout) -- CSS file
*/
#tooltip {
......@@ -28,17 +28,3 @@
display: none;
pointer-events: none;
}
/* colors subject to change */
.light #tooltip {
background-color: #ddd;
color: #444;
border-color: #ccc;
}
.dark #tooltip {
background-color: #151515;
color: #B2B2B2;
border-color: #252525;
}
\ No newline at end of file
......
/*
* 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 -- core (theme) -- CSS file
*/
body.light {
background-color: white;
}
body.dark {
background-color: #2b2b2b;
}
.light #view h2 {
color: #800;
}
.dark #view h2 {
color: #CE5650;
}
......@@ -15,7 +15,7 @@
*/
/*
ONOS GUI -- core -- CSS file
ONOS GUI -- core (layout) -- CSS file
*/
html {
......@@ -35,13 +35,6 @@ body {
overflow: hidden;
}
body.light {
background-color: white;
}
body.dark {
background-color: #2b2b2b;
}
#view {
padding: 6px;
width: 100%;
......@@ -52,21 +45,3 @@ body.dark {
padding-left: 12px;
}
.light #view h2 {
color: #800;
}
.dark #view h2 {
color: #CE5650;
}
.centered {
position: fixed;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
box-shadow: 2px 2px 24px 5px #888;
background-color: #eee;
margin: 0;
padding: 10px;
}
......
/*
* 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 -- Applications View (theme) -- CSS file
*/
.light #app-dialog p {
color: darkred;
}
.dark #app-dialog p {
color: #c55;
}
.light #app-dialog p.strong {
color: red;
background-color: #ff0;
}
.dark #app-dialog p.strong {
color: #c55;
background-color: #dd4;
}
.light #app-dialog.floatpanel.dialog {
background-color: #fff;
}
.dark #app-dialog.floatpanel.dialog {
background-color: #444;
}
.light #application-details-panel.floatpanel {
background-color: rgb(229, 234, 237);
}
.dark #application-details-panel.floatpanel {
background-color: #3A4042;
}
.light .close-btn svg.embeddedIcon .icon.plus .glyph {
fill: #aaa;
}
.dark .close-btn svg.embeddedIcon .icon.plus .glyph {
fill: #ccc;
}
#application-details-panel td.label,
#application-details-panel .app-url i {
/* works for both light and dark themes ... */
color: #777;
}
.light #application-details-panel hr {
opacity: .5;
border-color: #FFF;
}
.dark #application-details-panel hr {
border-color: #666;
}
.light #application-details-panel .bottom tr:nth-child(odd) {
background-color: #f9f9f9;
}
.light #application-details-panel .bottom tr:nth-child(even) {
background-color: #EBEDF2;
}
.dark #application-details-panel .bottom tr:nth-child(odd) {
background-color: #333;
}
.dark #application-details-panel .bottom tr:nth-child(even) {
background-color: #555;
}
.light div.dropping {
border: solid 3px deepskyblue;
}
.dark div.dropping {
border: solid 3px deepskyblue;
}
......@@ -15,7 +15,7 @@
*/
/*
ONOS GUI -- Applications View -- CSS file
ONOS GUI -- Applications View (layout) -- CSS file
*/
#ov-app h2 {
......@@ -34,32 +34,10 @@
#app-dialog p {
font-size: 12pt;
}
.light #app-dialog p {
color: darkred;
}
.dark #app-dialog p {
color: #c55;
}
#app-dialog p.strong {
font-weight: bold;
}
.light #app-dialog p.strong {
color: red;
background-color: #ff0;
}
.dark #app-dialog p.strong {
color: #c55;
background-color: #dd4;
}
.light #app-dialog.floatpanel.dialog {
background-color: #fff;
}
.dark #app-dialog.floatpanel.dialog {
background-color: #444;
}
#application-details-panel.floatpanel {
-moz-border-radius: 0;
......@@ -67,12 +45,6 @@
z-index: 0;
}
.light #application-details-panel.floatpanel {
background-color: rgb(229, 234, 237);
}
.dark #application-details-panel.floatpanel {
background-color: #3A4042;
}
#application-details-panel .container {
padding: 0 10px;
......@@ -84,12 +56,6 @@
top: 0;
cursor: pointer;
}
.light .close-btn svg.embeddedIcon .icon.plus .glyph {
fill: #aaa;
}
.dark .close-btn svg.embeddedIcon .icon.plus .glyph {
fill: #ccc;
}
#application-details-panel .app-icon {
display: inline-block;
......@@ -127,8 +93,6 @@
#application-details-panel .app-url i {
font-style: italic;
padding-right: 12px;
/* works for both light and dark themes ... */
color: #777;
}
#application-details-panel td.value-bold {
......@@ -143,13 +107,6 @@
width: 95%;
margin: 10px auto;
}
.light #application-details-panel hr {
opacity: .5;
border-color: #FFF;
}
.dark #application-details-panel hr {
border-color: #666;
}
#application-details-panel .bottom table {
border-spacing: 0;
......@@ -161,27 +118,8 @@
text-align: left;
}
.light #application-details-panel .bottom tr:nth-child(odd) {
background-color: #f9f9f9;
}
.light #application-details-panel .bottom tr:nth-child(even) {
background-color: #EBEDF2;
}
.dark #application-details-panel .bottom tr:nth-child(odd) {
background-color: #333;
}
.dark #application-details-panel .bottom tr:nth-child(even) {
background-color: #555;
}
.dropping {
}
.light div.dropping {
border: solid 3px deepskyblue;
}
.dark div.dropping {
border: solid 3px deepskyblue;
}
......
/*
* 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 -- Device View (theme) -- CSS file
*/
.light #ov-device .current-view use {
fill: white;
}
.dark #ov-device .current-view use {
fill: #304860;
}
.light #ov-device .current-view rect {
fill: deepskyblue;
}
.dark #ov-device .current-view rect {
fill: #eee;
}
.light #device-details-panel.floatpanel {
background-color: rgb(229, 234, 237);
}
.dark #device-details-panel.floatpanel {
background-color: #3A4042;
}
.light .close-btn svg.embeddedIcon .icon.plus .glyph {
fill: #aaa;
}
.dark .close-btn svg.embeddedIcon .icon.plus .glyph {
fill: #ccc;
}
.light .dev-icon svg.embeddedIcon .glyph {
fill: rgb(0, 172, 229);
}
.dark .dev-icon svg.embeddedIcon .glyph {
fill: #486D91;
}
#device-details-panel .editable {
cursor: pointer;
border-bottom: 1px dashed darkgreen;
}
#device-details-panel td.label {
/* works for both light and dark themes ... */
color: #777;
}
.light #device-details-panel hr {
opacity: .5;
border-color: #FFF;
}
.dark #device-details-panel hr {
border-color: #666;
}
.light #device-details-panel .bottom th {
background-color: #CCC;
/* default text color */
}
.dark #device-details-panel .bottom th {
background-color: #131313;
color: #ccc;
}
.light #device-details-panel .bottom tr:nth-child(odd) {
background-color: #f9f9f9;
}
.light #device-details-panel .bottom tr:nth-child(even) {
background-color: #EBEDF2;
}
.dark #device-details-panel .bottom tr:nth-child(odd) {
background-color: #333;
}
.dark #device-details-panel .bottom tr:nth-child(even) {
background-color: #555;
}
......@@ -15,7 +15,7 @@
*/
/*
ONOS GUI -- Device View -- CSS file
ONOS GUI -- Device View (layout) -- CSS file
*/
#ov-device h2 {
......@@ -25,19 +25,6 @@
#ov-device div.ctrl-btns {
}
.light #ov-device .current-view use {
fill: white;
}
.dark #ov-device .current-view use {
fill: #304860;
}
.light #ov-device .current-view rect {
fill: deepskyblue;
}
.dark #ov-device .current-view rect {
fill: #eee;
}
/* More in generic panel.css */
......@@ -47,12 +34,6 @@
z-index: 0;
}
.light #device-details-panel.floatpanel {
background-color: rgb(229, 234, 237);
}
.dark #device-details-panel.floatpanel {
background-color: #3A4042;
}
#device-details-panel .container {
padding: 0 12px;
......@@ -64,34 +45,18 @@
top: 0;
cursor: pointer;
}
.light .close-btn svg.embeddedIcon .icon.plus .glyph {
fill: #aaa;
}
.dark .close-btn svg.embeddedIcon .icon.plus .glyph {
fill: #ccc;
}
#device-details-panel .dev-icon {
display: inline-block;
padding: 0 6px 0 0;
vertical-align: middle;
}
.light .dev-icon svg.embeddedIcon .glyph {
fill: rgb(0, 172, 229);
}
.dark .dev-icon svg.embeddedIcon .glyph {
fill: #486D91;
}
#device-details-panel h2 {
display: inline-block;
margin: 8px 0;
}
#device-details-panel .editable {
cursor: pointer;
border-bottom: 1px dashed darkgreen;
}
#device-details-panel h2 input {
font-size: 1.0em;
......@@ -108,8 +73,6 @@
#device-details-panel td.label {
font-style: italic;
padding-right: 12px;
/* works for both light and dark themes ... */
color: #777;
}
#device-details-panel .actionBtns div {
......@@ -121,13 +84,6 @@
margin: 0 auto;
}
.light #device-details-panel hr {
opacity: .5;
border-color: #FFF;
}
.dark #device-details-panel hr {
border-color: #666;
}
#device-details-panel .bottom table {
border-spacing: 0;
......@@ -137,14 +93,6 @@
letter-spacing: 0.02em;
}
.light #device-details-panel .bottom th {
background-color: #CCC;
/* default text color */
}
.dark #device-details-panel .bottom th {
background-color: #131313;
color: #ccc;
}
#device-details-panel .bottom th,
#device-details-panel .bottom td {
......@@ -152,15 +100,3 @@
text-align: center;
}
.light #device-details-panel .bottom tr:nth-child(odd) {
background-color: #f9f9f9;
}
.light #device-details-panel .bottom tr:nth-child(even) {
background-color: #EBEDF2;
}
.dark #device-details-panel .bottom tr:nth-child(odd) {
background-color: #333;
}
.dark #device-details-panel .bottom tr:nth-child(even) {
background-color: #555;
}
......
/*
* 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 -- Flow View (theme) -- CSS file
*/
.light #ov-flow .current-view use {
fill: white;
}
.dark #ov-flow .current-view use {
fill: #304860;
}
.light #ov-flow .current-view rect {
fill: deepskyblue;
}
.dark #ov-flow .current-view rect {
fill: #eee;
}
.light #ov-flow tr:nth-child(6n + 1),
.light #ov-flow tr:nth-child(6n + 2),
.light #ov-flow tr:nth-child(6n + 3) {
background-color: #eee;
}
.light #ov-flow tr:nth-child(6n + 4),
.light #ov-flow tr:nth-child(6n + 5),
.light #ov-flow tr:nth-child(6n) {
background-color: #ddd;
}
.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: #444;
}
.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: #333;
}
/* highlighted color */
.light #ov-flow tr:nth-child(6n + 1).data-change,
.light #ov-flow tr:nth-child(6n + 2).data-change,
.light #ov-flow tr:nth-child(6n + 3).data-change,
.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 {
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 {
background-color: #5A5600;
}
#ov-flow td.selector,
#ov-flow td.treatment {
opacity: 0.65;
}
......@@ -15,7 +15,7 @@
*/
/*
ONOS GUI -- Flow View -- CSS file
ONOS GUI -- Flow View (layout) -- CSS file
*/
#ov-flow h2 {
......@@ -25,59 +25,6 @@
#ov-flow div.ctrl-btns {
}
.light #ov-flow .current-view use {
fill: white;
}
.dark #ov-flow .current-view use {
fill: #304860;
}
.light #ov-flow .current-view rect {
fill: deepskyblue;
}
.dark #ov-flow .current-view rect {
fill: #eee;
}
.light #ov-flow tr:nth-child(6n + 1),
.light #ov-flow tr:nth-child(6n + 2),
.light #ov-flow tr:nth-child(6n + 3) {
background-color: #eee;
}
.light #ov-flow tr:nth-child(6n + 4),
.light #ov-flow tr:nth-child(6n + 5),
.light #ov-flow tr:nth-child(6n) {
background-color: #ddd;
}
.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: #444;
}
.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: #333;
}
/* highlighted color */
.light #ov-flow tr:nth-child(6n + 1).data-change,
.light #ov-flow tr:nth-child(6n + 2).data-change,
.light #ov-flow tr:nth-child(6n + 3).data-change,
.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 {
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 {
background-color: #5A5600;
}
#ov-flow td {
text-align: center;
}
......@@ -88,5 +35,4 @@
#ov-flow td.treatment {
text-align: left;
padding-left: 36px;
opacity: 0.65;
}
\ No newline at end of file
}
......
/*
* 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 -- Group View (theme) -- CSS file
*/
.light #ov-group .current-view use {
fill: white;
}
.dark #ov-group .current-view use {
fill: #304860;
}
.light #ov-group .current-view rect {
fill: deepskyblue;
}
.dark #ov-group .current-view rect {
fill: #eee;
}
.light #ov-group tr:nth-child(4n + 1),
.light #ov-group tr:nth-child(4n + 2) {
background-color: #eee;
}
.light #ov-group tr:nth-child(4n + 3),
.light #ov-group tr:nth-child(4n) {
background-color: #ddd;
}
.dark #ov-group tr:nth-child(4n + 1),
.dark #ov-group tr:nth-child(4n + 2) {
background-color: #444;
}
.dark #ov-group tr:nth-child(4n + 3),
.dark #ov-group tr:nth-child(4n) {
background-color: #333;
}
/* 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 {
background-color: #FDFFDC;
}
.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 {
background-color: #5A5600;
}
......@@ -15,7 +15,7 @@
*/
/*
ONOS GUI -- Group View -- CSS file
ONOS GUI -- Group View (layout) -- CSS file
*/
#ov-group h2 {
......@@ -25,50 +25,7 @@
#ov-group div.ctrl-btns {
}
.light #ov-group .current-view use {
fill: white;
}
.dark #ov-group .current-view use {
fill: #304860;
}
.light #ov-group .current-view rect {
fill: deepskyblue;
}
.dark #ov-group .current-view rect {
fill: #eee;
}
.light #ov-group tr:nth-child(4n + 1),
.light #ov-group tr:nth-child(4n + 2) {
background-color: #eee;
}
.light #ov-group tr:nth-child(4n + 3),
.light #ov-group tr:nth-child(4n) {
background-color: #ddd;
}
.dark #ov-group tr:nth-child(4n + 1),
.dark #ov-group tr:nth-child(4n + 2) {
background-color: #444;
}
.dark #ov-group tr:nth-child(4n + 3),
.dark #ov-group tr:nth-child(4n) {
background-color: #333;
}
/* 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 {
background-color: #FDFFDC;
}
.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 {
background-color: #5A5600;
}
#ov-group td {
text-align: center;
......
/*
* 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 -- Intent View (theme) -- CSS file
*/
.light #ov-intent tr:nth-child(6n + 1),
.light #ov-intent tr:nth-child(6n + 2),
.light #ov-intent tr:nth-child(6n + 3) {
background-color: #eee;
}
.light #ov-intent tr:nth-child(6n + 4),
.light #ov-intent tr:nth-child(6n + 5),
.light #ov-intent tr:nth-child(6n) {
background-color: #ddd;
}
.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: #444;
}
.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: #333;
}
.light #ov-intent tr:nth-child(6n + 1).data-change,
.light #ov-intent tr:nth-child(6n + 2).data-change,
.light #ov-intent tr:nth-child(6n + 3).data-change,
.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 {
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 {
background-color: #5A5600;
}
#ov-intent td.resources,
#ov-intent td.details {
opacity: 0.65;
}
......@@ -15,7 +15,7 @@
*/
/*
ONOS GUI -- Intent View -- CSS file
ONOS GUI -- Intent View (layout) -- CSS file
*/
#ov-intent h2 {
......@@ -25,46 +25,8 @@
#ov-intent div.ctrl-btns {
}
.light #ov-intent tr:nth-child(6n + 1),
.light #ov-intent tr:nth-child(6n + 2),
.light #ov-intent tr:nth-child(6n + 3) {
background-color: #eee;
}
.light #ov-intent tr:nth-child(6n + 4),
.light #ov-intent tr:nth-child(6n + 5),
.light #ov-intent tr:nth-child(6n) {
background-color: #ddd;
}
.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: #444;
}
.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: #333;
}
.light #ov-intent tr:nth-child(6n + 1).data-change,
.light #ov-intent tr:nth-child(6n + 2).data-change,
.light #ov-intent tr:nth-child(6n + 3).data-change,
.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 {
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 {
background-color: #5A5600;
}
#ov-intent td.resources,
#ov-intent td.details {
padding-left: 36px;
opacity: 0.65;
}
......
/*
* 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 -- Meter View (theme) -- CSS file
*/
.light #ov-meter .current-view use {
fill: white;
}
.dark #ov-meter .current-view use {
fill: #304860;
}
.light #ov-meter .current-view rect {
fill: deepskyblue;
}
.dark #ov-meter .current-view rect {
fill: #eee;
}
.light #ov-meter tr:nth-child(4n + 1),
.light #ov-meter tr:nth-child(4n + 2) {
background-color: #eee;
}
.light #ov-meter tr:nth-child(4n + 3),
.light #ov-meter tr:nth-child(4n) {
background-color: #ddd;
}
.dark #ov-meter tr:nth-child(4n + 1),
.dark #ov-meter tr:nth-child(4n + 2) {
background-color: #444;
}
.dark #ov-meter tr:nth-child(4n + 3),
.dark #ov-meter tr:nth-child(4n) {
background-color: #333;
}
/* 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 {
background-color: #FDFFDC;
}
.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 {
background-color: #5A5600;
}
......@@ -15,7 +15,7 @@
*/
/*
ONOS GUI -- Meter View -- CSS file
ONOS GUI -- Meter View (layout) -- CSS file
*/
#ov-meter h2 {
......@@ -25,51 +25,6 @@
#ov-meter div.ctrl-btns {
}
.light #ov-meter .current-view use {
fill: white;
}
.dark #ov-meter .current-view use {
fill: #304860;
}
.light #ov-meter .current-view rect {
fill: deepskyblue;
}
.dark #ov-meter .current-view rect {
fill: #eee;
}
.light #ov-meter tr:nth-child(4n + 1),
.light #ov-meter tr:nth-child(4n + 2) {
background-color: #eee;
}
.light #ov-meter tr:nth-child(4n + 3),
.light #ov-meter tr:nth-child(4n) {
background-color: #ddd;
}
.dark #ov-meter tr:nth-child(4n + 1),
.dark #ov-meter tr:nth-child(4n + 2) {
background-color: #444;
}
.dark #ov-meter tr:nth-child(4n + 3),
.dark #ov-meter tr:nth-child(4n) {
background-color: #333;
}
/* 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 {
background-color: #FDFFDC;
}
.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 {
background-color: #5A5600;
}
#ov-meter td {
text-align: center;
}
......@@ -80,4 +35,4 @@
text-align: left;
padding-left: 36px;
opacity: 0.65;
}
\ No newline at end of file
}
......
/*
* 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 -- Port View (theme) -- CSS file
*/
.light #ov-port .current-view use {
fill: white;
}
.dark #ov-port .current-view use {
fill: #304860;
}
.light #ov-port .current-view rect {
fill: deepskyblue;
}
.dark #ov-port .current-view rect {
fill: #eee;
}
......@@ -15,7 +15,7 @@
*/
/*
ONOS GUI -- Port View -- CSS file
ONOS GUI -- Port View (layout) -- CSS file
*/
#ov-port h2 {
......@@ -25,20 +25,6 @@
#ov-port div.ctrl-btns {
}
.light #ov-port .current-view use {
fill: white;
}
.dark #ov-port .current-view use {
fill: #304860;
}
.light #ov-port .current-view rect {
fill: deepskyblue;
}
.dark #ov-port .current-view rect {
fill: #eee;
}
#ov-port td {
text-align: center;
}
......
/*
* 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;
}
......@@ -15,7 +15,7 @@
*/
/*
ONOS GUI -- Processor View -- CSS file
ONOS GUI -- Processor View (layout) -- CSS file
*/
#ov-processor h2 {
......@@ -26,20 +26,6 @@
width: 40px;
}
.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;
}
#ov-processor td.number {
text-align: right;
}
......
/*
* 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 -- Topology View (theme) -- CSS file
*/
/* --- Base SVG Layer --- */
.light #ov-topo svg {
background-color: #fff;
}
.dark #ov-topo svg {
background-color: #2b2b2b;
}
/* --- "No Devices" Layer --- */
.light #ov-topo svg .noDevsBird {
fill: #ecd;
}
.dark #ov-topo svg .noDevsBird {
fill: #683434;
}
.light #ov-topo svg #topo-noDevsLayer text {
fill: #dde;
}
.dark #ov-topo svg #topo-noDevsLayer text {
fill: #3b3b4f;
}
/* --- Topo Map --- */
#ov-topo svg #topo-map {
stroke-width: 2px;
fill: transparent;
}
.light #ov-topo svg #topo-map {
stroke: #ddd;
}
.dark #ov-topo svg #topo-map {
stroke: #444;
}
/* --- general topo-panel styling --- */
.light .topo-p svg .glyph {
fill: #222;
}
.dark .topo-p svg .glyph {
fill: #ddd;
}
.light .topo-p svg .glyph.overlay {
fill: #fff;
}
.dark .topo-p svg .glyph.overlay {
fill: #222;
}
.light .topo-p h2 {
color: black;
}
.dark .topo-p h2 {
color: #ddd;
}
.light .topo-p h3 {
color: black;
}
.dark .topo-p h3 {
color: #ddd;
}
.topo-p td.label {
/* works for both light and dark themes ... */
color: #777;
}
.topo-p td.value {
}
.light .topo-p hr {
background-color: #ccc;
color: #ccc;
}
.dark .topo-p hr {
background-color: #888;
color: #888;
}
/* --- Topo Instance Panel --- */
#topo-p-instance svg rect {
stroke-width: 3.5;
}
#topo-p-instance .online svg rect {
opacity: 1;
}
.light #topo-p-instance svg rect {
fill: #ccc;
stroke: #aaa;
}
.light #topo-p-instance .online svg rect {
fill: #9cf;
stroke: #555;
}
.dark #topo-p-instance svg rect {
fill: #666;
stroke: #222;
}
.dark #topo-p-instance .online svg rect {
fill: #9cf;
stroke: #999;
}
#topo-p-instance svg .glyph {
fill: #888;
fill-rule: evenodd;
}
#topo-p-instance .online svg .glyph {
fill: #000;
}
#topo-p-instance svg .badgeIcon {
fill-rule: evenodd;
opacity: 0.4;
}
.light #topo-p-instance svg .badgeIcon {
fill: #777;
}
.dark #topo-p-instance svg .badgeIcon {
fill: #555;
}
#topo-p-instance .online svg .badgeIcon {
opacity: 1.0;
}
.light #topo-p-instance .online svg .badgeIcon {
fill: #fff;
}
.dark #topo-p-instance .online svg .badgeIcon {
fill: #fff;
}
#topo-p-instance svg text {
text-anchor: middle;
opacity: 0.3;
}
#topo-p-instance .online svg text {
opacity: 1.0;
}
.light #topo-p-instance svg text {
fill: #444;
}
.light #topo-p-instance .online svg text {
fill: #eee;
}
.dark #topo-p-instance svg text {
fill: #aaa;
}
.dark #topo-p-instance .online svg text {
fill: #ccc;
}
#topo-p-instance .onosInst.mastership {
opacity: 0.3;
}
#topo-p-instance .onosInst.mastership.affinity {
opacity: 1.0;
}
.light #topo-p-instance .onosInst.mastership.affinity svg rect {
filter: url(#blue-glow);
}
.dark #topo-p-instance .onosInst.mastership.affinity svg rect {
filter: url(#yellow-glow);
}
.light.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");
}
.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=\"yellow-glow\"><feColorMatrix type=\"matrix\" values=\"0 0 0 0 1.0 0 0 0 0 1.0 0 0 0 0 0.3 0 0 0 1 0 \"></feColorMatrix><feGaussianBlur stdDeviation=\"3\" result=\"coloredBlur\"></feGaussianBlur><feMerge><feMergeNode in=\"coloredBlur\"></feMergeNode><feMergeNode in=\"SourceGraphic\"></feMergeNode></feMerge></filter></svg>#yellow-glow");
}
/* --- Topo Nodes --- */
#ov-topo svg .suppressed {
opacity: 0.5 !important;
}
#ov-topo svg .suppressedmax {
opacity: 0.2 !important;
}
.light #ov-topo svg .node.selected rect,
.light #ov-topo svg .node.selected circle {
fill: #f90;
filter: url(#blue-glow);
}
.dark #ov-topo svg .node.selected rect,
.dark #ov-topo svg .node.selected circle {
fill: #f90;
filter: url(#yellow-glow);
}
.light.firefox #ov-topo svg .node.selected rect,
.light.firefox #ov-topo svg .node.selected circle {
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");
}
.dark.firefox #ov-topo svg .node.selected rect,
.dark.firefox #ov-topo svg .node.selected circle {
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=\"yellow-glow\"><feColorMatrix type=\"matrix\" values=\"0 0 0 0 1.0 0 0 0 0 1.0 0 0 0 0 0.3 0 0 0 1 0 \"></feColorMatrix><feGaussianBlur stdDeviation=\"3\" result=\"coloredBlur\"></feGaussianBlur><feMerge><feMergeNode in=\"coloredBlur\"></feMergeNode><feMergeNode in=\"SourceGraphic\"></feMergeNode></feMerge></filter></svg>#yellow-glow");
}
/* Device Nodes */
#ov-topo svg .node.device rect {
stroke-width: 1.5;
}
#ov-topo svg .node.device.fixed rect {
stroke-width: 1.5;
}
.light #ov-topo svg .node.device.fixed rect {
stroke: #aaa;
}
.dark #ov-topo svg .node.device.fixed rect {
stroke: #999;
}
/* note: device is offline without the 'online' class */
.light #ov-topo svg .node.device {
fill: #777;
}
.dark #ov-topo svg .node.device {
fill: #555;
}
.light #ov-topo svg .node.device rect {
stroke: #666;
}
.light #ov-topo svg .node.device rect {
stroke: #999;
}
.light #ov-topo svg .node.device.online {
fill: #6e7fa3;
}
.dark #ov-topo svg .node.device.online {
fill: #4E5C7F;
}
/* note: device is offline without the 'online' class */
#ov-topo svg .node.device text {
fill: #bbb;
font: 10pt sans-serif;
}
#ov-topo svg .node.device.online text {
fill: white;
}
#ov-topo svg .node.device .svgIcon rect {
fill: #aaa;
}
#ov-topo svg .node.device .svgIcon use {
fill: #777;
}
#ov-topo svg .node.device.selected .svgIcon rect {
fill: #f90;
}
#ov-topo svg .node.device.online .svgIcon rect {
fill: #ccc;
}
#ov-topo svg .node.device.online .svgIcon use {
fill: #000;
}
#ov-topo svg .node.device.online.selected .svgIcon rect {
fill: #f90;
}
/* Badges */
/* (... works for both light and dark themes...) */
#ov-topo svg .node .badge circle {
stroke: #aaa;
}
#ov-topo svg .node .badge.badgeInfo circle {
fill: #99d;
}
#ov-topo svg .node .badge.badgeWarn circle {
fill: #da2;
}
#ov-topo svg .node .badge.badgeError circle {
fill: #e44;
}
#ov-topo svg .node .badge use {
fill: white !important;
}
#ov-topo svg .node .badge.badgeInfo use {
fill: #448;
}
#ov-topo svg .node .badge text {
fill: white !important;
}
#ov-topo svg .node .badge.badgeInfo text {
fill: #448;
}
/* Host Nodes */
#ov-topo svg .node.host {
}
#ov-topo svg .node.host text {
stroke: none;
font: 9pt sans-serif;
}
.light #ov-topo svg .node.host text {
fill: #846;
}
.dark #ov-topo svg .node.host text {
fill: #BB809D;
}
.light svg .node.host circle {
stroke: #000;
fill: #edb;
}
.dark svg .node.host circle {
stroke: #eee;
fill: #B2A180;
}
.light svg .node.host .svgIcon {
fill: #444;
}
.dark svg .node.host .svgIcon {
fill: #222;
}
/* --- Topo Links --- */
#ov-topo svg .link {
opacity: .9;
}
#ov-topo svg .link.selected,
#ov-topo svg .link.enhanced {
stroke-width: 4.5px;
}
.light #ov-topo svg .link.selected,
.light #ov-topo svg .link.enhanced {
filter: url(#blue-glow);
}
.dark #ov-topo svg .link.selected,
.dark #ov-topo svg .link.enhanced {
filter: url(#yellow-glow);
}
.light.firefox #ov-topo svg .link.selected,
.light.firefox #ov-topo svg .link.enhanced {
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");
}
.dark.firefox #ov-topo svg .link.selected,
.dark.firefox #ov-topo svg .link.enhanced {
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=\"yellow-glow\"><feColorMatrix type=\"matrix\" values=\"0 0 0 0 1.0 0 0 0 0 1.0 0 0 0 0 0.3 0 0 0 1 0 \"></feColorMatrix><feGaussianBlur stdDeviation=\"3\" result=\"coloredBlur\"></feGaussianBlur><feMerge><feMergeNode in=\"coloredBlur\"></feMergeNode><feMergeNode in=\"SourceGraphic\"></feMergeNode></feMerge></filter></svg>#yellow-glow");
}
#ov-topo svg .link.inactive {
opacity: .5;
stroke-dasharray: 8 4;
}
/* FIXME: Review for not-permitted links */
#ov-topo svg .link.not-permitted {
stroke: rgb(255,0,0);
stroke-width: 5.0;
stroke-dasharray: 8 4;
}
#ov-topo svg .link.secondary {
stroke-width: 3px;
}
.light #ov-topo svg .link.secondary {
stroke: rgba(0,153,51,0.5);
}
.dark #ov-topo svg .link.secondary {
stroke: rgba(121,231,158,0.5);
}
/* Port traffic color visualization for Kbps, Mbps, and Gbps */
.light #ov-topo svg .link.secondary.port-traffic-Kbps {
stroke: rgb(0,153,51);
stroke-width: 5.0;
}
.dark #ov-topo svg .link.secondary.port-traffic-Kbps {
stroke: rgb(98, 153, 118);
stroke-width: 5.0;
}
.light #ov-topo svg .link.secondary.port-traffic-Mbps {
stroke: rgb(128,145,27);
stroke-width: 6.5;
}
.dark #ov-topo svg .link.secondary.port-traffic-Mbps {
stroke: rgb(91, 109, 54);
stroke-width: 6.5;
}
.light #ov-topo svg .link.secondary.port-traffic-Gbps {
stroke: rgb(255, 137, 3);
stroke-width: 8.0;
}
.dark #ov-topo svg .link.secondary.port-traffic-Gbps {
stroke: rgb(174, 119, 55);
stroke-width: 8.0;
}
.light #ov-topo svg .link.secondary.port-traffic-Gbps-choked {
stroke: rgb(183, 30, 21);
stroke-width: 8.0;
}
.dark #ov-topo svg .link.secondary.port-traffic-Gbps-choked {
stroke: rgb(127, 40, 39);
stroke-width: 8.0;
}
#ov-topo svg .link.animated {
stroke-dasharray: 8 5;
animation: ants 5s infinite linear;
/* below line will be added via Javascript based on path */
/*animation-direction: reverse;*/
}
@keyframes ants {
from {
stroke-dashoffset: 0;
}
to {
stroke-dashoffset: 400;
}
}
#ov-topo svg .link.primary {
stroke-width: 4px;
}
.light #ov-topo svg .link.primary {
stroke: #ffA300;
}
.dark #ov-topo svg .link.primary {
stroke: #D58E0F;
}
#ov-topo svg .link.secondary.optical {
stroke-width: 4px;
}
.light #ov-topo svg .link.secondary.optical {
stroke: rgba(128,64,255,0.5);
}
.dark #ov-topo svg .link.secondary.optical {
stroke: rgba(164,139,215,0.5);
}
#ov-topo svg .link.primary.optical {
stroke-width: 6px;
}
.light #ov-topo svg .link.primary.optical {
stroke: #74f;
}
.dark #ov-topo svg .link.primary.optical {
stroke: #7352CD;
}
/* Link Labels */
#ov-topo svg .linkLabel rect {
stroke: none;
}
.light #ov-topo svg .linkLabel rect {
fill: #eee;
}
.dark #ov-topo svg .linkLabel rect {
fill: #555;
}
.light #ov-topo svg .linkLabel text {
fill: #444;
}
.dark #ov-topo svg .linkLabel text {
fill: #eee;
}
/* Port Labels */
#ov-topo svg .portLabel rect {
stroke: none;
}
.light #ov-topo svg .portLabel rect {
fill: #eee;
}
.dark #ov-topo svg .portLabel rect {
fill: #222;
}
.light #ov-topo svg .portLabel text {
fill: #444;
}
.dark #ov-topo svg .portLabel text {
fill: #eee;
}
/* Number of Links Labels */
.light #ov-topo text.numLinkText {
fill: #444;
}
.dark #ov-topo text.numLinkText {
fill: #eee;
}
/* ------------------------------------------------- */
/* Sprite Layer */
.light #ov-topo svg #topo-sprites .gold1 use {
stroke: #fda;
fill: none;
}
.dark #ov-topo svg #topo-sprites .gold1 use {
stroke: #541;
fill: none;
}
.light #ov-topo svg #topo-sprites .gold1 text {
fill: #eda;
}
.dark #ov-topo svg #topo-sprites .gold1 text {
fill: #543;
}
.light #ov-topo svg #topo-sprites .blue1 use {
stroke: #bbd;
fill: none;
}
.dark #ov-topo svg #topo-sprites .blue1 use {
stroke: #445;
fill: none;
}
.light #ov-topo svg #topo-sprites .blue1 text {
fill: #cce;
}
.dark #ov-topo svg #topo-sprites .blue1 text {
fill: #446;
}
.light #ov-topo svg #topo-sprites .gray1 use {
stroke: #ccc;
fill: none;
}
.dark #ov-topo svg #topo-sprites .gray1 use {
stroke: #333;
fill: none;
}
.light #ov-topo svg #topo-sprites .gray1 text {
fill: #ddd;
}
.dark #ov-topo svg #topo-sprites .gray1 text {
fill: #444;
}
/* fills */
.light #ov-topo svg #topo-sprites use.fill-gray2 {
fill: #eee;
}
.dark #ov-topo svg #topo-sprites use.fill-gray2 {
fill: #444;
}
.light #ov-topo svg #topo-sprites use.fill-blue2 {
fill: #bce;
}
.dark #ov-topo svg #topo-sprites use.fill-blue2 {
fill: #447;
}
/* -- MISC -- */
......@@ -15,7 +15,7 @@
*/
/*
ONOS GUI -- Topology View -- CSS file
ONOS GUI -- Topology View (layout) -- CSS file
*/
/* --- Base SVG Layer --- */
......@@ -24,12 +24,6 @@
/* prevents the little cut/copy/paste square that would appear on iPad */
-webkit-user-select: none;
}
.light #ov-topo svg {
background-color: #fff;
}
.dark #ov-topo svg {
background-color: #2b2b2b;
}
/* --- "No Devices" Layer --- */
......@@ -38,38 +32,10 @@
visibility: hidden;
}
.light #ov-topo svg .noDevsBird {
fill: #ecd;
}
.dark #ov-topo svg .noDevsBird {
fill: #683434;
}
#ov-topo svg #topo-noDevsLayer text {
font-size: 60pt;
font-style: italic;
}
.light #ov-topo svg #topo-noDevsLayer text {
fill: #dde;
}
.dark #ov-topo svg #topo-noDevsLayer text {
fill: #3b3b4f;
}
/* --- Topo Map --- */
#ov-topo svg #topo-map {
stroke-width: 2px;
fill: transparent;
}
.light #ov-topo svg #topo-map {
stroke: #ddd;
}
.dark #ov-topo svg #topo-map {
stroke: #444;
}
/* --- Topo Summary Panel --- */
......@@ -78,6 +44,7 @@
/* Base css from panel.css */
}
/* --- Topo Detail Panel --- */
#topo-p-detail {
......@@ -117,21 +84,6 @@ html[data-platform='iPad'] #topo-p-detail {
height: 42px;
}
.light .topo-p svg .glyph {
fill: #222;
}
.dark .topo-p svg .glyph.overlay {
fill: #222;
}
.dark .topo-p svg .glyph {
fill: #ddd;
}
.light .topo-p svg .glyph.overlay {
fill: #fff;
}
.topo-p h2 {
padding: 0 4px;
......@@ -141,12 +93,6 @@ html[data-platform='iPad'] #topo-p-detail {
width: 210px;
vertical-align: middle;
}
.light .topo-p h2 {
color: black;
}
.dark .topo-p h2 {
color: #ddd;
}
.topo-p h3 {
padding: 0 4px;
......@@ -155,12 +101,6 @@ html[data-platform='iPad'] #topo-p-detail {
top: 20px;
left: 50px;
}
.light .topo-p h3 {
color: black;
}
.dark .topo-p h3 {
color: #ddd;
}
.topo-p p, table {
padding: 4px;
......@@ -173,8 +113,6 @@ html[data-platform='iPad'] #topo-p-detail {
.topo-p td.label {
font-style: italic;
padding-right: 12px;
/* works for both light and dark themes ... */
color: #777;
}
.topo-p td.value {
}
......@@ -183,14 +121,7 @@ html[data-platform='iPad'] #topo-p-detail {
height: 1px;
border: 0;
}
.light .topo-p hr {
background-color: #ccc;
color: #ccc;
}
.dark .topo-p hr {
background-color: #888;
color: #888;
}
/* --- Topo Instance Panel --- */
......@@ -205,79 +136,6 @@ html[data-platform='iPad'] #topo-p-detail {
cursor: pointer;
}
#topo-p-instance svg rect {
stroke-width: 3.5;
}
#topo-p-instance .online svg rect {
opacity: 1;
}
.light #topo-p-instance svg rect {
fill: #ccc;
stroke: #aaa;
}
.light #topo-p-instance .online svg rect {
fill: #9cf;
stroke: #555;
}
.dark #topo-p-instance svg rect {
fill: #666;
stroke: #222;
}
.dark #topo-p-instance .online svg rect {
fill: #9cf;
stroke: #999;
}
#topo-p-instance svg .glyph {
fill: #888;
fill-rule: evenodd;
}
#topo-p-instance .online svg .glyph {
fill: #000;
}
#topo-p-instance svg .badgeIcon {
fill-rule: evenodd;
opacity: 0.4;
}
.light #topo-p-instance svg .badgeIcon {
fill: #777;
}
.dark #topo-p-instance svg .badgeIcon {
fill: #555;
}
#topo-p-instance .online svg .badgeIcon {
opacity: 1.0;
}
.light #topo-p-instance .online svg .badgeIcon {
fill: #fff;
}
.dark #topo-p-instance .online svg .badgeIcon {
fill: #fff;
}
#topo-p-instance svg text {
text-anchor: middle;
opacity: 0.3;
}
#topo-p-instance .online svg text {
opacity: 1.0;
}
.light #topo-p-instance svg text {
fill: #444;
}
.light #topo-p-instance .online svg text {
fill: #eee;
}
.dark #topo-p-instance svg text {
fill: #aaa;
}
.dark #topo-p-instance .online svg text {
fill: #ccc;
}
#topo-p-instance svg text.instTitle {
font-size: 11pt;
font-weight: bold;
......@@ -287,25 +145,6 @@ html[data-platform='iPad'] #topo-p-detail {
font-style: italic;
}
#topo-p-instance .onosInst.mastership {
opacity: 0.3;
}
#topo-p-instance .onosInst.mastership.affinity {
opacity: 1.0;
}
.light #topo-p-instance .onosInst.mastership.affinity svg rect {
filter: url(#blue-glow);
}
.dark #topo-p-instance .onosInst.mastership.affinity svg rect {
filter: url(#yellow-glow);
}
.light.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");
}
.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=\"yellow-glow\"><feColorMatrix type=\"matrix\" values=\"0 0 0 0 1.0 0 0 0 0 1.0 0 0 0 0 0.3 0 0 0 1 0 \"></feColorMatrix><feGaussianBlur stdDeviation=\"3\" result=\"coloredBlur\"></feGaussianBlur><feMerge><feMergeNode in=\"coloredBlur\"></feMergeNode><feMergeNode in=\"SourceGraphic\"></feMergeNode></feMerge></filter></svg>#yellow-glow");
}
/* --- Toolbar --- */
......@@ -335,345 +174,33 @@ html[data-platform='iPad'] #topo-p-detail {
cursor: pointer;
}
.light #ov-topo svg .node.selected rect,
.light #ov-topo svg .node.selected circle {
fill: #f90;
filter: url(#blue-glow);
}
.dark #ov-topo svg .node.selected rect,
.dark #ov-topo svg .node.selected circle {
fill: #f90;
filter: url(#yellow-glow);
}
.light.firefox #ov-topo svg .node.selected rect,
.light.firefox #ov-topo svg .node.selected circle {
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");
}
.dark.firefox #ov-topo svg .node.selected rect,
.dark.firefox #ov-topo svg .node.selected circle {
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=\"yellow-glow\"><feColorMatrix type=\"matrix\" values=\"0 0 0 0 1.0 0 0 0 0 1.0 0 0 0 0 0.3 0 0 0 1 0 \"></feColorMatrix><feGaussianBlur stdDeviation=\"3\" result=\"coloredBlur\"></feGaussianBlur><feMerge><feMergeNode in=\"coloredBlur\"></feMergeNode><feMergeNode in=\"SourceGraphic\"></feMergeNode></feMerge></filter></svg>#yellow-glow");
}
#ov-topo svg .node text {
pointer-events: none;
}
/* Device Nodes */
#ov-topo svg .node.device {
}
#ov-topo svg .node.device rect {
stroke-width: 1.5;
}
#ov-topo svg .node.device.fixed rect {
stroke-width: 1.5;
}
.light #ov-topo svg .node.device.fixed rect {
stroke: #aaa;
}
.dark #ov-topo svg .node.device.fixed rect {
stroke: #999;
}
/* note: device is offline without the 'online' class */
.light #ov-topo svg .node.device {
fill: #777;
}
.dark #ov-topo svg .node.device {
fill: #555;
}
.light #ov-topo svg .node.device rect {
stroke: #666;
}
.light #ov-topo svg .node.device rect {
stroke: #999;
}
.light #ov-topo svg .node.device.online {
fill: #6e7fa3;
}
.dark #ov-topo svg .node.device.online {
fill: #4E5C7F;
}
/* note: device is offline without the 'online' class */
#ov-topo svg .node.device text {
fill: #bbb;
font: 10pt sans-serif;
}
#ov-topo svg .node.device.online text {
fill: white;
}
#ov-topo svg .node.device .svgIcon rect {
fill: #aaa;
}
#ov-topo svg .node.device .svgIcon use {
fill: #777;
}
#ov-topo svg .node.device.selected .svgIcon rect {
fill: #f90;
}
#ov-topo svg .node.device.online .svgIcon rect {
fill: #ccc;
}
#ov-topo svg .node.device.online .svgIcon use {
fill: #000;
}
#ov-topo svg .node.device.online.selected .svgIcon rect {
fill: #f90;
}
/* Badges */
/* (... works for both light and dark themes...) */
#ov-topo svg .node .badge circle {
stroke: #aaa;
}
#ov-topo svg .node .badge.badgeInfo circle {
fill: #99d;
}
#ov-topo svg .node .badge.badgeWarn circle {
fill: #da2;
}
#ov-topo svg .node .badge.badgeError circle {
fill: #e44;
}
#ov-topo svg .node .badge use {
fill: white !important;
}
#ov-topo svg .node .badge.badgeInfo use {
fill: #448;
}
#ov-topo svg .node .badge text {
fill: white !important;
}
#ov-topo svg .node .badge.badgeInfo text {
fill: #448;
}
/* Host Nodes */
#ov-topo svg .node.host {
}
#ov-topo svg .node.host text {
stroke: none;
font: 9pt sans-serif;
}
.light #ov-topo svg .node.host text {
fill: #846;
}
.dark #ov-topo svg .node.host text {
fill: #BB809D;
}
.light svg .node.host circle {
stroke: #000;
fill: #edb;
}
.dark svg .node.host circle {
stroke: #eee;
fill: #B2A180;
}
.light svg .node.host .svgIcon {
fill: #444;
}
.dark svg .node.host .svgIcon {
fill: #222;
}
/* --- Topo Links --- */
#ov-topo svg .link {
opacity: .9;
}
#ov-topo svg .link.selected,
#ov-topo svg .link.enhanced {
stroke-width: 4.5px;
}
.light #ov-topo svg .link.selected,
.light #ov-topo svg .link.enhanced {
filter: url(#blue-glow);
}
.dark #ov-topo svg .link.selected,
.dark #ov-topo svg .link.enhanced {
filter: url(#yellow-glow);
}
.light.firefox #ov-topo svg .link.selected,
.light.firefox #ov-topo svg .link.enhanced {
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");
}
.dark.firefox #ov-topo svg .link.selected,
.dark.firefox #ov-topo svg .link.enhanced {
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=\"yellow-glow\"><feColorMatrix type=\"matrix\" values=\"0 0 0 0 1.0 0 0 0 0 1.0 0 0 0 0 0.3 0 0 0 1 0 \"></feColorMatrix><feGaussianBlur stdDeviation=\"3\" result=\"coloredBlur\"></feGaussianBlur><feMerge><feMergeNode in=\"coloredBlur\"></feMergeNode><feMergeNode in=\"SourceGraphic\"></feMergeNode></feMerge></filter></svg>#yellow-glow");
}
#ov-topo svg .link.inactive {
opacity: .5;
stroke-dasharray: 8 4;
}
/* FIXME: Review for not-permitted links */
#ov-topo svg .link.not-permitted {
stroke: rgb(255,0,0);
stroke-width: 5.0;
stroke-dasharray: 8 4;
}
#ov-topo svg .link.secondary {
stroke-width: 3px;
}
.light #ov-topo svg .link.secondary {
stroke: rgba(0,153,51,0.5);
}
.dark #ov-topo svg .link.secondary {
stroke: rgba(121,231,158,0.5);
}
/* Port traffic color visualization for Kbps, Mbps, and Gbps */
.light #ov-topo svg .link.secondary.port-traffic-Kbps {
stroke: rgb(0,153,51);
stroke-width: 5.0;
}
.dark #ov-topo svg .link.secondary.port-traffic-Kbps {
stroke: rgb(98, 153, 118);
stroke-width: 5.0;
}
.light #ov-topo svg .link.secondary.port-traffic-Mbps {
stroke: rgb(128,145,27);
stroke-width: 6.5;
}
.dark #ov-topo svg .link.secondary.port-traffic-Mbps {
stroke: rgb(91, 109, 54);
stroke-width: 6.5;
}
.light #ov-topo svg .link.secondary.port-traffic-Gbps {
stroke: rgb(255, 137, 3);
stroke-width: 8.0;
}
.dark #ov-topo svg .link.secondary.port-traffic-Gbps {
stroke: rgb(174, 119, 55);
stroke-width: 8.0;
}
.light #ov-topo svg .link.secondary.port-traffic-Gbps-choked {
stroke: rgb(183, 30, 21);
stroke-width: 8.0;
}
.dark #ov-topo svg .link.secondary.port-traffic-Gbps-choked {
stroke: rgb(127, 40, 39);
stroke-width: 8.0;
}
#ov-topo svg .link.animated {
stroke-dasharray: 8 5;
animation: ants 5s infinite linear;
/* below line will be added via Javascript based on path */
/*animation-direction: reverse;*/
}
@keyframes ants {
from {
stroke-dashoffset: 0;
}
to {
stroke-dashoffset: 400;
}
}
#ov-topo svg .link.primary {
stroke-width: 4px;
}
.light #ov-topo svg .link.primary {
stroke: #ffA300;
}
.dark #ov-topo svg .link.primary {
stroke: #D58E0F;
}
#ov-topo svg .link.secondary.optical {
stroke-width: 4px;
}
.light #ov-topo svg .link.secondary.optical {
stroke: rgba(128,64,255,0.5);
}
.dark #ov-topo svg .link.secondary.optical {
stroke: rgba(164,139,215,0.5);
}
#ov-topo svg .link.primary.optical {
stroke-width: 6px;
}
.light #ov-topo svg .link.primary.optical {
stroke: #74f;
}
.dark #ov-topo svg .link.primary.optical {
stroke: #7352CD;
}
/* Link Labels */
#ov-topo svg .linkLabel rect {
stroke: none;
}
.light #ov-topo svg .linkLabel rect {
fill: #eee;
}
.dark #ov-topo svg .linkLabel rect {
fill: #555;
}
#ov-topo svg .linkLabel text {
text-anchor: middle;
stroke-width: 0.1;
font-size: 9pt;
}
.light #ov-topo svg .linkLabel text {
fill: #444;
}
.dark #ov-topo svg .linkLabel text {
fill: #eee;
}
/* Port Labels */
#ov-topo svg .portLabel rect {
stroke: none;
}
.light #ov-topo svg .portLabel rect {
fill: #eee;
}
.dark #ov-topo svg .portLabel rect {
fill: #222;
}
/* Port Labels */
#ov-topo svg .portLabel text {
text-anchor: middle;
stroke-width: 0.1;
font-size: 11pt;
}
.light #ov-topo svg .portLabel text {
fill: #444;
}
.dark #ov-topo svg .portLabel text {
fill: #eee;
}
/* Number of Links Labels */
#ov-topo line.numLinkHash {
......@@ -682,20 +209,10 @@ html[data-platform='iPad'] #topo-p-detail {
#ov-topo text.numLinkText {
font-size: 15pt;
}
#ov-topo text.numLinkText {
text-anchor: middle;
}
.light #ov-topo text.numLinkText {
fill: #444;
}
.dark #ov-topo text.numLinkText {
fill: #eee;
}
/* ------------------------------------------------- */
/* Sprite Layer */
#ov-topo svg #topo-sprites use {
......@@ -707,65 +224,8 @@ html[data-platform='iPad'] #topo-p-detail {
font-style: italic;
}
.light #ov-topo svg #topo-sprites .gold1 use {
stroke: #fda;
fill: none;
}
.dark #ov-topo svg #topo-sprites .gold1 use {
stroke: #541;
fill: none;
}
.light #ov-topo svg #topo-sprites .gold1 text {
fill: #eda;
}
.dark #ov-topo svg #topo-sprites .gold1 text {
fill: #543;
}
.light #ov-topo svg #topo-sprites .blue1 use {
stroke: #bbd;
fill: none;
}
.dark #ov-topo svg #topo-sprites .blue1 use {
stroke: #445;
fill: none;
}
.light #ov-topo svg #topo-sprites .blue1 text {
fill: #cce;
}
.dark #ov-topo svg #topo-sprites .blue1 text {
fill: #446;
}
.light #ov-topo svg #topo-sprites .gray1 use {
stroke: #ccc;
fill: none;
}
.dark #ov-topo svg #topo-sprites .gray1 use {
stroke: #333;
fill: none;
}
.light #ov-topo svg #topo-sprites .gray1 text {
fill: #ddd;
}
.dark #ov-topo svg #topo-sprites .gray1 text {
fill: #444;
}
/* fills */
.light #ov-topo svg #topo-sprites use.fill-gray2 {
fill: #eee;
}
.dark #ov-topo svg #topo-sprites use.fill-gray2 {
fill: #444;
}
.light #ov-topo svg #topo-sprites use.fill-blue2 {
fill: #bce;
}
.dark #ov-topo svg #topo-sprites use.fill-blue2 {
fill: #447;
}
/* -- MISC -- */
.notReady .readyBadge {
visibility: hidden;
......@@ -778,4 +238,3 @@ html[data-platform='iPad'] #topo-p-detail {
.map-list select {
font-size: 20px;
}
......
......@@ -93,21 +93,35 @@
<!-- TODO: use a single catenated-minified file here -->
<link rel="stylesheet" href="app/onos.css">
<link rel="stylesheet" href="app/onos-theme.css">
<link rel="stylesheet" href="app/common.css">
<link rel="stylesheet" href="app/fw/mast/mast.css">
<link rel="stylesheet" href="app/fw/mast/mast-theme.css">
<link rel="stylesheet" href="app/fw/svg/glyph.css">
<link rel="stylesheet" href="app/fw/svg/glyph-theme.css">
<link rel="stylesheet" href="app/fw/svg/icon.css">
<link rel="stylesheet" href="app/fw/svg/icon-theme.css">
<link rel="stylesheet" href="app/fw/layer/panel.css">
<link rel="stylesheet" href="app/fw/layer/panel-theme.css">
<link rel="stylesheet" href="app/fw/layer/dialog.css">
<link rel="stylesheet" href="app/fw/layer/dialog-theme.css">
<link rel="stylesheet" href="app/fw/layer/flash.css">
<link rel="stylesheet" href="app/fw/layer/flash-theme.css">
<link rel="stylesheet" href="app/fw/layer/quickhelp.css">
<link rel="stylesheet" href="app/fw/layer/quickhelp-theme.css">
<link rel="stylesheet" href="app/fw/layer/veil.css">
<link rel="stylesheet" href="app/fw/layer/veil-theme.css">
<link rel="stylesheet" href="app/fw/layer/loading.css">
<link rel="stylesheet" href="app/fw/nav/nav.css">
<link rel="stylesheet" href="app/fw/nav/nav-theme.css">
<link rel="stylesheet" href="app/fw/widget/button.css">
<link rel="stylesheet" href="app/fw/widget/button-theme.css">
<link rel="stylesheet" href="app/fw/widget/toolbar.css">
<link rel="stylesheet" href="app/fw/widget/toolbar-theme.css">
<link rel="stylesheet" href="app/fw/widget/tooltip.css">
<link rel="stylesheet" href="app/fw/widget/tooltip-theme.css">
<link rel="stylesheet" href="app/fw/widget/table.css">
<link rel="stylesheet" href="app/fw/widget/table-theme.css">
<!-- Builtin views javascript. -->
<script src="app/view/topo/topo.js"></script>
......@@ -148,18 +162,27 @@
<!-- Builtin views stylesheets. -->
<link rel="stylesheet" href="app/view/topo/topo.css">
<link rel="stylesheet" href="app/view/topo/topo-theme.css">
<link rel="stylesheet" href="app/view/device/device.css">
<link rel="stylesheet" href="app/view/device/device-theme.css">
<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">
<link rel="stylesheet" href="app/view/meter/meter-theme.css">
<link rel="stylesheet" href="app/view/link/link.css">
<link rel="stylesheet" href="app/view/host/host.css">
<link rel="stylesheet" href="app/view/intent/intent.css">
<link rel="stylesheet" href="app/view/intent/intent-theme.css">
<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/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 -->
......