1
0
Fork 0
mirror of https://we.phorge.it/source/phorge.git synced 2024-12-02 03:32:42 +01:00
phorge-phorge/webroot/rsrc/css/application/base/standard-page-view.css
epriestley bf3dd8663c Add "buoyant" headers to Differential
Summary:
As you scroll through a diff, add a fixed-position header to the top of the
document to provide context. This is particularly useful with keyboard
navigation.

The technical implementation is that we seed the document with invisible
markers. When the user scrolls past one, we show a header with that text until
they scroll past another.

Test Plan:
Scrolled through a revision, was presented with context.

https://secure.phabricator.com/file/data/5xhh2jmoon6ukr5qjkh3/PHID-FILE-463ituscyhyw7utnox7m/Screen_Shot_2012-02-22_at_2.48.19_PM.png

Reviewers: btrahan

Reviewed By: btrahan

CC: aran, epriestley

Maniphest Tasks: T696

Differential Revision: https://secure.phabricator.com/D1673
2012-02-23 12:26:14 -08:00

210 lines
3.6 KiB
CSS

/**
* @provides phabricator-standard-page-view
*/
.phabricator-standard-page {
background: #ffffff;
}
.phabricator-chromeless-page .phabricator-standard-page {
background: transparent;
border-width: 0px;
-webkit-box-shadow: none;
-mox-box-shadow: none;
box-shadow: none;
}
.phabricator-standard-header {
background: #005588;
color: white;
overflow: hidden;
position: relative;
width: 100%;
}
.phabricator-standard-header td {
vertical-align: bottom;
padding: 0;
margin: 0;
}
.phabricator-primary-navigation {
padding-top: 24px;
padding-left: 24px;
}
.phabricator-standard-header a {
color: white;
}
.phabricator-primary-navigation th,
.phabricator-primary-navigation td {
vertical-align: bottom;
font-size: 13px;
border-bottom: 6px solid transparent;
padding-top: 14px;
padding-bottom: 4px;
white-space: nowrap;
}
.phabricator-logo {
width: 220px;
}
.phabricator-logo a {
display: block;
width: 220px;
height: 40px;
background: url('/rsrc/image/phabricator_logo.png') no-repeat 0 0;
padding: 0;
margin: 0;
}
.phabricator-logo a:hover {
background-position: 0 -40px;
}
.phabricator-primary-navigation td {
padding-left: 10px;
padding-right: 10px;
}
.phabricator-primary-navigation td.phabricator-selected-tab {
border-bottom-color: #ffffff;
background: #336699;
}
.phabricator-standard-header .phabricator-head-appname {
padding: 0 1em;
text-transform: uppercase;
}
td.phabricator-login-details {
text-align: right;
vertical-align: middle;
padding: 0px 24px;
font-size: 12px;
white-space: nowrap;
}
.phabricator-page-foot {
text-align: right;
margin: 2em;
border-top: 1px solid #afafaf;
padding: .5em 1em;
font-size: 11px;
color: #666666;
}
.phabricator-admin-page-view .phabricator-standard-header {
background: #aa0000;
}
.phabricator-admin-page-view td.phabricator-selected-tab {
background: #cc3333;
}
.phabricator-admin-page-view .phabricator-logo a {
background-image: url('/rsrc/image/phabricator_logo_admin.png');
}
.keyboard-shortcut-help td,
.keyboard-shortcut-help th {
padding: 8px;
vertical-align: middle;
}
.keyboard-shortcut-help th {
white-space: nowrap;
color: #666666;
}
.keyboard-shortcut-help kbd {
background: #222222;
padding: 6px;
color: #ffffff;
font-weight: bold;
border: 1px solid #555555;
}
.keyboard-focus-focus-reticle {
z-index: 1;
background: #ffffd3;
position: absolute;
border: 1px solid #999900;
}
.keyboard-shortcuts-available {
width: 100%;
}
.keyboard-shortcuts-available th {
width: 100%;
vertical-align: middle;
color: #666666;
text-align: right;
padding-right: 8px;
font-size: 11px;
}
.keyboard-shortcuts-available td {
padding: 8px;
background: url('/rsrc/image/icon/fatcow/key_question.png') 0px 0px no-repeat;
}
.workflow-header {
background: #efefef;
padding: 6px 2em;
text-align: right;
margin-bottom: 6px;
border-bottom: 1px solid #dfdfdf;
}
.workflow-header button {
float: right;
}
.handle-status-closed {
text-decoration: line-through;
}
a.handle-disabled {
background: #999999;
color: #cccccc;
}
.PhabricatorMonospaced {
font-family: "Menlo", "Consolas", "Monaco", monospace;
font-size: 10px;
}
.aphront-developer-error-callout {
padding: 2em;
background: #aa0000;
color: white;
text-align: center;
font-size: 11px;
font-family: "Verdana";
}
.buoyant {
position: fixed;
top: 0px;
left: 0px;
z-index: 8;
padding: 6px;
color: #dddddd;
font-size: 11px;
opacity: 0.90;
width: 100%;
background: #222222;
border-bottom: 1px solid #dfdfdf;
cursor: pointer;
}