mirror of https://github.com/Chocobozzz/PeerTube
Refactor ellipsis CSS
parent
6d28a5056e
commit
ef80c66cea
|
@ -58,12 +58,10 @@
|
||||||
|
|
||||||
.video-info-account {
|
.video-info-account {
|
||||||
@include disable-default-a-behaviour;
|
@include disable-default-a-behaviour;
|
||||||
|
@include ellipsis;
|
||||||
|
|
||||||
display: block;
|
display: block;
|
||||||
width: fit-content;
|
width: fit-content;
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
white-space: nowrap;
|
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
color: $grey-foreground-color;
|
color: $grey-foreground-color;
|
||||||
|
|
||||||
|
|
|
@ -48,9 +48,8 @@
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|
||||||
.instance-name {
|
.instance-name {
|
||||||
overflow: hidden;
|
@include ellipsis;
|
||||||
text-overflow: ellipsis;
|
|
||||||
white-space: nowrap;
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -10,12 +10,12 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
menu {
|
menu {
|
||||||
|
@include ellipsis;
|
||||||
|
|
||||||
background-color: var(--menuBackgroundColor);
|
background-color: var(--menuBackgroundColor);
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
white-space: nowrap;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
color: var(--menuForegroundColor);
|
color: var(--menuForegroundColor);
|
||||||
display: flex;
|
display: flex;
|
||||||
|
@ -40,10 +40,9 @@ menu {
|
||||||
margin-bottom: 35px;
|
margin-bottom: 35px;
|
||||||
|
|
||||||
.logged-in-info {
|
.logged-in-info {
|
||||||
|
@include ellipsis;
|
||||||
|
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
white-space: nowrap;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
|
|
||||||
.logged-in-display-name {
|
.logged-in-display-name {
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
|
@ -55,11 +54,10 @@ menu {
|
||||||
}
|
}
|
||||||
|
|
||||||
.logged-in-username {
|
.logged-in-username {
|
||||||
|
@include ellipsis;
|
||||||
|
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
color: #C6C6C6;
|
color: #C6C6C6;
|
||||||
white-space: nowrap;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
max-width: 140px;
|
max-width: 140px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -80,12 +80,10 @@
|
||||||
|
|
||||||
.video-info-account {
|
.video-info-account {
|
||||||
@include disable-default-a-behaviour;
|
@include disable-default-a-behaviour;
|
||||||
|
@include ellipsis;
|
||||||
|
|
||||||
display: block;
|
display: block;
|
||||||
width: fit-content;
|
width: fit-content;
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
white-space: nowrap;
|
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
color: $grey-foreground-color;
|
color: $grey-foreground-color;
|
||||||
|
|
||||||
|
|
|
@ -44,11 +44,9 @@
|
||||||
.video-miniature-account,
|
.video-miniature-account,
|
||||||
.video-miniature-channel {
|
.video-miniature-channel {
|
||||||
@include disable-default-a-behaviour;
|
@include disable-default-a-behaviour;
|
||||||
|
@include ellipsis;
|
||||||
|
|
||||||
display: block;
|
display: block;
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
white-space: nowrap;
|
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
color: $grey-foreground-color;
|
color: $grey-foreground-color;
|
||||||
|
|
||||||
|
|
|
@ -18,6 +18,12 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@mixin ellipsis {
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
/**
|
/**
|
||||||
* This mixin will crop text in block for needed amount of lines and put ellipsis at the end
|
* This mixin will crop text in block for needed amount of lines and put ellipsis at the end
|
||||||
*
|
*
|
||||||
|
|
Loading…
Reference in New Issue