mirror of
https://github.com/danog/telegram-tt.git
synced 2024-12-15 18:57:12 +01:00
1 line
92 KiB
CSS
1 line
92 KiB
CSS
|
#LeftMainHeader{position:relative}#LeftMainHeader .animated-menu-icon{position:absolute}#LeftMainHeader .animated-menu-icon,#LeftMainHeader .animated-menu-icon:after,#LeftMainHeader .animated-menu-icon:before{width:1.125rem;height:.125rem;border-radius:.125rem;background-color:var(--color-text-secondary);transition:transform .25s;transform:rotate(0)}#LeftMainHeader .animated-menu-icon:after,#LeftMainHeader .animated-menu-icon:before{position:absolute;left:0;content:""}#LeftMainHeader .animated-menu-icon:before{top:-.3125rem}#LeftMainHeader .animated-menu-icon:after{top:.3125rem}#LeftMainHeader .animated-menu-icon.state-back{transform:rotate(180deg)}#LeftMainHeader .animated-menu-icon.state-back:before{transform:rotate(45deg) scaleX(.75) translate(.375rem,-.1875rem)}#LeftMainHeader .animated-menu-icon.state-back:after{transform:rotate(-45deg) scaleX(.75) translate(.375rem,.1875rem)}#LeftMainHeader .archived-badge{min-width:1.5rem;height:1.5rem;margin-left:2rem;background:var(--color-gray);border-radius:.75rem;padding:0 .45rem;color:#fff;font-size:.875rem;line-height:1.5rem;font-weight:500;text-align:center;flex-shrink:0}.Transition>div:not(.active) #LeftMainHeader .Menu .bubble,body.animating-right-column #LeftMainHeader .Menu .bubble{transition:none!important}#ConnectionState{flex:0 0 auto;display:flex;align-items:center;margin:0 .5rem .5rem;padding:.75rem;background:var(--color-yellow);border-radius:var(--border-radius-default)}#ConnectionState>.Spinner{--spinner-size:1.75rem}#ConnectionState>.state-text{color:var(--color-text-lighter);font-weight:500;line-height:2rem;margin-left:1.9rem;white-space:nowrap}@media (max-width:950px){#ConnectionState>.state-text{margin-left:1.2rem}}.NewChatButton{position:absolute;right:1rem;bottom:1rem;transform:translateY(5rem);transition:transform .25s cubic-bezier(.34,1.56,.64,1)}body.animation-level-0 .NewChatButton{transform:none!important;opacity:0;transition:opacity .15s}body.animation-level-0 .NewChatButton.revealed{opacity:1}.NewChatButton.revealed{transform:translateY(0)}@media (max-width:600px){.NewChatButton.revealed{transform:translateZ(10px);transform-style:preserve-3d}}.NewChatButton.menu-is-open:before{content:"";display:block;position:absolute;top:-13rem;left:-11rem;right:-1rem;bottom:-1rem;z-index:-1}.is-touch-env .NewChatButton .Menu>.backdrop{position:absolute;left:-100vw;right:-100vw;top:-100vh;bottom:-100vh}.NewChatButton>.Button .icon-close,.NewChatButton>.Button .icon-new-chat-filled{position:absolute}.NewChatButton>.Button:not(.active) .icon-new-chat-filled{animation:grow-icon .4s ease-out}.NewChatButton>.Button:not(.active) .icon-close{animation:hide-icon .4s ease-out forwards}.NewChatButton>.Button.active .icon-close{animation:grow-icon .4s ease-out}.NewChatButton>.Button.active .icon-new-chat-filled{animation:hide-icon .4s ease-out forwards}#LeftColumn-main{height:100%;position:relative;display:flex;flex-direction:column;overflow:hidden;z-index:1}#LeftColumn-main>.Transition{flex:1;overflow:hidden}#LeftColumn-main .ChatFolders{height:100%;display:flex;flex-direction:column;overflow:hidden}#LeftColumn-main .ChatFolders .tabs-placeholder{height:2.625rem;transition:height .15s ease}#LeftColumn-main .ChatFolders .tabs-placeholder:not(.open){height:0}#LeftColumn-main .ChatFolders .TabList{justify-content:flex-start;padding-left:.5625rem;padding-bottom:1px;border-bottom:0;z-index:1}#LeftColumn-main .ChatFolders .Tab{flex:0 0 auto;padding-left:.625rem;padding-right:.625rem}#LeftColumn-main .ChatFolders .Tab>span{padding-left:.5rem;padding-right:.5rem}#LeftColumn-main .ChatFolders>.Transition{flex:1;overflow:hidden}#LeftColumn-main .chat-list,#LeftColumn-main .LeftSearch,#LeftColumn-main .RecentContacts,#LeftColumn-main .search-content{height:100%;overflow-y:auto}#LeftColumn{overflow:hidden}#NewChat{height:100%}.left-header{height:var(--header-height);padding:.375rem 1.25rem .5rem .8125rem;display:flex;align-items:center;flex-shrink:0;background-color:var(--color-background)}.left-header h3{margin-bottom:0;font-size:1.25rem;font-weight:500;margin-left:1.375rem}.left-he
|