mirror of
https://we.phorge.it/source/phorge.git
synced 2024-09-22 18:28:47 +02:00
7aeefc0cca
Summary: Mostly this is an exercise to clean up our CSS and Celerity processor by making sure all important color decisions are generatable. It's somewhat resonable to use if you don't review code. Posting it up here mostly so I don't lose the work. Test Plan: Visit lots and lots of pages with dark mode on and off. Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Differential Revision: https://secure.phabricator.com/D18227
232 lines
4.6 KiB
CSS
232 lines
4.6 KiB
CSS
/**
|
|
* @provides phui-two-column-view-css
|
|
*/
|
|
|
|
.phui-two-column-view .phui-two-column-header {
|
|
background-color: {$page.content};
|
|
border-bottom: 1px solid rgba({$alphagrey}, .12);
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.device .phui-two-column-view .phui-two-column-header {
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.phui-two-column-view.with-tabs .phui-two-column-header,
|
|
.phui-two-column-view.with-subheader .phui-two-column-header {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.phui-two-column-header .phui-header-header {
|
|
font-size: 20px;
|
|
color: {$blacktext};
|
|
}
|
|
|
|
.device-phone .phui-two-column-header .phui-header-header {
|
|
font-size: 16px;
|
|
}
|
|
|
|
.phui-two-column-view .phui-two-column-header .phui-header-shell {
|
|
padding: 24px 32px 28px;
|
|
border: none;
|
|
}
|
|
|
|
.phui-two-column-view .phui-two-column-header
|
|
.phui-profile-header.phui-header-shell {
|
|
padding-bottom: 20px;
|
|
}
|
|
|
|
.device .phui-two-column-view .phui-two-column-header .phui-header-shell {
|
|
padding: 12px 12px 16px;
|
|
}
|
|
|
|
.phui-two-column-header .phui-header-subheader {
|
|
margin-top: 12px;
|
|
}
|
|
|
|
.phui-two-column-subheader {
|
|
padding: 12px 32px;
|
|
}
|
|
|
|
.device .phui-two-column-subheader {
|
|
padding: 12px 16px;
|
|
}
|
|
|
|
.device-desktop .phui-two-column-content {
|
|
padding: 0 32px;
|
|
}
|
|
|
|
.device .phui-two-column-content {
|
|
padding: 0 12px;
|
|
}
|
|
|
|
.device-desktop .phui-two-column-view .phui-main-column {
|
|
float: left;
|
|
width: calc(100% - 320px);
|
|
}
|
|
|
|
.device-desktop .phui-two-column-view .phui-side-column {
|
|
float: right;
|
|
width: 300px;
|
|
}
|
|
|
|
.device-desktop .phui-two-column-view.phui-side-column-left .phui-main-column {
|
|
float: right;
|
|
width: calc(100% - 280px);
|
|
}
|
|
|
|
.device-desktop .phui-two-column-view.phui-side-column-left .phui-side-column {
|
|
float: left;
|
|
width: 260px;
|
|
}
|
|
|
|
.device .phui-side-column {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.phui-two-column-view .phui-two-column-content
|
|
.phui-object-box {
|
|
margin: 0 0 20px 0;
|
|
}
|
|
|
|
/* Timeline */
|
|
|
|
.phui-two-column-view .phui-timeline-view {
|
|
padding: 0;
|
|
background-position: 80px;
|
|
}
|
|
|
|
.phui-two-column-view .phui-main-column .phui-object-box + .phui-timeline-view {
|
|
margin-top: -20px;
|
|
}
|
|
|
|
.device .phui-two-column-view .phui-timeline-view {
|
|
background-position: 16px;
|
|
padding: 0;
|
|
}
|
|
|
|
.device-phone .phui-two-column-view .phui-timeline-event-view {
|
|
margin: 0;
|
|
}
|
|
|
|
.phui-main-column > .phui-timeline-view:first-child {
|
|
border-top: 1px solid {$thinblueborder};
|
|
}
|
|
|
|
.device-phone .phui-main-column .phui-timeline-older-transactions-are-hidden {
|
|
margin: 0;
|
|
}
|
|
|
|
/* Main Column Properties */
|
|
|
|
.device-desktop .phui-main-column .phui-property-list-key {
|
|
margin-left: 0;
|
|
width: 180px;
|
|
}
|
|
|
|
.device-desktop .phui-main-column .phui-property-list-value {
|
|
margin-left: 8px;
|
|
width: calc(100% - 200px);
|
|
}
|
|
|
|
|
|
/* Property / Action List */
|
|
|
|
.phui-two-column-properties .phabricator-action-list-view {
|
|
padding-top: 4px;
|
|
padding-bottom: 12px;
|
|
}
|
|
|
|
.device-desktop .phui-two-column-view .phui-property-list-container {
|
|
padding: 16px 0;
|
|
}
|
|
|
|
.device-desktop .phui-two-column-view
|
|
.phui-property-list-properties-wrap.phui-property-list-stacked {
|
|
padding: 0 16px;
|
|
}
|
|
|
|
.device .phui-two-column-view .phui-property-list-container {
|
|
padding: 12px 8px;
|
|
}
|
|
|
|
.phui-two-column-view .phui-property-list-container
|
|
.keyboard-shortcuts-available {
|
|
display: none;
|
|
}
|
|
|
|
.device .phui-two-column-content .phui-two-column-properties.phui-object-box {
|
|
padding: 0 12px;
|
|
}
|
|
|
|
.phui-two-column-view .phui-property-list-section-header,
|
|
.phui-two-column-view .phui-property-list-text-content {
|
|
margin: 0 16px;
|
|
}
|
|
|
|
.device .phui-two-column-view .phui-property-list-section-header,
|
|
.device .phui-two-column-view .phui-property-list-text-content {
|
|
margin: 0 8px;
|
|
}
|
|
|
|
.phui-two-column-tabs {
|
|
padding: 0 32px;
|
|
margin-bottom: 32px;
|
|
background: {$page.content};
|
|
box-shadow: 0 1px 3px 0 rgba(0,0,0,0.2);
|
|
}
|
|
|
|
.device-phone .phui-two-column-tabs {
|
|
padding: 0 12px;
|
|
}
|
|
|
|
/* Info View */
|
|
|
|
.phui-two-column-view .phui-info-view {
|
|
margin: 0 0 20px 0;
|
|
padding: 16px;
|
|
}
|
|
|
|
.device .phui-two-column-view .phui-info-view {
|
|
margin: 0 0 20px 0;
|
|
padding: 12px;
|
|
}
|
|
|
|
.phui-two-column-view .phui-oi-empty .phui-info-view {
|
|
margin: 0;
|
|
}
|
|
|
|
.phui-two-column-view .phui-side-column .phui-oi-empty
|
|
.phui-info-view {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
|
|
.phui-two-column-view .phui-box-blue-property
|
|
.phui-header-shell + .phui-info-view {
|
|
margin: 16px;
|
|
}
|
|
|
|
.device .phui-two-column-view .phui-box-blue-property
|
|
.phui-header-shell + .phui-info-view {
|
|
margin: 8px;
|
|
}
|
|
|
|
/* Navigation */
|
|
|
|
.phui-two-column-view .side-has-nav .phabricator-nav-local {
|
|
width: auto;
|
|
position: static;
|
|
margin: 0;
|
|
}
|
|
|
|
.device .phui-two-column-view .side-has-nav {
|
|
display: none;
|
|
}
|
|
|
|
/* Document View */
|
|
|
|
.phui-two-column-view .phui-two-column-content .phui-document-fluid
|
|
.phui-document-view {
|
|
margin: 0 0 20px 0;
|
|
}
|