1
0
Fork 0
mirror of https://we.phorge.it/source/phorge.git synced 2024-11-23 15:22:41 +01:00
phorge-phorge/webroot/rsrc/css/phui/phui-header-view.css
Chad Little f5a7e8bdbd [Redesign] Phriction UI Updates, Header tweaks
Summary: Ref T8099, walked through Phriction, updated PHUIHeader for more consistent layouts.

Test Plan: Test Phriction Document, Heirarchy, History, Diffs.

Reviewers: btrahan, epriestley

Reviewed By: epriestley

Subscribers: Korvin, epriestley

Maniphest Tasks: T8099

Differential Revision: https://secure.phabricator.com/D13084
2015-05-31 12:15:15 -07:00

207 lines
3.6 KiB
CSS

/**
* @provides phui-header-view-css
*/
.phui-header-shell {
border-bottom: 1px solid {$thinblueborder};
overflow: hidden;
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;
}
.phui-header-col3 {
display: table-cell;
vertical-align: middle;
}
.device-phone .phui-header-col3 {
vertical-align: top;
}
body .phui-header-shell.phui-header-no-backgound {
background-color: transparent;
border: none;
}
body .phui-header-shell.phui-bleed-header {
background-color: #fff;
border-bottom: 1px solid {$thinblueborder};
width: auto;
margin: 16px;
}
body .phui-header-shell.phui-bleed-header
.phui-header-view {
padding: 8px 24px 8px 0;
color: {$darkbluetext};
}
.phui-header-shell + .phabricator-form-view {
border-top-width: 0;
}
.phui-property-list-view + .diviner-document-section {
margin-top: -1px;
}
.phui-header-view {
position: relative;
font-size: 13px;
}
.phui-header-header {
color: #000;
font-size: 15px;
font-weight: 500;
line-height: 24px;
}
.device-phone .phui-header-header {
font-size: 14px;
}
.phui-object-box .phui-header-tall .phui-header-header,
.phui-document-view .phui-header-tall .phui-header-header {
font-size: 18px;
font-weight: 500;
}
.phui-header-view .phui-header-header a {
color: #000;
}
.phui-header-view .phui-header-action-links {
float: right;
}
.phui-object-box .phui-header-view .phui-header-action-links {
margin-right: 4px;
font-size: 13px;
}
.device-phone .phui-object-box .phui-header-view .phui-header-action-links {
margin-right: 4px;
margin-top: -1px;
}
.device-phone .phui-header-action-link .phui-button-text {
visibility: hidden;
width: 0;
margin-left: 8px;
}
.phui-header-divider {
margin: 0 4px;
font-weight: normal;
color: {$lightbluetext};
}
.phui-header-tags {
margin-left: 12px;
font-size: 13px;
}
.phui-header-tags .phui-tag-view {
margin-left: 4px;
}
.phui-header-image {
display: inline-block;
background-repeat: no-repeat;
background-size: 100%;
border: 1px solid rgba(0,0,0,.1);
width: 50px;
height: 50px;
}
.phui-header-subheader {
font-weight: normal;
font-size: 14px;
margin-top: 8px;
}
.phui-header-subheader .phui-icon-view {
display: inline-block;
margin: -2px 4px -2px 0;
font-size: 15px;
}
.phui-header-subheader,
.phui-header-subheader .policy-link {
color: {$darkbluetext};
}
.phui-header-subheader .phui-header-status-dark {
color: {$sh-indigotext};
background-color: {$sh-indigobackground};
padding: 2px 8px;
border-radius: 3px;
margin-right: 8px;
}
.phui-header-subheader .phui-header-status-dark .phui-icon-view {
color: {$indigo};
}
.phui-header-subheader .phui-header-status-red {
color: {$sh-redtext};
background-color: {$sh-redbackground};
padding: 2px 8px;
border-radius: 3px;
margin-right: 8px;
}
.phui-header-subheader .phui-header-status-green {
color: {$sh-greentext};
background-color: {$sh-greenbackground};
padding: 2px 8px;
border-radius: 3px;
margin-right: 8px;
}
.phui-header-action-links .phui-mobile-menu {
display: none;
}
.device .phui-header-action-links .phui-mobile-menu {
display: inline-block;
}
.phui-header-action-list {
float: right;
}
.phui-header-action-list li {
margin: 0 0 0 8px;
float: right;
}
.phui-header-action-list li.phui-header-action-icon {
height: 18px;
width: 16px;
}
.phui-header-action-list .phui-header-action-icon .phui-icon-view {
font-size: 16px;
line-height: 20px;
display: block;
}