diff --git a/src/components/kytos/accordion/AccordionItem.vue b/src/components/kytos/accordion/AccordionItem.vue index bafde87..2b8c195 100644 --- a/src/components/kytos/accordion/AccordionItem.vue +++ b/src/components/kytos/accordion/AccordionItem.vue @@ -113,57 +113,58 @@ export default { content: "▴" .compacted - .tab - display: inline-flex - width: auto - float: left - - .k-accordion-input - display: none - .k-accordion-label - display: none - - .k-accordion-input - & ~ .tab-content + .k-toolbar + .tab display: inline-flex - margin-top: 0px - height: 35px - max-height: 100% - overflow: hidden - - &[type=checkbox] - & + .k-accordion-label:after - content: "" - - &[type=checkbox]:checked - & + .k-accordion-label:after - content: "" - - .tab - .tab-content - min-width: 230px - margin-left: 15px - border: none - &:before - content: ';;;;;;;' - font: 8px monospace - line-height: 5px - color: $fill-bar - filter: invert(50%) - opacity: 0.2 - -webkit-transform: rotate(90deg) - -moz-transform: rotate(90deg) - -ms-transform: rotate(90deg) - transform: rotate(90deg) - border-bottom: 1px solid $fill-bar - pointer-events: none - width: 35px - height: 10px - position: absolute - left: -10px - top: 15px - - .k-button-wrapper - min-width: 120px + width: auto + float: left + + .k-accordion-input + display: none + .k-accordion-label + display: none + + .k-accordion-input + & ~ .tab-content + display: inline-flex + margin-top: 0px + height: 35px + max-height: 100% + overflow: hidden + + &[type=checkbox] + & + .k-accordion-label:after + content: "" + + &[type=checkbox]:checked + & + .k-accordion-label:after + content: "" + + .tab + .tab-content + min-width: 230px + margin-left: 15px + border: none + &:before + content: ';;;;;;;' + font: 8px monospace + line-height: 5px + color: $fill-bar + filter: invert(50%) + opacity: 0.2 + -webkit-transform: rotate(90deg) + -moz-transform: rotate(90deg) + -ms-transform: rotate(90deg) + transform: rotate(90deg) + border-bottom: 1px solid $fill-bar + pointer-events: none + width: 35px + height: 10px + position: absolute + left: -10px + top: 15px + + .k-button-wrapper + min-width: 120px diff --git a/src/components/kytos/chart/Timeseries.vue b/src/components/kytos/chart/Timeseries.vue index ef6fd4a..e443029 100644 --- 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 index 65a0642..23ab021 100644 --- a/src/components/kytos/misc/InfoPanel.vue +++ b/src/components/kytos/misc/InfoPanel.vue @@ -127,15 +127,15 @@ 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 @@ -143,7 +143,7 @@ export default { 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 index 8d8cfeb..4866184 100644 --- a/src/components/kytos/ppanel/PropertyPanelItem.vue +++ b/src/components/kytos/ppanel/PropertyPanelItem.vue @@ -52,8 +52,8 @@ 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 @@ -61,20 +61,20 @@ export default { 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 diff --git a/src/components/kytos/switch/Flow.vue b/src/components/kytos/switch/Flow.vue index 3664a0a..2cbef2f 100644 --- 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 index 8cb1681..ad179d2 100644 --- 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