@spaced-out/ui-design-system/.storybook/manager-head.html

Sense UI components library

<!--
  Override the default favicon used in the Storybook in the browser tab.
-->
<meta
  name="viewport"
  content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
/>
<!-- Fetch fontawesome from the cdn -->
<link
  rel="icon"
  sizes="any"
  href="https://cdn.sensehq.com/genesis/hashed/static/images/favicon.ico?"
/>

<style>
  @font-face {
    font-family: 'Centra No 2';
    src: url('fonts/CentraNo2-Book.woff2') format('woff2'),
      url('fonts/CentraNo2-Book.woff') format('woff');
    font-weight: 300 400;
    font-style: normal;
    font-display: auto;
  }

  @font-face {
    font-family: 'Centra No 2';
    src: url('fonts/CentraNo2-BookItalic.woff2') format('woff2'),
      url('fonts/CentraNo2-BookItalic.woff') format('woff');
    font-weight: 300 400;
    font-style: italic;
    font-display: auto;
  }

  @font-face {
    font-family: 'Centra No 2';
    src: url('fonts/CentraNo2-Medium.woff2') format('woff2'),
      url('fonts/CentraNo2-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: auto;
  }
  body {
    /* This will target all of the children */
    font-family: 'Centra No 2' !important;
    background: #17172a;
  }

  .sidebar-container {
    background: #17172a !important;
  }

  .sidebar-item {
    cursor: pointer;
    color: #efebfa !important;
  }

  .search-result-item--label {
    color: #efebfa !important;
  }

  .search-field input {
    border-color: #efebfa !important;
  }

  #root > div:first-child {
    background: #17172a;
  }

  .sidebar-item svg {
    color: #b4a2e8;
  }

  .sidebar-item svg path {
    fill: #f4f4f4;
  }

  .search-field {
    background-color: #f4f4f4;
  }

  .sidebar-subheading {
    color: #f4f4f4 !important;
  }

  .sidebar-subheading svg path {
    fill: #f4f4f4;
  }

  button[title='Tag filters'] {
    display: none;
  }

  #storybook-explorer-searchfield + code + div {
    /* Filter button */
    display: none;
  }

  .search-field + div {
    /* add story ui button immediately following the search bar */
    display: none;
  }

  .sidebar-item:hover,
  .sidebar-item:focus {
    background: #1f1f36 !important;
  }

  .sidebar-item > a,
  .sidebar-item > button {
    color: #d3d2e0 !important;
  }

  .sidebar-item:hover > a,
  .sidebar-item:hover > button {
    color: #fff !important;
  }

  .sidebar-item[data-selected='true'] {
    background: #5c34cd !important;
  }

  .sidebar-item[data-selected='true'] > a,
  .sidebar-item[data-selected='true'] > button {
    color: #fff !important;
  }

  div#sidebar-bottom-wrapper {
    display: none;
  }

  .search-field + button {
    display: none;
  }

  .sidebar-item button {
    box-shadow: none !important;
    background: inherit !important;
  }

  .sidebar-item button:hover {
    box-shadow: none !important;
    background: inherit !important;
  }

  section {
    background: #fff;
  }
</style>