Telegram Stylish

style.css

html {
  --sk-sidebar-collapsed-width: 60px;
  --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 ease;
  --sk-transition-speed-fast: .4s linear;
  --sk-status-color: transparent;
}

#LeftColumn,
#LeftColumn #LeftMainHeader,
#LeftColumn #LeftMainHeader > *,
#LeftColumn .TabList,
#LeftColumn .ChatFolders > .Transition,
#LeftColumn .ListItem,
#LeftColumn .ListItem-button > *,
#LeftColumn .NewChatButton,
#LeftColumn .Avatar {
  transition: all var(--sk-transition-speed-fast) !important;
  transition-delay: 0s !important;
}

#LeftColumn {
  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 {
  opacity: 0 !important;
}
#LeftMainHeader {
  --sk-sidebar-collapsed-offset: calc(var(--sk-sidebar-expanded-width) - var(--sk-sidebar-collapsed-width) - 6px);
}
#LeftColumn .NewChatButton {
  transform: translateY(0px) !important;
}
#LeftColumn .chat-list {
  padding: 0px !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) .Avatar {
  transform: scale(0.85) translateX(-8px) !important;
}
#LeftColumn:not(:hover):not(:focus-within) #LeftMainHeader, 
#LeftColumn:not(:hover):not(:focus-within) .TabList, 
#LeftColumn:not(:hover):not(:focus-within) .ListItem {
  transform: translateX(var(--sk-sidebar-collapsed-offset)) !important;
}
#LeftColumn:not(:hover):not(:focus-within) .ChatFolders > .Transition {
  transform: translateY(-46px) !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 {
  transform: none !important;
}


#MiddleColumn > *:first-child {
  background: none !important;
  background-image: url(https://i.imgur.com/E5EnVHE.jpeg) !important;
  background-position: 100vw center !important;
  background-size: cover !important;
}
#MiddleColumn > *:first-child::after {
  content: none !important;
}
#MiddleColumn > *:first-child::before {
  background: none !important;
  background-image: url(https://i.imgur.com/E5EnVHE.jpeg) !important;
  background-position: center center !important;
  background-size: cover !important;
  width: 200vw;
  height: 100vh;
  transform: translateX(-50%);
}

#LeftColumn,
#LeftMainHeader,
.TabList,
.ChatFolders > .Transition,
.chat-list {
  background: transparent !important;
}

#LeftColumn::before {
  content: '';
  background: rgb(0 0 0 / 60%);
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  position: absolute;
  backdrop-filter: blur(16px);
}

#LeftColumn:not(:hover):not(:focus-within)::before {
  background: rgb(0 0 0 / 20%);
}
#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 .message-content {
  background: rgb(0 0 0 / 50%) !important;
  backdrop-filter: blur(4px);
  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-content > .svg-appendix {
  opacity: 0;
}