Created
June 19, 2023 02:18
-
-
Save SkyaTura/83046b5178ff2aec7ba5305644485c98 to your computer and use it in GitHub Desktop.
WPP e Telegram Themes
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| html { | |
| --sk-background: url(https://i.imgur.com/E5EnVHE.jpeg); | |
| --sk-background: url(https://2.bp.blogspot.com/-28by8Dh2mLU/XKG5NoRCILI/AAAAAAAABGw/Z52CY9ZnMVY-dhWTznfr5HEVxPOSIiN3ACKgBGAs/w2560-h1600-c/cyberpunk-city-night-scenery-sci-fi-uhdpaper.com-4K-94.jpg); | |
| --sk-sidebar-collapsed-width: 56px; | |
| --sk-sidebar-expanded-width: 50vw; | |
| --sk-sidebar-collapsed-offset: calc(var(--sk-sidebar-expanded-width) - var(--sk-sidebar-collapsed-width)); | |
| --sk-sidebar-collapsed-offset-n: calc(var(--sk-sidebar-collapsed-offset) * -1); | |
| --sk-transition-speed: .1s; | |
| --sk-transition-speed-fast: .5s; | |
| --sk-status-color: transparent; | |
| } | |
| #LeftColumn, | |
| #LeftColumn-main, | |
| #LeftColumn-main::before, | |
| #LeftColumn-main::after, | |
| #LeftMainHeader > *, | |
| #LeftColumn .ChatFolders > .Transition, | |
| #LeftColumn .Avatar, | |
| #LeftColumn .NewChatButton, | |
| #MiddleColumn .MiddleHeader::before, | |
| #MiddleColumn .MiddleHeader::after, | |
| #LeftColumn:hover .ChatBadge-transition { | |
| transition: unset !important; | |
| transition-property: opacity, transform !important; | |
| transition-duration: var(--sk-transition-speed-fast) !important; | |
| transition-delay: 0s !important; | |
| transition-timing-function: ease !important; | |
| } | |
| #LeftColumn, #LeftColumn-main { | |
| position: fixed; | |
| transform: none !important; | |
| z-index: 2 !important; | |
| overflow: hidden !important; | |
| width: var(--sk-sidebar-expanded-width) !important; | |
| max-width: unset !important; | |
| min-width: unset !important; | |
| left: 0 !important; | |
| } | |
| #LeftColumn::after { | |
| content: none !important; | |
| } | |
| #LeftColumn .NewChatButton { | |
| transform: translateY(0px) !important; | |
| } | |
| #LeftColumn .chat-list { | |
| padding: 0px !important; | |
| } | |
| #LeftColumn .chat-list { | |
| margin-top: 8px !important; | |
| } | |
| #LeftColumn .Chat.ListItem { | |
| position: relative !important; | |
| top: unset !important; | |
| } | |
| #LeftColumn .Chat.ListItem > .ListItem-button { | |
| padding: 2px 8px !important; | |
| } | |
| #LeftColumn .ChatFolders > .Transition { | |
| min-height: calc(100vh - 56px) !important; | |
| } | |
| #LeftColumn:not(:hover) .NewChatButton { | |
| transform: translateY(5rem) !important; | |
| opacity: 0; | |
| } | |
| #LeftColumn:not(:hover):not(:focus-within) { | |
| transform: translateX(var(--sk-sidebar-collapsed-offset-n)) !important; | |
| } | |
| #LeftColumn:not(:hover):not(:focus-within) #LeftColumn-main { | |
| transform: translateX(var(--sk-sidebar-collapsed-offset)) !important; | |
| } | |
| #LeftColumn:not(:hover):not(:focus-within) #LeftMainHeader > *:first-child { | |
| transform: translateX(-6px) !important; | |
| } | |
| #LeftColumn:not(:hover):not(:focus-within) .Avatar { | |
| transform: scale(0.85) translateX(-8px) !important; | |
| } | |
| #LeftColumn:not(:hover):not(:focus-within) .ChatFolders > .Transition { | |
| transform: translateY(-42px) !important; | |
| } | |
| #LeftColumn:not(:hover):not(:focus-within) #LeftMainHeader > *:not(:first-child) { | |
| opacity: 0 | |
| } | |
| #LeftColumn:not(:hover):not(:focus-within) .TabList | |
| /* #LeftColumn:not(:hover):not(:focus-within) .ListItem-button > .info */ | |
| { | |
| opacity: 0 !important; | |
| } | |
| #MiddleColumn { | |
| background: transparent !important; | |
| transform: translateX(var(--sk-sidebar-collapsed-width)) !important; | |
| width: calc( 100vw - var(--sk-sidebar-collapsed-width) ) | |
| } | |
| #MiddleColumn > *:first-child::after, | |
| #MiddleColumn > *:first-child::before { | |
| content: none !important; | |
| } | |
| body::before { | |
| background: none !important; | |
| background-image: var(--sk-background) !important; | |
| background-position: center center !important; | |
| background-size: cover !important; | |
| width: 200vw; | |
| height: 100vh; | |
| transform: translateX(-50%); | |
| content: ''; | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| } | |
| #LeftColumn, | |
| #LeftMainHeader, | |
| #MiddleColumn, | |
| .TabList, | |
| .ChatFolders > .Transition, | |
| .chat-list, | |
| #MiddleColumn > *:first-child { | |
| background: transparent !important; | |
| } | |
| #LeftColumn-main::before, | |
| #MiddleColumn .MiddleHeader::before, | |
| #LeftColumn-main::after, | |
| #MiddleColumn .MiddleHeader::after { | |
| content: ''; | |
| top: 0; | |
| left: 0; | |
| height: 100%; | |
| width: 100%; | |
| position: absolute; | |
| z-index: -10; | |
| } | |
| #LeftColumn-main::before, | |
| #MiddleColumn .MiddleHeader::before { | |
| backdrop-filter: blur(16px); | |
| } | |
| #LeftColumn-main::after, | |
| #MiddleColumn .MiddleHeader::after { | |
| background: rgb(0 0 0 / 50%); | |
| } | |
| #LeftColumn:not(:hover):not(:focus-within) #LeftColumn-main::after, | |
| #MiddleColumn .MiddleHeader:not(:hover):not(:focus-within)::after { | |
| opacity: 0; | |
| } | |
| #LeftColumn .ListItem { | |
| margin: 0px !important; | |
| } | |
| #LeftColumn .ListItem-button { | |
| padding: 0px !important; | |
| background: transparent !important; | |
| } | |
| #LeftColumn .status { | |
| background: transparent !important; | |
| overflow: visible !important; | |
| } | |
| #LeftColumn .status .Avatar { | |
| box-shadow: 0px 0px 3px 2px var(--sk-status-color); | |
| } | |
| #LeftColumn .ListItem.no-selection { | |
| --sk-status-color: transparent; | |
| } | |
| #LeftColumn .ListItem.selected { | |
| --sk-status-color: rgb(0 255 0 / 40%); | |
| } | |
| #LeftColumn .ListItem:has(.ChatBadge.unread) { | |
| --sk-status-color: rgb(255 255 255 / 30%); | |
| } | |
| #LeftColumn .ListItem:has(.ChatBadge.mention) { | |
| --sk-status-color: rgb(255 0 0 / 30%) ; | |
| } | |
| #MiddleColumn { | |
| border: none !important; | |
| } | |
| #MiddleColumn .MiddleHeader { | |
| background: transparent !important; | |
| } | |
| #MiddleColumn .MiddleHeader .HeaderPinnedMessageWrapper { | |
| background: rgb(0 0 0 / 15%) !important; | |
| border-radius: 8px; | |
| } | |
| #MiddleColumn > .Transition { | |
| flex: 1 !important; | |
| } | |
| #MiddleColumn .back-button { | |
| display: none; | |
| } | |
| #MiddleColumn .message-content { | |
| background: rgb(0 0 0 / 50%) !important; | |
| transition: var(--sk-transition-speed-fast); | |
| } | |
| #MiddleColumn .Message.own .message-content { | |
| background: rgb(0 0 0 / 30%) !important; | |
| } | |
| /* | |
| #MiddleColumn .Message:hover .message-content { | |
| background: rgb(0 0 0 / 90%) !important; | |
| } | |
| */ | |
| #MiddleColumn .Message .message-content:has(.Sticker, .media-inner.emoji), | |
| #MiddleColumn .MessageOutgoingStatus .icon { | |
| background: transparent !important; | |
| } | |
| #MiddleColumn .message-content .svg-appendix, | |
| #MiddleColumn #message-compose .svg-appendix { | |
| display: none !important; | |
| } | |
| #MiddleColumn #message-compose { | |
| border-radius: var(--border-radius-messages) !important; | |
| } | |
| #LeftColumn #LeftMainHeader .SearchInput, | |
| #MiddleColumn .middle-column-footer { | |
| background: rgb(0 0 0 / 20%) !important; | |
| backdrop-filter: blur(12px); | |
| } | |
| #MiddleColumn #message-compose, | |
| #MiddleColumn .middle-column-footer, | |
| #MiddleColumn .Composer > button { | |
| background: transparent !important; | |
| border: unset !important; | |
| } | |
| /* | |
| #MiddleColumn .Composer > button { | |
| box-shadow: 0 1px 2px var(--color-default-shadow); | |
| } | |
| */ | |
| #MiddleColumn #message-compose, | |
| #MiddleColumn .Composer > button { | |
| box-shadow: unset !important; | |
| } | |
| #MiddleColumn .Composer { | |
| margin: 0 !important; | |
| } | |
| #MiddleColumn .middle-column-footer { | |
| max-width: unset !important; | |
| padding: 0px !important; | |
| } | |
| .ChatBadge-transition { | |
| position: absolute !important; | |
| left: 0; | |
| z-index: 10; | |
| transform: translateX(-50%) translate(16px, 6px) scale(0.7) !important; | |
| } | |
| #LeftColumn:hover .ChatBadge-transition { | |
| transform: translateX(-50%) translate(16px, 6px) scale(0.95) !important; | |
| } | |
| .ChatBadge { | |
| background: rgb(0 0 0 / 75%) !important; | |
| color: lime !important; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| html { | |
| --sk-background: url(https://i.imgur.com/E5EnVHE.jpeg); | |
| --sk-background: url(https://2.bp.blogspot.com/-28by8Dh2mLU/XKG5NoRCILI/AAAAAAAABGw/Z52CY9ZnMVY-dhWTznfr5HEVxPOSIiN3ACKgBGAs/w2560-h1600-c/cyberpunk-city-night-scenery-sci-fi-uhdpaper.com-4K-94.jpg); | |
| --sk-sidebar-collapsed-width: 56px; | |
| --sk-sidebar-expanded-width: 50vw; | |
| --sk-sidebar-collapsed-offset: calc(var(--sk-sidebar-expanded-width) - var(--sk-sidebar-collapsed-width)); | |
| --sk-sidebar-collapsed-offset-n: calc(var(--sk-sidebar-collapsed-offset) * -1); | |
| --sk-transition-speed: .1s; | |
| --sk-transition-speed-fast: .5s; | |
| --sk-status-color: transparent; | |
| } | |
| #LeftColumn, | |
| #LeftColumn-main, | |
| #LeftColumn-main::before, | |
| #LeftColumn-main::after, | |
| #LeftMainHeader > *, | |
| #LeftColumn .ChatFolders > .Transition, | |
| #LeftColumn .Avatar, | |
| #LeftColumn .NewChatButton, | |
| #MiddleColumn .MiddleHeader::before, | |
| #MiddleColumn .MiddleHeader::after, | |
| #LeftColumn:hover .ChatBadge-transition { | |
| transition: unset !important; | |
| transition-property: opacity, transform !important; | |
| transition-duration: var(--sk-transition-speed-fast) !important; | |
| transition-delay: 0s !important; | |
| transition-timing-function: ease !important; | |
| } | |
| #LeftColumn, #LeftColumn-main { | |
| position: fixed; | |
| transform: none !important; | |
| z-index: 2 !important; | |
| overflow: hidden !important; | |
| width: var(--sk-sidebar-expanded-width) !important; | |
| max-width: unset !important; | |
| min-width: unset !important; | |
| left: 0 !important; | |
| } | |
| #LeftColumn::after { | |
| content: none !important; | |
| } | |
| #LeftColumn .NewChatButton { | |
| transform: translateY(0px) !important; | |
| } | |
| #LeftColumn .chat-list { | |
| padding: 0px !important; | |
| } | |
| #LeftColumn .chat-list { | |
| margin-top: 8px !important; | |
| } | |
| #LeftColumn .Chat.ListItem { | |
| position: relative !important; | |
| top: unset !important; | |
| } | |
| #LeftColumn .Chat.ListItem > .ListItem-button { | |
| padding: 2px 8px !important; | |
| } | |
| #LeftColumn .ChatFolders > .Transition { | |
| min-height: calc(100vh - 56px) !important; | |
| } | |
| #LeftColumn:not(:hover) .NewChatButton { | |
| transform: translateY(5rem) !important; | |
| opacity: 0; | |
| } | |
| #LeftColumn:not(:hover):not(:focus-within) { | |
| transform: translateX(var(--sk-sidebar-collapsed-offset-n)) !important; | |
| } | |
| #LeftColumn:not(:hover):not(:focus-within) #LeftColumn-main { | |
| transform: translateX(var(--sk-sidebar-collapsed-offset)) !important; | |
| } | |
| #LeftColumn:not(:hover):not(:focus-within) #LeftMainHeader > *:first-child { | |
| transform: translateX(-6px) !important; | |
| } | |
| #LeftColumn:not(:hover):not(:focus-within) .Avatar { | |
| transform: scale(0.85) translateX(-8px) !important; | |
| } | |
| #LeftColumn:not(:hover):not(:focus-within) .ChatFolders > .Transition { | |
| transform: translateY(-42px) !important; | |
| } | |
| #LeftColumn:not(:hover):not(:focus-within) #LeftMainHeader > *:not(:first-child) { | |
| opacity: 0 | |
| } | |
| #LeftColumn:not(:hover):not(:focus-within) .TabList | |
| /* #LeftColumn:not(:hover):not(:focus-within) .ListItem-button > .info */ | |
| { | |
| opacity: 0 !important; | |
| } | |
| #MiddleColumn { | |
| background: transparent !important; | |
| transform: translateX(var(--sk-sidebar-collapsed-width)) !important; | |
| width: calc( 100vw - var(--sk-sidebar-collapsed-width) ) | |
| } | |
| #MiddleColumn > *:first-child::after, | |
| #MiddleColumn > *:first-child::before { | |
| content: none !important; | |
| } | |
| body::before { | |
| background: none !important; | |
| background-image: var(--sk-background) !important; | |
| background-position: center center !important; | |
| background-size: cover !important; | |
| width: 200vw; | |
| height: 100vh; | |
| transform: translateX(-50%); | |
| content: ''; | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| } | |
| #LeftColumn, | |
| #LeftMainHeader, | |
| #MiddleColumn, | |
| .TabList, | |
| .ChatFolders > .Transition, | |
| .chat-list, | |
| #MiddleColumn > *:first-child { | |
| background: transparent !important; | |
| } | |
| #LeftColumn-main::before, | |
| #MiddleColumn .MiddleHeader::before, | |
| #LeftColumn-main::after, | |
| #MiddleColumn .MiddleHeader::after { | |
| content: ''; | |
| top: 0; | |
| left: 0; | |
| height: 100%; | |
| width: 100%; | |
| position: absolute; | |
| z-index: -10; | |
| } | |
| #LeftColumn-main::before, | |
| #MiddleColumn .MiddleHeader::before { | |
| backdrop-filter: blur(16px); | |
| } | |
| #LeftColumn-main::after, | |
| #MiddleColumn .MiddleHeader::after { | |
| background: rgb(0 0 0 / 50%); | |
| } | |
| #LeftColumn:not(:hover):not(:focus-within) #LeftColumn-main::after, | |
| #MiddleColumn .MiddleHeader:not(:hover):not(:focus-within)::after { | |
| opacity: 0; | |
| } | |
| #LeftColumn .ListItem { | |
| margin: 0px !important; | |
| } | |
| #LeftColumn .ListItem-button { | |
| padding: 0px !important; | |
| background: transparent !important; | |
| } | |
| #LeftColumn .status { | |
| background: transparent !important; | |
| overflow: visible !important; | |
| } | |
| #LeftColumn .status .Avatar { | |
| box-shadow: 0px 0px 3px 2px var(--sk-status-color); | |
| } | |
| #LeftColumn .ListItem.no-selection { | |
| --sk-status-color: transparent; | |
| } | |
| #LeftColumn .ListItem.selected { | |
| --sk-status-color: rgb(0 255 0 / 40%); | |
| } | |
| #LeftColumn .ListItem:has(.ChatBadge.unread) { | |
| --sk-status-color: rgb(255 255 255 / 30%); | |
| } | |
| #LeftColumn .ListItem:has(.ChatBadge.mention) { | |
| --sk-status-color: rgb(255 0 0 / 30%) ; | |
| } | |
| #MiddleColumn { | |
| border: none !important; | |
| } | |
| #MiddleColumn .MiddleHeader { | |
| background: transparent !important; | |
| } | |
| #MiddleColumn .MiddleHeader .HeaderPinnedMessageWrapper { | |
| background: rgb(0 0 0 / 15%) !important; | |
| border-radius: 8px; | |
| } | |
| #MiddleColumn > .Transition { | |
| flex: 1 !important; | |
| } | |
| #MiddleColumn .back-button { | |
| display: none; | |
| } | |
| #MiddleColumn .message-content { | |
| background: rgb(0 0 0 / 50%) !important; | |
| transition: var(--sk-transition-speed-fast); | |
| } | |
| #MiddleColumn .Message.own .message-content { | |
| background: rgb(0 0 0 / 30%) !important; | |
| } | |
| /* | |
| #MiddleColumn .Message:hover .message-content { | |
| background: rgb(0 0 0 / 90%) !important; | |
| } | |
| */ | |
| #MiddleColumn .Message .message-content:has(.Sticker, .media-inner.emoji), | |
| #MiddleColumn .MessageOutgoingStatus .icon { | |
| background: transparent !important; | |
| } | |
| #MiddleColumn .message-content .svg-appendix, | |
| #MiddleColumn #message-compose .svg-appendix { | |
| display: none !important; | |
| } | |
| #MiddleColumn #message-compose { | |
| border-radius: var(--border-radius-messages) !important; | |
| } | |
| #LeftColumn #LeftMainHeader .SearchInput, | |
| #MiddleColumn .middle-column-footer { | |
| background: rgb(0 0 0 / 20%) !important; | |
| backdrop-filter: blur(12px); | |
| } | |
| #MiddleColumn #message-compose, | |
| #MiddleColumn .middle-column-footer, | |
| #MiddleColumn .Composer > button { | |
| background: transparent !important; | |
| border: unset !important; | |
| } | |
| /* | |
| #MiddleColumn .Composer > button { | |
| box-shadow: 0 1px 2px var(--color-default-shadow); | |
| } | |
| */ | |
| #MiddleColumn #message-compose, | |
| #MiddleColumn .Composer > button { | |
| box-shadow: unset !important; | |
| } | |
| #MiddleColumn .Composer { | |
| margin: 0 !important; | |
| } | |
| #MiddleColumn .middle-column-footer { | |
| max-width: unset !important; | |
| padding: 0px !important; | |
| } | |
| .ChatBadge-transition { | |
| position: absolute !important; | |
| left: 0; | |
| z-index: 10; | |
| transform: translateX(-50%) translate(16px, 6px) scale(0.7) !important; | |
| } | |
| #LeftColumn:hover .ChatBadge-transition { | |
| transform: translateX(-50%) translate(16px, 6px) scale(0.95) !important; | |
| } | |
| .ChatBadge { | |
| background: rgb(0 0 0 / 75%) !important; | |
| color: lime !important; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment