Rounded Asset page links

Rounded Asset page links

Install
Huxtab
5th Feb, 2023
13 installations 2 likes

Adjusts the "Assets" tab on entities to give a more refined look with rounded edges and smooth color gradient.

You can change the gradient by looking up a "CSS Gradient" Generator and adjusting the line that has the lines below

  background: rgb(232,232,232);
  background: linear-gradient(90deg, rgba(0,0,0,0.5) 0%, rgba(1,21,25,1) 50%, rgba(0,0,0,0.5004202364539565) 100%);

Latest version 1.1

Released 2 years ago on 5th Feb, 2023

Fixed for smaller screens and mobile and adjusted the grid to a list instead for better viewing.

CSS rules

@media(min-width:992px) {
  .entity-main-block .entity-assets .asset-link .child {
    background-color: transparent;
  }
  .entity-main-block .entity-assets .asset-file .child {
    border-radius: 25px;
    padding: 20px;
  }
  .entity-main-block .entity-assets .asset-link {
    background: rgb(232,232,232);
    background: linear-gradient(90deg, rgba(0,0,0,0.5) 0%, rgba(1,21,25,1) 50%, rgba(0,0,0,0.5004202364539565) 100%);
    border-radius: 25px;
    padding: 20px;
    width: calc(30vw - (30vw - 100%));
    height: 16.3vh; 
  }
  .entity-main-block .entity-assets .asset-file {
    background: rgb(232,232,232);
    background: linear-gradient(90deg, rgba(0,0,0,0.5) 0%, rgba(1,21,25,1) 50%, rgba(0,0,0,0.5004202364539565) 100%);
    border-radius: 25px;
    padding: 20px;
    width: calc(30vw - (30vw - 100%));
    height: 16.3vh;
  }
}
@media(max-width:991px) {
  
  .entity-assets .grid {
    display: initial;
  }
  .entity-assets .asset-link .child {
    background-color: transparent;
    border-radius: 25px;
    padding: 20px;
    text-align: center;
  }
  .entity-assets .asset-link .child.text {
    width: 100%;
  }
  
  .entity-main-block .entity-assets .asset-link {
    background: rgb(232,232,232);
    background: linear-gradient(90deg, rgba(0,0,0,0.5) 0%, rgba(1,21,25,1) 50%, rgba(0,0,0,0.5004202364539565) 100%);
    border-radius: 25px;
    padding: 20px;
    height: 16.3vh; 
  }
  .entity-main-block .entity-assets .asset-file {
    background: rgb(232,232,232);
    background: linear-gradient(90deg, rgba(0,0,0,0.5) 0%, rgba(1,21,25,1) 50%, rgba(0,0,0,0.5004202364539565) 100%);
    border-radius: 25px;
    padding: 20px;
    height: 16.3vh; 
  }
  .entity-assets .entity-asset .icon i {
    line-height: 1;
  }
  .entity-assets .entity-asset .icon {
    border-radius: 25px;
    float: left;
  }
}
 Install

User comments & reviews