CSS
/* GUTENBERG FILES: ONE */
.wp-block-file:not(.wp-element-button) {
font-size: inherit;
margin:1em 0;
}
a[href$=".pdf"],
a[href$=".doc"],
a[href$=".docx"],
a[href$=".xls"],
a[href$=".xlsx"],
a[href$=".ppt"],
a[href$=".pptx"] {
border-radius:8px;
border:1px solid var(--bg-light);
display:flex;
margin:3px 0px 3px 50px;
color:var(--base);
transition:all 0.5s ease-in-out;
background-color: var(--bg-ultra-light);
text-decoration:none;
align-items: center;
font-weight:400;
text-transform: none;
line-height: 1.7em;
width:100%;
font-size:var(--text-m);
max-width: calc(100% - 50px);
}
.c-accordion__content a[href$=".pdf"],
.c-accordion__content a[href$=".doc"],
.c-accordion__content a[href$=".docx"],
.c-accordion__content a[href$=".xls"],
.c-accordion__content a[href$=".xlsx"],
.c-accordion__content a[href$=".ppt"],
.c-accordion__content a[href$=".pptx"] {
background-color:var(--white);
}
a[href$=".pdf"]:hover {
background-color:#d33f32;
color:#FFF!important;
border:1px solid rgba(0,0,0,0.3);
}
a[href$=".doc"]:hover,
a[href$=".docx"]:hover
{
background-color:#0263d1;
color:#FFF!important;
border:1px solid rgba(0,0,0,0.3);
}
a[href$=".xls"]:hover,
a[href$=".xlsx"]:hover {
background-color:#00733b;
color:#FFF!important;
border:1px solid rgba(0,0,0,0.3);
}
a[href$=".ppt"]:hover,
a[href$=".pptx"]:hover {
background-color:#e03303;
color:#FFF!important;
border:1px solid rgba(0,0,0,0.3);
}
a[href$=".pdf"]:before,
a[href$=".doc"]:before,
a[href$=".docx"]:before,
a[href$=".xls"]:before,
a[href$=".xlsx"]:before,
a[href$=".ppt"]:before,
a[href$=".pptx"]:before {
display: inline-flex;
content: ' ';
background-size: contain;
min-height: 50px;
width: 65px;
background-repeat:no-repeat;
margin-left:-50px;
}
a[href$=".pdf"]:before {
background-image: url('/wp-content/themes/bricks-child/img/pdf.svg');
}
a[href$=".doc"]:before,
a[href$=".docx"]:before {
background-image: url('/wp-content/themes/bricks-child/img/word.svg');
}
a[href$=".xls"]:before,
a[href$=".xlsx"]:before {
background-image: url('/wp-content/themes/bricks-child/img/excel.svg');
}
a[href$=".ppt"]:before,
a[href$=".pptx"]:before {
background-image: url('/wp-content/themes/bricks-child/img/powerpoint.svg');
}Notes
Images can be found under /wp-content/themes/bricks-child/img/