rowan/multi-account-containers
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fixed issue where items with too-long page titles wrapped in tab list of specific container inside the panel

Browse source
This commit is contained in:
Maxx Crawford 2020-05-27 10:14:33 -05:00
parent b47844b43a
commit d901ba9067
1 changed files with 24 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
src/css/popup.css
View file

@ -107,12 +107,28 @@ table {
/* Effect borrowed from tabs in Firefox, ensure that the element flexes to the full width */ /* Effect borrowed from tabs in Firefox, ensure that the element flexes to the full width */
.truncate-text { .truncate-text {
position: relative;
inline-size: 100%; inline-size: 100%;
mask-image: linear-gradient(to left, transparent, black 1em);
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
} }
.truncate-text::after {
position: absolute;
mask-image: linear-gradient(to right, transparent, white 70%);
content: " ";
inline-size: 50px;
height: 100%;
inset-inline-end: 0;
background: white;
}
.hover-highlight:hover .truncate-text::after,
.hover-highlight:focus .truncate-text::after {
mask-image: linear-gradient(to right, transparent, var(--highlight-blue) 50%);
background: var(--highlight-blue);
}
/* Color and icon helpers */ /* Color and icon helpers */
[data-identity-color="blue"] { [data-identity-color="blue"] {
--identity-tab-color: #37adff; --identity-tab-color: #37adff;
@ -674,6 +690,11 @@ h3.title {
line-height: 24px; line-height: 24px;
} }
.menu-item td {
display: flex;
max-inline-size: 300px;
}
.disabled-menu-item { .disabled-menu-item {
color: grey; color: grey;
cursor: default; cursor: default;
@ -687,12 +708,13 @@ h3.title {
} }
.menu-text { .menu-text {
inline-size: calc(100% - 40px);
max-inline-size: 260px;
line-height: 24px; line-height: 24px;
} }
.menu-icon { .menu-icon {
display: block; display: block;
float: left;
height: 16px; height: 16px;
inline-size: 16px; inline-size: 16px;
margin-block-end: 4px; margin-block-end: 4px;
@ -703,8 +725,6 @@ h3.title {
} }
.menu-right-float { .menu-right-float {
display: inline-block;
float: right;
height: 24px; height: 24px;
inline-size: 60px; inline-size: 60px;
text-align: right; text-align: right;