lbry-desktop/src/renderer/scss/_gui.scss

@import url(https://fonts.googleapis.com/css?family=Roboto:400,400i,500,500i,700);

html {
  height: 100%;
  font-size: var(--font-size);
}

body {
  color: var(--text-color);
  font-family: 'Roboto', sans-serif;
  line-height: var(--font-line-height);
}

/* Custom text selection */
*::selection {
  background: var(--text-selection-bg);
  color: var(--text-selection-color);
}

#window {
  min-height: 100vh;
  background: var(--window-bg);
}

.credit-amount--indicator {
  font-weight: 500;
  color: var(--color-money);
}
.credit-amount--fee {
  font-size: 0.9em;
  color: var(--color-meta-light);
}

.credit-amount--bold {
  font-weight: 700;
}

#main-content {
  margin: auto;
  display: flex;
  flex-direction: column;
  overflow: overlay;
  padding: $spacing-vertical;
  position: absolute;
  top: var(--header-height);
  bottom: 0;
  left: 4px;
  right: 4px;
  main {
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
  }
  main.main--single-column {
    width: $width-page-constrained;
  }

  main.main--no-margin {
    margin-left: 0;
    margin-right: 0;
  }
}

.reloading {
  &:before {
    $width: 30px;
    position: absolute;
    background: url('../../../static/img/busy.gif') no-repeat center center;
    width: $width;
    height: $spacing-vertical;
    content: '';
    left: 50%;
    margin-left: -1 / 2 * $width;
    display: inline-block;
  }
}

.icon-fixed-width {
  /* This borrowed is from a component of Font Awesome we're not using, maybe add it? */
  width: (18em / 14);
  text-align: center;
}

h2 {
  font-size: 1.75em;
}

h3 {
  font-size: 1.4em;
}

h4 {
  font-size: 1.2em;
}

h5 {
  font-size: 1.1em;
}
sup,
sub {
  vertical-align: baseline;
  position: relative;
}
sup {
  top: -0.4em;
}
sub {
  top: 0.4em;
}

code {
  font: 0.8em Consolas, 'Lucida Console', 'Source Sans', monospace;
  background-color: var(--color-bg-alt);
}

p {
  margin-bottom: 0.8em;
  &:last-child {
    margin-bottom: 0;
  }
}

.hidden {
  display: none;
}

.disabled {
  pointer-events: none;
  opacity: 0.5;
}

.truncated-text {
  //display: inline-block;
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
}

.busy-indicator {
  background: url('../../../static/img/busy.gif') no-repeat center center;
  display: inline-block;
  margin: -1em 0;
  min-width: 16px;
  min-height: 8px;
  vertical-align: middle;
  padding: 0 30px;
  &:last-child {
    padding-right: 2px;
  }
  &:first-child {
    padding-left: 2px;
  }
}

.help {
  font-size: 0.85em;
  color: var(--color-help);
}

.meta {
  font-size: 0.9em;
  color: var(--color-meta-light);
}

.empty {
  color: var(--color-meta-light);
  font-style: italic;
}

/*should be redone/moved*/
.file-list__header {
  .busy-indicator {
    float: left;
    margin-top: 12px;
  }
}

.sort-section {
  display: block;
  margin-bottom: $spacing-vertical * 2/3;

  text-align: right;
  line-height: 1;
  font-size: 0.85em;
  color: var(--color-help);
}

section.section-spaced {
  margin-bottom: $spacing-vertical;
}

.text-center {
  text-align: center;
}