Code snippets: File cards

Change the border-radius of a file card

.OcuDarcula .card__wrapper,
.OcuLight .card__wrapper {
  border-radius: 0px;
}

Change a corner of a file card

.OcuDarcula .card__wrapper,
.OcuLight .card__wrapper {
  border-top-left-radius:     5px;
  border-top-right-radius:    10px;
  border-bottom-right-radius: 0px;
  border-bottom-left-radius:  5px;
}

Change the background color of a file card

.OcuDarcula .card__wrapper,
.OcuLight .card__wrapper {
  background: red;
}

Remove the title of a file card

.card .card__header__title {
  display: none;
}

Remove the line under the title of a file card

.card .card__body__tabs__title {
  border: none;
}

Remove the tabs when there’s only one tab present

.card__body__tabs__title:first-child:nth-last-child(1) {
    display: none;
}

Change the font of the body text

/* create a font-family */
@font-face {
    font-family: "myCustomFont";
    src: url('url-to-font.otf');
}

.card__body__content__container__text  {
  font-family: "myCustomFont";
  font-size: 42px;
  color: red;
}

Change the font of the title

/* create a font-family */
@font-face {
    font-family: "myCustomFont";
    src: url('url-to-font.otf');
}

.card .card__wrapper .card__header .card__header__title {
  font-family: "myCustomFont";
  font-size: 42px;
  color: red;
}

Add styling to a specific file card based on its ID
```
.card--4 {
  // add styling here
}
```

Enlarging an asset to half the size of a file card (TEMPLATE)

.OcuDarcula .page.page--dl .dl__card,
.OcuLight .page.page--dl .dl__card {
    background: rgba(10, 25, 64, 0.36);
}
.OcuDarcula .card .card__wrapper,
.OcuLight .card .card__wrapper {
    width: 87%;
    height: 82.4%;
    border-radius: 0;
    padding: 1.5% 3%;
}
.card .card__body {
    height: 82%;
}
.card__close {
    z-index: 2;
}
.card .card__wrapper .card__header {
    position: absolute;
    width: 45%;
}
.card .card__wrapper .card__header .card__header__title {
    text-align: left;
}
.card .card__header__sub {
    text-align: left;
}

.card .card__wrapper .card__body__tabs {
    position: absolute;
    width: 45%;
    top: 20%;
}
.card__wrapper .card__body__tabs .card__body__tabs {
    border-bottom: none;
}
.card__wrapper .card__body__content {
    width: 100%;
    height: 100%;
    margin-top: 12%;
    padding: 4% 0;
}

.card .card__body__content__container {
    margin: 1% 0;
}
.card__wrapper .card__body__content .card__body__content__container__text {
    width: 96%;
    font-size: 1em;
}
.card__wrapper .card__body__content .card__body__content__media {
    position: absolute;
    top: 0;
    left: initial;
    right: 0;
    width: 50%;
    transform: none;
    background: lightgray;
    margin: 0 0;
}
.card__body__content__media .media .media__element{
    object-fit:cover;
}

.card__body__content__media .media__enlarge.button {
    left: 2%;
    right: initial;
}

Make asset of a file card full screen (template)

.dl__card {
    z-index: 10;
}
.OcuDarcula .page.page--im .im__card,
.OcuLight .page.page--im .im__card,
.OcuDarcula .page.page--dl .dl__card,
.OcuLight .page.page--dl .dl__card {
    background: transparent;
}
.OcuDarcula .card .card__wrapper,
.OcuLight .card .card__wrapper {
    width: 100%;
    height: 100%;
    border-radius: 0;
    padding: 1.5% 10px;
    background: rgb(246, 246, 246);
    
}
.card .card__wrapper .card__header {
    position: relative;
    left: 51%;
    width: 45%;
    height: 10%;
    max-height: 10%;
    overflow: hidden;
}
.card .card__wrapper .card__header .card__header__title {
    text-align: left;
    color: black;
    text-transform: uppercase;
}
.card .card__header__sub {
    text-align: left;
}
.card .card__body {
    height: 90%;
}
.card .card__close {
    z-index: 10;
    background: red;
    width: 70px;
    height: 70px;
    top: 10px;
    right: 10px;
    fill: black !important;
}
.card .card__close svg {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 34px;
    height: 34px;
    transform: translate(-50%, -50%);
}
.card .card__wrapper .card__body__tabs {
    position: relative;
    width: 45%;
    left: 51%;
}
.card__wrapper .card__body__tabs .card__body__tabs {
    border-bottom: none;
}
.card .card__body__tabs__title:first-child:nth-last-child(1) span {
    display: none;
}
.card__wrapper .card__body__content {
    width: 100%;
    height: 88%;
    padding: 0 0;
}

.card .card__body__content__container {
    margin: 1% 0;
    float: right;
    width: 48%;
}
.card__wrapper .card__body__content .card__body__content__container__text {
    width: 92%;
    font-size: 1em;
}
.card__wrapper .card__body__content .card__body__content__media {
    position: absolute;
    top: 0;
    left: 0;
    right: initial;
    width: 100%;
    transform: none;
    background: lightgray;
    margin: 0 0;
}
.card__body__content__media .media .media__element{
    object-fit:cover;
}

Make title in application visible on file card

.menu--left.menu--top {
    z-index: 3;
}

.menu--center.menu--top {
    z-index: 3;
}

.menu--right.menu--top {
    z-index: 3;
}

Change the color of the arrows in the asset swiper:
Copy the text between the quotes and change fill%3D'%23000000' to fill%3D'%230082B4'
The %23 is replacing the # and the other numbers are the same as your hex code: #0082B4 = %230082B4

.application--4402 .swiper-button-next {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%230082B4'%2F%3E%3C%2Fsvg%3E") !important;
}

.application--4402 .swiper-button-prev {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%230082B4'%2F%3E%3C%2Fsvg%3E") !important;
}

QR Codes

When you add a QR code to a File Card it is possible to style it the way you want.

Default it will use the Accent Color from your Theme.

Use these snippets to change the color of the background and the qr code blocks.

// background
.card_footer figure svg rect {
  fill: red;
}

// qr blocks 
.card_footer figure svg path {
  fill: white;
}