1
0
Fork 0
mirror of https://we.phorge.it/source/phorge.git synced 2024-10-23 17:18:51 +02:00
phorge-phorge/webroot/rsrc/css/application/project/project-card-view.css
epriestley 90903282c7 Render user hovercards with context information about their ability to see the context object
Summary:
Ref T13602. When rendering a user hovercard, pass the object on which the reference appears. If the user can't see the object, make it clear on the hovecard.

Restyle the "nopermission" markup in mentions to make it more obvious what the style means: instead of grey text, use red with an explicit icon.

Test Plan: {F8430398}

Maniphest Tasks: T13602

Differential Revision: https://secure.phabricator.com/D21554
2021-02-13 13:37:37 -08:00

201 lines
4.4 KiB
CSS

/**
* @provides project-card-view-css
*/
.project-card-view {
margin: 0 12px 16px 0;
text-align: left;
background: {$page.content};
border: 1px solid {$lightblueborder};
border-radius: 3px;
box-shadow: {$dropshadow};
width: 420px;
position: relative;
}
.project-card-view .phui-header-shell {
margin: 0;
padding: 12px 12px 4px 12px;
border: none;
border-radius: 3px;
}
.project-card-view .phui-header-shell .phui-header-image {
border: 3px solid {$page.content};
border-radius: 3px;
background-color: {$page.content};
}
.project-card-view .phui-header-shell .phui-header-header {
font-size: 18px;
width: 290px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
display: block;
}
.project-card-view .project-card-image {
position: absolute;
height: 140px;
width: 140px;
top: 6px;
left: 6px;
border-radius: 3px;
}
.project-card-view .project-card-image-href {
display: block;
}
.project-card-view .project-card-item div {
display: inline;
}
.project-card-inner {
position: relative;
}
.people-card-view .project-card-inner {
padding: 6px;
min-height: 140px;
}
.project-card-view .project-card-item {
margin-bottom: 2px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.project-card-view .project-card-item-text {
color: {$greytext};
}
.project-card-view .project-card-item-exiled {
background-color: {$lightredbackground};
border-radius: 4px;
padding: 2px 8px;
margin: 2px 0;
}
.project-card-view .project-card-item-exiled .project-card-item-text {
color: {$red};
}
.project-card-view .project-card-item-icon {
width: 20px;
}
.project-card-view .project-card-header {
margin-top: 6px;
margin-left: 152px;
overflow: hidden;
}
.project-card-header .project-card-name {
font-size: 20px;
font-weight: bold;
color: {$blacktext};
margin-bottom: 2px;
text-overflow: ellipsis;
white-space: nowrap;
width: 250px;
overflow: hidden;
}
.project-card-header .project-card-username {
font-size: 14px;
color: {$bluetext};
margin-bottom: 12px;
}
.project-card-view .phui-header-shell .phui-header-col1 {
vertical-align: top;
width: 64px;
}
.project-card-view .phui-header-subheader {
font-size: {$normalfontsize};
margin-top: 12px;
padding-bottom: 12px;
}
.project-card-view .phui-header-header .phui-tag-view {
display: block;
font-weight: normal;
color: {$bluetext};
font-size: {$normalfontsize};
font-family: {$fontfamily};
margin-top: 8px;
}
.people-card-view .phui-header-subheader .phui-tag-core {
text-overflow: ellipsis;
white-space: nowrap;
max-width: 232px;
overflow: hidden;
display: inline-block;
}
.project-card-view .phui-header-header .phui-tag-view .phui-tag-core {
padding: 0;
}
.project-card-view .phui-header-header .phui-tag-view .phui-icon-view {
margin-left: 0;
color: {$bluetext};
}
.project-card-view .project-card-body {
padding: 0 12px 12px 12px;
color: {$darkbluetext};
}
/* Colors */
.project-card-view.project-card-red .phui-header-shell {
background: linear-gradient(to bottom,
{$sh-redbackground} 42px, {$page.content} 42px);
}
.project-card-view.project-card-orange .phui-header-shell {
background: linear-gradient(to bottom,
{$sh-orangebackground} 42px, {$page.content} 42px);
}
.project-card-view.project-card-yellow .phui-header-shell {
background: linear-gradient(to bottom,
{$sh-yellowbackground} 42px, {$page.content} 42px);
}
.project-card-view.project-card-green .phui-header-shell {
background: linear-gradient(to bottom,
{$sh-greenbackground} 42px, {$page.content} 42px);
}
.project-card-view.project-card-blue .phui-header-shell {
background: linear-gradient(to bottom,
{$sh-bluebackground} 42px, {$page.content} 42px);
}
.project-card-view.project-card-indigo .phui-header-shell {
background: linear-gradient(to bottom,
{$sh-indigobackground} 42px, {$page.content} 42px);
}
.project-card-view.project-card-violet .phui-header-shell {
background: linear-gradient(to bottom,
{$sh-violetbackground} 42px, {$page.content} 42px);
}
.project-card-view.project-card-pink .phui-header-shell {
background: linear-gradient(to bottom,
{$sh-pinkbackground} 42px, {$page.content} 42px);
}
.project-card-view.project-card-grey .phui-header-shell,
.project-card-view.project-card-checkered .phui-header-shell {
background: linear-gradient(to bottom,
{$sh-greybackground} 42px, {$page.content} 42px);
}