mirror of
https://we.phorge.it/source/phorge.git
synced 2024-09-20 17:28:51 +02:00
8fca881093
Summary: Ref T8099, I want to live with this for a few weeks. I've grow to like that it gives more distinction to ObjectBox Headers and fits very nicely as headers in DocumentView. Even if we don't use them for all headers, Documents are much nicer to me at least with a more visually impactful font (Source Sans doesn't make a great header). Test Plan: Review dashboards, objects, Diviner, Phriction, Legalpad, and misc other pages. {F466410} Reviewers: btrahan, epriestley Reviewed By: epriestley Subscribers: Korvin, epriestley Maniphest Tasks: T8099 Differential Revision: https://secure.phabricator.com/D13127
206 lines
3.6 KiB
CSS
206 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 {
|
|
font-size: 18px;
|
|
font-weight: 500;
|
|
line-height: 24px;
|
|
color: #000;
|
|
}
|
|
|
|
.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: 20px;
|
|
}
|
|
|
|
.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;
|
|
}
|