Skip to content

Instantly share code, notes, and snippets.

@SkyaTura

SkyaTura/telegram.css

Created June 19, 2023 02:18
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save SkyaTura/83046b5178ff2aec7ba5305644485c98 to your computer and use it in GitHub Desktop.
Save SkyaTura/83046b5178ff2aec7ba5305644485c98 to your computer and use it in GitHub Desktop.
Download ZIP
WPP e Telegram Themes
Raw
telegram.css
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;
}
Raw
whatsapp.css
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