mirror of
https://we.phorge.it/source/phorge.git
synced 2024-11-27 09:12:41 +01:00
7618a4e056
Summary: This seems like the least-bad solution to the issues mentioned in T684: when we need to x-scroll the main page area, scroll that div rather than the surrounding page chrome. I played around with a bunch of other possible solutions but they all seem bad in some way or another. The tricky part here is that I want the real background to be grey so that the footer color is grey even if the page is very short and the browser window is very tall. The only downside here is that the scrollbar appears in a somewhat unusual place, but I think that's OK? Actually, it's kind of terrible if people really use the scrollbar to scroll horizontally rather than two-finger swipe or shift+mousewheel or the arrow keys. So maybe this isn't good. If this is no good, I think we need to make design sacrifices (not necessarily a big deal; I'm not married to how the footer behaves) or someone much better than I am at CSS needs to tell me how to fix this (@mroch / @tomo)?. Test Plan: - In Settings -> Preferences, set font to "72px Impact". - Observed overflow scroll behavior in Safari / Firefox / Chrome. Reviewers: Makinde, btrahan, jungejason Reviewed By: Makinde CC: mroch, tomo, aran, Makinde Maniphest Tasks: T684 Differential Revision: 1224
181 lines
3.3 KiB
CSS
181 lines
3.3 KiB
CSS
/**
|
|
* @provides phabricator-standard-page-view
|
|
*/
|
|
|
|
|
|
.phabricator-standard-page {
|
|
background: #ffffff;
|
|
border-bottom: 1px solid #888888;
|
|
overflow-x: auto;
|
|
|
|
-webkit-box-shadow: 0 0 6px #000;
|
|
-mox-box-shadow: 0 0 6px #000;
|
|
box-shadow: 0 0 6px #000;
|
|
}
|
|
|
|
.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;
|
|
padding: .5em 1em;
|
|
font-size: 11px;
|
|
color: #f3f3f3;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.PhabricatorMonospaced {
|
|
font-family: "Menlo", "Consolas", "Monaco", monospace;
|
|
font-size: 10px;
|
|
}
|