홍길동 / onos

Go to a project
Toggle navigation Toggle navigation pinning
Simon Hunt
58894c87 1 parent fa4bb3b3

Separating theme from layout for CSS files. 

Change-Id: I4c3cec28b30de8026df4298f65ebf6ad92faf68f
(cherry picked from commit 11f662f6)
Expand all
Inline Side-by-side
Showing 47 changed files with 1337 additions and 836 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;
}
......
This diff is collapsed. Click to expand it.
......@@ -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 -->
......