mirror of
https://github.com/the1812/Bilibili-Evolved.git
synced 2025-11-04 21:22:45 +08:00
Add transition for image viewer
This commit is contained in:
parent
1736bd4d53
commit
52f6c63fe0
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -97,7 +97,7 @@
|
||||
"icon.vue.min.js": "818DBE1043C65CA3BD83F1EAE124D38B272344BA64DECA5B6A55BB7F0C86D19A",
|
||||
"icons.min.css": "CA6478DC41BEA3E99C45E01D3CD6FC6D05F933D91A3EE9200AD5DC39828E5A17",
|
||||
"image-resolution.min.js": "0D9679DD7D7CF2709368FC4811F03CC0379EE7286432B98DB7AAB45227D20C76",
|
||||
"image-viewer.min.css": "0240B0D5C093F5DC4DCC61F45C49D721129C428E93CEFEFADD0A57F0278D7F0F",
|
||||
"image-viewer.min.css": "0CF849C6546AEBD2E7EB42F42368BC87B95536840F8A364413DB9A6E37AF5EA8",
|
||||
"image-viewer.min.html": "763742E79923A7918F281AEBB3CEE76FE2A0AE94CACE325AE4BEE1AED451DAEA",
|
||||
"index.min.html": "94B83D9EBB9005C1286A7E0759A7683932F8DADA20D07E5E9D8FF867B04D4B95",
|
||||
"keymap.min.js": "513B92053F0B9D7AF32F1A98D30CC49131AF2960BFCA85AAF64AB22CEB17D816",
|
||||
|
||||
BIN
min/bundle.zip
BIN
min/bundle.zip
Binary file not shown.
2
min/image-viewer.min.css
vendored
2
min/image-viewer.min.css
vendored
@ -1 +1 @@
|
||||
body.image-viewer-opened,html.image-viewer-opened{overflow:hidden!important}.image-viewer-container{background:rgba(0,0,0,.85);width:100%;height:100%;position:fixed;top:0;left:0;z-index:100002;display:none;justify-content:center;align-items:center}.image-viewer-container.opened{display:flex}.image-viewer{width:90%;height:90%;display:grid;grid-template-columns:auto 48px;grid-template-rows:48px auto 48px 12px 48px 18px 48px;grid-template-areas:"image close" "image ." "image copy-link" "image ." "image new-tab" "image ." "image download";grid-column-gap:12px;column-gap:12px;justify-items:center;justify-content:stretch;align-items:center;align-content:stretch}.image-viewer .image{grid-area:image;width:auto;height:auto;max-width:100%;max-height:100%}.image-viewer .close{grid-area:close}.image-viewer .download{grid-area:download}.image-viewer .copy-link{grid-area:copy-link;transform:scale(.95)}.image-viewer .new-tab{grid-area:new-tab;transform:scale(.85)}.image-viewer-icon{cursor:pointer;width:100%;height:100%}.image-viewer-icon svg{max-width:48px;max-height:48px}.image-viewer-icon path{fill:#eee;transition:.2s;transform-origin:center}.image-viewer-icon:hover path{fill:var(--theme-color);transform:scale(1.1)}
|
||||
body.image-viewer-opened,html.image-viewer-opened{overflow:hidden!important}.image-viewer-container,.image-viewer-container *{transition:.2s ease-out}.image-viewer-container{background:rgba(0,0,0,.85);width:100%;height:100%;position:fixed;top:0;left:0;z-index:100002;display:flex;justify-content:center;align-items:center;opacity:0;pointer-events:none}.image-viewer-container.opened{opacity:1;pointer-events:initial}.image-viewer{width:90%;height:90%;display:grid;grid-template-columns:auto 48px;grid-template-rows:48px auto 48px 12px 48px 18px 48px;grid-template-areas:"image close" "image ." "image copy-link" "image ." "image new-tab" "image ." "image download";grid-column-gap:12px;column-gap:12px;justify-items:center;justify-content:stretch;align-items:center;align-content:stretch;transform:scale(.95)}.image-viewer-container.opened .image-viewer{transform:scale(1)}.image-viewer .image{grid-area:image;width:auto;height:auto;max-width:100%;max-height:100%}.image-viewer .close{grid-area:close}.image-viewer .download{grid-area:download}.image-viewer .copy-link{grid-area:copy-link;transform:scale(.95)}.image-viewer .new-tab{grid-area:new-tab;transform:scale(.85)}.image-viewer-icon{cursor:pointer;width:100%;height:100%}.image-viewer-icon svg{max-width:48px;max-height:48px}.image-viewer-icon path{fill:#eee;transition:.2s;transform-origin:center}.image-viewer-icon:hover path{fill:var(--theme-color);transform:scale(1.1)}
|
||||
@ -2,6 +2,10 @@ html.image-viewer-opened,
|
||||
body.image-viewer-opened {
|
||||
overflow: hidden !important;
|
||||
}
|
||||
.image-viewer-container,
|
||||
.image-viewer-container * {
|
||||
transition: .2s ease-out;
|
||||
}
|
||||
.image-viewer-container {
|
||||
background: rgba(0, 0, 0, 0.85);
|
||||
width: 100%;
|
||||
@ -10,12 +14,15 @@ body.image-viewer-opened {
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 100002;
|
||||
display: none;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
.image-viewer-container.opened {
|
||||
display: flex;
|
||||
opacity: 1;
|
||||
pointer-events: initial;
|
||||
}
|
||||
.image-viewer {
|
||||
width: 90%;
|
||||
@ -37,6 +44,10 @@ body.image-viewer-opened {
|
||||
justify-content: stretch;
|
||||
align-items: center;
|
||||
align-content: stretch;
|
||||
transform: scale(.95);
|
||||
}
|
||||
.image-viewer-container.opened .image-viewer {
|
||||
transform: scale(1);
|
||||
}
|
||||
.image-viewer .image {
|
||||
grid-area: image;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user