Fade out for long usernames.
This commit is contained in:
parent
45df995d7f
commit
035d10005a
@ -911,6 +911,9 @@ kbd {
|
|||||||
padding-right: 10px;
|
padding-right: 10px;
|
||||||
text-align: right;
|
text-align: right;
|
||||||
width: 134px;
|
width: 134px;
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
#chat .text {
|
#chat .text {
|
||||||
@ -1810,6 +1813,25 @@ kbd {
|
|||||||
font-style: italic;
|
font-style: italic;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media (min-width: 480px) {
|
||||||
|
/* Fade out for long usernames */
|
||||||
|
|
||||||
|
#chat .from {
|
||||||
|
padding-left: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#chat .from:after {
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
width: 10px;
|
||||||
|
height: 100%;
|
||||||
|
background: linear-gradient(to right, rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, 1) 100%);
|
||||||
|
content: " ";
|
||||||
|
}
|
||||||
|
|
||||||
|
/* End fade out for long usernames */
|
||||||
|
}
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
@media (max-width: 768px) {
|
||||||
/**
|
/**
|
||||||
* TODO Replace this with `@media (hover: hover)` when Firefox supports it
|
* TODO Replace this with `@media (hover: hover)` when Firefox supports it
|
||||||
|
@ -253,3 +253,9 @@ body {
|
|||||||
}
|
}
|
||||||
|
|
||||||
/* End form elements */
|
/* End form elements */
|
||||||
|
|
||||||
|
@media (min-width: 480px) {
|
||||||
|
#chat .from:after {
|
||||||
|
background: linear-gradient(to right, rgba(51, 60, 74, .5) 0%, rgba(51, 60, 74, 1) 100%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@ -279,3 +279,9 @@ body {
|
|||||||
}
|
}
|
||||||
|
|
||||||
/* End form elements */
|
/* End form elements */
|
||||||
|
|
||||||
|
@media (min-width: 480px) {
|
||||||
|
#chat .from:after {
|
||||||
|
background: linear-gradient(to right, rgba(63, 63, 63, .5) 0%, rgba(63, 63, 63, 1) 100%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user