FileMaster

Edit File: whats-new.less

#am-whats-new {
  background: #FFFFFF;

.am-body {
    padding-bottom: 50px;
  }

.am-whats-new {

&-loader {
      width: 100%;
      min-height: 396px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

&-btn {
      display: flex;
      padding: 8px 24px;
      justify-content: center;
      align-items: center;
      gap: 10px;
      border-radius: 9px;
      border: 1px solid #1246D6;
      background: #265CF2;
      color: #FFFFFF;
      width: fit-content;
      text-decoration: none;
      margin-top: 18px;

&:hover {

}
    }

&-section {
      max-width: 1170px;
      margin: 0 auto;
    }

&-welcome {
      padding: 50px 40px;
      display: flex;
      justify-content: space-between;

&-left, &-right {
        width: 45%;
      }

&-left {
        display: flex;
        flex-direction: column;
        justify-content: center;
      }

&-right {
        img {
          width: 100%;
        }
      }

&-title {
        font-size: 42px;
        line-height: 52px;
        font-weight: 500;
        margin-bottom: 24px;
      }

&-subtitle {
        font-size: 18px;
        line-height: 28px;
        font-weight: 400;
        margin-bottom: 24px;
      }

@media @less-then-medium {
        flex-direction: column;

&-right, &-left {
          width: auto;
          justify-content: center;
          display: flex;
          img {
            width: auto;
          }
        }

}

@media @less-then-small {

&-right {
          margin-top: 40px;
          img {
            width: 100%;
          }
        }

}

@media @less-then-xsmall {
        padding: 50px 10px;
        margin: 0 10px;
      }

}

&-blog {
      gap: 24px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      padding: 50px 40px;

&-left {
        flex: 1 0 0;
        padding: 20px;
        border-radius: 12px;
        background: #FFF;
        box-shadow: 0px 0px 32px 0px rgba(0, 0, 0, 0.07);
      }

&-right {
        width: 31%;
        justify-content: space-between;
        display: flex;
        flex-direction: column;
        gap: 24px;
      }

&-title {
        padding: 0 16px 16px;

img {
          margin-left: 16px;
        }
      }

&-title-text {
        align-items: center;
        display: flex;
        font-size: 24px;
        font-style: normal;
        font-weight: 600;
        line-height: 32px;
      }

&-subtitle-text {
        color: #33434C;
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 20px;
      }

&-list {
        min-height: 360px;

&-item {
          padding: 16px;
          border-bottom: 1px solid #E0E2E4;
          display: flex;
          justify-content: space-between;

p {
            margin: 0;
            font-size: 18px;
            font-style: normal;
            font-weight: 500;
            line-height: 28px;
          }

a {
            align-items: center;
            display: flex;
          }

img {
            width: 24px;
            height: 24px;
          }

&:last-child {
            border: none;
          }
        }
      }

&-subscribe {
        margin-top: 24px;
        display: flex;
        padding: 24px;
        align-items: center;
        gap: 16px;
        align-self: stretch;
        border-radius: 8px;
        background: var(--blue-300, #F4F7FE);

&-left {
          width: 73%;
        }

&-right {
          width: 24%;

img {
            width: 152px;
            height: 152px;
          }
        }

&-title {
          margin-bottom: 16px;
          color: #1A2C37;
          font-size: 24px;
          font-style: normal;
          font-weight: 600;
          line-height: 32px;
        }

&-subtitle {
          margin-bottom: 24px;
          max-width: 410px;
        }

&-form {
          max-width: 460px;
          height: 40px;
          display: flex;
          gap: 16px;

input {
            width: 312px;
            height: 40px;
          }

.am-subscribe-btn {
            cursor: pointer;

@media @less-then-small {
              width: 100%;
            }
          }

@media @less-then-small {
            height: fit-content;
            display: flex;
            flex-direction: column;

input {
              width: 100%;
            }
          }
        }

@media @less-then-small {
          flex-direction: column-reverse;
          align-items: center;

&-left, &-right {
            width: auto;
          }
        }
      }

&-box {
        max-width: 348px;
        height: fit-content;
        min-height: 326px;
        display: flex;
        padding: 20px;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 24px;
        border-radius: 12px;
        background: #FFFFFF;
        box-shadow: 0px 0px 32px 0px rgba(0, 0, 0, 0.07);
      }

&-success-stories {
        background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzQ4IiBoZWlnaHQ9IjMyNiIgdmlld0JveD0iMCAwIDM0OCAzMjYiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIHN0eWxlPSJtaXgtYmxlbmQtbW9kZTptdWx0aXBseSIgb3BhY2l0eT0iMC41IiBkPSJNNjgyLjQxMyAxNC45NDg5QzY4Mi40MTMgMTQuOTQ4OSAyNDkuMjM0IC0xMy42Nzg3IDY0Ljg3OTUgMTQ3LjQ2Qy0xMTkuNDc1IDMwOC41OTggMTA1LjQ2OCA1MjcuODkzIDI2Ny43ODMgNTk2LjQ4MkM0MzAuMDk4IDY2NS4wNzEgNjgyLjQxMyAxNC45NDg5IDY4Mi40MTMgMTQuOTQ4OVoiIGZpbGw9InVybCgjcGFpbnQwX2xpbmVhcl8xMTA2XzE4MTE3KSIvPgo8cGF0aCBzdHlsZT0ibWl4LWJsZW5kLW1vZGU6bXVsdGlwbHkiIG9wYWNpdHk9IjAuNSIgZD0iTTE2NS4yNTYgMzI1LjY2MUMxNzMuMTc0IDI5My4xMTEgMTc4Ljc0NCAxNjkuNDg1IDEyOC44MzkgMTI0LjMxMkM3OC45MzM0IDc5LjEzOTQgNTEuOTE2IDczLjcxMTEgMjIuMzM4OCA3My43MTExQy03LjIzODMyIDczLjcxMTEgLTY5LjQxMDEgNzcuMzY0NyAtMTQ3Ljg3NyAxODMuOTlDLTI0NC45NjYgMzE1LjkxMiAtMTc0LjA0OCAzOTEuOTQxIC0xMjQuNjYzIDQ0My45NzZDLTc1LjI3ODUgNDk2LjAxMSA5NC44Mzg5IDQwNi4yMDggOTQuODM4OSA0MDYuMjA4Qzk0LjgzODkgNDA2LjIwOCAxNTcuMzM5IDM1OC4yMTEgMTY1LjI1NiAzMjUuNjYxWiIgZmlsbD0idXJsKCNwYWludDFfbGluZWFyXzExMDZfMTgxMTcpIi8+CjxkZWZzPgo8bGluZWFyR3JhZGllbnQgaWQ9InBhaW50MF9saW5lYXJfMTEwNl8xODExNyIgeDE9IjE3Ni43NjMiIHkxPSIzNC43MTM4IiB4Mj0iNTM5LjE5NiIgeTI9IjM5Ny4xNDciIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj4KPHN0b3Agb2Zmc2V0PSIwLjEzIiBzdG9wLWNvbG9yPSJ3aGl0ZSIvPgo8c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiM3Q0ZGRkYiLz4KPC9saW5lYXJHcmFkaWVudD4KPGxpbmVhckdyYWRpZW50IGlkPSJwYWludDFfbGluZWFyXzExMDZfMTgxMTciIHgxPSIxMzQuMTM5IiB5MT0iMTI4LjU5IiB4Mj0iLTczLjg2MDkiIHkyPSIzNzkuMDkiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj4KPHN0b3Agb2Zmc2V0PSIwLjEzIiBzdG9wLWNvbG9yPSJ3aGl0ZSIvPgo8c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiNFMUZGRDIiLz4KPC9saW5lYXJHcmFkaWVudD4KPC9kZWZzPgo8L3N2Zz4K');
        background-size: cover;

&-title {
          text-align: center;
          max-width: 308px;
        }

img {
          height: 60px;
          width: 120px;
        }
      }

&-support {
        background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzQ4IiBoZWlnaHQ9IjMyNiIgdmlld0JveD0iMCAwIDM0OCAzMjYiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIHN0eWxlPSJtaXgtYmxlbmQtbW9kZTptdWx0aXBseSIgb3BhY2l0eT0iMC41IiBkPSJNNzAyLjAyIDY4LjAxMjlDNzAyLjAyIDY4LjAxMjkgMjY4Ljg0MSAzOS4zODU0IDg0LjQ4NjkgMjAwLjUyNEMtOTkuODY3MiAzNjEuNjYyIDEyNS4wNzUgNTgwLjk1NyAyODcuMzkgNjQ5LjU0NkM0NDkuNzA1IDcxOC4xMzUgNzAyLjAyIDY4LjAxMjkgNzAyLjAyIDY4LjAxMjlaIiBmaWxsPSJ1cmwoI3BhaW50MF9saW5lYXJfMTEwNl8xNzE2OSkiLz4KPHBhdGggc3R5bGU9Im1peC1ibGVuZC1tb2RlOm11bHRpcGx5IiBvcGFjaXR5PSIwLjUiIGQ9Ik0xODUuMjU1IDM3OC42NjFDMTkzLjE3MyAzNDYuMTExIDE5OC43NDMgMjIyLjQ4NSAxNDguODM4IDE3Ny4zMTJDOTguOTMyNSAxMzIuMTQgNzEuOTE1IDEyNi43MTEgNDIuMzM3OCAxMjYuNzExQzEyLjc2MDcgMTI2LjcxMSAtNDkuNDExMSAxMzAuMzY1IC0xMjcuODc4IDIzNi45OTFDLTIyNC45NjcgMzY4LjkxMiAtMTU0LjA0OSA0NDQuOTQxIC0xMDQuNjY0IDQ5Ni45NzZDLTU1LjI3OTUgNTQ5LjAxMSAxMTQuODM4IDQ1OS4yMDggMTE0LjgzOCA0NTkuMjA4QzExNC44MzggNDU5LjIwOCAxNzcuMzM4IDQxMS4yMTEgMTg1LjI1NSAzNzguNjYxWiIgZmlsbD0idXJsKCNwYWludDFfbGluZWFyXzExMDZfMTcxNjkpIi8+CjxkZWZzPgo8bGluZWFyR3JhZGllbnQgaWQ9InBhaW50MF9saW5lYXJfMTEwNl8xNzE2OSIgeDE9IjE5Ni4zNyIgeTE9Ijg3Ljc3NzgiIHgyPSI1NTguODA0IiB5Mj0iNDUwLjIxMiIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPgo8c3RvcCBvZmZzZXQ9IjAuMTMiIHN0b3AtY29sb3I9IndoaXRlIi8+CjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iI0JGN0NGRiIvPgo8L2xpbmVhckdyYWRpZW50Pgo8bGluZWFyR3JhZGllbnQgaWQ9InBhaW50MV9saW5lYXJfMTEwNl8xNzE2OSIgeDE9IjE1NC4xMzgiIHkxPSIxODEuNTkiIHgyPSItNTMuODYxOSIgeTI9IjQzMi4wOSIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPgo8c3RvcCBvZmZzZXQ9IjAuMTMiIHN0b3AtY29sb3I9IndoaXRlIi8+CjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iI0QyRDlGRiIvPgo8L2xpbmVhckdyYWRpZW50Pgo8L2RlZnM+Cjwvc3ZnPgo=');
        background-size: cover;
        flex: 1 0 0;

&-subtitle {
          text-align: center;
          max-width: 316px;
        }

img {
          height: auto;
          width: 246px;
        }

@media @less-then-small {
          min-height: unset;
        }
      }

@media @less-then-xlarge {

&-left {
          max-width: 63%;
        }
      }

@media @less-then-large {
        flex-direction: column;
        gap: 40px;

&-left {
          max-width: unset;
          width: auto;
        }

&-right {
          width: auto;
          flex-direction: row;
        }
      }

@media @less-then-small {

&-right {
          flex-direction: column;
          align-items: center;
        }

}

@media @less-then-xsmall {
        padding: 50px 10px;
        margin: 0 10px;
      }

}

&-changelog {
      gap: 24px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      padding: 50px 40px;

&-left {
        flex: 1 0 0;
        padding: 20px;
        border-radius: 12px;
        background: #FFF;
        box-shadow: 0px 0px 32px 0px rgba(0, 0, 0, 0.07);
        gap: 24px;
        flex-direction: column;
        display: flex;

img {
          max-width: 100%;
        }
      }

&-right {
        width: 31%;
        justify-content: space-between;
        display: flex;
        flex-direction: column;
        gap: 24px;
      }

&-version {
        &-title {
          color: #1D314B;
          font-size: 20px;
          font-style: normal;
          font-weight: 500;
          line-height: 28px;
        }
      }

&-list {
        &-title {
          background: #EAEFFE;
          border-radius: 6px;
          padding: 2px 4px 2px 4px;
        }

min-height: 396px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        align-self: stretch;

&-item {
          display: flex;
          align-items: flex-start;
          gap: 12px;
          align-self: stretch;

&-img-holder {
            width: 24px;
            height: 24px;

img {
              max-width: unset;
            }
          }
        }
      }

&-link {
        align-items: center;
        display: flex;
        color: #265CF2;
        font-size: 14px;
        font-style: normal;
        font-weight: 500;
        line-height: 22px;

img {
          margin-left: 8px;
          width: 24px;
          height: 24px;
        }
      }

@media @less-then-xlarge {
        margin: 0 auto;
      }

@media @less-then-medium {
        flex-direction: column;

&-right {
          width: auto;
        }

&-left {
          width: 100%;
          justify-content: center;
          display: flex;
        }
      }

@media @less-then-xsmall {
        padding: 50px 20px;
        margin: 0 20px;
      }

@media @less-then-large {
        flex-direction: column;
        gap: 40px;

&-left {
          width: auto;
        }

&-right {
          width: auto;
          flex-direction: row;
        }
      }

@media @less-then-small {

&-right {
          flex-direction: column;
          align-items: center;
        }

}

@media @less-then-xsmall {
        padding: 50px 10px;
        margin: 0 10px;
      }
    }

&-features {
      gap: 24px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      padding: 50px 40px;

&-left {
        flex: 1 0 0;
        padding: 20px 36px;
        border-radius: 12px;
        background: #FFF;
        box-shadow: 0px 0px 32px 0px rgba(0, 0, 0, 0.07);
        gap: 24px;
        flex-direction: column;
        display: flex;

img {
          max-width: 100%;
        }
      }

&-right {
        width: 31%;
        justify-content: space-between;
        display: flex;
        flex-direction: column;
        gap: 24px;
      }

&-list {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        align-self: stretch;
      }

&-item {
        display: flex;
        align-items: center;
        flex: calc(50% - 8px);
        background-color: #F4F7FE;
        padding: 12px;
        margin-bottom: 8px;
        border-radius: 8px;
        transition: background-color .3s ease-in-out;

&:nth-child(even) {
          margin-left: 8px;
        }

&:nth-child(odd) {
          margin-right: 8px;
        }

&:hover {
          background-color: #dbe6ff;
        }

img {
          width: 24px;
          height: 24px;
          flex: 0 0 auto;
        }

span {
          display: block;
          font-size: 14px;
          font-weight: 500;
          line-height: 1.42857;
          margin-left: 8px;
          color: #1A2C37;
        }

@media @less-then-small {
          flex: 100%;

&:nth-child(even) {
            margin-left: 0;
          }

&:nth-child(odd) {
            margin-right: 0;
          }
        }
      }

@media @less-then-xlarge {
        margin: 0 auto;
      }

@media @less-then-medium {
        flex-direction: column;

&-right {
          width: auto;
        }

&-left {
          width: 100%;
          justify-content: center;
          display: flex;
        }
      }

@media @less-then-xsmall {
        padding: 50px 20px;
        margin: 0 20px;
      }

@media @less-then-large {
        flex-direction: column;
        gap: 40px;

&-left {
          width: auto;
        }

&-right {
          width: auto;
          flex-direction: row;
        }
      }

@media @less-then-small {

&-right {
          flex-direction: column;
          align-items: center;
        }
      }

@media @less-then-xsmall {
        padding: 50px 10px;
        margin: 0 10px;

&-left {
          padding: 20px;
        }
      }
    }
  }
}

Back