feat: компактный Index и крупные миниатюры (refs anton/api#283)
This commit is contained in:
Panfilov Konstantin committed
1 parent
3319499d5e
commit
029cd16d46
4 files changed
+67
-4
No files matched your search
Vendored
+22
-1
@@ -1 +1,22 @@
|
||||
.col-6,.col-md-4,.col-md-5,.col-md-7,.container{padding-right:15px;padding-left:15px;width:100%}.btn,.progress{background-color:transparent}.progress,.progress-bar{overflow:hidden;display:flex}.btn,.footer-main a,.list-unstyled a,.nav-link{text-decoration:none}*,::after,::before{box-sizing:border-box}body{margin:0;font-family:Inter,sans-serif;padding:unset!important;overflow:auto!important}.container{margin-right:auto;margin-left:auto}@media (min-width:576px){.container{max-width:540px}}@media (min-width:768px){.container{max-width:720px}.col-md-4{flex:0 0 33.333333%;max-width:33.333333%}.col-md-5{flex:0 0 41.666667%;max-width:41.666667%}.col-md-7{flex:0 0 58.333333%;max-width:58.333333%}.order-md-1{order:1}.d-md-none{display:none!important}.d-md-flex{display:flex!important}.py-md-3{padding-top:1rem!important;padding-bottom:1rem!important}.mb-md-0{margin-bottom:0!important}.text-md-right{text-align:right!important}}@media (min-width:992px){.container{max-width:960px}}@media (min-width:1200px){.container{max-width:1300px}}.row{display:flex;flex-wrap:wrap;margin-right:-15px;margin-left:-15px}.col-6,.col-md-4,.col-md-5,.col-md-7{position:relative}.col-6{flex:0 0 50%;max-width:50%}.d-none,.nav-link-auth{display:none!important}.d-flex{display:flex!important}.flex-column{flex-direction:column!important}.align-items-center{align-items:center!important}.btn,.navbar-toggler{align-items:center;cursor:pointer}.m-0{margin:0!important}.mb-0{margin-bottom:0!important}.mb-2{margin-bottom:.5rem!important}.mb-3{margin-bottom:1rem!important}.mb-4{margin-bottom:1.5rem!important}.mt-4{margin-top:1.5rem!important}.mr-4{margin-right:1.5rem!important}.px-0{padding-left:0!important;padding-right:0!important}.py-1{padding-top:.25rem!important;padding-bottom:.25rem!important}.py-3{padding-top:1rem!important;padding-bottom:1rem!important}.py-4{padding-top:1.5rem!important;padding-bottom:1.5rem!important}.py-5{padding-top:3rem!important;padding-bottom:3rem!important}.h5{font-size:1.25rem;font-weight:500;line-height:1.2}.list-unstyled{padding-left:0;list-style:none}.list-unstyled a{color:#56ccf2}.btn{display:inline-flex;justify-content:center;font-weight:400;text-align:center;vertical-align:middle;user-select:none;border:1px solid transparent;padding:.375rem .75rem;font-size:1rem;line-height:1.5;border-radius:.25rem}.btn.disabled{opacity:1}.progress{height:1rem;font-size:.75rem;border-radius:.25rem}.progress-bar{flex-direction:column;justify-content:center;color:#fff;text-align:center;white-space:nowrap;transition:width .6s}.btn-header,.btn-header:hover{color:#990694}.navbar{position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between}.navbar-brand{display:inline-block;padding-top:.3125rem;padding-bottom:.3125rem;white-space:nowrap}.navbar-collapse{flex-basis:100%;flex-grow:1;align-items:center}.collapse:not(.show),.footer-logo img:nth-child(2),.navbar-brand img:nth-child(2),.theme-dark .footer-logo img:first-child,.theme-dark .navbar-brand img:first-child{display:none}.nav{display:flex;flex-wrap:wrap;padding-left:0;margin-bottom:0;list-style:none}.nav-link{display:block;padding:.5rem 1rem}.wrapper{display:flex;flex-direction:column;min-height:100vh;background:url(../images/bg.jpg) center/cover no-repeat}.header,.header .navbar-collapse{background-color:rgba(255,255,255,.6)}.site{flex-grow:1;padding-top:90px}.main-section{display:flex;flex-direction:column;justify-content:center;min-height:calc(100vh - 88px)}.header{position:absolute;top:0;left:0;width:100%;z-index:60}.dropzone-form-loading-progress .progress-label,.image-loading-error,.image-loading-icon,.image-loading-icon img.sandglass{top:50%;left:50%;transform:translate(-50%,-50%)}.header .navbar{border-bottom:1px solid #e5e5e7}.btn-header{gap:8px;border:1px solid #990694;border-radius:16px;font-size:16px;padding:.9rem 24px}.navbar-toggler{border-radius:16px;width:56px;height:56px;background:linear-gradient(to bottom,#3d87e3,#990694);color:#f9f9f9;border:none;display:inline-flex;justify-content:center}.navbar-toggler .navbar-toggler-icon{width:30px;height:30px;display:inline-block;background:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") center/contain no-repeat}.navbar-toggler:not(.collapsed) .navbar-toggler-icon{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-width='2' d='M6 6L24 23.9999M6 24L24 6.00015'/%3e%3c/svg%3e")}.header-navbar{max-width:448px;margin-left:auto;padding-top:8px;padding-bottom:24px}.header-navbar .nav-link{color:currentColor;transition:.2s;background-color:transparent!important;display:flex;align-items:center;gap:8px}.header-navbar .nav-link span{flex-grow:1}.drLine truncated
|
||||
.col-6,.col-md-4,.col-md-5,.col-md-7,.container{padding-right:15px;padding-left:15px;width:100%}.btn,.progress{background-color:transparent}.progress,.progress-bar{overflow:hidden;display:flex}.btn,.footer-main a,.list-unstyled a,.nav-link{text-decoration:none}*,::after,::before{box-sizing:border-box}body{margin:0;font-family:Inter,sans-serif;padding:unset!important;overflow:auto!important}.container{margin-right:auto;margin-left:auto}@media (min-width:576px){.container{max-width:540px}}@media (min-width:768px){.container{max-width:720px}.col-md-4{flex:0 0 33.333333%;max-width:33.333333%}.col-md-5{flex:0 0 41.666667%;max-width:41.666667%}.col-md-7{flex:0 0 58.333333%;max-width:58.333333%}.order-md-1{order:1}.d-md-none{display:none!important}.d-md-flex{display:flex!important}.py-md-3{padding-top:1rem!important;padding-bottom:1rem!important}.mb-md-0{margin-bottom:0!important}.text-md-right{text-align:right!important}}@media (min-width:992px){.container{max-width:960px}}@media (min-width:1200px){.container{max-width:1300px}}.row{display:flex;flex-wrap:wrap;margin-right:-15px;margin-left:-15px}.col-6,.col-md-4,.col-md-5,.col-md-7{position:relative}.col-6{flex:0 0 50%;max-width:50%}.d-none,.nav-link-auth{display:none!important}.d-flex{display:flex!important}.flex-column{flex-direction:column!important}.align-items-center{align-items:center!important}.btn,.navbar-toggler{align-items:center;cursor:pointer}.m-0{margin:0!important}.mb-0{margin-bottom:0!important}.mb-2{margin-bottom:.5rem!important}.mb-3{margin-bottom:1rem!important}.mb-4{margin-bottom:1.5rem!important}.mt-4{margin-top:1.5rem!important}.mr-4{margin-right:1.5rem!important}.px-0{padding-left:0!important;padding-right:0!important}.py-1{padding-top:.25rem!important;padding-bottom:.25rem!important}.py-3{padding-top:1rem!important;padding-bottom:1rem!important}.py-4{padding-top:1.5rem!important;padding-bottom:1.5rem!important}.py-5{padding-top:3rem!important;padding-bottom:3rem!important}.h5{font-size:1.25rem;font-weight:500;line-height:1.2}.list-unstyled{padding-left:0;list-style:none}.list-unstyled a{color:#56ccf2}.btn{display:inline-flex;justify-content:center;font-weight:400;text-align:center;vertical-align:middle;user-select:none;border:1px solid transparent;padding:.375rem .75rem;font-size:1rem;line-height:1.5;border-radius:.25rem}.btn.disabled{opacity:1}.progress{height:1rem;font-size:.75rem;border-radius:.25rem}.progress-bar{flex-direction:column;justify-content:center;color:#fff;text-align:center;white-space:nowrap;transition:width .6s}.btn-header,.btn-header:hover{color:#990694}.navbar{position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between}.navbar-brand{display:inline-block;padding-top:.3125rem;padding-bottom:.3125rem;white-space:nowrap}.navbar-collapse{flex-basis:100%;flex-grow:1;align-items:center}.collapse:not(.show),.footer-logo img:nth-child(2),.navbar-brand img:nth-child(2),.theme-dark .footer-logo img:first-child,.theme-dark .navbar-brand img:first-child{display:none}.nav{display:flex;flex-wrap:wrap;padding-left:0;margin-bottom:0;list-style:none}.nav-link{display:block;padding:.5rem 1rem}.wrapper{display:flex;flex-direction:column;min-height:100vh;background:url(../images/bg.jpg) center/cover no-repeat}.header,.header .navbar-collapse{background-color:rgba(255,255,255,.6)}.site{flex-grow:1;padding-top:90px}.main-section{display:flex;flex-direction:column;justify-content:center;min-height:calc(100vh - 88px)}.header{position:absolute;top:0;left:0;width:100%;z-index:60}.dropzone-form-loading-progress .progress-label,.image-loading-error,.image-loading-icon,.image-loading-icon img.sandglass{top:50%;left:50%;transform:translate(-50%,-50%)}.header .navbar{border-bottom:1px solid #e5e5e7}.btn-header{gap:8px;border:1px solid #990694;border-radius:16px;font-size:16px;padding:.9rem 24px}.navbar-toggler{border-radius:16px;width:56px;height:56px;background:linear-gradient(to bottom,#3d87e3,#990694);color:#f9f9f9;border:none;display:inline-flex;justify-content:center}.navbar-toggler .navbar-toggler-icon{width:30px;height:30px;display:inline-block;background:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") center/contain no-repeat}.navbar-toggler:not(.collapsed) .navbar-toggler-icon{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-width='2' d='M6 6L24 23.9999M6 24L24 6.00015'/%3e%3c/svg%3e")}.header-navbar{max-width:448px;margin-left:auto;padding-top:8px;padding-bottom:24px}.header-navbar .nav-link{color:currentColor;transition:.2s;background-color:transparent!important;display:flex;align-items:center;gap:8px}.header-navbar .nav-link span{flex-grow:1}.drLine truncated
|
||||
/* api#283: утверждённый первый экран с раскрытыми панелями Яндекса. */
|
||||
@media (max-width: 767.98px) {
|
||||
.index-mobile-fit { padding-top: 8px !important; }
|
||||
.index-mobile-fit #image-compare { width: 100%; container-type: inline-size; aspect-ratio: 1696 / 920; max-height: clamp(120px, calc(100svh - 440px), 240px); }
|
||||
/* Обе стороны одного масштаба и кадрирования при ограниченной высоте. */
|
||||
.index-mobile-fit #image-compare .icv__img { position: absolute; top: 0; bottom: 0; left: 0; width: 100cqw; height: 100%; object-fit: cover; object-position: center; }
|
||||
.index-mobile-fit #image-compare .icv__img-b { left: auto; right: 0; }
|
||||
.index-mobile-fit #image-compare.native-icv img { width: 100cqw !important; }
|
||||
.index-mobile-fit #dropzone-form[data-mobile-upload] { padding: 12px; margin-top: 12px; }
|
||||
.index-mobile-fit #dropzone-form[data-mobile-upload] .dropzone-form-icon img { width: 36px; height: 36px; }
|
||||
.index-mobile-fit #dropzone-form[data-mobile-upload] .dropzone-form-text { margin-top: 6px; }
|
||||
.index-mobile-fit #dropzone-form[data-mobile-upload] .dropzone-form-format { margin-top: 8px; }
|
||||
.index-mobile-fit #dropzone-form[data-mobile-upload] .dropzone-form-action { margin-top: 10px; }
|
||||
.index-mobile-fit .image-examples { max-width: min(100%, 50svh); margin: 12px auto 0; }
|
||||
.index-mobile-fit .image-examples-label { display: none; }
|
||||
.index-mobile-fit .image-examples-list { gap: 8px; }
|
||||
.index-mobile-fit .image-examples-item { flex-basis: calc((100% - 32px) / 5); min-width: 0; }
|
||||
.index-mobile-fit #image-compare .icv__label { top: 4px; bottom: auto; margin: 0; font: 600 9px/1.3 Inter, sans-serif; padding: 2px 5px; border: 1px solid rgb(255 255 255 / 65%); border-radius: 5px; background: rgb(67 72 82 / 72%); color: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / 20%); text-shadow: 0 1px 1px rgb(0 0 0 / 35%); white-space: nowrap; }
|
||||
.index-mobile-fit #image-compare .icv__label-before { left: 24px; }
|
||||
.index-mobile-fit #image-compare .icv__label-after { right: 24px; }
|
||||
}
|
||||
Reference in new issue
Block a user