1
0
Fork 0
mirror of https://we.phorge.it/source/phorge.git synced 2024-12-25 23:10:57 +01:00
phorge-phorge/webroot/rsrc/css/phui/phui-curtain-object-ref-view.css
epriestley 0e82bd024a Use the new "CurtainObjectRefList" UI element for subscribers
Summary:
Depends on D20966. Ref T13486. Curtains currently render subscribers in a plain text list, but the new ref list element is a good fit for this.

Also, improve the sorting and ordering behavior.

This makes the subscriber list take up a bit more space, but it should make it a lot easier to read at a glance.

Test Plan: Viewed object subscriber lists at varying limits and subscriber counts, saw sensible subscriber lists.

Maniphest Tasks: T13486

Differential Revision: https://secure.phabricator.com/D20967
2020-02-04 12:38:41 -08:00

84 lines
1.7 KiB
CSS

/**
* @provides phui-curtain-object-ref-view-css
*/
.phui-curtain-object-ref-list-view-empty {
font-style: italic;
color: {$greytext};
}
.phui-curtain-object-ref-view {
padding: 4px 6px;
border-radius: 3px;
}
.phui-curtain-object-ref-view-image-cell {
min-width: 32px;
padding-bottom: 24px;
}
.phui-curtain-object-ref-view-image-cell > a {
height: 24px;
width: 24px;
background-size: 100%;
border-radius: 3px;
display: block;
position: absolute;
}
.phui-curtain-object-ref-view-image-cell .phui-icon-view {
font-size: 16px;
line-height: 16px;
vertical-align: middle;
text-align: center;
width: 24px;
height: 24px;
top: 3px;
display: block;
position: absolute;
color: #ffffff;
}
.phui-curtain-object-ref-view-icon-image {
background-color: {$backdrop};
}
.phui-curtain-object-ref-view-title-cell {
font-weight: bold;
text-overflow: ellipsis;
overflow: hidden;
/* This is forcing "text-overflow: ellipsis" to actually work. */
max-width: 210px;
}
.phui-curtain-object-ref-view-without-content >
.phui-curtain-object-ref-view-title-cell {
vertical-align: middle;
}
.phui-curtain-object-ref-view-with-content >
.phui-curtain-object-ref-view-image-cell > a {
margin-top: 4px;
}
.phui-curtain-object-ref-view-title-cell > a {
color: {$darkgreytext};
}
.phui-curtain-object-ref-view-epoch-cell {
color: {$greytext};
}
.phui-curtain-object-ref-list-view-tail {
text-align: center;
margin-top: 8px;
padding: 4px;
background: {$lightgreybackground};
border-top: 1px dashed {$thinblueborder};
box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.04);
}
.phui-curtain-object-ref-view-highlighted {
background: {$bluebackground};
}