github/weave-scope
1
0
Fork 0
mirror of https://github.com/weaveworks/scope.git synced 2026-05-05 00:39:04 +00:00
Code Issues Packages Projects Releases Wiki Activity

Organized some variable names.

Browse Source
This commit is contained in:
Filip Barl
2018-03-21 11:23:40 +01:00
parent 80dd318c86
commit 4601988ab5
4 changed files with 60 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
client/app/styles/_base.scss
View File

@@ -358,7 +358,7 @@ a {
}
&-matched {
border-color: $weave-blue;
border-color: $color-weaveblue;
}
}
@@ -528,7 +528,7 @@ a {
.match {
background-color: lighten(rgba(0, 210, 255, 0.5), 30%);
border: 1px solid $weave-blue;
border: 1px solid $color-weaveblue;
}
}
@@ -539,7 +539,7 @@ a {
}
.shadow {
fill: none;
stroke: $weave-blue;
stroke: $color-weaveblue;
stroke-opacity: 0;
}
&.highlighted {
@@ -566,7 +566,7 @@ a {
.highlight-border {
fill: none;
stroke: $weave-blue;
stroke: $color-weaveblue;
stroke-width: 0.7 + $node-highlight-stroke-width * 2;
stroke-opacity: $node-highlight-stroke-opacity;
}
@@ -639,7 +639,7 @@ a {
display: inline-block;
margin: 1px;
padding: 2px 4px;
background-color: fade-out($weave-blue, .9);
background-color: fade-out($color-weaveblue, .9);
}
&-label {
@@ -651,7 +651,7 @@ a {
&-more {
text-transform: uppercase;
font-size: 0.7em;
color: darken($weave-blue, 10%);
color: darken($color-weaveblue, 10%);
margin-top: -2px;
}
}
@@ -706,7 +706,7 @@ a {
padding: 4px 5px;
margin-left: 2px;
font-size: 110%;
color: $white;
color: $color-white;
cursor: pointer;
border: 1px solid rgba(255, 255, 255, 0);
border-radius: 4px;
@@ -730,8 +730,8 @@ a {
}
.match {
background-color: fade-out($weave-blue, .7);
border: 1px solid $weave-blue;
background-color: fade-out($color-weaveblue, .7);
border: 1px solid $color-weaveblue;
}
&-header {
@@ -763,7 +763,7 @@ a {
&-relatives {
margin-top: 4px;
font-size: 120%;
color: $white;
color: $color-white;
&-link {
@extend .truncate;
@@ -798,12 +798,12 @@ a {
}
.node-control-button {
color: $white;
color: $color-white;
}
&-spinner {
@extend .hideable;
color: $white;
color: $color-white;
margin-left: 8px;
}
@@ -813,7 +813,7 @@ a {
width: 55%;
padding-top: 6px;
text-align: left;
color: $white;
color: $color-white;
&-icon {
@extend .blinkable;
@@ -1134,7 +1134,7 @@ a {
}
.new-image {
color: $success-green;
color: $color-japanese-laurel;
}
a {
@@ -1266,7 +1266,7 @@ a {
&-header {
@extend .truncate;
color: $white;
color: $color-white;
height: $terminal-header-height;
padding: 8px 24px;
background-color: $text-color;
@@ -1287,7 +1287,7 @@ a {
&-item, &-item-icon {
@extend .palable;
padding: 4px 5px;
color: $white;
color: $color-white;
cursor: pointer;
opacity: 0.7;
border: 1px solid rgba(255, 255, 255, 0);
@@ -1343,7 +1343,7 @@ a {
&-message {
margin: 4px 0;
color: $white;
color: $color-white;
}
.link {
@@ -1742,13 +1742,13 @@ a {
}
&-matched &-input {
border-color: $weave-blue;
border-color: $color-weaveblue;
}
}
.search-item {
background-color: fade-out($weave-blue, .2);
background-color: fade-out($color-weaveblue, .2);
border-radius: $border-radius / 2;
margin: 1px 0 1px 1.5em;
display: inline-block;
@@ -1805,7 +1805,7 @@ a {
}
&-header {
background-color: $weave-blue;
background-color: $color-weaveblue;
padding: 12px 24px;
color: white;
@@ -2059,7 +2059,7 @@ a {
// visual and row locking logic that happens on hover.
tbody tr.selected, tbody tr.focused {
background-color: #d7ecf5;
border: 1px solid $weave-blue;
border: 1px solid $color-weaveblue;
}
tbody tr.selected {
@@ -2121,7 +2121,7 @@ a {
&-content {
position: relative;
background-color: $white;
background-color: $color-white;
padding: 20px;
@extend .shadow-2;
z-index: 2048;
@@ -2140,7 +2140,7 @@ a {
}
button, a {
color: $weave-charcoal-blue;
color: $color-primary-charcoal;
&:hover {
color: $text-color;

8
client/app/styles/_colors.scss Normal file
View File

@@ -0,0 +1,8 @@
/* Theme colors */
$color-white: #fff;
$color-black: #000;
$color-lightgray: #f8f8f8;
$color-kimberly-dark: #656597;
$color-weaveblue: #00d2ff;
$color-primary-charcoal: #32324b;
$color-japanese-laurel: #008000;

28
client/app/styles/_contrast-overrides.scss
View File

@@ -1,16 +1,16 @@
@import "variables";
$background-color: lighten($primary-color, 75%);
$background-lighter-color: lighten($background-color, 10%);
$background-darker-color: darken($background-color, 20%);
$background-darker-secondary-color: darken($background-color, 15%);
$background-dark-color: $primary-color;
$text-color: black;
$text-secondary-color: lighten($text-color, 10%);
$text-tertiary-color: lighten($text-color, 20%);
$border-light-color: lighten($text-color, 50%);
$background-color: lighten($color-primary-charcoal, 75%);
$background-lighter-color: lighten($color-primary-charcoal, 85%);
$background-darker-color: lighten($color-primary-charcoal, 55%);
$background-darker-secondary-color: lighten($color-primary-charcoal, 60%);
$background-dark-color: $color-primary-charcoal;
$text-color: $color-black;
$text-secondary-color: lighten($color-black, 10%);
$text-tertiary-color: lighten($color-black, 20%);
$border-light-color: lighten($color-black, 50%);
$text-darker-color: darken($text-color, 20%);
$white: white;
$edge-color: black;
$edge-color: $color-black;
$node-elements-in-background-opacity: 0.4;
@@ -30,9 +30,9 @@ $btn-opacity-disabled: 0.4;
$link-opacity-default: 1;
$search-border-color: $background-darker-color;
$search-border-color: lighten($color-primary-charcoal, 55%);
$search-border-width: 2px;
/* specific elements */
$body-background-color: #FFF;
$label-background-color: #FFF;
$body-background-color: $color-white;
$label-background-color: $color-white;

37
client/app/styles/_variables.scss
View File

@@ -1,28 +1,21 @@
$fa-font-path: "~font-awesome/fonts";
/* weave company colours */
$weave-gray-blue: rgb(85,105,145);
$weave-blue: rgb(0,210,255);
$weave-orange: rgb(255,75,25);
$weave-charcoal-blue: rgb(50,50,75); // #32324B
$success-green: green;
@import "colors";
$fa-font-path: "~font-awesome/fonts";
$base-font: "Roboto", sans-serif;
$mono-font: "Menlo", "DejaVu Sans Mono", "Liberation Mono", monospace;
$base-ease: ease-in-out;
$primary-color: $weave-charcoal-blue;
$background-color: #f8f8f8;
$background-lighter-color: lighten($background-color, 8%);
$background-darker-color: darken($background-color, 16%);
$background-darker-secondary-color: darken($background-color, 8%);
$background-dark-color: $primary-color;
$text-color: lighten($primary-color, 5%);
$text-secondary-color: lighten($text-color, 15%);
$text-tertiary-color: lighten($text-color, 30%);
$border-light-color: lighten($text-color, 60%);
$text-darker-color: $primary-color;
$white: $background-lighter-color;
$background-color: $color-lightgray;
$background-lighter-color: lighten($color-lightgray, 8%);
$background-darker-color: darken($color-lightgray, 16%);
$background-darker-secondary-color: darken($color-lightgray, 8%);
$background-dark-color: $color-primary-charcoal;
$text-color: lighten($color-primary-charcoal, 5%);
$text-secondary-color: lighten($color-primary-charcoal, 20%);
$text-tertiary-color: lighten($color-primary-charcoal, 35%);
$border-light-color: lighten($color-primary-charcoal, 65%);
$text-darker-color: $color-primary-charcoal;
$details-window-width: 420px;
$details-window-padding-left: 30px;
@@ -42,7 +35,7 @@ $node-text-scale: 2;
$edge-highlight-opacity: 0.1;
$edge-opacity-blurred: 0.2;
$edge-opacity: 0.5;
$edge-color: rgb(110, 110, 156);
$edge-color: $color-kimberly-dark;
$btn-opacity-default: 0.7;
$btn-opacity-hover: 1;
@@ -57,5 +50,5 @@ $search-border-width: 1px;
$timeline-height: 55px;
/* specific elements */
$body-background-color: $background-color;
$label-background-color: fade-out($background-color, .3);
$body-background-color: $color-lightgray;
$label-background-color: fade-out($color-lightgray, .3);