diff options
| author | Karl <kc0bfv@gmail.com> | 2022-10-30 00:16:19 +0300 |
|---|---|---|
| committer | Karl <kc0bfv@gmail.com> | 2022-10-30 00:16:19 +0300 |
| commit | 6bb38297e7567946050ab34e9562b115734e2b23 (patch) | |
| tree | 9b01ae3ea5bd59e2591dcf579b37f3f7b949cb86 | |
| parent | 42686321acd7a6ce0d837627883e7c601b017c9c (diff) | |
Changes small screen max-height to 500 px (seems more reasonable), puts nav buttons on top, and makes text less prominent on small screen
| -rw-r--r-- | assets/css/magnific-popup.css | 6 | ||||
| -rw-r--r-- | assets/css/main.css | 2 |
2 files changed, 4 insertions, 4 deletions
diff --git a/assets/css/magnific-popup.css b/assets/css/magnific-popup.css index 5c7fcf3..de94785 100644 --- a/assets/css/magnific-popup.css +++ b/assets/css/magnific-popup.css @@ -297,7 +297,7 @@ img.mfp-img { .mfp-gallery .mfp-image-holder .mfp-figure { cursor: pointer; } -@media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px) { +@media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 500px) { /** * Remove all paddings around the image on small screen */ @@ -313,7 +313,7 @@ img.mfp-img { display: inline; margin-left: 5px; } .mfp-img-mobile .mfp-bottom-bar { - background: rgba(0, 0, 0, 0.6); + background: rgba(0, 0, 0, 0.4); bottom: 0; margin: 0; top: auto; @@ -331,7 +331,7 @@ img.mfp-img { width: 35px; height: 35px; line-height: 35px; - background: rgba(0, 0, 0, 0.6); + background: rgba(0, 0, 0, 0.2); position: fixed; text-align: center; padding: 0; } } diff --git a/assets/css/main.css b/assets/css/main.css index 1e31449..90a86d4 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -298,7 +298,7 @@ body.loading #main .thumb { -moz-pointer-events: none; -webkit-pointer-events: n /* Magnific Popup Lightbox */ .mfp-container a, .mfp-container button, .mfp-container .nav-left, .mfp-container .nav-right { transition: color 0.2s ease-in-out, opacity 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out; text-decoration: none; } -.mfp-container .nav-left, .mfp-container .nav-right { background-image: url("images/arrow.svg"); background-position: center; background-repeat: no-repeat; background-size: 5em; cursor: pointer; height: 8em; margin-top: -4em; opacity: 0.65; position: absolute; top: 50%; width: 6em; z-index: 2; border-bottom: none; box-shadow: none; } +.mfp-container .nav-left, .mfp-container .nav-right { background-image: url("images/arrow.svg"); background-position: center; background-repeat: no-repeat; background-size: 5em; cursor: pointer; height: 8em; margin-top: -4em; opacity: 0.65; position: absolute; top: 50%; width: 6em; z-index: 1046; border-bottom: none; box-shadow: none; } .mfp-container .nav-left:hover, .mfp-container .nav-right:hover { opacity: 1; } .mfp-container .nav-left { transform: scaleX(-1); left: 0; } |