summaryrefslogtreecommitdiff
path: root/ui/app/components/main_panel/main_panel.less
diff options
context:
space:
mode:
authorelijah <elijah@riseup.net>2017-04-24 00:53:41 -0700
committerKali Kaneko (leap communications) <kali@leap.se>2017-04-24 11:12:26 +0200
commit9d301349ab434dc744546918fe026d50485a0797 (patch)
tree802bec24bb446c9ed3af11f7ccfcd9793250b070 /ui/app/components/main_panel/main_panel.less
parent2976cf11e451f1086d98eae20bdfb0fffa87abb0 (diff)
[feat] usable vpn ui
Diffstat (limited to 'ui/app/components/main_panel/main_panel.less')
-rw-r--r--ui/app/components/main_panel/main_panel.less34
1 files changed, 30 insertions, 4 deletions
diff --git a/ui/app/components/main_panel/main_panel.less b/ui/app/components/main_panel/main_panel.less
index f15ecedc..2ec9d059 100644
--- a/ui/app/components/main_panel/main_panel.less
+++ b/ui/app/components/main_panel/main_panel.less
@@ -44,6 +44,7 @@
.main-panel > .body {
padding: 20px;
+ background-color: white;
}
.main-panel .accounts {
@@ -196,7 +197,6 @@
}
}
.body-row {
-
}
}
@@ -244,8 +244,13 @@
padding: 0;
font-size: @icon-size - 10;
line-height: @icon-size;
+ display: inline;
word-break: break-all;
}
+ span.info {
+ word-break: break-all;
+ margin-left: 10px;
+ }
}
.buttons {
padding-left: 10px;
@@ -255,12 +260,33 @@
padding-left: @section-padding;
width: @section-padding + @status-size;
img {
- width: @status-size;
- height: @status-size;
+ // this fixes a bug where sometimes the status icons are not
+ // correctly rendered in the web widget
+ width: 100%;
+ height: auto;
+ }
+ &.spin img {
+ animation: icon-spin 10s linear infinite;
+ -webkit-animation: icon-spin 10s linear infinite;
}
}
.body-row {
- padding-top: @section-padding;
+ .alert {
+ margin-bottom: 0px;
+ }
+ // all immediate child divs are considered to be separate sections in
+ // in the body row of the section.
+ & > div {
+ margin-top: @section-padding;
+ }
}
}
+@-webkit-keyframes icon-spin {
+ from { -webkit-transform: rotate(0deg); }
+ to { -webkit-transform: rotate(360deg); }
+}
+@keyframes icon-spin {
+ from {transform:rotate(0deg);}
+ to {transform:rotate(360deg);}
+}