Fix InfoPanel components contrast dark and white theme

kytos · Oct 2, 2018 · e660b29 · e660b29
1 parent 3617493
commit e660b29
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 20 deletions.
diff --git a/src/components/kytos/chart/Timeseries.vue b/src/components/kytos/chart/Timeseries.vue
@@ -323,7 +323,7 @@ export default {
 .chart-timeseries
   width: 100%;
   float: left;
-  background-color: $fill-button-bg-h;
+  background-color: $fill-bar;
 
   text
     fill: grey;

diff --git a/src/components/kytos/misc/InfoPanel.vue b/src/components/kytos/misc/InfoPanel.vue
@@ -127,23 +127,23 @@ export default {
  position: fixed
  right: 0
  top: 0
- background-color: #222
+ background-color: $fill-panel
  width: 420px
  z-index: 999
  box-shadow: 10px 0px 20px 5px rgba(0, 0, 0, 0.4)
 
 .k-info-wrapper
- -webkit-flex: 1 1 auto;
- overflow-y: auto;
- height: 0px;
+ -webkit-flex: 1 1 auto
+ overflow-y: auto
+ height: 0px
 
 .k-info-title
  display: flex
  flex-direction: row
  align-items: center
 
  svg
-  fill: $fill-icon-h
+  fill: $fill-icon
   width: 50px
   height: 50px
   padding: 10px
@@ -152,11 +152,12 @@ export default {
  .panel-title
   padding: 0
   margin: 0
+  color: $fill-text
 
   & > h1
     font-size: 1.2em
     font-weight: bold
-    color: $fill-text-h
+    color: $fill-text
 
   small
     font-size: 0.7em

diff --git a/src/components/kytos/ppanel/PropertyPanelItem.vue b/src/components/kytos/ppanel/PropertyPanelItem.vue
@@ -52,29 +52,29 @@ export default {
   th
    display: table-cell
    font-size: 0.8em
-   border-right: 1px solid $fill-button-bg-h
-   border-bottom: 1px solid $fill-button-bg-h
+   border-right: 1px solid $fill-input-content
+   border-bottom: 1px solid $fill-input-content
    color: $fill-text
    text-align: right
    padding: 0.5em
    min-width: 50%
 
   td
    display: table-cell
-   color: $fill-text-h
+   color: $fill-text
    text-align: left
-   border-bottom: 1px solid $fill-button-bg-h
+   border-bottom: 1px solid $fill-input-content
    font-size: 0.8em
    padding: 0.5em
 
   &:nth-child(odd)
-   background-color: $fill-button-bg
+   background-color: $fill-menubar
 
   &:nth-child(even)
-   background-color: $fill-button-bg
+   background-color: $fill-panel
 
   &:hover *
-   color: $fill-shortkey
-   background-color: $fill-button-bg-h
+   color: $fill-text-h
+   background-color: $fill-bar
 
 </style>
diff --git a/src/components/kytos/switch/Flow.vue b/src/components/kytos/switch/Flow.vue
@@ -148,11 +148,11 @@ export default {
   margin-bottom: 5px
   width: 100%
   font-size: 0.8em
-  background: $fill-button-bg
+  color: $fill-text
+  background: $fill-input-bg
 
   &:hover
-   color: $fill-link-h
-   background: $fill-button-bg-h
+   color: $fill-text-h
 
   span
    font-weight: bold
@@ -180,6 +180,7 @@ export default {
     flex-direction: column
     position: relative
     display: table
+    background: $fill-menubar
 
     .match-l2, .match-l3
      display: flex

diff --git a/src/components/kytos/switch/Interface.vue b/src/components/kytos/switch/Interface.vue
@@ -131,11 +131,12 @@ export default {
   cursor: pointer
   padding-top: 0.3em
   width: 100%
-  background-color: $fill-button-bg
+  color: $fill-text
+  background-color: $fill-panel
 
   &:hover *
    color: $fill-link-h
-   background: $fill-button-bg-h
+   background: $fill-bar
 
   .usage
     min-width: 4px
@@ -160,6 +161,7 @@ export default {
       height: 10px
       padding: 5px 5px 5px
       flex: 0 0 auto
+      word-break: break-all
       text-align: center
 
     .x_bytes