mirror of
https://github.com/weaveworks/scope.git
synced 2026-03-04 10:41:14 +00:00
2157 lines
38 KiB
SCSS
2157 lines
38 KiB
SCSS
@import '~font-awesome/scss/font-awesome.scss';
|
|
@import '~rc-slider/dist/rc-slider.css';
|
|
|
|
/* sass-lint:disable variable-for-property */
|
|
@font-face {
|
|
font-family: 'proxima-nova';
|
|
src: url('../fonts/proximanova-regular.woff');
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Roboto Mono';
|
|
src: url('../fonts/robotomono-regular.ttf');
|
|
}
|
|
/* sass-lint:enable variable-for-property */
|
|
|
|
a {
|
|
text-decoration: none;
|
|
}
|
|
|
|
.browsehappy {
|
|
margin: 0.2em 0;
|
|
background: $color-silver;
|
|
color: $color-black;
|
|
padding: 0.2em 0;
|
|
}
|
|
|
|
/* add this class to truncate text with ellipsis, container needs width */
|
|
.truncate {
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.colorable {
|
|
transition: background-color .3s $base-ease;
|
|
}
|
|
|
|
.palable {
|
|
transition: all .2s $base-ease;
|
|
}
|
|
|
|
.hideable {
|
|
transition: opacity .5s $base-ease;
|
|
}
|
|
|
|
.blinkable {
|
|
animation: blinking 1.5s infinite $base-ease;
|
|
}
|
|
|
|
.hang-around {
|
|
transition-delay: .5s;
|
|
}
|
|
|
|
// From https://stackoverflow.com/a/18294634
|
|
.fully-pannable {
|
|
width: 100%;
|
|
height: 100%;
|
|
// Grabbable
|
|
cursor: move; /* fallback if grab cursor is unsupported */
|
|
cursor: grab;
|
|
cursor: -moz-grab;
|
|
cursor: -webkit-grab;
|
|
|
|
&.panning {
|
|
// Grabbing
|
|
cursor: grabbing;
|
|
cursor: -moz-grabbing;
|
|
cursor: -webkit-grabbing;
|
|
}
|
|
}
|
|
|
|
.shadow-2 {
|
|
box-shadow: 0 3px 10px transparentize($color-black, 0.84), 0 3px 10px transparentize($color-black, 0.77);
|
|
}
|
|
|
|
.shadow-3 {
|
|
box-shadow: 0 10px 30px transparentize($color-black, 0.81), 0 6px 10px transparentize($color-black, 0.77);
|
|
}
|
|
|
|
.overlay {
|
|
@extend .hideable;
|
|
|
|
background-color: $color-white;
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
top: 0;
|
|
left: 0;
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
z-index: $layer-modal;
|
|
|
|
&.faded {
|
|
// NOTE: Not sure if we should block the pointer events here..
|
|
pointer-events: all;
|
|
cursor: wait;
|
|
opacity: 0.5;
|
|
}
|
|
}
|
|
|
|
.overlay-wrapper {
|
|
align-items: center;
|
|
background-color: transparentize($background-color, 0.1);
|
|
border-radius: $border-radius-soft;
|
|
color: $text-tertiary-color;
|
|
display: flex;
|
|
font-size: $font-size-tiny;
|
|
justify-content: center;
|
|
padding: 5px;
|
|
position: fixed;
|
|
bottom: 11px;
|
|
|
|
button {
|
|
@extend .btn-opacity;
|
|
background-color: transparent;
|
|
border: 1px solid transparent;
|
|
border-radius: $border-radius-soft;
|
|
color: $text-secondary-color;
|
|
cursor: pointer;
|
|
line-height: 20px;
|
|
padding: 1px 3px;
|
|
outline: 0;
|
|
|
|
.fa {
|
|
font-size: $font-size-normal;
|
|
position: relative;
|
|
top: 2px;
|
|
}
|
|
|
|
&:hover, &.selected {
|
|
border: 1px solid $text-tertiary-color;
|
|
}
|
|
|
|
&.active {
|
|
& > * { @extend .blinkable; }
|
|
border: 1px solid $text-tertiary-color;
|
|
}
|
|
}
|
|
}
|
|
|
|
.btn-opacity {
|
|
@extend .palable;
|
|
opacity: $btn-opacity-default;
|
|
&-selected {
|
|
opacity: $btn-opacity-selected;
|
|
}
|
|
&[disabled] {
|
|
cursor: default;
|
|
opacity: $btn-opacity-disabled;
|
|
}
|
|
&:not([disabled]):hover {
|
|
opacity: $btn-opacity-hover;
|
|
}
|
|
}
|
|
|
|
.hide {
|
|
opacity: 0;
|
|
}
|
|
|
|
.scope-app, .terminal-app {
|
|
-webkit-font-smoothing: antialiased;
|
|
background: $body-background-color;
|
|
bottom: 0;
|
|
color: $text-color;
|
|
font-family: $font-family-regular;
|
|
font-size: $font-size-small;
|
|
height: auto;
|
|
left: 0;
|
|
line-height: 150%;
|
|
margin: 0;
|
|
overflow: auto;
|
|
position: fixed;
|
|
right: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
-webkit-tap-highlight-color: transparent;
|
|
}
|
|
*:before,
|
|
*:after {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
p {
|
|
line-height: 20px;
|
|
padding-top: 6px;
|
|
margin-bottom: 14px;
|
|
letter-spacing: 0;
|
|
font-weight: 400;
|
|
color: $text-color;
|
|
}
|
|
|
|
h2 {
|
|
font-size: $font-size-extra-large;
|
|
line-height: 40px;
|
|
padding-top: 8px;
|
|
margin-bottom: 12px;
|
|
font-weight: 400;
|
|
}
|
|
|
|
&.time-travel-open {
|
|
.details-wrapper {
|
|
margin-top: $timeline-height + 50px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.header {
|
|
padding: 15px 10px 0;
|
|
pointer-events: none;
|
|
width: 100%;
|
|
|
|
.time-travel-wrapper {
|
|
position: relative;
|
|
z-index: $layer-front;
|
|
}
|
|
|
|
.selectors {
|
|
display: flex;
|
|
position: relative;
|
|
|
|
> * {
|
|
z-index: $layer-front;
|
|
flex: 1 1;
|
|
}
|
|
|
|
.time-control { z-index: $layer-modal; }
|
|
|
|
.logo {
|
|
margin: -16px 0 0 8px;
|
|
height: 64px;
|
|
max-width: 250px;
|
|
min-width: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.rc-slider {
|
|
.rc-slider-step { cursor: pointer; }
|
|
.rc-slider-track { background-color: $text-tertiary-color; }
|
|
.rc-slider-rail { background-color: $border-light-color; }
|
|
.rc-slider-handle { border-color: $text-tertiary-color; }
|
|
}
|
|
|
|
.footer {
|
|
@extend .overlay-wrapper;
|
|
right: 43px;
|
|
|
|
&-status {
|
|
margin-right: 1em;
|
|
}
|
|
|
|
&-label, .pause-text {
|
|
margin: 0 0.25em;
|
|
}
|
|
|
|
&-versionupdate {
|
|
margin-right: 0.5em;
|
|
}
|
|
|
|
&-tools {
|
|
display: flex;
|
|
}
|
|
|
|
&-icon {
|
|
margin-left: 0.5em;
|
|
}
|
|
|
|
.tooltip-wrapper {
|
|
position: relative;
|
|
|
|
.tooltip {
|
|
display: none;
|
|
background-color: $color-black;
|
|
position: absolute;
|
|
color: $color-white;
|
|
text-align: center;
|
|
line-height: 22px;
|
|
border-radius: $border-radius-soft;
|
|
font-size: $font-size-tiny;
|
|
margin-bottom: 25px;
|
|
margin-left: -4px;
|
|
opacity: 0.75;
|
|
padding: 10px 20px;
|
|
bottom: 0;
|
|
left: 10px;
|
|
transform: translateX(-50%);
|
|
white-space: nowrap;
|
|
z-index: $layer-tooltip;
|
|
|
|
// Adjusted from http://www.cssarrowplease.com/
|
|
&:after {
|
|
border: 6px solid transparent;
|
|
content: ' ';
|
|
top: 100%;
|
|
left: 50%;
|
|
height: 0;
|
|
width: 0;
|
|
position: absolute;
|
|
border-color: transparent;
|
|
border-top-color: $color-black;
|
|
margin-left: -6px;
|
|
}
|
|
}
|
|
|
|
&:hover .tooltip {
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
|
|
.zoomable-canvas svg {
|
|
@extend .fully-pannable;
|
|
}
|
|
|
|
.topologies-selector {
|
|
margin: 0 4px;
|
|
display: flex;
|
|
|
|
.topologies-item {
|
|
margin: 0px 8px;
|
|
|
|
&-label {
|
|
font-size: $font-size-normal;
|
|
}
|
|
|
|
}
|
|
|
|
.topologies-sub {
|
|
&-item {
|
|
&-label {
|
|
font-size: $font-size-small;
|
|
}
|
|
}
|
|
}
|
|
|
|
.topologies-item-main,
|
|
.topologies-sub-item {
|
|
pointer-events: all;
|
|
|
|
color: $text-secondary-color;
|
|
@extend .btn-opacity;
|
|
cursor: pointer;
|
|
padding: 4px 8px;
|
|
border-radius: $border-radius-soft;
|
|
opacity: 0.9;
|
|
margin-bottom: 3px;
|
|
border: 1px solid transparent;
|
|
white-space: nowrap;
|
|
|
|
&-active, &:hover {
|
|
color: $text-color;
|
|
background-color: $background-darker-secondary-color;
|
|
}
|
|
|
|
&-active {
|
|
opacity: 0.85;
|
|
}
|
|
|
|
&-matched {
|
|
border-color: $color-accent-blue;
|
|
}
|
|
|
|
}
|
|
|
|
.topologies-sub-item {
|
|
padding: 2px 8px;
|
|
}
|
|
|
|
}
|
|
|
|
.nodes-chart-overlay {
|
|
pointer-events: none;
|
|
opacity: $node-elements-in-background-opacity;
|
|
|
|
&:not(.active) {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.nodes-chart, .nodes-resources {
|
|
|
|
&-error, &-loading {
|
|
@extend .hideable;
|
|
pointer-events: none;
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
margin-left: -16.5%;
|
|
margin-top: -275px;
|
|
color: $text-secondary-color;
|
|
width: 33%;
|
|
height: 550px;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
|
|
.heading {
|
|
font-size: $font-size-normal;
|
|
}
|
|
|
|
&-icon {
|
|
text-align: center;
|
|
opacity: 0.25;
|
|
font-size: $overlay-icon-size;
|
|
}
|
|
|
|
li { padding-top: 5px; }
|
|
}
|
|
|
|
// Make watermarks blink only if actually shown (otherwise the FF performance decreses weirdly).
|
|
&-loading:not(.hide) &-error-icon-container {
|
|
@extend .blinkable;
|
|
}
|
|
|
|
&-loading {
|
|
text-align: center;
|
|
}
|
|
|
|
svg {
|
|
@extend .hideable;
|
|
position: absolute;
|
|
top: 0px;
|
|
}
|
|
|
|
.logo {
|
|
display: none;
|
|
}
|
|
|
|
svg.exported {
|
|
.logo {
|
|
display: inline;
|
|
}
|
|
}
|
|
|
|
text {
|
|
font-family: $font-family-regular;
|
|
fill: $text-secondary-color;
|
|
}
|
|
|
|
.nodes-chart-elements .node {
|
|
text-align: center;
|
|
|
|
.node-label {
|
|
color: $text-color;
|
|
}
|
|
|
|
.node-label-minor {
|
|
line-height: 125%;
|
|
}
|
|
|
|
.node-labels-container {
|
|
transform: scale($node-text-scale);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.node-label-wrapper {
|
|
//
|
|
// Base line height doesn't hop across foreignObject =/
|
|
//
|
|
line-height: 150%;
|
|
|
|
//
|
|
// inline-block so wrapper is only as wide as content.
|
|
//
|
|
display: inline-block;
|
|
|
|
//
|
|
// - inline-block gets a different baseline depending on overflow value
|
|
// - this element gets its overflow value changed sometimes.
|
|
// - explicitly set the baseline so the text doesn't jump up and down.
|
|
// http://stackoverflow.com/questions/9273016
|
|
//
|
|
vertical-align: top;
|
|
|
|
cursor: pointer;
|
|
pointer-events: all;
|
|
font-size: $font-size-small;
|
|
width: 100%;
|
|
}
|
|
|
|
.node-label-minor {
|
|
color: $text-secondary-color;
|
|
font-size: $font-size-tiny;
|
|
}
|
|
|
|
.node-label, .node-label-minor {
|
|
span {
|
|
border-radius: $border-radius-soft;
|
|
}
|
|
span:not(.match) {
|
|
padding: 0 0.25em;
|
|
background-color: $label-background-color;
|
|
}
|
|
span:empty {
|
|
padding: 0;
|
|
}
|
|
}
|
|
.matched-results {
|
|
background-color: $label-background-color;
|
|
}
|
|
|
|
&.pseudo {
|
|
cursor: default;
|
|
|
|
.node-label {
|
|
fill: $text-secondary-color;
|
|
}
|
|
|
|
.node-label-minor {
|
|
fill: $text-tertiary-color;
|
|
}
|
|
|
|
.node {
|
|
opacity: $node-pseudo-opacity;
|
|
}
|
|
|
|
.border {
|
|
opacity: $node-pseudo-opacity;
|
|
stroke: $text-tertiary-color;
|
|
}
|
|
}
|
|
|
|
.node-label, .node-label-minor {
|
|
text-align: center;
|
|
}
|
|
|
|
.match {
|
|
background-color: transparentize($color-accent-blue, 0.25);
|
|
border: 1px solid $color-accent-blue;
|
|
}
|
|
}
|
|
|
|
.edge {
|
|
.link-none {
|
|
fill: none;
|
|
display: none;
|
|
}
|
|
.link-storage {
|
|
fill: none;
|
|
stroke: $edge-color;
|
|
stroke-dasharray: 1, 30;
|
|
stroke-linecap: round;
|
|
}
|
|
.link {
|
|
fill: none;
|
|
stroke: $edge-color
|
|
}
|
|
.shadow {
|
|
fill: none;
|
|
stroke: $color-accent-blue;
|
|
stroke-opacity: 0;
|
|
}
|
|
&.highlighted {
|
|
.shadow {
|
|
stroke-opacity: $edge-highlight-opacity;
|
|
}
|
|
}
|
|
}
|
|
|
|
.stack .highlight-only {
|
|
.background { display: none; }
|
|
.shadow { display: none; }
|
|
.border { display: none; }
|
|
.node { display: none; }
|
|
}
|
|
|
|
.stack .shape .metric-fill {
|
|
display: none;
|
|
}
|
|
|
|
.shape {
|
|
transform: scale(1);
|
|
cursor: pointer;
|
|
|
|
.highlight-border {
|
|
fill: none;
|
|
stroke: $color-accent-blue;
|
|
stroke-width: 0.7 + $node-highlight-stroke-width * 2;
|
|
stroke-opacity: $node-highlight-stroke-opacity;
|
|
}
|
|
|
|
.highlight-shadow {
|
|
fill: none;
|
|
stroke: $color-white;
|
|
stroke-width: 0.7;
|
|
stroke-opacity: $node-highlight-shadow-opacity;
|
|
}
|
|
|
|
.background {
|
|
stroke: none;
|
|
fill: $background-lighter-color;
|
|
}
|
|
|
|
.metric-fill {
|
|
stroke: none;
|
|
fill-opacity: 0.7;
|
|
}
|
|
|
|
.border {
|
|
fill: none;
|
|
stroke-opacity: 1;
|
|
stroke-width: $node-border-stroke-width;
|
|
}
|
|
|
|
&.metrics .border {
|
|
stroke-opacity: 0.3;
|
|
}
|
|
|
|
.shadow {
|
|
fill: none;
|
|
stroke: $background-color;
|
|
stroke-width: $node-shadow-stroke-width;
|
|
}
|
|
|
|
.node {
|
|
fill: $text-color;
|
|
stroke: $background-lighter-color;
|
|
stroke-width: 0.05;
|
|
}
|
|
|
|
text {
|
|
transform: scale($node-text-scale);
|
|
font-size: $font-size-tiny;
|
|
dominant-baseline: middle;
|
|
text-anchor: middle;
|
|
}
|
|
}
|
|
|
|
.shape-dottedcylinder {
|
|
.border{
|
|
stroke-dasharray: 0.07;
|
|
}
|
|
}
|
|
|
|
.stack .shape .border {
|
|
stroke-width: $node-border-stroke-width * 0.8;
|
|
}
|
|
|
|
.edge-marker {
|
|
color: $edge-color;
|
|
fill: $edge-color;
|
|
}
|
|
}
|
|
|
|
.matched-results {
|
|
text-align: center;
|
|
|
|
&-match {
|
|
font-size: $font-size-small;
|
|
|
|
&-wrapper {
|
|
display: inline-block;
|
|
margin: 1px;
|
|
padding: 2px 4px;
|
|
background-color: transparentize($color-accent-blue, 0.9);
|
|
}
|
|
|
|
&-label {
|
|
color: $text-secondary-color;
|
|
margin-right: 0.5em;
|
|
}
|
|
}
|
|
|
|
&-more {
|
|
font-size: $font-size-tiny;
|
|
color: $color-turquoise;
|
|
margin-top: -2px;
|
|
}
|
|
}
|
|
|
|
.details {
|
|
&-wrapper {
|
|
position: fixed;
|
|
display: flex;
|
|
z-index: $layer-front;
|
|
right: $details-window-padding-left;
|
|
top: 100px;
|
|
bottom: 48px;
|
|
transition: transform 0.33333s cubic-bezier(0,0,0.21,1), margin-top .15s $base-ease;
|
|
}
|
|
}
|
|
|
|
.node-details {
|
|
height: 100%;
|
|
width: $details-window-width;
|
|
background-color: transparentize($color-white, 0.14);
|
|
display: flex;
|
|
flex-flow: column;
|
|
margin-bottom: 12px;
|
|
padding-bottom: 2px;
|
|
border-radius: $border-radius-soft;
|
|
background-color: $color-white;
|
|
@extend .shadow-2;
|
|
// keep node-details above the terminal.
|
|
z-index: $layer-front;
|
|
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
&-tools-wrapper {
|
|
position: relative;
|
|
}
|
|
|
|
|
|
&-tools {
|
|
position: absolute;
|
|
top: 6px;
|
|
right: 8px;
|
|
|
|
.close-details {
|
|
position: relative;
|
|
z-index: $layer-front;
|
|
}
|
|
|
|
> span {
|
|
@extend .btn-opacity;
|
|
padding: 4px 5px;
|
|
margin-left: 2px;
|
|
font-size: $font-size-normal;
|
|
color: $color-white;
|
|
cursor: pointer;
|
|
border: 1px solid transparent;
|
|
border-radius: $border-radius-soft;
|
|
|
|
span {
|
|
font-family: $font-family-regular;
|
|
font-size: $font-size-small;
|
|
margin-left: 4px;
|
|
|
|
span {
|
|
text-transform: capitalize;
|
|
font-size: $font-size-normal;
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
|
|
&:hover {
|
|
border-color: transparentize($color-white, 0.4);
|
|
}
|
|
}
|
|
}
|
|
|
|
.match {
|
|
background-color: transparentize($color-accent-blue, 0.7);
|
|
border: 1px solid $color-accent-blue;
|
|
}
|
|
|
|
&-header {
|
|
@extend .colorable;
|
|
|
|
&-wrapper {
|
|
padding: 36px 36px 8px 36px;
|
|
}
|
|
|
|
&-label {
|
|
color: $color-white;
|
|
margin: 0;
|
|
width: 348px;
|
|
padding-top: 0;
|
|
}
|
|
|
|
.details-tools {
|
|
position: absolute;
|
|
top: 16px;
|
|
right: 24px;
|
|
}
|
|
|
|
&-notavailable {
|
|
background-color: $background-dark-color;
|
|
}
|
|
|
|
}
|
|
|
|
&-relatives {
|
|
margin-top: 4px;
|
|
font-size: $font-size-normal;
|
|
color: $color-white;
|
|
|
|
&-link {
|
|
@extend .truncate;
|
|
@extend .btn-opacity;
|
|
display: inline-block;
|
|
margin-right: 0.5em;
|
|
cursor: pointer;
|
|
text-decoration: underline;
|
|
opacity: $link-opacity-default;
|
|
max-width: 12em;
|
|
}
|
|
|
|
&-more {
|
|
@extend .btn-opacity;
|
|
padding: 0 2px;
|
|
cursor: pointer;
|
|
font-size: $font-size-tiny;
|
|
font-weight: bold;
|
|
display: inline-block;
|
|
position: relative;
|
|
top: -5px;
|
|
}
|
|
}
|
|
|
|
&-controls {
|
|
white-space: nowrap;
|
|
padding: 8px 0;
|
|
|
|
&-wrapper {
|
|
padding: 0 36px 0 32px;
|
|
}
|
|
|
|
.node-control-button {
|
|
color: $color-white;
|
|
}
|
|
|
|
&-spinner {
|
|
@extend .hideable;
|
|
color: $color-white;
|
|
margin-left: 8px;
|
|
}
|
|
|
|
&-error {
|
|
@extend .truncate;
|
|
float: right;
|
|
width: 55%;
|
|
padding-top: 6px;
|
|
text-align: left;
|
|
color: $color-white;
|
|
|
|
&-icon {
|
|
@extend .blinkable;
|
|
margin-right: 0.5em;
|
|
}
|
|
}
|
|
}
|
|
|
|
&-content {
|
|
flex: 1;
|
|
padding: 0 36px 0 36px;
|
|
overflow-y: auto;
|
|
|
|
&-loading {
|
|
margin-top: 48px;
|
|
text-align: center;
|
|
font-size: $font-size-huge;
|
|
color: $text-tertiary-color;
|
|
}
|
|
|
|
&-section {
|
|
margin: 16px 0;
|
|
|
|
&-header {
|
|
font-size: $font-size-normal;
|
|
color: $text-tertiary-color;
|
|
margin-bottom: 10px;
|
|
}
|
|
}
|
|
}
|
|
|
|
&-health {
|
|
|
|
&-wrapper {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
align-content: center;
|
|
text-align: center;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
&-overflow {
|
|
@extend .btn-opacity;
|
|
flex-basis: 33%;
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
opacity: 0.85;
|
|
cursor: pointer;
|
|
position: relative;
|
|
padding-bottom: 16px;
|
|
|
|
&-item {
|
|
padding: 4px 8px;
|
|
line-height: 1.2;
|
|
flex-basis: 48%;
|
|
|
|
&-value {
|
|
color: $text-secondary-color;
|
|
font-size: $font-size-normal;
|
|
}
|
|
|
|
&-label {
|
|
color: $text-secondary-color;
|
|
font-size: $font-size-tiny;
|
|
}
|
|
}
|
|
}
|
|
|
|
&-item {
|
|
padding: 8px 16px;
|
|
width: 33%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-grow: 1;
|
|
|
|
&-label {
|
|
color: $text-secondary-color;
|
|
font-size: $font-size-small;
|
|
|
|
.fa {
|
|
margin-left: 0.5em;
|
|
}
|
|
}
|
|
|
|
&-sparkline {
|
|
margin-top: auto;
|
|
}
|
|
|
|
&-placeholder {
|
|
font-size: $font-size-extra-large;
|
|
opacity: 0.2;
|
|
margin-bottom: 0.2em;
|
|
}
|
|
}
|
|
|
|
&-link-item {
|
|
@extend .btn-opacity;
|
|
cursor: pointer;
|
|
opacity: $link-opacity-default;
|
|
width: 33%;
|
|
display: flex;
|
|
color: inherit;
|
|
|
|
.node-details-health-item {
|
|
width: auto;
|
|
}
|
|
}
|
|
}
|
|
|
|
&-info {
|
|
|
|
&-field {
|
|
display: flex;
|
|
align-items: baseline;
|
|
|
|
&-label {
|
|
text-align: right;
|
|
width: 30%;
|
|
color: $text-secondary-color;
|
|
padding: 0 0.5em 0 0;
|
|
white-space: nowrap;
|
|
font-size: $font-size-small;
|
|
|
|
&::after {
|
|
content: ':';
|
|
}
|
|
}
|
|
|
|
&-value {
|
|
font-size: $font-size-small;
|
|
flex: 1;
|
|
// Now required (from chrome 48) to get overflow + flexbox behaving:
|
|
min-width: 0;
|
|
color: $text-color;
|
|
}
|
|
}
|
|
}
|
|
|
|
&-property-list {
|
|
&-controls {
|
|
margin-left: -4px;
|
|
}
|
|
|
|
&-field {
|
|
display: flex;
|
|
align-items: baseline;
|
|
|
|
&-label {
|
|
text-align: right;
|
|
width: 50%;
|
|
color: $text-secondary-color;
|
|
padding: 0 0.5em 0 0;
|
|
white-space: nowrap;
|
|
font-size: $font-size-small;
|
|
|
|
&::after {
|
|
content: ':';
|
|
}
|
|
}
|
|
|
|
&-value {
|
|
font-size: $font-size-small;
|
|
flex: 1;
|
|
// Now required (from chrome 48) to get overflow + flexbox behaving:
|
|
min-width: 0;
|
|
color: $text-color;
|
|
}
|
|
}
|
|
}
|
|
|
|
&-generic-table {
|
|
width: 100%;
|
|
|
|
tr {
|
|
display: flex;
|
|
th, td {
|
|
padding: 0 5px;
|
|
}
|
|
}
|
|
}
|
|
|
|
&-table {
|
|
width: 100%;
|
|
border-spacing: 0;
|
|
/* need fixed for truncating, but that does not extend wide columns dynamically */
|
|
table-layout: fixed;
|
|
|
|
&-wrapper {
|
|
margin: 24px -4px;
|
|
}
|
|
|
|
&-header {
|
|
color: $text-tertiary-color;
|
|
font-size: $font-size-small;
|
|
text-align: right;
|
|
padding: 0;
|
|
|
|
.node-details-table-header-sortable {
|
|
padding: 3px 4px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
&-sorted {
|
|
color: $text-secondary-color;
|
|
}
|
|
|
|
&-sorter {
|
|
margin: 0 0.35em;
|
|
}
|
|
|
|
&:first-child {
|
|
margin-right: 0;
|
|
text-align: left;
|
|
}
|
|
}
|
|
|
|
tbody {
|
|
position: relative;
|
|
|
|
.min-height-constraint {
|
|
position: absolute;
|
|
width: 0 !important;
|
|
opacity: 0;
|
|
top: 0;
|
|
}
|
|
}
|
|
|
|
&-node {
|
|
font-size: $font-size-small;
|
|
line-height: 1.5;
|
|
|
|
&:hover, &.selected {
|
|
background-color: $color-white;
|
|
}
|
|
|
|
> * {
|
|
padding: 0 4px;
|
|
}
|
|
|
|
&-link {
|
|
@extend .btn-opacity;
|
|
text-decoration: underline;
|
|
cursor: pointer;
|
|
opacity: $link-opacity-default;
|
|
color: $text-color;
|
|
}
|
|
|
|
&-value, &-metric {
|
|
flex: 1;
|
|
margin-left: 0.5em;
|
|
text-align: right;
|
|
}
|
|
|
|
&-metric-link {
|
|
@extend .btn-opacity;
|
|
text-decoration: underline;
|
|
cursor: pointer;
|
|
opacity: $link-opacity-default;
|
|
color: $text-color;
|
|
}
|
|
|
|
&-value-scalar {
|
|
// width: 2em;
|
|
text-align: right;
|
|
margin-right: 0.5em;
|
|
}
|
|
|
|
&-value-minor,
|
|
&-value-unit {
|
|
font-size: $font-size-small;
|
|
color: $text-secondary-color;
|
|
}
|
|
|
|
&-value-sparkline {
|
|
> div {
|
|
display: inline-block;
|
|
}
|
|
span {
|
|
margin-left: 1em;
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
.image-status {
|
|
|
|
.progress-wrapper {
|
|
position: relative;
|
|
min-height: 35px;
|
|
}
|
|
|
|
.node-details-content-section-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
line-height: 26px;
|
|
}
|
|
|
|
.images .wrapper{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.weave-circular-progress-wrapper {
|
|
position: absolute;
|
|
left: 50%;
|
|
}
|
|
|
|
.new-image {
|
|
color: $color-status-info;
|
|
}
|
|
|
|
a {
|
|
&:hover {
|
|
background-color: $color-athens-gray;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
.node-details-table-node-link {
|
|
background-color: transparent;
|
|
border: 0;
|
|
cursor: pointer;
|
|
padding: 0;
|
|
outline: 0;
|
|
}
|
|
|
|
.node-details-table-node-link,
|
|
.node-details-table-node-label,
|
|
.node-details-table-node-value {
|
|
flex: 1;
|
|
font-size: $font-size-small;
|
|
color: $text-color;
|
|
line-height: 24px;
|
|
text-transform: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.node-resources {
|
|
&-metric-box {
|
|
@extend .palable;
|
|
cursor: pointer;
|
|
fill: transparentize($color-dusty-gray, 0.6);
|
|
|
|
&-info {
|
|
background-color: transparentize($color-white, 0.4);
|
|
border-radius: $border-radius-soft;
|
|
cursor: inherit;
|
|
padding: 5px;
|
|
|
|
.wrapper {
|
|
display: block;
|
|
|
|
&.label { font-size: $font-size-small; }
|
|
&.consumption { font-size: $font-size-tiny; }
|
|
}
|
|
}
|
|
}
|
|
|
|
&-layer-topology {
|
|
background-color: transparentize($color-gallery, 0.05);
|
|
border: 1px solid $color-silver;
|
|
color: $text-tertiary-color;
|
|
font-size: $font-size-normal;
|
|
font-weight: bold;
|
|
padding-right: 20px;
|
|
text-align: right;
|
|
text-transform: capitalize;
|
|
}
|
|
}
|
|
|
|
// This part sets the styles only for the 'real' node details table, not applying
|
|
// them to the nodes grid, because there we control hovering from the JS.
|
|
// NOTE: Maybe it would be nice to separate the class names between the two places
|
|
// where node tables are used - i.e. it doesn't make sense that node-details-table
|
|
// can also refer to the tables in the nodes grid.
|
|
.details-wrapper .node-details-table {
|
|
&-node {
|
|
&:hover, &.selected {
|
|
background-color: $color-white;
|
|
}
|
|
}
|
|
}
|
|
|
|
.node-control-button {
|
|
@extend .btn-opacity;
|
|
padding: 6px;
|
|
margin-left: 2px;
|
|
font-size: $font-size-normal;
|
|
color: $text-secondary-color;
|
|
cursor: pointer;
|
|
border: 1px solid transparent;
|
|
border-radius: $border-radius-soft;
|
|
&:hover {
|
|
border-color: transparentize($color-white, 0.4);
|
|
}
|
|
&-pending, &-pending:hover {
|
|
opacity: 0.2;
|
|
border-color: transparent;
|
|
cursor: not-allowed;
|
|
}
|
|
}
|
|
|
|
.terminal {
|
|
|
|
&-app {
|
|
display: flex;
|
|
flex-flow: column;
|
|
}
|
|
|
|
&-embedded {
|
|
position: relative;
|
|
// shadow of animation-wrapper is 10px, let it fit in here without being
|
|
// overflow hiddened.
|
|
flex: 1;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
&-animation-wrapper {
|
|
position: absolute;
|
|
// some room for the drop shadow.
|
|
top: 10px;
|
|
left: 10px;
|
|
bottom: 10px;
|
|
right: 0;
|
|
transition: transform 0.5s cubic-bezier(0.230, 1.000, 0.320, 1.000);
|
|
@extend .shadow-2;
|
|
}
|
|
|
|
&-wrapper {
|
|
width: 100%;
|
|
height: 100%;
|
|
border: 0px solid $color-black;
|
|
color: $color-gallery;
|
|
}
|
|
|
|
&-header {
|
|
@extend .truncate;
|
|
color: $color-white;
|
|
height: $terminal-header-height;
|
|
padding: 8px 24px;
|
|
background-color: $text-color;
|
|
position: relative;
|
|
font-size: $font-size-small;
|
|
line-height: 28px;
|
|
border-top-left-radius: $border-radius-soft;
|
|
|
|
&-title {
|
|
cursor: default;
|
|
}
|
|
|
|
&-tools {
|
|
position: absolute;
|
|
right: 8px;
|
|
top: 6px;
|
|
|
|
&-item, &-item-icon {
|
|
@extend .palable;
|
|
padding: 4px 5px;
|
|
color: $color-white;
|
|
cursor: pointer;
|
|
opacity: 0.7;
|
|
border: 1px solid transparent;
|
|
border-radius: $border-radius-soft;
|
|
|
|
font-size: $font-size-tiny;
|
|
font-weight: bold;
|
|
|
|
&:hover {
|
|
opacity: 1;
|
|
border-color: transparentize($color-white, 0.4);
|
|
}
|
|
}
|
|
|
|
&-item-icon {
|
|
font-size: $font-size-normal;
|
|
}
|
|
}
|
|
}
|
|
|
|
&-embedded &-inner { top: $terminal-header-height; }
|
|
&-app &-inner { top: 0; }
|
|
&-inner {
|
|
cursor: text;
|
|
font-family: $font-family-monospace;
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
background-color: $color-black;
|
|
padding: 8px;
|
|
box-sizing: content-box;
|
|
border-bottom-left-radius: $border-radius-soft;
|
|
|
|
.terminal {
|
|
background-color: transparent !important;
|
|
}
|
|
}
|
|
|
|
&-status-bar {
|
|
font-family: $font-family-regular;
|
|
position: absolute;
|
|
bottom: 16px;
|
|
right: 16px;
|
|
width: 50%;
|
|
padding: 16px 16px;
|
|
opacity: 0.8;
|
|
border-radius: $border-radius-soft;
|
|
|
|
h3 {
|
|
margin: 4px 0;
|
|
}
|
|
|
|
&-message {
|
|
margin: 4px 0;
|
|
color: $color-white;
|
|
}
|
|
|
|
.link {
|
|
font-weight: bold;
|
|
cursor: pointer;
|
|
float: right;
|
|
}
|
|
}
|
|
|
|
&-cursor {
|
|
color: $color-black;
|
|
background: $color-gallery;
|
|
}
|
|
}
|
|
|
|
.terminal-inactive .terminal-cursor {
|
|
visibility: hidden;
|
|
}
|
|
|
|
.metric {
|
|
&-unit {
|
|
padding-left: 0.25em;
|
|
}
|
|
}
|
|
|
|
.show-more {
|
|
@extend .btn-opacity;
|
|
border-top: 1px dotted $border-light-color;
|
|
padding: 0px 0;
|
|
margin-top: 4px;
|
|
text-align: right;
|
|
cursor: pointer;
|
|
color: $text-secondary-color;
|
|
font-size: $font-size-small;
|
|
|
|
&-icon {
|
|
color: $text-tertiary-color;
|
|
font-size: $font-size-normal;
|
|
position: relative;
|
|
top: 1px;
|
|
}
|
|
}
|
|
|
|
.plugins {
|
|
margin-right: 0.5em;
|
|
|
|
&-label {
|
|
margin-right: 0.25em;
|
|
}
|
|
|
|
&-plugin {
|
|
cursor: default;
|
|
}
|
|
|
|
&-plugin + &-plugin:before {
|
|
content: ', ';
|
|
}
|
|
|
|
&-plugin-icon {
|
|
top: 1px;
|
|
position: relative;
|
|
font-size: $font-size-large;
|
|
margin-right: 2px;
|
|
}
|
|
|
|
.error {
|
|
animation: blinking 2.0s 60 $base-ease; // blink for 2 minutes
|
|
color: $text-secondary-color;
|
|
}
|
|
|
|
&-empty {
|
|
opacity: $text-secondary-color;
|
|
}
|
|
}
|
|
|
|
.status {
|
|
padding: 2px 12px;
|
|
border-radius: $border-radius-soft;
|
|
color: $text-secondary-color;
|
|
display: inline-block;
|
|
|
|
&-icon {
|
|
font-size: $font-size-normal;
|
|
position: relative;
|
|
top: 0.125rem;
|
|
margin-right: 0.25rem;
|
|
}
|
|
|
|
&.status-loading {
|
|
animation: blinking 2.0s 150 $base-ease; // keep blinking for 5 minutes
|
|
text-transform: none;
|
|
color: $text-color;
|
|
}
|
|
}
|
|
|
|
.topology-option, .metric-selector, .network-selector, .view-mode-selector, .time-control {
|
|
font-size: $font-size-normal;
|
|
color: $text-secondary-color;
|
|
margin-bottom: 6px;
|
|
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.fa {
|
|
margin-left: 4px;
|
|
color: $color-accent-orange;
|
|
}
|
|
|
|
&-wrapper {
|
|
pointer-events: all;
|
|
border-radius: $border-radius-soft;
|
|
border: 1px solid $background-darker-color;
|
|
display: inline-block;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
&-action {
|
|
@extend .btn-opacity;
|
|
padding: 3px 12px;
|
|
cursor: pointer;
|
|
display: inline-block;
|
|
background-color: $background-color;
|
|
|
|
&-selected, &:not([disabled]):hover {
|
|
color: $text-darker-color;
|
|
background-color: $background-darker-color;
|
|
}
|
|
|
|
&:first-child {
|
|
border-left: none;
|
|
border-top-left-radius: $border-radius-soft;
|
|
border-bottom-left-radius: $border-radius-soft;
|
|
}
|
|
|
|
&:last-child {
|
|
border-top-right-radius: $border-radius-soft;
|
|
border-bottom-right-radius: $border-radius-soft;
|
|
}
|
|
}
|
|
}
|
|
|
|
.metric-selector {
|
|
font-size: $font-size-small;
|
|
margin-top: 6px;
|
|
}
|
|
|
|
.view-mode-selector, .time-control {
|
|
margin-left: 20px;
|
|
|
|
&-wrapper {
|
|
pointer-events: all;
|
|
border-color: $background-darker-secondary-color;
|
|
overflow: hidden;
|
|
}
|
|
|
|
&:first-child,
|
|
&:last-child {
|
|
.view-mode-selector-action {
|
|
border-radius: $border-radius-none;
|
|
}
|
|
}
|
|
|
|
&-action {
|
|
background-color: transparent;
|
|
|
|
&-selected, &:not([disabled]):hover {
|
|
background-color: $background-darker-secondary-color;
|
|
}
|
|
|
|
&:not(:last-child) {
|
|
border-right: 1px solid $background-darker-secondary-color;
|
|
}
|
|
}
|
|
}
|
|
|
|
.time-control {
|
|
margin-right: 20px;
|
|
|
|
&-controls {
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
display: flex;
|
|
}
|
|
|
|
&-spinner {
|
|
display: inline-block;
|
|
margin-right: 15px;
|
|
margin-top: 3px;
|
|
|
|
.fa {
|
|
color: $text-secondary-color;
|
|
font-size: $font-size-large;
|
|
}
|
|
}
|
|
|
|
&-info {
|
|
@extend .blinkable;
|
|
display: block;
|
|
margin-top: 5px;
|
|
text-align: right;
|
|
pointer-events: all;
|
|
font-size: $font-size-small;
|
|
}
|
|
}
|
|
|
|
.topology-option {
|
|
font-size: $font-size-small;
|
|
|
|
&-action {
|
|
&-selected {
|
|
cursor: default;
|
|
}
|
|
}
|
|
}
|
|
|
|
.view-mode-selector-wrapper, .time-control-wrapper {
|
|
.label { margin-left: 4px; }
|
|
.fa {
|
|
margin-left: 0;
|
|
color: $text-secondary-color;
|
|
}
|
|
}
|
|
|
|
.network-selector-action {
|
|
border-top: 3px solid transparent;
|
|
border-bottom: 3px solid $background-dark-color;
|
|
}
|
|
|
|
.warning {
|
|
display: inline-block;
|
|
cursor: pointer;
|
|
border: 1px dashed transparent;
|
|
text-transform: none;
|
|
border-radius: $border-radius-soft;
|
|
margin-left: 4px;
|
|
|
|
&-wrapper {
|
|
display: flex;
|
|
}
|
|
|
|
&-text {
|
|
display: inline-block;
|
|
color: $text-secondary-color;
|
|
padding-left: 0.5em;
|
|
}
|
|
|
|
&-icon {
|
|
@extend .btn-opacity;
|
|
}
|
|
|
|
&-expanded {
|
|
margin-left: 0;
|
|
padding: 2px 4px;
|
|
border-color: $text-tertiary-color;
|
|
}
|
|
|
|
&-expanded &-icon {
|
|
position: relative;
|
|
top: 4px;
|
|
left: 2px;
|
|
}
|
|
|
|
}
|
|
|
|
.sidebar {
|
|
position: fixed;
|
|
bottom: 11px;
|
|
left: 11px;
|
|
padding: 5px;
|
|
font-size: $font-size-small;
|
|
border-radius: $border-radius-soft;
|
|
border: 1px solid transparent;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.sidebar-gridmode {
|
|
background-color: $color-athens-gray;
|
|
border-color: $background-darker-color;
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.search {
|
|
pointer-events: all;
|
|
|
|
display: inline-block;
|
|
position: relative;
|
|
width: 10em;
|
|
transition: width 0.3s 0s $base-ease;
|
|
|
|
&-wrapper {
|
|
margin: 0 8px;
|
|
min-width: 160px;
|
|
text-align: right;
|
|
}
|
|
|
|
&-disabled {
|
|
opacity: 0.5;
|
|
cursor: disabled;
|
|
}
|
|
|
|
&-hint {
|
|
font-size: $font-size-tiny;
|
|
position: absolute;
|
|
padding: 0 1em;
|
|
color: $text-tertiary-color;
|
|
top: 0;
|
|
opacity: 0;
|
|
transition: transform 0.3s 0s $base-ease, opacity 0.3s 0s $base-ease;
|
|
text-align: left;
|
|
}
|
|
|
|
&-help-link {
|
|
@extend .btn-opacity;
|
|
cursor: pointer;
|
|
font-size: $font-size-normal;
|
|
}
|
|
|
|
&-label {
|
|
position: absolute;
|
|
pointer-events: none;
|
|
user-select: none;
|
|
top: 0;
|
|
left: 4px;
|
|
z-index: $layer-front;
|
|
padding: 4px;
|
|
color: $text-secondary-color;
|
|
|
|
&-icon {
|
|
margin-right: 0.5em;
|
|
}
|
|
|
|
&-hint {
|
|
font-size: $font-size-small;
|
|
transition: opacity 0.3s 0.5s $base-ease;
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
&-input {
|
|
overflow: hidden;
|
|
background: $color-white;
|
|
position: relative;
|
|
z-index: $layer-front;
|
|
display: flex;
|
|
border-radius: $border-radius-soft;
|
|
width: 100%;
|
|
border: $search-border-width solid $search-border-color;
|
|
padding: 2px 4px;
|
|
text-align: left;
|
|
flex-wrap: wrap;
|
|
|
|
&-field {
|
|
font-size: $font-size-small;
|
|
line-height: 150%;
|
|
position: relative;
|
|
padding: 1px 4px 1px 1.5em;
|
|
border: none;
|
|
border-radius: $border-radius-none;
|
|
background: transparent;
|
|
color: $text-color;
|
|
width: 100px;
|
|
|
|
&:focus {
|
|
outline: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
&-focused &-label-hint,
|
|
&-pinned &-label-hint,
|
|
&-filled &-label-hint {
|
|
transition: opacity 0.1s 0s $base-ease;
|
|
opacity: 0;
|
|
}
|
|
|
|
&-focused &-hint,
|
|
&-filled &-hint,
|
|
&-pinned &-hint {
|
|
opacity: 1;
|
|
transform: translate3d(0, 2.75em, 0);
|
|
transition: transform 0.3s 0.3s $base-ease, opacity 0.3s 0.3s $base-ease;
|
|
}
|
|
|
|
&-focused &-input-field,
|
|
&-filled &-input-field,
|
|
&-pinned &-input-field {
|
|
flex: 1;
|
|
}
|
|
|
|
&-focused,
|
|
&-filled,
|
|
&-pinned {
|
|
width: 100%;
|
|
}
|
|
|
|
&-matched &-input {
|
|
border-color: $color-accent-blue;
|
|
}
|
|
|
|
}
|
|
|
|
.search-item {
|
|
background-color: transparentize($color-accent-blue, 0.2);
|
|
border-radius: $border-radius-soft;
|
|
margin: 1px 0 1px 1.5em;
|
|
padding: 2px 4px 2px 6px;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
& + .search-item {
|
|
margin-left: 4px;
|
|
}
|
|
|
|
& + .search-input-field {
|
|
padding-left: 4px;
|
|
}
|
|
|
|
&-label {
|
|
margin-right: 4px;
|
|
}
|
|
|
|
&-icon {
|
|
@extend .btn-opacity;
|
|
padding: 2px;
|
|
cursor: pointer;
|
|
font-size: $font-size-small;
|
|
position: relative;
|
|
top: -1px;
|
|
}
|
|
}
|
|
|
|
@keyframes blinking {
|
|
0%, 50%, 100% {
|
|
opacity: 1.0;
|
|
} 25% {
|
|
opacity: 0.5;
|
|
}
|
|
}
|
|
|
|
//
|
|
// Help panel!
|
|
//
|
|
|
|
.help-panel {
|
|
z-index: $layer-modal;
|
|
background-color: $color-white;
|
|
@extend .shadow-2;
|
|
display: flex;
|
|
position: relative;
|
|
|
|
&-wrapper {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
&-header {
|
|
background-color: $color-accent-blue;
|
|
padding: 12px 24px;
|
|
color: $color-white;
|
|
|
|
h2 {
|
|
margin: 0;
|
|
font-size: $font-size-large;
|
|
}
|
|
}
|
|
|
|
&-tools {
|
|
position: absolute;
|
|
top: 6px;
|
|
right: 8px;
|
|
|
|
span {
|
|
@extend .btn-opacity;
|
|
padding: 4px 5px;
|
|
margin-left: 2px;
|
|
font-size: $font-size-normal;
|
|
color: $color-primary-lavender;
|
|
cursor: pointer;
|
|
border: 1px solid transparent;
|
|
border-radius: $border-radius-soft;
|
|
|
|
&:hover {
|
|
border-color: transparentize($color-primary-lavender, 0.4);
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
&-main {
|
|
display: flex;
|
|
padding: 12px 36px 36px 36px;
|
|
flex-direction: row;
|
|
align-items: stretch;
|
|
|
|
h2 {
|
|
line-height: 150%;
|
|
font-size: $font-size-large;
|
|
color: $color-primary-lavender;
|
|
padding: 4px 0;
|
|
border-bottom: 1px solid transparentize($color-primary-lavender, 0.9);
|
|
}
|
|
|
|
h3 {
|
|
font-size: $font-size-normal;
|
|
color: $color-primary-lavender;
|
|
padding: 4px 0;
|
|
}
|
|
|
|
p {
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
&-shortcuts {
|
|
margin-right: 36px;
|
|
|
|
&-shortcut {
|
|
kbd {
|
|
display: inline-block;
|
|
padding: 3px 5px;
|
|
font-size: $font-size-tiny;
|
|
line-height: 10px;
|
|
color: $color-dim-gray;
|
|
vertical-align: middle;
|
|
background-color: $color-alabaster;
|
|
border: solid 1px $color-silver;
|
|
border-bottom-color: $color-gray;
|
|
border-radius: $border-radius-soft;
|
|
box-shadow: inset 0 -1px 0 $color-gray;
|
|
}
|
|
div.key {
|
|
width: 60px;
|
|
display: inline-block;
|
|
}
|
|
div.label {
|
|
display: inline-block;
|
|
}
|
|
}
|
|
}
|
|
|
|
&-search {
|
|
margin-right: 36px;
|
|
|
|
&-row {
|
|
display: flex;
|
|
flex-direction: row;
|
|
|
|
&-term {
|
|
flex: 1;
|
|
color: $text-secondary-color;
|
|
}
|
|
|
|
&-term-label {
|
|
flex: 1;
|
|
b {
|
|
color: $text-secondary-color;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&-fields {
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
&-current-topology {
|
|
color: $color-primary-lavender;
|
|
}
|
|
|
|
&-fields {
|
|
display: flex;
|
|
align-items: stretch;
|
|
|
|
&-column {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex: 1;
|
|
margin-right: 12px;
|
|
|
|
&-content {
|
|
overflow: auto;
|
|
// 160px for top and bottom margins and the rest of the help window
|
|
// is about 160px too.
|
|
// Notes: Firefox gets a bit messy if you try and bubble
|
|
// heights + overflow up (min-height issue + still doesn't work v.well),
|
|
// so this is a bit of a hack.
|
|
max-height: calc(100vh - 160px - 160px - 160px);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
//
|
|
// Zoom control
|
|
//
|
|
|
|
.zoom-control {
|
|
@extend .overlay-wrapper;
|
|
flex-direction: column;
|
|
padding: 5px 7px 0;
|
|
bottom: 50px;
|
|
right: 40px;
|
|
|
|
a:hover { border-color: transparent; }
|
|
|
|
.rc-slider {
|
|
margin: 5px 0;
|
|
height: 60px;
|
|
}
|
|
}
|
|
|
|
//
|
|
// Debug panel!
|
|
//
|
|
|
|
.debug-panel {
|
|
@extend .shadow-2;
|
|
background-color: $color-white;
|
|
top: 80px;
|
|
position: absolute;
|
|
padding: 10px;
|
|
left: 10px;
|
|
z-index: $layer-modal;
|
|
|
|
opacity: 0.3;
|
|
|
|
&:hover {
|
|
opacity: 1;
|
|
}
|
|
|
|
table {
|
|
display: inline-block;
|
|
border-collapse: collapse;
|
|
margin: 4px 2px;
|
|
|
|
td {
|
|
width: 10px;
|
|
height: 10px;
|
|
}
|
|
}
|
|
}
|
|
|
|
//
|
|
// Nodes grid.
|
|
//
|
|
|
|
.nodes-grid {
|
|
tr {
|
|
border-radius: $border-radius-soft;
|
|
}
|
|
|
|
&-label-minor {
|
|
opacity: 0.7;
|
|
}
|
|
|
|
&-id-column {
|
|
margin: -3px -4px;
|
|
padding: 2px 4px;
|
|
display: flex;
|
|
div {
|
|
flex: 1;
|
|
}
|
|
}
|
|
|
|
.node-details-table-wrapper-wrapper {
|
|
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: row;
|
|
width: 100%;
|
|
|
|
.node-details-table-wrapper {
|
|
margin: 0;
|
|
flex: 1;
|
|
}
|
|
|
|
.nodes-grid-graph {
|
|
position: relative;
|
|
margin-top: 24px;
|
|
}
|
|
|
|
.node-details-table-node > * {
|
|
padding: 3px 4px;
|
|
}
|
|
|
|
// Keeping the row height fixed is important for locking the rows on hover.
|
|
.node-details-table-node, thead tr {
|
|
height: 28px;
|
|
}
|
|
|
|
tr:nth-child(even) {
|
|
background: $background-darker-secondary-color;
|
|
}
|
|
|
|
tbody tr {
|
|
border: 1px solid transparent;
|
|
border-radius: $border-radius-soft;
|
|
cursor: pointer;
|
|
}
|
|
|
|
// We fully control hovering of the grid rows from JS,
|
|
// because we want consistent behaviour between the
|
|
// visual and row locking logic that happens on hover.
|
|
tbody tr.selected, tbody tr.focused {
|
|
background-color: transparentize($color-accent-blue, 0.85);
|
|
border: 1px solid $color-accent-blue;
|
|
}
|
|
}
|
|
|
|
.scroll-body {
|
|
|
|
table {
|
|
border-bottom: 1px solid $color-silver;
|
|
}
|
|
|
|
thead, tbody tr {
|
|
display: table;
|
|
width: 100%;
|
|
table-layout: fixed;
|
|
}
|
|
|
|
tbody:after {
|
|
content: '';
|
|
display: block;
|
|
// height of the controls so you can scroll the last row up above them
|
|
// and have a good look.
|
|
height: 140px;
|
|
}
|
|
|
|
thead {
|
|
box-shadow: 0 4px 2px -2px transparentize($color-black, 0.84);
|
|
border-bottom: 1px solid $color-gray;
|
|
}
|
|
|
|
tbody {
|
|
display: block;
|
|
overflow-y: scroll;
|
|
}
|
|
}
|
|
}
|
|
|
|
.troubleshooting-menu {
|
|
display: flex;
|
|
position: relative;
|
|
|
|
&-wrapper {
|
|
height: 100%;
|
|
width: 100%;
|
|
align-items: center;
|
|
display: flex;
|
|
justify-content: center;
|
|
position: absolute;
|
|
}
|
|
|
|
&-content {
|
|
position: relative;
|
|
background-color: $color-white;
|
|
padding: 20px;
|
|
@extend .shadow-2;
|
|
z-index: $layer-modal;
|
|
}
|
|
|
|
&-item {
|
|
height: 40px;
|
|
}
|
|
|
|
button {
|
|
border: 0;
|
|
background-color: transparent;
|
|
cursor: pointer;
|
|
padding: 0;
|
|
outline: 0;
|
|
}
|
|
|
|
button, a {
|
|
color: $color-primary-charcoal;
|
|
|
|
&:hover {
|
|
color: $text-color;
|
|
}
|
|
}
|
|
|
|
.fa {
|
|
width: 20px;
|
|
text-align: center;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.fa-close {
|
|
width: 25px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 1330px) {
|
|
.view-mode-selector .label { display: none; }
|
|
}
|