mirror of
https://we.phorge.it/source/phorge.git
synced 2024-11-10 17:02:41 +01:00
c8afc741fa
Summary: Support placeholder text for inputs. We currently don't use this because it requires JS and doesn't degrade (no JS means you have zero idea what the input is for if it isn't separately labeled) but there are some cases where intent is obvious from context (for example, the search input in the menu bar, which is fairly obvious on its own and will soon have a magnifying glass icon) and in such cases it's much prettier and saves a bunch of space over an explicit label. Add a behavior so we can add placeholders where they make sense. This implementation is somewhat sanity-checked agianst the two jQuery placeholder implementations I was able to google: https://github.com/danielstocks/jQuery-Placeholder/ https://github.com/mathiasbynens/jquery-placeholder Since we don't currently have any uses cases, I haven't included support for making JS access to the `value` work, for password inputs, or for dynamically altering the placeholder. Test Plan: Played around with the placeholder in the UI example in various browsers and couldn't break it. Reviewers: btrahan, chad Reviewed By: btrahan CC: aran Maniphest Tasks: T1569 Differential Revision: https://secure.phabricator.com/D3103
314 lines
5.4 KiB
CSS
314 lines
5.4 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;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
|
|
.phabricator-logo a.logo-standard {
|
|
background: url(/rsrc/image/phabricator_logo.png) no-repeat -220px 0;
|
|
}
|
|
|
|
.phabricator-admin-page-view .phabricator-logo a.logo-standard {
|
|
background-image: url(/rsrc/image/phabricator_logo_admin.png);
|
|
}
|
|
|
|
.phabricator-logo a.logo-standard:hover {
|
|
background-position: -220px -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;
|
|
}
|
|
|
|
.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 {
|
|
height: 16px;
|
|
vertical-align: middle;
|
|
color: #666666;
|
|
text-align: right;
|
|
padding-right: 24px;
|
|
font-size: 11px;
|
|
background:
|
|
url('/rsrc/image/icon/fatcow/key_question.png') right center 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,
|
|
a.handle-status-away,
|
|
a.handle-status-sporadic {
|
|
padding-left: 12px;
|
|
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 {
|
|
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;
|
|
|
|
}
|
|
|
|
.phabricator-icon-menu {
|
|
height: 40px;
|
|
width: 60px;
|
|
left: -22px;
|
|
position: relative;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.phabricator-icon-menu-cell {
|
|
width: 60px;
|
|
}
|
|
|
|
.phabricator-admin-page-view .icon-menu-notifications {
|
|
background: url(/rsrc/image/notification_menu_admin.png);
|
|
}
|
|
|
|
.icon-menu-notifications {
|
|
background: url(/rsrc/image/notification_menu.png);
|
|
}
|
|
|
|
.phabricator-icon-menu:hover {
|
|
background-position: 0 -40px;
|
|
}
|
|
|
|
.phabricator-notification-indicator {
|
|
display: none;
|
|
}
|
|
|
|
.phabricator-notification-indicator-unread {
|
|
display: block;
|
|
|
|
position: absolute;
|
|
right: 8px;
|
|
top: 2px;
|
|
padding: 1px 3px;
|
|
|
|
background: #dd3333;
|
|
|
|
border: 1px solid #aa0000;
|
|
font-size: 11px;
|
|
|
|
box-shadow: 0px 0px 4px rgba(255, 255, 255, 0.75);
|
|
}
|
|
|
|
|
|
#phabricator-notification-dropdown {
|
|
position: absolute;
|
|
top: 40px;
|
|
|
|
border: 1px solid #99c4d7;
|
|
border-top-width: 0;
|
|
background: #fdfdff;
|
|
|
|
width: 360px;
|
|
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.25);
|
|
|
|
font-size: 11px;
|
|
|
|
z-index: 3;
|
|
|
|
word-wrap: break-word;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.phabricator-notification {
|
|
padding: 6px 6px;
|
|
margin: 1px 0;
|
|
}
|
|
|
|
.no-notifications {
|
|
color: #999999;
|
|
}
|
|
|
|
.phabricator-notification-list {
|
|
font-size: 11px;
|
|
}
|
|
|
|
.phabricator-notification-list .phabricator-notification-unread,
|
|
#phabricator-notification-dropdown .phabricator-notification-unread {
|
|
background: #aacfef;
|
|
}
|
|
|
|
.view-all-notifications {
|
|
text-align: center;
|
|
font-weight: bold;
|
|
background: #eeeeee;
|
|
border-top: 1px solid #dddddd;
|
|
}
|
|
|
|
|
|
/**
|
|
* Placeholder text added to inputs by the "placeholder" behavior.
|
|
*/
|
|
.jx-placeholder {
|
|
color: #888888;
|
|
}
|