1
0
Fork 0
mirror of https://we.phorge.it/source/phorge.git synced 2024-12-24 06:20:56 +01:00
phorge-phorge/webroot/rsrc/css/layout/phabricator-hovercard-view.css
Bob Trahan 8e41315238 Hovercard - add project images
Summary:
adds project images. Also fiddles with HTML + CSS just a bit so we have a "picture" column and a "details" column if a picture exists.

This keeps the details all in a nice column even if there are many details that end up being taller than the picture UI.

Fixes T3991.

Test Plan: looked at a task (no pic), project (pic w/ no details), and user (pic w/ many details) hovercard and all looked good on Chrome and Safari

Reviewers: epriestley, chad

CC: chad, Korvin, epriestley, aran

Maniphest Tasks: T3991

Differential Revision: https://secure.phabricator.com/D8483
2014-03-10 17:10:32 -07:00

85 lines
1.5 KiB
CSS

/**
* @provides phabricator-hovercard-view-css
*/
.jx-hovercard-container {
position: absolute;
}
.phabricator-hovercard-wrapper {
float: left;
border-radius: 5px;
width: 400px;
padding: 6px;
background-color: rgba(0,0,0,.2);
}
.device-phone .phabricator-hovercard-wrapper {
float: left;
width: 300px;
}
.phabricator-hovercard-container {
float: left;
width: 100%;
border: 1px solid {$greytext};
}
.phabricator-hovercard-tags {
float: right;
white-space: normal;
}
.phabricator-hovercard-body {
float: left;
width: 100%;
padding: 8px 0px 8px 0px;
background-color: white;
color: {$darkgreytext};
}
.phabricator-hovercard-body-header,
.phabricator-hovercard-body-item {
margin: 0px 0px 0px 8px;
}
.phabricator-hovercard-body-header {
font-size: 13px;
padding-bottom: 2px;
color: {$darkgreytext};
}
.phabricator-hovercard-body .phabricator-hovercard-body-image {
clear: left;
float: left;
width: 58px;
}
.phabricator-hovercard-body .phabricator-hovercard-body-details {
clear: right;
float: left;
width: 342px;
}
.phabricator-hovercard-body .profile-header-picture-frame {
float: left;
margin: 0px 8px 0px 8px;
width: 50px;
height: 50px;
background-position: center;
background-repeat: no-repeat;
}
.phabricator-hovercard-tail {
width: 396px;
float: left;
padding: 3px 2px;
background-color: #eeeeee;
border-bottom-left-radius: 2px;
border-bottom-right-radius: 2px;
}
.phabricator-hovercard-tail button,
.phabricator-hovercard-tail a.button {
margin: 3px;
}