mirror of
https://github.com/danog/telegram-tt.git
synced 2024-12-15 18:57:12 +01:00
1 line
46 KiB
CSS
1 line
46 KiB
CSS
|
#UiLoader{height:100%}@media (max-width:600px){#UiLoader{height:calc(var(--vh, 1vh)*100)}}#UiLoader .mask{position:fixed;top:0;left:0;right:0;margin:0 auto;width:100%;max-width:1680px;height:100%;z-index:var(--z-ui-loader-mask);display:flex}#UiLoader .mask .left{flex:1;background:#fff;min-width:15.5rem;max-width:26.5rem}@media (min-width:1680px){#UiLoader .mask .left{border-left:1px solid var(--color-borders)}}@media (max-width:1275px){#UiLoader .mask .left{flex:2}}@media (max-width:925px){#UiLoader .mask .left{min-width:26.5rem}}@media (max-width:600px){#UiLoader .mask .left{max-width:none;width:100vw}}#UiLoader .mask .middle{flex:3;border-left:1px solid var(--color-borders);border-right:1px solid var(--color-borders);position:relative;z-index:1;overflow:hidden}#UiLoader .mask .middle:before{content:"";display:block;position:absolute;top:0;left:0;bottom:0;right:0;background:#e6ebee url(chat-bg.0e9c45048ff468c28042bcf15ff9e0d2.jpg) no-repeat 50%;background-size:cover;z-index:-1;transform-origin:left center}#UiLoader .mask .middle.with-right-column:before{transform:scale(.67)}@media screen and (min-width:1276px){#UiLoader .mask .middle:before{margin:-16rem -5rem -20rem 0}}#UiLoader .mask .middle.custom-bg-image:before{margin:-1rem;background-image:none!important}@media (max-width:1275px){#UiLoader .mask .middle{flex:3;border-right:none}}@media (max-width:600px){#UiLoader .mask .middle{display:none}}#UiLoader .mask .right{position:absolute;top:0;right:0;z-index:1;height:100%;width:var(--right-column-width);min-width:15.5rem;max-width:26.5rem;border-left:1px solid var(--color-borders);background:#fff}#UiLoader .blank{flex:1;background:#fff}.Spinner{--spinner-size:2rem;position:relative;display:flex;align-items:center;justify-content:center;width:var(--spinner-size);height:var(--spinner-size)}.Spinner>div{position:absolute;top:0;left:0;right:0;bottom:0;background-repeat:no-repeat;background-size:100%;animation-name:spin;animation-duration:1s;animation-iteration-count:infinite;animation-timing-function:linear}.Spinner.with-background:before{content:"";position:absolute;left:-.125rem;top:-.125rem;bottom:-.125rem;right:-.125rem;border-radius:50%;background:rgba(0,0,0,.25)}.Spinner.white>div{background-image:var(--spinner-white-data)}.Spinner.white.with-background>div{background-image:var(--spinner-white-thin-data)}.Spinner.blue>div{background-image:var(--spinner-blue-data)}.Spinner.black>div{background-image:var(--spinner-black-data)}.Spinner.green>div{background-image:var(--spinner-green-data)}.Spinner.gray>div{background-image:var(--spinner-gray-data)}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes ripple-animation{0%{transform:scale(0);opacity:1}50%{opacity:1}to{opacity:0;transform:scale(2)}}.ripple-container{position:absolute;top:0;left:0;bottom:0;right:0}body.animation-level-0 .ripple-container{display:none}.ripple-container span{position:absolute;display:block;background-color:var(--ripple-color,rgba(0,0,0,.08));border-radius:50%;transform:scale(0);animation:ripple-animation .7s}.Button{outline:none!important;display:flex;align-items:center;justify-content:center;width:100%;height:3.5rem;border:0;border-radius:var(--border-radius-default);background:transparent;padding:.625rem;color:#fff;line-height:1.2;cursor:pointer;text-transform:uppercase;flex-shrink:0;position:relative;overflow:hidden;transition:background-color .15s,color .15s;text-decoration:none!important}.Button.clicked,.Button:active,body.animation-level-0 .Button{transition:none!important}.Button.disabled{opacity:.5!important;cursor:default;pointer-events:none}.Button.round{width:3.5rem;border-radius:50%}.Button.round i{font-size:1.5rem}.Button.primary{background:var(--color-primary);color:var(--color-white);--ripple-color:rgba(0,0,0,0.08)}.Button.primary:not(.disabled):not(:disabled).active,.Button.primary:not(.disabled):not(:disabled):active,.Button.primary:not(.disabled):not(:disabled):focus,.Button.primary:not(.disabled):not(:disabled):hover{background:var(--color-primary-shade)}body.animation-level-0 .Button.primary:not(.d
|