remoteview/public/styles/logo.css

Remote isolated browser platform by Dosyago

/** Comments **/
  /** 
   *
   * (c) 2019 The Dosyago Corporation and ViewFinder
   *
   * Unless otherwise noted all styles are placed in document order
   * In sections arranged by different aspects, like layout, behaviour, 
   * components and elements.
  **/

@import url(/styles/theme.css);

/** logo styles **/
  aside.logo {
    position: relative;
    margin: 0 auto;
    padding: 0.5em;
    font-family: system-ui, Helvetica, Arial !important;
  }

  aside.logo * {
    font-family: inherit;
    line-height: 1;
  }

  aside.logo, aside.logo span {
    display: inline-block;
  }

  aside.logo h1 * {
    margin: 0;
  }

  aside.logo h1 > span {
    max-height: 1rem;
    padding: 0 0.25em;
    text-transform: uppercase;
  }

  aside.logo .browser {
    position: relative;
    border-top-right-radius: 1em;
    border-top: 0.25em solid;
    border-right: 0.25em solid;
  }

  aside.logo .gap {
    position: relative;
    border-top-left-radius: 1em;
    border-top: 0.25em solid;
    border-left: 0.25em solid;
    margin-left: 0.15em;
  }

  /* the orange dots bridging the gap */
    /* disabled by 'no' prefix */
    no aside.logo .browser::after {
      content: " ";
      position: absolute;
      display: inline-block;
      z-index: 4;
      right: -1.43em;
      width: 1.7em;
      height: 1px;
      top: 0.6em;
      height: 1px;
      border-top: 3px dotted var(--warm-c1);
      background: transparent;
    }

  /* the orange dots under the words */
    /* disabled by 'no' prefix */
    no aside.logo span > span {
      position: relative;
      top: -0.1em;
      border-bottom: 5px dotted var(--warm-c1);
    }

  /** the visual representation of famous gap :) **/
    aside.logo .gap::before {
      display: inline-block;
      position: absolute;
      z-index: 3;
      top: 0.58em;
      left: -0.92em;
      width: 0.44em;
      height: 0.5em;
      border-bottom-left-radius: 1em;
      border-bottom-right-radius: 1em;
      border-bottom: 0.25em solid;
      border-left: 0.25em solid;
      border-right: 0.25em solid;
      background: transparent;
      content: " ";
    }

  aside.logo .inner {
    position: relative;
    top: 0.15em;
  }