diff options
| author | Maximilian Hils <git@maximilianhils.com> | 2017-04-30 15:23:20 +0200 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2017-04-30 15:23:20 +0200 |
| commit | fccc9bc45ef55e3e7f14ee4a51f376c53b418991 (patch) | |
| tree | a29c33256f8361d5e332ad874afede02e8b0b061 /web/src/css/header.less | |
| parent | 29ce5a83d2b4cec067731c2f2f77e1cda134c866 (diff) | |
| parent | 97a00728a85a32ca6a8e98a991f6dcf28809e73b (diff) | |
| download | mitmproxy-fccc9bc45ef55e3e7f14ee4a51f376c53b418991.tar.gz mitmproxy-fccc9bc45ef55e3e7f14ee4a51f376c53b418991.tar.bz2 mitmproxy-fccc9bc45ef55e3e7f14ee4a51f376c53b418991.zip | |
Merge pull request #2271 from mhils/mitmweb-connection-indicator
[web] add connection indicator [WIP]
Diffstat (limited to 'web/src/css/header.less')
| -rw-r--r-- | web/src/css/header.less | 30 |
1 files changed, 27 insertions, 3 deletions
diff --git a/web/src/css/header.less b/web/src/css/header.less index aa9abc76..55fc59d0 100644 --- a/web/src/css/header.less +++ b/web/src/css/header.less @@ -1,5 +1,7 @@ @import (reference) '../../node_modules/bootstrap/less/variables.less'; @import (reference) '../../node_modules/bootstrap/less/mixins/grid.less'; +@import (reference) "../../node_modules/bootstrap/less/mixins/labels.less"; +@import (reference) "../../node_modules/bootstrap/less/labels.less"; @menu-height: 85px; @@ -7,7 +9,7 @@ header { padding-top: 6px; background-color: white; @separator-color: lighten(grey, 15%); - menu { + > div { display: block; margin: 0; padding: 0; @@ -45,7 +47,6 @@ header { } } - .menu-entry { text-align: left; height: (@menu-height - @menu-legend-height)/3; @@ -63,7 +64,6 @@ header { } } - .menu-legend { height: @menu-legend-height; text-align: center; @@ -130,3 +130,27 @@ header { } } } + +.connection-indicator { + .label(); + float: right; + margin: 5px; + opacity: 1; + transition: all 1s linear; + + &.init, &.fetching { + background-color: @label-info-bg; + } + &.established { + background-color: @label-success-bg; + opacity: 0; + } + &.error { + background-color: @label-danger-bg; + transition: all 0.2s linear; + } + &.offline { + background-color: @label-warning-bg; + opacity: 1; + } +} |