2a58bcf5f1
history: Frontend generated node charts with graphite backend Resolution for bower conflict Let the user configure the metrics in config.json Fix grunt task for deploying c3 css Fix tooltip layout issue
427 lines
6.7 KiB
SCSS
427 lines
6.7 KiB
SCSS
@import '_reset';
|
|
@import '_shadow';
|
|
@import '_base';
|
|
@import '_leaflet';
|
|
@import '_leaflet.label';
|
|
@import '_filters';
|
|
|
|
$minscreenwidth: 630pt;
|
|
$sidebarwidth: 420pt;
|
|
$sidebarwidthsmall: 320pt;
|
|
$buttondistance: 12pt;
|
|
|
|
@import '_sidebar';
|
|
@import '_map';
|
|
@import '_forcegraph';
|
|
@import '_legend';
|
|
@import '_chart';
|
|
|
|
.content {
|
|
position: fixed;
|
|
width: 100%;
|
|
height: 100vh;
|
|
|
|
.buttons {
|
|
direction: rtl;
|
|
unicode-bidi: bidi-override;
|
|
|
|
z-index: 100;
|
|
position: absolute;
|
|
top: $buttondistance;
|
|
right: $buttondistance;
|
|
|
|
button {
|
|
margin-left: $buttondistance;
|
|
}
|
|
}
|
|
}
|
|
|
|
.tabs, header {
|
|
background: rgba(0, 0, 0, 0.02);
|
|
}
|
|
|
|
.tabs {
|
|
padding: 1em 0 0 !important;
|
|
margin: 0;
|
|
list-style: none;
|
|
display: flex;
|
|
font-family: Roboto;
|
|
@include shadow(1);
|
|
}
|
|
|
|
.tabs li {
|
|
flex: 1 1 auto;
|
|
text-transform: uppercase;
|
|
text-align: center;
|
|
padding: 0.5em 0.5em 1em;
|
|
cursor: pointer;
|
|
color: rgba(0, 0, 0, 0.5);
|
|
}
|
|
|
|
.tabs li:hover {
|
|
color: #dc0067;
|
|
}
|
|
|
|
.tabs .visible {
|
|
border-bottom: 2pt solid #dc0067;
|
|
color: #dc0067;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
font-family: 'Roboto Slab', serif;
|
|
font-size: 11pt;
|
|
}
|
|
|
|
th.sort-header::selection {
|
|
background: transparent;
|
|
}
|
|
|
|
th.sort-header {
|
|
cursor: pointer;
|
|
}
|
|
|
|
table th.sort-header:after {
|
|
font-family: "ionicons";
|
|
padding-left: 0.25em;
|
|
content: '\f10d';
|
|
visibility: hidden;
|
|
}
|
|
|
|
table th.sort-header:hover:after {
|
|
visibility: visible;
|
|
}
|
|
|
|
table th.sort-up:after, table th.sort-down:after, table th.sort-down:hover:after {
|
|
visibility: visible;
|
|
opacity: 0.4;
|
|
}
|
|
|
|
table th.sort-up:after {
|
|
content: '\f104';
|
|
}
|
|
|
|
table.attributes th {
|
|
text-align: left;
|
|
font-weight: bold;
|
|
vertical-align: top;
|
|
padding-right: 1em;
|
|
white-space: nowrap;
|
|
line-height: 1.41em;
|
|
}
|
|
|
|
table.attributes td {
|
|
text-align: left !important;
|
|
width: 100%;
|
|
line-height: 1.41em;
|
|
}
|
|
|
|
.sidebar {
|
|
.infobox, .container {
|
|
@include shadow(2);
|
|
background: rgba(255, 255, 255, 0.97);
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.container.hidden {
|
|
display: none;
|
|
}
|
|
|
|
p {
|
|
line-height: 1.67em;
|
|
}
|
|
}
|
|
|
|
.infobox .clients {
|
|
font-family: "ionicons";
|
|
color: #1566A9;
|
|
word-spacing: -0.2em;
|
|
white-space: normal;
|
|
}
|
|
|
|
.infobox {
|
|
position: relative;
|
|
padding: 0.25em 0;
|
|
margin-bottom: $buttondistance;
|
|
|
|
img {
|
|
max-width: 100%;
|
|
}
|
|
}
|
|
|
|
button {
|
|
-webkit-tap-highlight-color: transparent;
|
|
font-family: "ionicons";
|
|
@include shadow(1);
|
|
border-radius: 0.9em;
|
|
background: rgba(255, 255, 255, 0.7);
|
|
border: none;
|
|
cursor: pointer;
|
|
height: 1.8em;
|
|
width: 1.8em;
|
|
font-size: 20pt;
|
|
transition: box-shadow 0.5s, color 0.5s;
|
|
outline: none;
|
|
}
|
|
|
|
button.active {
|
|
color: #dc0067 !important;
|
|
}
|
|
|
|
button:hover {
|
|
background: white;
|
|
color: #dc0067;
|
|
@include shadow(2);
|
|
}
|
|
|
|
button:active {
|
|
box-shadow: inset 0px 5px 20px rgba(0, 0, 0, 0.19), inset 0px 3px 6px rgba(0, 0, 0, 0.23);
|
|
}
|
|
|
|
button::-moz-focus-inner {
|
|
border: 0;
|
|
}
|
|
|
|
button.close {
|
|
width: auto;
|
|
height: auto;
|
|
font-size: 20pt;
|
|
float: right;
|
|
margin-right: $buttondistance;
|
|
margin-top: $buttondistance;
|
|
box-shadow: none;
|
|
background: transparent;
|
|
border-radius: 0;
|
|
color: rgba(0, 0, 0, 0.5);
|
|
font-family: "ionicons";
|
|
|
|
&:hover {
|
|
color: #dc0067;
|
|
}
|
|
|
|
&:after {
|
|
content: '\f2d7';
|
|
}
|
|
}
|
|
|
|
.sidebar h2, .sidebar h3 {
|
|
padding-left: $buttondistance;
|
|
padding-right: $buttondistance;
|
|
}
|
|
|
|
.sidebar {
|
|
p, pre, ul, h4 {
|
|
padding: 0 $buttondistance 1em;
|
|
}
|
|
|
|
table {
|
|
padding: 0 $buttondistance;
|
|
}
|
|
img {
|
|
max-width: 100%;
|
|
}
|
|
}
|
|
|
|
table {
|
|
border-spacing: 0 0.5em;
|
|
td, th {
|
|
line-height: 1.41em;
|
|
}
|
|
}
|
|
|
|
.sidebar table {
|
|
border-collapse: separate;
|
|
}
|
|
|
|
.sidebar table th {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.sidebar table:not(.node-links) th:first-child,
|
|
.sidebar table:not(.node-links) td:first-child {
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
width: 50%;
|
|
}
|
|
|
|
.sidebar table.node-links th:nth-child(2),
|
|
.sidebar table.node-links td:nth-child(2) {
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
width: 45%;
|
|
}
|
|
|
|
.sidebar table.node-links th:first-child,
|
|
.sidebar table.node-links td:first-child {
|
|
width: 1.5em;
|
|
}
|
|
|
|
.sidebarhandle {
|
|
position: fixed;
|
|
left: $sidebarwidth + 2 * $buttondistance;
|
|
top: $buttondistance;
|
|
z-index: 10;
|
|
transition: left 0.5s, box-shadow 0.5s, color 0.5s, transform 0.5s;
|
|
}
|
|
|
|
.sidebarhandle:after {
|
|
padding-right: 0.125em;
|
|
content: "\f124";
|
|
}
|
|
|
|
.sidebar.hidden .sidebarhandle {
|
|
transform: scale(-1, 1);
|
|
left: $buttondistance;
|
|
}
|
|
|
|
.online {
|
|
color: #558020 !important;
|
|
}
|
|
|
|
.offline {
|
|
color: #D43E2A !important;
|
|
}
|
|
|
|
.unseen {
|
|
color: #D89100 !important;
|
|
}
|
|
|
|
.sidebar {
|
|
z-index: 5;
|
|
width: $sidebarwidth;
|
|
box-sizing: border-box;
|
|
position: absolute;
|
|
top: $buttondistance;
|
|
left: $buttondistance;
|
|
margin-bottom: $buttondistance;
|
|
transition: left 0.5s;
|
|
}
|
|
|
|
.sidebar.hidden {
|
|
left: -$sidebarwidth - $buttondistance;
|
|
}
|
|
|
|
.sidebar .icon {
|
|
padding: 0 0.25em;
|
|
}
|
|
|
|
.sidebar table {
|
|
width: 100%;
|
|
table-layout: fixed;
|
|
}
|
|
|
|
.sidebar table th {
|
|
text-align: left;
|
|
}
|
|
|
|
.sidebar table:not(.node-links) td:not(:first-child),
|
|
.sidebar table:not(.node-links) th:not(:first-child) {
|
|
text-align: right;
|
|
}
|
|
|
|
.sidebar table.node-links td:not(:nth-child(-n+2)),
|
|
.sidebar table.node-links th:not(:nth-child(-n+2)) {
|
|
text-align: right;
|
|
}
|
|
|
|
.sidebar a {
|
|
color: #1566A9;
|
|
}
|
|
|
|
.bar {
|
|
display: block;
|
|
height: 1.4em;
|
|
background: rgba(85, 128, 32, 0.5);
|
|
position: relative;
|
|
|
|
span {
|
|
display: inline-block;
|
|
height: 1.4em;
|
|
background: rgba(85, 128, 32, 0.8);
|
|
}
|
|
|
|
label {
|
|
font-weight: bold;
|
|
white-space: nowrap;
|
|
color: white;
|
|
position: absolute;
|
|
right: 0.5em;
|
|
top: 0.1em;
|
|
}
|
|
}
|
|
|
|
.proportion th {
|
|
font-weight: normal !important;
|
|
text-align: right !important;
|
|
font-size: 0.95em;
|
|
padding-right: 0.71em;
|
|
}
|
|
|
|
.proportion td {
|
|
text-align: left !important;
|
|
width: 100%;
|
|
}
|
|
|
|
.proportion td, .proportion th {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.proportion span {
|
|
display: inline-block;
|
|
background: black;
|
|
padding: 0.25em 0.5em;
|
|
font-weight: bold;
|
|
min-width: 1.5em;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
@media screen and (max-width: 80em) {
|
|
.sidebar {
|
|
font-size: 0.8em;
|
|
top: 0pt;
|
|
left: 0pt;
|
|
margin: 0pt;
|
|
width: $sidebarwidthsmall;
|
|
min-height: 100vh;
|
|
@include shadow(2);
|
|
background: white;
|
|
|
|
.sidebarhandle {
|
|
left: $sidebarwidthsmall + $buttondistance;
|
|
}
|
|
|
|
.container, .infobox {
|
|
margin: 0;
|
|
box-shadow: none;
|
|
border-radius: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: $minscreenwidth) {
|
|
.sidebarhandle {
|
|
display: none;
|
|
}
|
|
|
|
.content {
|
|
position: relative;
|
|
width: auto;
|
|
height: 60vh;
|
|
}
|
|
|
|
.sidebar {
|
|
position: static;
|
|
margin: 0em !important;
|
|
width: auto;
|
|
height: auto;
|
|
min-height: 0;
|
|
}
|
|
|
|
.sidebar.hidden {
|
|
width: auto;
|
|
}
|
|
}
|