diff --git a/dist/css/app.css b/dist/css/app.css index d9c4c5b..814312d 100644 --- a/dist/css/app.css +++ b/dist/css/app.css @@ -1,131 +1 @@ -.sr-only { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: hidden; - clip: rect(0, 0, 0, 0); - white-space: nowrap; - border: 0; } - -.meta-MetaWindow .meta-spinner_embed, -.meta-MetaWindow .meta-spinner, -.meta-MetaWindow .meta-error { - display: none; - align-items: center; - justify-content: center; - z-index: 2; - text-align: center; } - -.meta-MetaWindow .meta-spinner_embed, -.meta-MetaWindow .meta-spinner { - font-size: 2rem; - color: #fff; - font-weight: bold; - text-transform: uppercase; - position: absolute; - left: 0; - right: 0; - top: 0; - bottom: 0; } - -.meta-MetaWindow .meta-spinner_embed { - display: flex; } - -.meta-MetaWindow-overlay { - background: rgba(96, 125, 139, 0.8); - display: none; - position: fixed; - left: 0; - right: 0; - top: 0; - bottom: 0; - align-items: center; - justify-content: center; } - .meta-MetaWindow-overlay__open { - display: flex; } - .meta-MetaWindow-overlay__loading .meta-spinner { - display: flex; } - .meta-MetaWindow-overlay__error .meta-content { - justify-content: center; } - .meta-MetaWindow-overlay__error .meta-error { - display: flex; } - -.meta-MetaWindow .meta-close { - font-size: 1.2rem; - color: #212121; - text-shadow: #fff 0 0 0.25em; - position: absolute; - top: 0; - right: 0; - padding: 0.5em 0.651em; - border: 0; - background: none; - z-index: 2; } - .meta-MetaWindow .meta-close:hover, .meta-MetaWindow .meta-close:focus { - color: #eceff1; - background: #2196f3; - text-shadow: none; } - -.meta-MetaWindow .meta-content { - position: relative; - width: 90%; - height: 90%; - display: flex; - flex-direction: column; } - -.meta-MetaWindow .meta-wrap { - max-height: 100%; - max-width: 100%; - width: 100%; - overflow: auto; } - .meta-MetaWindow .meta-wrap img { - max-width: 100%; - max-height: 100%; } - -.meta-MetaWindow__text .meta-close { - background: #fff; } - -.meta-MetaWindow__text .meta-content { - background: #fff; - color: #000; - padding: 1rem 1rem; - padding-right: 0; } - -.meta-MetaWindow__text .meta-wrap { - padding-right: 1rem; } - -.meta-MetaWindow__image .typography, -.meta-MetaWindow__image .meta-wrap, .meta-MetaWindow__video .typography, -.meta-MetaWindow__video .meta-wrap { - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - max-height: 100%; - max-width: 100%; - min-height: 100%; } - -.meta-MetaWindow__video:before, .meta-MetaWindow__embed:before { - content: ""; - display: block; - position: relative; - width: 100%; - padding-top: 56.25%; } - -.meta-MetaWindow__video a[rel='nofollow noreferrer noopener'], .meta-MetaWindow__embed a[rel='nofollow noreferrer noopener'] { - color: #fff; - font-size: 1.2rem; - font-weight: bold; } - .meta-MetaWindow__video a[rel='nofollow noreferrer noopener']:before, .meta-MetaWindow__embed a[rel='nofollow noreferrer noopener']:before { - content: 'Unable to load. Please follow the provided link: '; - display: block; } - -.meta-MetaWindow__video iframe, .meta-MetaWindow__embed iframe { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; } - +.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.meta-MetaWindow .meta-error,.meta-MetaWindow .meta-spinner,.meta-MetaWindow .meta-spinner_embed{display:none;align-items:center;justify-content:center;z-index:2;text-align:center}.meta-MetaWindow .meta-spinner,.meta-MetaWindow .meta-spinner_embed{font-size:2rem;color:#fff;font-weight:700;text-transform:uppercase;position:absolute;left:0;right:0;top:0;bottom:0}.meta-MetaWindow .meta-spinner_embed{display:flex}.meta-MetaWindow-overlay{background:rgba(96,125,139,.8);display:none;position:fixed;left:0;right:0;top:0;bottom:0;align-items:center;justify-content:center}.meta-MetaWindow-overlay__loading .meta-spinner,.meta-MetaWindow-overlay__open{display:flex}.meta-MetaWindow-overlay__error .meta-content{justify-content:center}.meta-MetaWindow-overlay__error .meta-error{display:flex}.meta-MetaWindow .meta-close{font-size:1.2rem;color:#212121;text-shadow:#fff 0 0 .25em;position:absolute;top:0;right:0;padding:.5em .651em;border:0;background:none;z-index:2}.meta-MetaWindow .meta-close:focus,.meta-MetaWindow .meta-close:hover{color:#eceff1;background:#2196f3;text-shadow:none}.meta-MetaWindow .meta-content{position:relative;width:90%;height:90%;display:flex;flex-direction:column}.meta-MetaWindow .meta-wrap{width:100%;overflow:auto}.meta-MetaWindow .meta-wrap,.meta-MetaWindow .meta-wrap img{max-height:100%;max-width:100%}.meta-MetaWindow__text .meta-close{background:#fff}.meta-MetaWindow__text .meta-content{background:#fff;color:#000;padding:1rem 0 1rem 1rem}.meta-MetaWindow__text .meta-wrap{padding-right:1rem}.meta-MetaWindow__image .meta-wrap,.meta-MetaWindow__image .typography,.meta-MetaWindow__video .meta-wrap,.meta-MetaWindow__video .typography{display:flex;justify-content:center;align-items:center;flex-direction:column;max-height:100%;max-width:100%;min-height:100%}.meta-MetaWindow__embed:before,.meta-MetaWindow__video:before{content:"";display:block;position:relative;width:100%;padding-top:56.25%}.meta-MetaWindow__embed a[rel="nofollow noreferrer noopener"],.meta-MetaWindow__video a[rel="nofollow noreferrer noopener"]{color:#fff;font-size:1.2rem;font-weight:700}.meta-MetaWindow__embed a[rel="nofollow noreferrer noopener"]:before,.meta-MetaWindow__video a[rel="nofollow noreferrer noopener"]:before{content:"Unable to load. Please follow the provided link: ";display:block}.meta-MetaWindow__embed iframe,.meta-MetaWindow__video iframe{position:absolute;top:0;left:0;width:100%;height:100%} \ No newline at end of file diff --git a/dist/index.html b/dist/index.html index f1cfad5..ca993dc 100644 --- a/dist/index.html +++ b/dist/index.html @@ -1,139 +1,3 @@ - - -
- - - - -
- Load an Image
-
-
-
-
- Load JSON
-
-
-
-
- Load Partial AJAX HTML
-
- Not Found test
-
- Embed Youtube link
-
- Embed Vimeo link
-
-
- Embed SoundCloud link
- Embed Instagram
-
- - Use [data-toggle="lightbox"] attribute to attach lightbox action and - [href] to specify URL. - -
-- - Use [data-lightbox-gallery="YOUR_GALLERY_NAME"] to group ligthboxes with - next/prev arrows - -
-- Use [data-toggle="lightbox"] + [data-href] attribute to toggle lightbox on - regular elements. - Click me! -
- -- Note: You can add jquery-zoom plugin and lighbox will - zoom photos on hover. -
- -Load an Image
Load JSON
Load Partial AJAX HTML
Not Found test
Embed Youtube link
Embed Vimeo link
Embed SoundCloud link
Embed Instagram
Use [data-toggle="lightbox"] attribute to attach lightbox action and [href] to specify URL.
Use [data-lightbox-gallery="YOUR_GALLERY_NAME"] to group ligthboxes with next/prev arrows
Use [data-toggle="lightbox"] + [data-href] attribute to toggle lightbox on regular elements. Click me!
Note: You can add jquery-zoom plugin and lighbox will zoom photos on hover.