mrgodhani/raven-reader

<template>
  <div class="subscribe-toolbar">
    <button
      ref="subscribefeed"
      v-b-modal.addfeed
      class="btn btn-subscribe mr-2"
    >
      <svg
        id="logo-image"
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 528.35 128.02"
      ><defs><linearGradient
        id="a"
        x1="60.36"
        y1="120.71"
        x2="60.36"
        gradientUnits="userSpaceOnUse"
      ><stop
        offset="0"
        stop-color="#ffd53f"
      /><stop
        offset=".06"
        stop-color="#eed64e"
      /><stop
        offset=".32"
        stop-color="#a6db8c"
      /><stop
        offset=".55"
        stop-color="#6ddebe"
      /><stop
        offset=".75"
        stop-color="#44e1e1"
      /><stop
        offset=".91"
        stop-color="#2be2f7"
      /><stop
        offset="1"
        stop-color="#22e3ff"
      /></linearGradient><linearGradient
        id="b"
        x1="65.93"
        y1="21.5"
        x2="70.75"
        y2="128.94"
        gradientUnits="userSpaceOnUse"
      ><stop
        offset=".06"
        stop-color="#566690"
      /><stop
        offset=".54"
        stop-color="#00293e"
      /><stop
        offset=".7"
        stop-color="#001723"
      /><stop
        offset=".89"
        stop-color="#000609"
      /><stop offset="1" /></linearGradient></defs><g data-name="Layer 2"><g data-name="Layer 1"><path
        id="logo-name"
        d="M170 75.32v42.76h-13.09V17.54h26.86q13.14 0 19.35 2.69a20.61 20.61 0 0 1 9.6 8.12 21.63 21.63 0 0 1 3.4 11.71 32.4 32.4 0 0 1-2.26 11.71 35.65 35.65 0 0 1-6.24 10.52 41.18 41.18 0 0 1-11.47 8.77l29.08 47h-15.59L183 75.32zm0-10h18.27a32.61 32.61 0 0 0 9.17-6.87 25.89 25.89 0 0 0 4.56-7.51 21.43 21.43 0 0 0 1.56-7.94 13.77 13.77 0 0 0-5.14-11.25q-5.14-4.18-18.66-4.19H170zM281.58 101.89a38.86 38.86 0 0 1-13.25 13.62q-7.74 4.58-14.22 4.58-9.08 0-16.3-7.84t-7.22-23.78a50.7 50.7 0 0 1 4.8-22.47 40.25 40.25 0 0 1 12.84-15.61q8-5.74 19.91-5.74 3.44 0 10.35.72c.69.08 1.72.19 3.1.32h12.09v51.1q0 13.1 2.79 21.26H283.9a110.53 110.53 0 0 1-2.32-16.16zm.05-14.41V56.41a47.39 47.39 0 0 0-11.94-1.69 23.54 23.54 0 0 0-18.59 8.63q-7.42 8.62-7.43 23.48 0 10.77 4.06 16.24t9.24 5.49q5.65 0 12.47-5.71a54.38 54.38 0 0 0 12.19-15.37zM336.24 118.08L304.8 45.72H318l24.84 57.33 25.25-57.33h12.1l-31.69 72.36zM448.6 113.27q-14.44 6.81-27.33 6.82a32.12 32.12 0 0 1-17.5-4.86 34.61 34.61 0 0 1-12.33-13.88A41.71 41.71 0 0 1 386.8 82a43.25 43.25 0 0 1 4.41-19 34 34 0 0 1 12.31-14.21 31.93 31.93 0 0 1 17.62-5.08q12.89 0 20.7 9.18t7.8 28.33v2.59h-49.88a30.11 30.11 0 0 0 3.14 13.77 22.46 22.46 0 0 0 8.26 9.35 22 22 0 0 0 11.66 3.12q11.65 0 25.78-7.8zm-48.13-38.46h36.08v-1.75q0-8.85-4.34-14.08a14.3 14.3 0 0 0-11.59-5.23A17.37 17.37 0 0 0 408 59.08q-5.39 5.33-7.53 15.73zM468 118.08V45.72h12v15.81a40.73 40.73 0 0 1 12.5-13.09 26.83 26.83 0 0 1 14.64-4.73 21.06 21.06 0 0 1 11.66 3.4 18.18 18.18 0 0 1 7.44 8.89q2.1 5.5 2.11 21.64v40.42H516.3V76.17c0-7-.34-11.54-1-13.77a10.81 10.81 0 0 0-3.69-5.47 9.18 9.18 0 0 0-5.86-2.14q-6.35 0-13.64 6a48.3 48.3 0 0 0-12 15.1v42.17z"
      /><circle
        cx="60.36"
        cy="60.36"
        r="60.36"
        fill="url(#a)"
      /><path
        d="M101.15 56.88C80.79 21.38 64.69 18.46 52.94 24c-5.74 2.71-3.34 5.2-11.52 3.41-7.28-1.59-10.67-2.13-17.07.85s-9 6.83-9 8.54 1.71-2.56 6.4-3 11.1 0 16.22 3.84 5.54 5.12 5.54 6.83-6.68-.76-13.22.85c-5.78 1.42-10.24 3.41-10.67 5.12s11.63.44 16.64.43c2.38.08 4.34-.67 6 2.56 1.72 3.4 2.13 6 4.27 6.82s2.56-1.7 5.12 3.42 3.41 8.1.42 15.78-4.68 12.84-3.4 11.55c1-1 3.31-1.24 4.46-2.73-.32 2.74 0 7.78 3.65 13.4 6.4 9.81 15.76 9 29 12.39 20.61 5.19 30.87 5.49 35.19 12.53.85 1.39 1.39 2.61.48-.72-4.24-15.51-7.81-47.22-20.3-68.99z"
        fill="url(#b)"
      /><circle
        cx="55.37"
        cy="31.32"
        r="2.43"
        fill="#fff"
      /></g></g></svg>
      <div>
        <feather-icon name="plus" /> {{ $t('Add') }}
      </div>
    </button>
    <subscribe-modal />
  </div>
</template>
<style lang="scss">
.subscribe-toolbar {
  display: flex;
  height: 50px;
  border-bottom: 1px solid #e3e3e3;
}

#logo-name {
  fill: var(--text-color);
}

.btn-subscribe {
  border-radius: 0;
  user-select: none;
  line-height: 41px;
  cursor: pointer;
  position: relative;
  width: 100%;
  text-align: left !important;
  padding: 0 0 0 16px;
  background: transparent;
  color: #3399FF !important;
  font-weight: 700 !important;
  display: flex !important;
  justify-content: space-between;
  align-items: center;

  #logo-image {
    width: 100px;
    height: auto;
  }

  &:hover {
    color: #3399FF !important;
  }

  &:focus {
    outline: 0 !important;
    box-shadow: none !important;
  }

  .feather {
    margin-right: 5px;
  }
}
</style>