홍길동 / onos

Go to a project
Toggle navigation Toggle navigation pinning
Simon Hunt
7be1be4d 1 parent a89f0f9e

GUI -- Reworked Toolbar and button CSS styles for light and dark themes. 

Change-Id: Id882d7a22aa89dbc9ac1e82e91bf82da89bdecf1
Inline Side-by-side
Showing 2 changed files with 71 additions and 12 deletions
...@@ -41,21 +41,38 @@ ...@@ -41,21 +41,38 @@
41 } 41 }
42 42
43 /* Selected button color */ 43 /* Selected button color */
44 -.light .button svg.embeddedIcon, 44 +.light .button svg.embeddedIcon .icon rect,
45 -.light .toggleButton.selected svg.embeddedIcon, 45 +.light .toggleButton.selected svg.embeddedIcon .icon rect,
46 -.light .radioButton.selected svg.embeddedIcon { 46 +.light .radioButton.selected svg.embeddedIcon .icon rect {
47 fill: #838383; 47 fill: #838383;
48 } 48 }
49 +
50 +.light .button:hover svg.embeddedIcon .icon rect,
51 +.light .toggleButton.selected:hover svg.embeddedIcon .icon rect
52 +/* NOTE: selected radio button should NOT have hover highlight */
53 +{
54 + fill: #444444;
55 +}
56 +
49 .light .button svg.embeddedIcon .glyph, 57 .light .button svg.embeddedIcon .glyph,
50 .light .toggleButton.selected svg.embeddedIcon .glyph, 58 .light .toggleButton.selected svg.embeddedIcon .glyph,
51 .light .radioButton.selected svg.embeddedIcon .glyph { 59 .light .radioButton.selected svg.embeddedIcon .glyph {
52 fill: white; 60 fill: white;
53 } 61 }
54 -.dark .button svg.embeddedIcon, 62 +
55 -.dark .toggleButton.selected svg.embeddedIcon, 63 +.dark .button svg.embeddedIcon .icon rect,
56 -.dark .radioButton.selected svg.embeddedIcon{ 64 +.dark .toggleButton.selected svg.embeddedIcon .icon rect,
65 +.dark .radioButton.selected svg.embeddedIcon .icon rect {
57 fill: #151515; 66 fill: #151515;
58 } 67 }
68 +
69 +.dark .button:hover svg.embeddedIcon .icon rect,
70 +.dark .toggleButton.selected:hover svg.embeddedIcon .icon rect
71 +/* NOTE: selected radio button should NOT have hover highlight */
72 +{
73 + fill: #444;
74 +}
75 +
59 .dark .button svg.embeddedIcon .glyph, 76 .dark .button svg.embeddedIcon .glyph,
60 .dark .toggleButton.selected svg.embeddedIcon .glyph, 77 .dark .toggleButton.selected svg.embeddedIcon .glyph,
61 .dark .radioButton.selected svg.embeddedIcon .glyph { 78 .dark .radioButton.selected svg.embeddedIcon .glyph {
...@@ -63,19 +80,41 @@ ...@@ -63,19 +80,41 @@
63 } 80 }
64 81
65 /* Unselected button color */ 82 /* Unselected button color */
66 -.light .toggleButton svg.embeddedIcon, 83 +.light .toggleButton svg.embeddedIcon .icon rect,
67 -.light .radioButton svg.embeddedIcon { 84 +.light .radioButton svg.embeddedIcon .icon rect {
68 fill: #eee; 85 fill: #eee;
69 } 86 }
87 +
88 +.light .toggleButton:hover svg.embeddedIcon .icon rect,
89 +.light .radioButton:hover:not(.selected) svg.embeddedIcon .icon rect {
90 + fill: #ccc;
91 +}
92 +
70 .light .toggleButton svg.embeddedIcon .glyph, 93 .light .toggleButton svg.embeddedIcon .glyph,
71 .light .radioButton svg.embeddedIcon .glyph { 94 .light .radioButton svg.embeddedIcon .glyph {
72 fill: #bbb; 95 fill: #bbb;
73 } 96 }
74 -.dark .toggleButton svg.embeddedIcon, 97 +.light .toggleButton:hover:not(.selected) svg.embeddedIcon .glyph,
75 -.dark .radioButton svg.embeddedIcon { 98 +.light .radioButton:hover:not(.selected) svg.embeddedIcon .glyph {
99 + fill: #999;
100 +}
101 +
102 +.dark .toggleButton svg.embeddedIcon .icon rect,
103 +.dark .radioButton svg.embeddedIcon .icon rect {
76 fill: #303030; 104 fill: #303030;
77 } 105 }
106 +
107 +.dark .toggleButton:hover:not(.selected) svg.embeddedIcon .icon rect,
108 +.dark .radioButton:hover:not(.selected) svg.embeddedIcon .icon rect {
109 + fill: #555;
110 +}
111 +
78 .dark .toggleButton svg.embeddedIcon .glyph, 112 .dark .toggleButton svg.embeddedIcon .glyph,
79 .dark .radioButton svg.embeddedIcon .glyph { 113 .dark .radioButton svg.embeddedIcon .glyph {
80 fill: #565656; 114 fill: #565656;
81 } 115 }
116 +
117 +.dark .toggleButton:hover:not(.selected) svg.embeddedIcon .glyph,
118 +.dark .radioButton:hover:not(.selected) svg.embeddedIcon .glyph {
119 + fill: #777;
120 +}
......
...@@ -18,7 +18,27 @@ ...@@ -18,7 +18,27 @@
18 ONOS GUI -- Sample View -- CSS file 18 ONOS GUI -- Sample View -- CSS file
19 */ 19 */
20 20
21 +.light #ov-sample {
22 + color: navy;
23 +}
24 +
25 +.dark #ov-sample {
26 + color: #1e5e6f;
27 +}
28 +
29 +.dark a {
30 + color: #88c;
31 +}
32 +
21 #ov-sample .msg { 33 #ov-sample .msg {
22 - font-style: italic;
23 color: darkorange; 34 color: darkorange;
24 -}
...\ No newline at end of file ...\ No newline at end of file
35 +}
36 +
37 +.light #ov-sample .msg {
38 + color: darkorange;
39 +}
40 +
41 +.dark #ov-sample .msg {
42 + color: #904e00;
43 +}
44 +
......