hopglass/scss/main.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';

.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, sans-serif;
  @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;
  }

  .container table.hidden {
    display: none;
  }

  p {
    line-height: 1.67em;
  }
}

.infobox .clients {
  font-family: "ionicons";
  color: #1566A9;
  word-spacing: -0.2em;
  white-space: normal;
}

.infobox .clientsMesh {
  font-family: "ionicons";
  color: #dbdbdb;
  word-spacing: -0.2em;
  white-space: normal;
}

.infobox {
  position: relative;
  padding: 0.25em 0;
  margin-bottom: $buttondistance;

  img {
    max-width: 100%;
  }

  input[type="text"], textarea {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    border-radius: 5px;
    border: none;
    line-height: 1.67em;
    vertical-align: bottom;
    margin-right: 0.7em;
    padding: 3px 6px;
    font-family: monospace;
    width: 70%;
    max-width: 500px;
    min-height: 42px;
    font-size: 1.15em;
  }

  textarea {
    resize: vertical;
    overflow: auto;
    max-height: 300px;
  }
}

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 0 5px 20px rgba(0, 0, 0, 0.19), inset 0 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: 0;
    left: 0;
    margin: 0;
    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: 0 !important;
    width: auto;
    height: auto;
    min-height: 0;
  }

  .sidebar.hidden {
    width: auto;
  }
}