mirror of
https://we.phorge.it/source/phorge.git
synced 2024-10-23 17:18:51 +02:00
3a8ee271d9
Summary:
This small restyle makes any Removed Comment a little less
prominent than normal ones, with the goal of decreasing a
bit your in-page distractions and increase your individual
productivity in your business by at least 250 milliseconds
every 48 hours of hard work in front of your monitor.
| Before | After |
|---------------------|---------------------|
| {F274834,size=full} | {F274835,size=full} |
This implementation (which is called "Kasper on Diet")
contains these specific changes for Removed Comments:
- user icon visibility: reduced by ~50% (-> Kasper)
- black "trash" icon: reduced by ~50% (-> Diet)
- texts: visibility reduced by ~50%
- vertical padding: reduced from 16px down to 4px
Note that if your Phorge is under the Serious Business Mode,
it seems it is still technically possible to manually
activate the "Decaying Curse" proposal mentioned in the Task.
Closes T15192
Test Plan:
- Add a Comment "I love Phorge"
- Add a Comment "I love Phabricator"
- Mark the second Comment as Removed
- Call a person at your desk
- Plug that person to an eyeball tracker
If the general attention focuses first on a normal Comment and then
on the Removed Comment, this change works perfectly.
Reviewers: O1 Blessed Committers, Cigaryno, avivey
Reviewed By: O1 Blessed Committers, Cigaryno, avivey
Subscribers: speck, tobiaswiese, Matthew, Cigaryno
Tags: #comments
Maniphest Tasks: T15192
Differential Revision: https://we.phorge.it/D25096
460 lines
8.5 KiB
CSS
460 lines
8.5 KiB
CSS
/**
|
|
* @provides phui-timeline-view-css
|
|
*/
|
|
|
|
.phui-timeline-view {
|
|
padding: 0 16px;
|
|
background-image: url('/rsrc/image/d5d8e1.png');
|
|
background-repeat: repeat-y;
|
|
background-position: 96px;
|
|
}
|
|
|
|
.device .phui-timeline-view {
|
|
padding: 0 8px;
|
|
}
|
|
|
|
.device-tablet .phui-timeline-view {
|
|
background-position: 24px;
|
|
}
|
|
|
|
.device-phone .phui-timeline-view {
|
|
padding: 0;
|
|
background-position: 24px;
|
|
}
|
|
|
|
.phui-timeline-major-event .phui-timeline-group {
|
|
border-left: 1px solid {$timeline};
|
|
border-right: 1px solid {$timeline};
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.device-desktop .phui-timeline-event-view {
|
|
margin-left: 62px;
|
|
position: relative;
|
|
}
|
|
|
|
.device-desktop .phui-timeline-event-view.phui-timeline-minor-event {
|
|
margin-left: 67px;
|
|
}
|
|
|
|
.device-desktop .phui-timeline-spacer {
|
|
min-height: 16px;
|
|
}
|
|
|
|
.device-desktop .phui-timeline-event-view.the-worlds-end {
|
|
background: {$lightblueborder};
|
|
width: 9px;
|
|
height: 9px;
|
|
border-radius: 2px;
|
|
margin-left: 76px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.device-desktop .phui-timeline-wedge {
|
|
border-bottom: 1px solid {$timeline};
|
|
position: absolute;
|
|
width: 12px;
|
|
}
|
|
|
|
.device-phone .phui-timeline-minor-event,
|
|
.device-tablet .phui-timeline-minor-event {
|
|
padding-left: 3px;
|
|
}
|
|
|
|
.phui-timeline-major-event .phui-timeline-content {
|
|
border-top: 1px solid {$timeline};
|
|
border-bottom: 1px solid {$timeline};
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.phui-timeline-title {
|
|
line-height: 24px;
|
|
min-height: 19px;
|
|
position: relative;
|
|
color: {$greytext};
|
|
}
|
|
|
|
.phui-timeline-minor-event .phui-timeline-title {
|
|
padding: 1px 8px 4px 33px;
|
|
}
|
|
|
|
.phui-timeline-title a {
|
|
font-weight: bold;
|
|
color: {$darkgreytext};
|
|
}
|
|
|
|
.device-desktop .phui-timeline-wedge {
|
|
left: -12px;
|
|
}
|
|
|
|
.device-desktop .phui-timeline-major-event .phui-timeline-wedge {
|
|
top: 26px;
|
|
}
|
|
|
|
.device-desktop .phui-timeline-minor-event .phui-timeline-wedge {
|
|
top: 12px;
|
|
left: -18px;
|
|
width: 20px;
|
|
}
|
|
|
|
.phui-timeline-image {
|
|
background-repeat: no-repeat;
|
|
position: absolute;
|
|
border-radius: 3px;
|
|
background-size: 100%;
|
|
display: block;
|
|
}
|
|
|
|
.device-desktop .phui-timeline-major-event .phui-timeline-image {
|
|
width: 50px;
|
|
height: 50px;
|
|
top: 0px;
|
|
left: -62px;
|
|
}
|
|
|
|
.device-desktop .phui-timeline-minor-event .phui-timeline-image {
|
|
width: 26px;
|
|
height: 26px;
|
|
background-size: 26px auto;
|
|
left: -41px;
|
|
}
|
|
|
|
.phui-timeline-major-event .phui-timeline-title {
|
|
background: {$lightgreybackground};
|
|
min-height: 22px;
|
|
border-top-right-radius: 3px;
|
|
border-top-left-radius: 3px;
|
|
}
|
|
|
|
.phui-timeline-major-event .phui-timeline-title + .phui-timeline-title {
|
|
border-radius: 0;
|
|
padding-top: 0;
|
|
}
|
|
|
|
.phui-timeline-major-event .phui-timeline-title + .phui-timeline-title
|
|
.phui-timeline-icon-fill {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.phui-timeline-title {
|
|
padding: 5px 8px;
|
|
overflow-x: auto;
|
|
overflow-y: hidden;
|
|
}
|
|
|
|
.phui-timeline-title-with-icon {
|
|
padding-left: 36px;
|
|
}
|
|
|
|
.phui-timeline-title-with-menu {
|
|
padding-right: 36px;
|
|
}
|
|
|
|
.phui-timeline-view .phui-icon-view.phui-timeline-token {
|
|
vertical-align: middle;
|
|
margin-right: 4px;
|
|
}
|
|
|
|
.phui-timeline-token.strikethrough {
|
|
position: relative;
|
|
}
|
|
|
|
.phui-timeline-token.strikethrough:before {
|
|
position: absolute;
|
|
content: "";
|
|
left: 0;
|
|
top: 50%;
|
|
right: 0;
|
|
border-top: 3px solid;
|
|
border-color: {$darkbluetext};
|
|
|
|
-webkit-transform:rotate(-40deg);
|
|
-moz-transform:rotate(-40deg);
|
|
-ms-transform:rotate(-40deg);
|
|
-o-transform:rotate(-40deg);
|
|
transform:rotate(-40deg);
|
|
}
|
|
|
|
.phui-timeline-major-event .phui-timeline-content
|
|
.phui-timeline-core-content {
|
|
padding: 16px;
|
|
line-height: 18px;
|
|
background: {$page.content};
|
|
border-top: 1px solid rgba({$alphablue},.1);
|
|
border-bottom-left-radius: 3px;
|
|
border-bottom-right-radius: 3px;
|
|
}
|
|
|
|
.phui-timeline-core-content {
|
|
overflow-x: auto;
|
|
}
|
|
|
|
/*
|
|
* Start Customization for removed comments
|
|
* https://we.phorge.it/T15192
|
|
*/
|
|
|
|
.phui-timeline-core-content .comment-deleted {
|
|
font-style: italic;
|
|
}
|
|
.phui-timeline-shell-removed .phui-timeline-image {
|
|
opacity: 0.5;
|
|
}
|
|
.phui-timeline-shell-removed,
|
|
.phui-timeline-shell-removed a,
|
|
.phui-timeline-shell-removed .phui-timeline-title {
|
|
color:#888; /* grey */
|
|
}
|
|
.phui-timeline-shell-removed
|
|
.phui-timeline-major-event
|
|
.phui-timeline-content .phui-timeline-core-content {
|
|
padding:4px 16px; /* reduce vertical space from 16px */
|
|
}
|
|
|
|
/* End Customization for removed comments */
|
|
|
|
.device .phui-timeline-event-view {
|
|
min-height: 23px;
|
|
position: relative;
|
|
}
|
|
|
|
.device-phone .phui-timeline-event-view {
|
|
margin: 0 8px;
|
|
}
|
|
|
|
.device .phui-timeline-image {
|
|
display: none;
|
|
}
|
|
|
|
.device .phui-timeline-spacer {
|
|
min-height: 8px;
|
|
border-width: 0;
|
|
}
|
|
|
|
.phui-timeline-icon-fill {
|
|
position: absolute;
|
|
width: 34px;
|
|
height: 34px;
|
|
top: 0;
|
|
left: 0;
|
|
text-align: center;
|
|
}
|
|
|
|
.phui-timeline-icon {
|
|
color: {$bluetext};
|
|
}
|
|
|
|
.phui-icon-view.phui-timeline-icon {
|
|
font-size: 14px;
|
|
}
|
|
|
|
.phui-timeline-icon-fill {
|
|
height: 26px;
|
|
width: 26px;
|
|
border-radius: 3px;
|
|
background-color: {$timeline.icon.background};
|
|
}
|
|
|
|
.phui-timeline-major-event .phui-timeline-icon-fill {
|
|
margin: 4px;
|
|
}
|
|
|
|
.phui-timeline-icon-fill .phui-timeline-icon {
|
|
margin-top: 6px;
|
|
}
|
|
|
|
.phui-timeline-extra,
|
|
.phui-timeline-extra .phabricator-content-source-view {
|
|
font-size: {$smallerfontsize};
|
|
font-weight: normal;
|
|
color: {$lightgreytext};
|
|
margin-left: 8px;
|
|
}
|
|
|
|
.phui-timeline-title .phui-timeline-extra a {
|
|
font-weight: normal;
|
|
color: {$lightgreytext};
|
|
}
|
|
|
|
.phui-timeline-title .phui-timeline-value,
|
|
.conpherence-transaction-content .phui-timeline-value,
|
|
.phui-feed-story-head .phui-timeline-value {
|
|
font-style: italic;
|
|
color: {$blacktext};
|
|
}
|
|
|
|
.device-desktop .phui-timeline-extra {
|
|
float: right;
|
|
}
|
|
|
|
.device .phui-timeline-extra {
|
|
display: inline-block;
|
|
line-height: 16px;
|
|
margin-left: 8px;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.device-phone .phui-timeline-extra {
|
|
display: block;
|
|
margin: 0;
|
|
}
|
|
|
|
.phui-timeline-icon-fill.fill-has-color .phui-icon-view {
|
|
color: {$page.content};
|
|
}
|
|
|
|
.phui-timeline-icon-fill-red {
|
|
background-color: {$red};
|
|
}
|
|
|
|
.phui-timeline-icon-fill-orange {
|
|
background-color: {$orange};
|
|
}
|
|
|
|
.phui-timeline-icon-fill-yellow {
|
|
background-color: {$yellow};
|
|
}
|
|
|
|
.phui-timeline-icon-fill-green {
|
|
background-color: {$green};
|
|
}
|
|
|
|
.phui-timeline-icon-fill-sky {
|
|
background-color: {$sky};
|
|
}
|
|
|
|
.phui-timeline-icon-fill-blue {
|
|
background-color: {$blue};
|
|
}
|
|
|
|
.phui-timeline-icon-fill-indigo {
|
|
background-color: {$indigo};
|
|
}
|
|
|
|
.phui-timeline-icon-fill-violet {
|
|
background-color: {$violet};
|
|
}
|
|
|
|
.phui-timeline-icon-fill-pink {
|
|
background-color: {$pink};
|
|
}
|
|
|
|
.phui-timeline-icon-fill-grey {
|
|
background-color: #888;
|
|
}
|
|
|
|
.phui-timeline-icon-fill-black {
|
|
background-color: #000;
|
|
}
|
|
|
|
.phui-timeline-shell.anchor-target {
|
|
background: {$lightyellow};
|
|
border-width: 0 1px 0 0;
|
|
border-style: solid;
|
|
border-color: {$yellow};
|
|
padding: 4px;
|
|
margin: -4px;
|
|
}
|
|
|
|
.phui-timeline-preview-header {
|
|
background: #e0e3ec;
|
|
color: {$darkgreytext};
|
|
padding: 4px 1.25%;
|
|
border: solid {$blueborder} 1px 0;
|
|
}
|
|
|
|
.phui-timeline-change-details {
|
|
padding: 10px 0;
|
|
border-style: solid;
|
|
border-color: #efefef;
|
|
border-width: 1px 0;
|
|
}
|
|
|
|
.phui-timeline-older-transactions-are-hidden {
|
|
background: {$gentle.highlight};
|
|
border: 1px solid {$gentle.highlight.border};
|
|
text-align: center;
|
|
padding: 12px;
|
|
color: {$darkgreytext};
|
|
cursor: pointer;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.device-phone .phui-timeline-older-transactions-are-hidden {
|
|
margin: 0 8px;
|
|
}
|
|
|
|
.phui-timeline-title .phui-timeline-extra-information a {
|
|
font-weight: normal;
|
|
color: {$greytext};
|
|
}
|
|
|
|
.phui-timeline-comment-actions .phui-icon-view {
|
|
width: 16px;
|
|
height: 16px;
|
|
font-size: 16px;
|
|
text-align: center;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.phui-timeline-menu {
|
|
position: absolute;
|
|
right: 3px;
|
|
top: 6px;
|
|
width: 28px;
|
|
height: 24px;
|
|
text-align: center;
|
|
line-height: 22px;
|
|
font-size: 16px;
|
|
border-left: 1px solid {$thinblueborder};
|
|
}
|
|
|
|
.phui-timeline-menu:focus {
|
|
outline: none;
|
|
}
|
|
|
|
a.phui-timeline-menu .phui-icon-view {
|
|
color: {$bluetext};
|
|
}
|
|
|
|
.device-desktop a.phui-timeline-menu:hover .phui-icon-view {
|
|
color: {$sky};
|
|
}
|
|
|
|
.phui-timeline-menu.phuix-dropdown-open {
|
|
background: rgba({$alphablue},0.1);
|
|
border: none;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.phui-timeline-view + .phui-object-box {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.phui-timeline-badges {
|
|
position: absolute;
|
|
left: -64px;
|
|
top: 52px;
|
|
width: 54px;
|
|
text-align: center;
|
|
}
|
|
|
|
.phui-timeline-badges .phui-badge-mini {
|
|
height: 18px;
|
|
width: 18px;
|
|
line-height: 16px;
|
|
}
|
|
|
|
.phui-timeline-badges .phui-badge-mini .phui-icon-view {
|
|
font-size: 10px;
|
|
}
|
|
|
|
.phui-comment-preview-view {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.phui-timeline-view .phui-pinboard-view {
|
|
margin: 8px 0 0 0;
|
|
padding: 0;
|
|
text-align: left;
|
|
}
|