File: /opt/wpsites/datainsightnow.com/wp-content/plugins/essential-blocks/blocks/openverse/src/style.scss
/**
* The following styles get applied both on the front of your site
* and in the editor.
*/
.eb-openverse-wrapper {
margin: 0 0 1em 0;
&.no-image {
border-radius: 0 !important;
border: none !important;
padding: 0 !important;
}
&.img-style-triangle .image-wrapper {
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
&.img-style-rhombus .image-wrapper {
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
&.img-style-octagon .image-wrapper {
clip-path: polygon(
30% 0%,
70% 0%,
100% 30%,
100% 70%,
70% 100%,
30% 100%,
0% 70%,
0% 30%
);
}
&.attribution-style-1 {
overflow: visible;
.image-attribution {
span {
display: block;
margin-bottom: 10px;
}
}
}
&.attribution-style-2 {
display: flex;
flex-direction: column;
&.top {
flex-direction: column-reverse;
}
}
.image-wrapper {
overflow: hidden;
position: relative;
}
img {
display: block;
width: 100%;
height: 100%;
max-width: 100%;
margin: 0 !important;
}
.image-attribution {
line-height: 1;
a {
color: inherit;
text-decoration: none;
}
.licensed-wrap {
text-transform: uppercase;
}
}
// Hover Effect
/* Zoom In #2 */
&.zoom-in {
img {
transform: scale(1);
}
.image-wrapper:hover img {
transform: scale(1.3);
}
}
&.zoom-out {
img {
transform: scale(1.5);
}
.image-wrapper:hover img {
transform: scale(1);
}
}
&.slide {
img {
margin-left: 30px !important;
transform: scale(1.3);
transition: 0.3s ease-in-out !important;
}
.image-wrapper:hover img {
margin-left: 0 !important;
}
}
&.blur {
img {
filter: blur(3px);
}
.image-wrapper:hover img {
filter: blur(0);
}
}
// .eb-advimg-link {
// position: absolute;
// left: 0;
// top: 0;
// width: 100%;
// height: 100%;
// z-index: 999;
// }
}
.search-key {
margin: 0 0 10px;
}
.editor-styles-wrapper .search-filter h4,
.search-filter h4 {
font-size: 16px;
line-height: 1.3;
font-weight: 600;
font-family: sans-serif;
}
.editor-styles-wrapper .filter-item,
.filter-item {
h5 {
font-size: 13px;
line-height: 1.3;
font-weight: 600;
margin: 10px 0;
font-family: sans-serif;
}
}
.filter-item-inner {
.form-check-label {
font-size: 13px;
line-height: 1.3;
font-weight: 400;
top: -2px;
position: relative;
svg {
width: 14px;
margin-right: 3px;
top: 2px;
position: relative;
&:last-child {
margin-right: 6px;
}
}
}
.form-check-input {
position: relative;
height: 18px;
width: 18px;
-ms-flex-negative: 0;
flex-shrink: 0;
appearance: none !important;
border-radius: 2px;
border-width: 1px;
// --tw-border-opacity: 1;
border-color: #8c8f94;
-webkit-margin-end: 0.75rem;
margin-inline-end: 0.75rem;
}
}
.loadmore-btn {
padding: 6px 12px;
background: #2673ff;
color: #fff;
outline: 1px solid #000 0;
text-decoration: none;
text-shadow: none;
white-space: nowrap;
align-items: center;
-webkit-appearance: none;
border: 0;
border-radius: 0;
box-sizing: border-box;
cursor: pointer;
font-family: inherit;
font-size: 16px;
font-weight: 500;
height: 45px;
width: 100%;
margin: 20px auto 0;
display: block;
transition: box-shadow 0.1s linear;
}
// search section
.openverse-search-section {
display: flex;
flex: auto;
flex-wrap: nowrap;
max-width: 100%;
}
.search-result-count {
position: absolute;
right: 126px;
font-size: 12px;
top: 29px;
color: #797979;
}
.openverse-search-input:focus {
box-shadow: inset 0px 0px 0 1px #2673ff !important;
}
.openverse-search-input {
background-image: url("data:image/svg+xml; base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0xNS44NTMgMTYuNTZjLTEuNjgzIDEuNTE3LTMuOTExIDIuNDQtNi4zNTMgMi40NC01LjI0MyAwLTkuNS00LjI1Ny05LjUtOS41czQuMjU3LTkuNSA5LjUtOS41IDkuNSA0LjI1NyA5LjUgOS41YzAgMi40NDItLjkyMyA0LjY3LTIuNDQgNi4zNTNsNy40NCA3LjQ0LS43MDcuNzA3LTcuNDQtNy40NHptLTYuMzUzLTE1LjU2YzQuNjkxIDAgOC41IDMuODA5IDguNSA4LjVzLTMuODA5IDguNS04LjUgOC41LTguNS0zLjgwOS04LjUtOC41IDMuODA5LTguNSA4LjUtOC41eiIvPjwvc3ZnPg==");
background-color: #fff;
background-size: 16px 16px;
background-position: left 10px center;
background-repeat: no-repeat;
padding: 10px 1em !important;
padding-left: 2em !important;
border: 1px solid #2673ff !important;
border-radius: 0 !important;
color: #000;
transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
-webkit-appearance: textfield;
outline: 2px solid transparent !important;
outline-offset: 2px !important;
font-family: sans-serif;
font-size: 100%;
line-height: 1.15;
margin: 0;
// width: 85%;
min-width: 170px;
flex-grow: 1;
height: 50px;
}
.search-section .openverse-search-input {
padding-right: 130px !important;
}
.openverse-search-btn {
// width: 15%;
min-width: 100px;
margin: 0 auto;
height: 50px;
display: block;
border-radius: 0;
background-color: #2673ff;
font-size: 13px;
padding: 6px 12px;
color: #fff;
outline: 2px solid transparent !important;
outline-offset: 2px !important;
text-decoration: none;
text-shadow: none;
white-space: nowrap;
align-items: center;
-webkit-appearance: none;
border: 0;
box-sizing: border-box;
cursor: pointer;
font-family: inherit;
font-size: 16px;
font-weight: 400;
text-decoration: none;
transition: box-shadow 0.1s linear;
}
@media all and (max-width: 767px) {
.eb-openverse-grid {
--size: calc(70vw / 4) !important;
}
.openverse-search-section {
display: block;
}
.openverse-search-input {
margin-bottom: 15px;
}
.openverse-search-input,
.openverse-search-btn {
width: 100%;
}
.openverse-modal__inner {
left: 0 !important;
width: 90% !important;
}
.search-result-section {
display: block !important;
}
.search-filter,
.search-result-count {
display: none;
}
.search-section {
.openverse-search-input,
.openverse-search-btn {
width: auto;
}
.openverse-search-input {
padding-right: 10px !important;
}
}
}
.api-info {
.openverse-input {
background-color: #fff;
background-size: 16px 16px;
background-position: left 10px center;
background-repeat: no-repeat;
padding: 10px 2em !important;
border: 1px solid #2673ff !important;
border-radius: 0 !important;
color: #000;
transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
-webkit-appearance: textfield;
outline: 2px solid transparent !important;
outline-offset: 2px !important;
font-family: sans-serif;
font-size: 100%;
line-height: 1.15;
margin: 0 0 10px 0;
width: 100%;
height: 50px;
}
.openverse-api-btn {
min-width: 150px;
margin: 0 auto;
height: 50px;
display: block;
border-radius: 0;
background-color: #2673ff;
font-size: 13px;
padding: 6px 12px;
color: #fff;
outline: 2px solid transparent !important;
outline-offset: 2px !important;
text-decoration: none;
text-shadow: none;
white-space: nowrap;
align-items: center;
-webkit-appearance: none;
border: 0;
box-sizing: border-box;
cursor: pointer;
font-family: inherit;
font-size: 16px;
font-weight: 400;
text-decoration: none;
transition: box-shadow 0.1s linear;
&:disabled {
background-color: #ccc;
}
}
}
.eb-alert {
padding: 0.5rem 0.7rem;
margin-bottom: 1rem;
border: 1px solid transparent;
// border-radius: 0.25rem;
&.eb-alert-success {
color: #0f5132;
background-color: #d1e7dd;
border-color: #badbcc;
font-size: 14px;
line-height: 1.2rem;
}
.eb-alert-warning {
color: #ff0000;
font-size: 12px;
line-height: 1.2rem;
font-weight: 400;
text-transform: capitalize;
display: inline-block;
margin-top: 5px;
}
}
.eb-alert-error {
font-size: 13px;
font-weight: 400;
text-transform: capitalize;
color: #ff0000;
display: block;
margin-bottom: 20px;
}
//
.eb-openverse-form-wrapper {
position: relative;
min-height: 150px;
&.loading-circle {
position: relative;
&::after {
content: "";
background-color: black;
opacity: 0.3;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: inherit;
}
&::before {
content: "";
background-image: url("./template-components/icons/loading.gif");
background-size: 40px 40px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 40px;
height: 40px;
}
}
}
.eb-openverse-no-data {
text-align: center;
p {
margin: 0 0 20px 0;
padding: 0;
font-size: 16px;
font-weight: 700;
text-transform: capitalize;
color: black;
display: block;
}
span {
font-size: 13px;
font-weight: 400;
text-transform: capitalize;
color: black;
display: block;
}
}