1
0
Fork 0
mirror of https://we.phorge.it/source/phorge.git synced 2024-09-21 01:38:48 +02:00
phorge-phorge/webroot/rsrc/css/application/base/standard-page-view.css
epriestley c40bc0c8bf Replace the primary scrollbar with a fake one to prepare for a persistent chat column
Summary:
Ref T7014. With a mouse plugged in, multi-panel UIs are pretty hideous on OSX. This is somewhat offputting for me in Conpherence, and really jumps out at me with the new column mocks in T7014.

Sites like Twitch and Facebook approach this by emulating the touchpad scrollbar to achieve a more aesthetic UI. Use a similar approach.

This:

  - Replaces the main scrollbar with a prettier fake one.
  - This prepares the standard page frame for a persistent chat column.

Test Plan:
  - Seems to work properly on OSX, Chrome and Firefox. Haven't tested on IE; my Windows setup is pretty iffy at the moment.
  - Tried Conpherence.
  - Tried Workboards.

Reviewers: btrahan, chad

Reviewed By: btrahan

Subscribers: epriestley

Maniphest Tasks: T7014

Differential Revision: https://secure.phabricator.com/D11472
2015-01-23 13:29:15 -08:00

184 lines
3.4 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-footer {
text-align: right;
margin: 4px 16px;
padding: 12px 0;
border-top: 1px solid {$lightgreyborder};
color: {$greytext};
}
.device-desktop .has-local-nav + .phabricator-standard-page-footer {
margin-left: 221px;
}
.keyboard-shortcut-help td,
.keyboard-shortcut-help th {
padding: 8px;
vertical-align: middle;
}
.keyboard-shortcut-help th {
white-space: nowrap;
color: {$greytext};
}
.keyboard-shortcut-help kbd {
background: #222222;
padding: 6px;
color: #ffffff;
font-weight: bold;
border: 1px solid #555555;
}
.keyboard-focus-focus-reticle {
background: #ffffd3;
position: absolute;
border: 1px solid #999900;
}
.workflow-header {
background: #efefef;
padding: 6px 2em;
text-align: right;
margin-bottom: 6px;
border-bottom: 1px solid #dfdfdf;
}
.workflow-header button {
float: right;
}
a.handle-status-closed {
text-decoration: line-through;
color: #676767;
}
a.handle-status-closed:hover {
text-decoration: line-through;
color: #19558D;
}
a.handle-disabled,
a.handle-status-away,
a.handle-status-sporadic {
padding-left: 11px;
background-repeat: no-repeat;
background-position: -4px center;
}
a.handle-status-away {
background-image: url(/rsrc/image/icon/fatcow/bullet_red.png);
}
a.handle-status-sporadic {
background-image: url(/rsrc/image/icon/fatcow/bullet_orange.png);
}
a.handle-disabled {
background-image: url(/rsrc/image/icon/fatcow/bullet_black.png);
}
.aphront-developer-error-callout {
position: relative;
padding: 2em;
background: #aa0000;
color: white;
text-align: center;
font-size: 11px;
font-family: "Verdana";
}
.setup-warning-callout {
position: relative;
padding: 8px 16px;
background: {$lightyellow};
}
.phui-handle .phui-icon-view {
display: inline-block;
margin: 2px 2px -2px 0;
}
.main-page-frame {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
overflow: hidden;
}
.jx-scrollbar-frame {
position: relative;
height: 100%;
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;
}