diff options
| author | jules@lens <julescarbon@gmail.com> | 2019-04-02 20:36:51 +0200 |
|---|---|---|
| committer | jules@lens <julescarbon@gmail.com> | 2019-04-02 20:36:51 +0200 |
| commit | 1d238346b5609e9454a4917c75631a550b5b43d1 (patch) | |
| tree | 8a936e721e78c7b5948b303e6a1686c96b882d51 /client/modalImage/modal.css | |
| parent | b4b58f2279fb01fa0240006c460c0b5ec95c1126 (diff) | |
| parent | f58d41731fc07d94d594d5582aef203564f990ec (diff) | |
Merge branch 'master' of asdf.us:megapixels_dev
Diffstat (limited to 'client/modalImage/modal.css')
| -rw-r--r-- | client/modalImage/modal.css | 69 |
1 files changed, 69 insertions, 0 deletions
diff --git a/client/modalImage/modal.css b/client/modalImage/modal.css new file mode 100644 index 00000000..d9180125 --- /dev/null +++ b/client/modalImage/modal.css @@ -0,0 +1,69 @@ +.modal { + position: fixed; + top: 0; left: 0; width: 100%; height: 100%; + background: rgba(0,0,0,0.8); + color: white; + display: flex; + justify-content: center; + align-items: center; + opacity: 0; + pointer-events: none; + z-index: -9999999; + transition: opacity 0.2s cubic-bezier(0,0,1,1); +} +.modal.visible { + opacity: 1; + pointer-events: auto; + z-index: 999999999; +} +.modal .inner { + position: absolute; + top: 0; left: 0; + width: 100%; height: 100%; + display: flex; + justify-content: center; + align-items: center; +} +.modal img { + max-width: 80vw; + max-height: 80vh; +} +.modal .caption { + display: block; + text-align: center; +} +.modal .prev { + position: absolute; + top: 0; left: 0; + width: 10%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; + color: white; + font-size: 40px; + cursor: pointer; +} +.modal .next { + position: absolute; + top: 0; right: 0; + width: 10%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; + color: white; + font-size: 40px; + cursor: pointer; +} +.modal .close { + position: absolute; + top: 0; right: 0; + width: 10vw; height: 10vw; + display: flex; + justify-content: center; + align-items: center; + color: white; + font-size: 40px; + cursor: pointer; +}
\ No newline at end of file |