mirror of
https://we.phorge.it/source/phorge.git
synced 2025-01-30 16:38:21 +01:00
Rework buttons with new gradients, rounded corners.
Summary: This adds a green/blue/grey gradient and new button CSS. Updated. Test Plan: Clicked through various pages in my install, but would like more feedback. Reviewers: btrahan, epriestley Reviewed By: epriestley CC: vrana, aran, Korvin Differential Revision: https://secure.phabricator.com/D3919
This commit is contained in:
Chad Little
parent
726a4912bd
commit
ead96f467b
5 changed files with 81 additions and 126 deletions
|
|
@ -84,6 +84,13 @@ celerity_register_resource_map(array(
|
|||
'disk' => '/rsrc/image/button_content.png',
|
||||
'type' => 'png',
|
||||
),
|
||||
'/rsrc/image/button_gradients.png' =>
|
||||
array(
|
||||
'hash' => '9157bc3cc3321e0d04e94532dfe50ce7',
|
||||
'uri' => '/res/9157bc3c/rsrc/image/button_gradients.png',
|
||||
'disk' => '/rsrc/image/button_gradients.png',
|
||||
'type' => 'png',
|
||||
),
|
||||
'/rsrc/image/button_menu.png' =>
|
||||
array(
|
||||
'hash' => '5742857c7734d9d25be1125f5737fe0e',
|
||||
|
|
@ -2415,7 +2422,7 @@ celerity_register_resource_map(array(
|
|||
),
|
||||
'phabricator-core-buttons-css' =>
|
||||
array(
|
||||
'uri' => '/res/427fac91/rsrc/css/core/buttons.css',
|
||||
'uri' => '/res/9916e65f/rsrc/css/core/buttons.css',
|
||||
'type' => 'css',
|
||||
'requires' =>
|
||||
array(
|
||||
|
|
@ -2573,7 +2580,7 @@ celerity_register_resource_map(array(
|
|||
),
|
||||
'phabricator-main-menu-view' =>
|
||||
array(
|
||||
'uri' => '/res/3280629d/rsrc/css/application/base/main-menu-view.css',
|
||||
'uri' => '/res/8c3aaa49/rsrc/css/application/base/main-menu-view.css',
|
||||
'type' => 'css',
|
||||
'requires' =>
|
||||
array(
|
||||
|
|
@ -3098,7 +3105,7 @@ celerity_register_resource_map(array(
|
|||
), array(
|
||||
'packages' =>
|
||||
array(
|
||||
'10a01616' =>
|
||||
'01a9b810' =>
|
||||
array(
|
||||
'name' => 'core.pkg.css',
|
||||
'symbols' =>
|
||||
|
|
@ -3127,7 +3134,7 @@ celerity_register_resource_map(array(
|
|||
21 => 'phabricator-flag-css',
|
||||
22 => 'aphront-error-view-css',
|
||||
),
|
||||
'uri' => '/res/pkg/10a01616/core.pkg.css',
|
||||
'uri' => '/res/pkg/01a9b810/core.pkg.css',
|
||||
'type' => 'css',
|
||||
),
|
||||
'805a58d7' =>
|
||||
|
|
@ -3294,20 +3301,20 @@ celerity_register_resource_map(array(
|
|||
'reverse' =>
|
||||
array(
|
||||
'aphront-attached-file-view-css' => '7839ae2d',
|
||||
'aphront-crumbs-view-css' => '10a01616',
|
||||
'aphront-dialog-view-css' => '10a01616',
|
||||
'aphront-error-view-css' => '10a01616',
|
||||
'aphront-form-view-css' => '10a01616',
|
||||
'aphront-crumbs-view-css' => '01a9b810',
|
||||
'aphront-dialog-view-css' => '01a9b810',
|
||||
'aphront-error-view-css' => '01a9b810',
|
||||
'aphront-form-view-css' => '01a9b810',
|
||||
'aphront-headsup-action-list-view-css' => '7d861806',
|
||||
'aphront-headsup-view-css' => '10a01616',
|
||||
'aphront-list-filter-view-css' => '10a01616',
|
||||
'aphront-pager-view-css' => '10a01616',
|
||||
'aphront-panel-view-css' => '10a01616',
|
||||
'aphront-side-nav-view-css' => '10a01616',
|
||||
'aphront-table-view-css' => '10a01616',
|
||||
'aphront-tokenizer-control-css' => '10a01616',
|
||||
'aphront-tooltip-css' => '10a01616',
|
||||
'aphront-typeahead-control-css' => '10a01616',
|
||||
'aphront-headsup-view-css' => '01a9b810',
|
||||
'aphront-list-filter-view-css' => '01a9b810',
|
||||
'aphront-pager-view-css' => '01a9b810',
|
||||
'aphront-panel-view-css' => '01a9b810',
|
||||
'aphront-side-nav-view-css' => '01a9b810',
|
||||
'aphront-table-view-css' => '01a9b810',
|
||||
'aphront-tokenizer-control-css' => '01a9b810',
|
||||
'aphront-tooltip-css' => '01a9b810',
|
||||
'aphront-typeahead-control-css' => '01a9b810',
|
||||
'differential-changeset-view-css' => '7d861806',
|
||||
'differential-core-view-css' => '7d861806',
|
||||
'differential-inline-comment-editor' => 'cab76945',
|
||||
|
|
@ -3373,15 +3380,15 @@ celerity_register_resource_map(array(
|
|||
'javelin-workflow' => '805a58d7',
|
||||
'maniphest-task-summary-css' => '7839ae2d',
|
||||
'maniphest-transaction-detail-css' => '7839ae2d',
|
||||
'phabricator-app-buttons-css' => '10a01616',
|
||||
'phabricator-app-buttons-css' => '01a9b810',
|
||||
'phabricator-content-source-view-css' => '7d861806',
|
||||
'phabricator-core-buttons-css' => '10a01616',
|
||||
'phabricator-core-css' => '10a01616',
|
||||
'phabricator-directory-css' => '10a01616',
|
||||
'phabricator-core-buttons-css' => '01a9b810',
|
||||
'phabricator-core-css' => '01a9b810',
|
||||
'phabricator-directory-css' => '01a9b810',
|
||||
'phabricator-drag-and-drop-file-upload' => 'cab76945',
|
||||
'phabricator-dropdown-menu' => '805a58d7',
|
||||
'phabricator-flag-css' => '10a01616',
|
||||
'phabricator-jump-nav' => '10a01616',
|
||||
'phabricator-flag-css' => '01a9b810',
|
||||
'phabricator-jump-nav' => '01a9b810',
|
||||
'phabricator-keyboard-shortcut' => '805a58d7',
|
||||
'phabricator-keyboard-shortcut-manager' => '805a58d7',
|
||||
'phabricator-menu-item' => '805a58d7',
|
||||
|
|
@ -3389,11 +3396,11 @@ celerity_register_resource_map(array(
|
|||
'phabricator-paste-file-upload' => '805a58d7',
|
||||
'phabricator-prefab' => '805a58d7',
|
||||
'phabricator-project-tag-css' => '7839ae2d',
|
||||
'phabricator-remarkup-css' => '10a01616',
|
||||
'phabricator-remarkup-css' => '01a9b810',
|
||||
'phabricator-shaped-request' => 'cab76945',
|
||||
'phabricator-standard-page-view' => '10a01616',
|
||||
'phabricator-standard-page-view' => '01a9b810',
|
||||
'phabricator-tooltip' => '805a58d7',
|
||||
'phabricator-transaction-view-css' => '10a01616',
|
||||
'syntax-highlighting-css' => '10a01616',
|
||||
'phabricator-transaction-view-css' => '01a9b810',
|
||||
'syntax-highlighting-css' => '01a9b810',
|
||||
),
|
||||
));
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ final class PhabricatorButtonsExample extends PhabricatorUIExample {
|
|||
$request = $this->getRequest();
|
||||
$user = $request->getUser();
|
||||
|
||||
$colors = array('', 'green', 'grey', 'disabled');
|
||||
$colors = array('', 'green', 'grey', 'black', 'disabled');
|
||||
$sizes = array('', 'small');
|
||||
$tags = array('a', 'button');
|
||||
|
||||
|
|
|
|||
|
|
@ -256,6 +256,8 @@
|
|||
border: none;
|
||||
outline: none;
|
||||
box-shadow: none;
|
||||
text-shadow: none;
|
||||
min-width: 0;
|
||||
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
|
|
|
|||
|
|
@ -7,34 +7,24 @@ button,
|
|||
a.button,
|
||||
a.button:visited,
|
||||
input.inputsubmit {
|
||||
background: #5e77aa url('/rsrc/image/sprite.png') 0 0 repeat-x;
|
||||
border: 1px solid #29447e;
|
||||
border-bottom-color: #1a356e;
|
||||
color: #fff;
|
||||
background-color: #19558D;
|
||||
background-image: url('/rsrc/image/button_gradients.png');
|
||||
background-position: 0 -26px;
|
||||
|
||||
color: white;
|
||||
min-width: 60px;
|
||||
text-shadow: 0 -1px #19558D;
|
||||
border: 1px solid #19558D;
|
||||
cursor: pointer;
|
||||
font-weight: bold;
|
||||
display: inline-block;
|
||||
padding: 3px 10px 4px;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
display: inline-block;
|
||||
font-size: 13px;
|
||||
overflow: visible;
|
||||
padding: 2px 8px 3px 8px;
|
||||
line-height: 18px;
|
||||
vertical-align: baseline;
|
||||
width: auto;
|
||||
box-shadow: 0px 1px 0px rgba(0,0,0,.12);
|
||||
-moz-box-shadow: 0px 1px 0px rgba(0,0,0,.12);
|
||||
-webkit-box-shadow: 0px 1px 0px rgba(0,0,0,.12);
|
||||
}
|
||||
|
||||
button {
|
||||
*padding: 2px 4px 1px 8px;
|
||||
_padding-right: 6px;
|
||||
}
|
||||
|
||||
a.button,
|
||||
a.button:visited {
|
||||
*padding: 3px 8px 4px;
|
||||
border-radius: 3px;
|
||||
-webkit-border-radius: 3px;
|
||||
-moz-border-radius: 3px;
|
||||
}
|
||||
|
||||
/* Buttons with images (full size only) */
|
||||
|
|
@ -46,33 +36,40 @@ a.icon:visited {
|
|||
text-indent: 29px;
|
||||
}
|
||||
|
||||
/* Fix for IE7 within table cells ? */
|
||||
td button {
|
||||
*width: 100%;
|
||||
*padding-right: 8px;
|
||||
}
|
||||
|
||||
button:active,
|
||||
a.button:active {
|
||||
background-color: #4f6aa3;
|
||||
background-position: 0 -100px;
|
||||
border-bottom-color: #29447e;
|
||||
background-color: #19558D;
|
||||
background-position: 0 0;
|
||||
}
|
||||
|
||||
button.black,
|
||||
a.black,
|
||||
a.black:visited {
|
||||
background-color: #383838;
|
||||
background-position: 0 -182px;
|
||||
border: 1px solid #333;
|
||||
text-shadow: 0 -1px #000;
|
||||
border-bottom-color: #000;
|
||||
}
|
||||
|
||||
button.black:active,
|
||||
a.black:active {
|
||||
background-position: 0 -156px;
|
||||
}
|
||||
|
||||
button.green,
|
||||
a.green,
|
||||
a.green:visited {
|
||||
background-color: #6da952;
|
||||
background-position: 0 -50px;
|
||||
background-color: #006600;
|
||||
background-position: 0 -130px;
|
||||
border: 1px solid #3b6e22;
|
||||
text-shadow: 0 -1px #006600;
|
||||
border-bottom-color: #2c5a15;
|
||||
}
|
||||
|
||||
button.green:active,
|
||||
a.green:active {
|
||||
background-color: #5e9d43;
|
||||
background-position: 0 -150px;
|
||||
border-bottom-color: #3b6e22;
|
||||
background-position: 0 -104px;
|
||||
}
|
||||
|
||||
button.grey,
|
||||
|
|
@ -82,14 +79,13 @@ a.grey:visited,
|
|||
a.button.disabled,
|
||||
button[disabled], /* Set by JX.Workflow. */
|
||||
button.disabled {
|
||||
background-color: #e4e5e5;
|
||||
background-position: 0 -250px;
|
||||
border: 1px solid #999;
|
||||
border-bottom-color: #888;
|
||||
background-color: #f7f7f7;
|
||||
background-image: url('/rsrc/image/button_gradients.png');
|
||||
background-position: 0 -52px;
|
||||
border-color: #aaa;
|
||||
color: #333;
|
||||
box-shadow: 0px 1px 0px rgba(0,0,0,.07);
|
||||
-moz-box-shadow: 0px 1px 0px rgba(0,0,0,.07);
|
||||
-webkit-box-shadow: 0px 1px 0px rgba(0,0,0,.07);
|
||||
border-bottom-color: #999;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
a.disabled,
|
||||
|
|
@ -104,24 +100,9 @@ button.grey:active,
|
|||
a.grey:active,
|
||||
button.grey_active,
|
||||
a.dropdown-open {
|
||||
background-color: #dddddd;
|
||||
background-position: 0 -200px;
|
||||
border-bottom-color: #999;
|
||||
}
|
||||
|
||||
button:active::-moz-focus-inner,
|
||||
button:focus::-moz-focus-inner {
|
||||
border-color: #405071;
|
||||
}
|
||||
|
||||
button.green:active::-moz-focus-inner,
|
||||
button.green:focus::-moz-focus-inner {
|
||||
border-color: #4c713b;
|
||||
}
|
||||
|
||||
button.grey:active::-moz-focus-inner,
|
||||
button.grey:focus::-moz-focus-inner {
|
||||
border-color: #666;
|
||||
background-color: #7d7d7d;
|
||||
background-position: 0 -78px;
|
||||
color: #777;
|
||||
}
|
||||
|
||||
a.button:hover {
|
||||
|
|
@ -147,6 +128,7 @@ button.link {
|
|||
font-size: inherit;
|
||||
border-bottom: none;
|
||||
text-decoration: none;
|
||||
text-shadow: none;
|
||||
color: #3b5998;
|
||||
-webkit-box-shadow: none;
|
||||
-moz-box-shadow: none;
|
||||
|
|
@ -157,42 +139,6 @@ button.link:hover {
|
|||
text-decoration: underline;
|
||||
}
|
||||
|
||||
a.toggle {
|
||||
background: #d3d3d3;
|
||||
padding: 2px 6px 3px;
|
||||
font-weight: bold;
|
||||
margin-right: 4px;
|
||||
margin-bottom: 5px;
|
||||
display: block;
|
||||
float: left;
|
||||
color: #777777;
|
||||
border-radius: 8px;
|
||||
-moz-border-radius: 8px;
|
||||
-webkit-border-radius: 8px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a.toggle:hover {
|
||||
background: #b0b0b0;
|
||||
color: white;
|
||||
}
|
||||
|
||||
a.toggle-selected {
|
||||
background: #909090;
|
||||
color: white;
|
||||
}
|
||||
|
||||
a.toggle-fixed {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
a.toggle-fixed:hover {
|
||||
background: #909090;
|
||||
}
|
||||
|
||||
|
||||
a.dropdown-open {
|
||||
}
|
||||
|
||||
.dropdown-menu-frame {
|
||||
z-index: 32;
|
||||
|
|
|
|||
BIN
webroot/rsrc/image/button_gradients.png
Normal file
BIN
webroot/rsrc/image/button_gradients.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
Loading…
Add table
Reference in a new issue