supernets/hardlounge
supernets/hardlounge
4
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #2270 from thelounge/xpaw/mask-image

Browse Source 
Replace pseudo element gradient fade with mask-image
This commit is contained in:
Pavel Djundik 2018-03-29 21:29:54 +03:00 committed by GitHub
commit 2e964d0a7e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 7 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
client/css/style.css
View File

@ -644,14 +644,10 @@ kbd {
margin-right: 5px; margin-right: 5px;
} }
#sidebar .chan .name::after { #windows .header .topic,
position: absolute; #sidebar .chan .name {
top: 0; -webkit-mask-image: linear-gradient(to left, transparent, black 20px);
right: 0; mask-image: linear-gradient(to left, transparent, black 20px);
bottom: 0;
width: 20px;
background: linear-gradient(to right, rgba(69, 81, 100, 0) 0%, rgba(69, 81, 100, 1) 100%);
content: " ";
} }
#sidebar .badge, #sidebar .badge,
@ -916,9 +912,7 @@ kbd {
margin-left: 8px; margin-left: 8px;
word-break: break-all; word-break: break-all;
flex-grow: 1; flex-grow: 1;
white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis;
font-size: 14px; font-size: 14px;
} }
@ -2216,22 +2210,11 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
@media (min-width: 480px) { @media (min-width: 480px) {
/* Fade out for long usernames */ /* Fade out for long usernames */
#chat .from { #chat .from {
padding-left: 10px; padding-left: 10px;
-webkit-mask-image: linear-gradient(to left, transparent, black 10px);
mask-image: linear-gradient(to left, transparent, black 10px);
} }
#chat .from::after {
position: absolute;
right: 0;
bottom: 0;
width: 10px;
height: 100%;
background: linear-gradient(to right, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 1) 100%);
content: " ";
}
/* End fade out for long usernames */
} }
@media (max-width: 768px) { @media (max-width: 768px) {
@ -2515,6 +2498,7 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
/* Correctly handle multiple successive whitespace characters. /* Correctly handle multiple successive whitespace characters.
For example: user has quit ( ===> L O L <=== ) */ For example: user has quit ( ===> L O L <=== ) */
#windows .header .topic,
#chat .message .text, #chat .message .text,
#chat .motd .text, #chat .motd .text,
#chat .notice .text, #chat .notice .text,

4
client/themes/crypto.css
View File

@ -68,10 +68,6 @@ a:hover,
color: #00ff0e; color: #00ff0e;
} }
#sidebar .chan .name::after {
background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
}
#sidebar button, #sidebar button,
#sidebar .chan, #sidebar .chan,
#chat .time, #chat .time,

6
client/themes/morning.css
View File

@ -250,9 +250,3 @@ kbd {
} }
/* End form elements */ /* End form elements */
@media (min-width: 480px) {
#chat .from::after {
background: linear-gradient(to right, rgba(51, 60, 74, 0.5) 0%, rgba(51, 60, 74, 1) 100%);
}
}

10
client/themes/zenburn.css
View File

@ -54,10 +54,6 @@ body {
background: #2b2b2b; background: #2b2b2b;
} }
#sidebar .chan .name::after {
background: linear-gradient(to right, rgba(43, 43, 43, 0) 0%, rgba(43, 43, 43, 1) 100%);
}
#footer { #footer {
background: #333; background: #333;
border-top: 1px solid #000; border-top: 1px solid #000;
@ -277,9 +273,3 @@ kbd {
} }
/* End form elements */ /* End form elements */
@media (min-width: 480px) {
#chat .from::after {
background: linear-gradient(to right, rgba(63, 63, 63, 0.5) 0%, rgba(63, 63, 63, 1) 100%);
}
}