mirror of
https://github.com/weaveworks/scope.git
synced 2026-07-25 16:26:48 +00:00
d39fd847b7
Refactored nodedetails to support multiple data sets, probably broke some tests Allow api requests to out-of-view topologies Fix ESC behavior with details panel Stack details panel like cards Details pain side-by-side Details panel piles Fix node details table header styles Render load and not-found captions like relatives Fix topology click action Make node detail tables sortable Grouped metrics for details health Group metrics in same style Link node details children Fix scroll issues on double-details Fix DESC sort order for node details table Save selected node labels in state - allows rendering of node labels from other topologies before details are loaded Change detail card UX, newest one at top, pile at bottom Details panel one pile w/ animation Sort details table nodes by metadata too Animate sidepanel from children too Fix radial layout Dont set origin if a node was already selected, suppresses animation stack effect: shift top cards to the left, shrink lower cards vertically Clear details card stack if sibling is selected Check if node is still selected on API response Make detail table sorters robust against non-uniform metadata Dont show scrollbar all the time, fix sort icon issue Button to show topology for relative Overflow metrics for details panel health Fix JS error when no metrics are available for container image details Column-based rendering of node details table Fix JS tests Review feedback (UI)
939 lines
16 KiB
Plaintext
939 lines
16 KiB
Plaintext
@font-face {
|
|
font-family: "Roboto";
|
|
src: url("../../node_modules/materialize-css/font/roboto/Roboto-Regular.woff2"),
|
|
url("../../node_modules/materialize-css/font/roboto/Roboto-Regular.woff"),
|
|
url("../../node_modules/materialize-css/font/roboto/Roboto-Regular.ttf");
|
|
}
|
|
|
|
.browsehappy {
|
|
margin: 0.2em 0;
|
|
background: #ccc;
|
|
color: #000;
|
|
padding: 0.2em 0;
|
|
}
|
|
|
|
/* 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;
|
|
|
|
@primary-color: @weave-charcoal-blue;
|
|
@background-color: lighten(@primary-color, 66%);
|
|
@background-secondary-color: lighten(@background-color, 8%);
|
|
@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-tertiary-color: lighten(@primary-color, 50%);
|
|
@border-light-color: lighten(@primary-color, 66%);
|
|
@text-darker-color: @primary-color;
|
|
@white: @background-secondary-color;
|
|
|
|
@details-window-width: 420px;
|
|
@details-window-padding-left: 36px;
|
|
|
|
@terminal-header-height: 34px;
|
|
|
|
/* 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 ease-in-out;
|
|
}
|
|
|
|
.palable {
|
|
transition: opacity .2s ease-in-out;
|
|
transition: border-color .2s ease-in-out;
|
|
}
|
|
|
|
.hideable {
|
|
transition: opacity .5s ease-in-out;
|
|
}
|
|
|
|
.hang-around {
|
|
transition-delay: .5s;
|
|
}
|
|
|
|
.hide {
|
|
opacity: 0;
|
|
}
|
|
|
|
.shadow-2 {
|
|
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.16), 0 3px 10px rgba(0, 0, 0, 0.23);
|
|
}
|
|
|
|
.shadow-3 {
|
|
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.19), 0 6px 10px rgba(0, 0, 0, 0.23);
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
|
}
|
|
*:before,
|
|
*:after {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html {
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
|
|
html,
|
|
body {
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
|
|
/* Space out content a bit */
|
|
body {
|
|
background: linear-gradient(30deg, @background-color 0%, @background-secondary-color 100%);
|
|
color: @text-color;
|
|
line-height: 150%;
|
|
font-family: @base-font;
|
|
font-size: 13px;
|
|
margin: 0;
|
|
}
|
|
|
|
p {
|
|
line-height: 20px;
|
|
padding-top: 6px;
|
|
margin-bottom: 14px;
|
|
letter-spacing: 0;
|
|
font-weight: 400;
|
|
color: @text-color;
|
|
}
|
|
|
|
h2 {
|
|
font-size: 34px;
|
|
line-height: 40px;
|
|
padding-top: 8px;
|
|
margin-bottom: 12px;
|
|
font-weight: 400;
|
|
}
|
|
|
|
.app {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
overflow: auto;
|
|
}
|
|
|
|
.header {
|
|
position: absolute;
|
|
top: 32px;
|
|
width: 100%;
|
|
height: 80px;
|
|
z-index: 20;
|
|
}
|
|
|
|
.footer {
|
|
position: absolute;
|
|
bottom: 16px;
|
|
right: 48px;
|
|
z-index: 20;
|
|
color: @text-tertiary-color;
|
|
font-size: 85%;
|
|
|
|
a {
|
|
color: @text-secondary-color;
|
|
|
|
&:hover {
|
|
color: @text-color;
|
|
}
|
|
}
|
|
}
|
|
|
|
.logo {
|
|
margin: -8px 0 0 64px;
|
|
height: 64px;
|
|
width: 250px;
|
|
float: left;
|
|
}
|
|
|
|
.topologies {
|
|
float: left;
|
|
margin: 4px 64px;
|
|
|
|
.topologies-item {
|
|
margin: 0px 16px;
|
|
float: left;
|
|
|
|
&-label {
|
|
color: @text-secondary-color;
|
|
font-size: 16px;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
}
|
|
|
|
.topologies-sub {
|
|
margin-top: 4px;
|
|
|
|
&-item {
|
|
&-label {
|
|
color: @text-secondary-color;
|
|
font-size: 12px;
|
|
text-transform: uppercase;
|
|
}
|
|
}
|
|
}
|
|
|
|
.topologies-item-main,
|
|
.topologies-sub-item {
|
|
cursor: pointer;
|
|
|
|
&-active, &:hover {
|
|
.topologies-sub-item-label,
|
|
.topologies-item-label {
|
|
color: @text-color;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.topology-options {
|
|
margin-top: -16px;
|
|
}
|
|
|
|
.status {
|
|
&-icon {
|
|
font-size: 16px;
|
|
position: relative;
|
|
top: 1px;
|
|
}
|
|
|
|
&-label {
|
|
margin-left: 0.5em;
|
|
}
|
|
}
|
|
|
|
.nodes-chart {
|
|
|
|
&-error {
|
|
.hideable;
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
color: @text-secondary-color;
|
|
width: 33%;
|
|
|
|
.heading {
|
|
font-size: 125%;
|
|
}
|
|
|
|
&-icon {
|
|
text-align: center;
|
|
opacity: 0.25;
|
|
font-size: 320px;
|
|
}
|
|
}
|
|
|
|
svg {
|
|
.hideable;
|
|
position: absolute;
|
|
top: 0px;
|
|
}
|
|
|
|
text {
|
|
font-family: @base-font;
|
|
fill: @text-secondary-color;
|
|
|
|
&.node-label {
|
|
fill: @text-color;
|
|
}
|
|
|
|
&.node-sublabel {
|
|
fill: @text-secondary-color;
|
|
}
|
|
}
|
|
|
|
g.node {
|
|
cursor: pointer;
|
|
transition: opacity .5s ease-in-out;
|
|
|
|
&.pseudo {
|
|
opacity: 0.8;
|
|
cursor: default;
|
|
|
|
.node-label {
|
|
fill: @text-secondary-color;
|
|
}
|
|
|
|
.node-sublabel {
|
|
fill: @text-tertiary-color;
|
|
}
|
|
|
|
.border {
|
|
stroke: @text-tertiary-color;
|
|
stroke-width: 1px;
|
|
}
|
|
}
|
|
|
|
&.blurred {
|
|
opacity: 0.25;
|
|
}
|
|
}
|
|
|
|
.edge {
|
|
transition: opacity .5s ease-in-out;
|
|
|
|
&.blurred {
|
|
opacity: 0.2;
|
|
}
|
|
|
|
.link {
|
|
stroke: @text-secondary-color;
|
|
stroke-width: 1px;
|
|
fill: none;
|
|
stroke-opacity: 0.5;
|
|
}
|
|
.shadow {
|
|
stroke: @weave-blue;
|
|
stroke-width: 10px;
|
|
fill: none;
|
|
stroke-opacity: 0;
|
|
}
|
|
&.highlighted {
|
|
.shadow {
|
|
stroke-opacity: 0.1;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
circle.border {
|
|
stroke-width: 3px;
|
|
fill: none;
|
|
}
|
|
|
|
circle.shadow {
|
|
stroke: none;
|
|
fill: @background-secondary-color;
|
|
}
|
|
|
|
circle.node {
|
|
fill: @text-color;
|
|
}
|
|
|
|
circle.highlighted {
|
|
fill: @weave-blue;
|
|
fill-opacity: 0.1;
|
|
stroke: @weave-blue;
|
|
stroke-width: 1px;
|
|
stroke-opacity: 0.4;
|
|
}
|
|
|
|
}
|
|
|
|
.details {
|
|
&-wrapper {
|
|
position: fixed;
|
|
z-index: 1024;
|
|
right: @details-window-padding-left;
|
|
top: 24px;
|
|
bottom: 48px;
|
|
width: @details-window-width;
|
|
transition: transform 0.33333s cubic-bezier(0,0,0.21,1);
|
|
}
|
|
}
|
|
|
|
.node-details {
|
|
height: 100%;
|
|
background-color: rgba(255, 255, 255, 0.86);
|
|
display: flex;
|
|
flex-flow: column;
|
|
margin-bottom: 12px;
|
|
padding-bottom: 2px;
|
|
border-radius: 2px;
|
|
background-color: #fff;
|
|
.shadow-2;
|
|
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
&-tools-wrapper {
|
|
position: relative;
|
|
}
|
|
|
|
&-tools {
|
|
position: absolute;
|
|
top: 6px;
|
|
right: 8px;
|
|
|
|
span {
|
|
.palable;
|
|
padding: 4px 5px;
|
|
margin-left: 2px;
|
|
font-size: 110%;
|
|
color: @white;
|
|
cursor: pointer;
|
|
opacity: 0.7;
|
|
border: 1px solid rgba(255, 255, 255, 0);
|
|
border-radius: 10%;
|
|
|
|
&:hover {
|
|
opacity: 1;
|
|
border-color: rgba(255, 255, 255, 0.6);
|
|
}
|
|
}
|
|
}
|
|
|
|
&-header {
|
|
.colorable;
|
|
|
|
&-wrapper {
|
|
padding: 36px 36px 8px 36px;
|
|
}
|
|
|
|
&-label {
|
|
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: 120%;
|
|
color: @white;
|
|
|
|
&-link {
|
|
.truncate;
|
|
.palable;
|
|
display: inline-block;
|
|
margin-right: 0.5em;
|
|
cursor: pointer;
|
|
text-decoration: underline;
|
|
opacity: 0.8;
|
|
max-width: 12em;
|
|
|
|
&:hover {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
&-more {
|
|
.palable;
|
|
padding: 0 2px;
|
|
text-transform: uppercase;
|
|
cursor: pointer;
|
|
opacity: 0.7;
|
|
font-size: 60%;
|
|
font-weight: bold;
|
|
display: inline-block;
|
|
position: relative;
|
|
top: -5px;
|
|
|
|
&:hover {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
&-controls {
|
|
white-space: nowrap;
|
|
padding: 8px 0;
|
|
|
|
&-wrapper {
|
|
padding: 0 36px 0 32px;
|
|
}
|
|
|
|
.node-control-button {
|
|
.palable;
|
|
padding: 6px;
|
|
margin-left: 2px;
|
|
font-size: 110%;
|
|
color: @white;
|
|
cursor: pointer;
|
|
opacity: 0.7;
|
|
border: 1px solid rgba(255, 255, 255, 0);
|
|
border-radius: 10%;
|
|
&:hover {
|
|
opacity: 1;
|
|
border-color: rgba(255, 255, 255, 0.6);
|
|
}
|
|
&-pending, &-pending:hover {
|
|
opacity: 0.2;
|
|
border-color: rgba(255, 255, 255, 0);
|
|
cursor: not-allowed;
|
|
}
|
|
}
|
|
|
|
&-spinner {
|
|
.hideable;
|
|
color: @white;
|
|
margin-left: 8px;
|
|
}
|
|
|
|
&-error {
|
|
.truncate;
|
|
float: right;
|
|
width: 55%;
|
|
padding-top: 6px;
|
|
text-align: left;
|
|
color: @white;
|
|
|
|
&-icon {
|
|
margin-right: 0.5em;
|
|
animation: blinking 2.0s infinite ease-in-out;
|
|
}
|
|
}
|
|
}
|
|
|
|
&-content {
|
|
flex: 1;
|
|
padding: 0 36px 0 36px;
|
|
overflow-y: auto;
|
|
|
|
&-info {
|
|
margin-top: 16px;
|
|
}
|
|
|
|
&-loading {
|
|
margin-top: 48px;
|
|
text-align: center;
|
|
font-size: 48px;
|
|
color: @background-medium-color;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
&-section {
|
|
margin: 16px 0;
|
|
|
|
&-header {
|
|
text-transform: uppercase;
|
|
font-size: 90%;
|
|
color: @text-tertiary-color;
|
|
padding: 4px 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
&-health {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
align-content: center;
|
|
text-align: center;
|
|
|
|
&-expand {
|
|
.palable;
|
|
margin: 4px 16px 0;
|
|
border-top: 1px solid @border-light-color;
|
|
text-transform: uppercase;
|
|
font-size: 80%;
|
|
color: @text-secondary-color;
|
|
width: 100%;
|
|
cursor: pointer;
|
|
opacity: 0.8;
|
|
|
|
&:hover {
|
|
opacity: 1.0;
|
|
}
|
|
}
|
|
|
|
&-overflow {
|
|
.palable;
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
border-left: 1px solid @border-light-color;
|
|
opacity: 0.85;
|
|
cursor: pointer;
|
|
position: relative;
|
|
padding-bottom: 16px;
|
|
|
|
&:hover {
|
|
opacity: 1;
|
|
}
|
|
|
|
&-expand {
|
|
text-transform: uppercase;
|
|
font-size: 70%;
|
|
color: @text-secondary-color;
|
|
position: absolute;
|
|
bottom: -2px;
|
|
left: 0;
|
|
right: 0;
|
|
}
|
|
|
|
&-item {
|
|
padding: 4px 8px;
|
|
line-height: 1.2;
|
|
flex-basis: 48%;
|
|
|
|
&-value {
|
|
color: @text-secondary-color;
|
|
font-size: 100%;
|
|
}
|
|
|
|
&-label {
|
|
color: @text-secondary-color;
|
|
text-transform: uppercase;
|
|
font-size: 60%;
|
|
}
|
|
}
|
|
}
|
|
|
|
&-item {
|
|
padding: 8px 16px;
|
|
width: 33%;
|
|
|
|
&-label {
|
|
color: @text-secondary-color;
|
|
text-transform: uppercase;
|
|
font-size: 80%;
|
|
}
|
|
|
|
&-value {
|
|
color: @text-secondary-color;
|
|
font-size: 150%;
|
|
padding-bottom: 0.5em;
|
|
}
|
|
}
|
|
}
|
|
|
|
&-info {
|
|
margin: 16px 0;
|
|
|
|
&-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;
|
|
text-transform: uppercase;
|
|
font-size: 80%;
|
|
|
|
&::after {
|
|
content: ':';
|
|
}
|
|
}
|
|
|
|
&-value {
|
|
font-size: 105%;
|
|
flex: 1;
|
|
color: @text-color;
|
|
}
|
|
}
|
|
}
|
|
|
|
&-table {
|
|
width: 100%;
|
|
border-spacing: 0;
|
|
/* need fixed for truncating, but that does not extend wide columns dynamically */
|
|
table-layout: fixed;
|
|
|
|
&-wrapper {
|
|
margin: 24px 0;
|
|
}
|
|
|
|
&-header {
|
|
text-transform: uppercase;
|
|
color: @text-tertiary-color;
|
|
font-size: 90%;
|
|
text-align: right;
|
|
cursor: pointer;
|
|
padding: 0;
|
|
|
|
&-sorted {
|
|
color: @text-secondary-color;
|
|
}
|
|
|
|
&-sorter {
|
|
margin: 0 0.25em;
|
|
}
|
|
|
|
&:first-child {
|
|
margin-right: 0;
|
|
text-align: left;
|
|
}
|
|
}
|
|
|
|
&-more {
|
|
.palable;
|
|
padding: 2px 0;
|
|
text-transform: uppercase;
|
|
cursor: pointer;
|
|
color: @text-secondary-color;
|
|
opacity: 0.7;
|
|
font-size: 80%;
|
|
font-weight: bold;
|
|
|
|
&:hover {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
&-node {
|
|
font-size: 105%;
|
|
line-height: 1.5;
|
|
|
|
> * {
|
|
padding: 0;
|
|
}
|
|
|
|
&-link {
|
|
.palable;
|
|
text-decoration: underline;
|
|
cursor: pointer;
|
|
opacity: 0.8;
|
|
|
|
&:hover {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
&-value {
|
|
flex: 1;
|
|
margin-left: 0.5em;
|
|
text-align: right;
|
|
}
|
|
|
|
&-value-scalar {
|
|
// width: 2em;
|
|
text-align: right;
|
|
margin-right: 0.5em;
|
|
}
|
|
|
|
&-value-minor,
|
|
&-value-unit {
|
|
font-size: 95%;
|
|
color: @text-secondary-color;
|
|
}
|
|
|
|
&-value-sparkline {
|
|
> div {
|
|
display: inline-block;
|
|
}
|
|
span {
|
|
margin-left: 1em;
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
.terminal {
|
|
|
|
&-app {
|
|
position: fixed;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
display: flex;
|
|
flex-flow: column;
|
|
}
|
|
|
|
&-embedded {
|
|
z-index: 512;
|
|
position: fixed;
|
|
top: 24px;
|
|
bottom: 48px;
|
|
left: 36px;
|
|
right: (@details-window-width + @details-window-padding-left + 10px);
|
|
}
|
|
|
|
&-wrapper {
|
|
position: absolute;
|
|
bottom: 0;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
border: 0px solid #000000;
|
|
border-radius: 4px;
|
|
color: #f0f0f0;
|
|
font-family: @mono-font;
|
|
.shadow-2;
|
|
}
|
|
|
|
&-header {
|
|
.truncate;
|
|
text-align: center;
|
|
color: @white;
|
|
height: @terminal-header-height;
|
|
padding: 8px 24px;
|
|
background-color: @text-color;
|
|
position: relative;
|
|
|
|
&-title {
|
|
cursor: default;
|
|
}
|
|
|
|
&-tools {
|
|
position: absolute;
|
|
right: 8px;
|
|
top: 6px;
|
|
|
|
&-icon {
|
|
.palable;
|
|
padding: 4px 5px;
|
|
color: @white;
|
|
cursor: pointer;
|
|
opacity: 0.7;
|
|
border: 1px solid rgba(255, 255, 255, 0);
|
|
border-radius: 10%;
|
|
&:hover {
|
|
opacity: 1;
|
|
border-color: rgba(255, 255, 255, 0.6);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&-embedded &-inner { top: @terminal-header-height; }
|
|
&-app &-inner { top: 0; }
|
|
&-inner {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
background-color: rgba(0, 0, 0, 0.93);
|
|
padding: 8px;
|
|
border-radius: 0 0 2px 2px;
|
|
|
|
.terminal {
|
|
background-color: transparent !important;
|
|
}
|
|
}
|
|
|
|
&-status-bar {
|
|
font-family: @base-font;
|
|
position: absolute;
|
|
bottom: 16px;
|
|
right: 16px;
|
|
width: 50%;
|
|
padding: 16px 16px;
|
|
opacity: 0.8;
|
|
border-radius: 4px;
|
|
|
|
h3 {
|
|
margin: 4px 0;
|
|
}
|
|
|
|
p {
|
|
margin: 4px 0;
|
|
color: @white;
|
|
}
|
|
.link {
|
|
text-transform: uppercase;
|
|
font-weight: bold;
|
|
cursor: pointer;
|
|
float: right;
|
|
}
|
|
}
|
|
|
|
&-cursor {
|
|
color: #000;
|
|
background: #f0f0f0;
|
|
}
|
|
}
|
|
|
|
.terminal-inactive .terminal-cursor {
|
|
visibility: hidden;
|
|
}
|
|
|
|
.metric {
|
|
&-unit {
|
|
padding-left: 0.25em;
|
|
}
|
|
}
|
|
|
|
.sidebar {
|
|
position: fixed;
|
|
bottom: 16px;
|
|
left: 20px;
|
|
width: 18em;
|
|
font-size: 85%;
|
|
|
|
&-item {
|
|
background-color: darken(@background-color, 8%);
|
|
border-radius: 2px;
|
|
padding: 4px 8px;
|
|
width: 100%;
|
|
margin-top: 2px;
|
|
|
|
&.status {
|
|
background-color: darken(@background-color, 4%);
|
|
color: @text-secondary-color;
|
|
}
|
|
&.status-loading {
|
|
animation: status-loading 2.0s infinite ease-in-out;
|
|
}
|
|
|
|
&-action {
|
|
float: right;
|
|
text-transform: uppercase;
|
|
font-weight: bold;
|
|
color: darken(@weave-orange, 25%);
|
|
cursor: pointer;
|
|
font-size: 90%;
|
|
}
|
|
}
|
|
}
|
|
|
|
@keyframes blinking {
|
|
0%, 100% {
|
|
opacity: 1.0;
|
|
} 50% {
|
|
opacity: 0.5;
|
|
}
|
|
}
|
|
|
|
@keyframes status-loading {
|
|
0%, 100% {
|
|
background-color: darken(@background-color, 4%);
|
|
color: @text-secondary-color;
|
|
} 50% {
|
|
background-color: darken(@background-color, 8%);
|
|
color: @text-color;
|
|
}
|
|
}
|
|
|
|
//
|
|
// Debug panel!
|
|
//
|
|
|
|
.debug-panel {
|
|
.shadow-2;
|
|
background-color: #fff;
|
|
top: 10px;
|
|
position: absolute;
|
|
padding: 10px;
|
|
left: 10px;
|
|
z-index: 10000;
|
|
}
|