github/weave-scope
1
0
Fork 0
mirror of https://github.com/weaveworks/scope.git synced 2026-07-28 01:31:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

No borders for topology links

Browse Source 
* added .btn-opacity to control opacity for buttons on hover/selected
  state

* increased contrast in topology link labels

* removed dark background from status to not confuse with topo links
This commit is contained in:
David Kaltschmidt
2016-02-08 10:43:05 +01:00
parent 4890220984
commit c3878eb649
1 changed files with 32 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
client/app/styles/main.less
View File

@@ -23,17 +23,17 @@
@primary-color: @weave-charcoal-blue;
@background-color: lighten(@primary-color, 66%);
@background-secondary-color: lighten(@background-color, 8%);
@background-tertiary-color: lighten(@background-color, 10%);
@background-dark-secondary-color: darken(@background-color, 2%);
@background-lighter-color: lighten(@background-color, 8%);
@background-darker-color: darken(@background-color, 8%);
@background-darker-secondary-color: darken(@background-color, 4%);
@background-dark-color: @primary-color;
@background-medium-color: lighten(@background-dark-color, 55%);
@text-color: lighten(@primary-color, 10%);
@text-secondary-color: lighten(@primary-color, 33%);
@text-secondary-color: lighten(@primary-color, 27%);
@text-tertiary-color: lighten(@primary-color, 50%);
@border-light-color: lighten(@primary-color, 66%);
@text-darker-color: @primary-color;
@white: @background-secondary-color;
@white: @background-lighter-color;
@details-window-width: 420px;
@details-window-padding-left: 36px;
@@ -75,6 +75,17 @@
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.19), 0 6px 10px rgba(0, 0, 0, 0.23);
}
.btn-opacity {
.palable;
opacity: 0.8;
&-selected {
opacity: 0.9;
}
&:hover {
opacity: 1;
}
}
* {
box-sizing: border-box;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
@@ -96,7 +107,7 @@ body {
/* Space out content a bit */
body {
background: linear-gradient(30deg, @background-color 0%, @background-secondary-color 100%);
background: linear-gradient(30deg, @background-color 0%, @background-lighter-color 100%);
color: @text-color;
line-height: 150%;
font-family: @base-font;
@@ -136,6 +147,7 @@ h2 {
width: 100%;
height: 80px;
z-index: 20;
display: flex;
}
.footer {
@@ -159,19 +171,16 @@ h2 {
margin: -8px 0 0 64px;
height: 64px;
width: 250px;
float: left;
}
.topologies {
float: left;
margin: 4px 64px;
margin: 4px 0 0 128px;
display: flex;
.topologies-item {
margin: 0px 12px;
margin: 0px 8px;
&-label {
color: @text-color;
font-size: 13px;
text-transform: uppercase;
}
@@ -189,18 +198,19 @@ h2 {
.topologies-item-main,
.topologies-sub-item {
color: @text-secondary-color;
.palable;
cursor: pointer;
padding: 4px 8px;
opacity: 0.7;
border-radius: 4px;
border: 1px solid @background-dark-secondary-color;
opacity: 0.7;
margin-bottom: 4px;
background-color: @background-lighter-color;
opacity: 0.8;
margin-bottom: 3px;
&-active, &:hover {
background-color: @background-tertiary-color;
color: @text-color;
background-color: @background-darker-secondary-color;
}
&-active {
@@ -336,7 +346,7 @@ h2 {
circle.shadow {
stroke: none;
fill: @background-secondary-color;
fill: @background-lighter-color;
}
circle.node {
@@ -896,21 +906,19 @@ h2 {
font-size: 85%;
&-item {
background-color: darken(@background-color, 8%);
background-color: @background-darker-secondary-color;
border-radius: 2px;
padding: 4px 8px;
width: 100%;
margin-top: 2px;
color: @text-secondary-color;
&.status {
background-color: darken(@background-color, 4%);
color: @text-secondary-color;
}
&.status-loading {
animation: status-loading 2.0s infinite ease-in-out;
}
&-action {
.btn-opacity;
float: right;
text-transform: uppercase;
font-weight: bold;
@@ -931,10 +939,10 @@ h2 {
@keyframes status-loading {
0%, 100% {
background-color: darken(@background-color, 4%);
background-color: @background-darker-secondary-color;
color: @text-secondary-color;
} 50% {
background-color: darken(@background-color, 8%);
background-color: @background-darker-color;
color: @text-color;
}
}