mirror of
https://we.phorge.it/source/phorge.git
synced 2024-09-21 01:38:48 +02:00
c40bc0c8bf
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
184 lines
3.4 KiB
CSS
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;
|
|
}
|