Small tweaks to minimize the empty space on the sides of tlk.io's desktop view.
tlk.io - Wider Desktop UI by danferns
Details
Authordanferns
LicenseCC Zero
Categorytlk.io
Created
Updated
Size803 B
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
This one also hides the header avatar, to show it again, simple remove the first .header-avatar rule.
Source code
/* ==UserStyle==
@name tlk.io
@version 20230827.07.16
@namespace ?
==/UserStyle== */
@-moz-document domain("tlk.io") {
/* hide the header avatar */
.header-avatar {
background: inherit !important;
pointer-events: none;
cursor: default;
}
/* wide desktop view */
@media (min-width: 761px) {
/* move the online list to the side */
.aside {
right: 14px;
margin-left: unset !important;
left: unset !important;
}
/* make the chat wider */
.chat {
width: 100%;
}
/* make the message input wider */
.footer-wrapper {
width: calc(100% - 100px);
}
}
/* extra breakpoint to match input to the message width */
@media (min-width: 920px) {
.footer-wrapper {
width: calc(100% - 300px);
}
}
}