/** * All of the CSS for your public-facing functionality should be * included in this file. */ /** * Environment for all styles (variables, additions, etc). */ /*--------------------------------------------------------------*/ /*--------------------------------------------------------------*/ .pk-instagram-feed { --pk-instagram-a-color: inherit; --pk-instagram-info-color: #000000; --pk-instagram-name-a-color: inherit; --pk-instagram-number-color: #000000; --pk-instagram-data-color: rgba(255, 255, 255, 0.9); --pk-instagram-link-opacity: rgba(0, 0, 0, 0.5); --pk-instagram-name-font-size: 0.875rem; --pk-instagram-counters-font-size: 80%; --pk-instagram-number-font-size: 0.875rem; --pk-instagram-number-font-weight: bold; --pk-instagram-meta-font-size: 14px; } /*--------------------------------------------------------------*/ .pk-instagram-header { margin-bottom: 1.5rem; } .pk-instagram-container { display: flex; align-items: center; } .pk-avatar-link { display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: none; margin-right: 1rem; flex: 0 0 50px; width: 50px; height: 50px; } .pk-instagram-avatar { border-radius: 50%; width: 50px; height: 50px; } .pk-instagram-info a { color: var(--pk-instagram-a-color); } .pk-instagram-username { color: var(--pk-instagram-info-color); margin-top: 0; margin-bottom: 0; word-break: break-all; } .pk-instagram-name { font-size: var(--pk-instagram-name-font-size); word-break: break-all; } .pk-instagram-name a { color: var(--pk-instagram-name-a-color); } .pk-instagram-counters { display: flex; margin-top: 1rem; font-size: var(--pk-instagram-counters-font-size); } .pk-instagram-counters .counter + .counter { margin-left: 0.5rem; } .pk-instagram-counters .number { color: var(--pk-instagram-number-color); font-size: var(--pk-instagram-number-font-size); font-weight: var(--pk-instagram-number-font-weight); } .pk-instagram-footer { display: flex; justify-content: center; margin-top: 1rem; } .pk-instagram-footer .pk-instagram-btn { display: block; width: 100%; } .pk-instagram-items { display: flex; flex-wrap: wrap; } .pk-instagram-item { display: block; position: relative; } .pk-instagram-item:after { position: relative; padding-bottom: 100%; display: block; height: 0; z-index: 0; content: ''; } .pk-instagram-link img { display: block; width: 100%; height: 100%; transition: 0.25s; -o-object-fit: cover; object-fit: cover; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .pk-instagram-link { position: absolute; display: block; border: none; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; box-shadow: none; } .pk-instagram-link:before { background: var(--pk-instagram-link-opacity); position: absolute; width: 100%; height: 100%; top: 0; left: 0; opacity: 0; content: ''; transition: 0.25s; z-index: 2; } .pk-instagram-link:hover { box-shadow: none; } .pk-instagram-link:hover:before { opacity: 1; } .pk-instagram-link:hover img { transform: scale(1.1); } .pk-instagram-data { position: absolute; display: flex; align-items: center; justify-content: center; top: 0; left: 0; width: 100%; height: 100%; color: var(--pk-instagram-data-color); z-index: 3; opacity: 0; transition: 0.25s; } .pk-instagram-link:hover .pk-instagram-data { opacity: 1; } .pk-instagram-meta { display: flex; } .pk-instagram-meta .pk-meta { display: flex; align-items: baseline; font-size: var(--pk-instagram-meta-font-size); margin-left: 10px; } .pk-instagram-meta .pk-meta i { position: relative; margin-right: 5px; top: 1px; } .pk-instagram-meta .pk-meta:first-child { margin-left: 0; } .widget .pk-instagram-meta { flex-direction: column; align-items: center; } .widget .pk-instagram-meta .pk-meta { margin: 0; } .pk-instagram-columns-1 .pk-instagram-item { flex: 0 0 100%; } .pk-instagram-columns-2 .pk-instagram-item { flex: 0 0 50%; } .pk-instagram-columns-3 .pk-instagram-item { flex: 0 0 33.3333333333%; } .pk-instagram-columns-4 .pk-instagram-item { flex: 0 0 25%; } .pk-instagram-columns-5 .pk-instagram-item { flex: 0 0 20%; } .pk-instagram-columns-6 .pk-instagram-item { flex: 0 0 16.6666666667%; } .pk-instagram-columns-7 .pk-instagram-item { flex: 0 0 14.2857142857%; } .pk-instagram-size-auto .pk-instagram-items { margin-left: -5px; margin-right: -5px; } .pk-instagram-size-auto .pk-instagram-items .pk-instagram-item { margin: 5px; } .pk-instagram-size-auto.pk-instagram-columns-1 .pk-instagram-item { flex: 0 0 calc(100% / 1 - 10px); } .pk-instagram-size-auto.pk-instagram-columns-2 .pk-instagram-item { flex: 0 0 calc(100% / 2 - 10px); } .pk-instagram-size-auto.pk-instagram-columns-3 .pk-instagram-item { flex: 0 0 calc(100% / 3 - 10px); } @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .pk-instagram-size-auto .pk-instagram-items { margin: 0; } .pk-instagram-size-auto .pk-instagram-items .pk-instagram-item { margin: 0; } .pk-instagram-size-auto.pk-instagram-columns-1 .pk-instagram-item { flex: 0 0 100%; } .pk-instagram-size-auto.pk-instagram-columns-2 .pk-instagram-item { flex: 0 0 50%; } .pk-instagram-size-auto.pk-instagram-columns-3 .pk-instagram-item { flex: 0 0 33.3333333333%; } }