mirror of
https://we.phorge.it/source/phorge.git
synced 2024-11-10 08:52:39 +01:00
1d5551789d
Summary:
This is still rough and not completely accurate to the mocks (and the mobile view is quite crude and mostly just "hey this technically works"), but I want to build Pholio on top of it rather than building it on something else and then swapping it out later and the API is reasonable enough.
This should probably be called `PhabricatorTransactionView` but we already have one of those. I might juggle the names in a future diff.
Test Plan:
Desktop
{F22352}
Mobile
{F22351}
Reviewers: chad, btrahan
Reviewed By: btrahan
CC: aran
Maniphest Tasks: T2097
Differential Revision: https://secure.phabricator.com/D3833
136 lines
2.8 KiB
CSS
136 lines
2.8 KiB
CSS
/**
|
|
* @provides phabricator-timeline-view-css
|
|
*/
|
|
|
|
.phabricator-timeline-event-view {
|
|
border-width: 0 0 0 3px;
|
|
border-style: solid;
|
|
border-color: #eaeaea;
|
|
}
|
|
|
|
.device-desktop .phabricator-timeline-event-view {
|
|
margin-left: 80px;
|
|
margin-right: 12px;
|
|
position: relative;
|
|
}
|
|
|
|
.device-desktop .phabricator-timeline-spacer {
|
|
min-height: 10px;
|
|
border-right-width: 0;
|
|
}
|
|
|
|
.device-desktop .phabricator-timeline-major-event {
|
|
border-right-width: 3px;
|
|
}
|
|
|
|
.device-desktop .phabricator-timeline-wedge {
|
|
border-bottom: 3px solid #eaeaea;
|
|
position: absolute;
|
|
width: 10px;
|
|
}
|
|
|
|
.device-desktop .phabricator-timeline-major-event
|
|
.phabricator-timeline-content {
|
|
min-height: 70px;
|
|
}
|
|
|
|
.phabricator-timeline-major-event .phabricator-timeline-content {
|
|
border-style: solid;
|
|
border-color: #eaeaea;
|
|
border-width: 1px 0;
|
|
}
|
|
|
|
.device-desktop .phabricator-timeline-minor-event
|
|
.phabricator-timeline-content {
|
|
margin-left: 35px;
|
|
padding: 5px 0;
|
|
min-height: 25px;
|
|
}
|
|
|
|
.device-desktop .phabricator-timeline-title {
|
|
line-height: 25px;
|
|
}
|
|
|
|
.device-desktop .phabricator-timeline-major-event .phabricator-timeline-wedge {
|
|
left: -10px;
|
|
top: 34px;
|
|
}
|
|
|
|
.device-desktop .phabricator-timeline-minor-event .phabricator-timeline-wedge {
|
|
left: 0px;
|
|
top: 17px;
|
|
}
|
|
|
|
.phabricator-timeline-image {
|
|
background: #eaeaea;
|
|
background-repeat: no-repeat;
|
|
position: absolute;
|
|
}
|
|
|
|
.device-desktop .phabricator-timeline-major-event .phabricator-timeline-image {
|
|
width: 50px;
|
|
height: 50px;
|
|
top: 10px;
|
|
left: -60px;
|
|
}
|
|
|
|
.device-desktop .phabricator-timeline-minor-event .phabricator-timeline-image {
|
|
width: 25px;
|
|
height: 25px;
|
|
background-size: 25px auto;
|
|
top: 5px;
|
|
left: 10px;
|
|
}
|
|
|
|
.device-desktop .phabricator-timeline-major-event
|
|
.phabricator-timeline-standard-title {
|
|
background: #f7f7f7;
|
|
}
|
|
|
|
.device-desktop .phabricator-timeline-standard-title {
|
|
padding: 0 5px;
|
|
}
|
|
|
|
.phabricator-timeline-major-event .phabricator-timeline-standard-content
|
|
.phabricator-timeline-core-content {
|
|
padding: 5px;
|
|
}
|
|
|
|
|
|
.phabricator-timeline-red .phabricator-timeline-border {
|
|
border-color: #dd0000;
|
|
}
|
|
|
|
.phabricator-timeline-green .phabricator-timeline-border {
|
|
border-color: #009966;
|
|
}
|
|
|
|
.device-tablet .phabricator-timeline-event-view,
|
|
.device-phone .phabricator-timeline-event-view {
|
|
min-height: 25px;
|
|
position: relative;
|
|
margin-left: 3px;
|
|
margin-right: 3px;
|
|
|
|
border-right-width: 3px;
|
|
border-right-style: solid;
|
|
}
|
|
|
|
.device-tablet .phabricator-timeline-image,
|
|
.device-phone .phabricator-timeline-image {
|
|
display: none;
|
|
}
|
|
|
|
.device-tablet .phabricator-timeline-title,
|
|
.device-phone .phabricator-timeline-title {
|
|
line-height: 25px;
|
|
min-height: 25px;
|
|
background: #f7f7f7;
|
|
padding: 0 5px;
|
|
}
|
|
|
|
.device-tablet .phabricator-timeline-spacer,
|
|
.device-phone .phabricator-timeline-spacer {
|
|
min-height: 8px;
|
|
border-width: 0;
|
|
}
|