1
0
Fork 0
mirror of https://we.phorge.it/source/phorge.git synced 2024-11-10 17:02:41 +01:00
phorge-phorge/webroot/rsrc/css/application/base/standard-page-view.css
Chad Little 7aeefc0cca Add an Experimental Dark Mode to Phabricator
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
2017-07-18 06:44:32 -07:00

178 lines
3.3 KiB
CSS

/**
* @provides phabricator-standard-page-view
*/
.phabricator-anchor-view,
.phabricator-anchor-navigation-marker {
position: absolute;
margin-top: -15px;
}
.phabricator-chromeless-page .phabricator-standard-page {
background: transparent;
border-width: 0px;
}
.phabricator-standard-page-body {
clear: both;
}
body.white-background {
background: {$page.content};
}
.phabricator-standard-page-footer {
text-align: right;
margin: 44px 16px 16px;
padding: 12px 0;
border-top: 1px solid rgba({$alphagrey},.1);
color: {$greytext};
}
.with-durable-column .phabricator-standard-page-footer {
margin: 36px 16px 28px;
}
.device .phabricator-standard-page-footer {
margin: 24px 8px 16px;
}
!print .phabricator-standard-page-footer {
display: none;
}
.device-desktop .has-local-nav + .phabricator-standard-page-footer {
margin-left: 221px;
}
.device .phabricator-side-menu-home + .phabricator-standard-page-footer {
display: none;
}
.keyboard-shortcut-help td,
.keyboard-shortcut-help th {
padding: 8px;
vertical-align: middle;
}
.keyboard-shortcut-help th {
white-space: nowrap;
color: {$greytext};
}
.keyboard-focus-focus-reticle {
background: rgba(255, 255, 211, 0.15);
position: absolute;
border: 1px solid {$yellow};
pointer-events: none;
}
a.handle-status-closed {
text-decoration: line-through;
color: #676767;
}
a.handle-status-closed:hover {
text-decoration: line-through;
color: #19558D;
}
.handle-availability-none .perfect-circle {
color: {$red};
}
.handle-availability-partial .perfect-circle {
color: {$orange};
}
.handle-availability-no-email .perfect-circle {
color: {$violet};
}
.handle-availability-disabled .perfect-circle {
color: {$greytext};
}
.aphront-developer-error-callout {
position: relative;
padding: 2em;
background: #aa0000;
color: white;
text-align: center;
font-size: {$smallerfontsize};
}
.phui-handle.phui-link-person {
/* Prevent linebreaks between user availability markers and usernames. */
white-space: nowrap;
}
.phui-handle .phui-icon-view {
display: inline-block;
margin: 2px 2px -2px 0;
}
.jx-scrollbar-frame {
position: relative;
overflow: hidden;
}
.jx-scrollbar-viewport {
position: absolute;
overflow-x: hidden;
overflow-y: scroll;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.jx-scrollbar-test {
position: absolute;
left: -300px;
}
.jx-scrollbar-bar {
position: absolute;
top: 0;
right: 0;
bottom: 7px;
width: 11px;
}
.jx-scrollbar-bar .jx-scrollbar-handle {
position: absolute;
right: 2px;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;
min-height: 10px;
width: 7px;
opacity: 0;
-webkit-transition: opacity 0.2s linear;
-moz-transition: opacity 0.2s linear;
-o-transition: opacity 0.2s linear;
-ms-transition: opacity 0.2s linear;
transition: opacity 0.2s linear;
background: #6c6e71;
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
}
.jx-scrollbar-bar:hover .jx-scrollbar-handle {
opacity: 0.7;
-webkit-transition: opacity 0 linear;
-moz-transition: opacity 0 linear;
-o-transition: opacity 0 linear;
-ms-transition: opacity 0 linear;
transition: opacity 0 linear;
}
.jx-scrollbar-bar .jx-scrollbar-visible {
opacity: 0.7;
}
.jx-scrollbar-link {
position: absolute;
left: -50px;
}