2012-08-15 19:45:06 +02:00
|
|
|
/**
|
2013-09-17 18:12:37 +02:00
|
|
|
* @provides phui-header-view-css
|
2012-08-15 19:45:06 +02:00
|
|
|
*/
|
|
|
|
|
2013-09-17 18:12:37 +02:00
|
|
|
.phui-header-shell {
|
2015-05-18 19:00:15 +02:00
|
|
|
border-bottom: 1px solid {$thinblueborder};
|
2013-07-10 01:23:22 +02:00
|
|
|
overflow: hidden;
|
2015-05-22 17:22:25 +02:00
|
|
|
padding: 0 4px 12px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.phui-header-view {
|
|
|
|
display: table;
|
|
|
|
width: 100%
|
|
|
|
}
|
|
|
|
|
|
|
|
.phui-header-row {
|
|
|
|
display: table-row;
|
|
|
|
}
|
|
|
|
|
|
|
|
.phui-header-col1 {
|
|
|
|
display: table-cell;
|
|
|
|
vertical-align: middle;
|
|
|
|
width: 62px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.phui-header-col2 {
|
|
|
|
display: table-cell;
|
|
|
|
vertical-align: middle;
|
2015-06-26 01:13:32 +02:00
|
|
|
word-break: break-word;
|
2015-05-22 17:22:25 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
.phui-header-col3 {
|
|
|
|
display: table-cell;
|
|
|
|
vertical-align: middle;
|
2012-12-11 23:01:35 +01:00
|
|
|
}
|
|
|
|
|
2015-05-27 18:49:54 +02:00
|
|
|
.device-phone .phui-header-col3 {
|
|
|
|
vertical-align: top;
|
|
|
|
}
|
|
|
|
|
2013-09-17 18:12:37 +02:00
|
|
|
body .phui-header-shell.phui-header-no-backgound {
|
2013-09-05 21:29:07 +02:00
|
|
|
background-color: transparent;
|
|
|
|
border: none;
|
|
|
|
}
|
|
|
|
|
2013-09-17 18:12:37 +02:00
|
|
|
body .phui-header-shell.phui-bleed-header {
|
2014-03-06 20:28:24 +01:00
|
|
|
background-color: #fff;
|
|
|
|
border-bottom: 1px solid {$thinblueborder};
|
2013-09-05 21:29:07 +02:00
|
|
|
width: auto;
|
2014-03-06 20:28:24 +01:00
|
|
|
margin: 16px;
|
2013-09-05 21:29:07 +02:00
|
|
|
}
|
|
|
|
|
2013-09-17 18:12:37 +02:00
|
|
|
body .phui-header-shell.phui-bleed-header
|
|
|
|
.phui-header-view {
|
2014-03-06 20:28:24 +01:00
|
|
|
padding: 8px 24px 8px 0;
|
[Redesign] Mobile/Phone design pass
Summary: Ref T8099, Quick descent pass at making header, object lists, tables, filter view, mobile friendly.
Test Plan:
Test home, differential diff, maniphest task, new task, search, and a few other views.
{F414034}
Reviewers: btrahan, epriestley
Reviewed By: epriestley
Subscribers: Korvin, epriestley
Maniphest Tasks: T8099
Differential Revision: https://secure.phabricator.com/D12984
2015-05-23 02:52:51 +02:00
|
|
|
color: {$darkbluetext};
|
2013-09-05 21:29:07 +02:00
|
|
|
}
|
|
|
|
|
2013-09-17 18:12:37 +02:00
|
|
|
.phui-header-shell + .phabricator-form-view {
|
2012-12-11 23:01:35 +01:00
|
|
|
border-top-width: 0;
|
|
|
|
}
|
|
|
|
|
2013-10-11 16:53:56 +02:00
|
|
|
.phui-property-list-view + .diviner-document-section {
|
2013-09-10 16:26:00 +02:00
|
|
|
margin-top: -1px;
|
|
|
|
}
|
|
|
|
|
2013-09-17 18:12:37 +02:00
|
|
|
.phui-header-view {
|
2015-05-31 17:36:44 +02:00
|
|
|
position: relative;
|
2015-06-26 18:33:03 +02:00
|
|
|
font-size: {$normalfontsize};
|
2015-05-31 17:36:44 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
.phui-header-header {
|
2015-06-16 15:46:53 +02:00
|
|
|
font-size: 16px;
|
2015-05-31 21:15:15 +02:00
|
|
|
line-height: 24px;
|
2015-06-04 05:44:33 +02:00
|
|
|
color: {$darkbluetext};
|
[Redesign] Mobile/Phone design pass
Summary: Ref T8099, Quick descent pass at making header, object lists, tables, filter view, mobile friendly.
Test Plan:
Test home, differential diff, maniphest task, new task, search, and a few other views.
{F414034}
Reviewers: btrahan, epriestley
Reviewed By: epriestley
Subscribers: Korvin, epriestley
Maniphest Tasks: T8099
Differential Revision: https://secure.phabricator.com/D12984
2015-05-23 02:52:51 +02:00
|
|
|
}
|
|
|
|
|
2016-03-02 17:45:53 +01:00
|
|
|
.phui-header-header .phui-header-icon {
|
|
|
|
margin-right: 8px;
|
|
|
|
color: {$lightbluetext};
|
|
|
|
|
2016-04-30 01:52:27 +02:00
|
|
|
/* This allows the header text to be triple-clicked to select it in Firefox,
|
|
|
|
see T10905 for discussion. */
|
|
|
|
display: inline;
|
2016-04-30 01:37:45 +02:00
|
|
|
}
|
|
|
|
|
2015-05-31 17:36:44 +02:00
|
|
|
.phui-object-box .phui-header-tall .phui-header-header,
|
|
|
|
.phui-document-view .phui-header-tall .phui-header-header {
|
2015-06-16 15:46:53 +02:00
|
|
|
font-size: 18px;
|
[Redesign] New PHUIObjectItemListView
Summary:
New, cleaner, ObjectItemLists. Lots of minor style tweaks, basic overview:
- Remove FootIcons
- Remove Stackable
- Remove Plain List
- Add StatusIcon
- Add setting ObjectList to an ObjectBox
- Minor retouches to Headers
Mostly, this should give us an idea of life with the new Object Lists. I'll take another application by application pass down the road. This mostly looks at implementation in Maniphest, Differential, Audit, Workboards. Checked a few other areas and dialogs while testing, and everything looks square.
Test Plan: Maniphest, Differential, Homepage, Audit, People, and other applications. Drag reorder, etc.
Reviewers: btrahan, epriestley
Reviewed By: epriestley
Subscribers: Korvin, epriestley
Differential Revision: https://secure.phabricator.com/D12865
2015-05-15 22:28:59 +02:00
|
|
|
}
|
|
|
|
|
2015-05-31 17:36:44 +02:00
|
|
|
.phui-header-view .phui-header-header a {
|
2015-06-04 05:44:33 +02:00
|
|
|
color: {$darkbluetext};
|
|
|
|
}
|
|
|
|
|
|
|
|
.device-desktop .phui-header-view .phui-header-header a:hover {
|
|
|
|
text-decoration: none;
|
[Redesign] Move basefont to Lato, remove Source Sans Pro
Summary: Working towards a more unified look and feel. This brings in Lato as a complete base font over Helvetica Neue, as well as removing Source Sans Pro from DocumentView and Conpherence. Design-wise Lato provides the nice readability at larger font sizes that Source Sans Pro did, with the ability to scale down to tables and UI widgets with ease. This gives us one font instead of two, and now Object descriptions and Timeline posts all can benefit from a consistent, readable font.
Test Plan:
Test main UI, smaller elements like tables, menus, DocumentViews, Previews, Conpherence.
{F498135}
{F498136}
Reviewers: btrahan, epriestley
Reviewed By: epriestley
Subscribers: epriestley, Korvin
Differential Revision: https://secure.phabricator.com/D13276
2015-06-13 21:32:45 +02:00
|
|
|
color: {$blue};
|
2013-12-05 16:16:25 +01:00
|
|
|
}
|
|
|
|
|
2013-12-03 17:34:04 +01:00
|
|
|
.phui-header-view .phui-header-action-links {
|
2015-01-14 01:10:57 +01:00
|
|
|
float: right;
|
2014-05-08 23:21:32 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
.phui-object-box .phui-header-view .phui-header-action-links {
|
2015-05-22 17:22:25 +02:00
|
|
|
margin-right: 4px;
|
2015-06-26 18:33:03 +02:00
|
|
|
font-size: {$normalfontsize};
|
2013-12-03 17:34:04 +01:00
|
|
|
}
|
|
|
|
|
2016-02-23 16:23:58 +01:00
|
|
|
.phui-header-action-link {
|
|
|
|
margin-bottom: 4px;
|
|
|
|
margin-top: 4px;
|
|
|
|
float: right;
|
|
|
|
}
|
|
|
|
|
2013-12-03 17:34:04 +01:00
|
|
|
.device-phone .phui-header-action-link .phui-button-text {
|
|
|
|
visibility: hidden;
|
|
|
|
width: 0;
|
2014-06-03 06:01:05 +02:00
|
|
|
margin-left: 8px;
|
2013-10-14 18:40:05 +02:00
|
|
|
}
|
|
|
|
|
2015-07-18 21:18:59 +02:00
|
|
|
.device-phone .phui-header-action-link.button .phui-icon-view {
|
|
|
|
width: 12px;
|
|
|
|
text-align: center;
|
|
|
|
}
|
|
|
|
|
2013-10-14 18:40:05 +02:00
|
|
|
.phui-header-divider {
|
|
|
|
margin: 0 4px;
|
|
|
|
font-weight: normal;
|
|
|
|
color: {$lightbluetext};
|
|
|
|
}
|
|
|
|
|
2013-09-17 18:12:37 +02:00
|
|
|
.phui-header-tags {
|
2013-01-31 20:49:38 +01:00
|
|
|
margin-left: 12px;
|
2015-06-26 18:33:03 +02:00
|
|
|
font-size: {$normalfontsize};
|
Modernize Macro application
Summary: Adds feed, email, notifications, comments, partial editing, subscriptions, enable/disable, flags and crumbs to Macro.
Test Plan:
{F26839}
{F26840}
{F26841}
{F26842}
{F26843}
{F26844}
{F26845}
Reviewers: vrana, btrahan, chad
Reviewed By: vrana
CC: aran
Maniphest Tasks: T2157, T175, T2104
Differential Revision: https://secure.phabricator.com/D4141
2012-12-11 23:01:03 +01:00
|
|
|
}
|
2013-01-31 20:49:38 +01:00
|
|
|
|
2014-01-14 23:09:52 +01:00
|
|
|
.phui-header-tags .phui-tag-view {
|
2013-01-31 20:49:38 +01:00
|
|
|
margin-left: 4px;
|
|
|
|
}
|
2013-07-10 01:23:22 +02:00
|
|
|
|
2013-09-17 18:12:37 +02:00
|
|
|
.phui-header-image {
|
2013-07-10 01:23:22 +02:00
|
|
|
display: inline-block;
|
|
|
|
background-repeat: no-repeat;
|
2015-05-13 17:14:47 +02:00
|
|
|
background-size: 100%;
|
2013-07-10 01:23:22 +02:00
|
|
|
width: 50px;
|
|
|
|
height: 50px;
|
2016-01-24 22:18:42 +01:00
|
|
|
border-radius: 3px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.phui-header-image-href {
|
|
|
|
position: relative;
|
|
|
|
display: block;
|
|
|
|
}
|
|
|
|
|
|
|
|
.phui-header-image-edit {
|
|
|
|
display: none;
|
|
|
|
}
|
|
|
|
|
|
|
|
.device-desktop .phui-header-image-href:hover .phui-header-image-edit {
|
|
|
|
display: block;
|
|
|
|
position: absolute;
|
|
|
|
left: 0;
|
2016-02-15 06:29:56 +01:00
|
|
|
background: rgba({$alphablack},0.4);
|
2016-01-24 22:18:42 +01:00
|
|
|
color: #fff;
|
|
|
|
font-weight: normal;
|
|
|
|
bottom: 4px;
|
|
|
|
padding: 4px 8px;
|
|
|
|
font-size: 12px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.device-desktop .phui-header-image-edit:hover {
|
|
|
|
text-decoration: underline;
|
2013-07-10 01:23:22 +02:00
|
|
|
}
|
|
|
|
|
2013-09-17 18:12:37 +02:00
|
|
|
.phui-header-subheader {
|
2013-07-10 01:23:22 +02:00
|
|
|
font-weight: normal;
|
2015-06-26 18:33:03 +02:00
|
|
|
font-size: {$biggerfontsize};
|
2015-05-22 17:22:25 +02:00
|
|
|
margin-top: 8px;
|
2013-07-10 01:23:22 +02:00
|
|
|
}
|
2013-09-17 18:12:37 +02:00
|
|
|
|
2016-03-05 16:25:06 +01:00
|
|
|
.phui-header-subheader .phui-icon-view {
|
|
|
|
margin-right: 4px;
|
|
|
|
}
|
|
|
|
|
2016-03-05 00:44:24 +01:00
|
|
|
.phui-header-subheader .phui-tag-view .phui-icon-view,
|
|
|
|
.phui-header-subheader .policy-header-callout .phui-icon-view {
|
2013-09-17 18:12:37 +02:00
|
|
|
display: inline-block;
|
|
|
|
margin: -2px 4px -2px 0;
|
2015-01-05 19:33:42 +01:00
|
|
|
font-size: 15px;
|
2013-09-17 18:12:37 +02:00
|
|
|
}
|
|
|
|
|
2015-01-05 19:33:42 +01:00
|
|
|
.phui-header-subheader,
|
2013-09-17 18:12:37 +02:00
|
|
|
.phui-header-subheader .policy-link {
|
2015-01-05 19:33:42 +01:00
|
|
|
color: {$darkbluetext};
|
2013-09-17 18:12:37 +02:00
|
|
|
}
|
2013-09-24 17:42:04 +02:00
|
|
|
|
2015-06-23 13:03:46 +02:00
|
|
|
.policy-header-callout,
|
2016-03-05 00:44:24 +01:00
|
|
|
.phui-header-subheader .phui-tag-core {
|
2015-06-23 13:03:46 +02:00
|
|
|
padding: 3px 9px;
|
2015-06-22 20:46:59 +02:00
|
|
|
border-radius: 3px;
|
2016-03-05 00:44:24 +01:00
|
|
|
background: rgba({$alphablue}, 0.1);
|
2015-06-23 13:03:46 +02:00
|
|
|
margin-right: 8px;
|
2016-03-05 00:44:24 +01:00
|
|
|
-webkit-font-smoothing: auto;
|
|
|
|
border-color: transparent;
|
|
|
|
}
|
|
|
|
|
2016-03-05 03:34:37 +01:00
|
|
|
|
|
|
|
.phui-header-subheader .phui-tag-view,
|
2016-03-05 00:44:24 +01:00
|
|
|
.phui-header-subheader .phui-tag-type-shade .phui-tag-core {
|
|
|
|
border: none;
|
2016-03-05 03:34:37 +01:00
|
|
|
font-weight: normal;
|
2016-03-05 00:44:24 +01:00
|
|
|
-webkit-font-smoothing: auto;
|
2015-06-22 20:46:59 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
.policy-header-callout.policy-adjusted-weaker {
|
2015-06-23 13:03:46 +02:00
|
|
|
background: {$sh-greenbackground};
|
2015-06-22 20:46:59 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
.policy-header-callout.policy-adjusted-weaker .policy-link,
|
|
|
|
.policy-header-callout.policy-adjusted-weaker .phui-icon-view {
|
2015-06-23 13:03:46 +02:00
|
|
|
color: {$sh-greentext};
|
2015-06-22 20:46:59 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
.policy-header-callout.policy-adjusted-stronger {
|
2015-06-23 13:03:46 +02:00
|
|
|
background: {$sh-redbackground};
|
2015-06-22 20:46:59 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
.policy-header-callout.policy-adjusted-stronger .policy-link,
|
|
|
|
.policy-header-callout.policy-adjusted-stronger .phui-icon-view {
|
2015-06-23 13:03:46 +02:00
|
|
|
color: {$sh-redtext};
|
2015-06-22 20:46:59 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
.policy-header-callout.policy-adjusted-different {
|
2015-06-23 13:03:46 +02:00
|
|
|
background: {$sh-orangebackground};
|
2015-06-22 20:46:59 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
.policy-header-callout.policy-adjusted-different .policy-link,
|
|
|
|
.policy-header-callout.policy-adjusted-different .phui-icon-view {
|
2015-06-23 13:03:46 +02:00
|
|
|
color: {$sh-orangetext};
|
2015-06-22 20:46:59 +02:00
|
|
|
}
|
|
|
|
|
2015-01-12 16:24:35 +01:00
|
|
|
.phui-header-action-links .phui-mobile-menu {
|
|
|
|
display: none;
|
|
|
|
}
|
|
|
|
|
|
|
|
.device .phui-header-action-links .phui-mobile-menu {
|
|
|
|
display: inline-block;
|
|
|
|
}
|
[Redesign] Convert Dashboard Panels to ObjectBox
Summary: Moves Dashboard Panels to use PHUIObjectBoxView and PHUIHeaderView
Test Plan:
Tested the most common dashboards, Differential, Maniphest, Projects, Feed, Audit. Some edge cases (Legalpad, Macro) still are in progress. Tested laying out a new Dashboard, removing panels, moving panels.
{F406170}
Reviewers: btrahan, epriestley
Reviewed By: epriestley
Subscribers: Korvin, epriestley
Maniphest Tasks: T8099
Differential Revision: https://secure.phabricator.com/D12873
2015-05-17 16:05:14 +02:00
|
|
|
|
2015-05-31 16:54:48 +02:00
|
|
|
.phui-header-action-list {
|
[Redesign] Convert Dashboard Panels to ObjectBox
Summary: Moves Dashboard Panels to use PHUIObjectBoxView and PHUIHeaderView
Test Plan:
Tested the most common dashboards, Differential, Maniphest, Projects, Feed, Audit. Some edge cases (Legalpad, Macro) still are in progress. Tested laying out a new Dashboard, removing panels, moving panels.
{F406170}
Reviewers: btrahan, epriestley
Reviewed By: epriestley
Subscribers: Korvin, epriestley
Maniphest Tasks: T8099
Differential Revision: https://secure.phabricator.com/D12873
2015-05-17 16:05:14 +02:00
|
|
|
float: right;
|
|
|
|
}
|
|
|
|
|
2015-05-31 16:54:48 +02:00
|
|
|
.phui-header-action-list li {
|
|
|
|
margin: 0 0 0 8px;
|
[Redesign] Convert Dashboard Panels to ObjectBox
Summary: Moves Dashboard Panels to use PHUIObjectBoxView and PHUIHeaderView
Test Plan:
Tested the most common dashboards, Differential, Maniphest, Projects, Feed, Audit. Some edge cases (Legalpad, Macro) still are in progress. Tested laying out a new Dashboard, removing panels, moving panels.
{F406170}
Reviewers: btrahan, epriestley
Reviewed By: epriestley
Subscribers: Korvin, epriestley
Maniphest Tasks: T8099
Differential Revision: https://secure.phabricator.com/D12873
2015-05-17 16:05:14 +02:00
|
|
|
float: right;
|
|
|
|
}
|
2015-05-18 19:00:15 +02:00
|
|
|
|
2016-03-05 03:34:37 +01:00
|
|
|
.phui-header-action-list .phui-header-action-item .phui-icon-view {
|
2015-05-31 16:54:48 +02:00
|
|
|
height: 18px;
|
|
|
|
width: 16px;
|
|
|
|
font-size: 16px;
|
|
|
|
line-height: 20px;
|
|
|
|
display: block;
|
2015-05-18 19:00:15 +02:00
|
|
|
}
|
2015-06-10 16:44:58 +02:00
|
|
|
|
2015-06-05 19:42:49 +02:00
|
|
|
.spaces-name {
|
|
|
|
color: {$lightbluetext};
|
|
|
|
}
|
|
|
|
|
2015-06-16 22:43:27 +02:00
|
|
|
.phui-object-box .phui-header-tall .spaces-name {
|
|
|
|
font-size: 18px;
|
|
|
|
}
|
|
|
|
|
2016-03-01 20:43:58 +01:00
|
|
|
.spaces-name .phui-handle,
|
|
|
|
.spaces-name a.phui-handle {
|
2015-06-16 22:43:27 +02:00
|
|
|
color: {$sh-redtext};
|
2015-06-05 19:42:49 +02:00
|
|
|
}
|
2015-07-11 20:59:00 +02:00
|
|
|
|
2016-03-01 20:43:58 +01:00
|
|
|
.device-desktop .spaces-name a.phui-handle:hover {
|
|
|
|
color: {$sh-redtext};
|
|
|
|
text-decoration: underline;
|
|
|
|
}
|
|
|
|
|
2015-07-11 20:59:00 +02:00
|
|
|
.phui-header-subheader .phui-badge-flex-view {
|
|
|
|
display: inline;
|
|
|
|
margin-right: 4px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.phui-header-subheader .phui-badge-flex-view:after {
|
|
|
|
display: inline;
|
|
|
|
}
|
2016-01-24 17:34:28 +01:00
|
|
|
|
|
|
|
/*** Profile Header ***********************************************************/
|
|
|
|
|
|
|
|
.phui-profile-header {
|
|
|
|
padding: 24px 20px 20px 24px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.device-phone .phui-profile-header {
|
|
|
|
padding: 12px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.phui-profile-header.phui-header-shell {
|
|
|
|
margin: 0;
|
|
|
|
border: none;
|
|
|
|
}
|
|
|
|
|
|
|
|
.phui-profile-header .phui-header-image {
|
|
|
|
height: 80px;
|
|
|
|
width: 80px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.phui-profile-header .phui-header-col1 {
|
|
|
|
width: 96px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.phui-profile-header .phui-header-subheader {
|
|
|
|
margin-top: 12px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.phui-profile-header.phui-header-shell .phui-header-header {
|
|
|
|
font-family: 'Aleo', {$fontfamily};
|
|
|
|
font-size: 24px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.phui-profile-header .phui-header-col3 {
|
|
|
|
vertical-align: top;
|
|
|
|
}
|
2016-03-17 20:01:22 +01:00
|
|
|
|
|
|
|
.phui-header-view .phui-tag-shade-indigo a {
|
|
|
|
color: {$sh-indigotext};
|
|
|
|
}
|