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
epriestley c3913f5995 Make scroll keys active immediately upon page load
Summary:
When JX.Scrollbar activates, the page needs to be clicked before scrolling keys work.

Instead, set focus into the content after we set the page frame (if something else isn't already focused).

Also fixes T7042.

Test Plan: In Safari, Chrome and Firefox, scrolling with key commands is now immediately active.

Reviewers: btrahan, chad

Reviewed By: chad

Subscribers: epriestley

Maniphest Tasks: T7042

Differential Revision: https://secure.phabricator.com/D11508
2015-01-26 09:34:57 -08:00

201 lines
3.8 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;
}
.phabricator-standard-page {
/* If we don't activate JX.Scrollbar because the default scrollbars are
satisfactory, make sure the page still has sensible behavior. These
settings will be overwritten by .jx-scrollbar-frame if JX.Scrollbar
activates. */
position: relative;
height: 100%;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
.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;
}
.jx-scrollbar-link {
position: absolute;
left: -50px;
}