1
0
Fork 0
mirror of https://we.phorge.it/source/phorge.git synced 2025-02-24 12:39:04 +01:00
phorge-phorge/webroot/rsrc/css/phui/phui-crumbs-view.css
Andre Klapper 0bd8388684 Strike through archived projects in navigation crumbs
Summary:
Going to e.g. the workboard of an archived project, there is no indication when the project has been archived (the blurred project icon is only displayed if the viewport width is >920px). This can lead to confusion why a workboard is completely empty.
Thus render an archived project as strike-through in the navigation bread crumbs.

Closes T15890

Test Plan:
* Go to the {Profile, Workboard, Reports, Members, Subprojects, Reports} pages of an active and an archived project and look at the navigation crumbs bar below Phorge's global top bar.
* Create an active subproject and active milestone of an archived project (and vice versa) and look at the navigation crumbs.

Reviewers: O1 Blessed Committers, valerio.bozzolan

Reviewed By: O1 Blessed Committers, valerio.bozzolan

Subscribers: tobiaswiese, valerio.bozzolan, Matthew, Cigaryno

Tags: #projects

Maniphest Tasks: T15890

Differential Revision: https://we.phorge.it/D25774
2025-02-03 18:56:59 +01:00

142 lines
2.8 KiB
CSS

/**
* @provides phui-crumbs-view-css
*/
.phui-crumbs-view {
overflow: hidden;
vertical-align: top;
padding: 0 12px 0 20px;
/* TODO: Position this over the slider for Differential's file tree view.
Remove this once that gets sorted out. */
position: relative;
-webkit-font-smoothing: antialiased;
background-color: {$page.background};
}
.printable .phui-crumbs-view {
display: none;
}
.phui-crumbs-view,
.phui-crumbs-view a.phui-crumb-view,
.phui-crumbs-view a.phui-crumbs-action {
color: {$darkbluetext};
font-weight: bold;
text-decoration: none;
}
.device-tablet .phui-crumbs-view,
.device-phone .phui-crumbs-view,
.project-board-nav .phui-crumbs-view {
padding-left: 8px;
padding-right: 8px;
}
.phui-crumbs-view a.phui-crumbs-action-disabled,
.phui-crumbs-view a.phui-crumbs-action-disabled .phui-icon-view {
color: {$lightgreytext};
}
.phui-crumbs-view + .phui-header-shell {
border-top: none;
}
.device-desktop .phui-crumbs-view a:hover {
text-decoration: underline;
}
.phui-crumb-view {
float: left;
padding: 8px 0;
max-width: 240px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.device-phone .phui-crumb-view.phabricator-last-crumb .phui-crumb-name,
.device-phone .phui-crumb-view.phui-crumb-always-visible .phui-crumb-name,
.device-phone .phui-crumb-view.phui-crumb-always-visible + .phui-crumb-divider,
.device-phone .phui-crumb-view.phui-crumb-has-icon,
.device-phone .phui-crumb-has-icon + .phui-crumb-divider {
display: inline-block;
}
.device-phone .phui-crumb-name,
.device-phone .phui-crumb-divider {
display: none;
}
.phui-crumb-has-icon .phui-icon-view {
margin: 0 4px;
}
.phui-crumb-strikethrough > .phui-crumb-name {
text-decoration: line-through;
}
.device-phone .phui-crumb-icon {
margin-left: 7px;
}
.phui-crumbs-actions {
float: right;
white-space: nowrap;
}
.phui-crumbs-action {
display: inline-block;
height: 17px;
padding: 8px 12px;
position: relative;
}
.device-phone a.phui-crumbs-action {
padding: 8px 6px;
}
.device-desktop .phui-crumbs-view a:hover,
.device-desktop .phui-crumbs-view a:hover .phui-icon-view {
color: {$blue};
text-decoration: none;
}
.device-phone .phui-crumbs-action-name {
display: none;
}
a.phui-crumbs-action .phui-icon-view {
color: {$darkbluetext};
}
a.phui-crumbs-action .phui-crumbs-action-name {
margin-left: 6px;
}
.device-phone a.phui-crumbs-action .phui-icon-view {
margin-left: 4px;
}
.phui-crumb-divider {
margin: 2px 8px;
}
.phui-crumbs-view.phui-crumbs-border {
border-bottom: 1px solid rgba({$alphagrey},.1);
}
body .phui-crumbs-view + .phui-object-box {
margin-top: 0;
}
body .phui-crumbs-view + .phui-oi-list-view {
padding-top: 0;
}
.phui-crumb-action-divider {
border-left: 1px solid {$lightgreyborder};
}
.phui-crumbs-action-icon + .phui-crumbs-action-icon {
padding-left: 4px;
}