mirror of
https://github.com/weaveworks/scope.git
synced 2026-03-05 03:01:11 +00:00
69fd397217
* Added resource view selector button * Showing resource boxes in the resource view * Crude CPU resource view prototype * Improved the viewMode state logic * Extracted zooming into a separate wrapper component * Split the layout selectors between graph-view and resource-view * Proper zooming logic for the resource view * Moved all node networks utils to selectors * Improved the zoom caching logic * Further refactoring of selectors * Added sticky labels to the resource boxes * Added panning translation limits in the resource view * Renamed GridModeSelector -> ViewModeSelector * Polished the topology resource view selection logic * Search bar hidden in the resource view * Added per-layer topology names to the resource view * Made metric selectors work for the resource view * Adjusted the viewport selectors * Renamed viewport selector to canvas (+ maximal zoom fix) * Showing more useful metric info in the resource box labels * Fetching only necessary nodes for the resource view * Refactored the resource view layer component * Addressed first batch UI comments (from the Scope meeting) * Switch to deep zooming transform in the resource view to avoid SVG precision errors * Renamed and moved resource view components * Polished all the resource view components * Changing the available metrics selection * Improved and polished the state transition logic for the resource view * Separated zoom limits from the zoom active state * Renaming and bunch of comments * Addressed all the UI comments (@davkal + @fons) * Made graph view selectors independent from resource view selectors
57 lines
1.8 KiB
SCSS
57 lines
1.8 KiB
SCSS
$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
|
|
|
|
$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: lighten($primary-color, 66%);
|
|
$background-lighter-color: lighten($background-color, 8%);
|
|
$background-average-color: mix($background-color, $background-lighter-color);
|
|
$background-darker-color: darken($background-color, 8%);
|
|
$background-darker-secondary-color: darken($background-color, 4%);
|
|
$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;
|
|
|
|
$details-window-width: 420px;
|
|
$details-window-padding-left: 36px;
|
|
$border-radius: 4px;
|
|
|
|
$terminal-header-height: 44px;
|
|
|
|
$node-highlight-fill-opacity: 0.1;
|
|
$node-highlight-stroke-opacity: 0.4;
|
|
$node-highlight-stroke-width: 2;
|
|
$node-border-stroke-width: 6;
|
|
$node-pseudo-opacity: 0.8;
|
|
$node-text-scale: 2;
|
|
$edge-highlight-opacity: 0.1;
|
|
$edge-opacity-blurred: 0.2;
|
|
$edge-opacity: 0.5;
|
|
$edge-color: rgb(110, 110, 156);
|
|
|
|
$btn-opacity-default: 0.7;
|
|
$btn-opacity-hover: 1;
|
|
$btn-opacity-selected: 0.9;
|
|
$btn-opacity-disabled: 0.25;
|
|
|
|
$link-opacity-default: 0.8;
|
|
|
|
$search-border-color: transparent;
|
|
$search-border-width: 1px;
|
|
|
|
/* specific elements */
|
|
$body-background-color: linear-gradient(30deg, $background-color 0%, $background-lighter-color 100%);
|
|
$label-background-color: fade-out($background-average-color, .3);
|