diff --git a/resources/sprite/gradients/black-dark.png b/resources/sprite/gradients/black-dark.png new file mode 100644 index 0000000000..357183730f Binary files /dev/null and b/resources/sprite/gradients/black-dark.png differ diff --git a/resources/sprite/gradients/black-light.png b/resources/sprite/gradients/black-light.png new file mode 100644 index 0000000000..6c744f92b2 Binary files /dev/null and b/resources/sprite/gradients/black-light.png differ diff --git a/resources/sprite/gradients/blue-dark.png b/resources/sprite/gradients/blue-dark.png new file mode 100644 index 0000000000..95b44ed8a1 Binary files /dev/null and b/resources/sprite/gradients/blue-dark.png differ diff --git a/resources/sprite/gradients/blue-light.png b/resources/sprite/gradients/blue-light.png new file mode 100644 index 0000000000..95f5f0c5e2 Binary files /dev/null and b/resources/sprite/gradients/blue-light.png differ diff --git a/resources/sprite/gradients/breadcrumbs.png b/resources/sprite/gradients/breadcrumbs.png new file mode 100644 index 0000000000..ea39b776ab Binary files /dev/null and b/resources/sprite/gradients/breadcrumbs.png differ diff --git a/resources/sprite/gradients/dark-menu-label.png b/resources/sprite/gradients/dark-menu-label.png new file mode 100644 index 0000000000..30f94c868a Binary files /dev/null and b/resources/sprite/gradients/dark-menu-label.png differ diff --git a/resources/sprite/gradients/green-dark.png b/resources/sprite/gradients/green-dark.png new file mode 100644 index 0000000000..718c903318 Binary files /dev/null and b/resources/sprite/gradients/green-dark.png differ diff --git a/resources/sprite/gradients/green-light.png b/resources/sprite/gradients/green-light.png new file mode 100644 index 0000000000..3c9422da3a Binary files /dev/null and b/resources/sprite/gradients/green-light.png differ diff --git a/resources/sprite/gradients/grey-dark.png b/resources/sprite/gradients/grey-dark.png new file mode 100644 index 0000000000..d5b60e0636 Binary files /dev/null and b/resources/sprite/gradients/grey-dark.png differ diff --git a/resources/sprite/gradients/grey-light.png b/resources/sprite/gradients/grey-light.png new file mode 100644 index 0000000000..94c223aee6 Binary files /dev/null and b/resources/sprite/gradients/grey-light.png differ diff --git a/resources/sprite/manifest/gradient.json b/resources/sprite/manifest/gradient.json new file mode 100644 index 0000000000..ab96d12c96 --- /dev/null +++ b/resources/sprite/manifest/gradient.json @@ -0,0 +1,60 @@ +{ + "version" : 1, + "sprites" : { + "gradient-black-dark" : { + "name" : "gradient-black-dark", + "rule" : ".gradient-black-dark, button.black, a.black, a.black:visited", + "hash" : "b9faf8505427bb14a8c51324e13e2f81" + }, + "gradient-black-light" : { + "name" : "gradient-black-light", + "rule" : ".gradient-black-light, button.black:active, a.black:active", + "hash" : "812c3375d00ccc93c36c6df2eb565df4" + }, + "gradient-blue-dark" : { + "name" : "gradient-blue-dark", + "rule" : ".gradient-blue-dark, button, a.button, a.button:visited, input.inputsubmit", + "hash" : "adc2d0f7397374936384014c5d78550d" + }, + "gradient-blue-light" : { + "name" : "gradient-blue-light", + "rule" : ".gradient-blue-light, button:active, a.button:active", + "hash" : "91b841067a63e543a4dcd9d41e0a2e5c" + }, + "gradient-breadcrumbs" : { + "name" : "gradient-breadcrumbs", + "rule" : ".gradient-breadcrumbs", + "hash" : "688ab77f50cfbc17ec30d798efb1b39e" + }, + "gradient-dark-menu-label" : { + "name" : "gradient-dark-menu-label", + "rule" : ".gradient-dark-menu-label", + "hash" : "89a908596142d38fbe61a706694cd321" + }, + "gradient-green-dark" : { + "name" : "gradient-green-dark", + "rule" : ".gradient-green-dark, button.green, a.green, a.green:visited", + "hash" : "0d19ab593772b6b406c0db309b3a14fb" + }, + "gradient-green-light" : { + "name" : "gradient-green-light", + "rule" : ".gradient-green-light, button.green:active, a.green:active", + "hash" : "71c67916327ec7fc65149ab72c3a2924" + }, + "gradient-grey-dark" : { + "name" : "gradient-grey-dark", + "rule" : ".gradient-grey-dark, button.grey, input.inputaux, a.grey, a.grey:visited, a.button.disabled, button[disabled], button.disabled", + "hash" : "32651902d28d37dca01cf067072c39c0" + }, + "gradient-grey-light" : { + "name" : "gradient-grey-light", + "rule" : ".gradient-grey-light, button.grey:active, a.grey:active, button.grey_active, a.dropdown-open", + "hash" : "c3c9ee1ed6f800a4ac86910b94687877" + } + }, + "scales" : [ + 1 + ], + "header" : "\/**\n * @provides sprite-gradient-css\n * @generated\n *\/\n\n.sprite-gradient, button, a.button, a.button:visited, input.inputsubmit {\n background-image: url(\/rsrc\/image\/sprite-gradient.png);\n background-repeat: repeat-x;\n}\n\n@media\nonly screen and (min-device-pixel-ratio: 1.5),\nonly screen and (-webkit-min-device-pixel-ratio: 1.5) {\n .sprite-gradient, button, a.button, a.button:visited, input.inputsubmit {\n background-image: url(\/rsrc\/image\/sprite-gradient-X2.png);\n background-size: {X}px {Y}px;\n }\n}", + "type" : "repeat-x" +} diff --git a/resources/sprite/manifest/icon.json b/resources/sprite/manifest/icon.json index 62019003a3..0c53260cad 100644 --- a/resources/sprite/manifest/icon.json +++ b/resources/sprite/manifest/icon.json @@ -966,5 +966,6 @@ 1, 2 ], - "header" : "\/**\n * @provides sprite-icon-css\n * @generated\n *\/\n\n.sprite-icon {\n background-image: url(\/rsrc\/image\/sprite-icon.png);\n background-repeat: no-repeat;\n}\n\n@media\nonly screen and (min-device-pixel-ratio: 1.5),\nonly screen and (-webkit-min-device-pixel-ratio: 1.5) {\n .sprite-icon {\n background-image: url(\/rsrc\/image\/sprite-icon-X2.png);\n background-size: {X}px {Y}px;\n }\n}" + "header" : "\/**\n * @provides sprite-icon-css\n * @generated\n *\/\n\n.sprite-icon {\n background-image: url(\/rsrc\/image\/sprite-icon.png);\n background-repeat: no-repeat;\n}\n\n@media\nonly screen and (min-device-pixel-ratio: 1.5),\nonly screen and (-webkit-min-device-pixel-ratio: 1.5) {\n .sprite-icon {\n background-image: url(\/rsrc\/image\/sprite-icon-X2.png);\n background-size: {X}px {Y}px;\n }\n}", + "type" : "standard" } diff --git a/resources/sprite/manifest/menu.json b/resources/sprite/manifest/menu.json index 245e291697..75c4747934 100644 --- a/resources/sprite/manifest/menu.json +++ b/resources/sprite/manifest/menu.json @@ -1,35 +1,41 @@ { "version" : 1, "sprites" : { + "arrow-right" : { + "name" : "arrow-right", + "rule" : ".phabricator-crumb-divider", + "hash" : "a994209450dc73a80841cdd66bb59925" + }, "bubble" : { "name" : "bubble", "rule" : ".phabricator-main-menu-alert-bubble.alert-unread", - "hash" : "07bc6fd60e5c2fa14558c9101cba5261" + "hash" : "1145ac8a137a2a22517c1945fe22c517" }, "round_bubble" : { "name" : "round_bubble", "rule" : ".phabricator-main-menu-alert-bubble", - "hash" : "02de5b1c1720749a566e7a4cf7c2216c" + "hash" : "9be91cc0128997992e9001baf32c8ab8" }, "seen_have_unread" : { "name" : "seen_have_unread", "rule" : ".alert-notifications:hover .phabricator-main-menu-alert-icon", - "hash" : "d0210b3908193ee841db2eeec264a154" + "hash" : "a8a7f07caa726d7e61ef3d41f959d94d" }, "seen_read_all" : { "name" : "seen_read_all", "rule" : ".alert-notifications .phabricator-main-menu-alert-icon", - "hash" : "8d0644ec8fa33330b30b7531272e24f1" + "hash" : "4fdd4807d0c41bd4179dd43150c7fc44" }, "unseen_any" : { "name" : "unseen_any", "rule" : ".alert-notifications.alert-unread .phabricator-main-menu-alert-icon", - "hash" : "0e50bf01f640b2f8231eaef246863f0b" + "hash" : "50d946952c73028b34e0c3378ca36b17" } }, "scales" : [ 1, 2 ], - "header" : "\/**\n * @provides sprite-menu-css\n * @generated\n *\/\n\n.sprite-menu {\n background-image: url(\/rsrc\/image\/sprite-menu.png);\n background-repeat: no-repeat;\n}\n\n@media\nonly screen and (min-device-pixel-ratio: 1.5),\nonly screen and (-webkit-min-device-pixel-ratio: 1.5) {\n .sprite-menu {\n background-image: url(\/rsrc\/image\/sprite-menu-X2.png);\n background-size: {X}px {Y}px;\n }\n}" + "header" : "\/**\n * @provides sprite-menu-css\n * @generated\n *\/\n\n.sprite-menu {\n background-image: url(\/rsrc\/image\/sprite-menu.png);\n background-repeat: no-repeat;\n}\n\n@media\nonly screen and (min-device-pixel-ratio: 1.5),\nonly screen and (-webkit-min-device-pixel-ratio: 1.5) {\n .sprite-menu {\n background-image: url(\/rsrc\/image\/sprite-menu-X2.png);\n background-size: {X}px {Y}px;\n }\n}", + "type" : "standard" } diff --git a/resources/sprite/menu_1x/arrow-right.png b/resources/sprite/menu_1x/arrow-right.png new file mode 100644 index 0000000000..29d43457ce Binary files /dev/null and b/resources/sprite/menu_1x/arrow-right.png differ diff --git a/resources/sprite/notifications_1x/bubble.png b/resources/sprite/menu_1x/bubble.png similarity index 100% rename from resources/sprite/notifications_1x/bubble.png rename to resources/sprite/menu_1x/bubble.png diff --git a/resources/sprite/notifications_1x/round_bubble.png b/resources/sprite/menu_1x/round_bubble.png similarity index 100% rename from resources/sprite/notifications_1x/round_bubble.png rename to resources/sprite/menu_1x/round_bubble.png diff --git a/resources/sprite/notifications_1x/seen_have_unread.png b/resources/sprite/menu_1x/seen_have_unread.png similarity index 100% rename from resources/sprite/notifications_1x/seen_have_unread.png rename to resources/sprite/menu_1x/seen_have_unread.png diff --git a/resources/sprite/notifications_1x/seen_read_all.png b/resources/sprite/menu_1x/seen_read_all.png similarity index 100% rename from resources/sprite/notifications_1x/seen_read_all.png rename to resources/sprite/menu_1x/seen_read_all.png diff --git a/resources/sprite/notifications_1x/unseen_any.png b/resources/sprite/menu_1x/unseen_any.png similarity index 100% rename from resources/sprite/notifications_1x/unseen_any.png rename to resources/sprite/menu_1x/unseen_any.png diff --git a/resources/sprite/menu_2x/arrow-right.png b/resources/sprite/menu_2x/arrow-right.png new file mode 100644 index 0000000000..ae8784fa8c Binary files /dev/null and b/resources/sprite/menu_2x/arrow-right.png differ diff --git a/resources/sprite/notifications_2x/bubble.png b/resources/sprite/menu_2x/bubble.png similarity index 100% rename from resources/sprite/notifications_2x/bubble.png rename to resources/sprite/menu_2x/bubble.png diff --git a/resources/sprite/notifications_2x/round_bubble.png b/resources/sprite/menu_2x/round_bubble.png similarity index 100% rename from resources/sprite/notifications_2x/round_bubble.png rename to resources/sprite/menu_2x/round_bubble.png diff --git a/resources/sprite/notifications_2x/seen_have_unread.png b/resources/sprite/menu_2x/seen_have_unread.png similarity index 100% rename from resources/sprite/notifications_2x/seen_have_unread.png rename to resources/sprite/menu_2x/seen_have_unread.png diff --git a/resources/sprite/notifications_2x/seen_read_all.png b/resources/sprite/menu_2x/seen_read_all.png similarity index 100% rename from resources/sprite/notifications_2x/seen_read_all.png rename to resources/sprite/menu_2x/seen_read_all.png diff --git a/resources/sprite/notifications_2x/unseen_any.png b/resources/sprite/menu_2x/unseen_any.png similarity index 100% rename from resources/sprite/notifications_2x/unseen_any.png rename to resources/sprite/menu_2x/unseen_any.png diff --git a/scripts/celerity/generate_sprites.php b/scripts/celerity/generate_sprites.php index a53e4c3faf..a395d5b76e 100755 --- a/scripts/celerity/generate_sprites.php +++ b/scripts/celerity/generate_sprites.php @@ -88,6 +88,7 @@ foreach ($icon_map as $icon => $coords) { foreach ($menu_map as $suffix => $template) { $sheet->addSprite( id(clone $template) + ->setName('menu-item-'.$icon.'-'.$suffix) ->setSourcePosition(glx($x), gly($y)) ->setTargetCSS('.main-menu-item-icon-'.$icon.$suffix)); } @@ -183,6 +184,7 @@ foreach ($app_map as $icon => $coords) { } $sheet->addSprite( id(clone $template) + ->setName('app-'.$icon.'-'.$suffix) ->setSourcePosition(($xadj + glx($x)) * $scale, gly($y) * $scale) ->setTargetCSS($prefix.'.app-'.$icon.$suffix)); } @@ -199,6 +201,7 @@ $generator = new CeleritySpriteGenerator(); $sheets = array( 'icon' => $generator->buildIconSheet(), 'menu' => $generator->buildMenuSheet(), + 'gradient' => $generator->buildGradientSheet(), ); foreach ($sheets as $name => $sheet) { @@ -214,10 +217,17 @@ foreach ($sheets as $name => $sheet) { } $sheet - ->generateImage($webroot."/image/sprite-{$name}.png", 1) - ->generateImage($webroot."/image/sprite-{$name}-X2.png", 2) ->generateCSS($webroot."/css/sprite-{$name}.css") ->generateManifest($root."/resources/sprite/manifest/{$name}.json"); + + foreach ($sheet->getScales() as $scale) { + if ($scale == 1) { + $sheet_name = "sprite-{$name}.png"; + } else { + $sheet_name = "sprite-{$name}-X{$scale}.png"; + } + $sheet->generateImage("{$webroot}/image/{$sheet_name}", $scale); + } } echo "Done.\n"; diff --git a/src/infrastructure/celerity/CeleritySpriteGenerator.php b/src/infrastructure/celerity/CeleritySpriteGenerator.php index 77d588e40c..4d88b69c99 100644 --- a/src/infrastructure/celerity/CeleritySpriteGenerator.php +++ b/src/infrastructure/celerity/CeleritySpriteGenerator.php @@ -108,6 +108,11 @@ final class CeleritySpriteGenerator { 'css' => '.alert-notifications.alert-unread .phabricator-main-menu-alert-icon', ), + 'arrow-right' => array( + 'x' => 9, + 'y' => 31, + 'css' => '.phabricator-crumb-divider', + ), ); $scales = array( @@ -123,7 +128,7 @@ final class CeleritySpriteGenerator { ->setTargetCSS($spec['css']); foreach ($scales as $scale_name => $scale) { - $path = 'notifications_'.$scale_name.'/'.$name.'.png'; + $path = 'menu_'.$scale_name.'/'.$name.'.png'; $path = $this->getPath($path); $sprite->setSourceFile($path, $scale); @@ -140,6 +145,65 @@ final class CeleritySpriteGenerator { return $sheet; } + public function buildGradientSheet() { + $gradients = $this->getDirectoryList('gradients'); + + $template = new PhutilSprite(); + + $unusual_heights = array( + 'dark-menu-label' => 25, + 'breadcrumbs' => 31, + ); + + // Reorder the sprites so less-specific rules generate earlier in the sheet. + // Otherwise we end up with blue "a.black" buttons because the blue rules + // have the same specificity but appear later. + $gradients = array_combine($gradients, $gradients); + $gradients = array_select_keys( + $gradients, + array( + 'blue-dark', + 'blue-light', + )) + $gradients; + + $extra_css = array( + 'black-dark' => ', button.black, a.black, a.black:visited', + 'black-light' => ', button.black:active, a.black:active', + 'blue-dark' => ', button, a.button, a.button:visited, input.inputsubmit', + 'blue-light' => ', button:active, a.button:active', + 'grey-dark' => ', button.grey, input.inputaux, a.grey, a.grey:visited, '. + 'a.button.disabled, button[disabled], button.disabled', + 'grey-light' => ', button.grey:active, a.grey:active, '. + 'button.grey_active, a.dropdown-open', + 'green-dark' => ', button.green, a.green, a.green:visited', + 'green-light' => ', button.green:active, a.green:active', + ); + + $sprites = array(); + foreach ($gradients as $gradient) { + $path = $this->getPath('gradients/'.$gradient.'.png'); + $sprite = id(clone $template) + ->setName('gradient-'.$gradient) + ->setSourceFile($path) + ->setTargetCSS('.gradient-'.$gradient.idx($extra_css, $gradient)); + + $sprite->setSourceSize(4, idx($unusual_heights, $gradient, 26)); + + $sprites[] = $sprite; + } + + $sheet = $this->buildSheet( + 'gradient', + PhutilSpriteSheet::TYPE_REPEAT_X, + ', button, a.button, a.button:visited, input.inputsubmit'); + foreach ($sprites as $sprite) { + $sheet->addSprite($sprite); + } + + return $sheet; + } + + private function getPath($to_path = null) { $root = dirname(phutil_get_library_root('phabricator')); return $root.'/resources/sprite/'.$to_path; @@ -163,25 +227,41 @@ final class CeleritySpriteGenerator { return $result; } - private function buildSheet($name) { + private function buildSheet($name, $type = null, $extra_css = '') { $sheet = new PhutilSpriteSheet(); $at = '@'; + + switch ($type) { + case PhutilSpriteSheet::TYPE_STANDARD: + default: + $type = PhutilSpriteSheet::TYPE_STANDARD; + $repeat_rule = 'no-repeat'; + break; + case PhutilSpriteSheet::TYPE_REPEAT_X: + $repeat_rule = 'repeat-x'; + break; + case PhutilSpriteSheet::TYPE_REPEAT_Y: + $repeat_rule = 'repeat-y'; + break; + } + + $sheet->setSheetType($type); $sheet->setCSSHeader(<< $local_id, 'dragID' => $drag_id, 'contentID' => $content_id, - 'menuSize' => ($crumbs ? 78 : 44), + 'menuSize' => ($crumbs ? 76 : 44), )); if ($this->active && $local_id) { diff --git a/src/view/layout/PhabricatorCrumbView.php b/src/view/layout/PhabricatorCrumbView.php index 20d7a888d8..65f522649f 100644 --- a/src/view/layout/PhabricatorCrumbView.php +++ b/src/view/layout/PhabricatorCrumbView.php @@ -59,7 +59,7 @@ final class PhabricatorCrumbView extends AphrontView { $divider = phutil_render_tag( 'span', array( - 'class' => 'phabricator-crumb-divider', + 'class' => 'sprite-menu phabricator-crumb-divider', ), ''); } diff --git a/src/view/layout/PhabricatorCrumbsView.php b/src/view/layout/PhabricatorCrumbsView.php index 7d4ca345c5..347aa6420c 100644 --- a/src/view/layout/PhabricatorCrumbsView.php +++ b/src/view/layout/PhabricatorCrumbsView.php @@ -61,7 +61,8 @@ final class PhabricatorCrumbsView extends AphrontView { return phutil_render_tag( 'div', array( - 'class' => 'phabricator-crumbs-view', + 'class' => 'phabricator-crumbs-view '. + 'sprite-gradient gradient-breadcrumbs', ), $action_view. self::renderSingleView($this->crumbs)); diff --git a/src/view/page/PhabricatorStandardPageView.php b/src/view/page/PhabricatorStandardPageView.php index 062a9a8bfb..f0e41ad9f9 100644 --- a/src/view/page/PhabricatorStandardPageView.php +++ b/src/view/page/PhabricatorStandardPageView.php @@ -103,6 +103,7 @@ final class PhabricatorStandardPageView extends PhabricatorBarePageView { require_celerity_resource('phabricator-core-css'); require_celerity_resource('autosprite-css'); require_celerity_resource('phabricator-core-buttons-css'); + require_celerity_resource('sprite-gradient-css'); require_celerity_resource('phabricator-standard-page-view'); Javelin::initBehavior('workflow', array()); diff --git a/webroot/rsrc/css/aphront/phabricator-nav-view.css b/webroot/rsrc/css/aphront/phabricator-nav-view.css index 53ee74673b..7288b7fecf 100644 --- a/webroot/rsrc/css/aphront/phabricator-nav-view.css +++ b/webroot/rsrc/css/aphront/phabricator-nav-view.css @@ -20,7 +20,7 @@ } .has-crumbs .phabricator-nav-col { - top: 78px; + top: 76px; } .phabricator-nav-local { diff --git a/webroot/rsrc/css/autosprite.css b/webroot/rsrc/css/autosprite.css index 9fdfeb6e1c..cf368baba6 100644 --- a/webroot/rsrc/css/autosprite.css +++ b/webroot/rsrc/css/autosprite.css @@ -56,6 +56,14 @@ background-position: -341px 0px; } +.app-differential-large { + background-position: 0px -186px; +} + +.device-desktop .phabricator-application-launch-container:hover .app-differential-large /* hover */ { + background-position: -61px -186px; +} + .app-differential { background-position: -372px 0px; } @@ -68,6 +76,14 @@ background-position: -434px 0px; } +.app-fact-large { + background-position: -122px -186px; +} + +.device-desktop .phabricator-application-launch-container:hover .app-fact-large /* hover */ { + background-position: -183px -186px; +} + .app-fact { background-position: -465px 0px; } @@ -80,6 +96,14 @@ background-position: -527px 0px; } +.app-mail-large { + background-position: -244px -186px; +} + +.device-desktop .phabricator-application-launch-container:hover .app-mail-large /* hover */ { + background-position: -305px -186px; +} + .app-mail { background-position: -558px 0px; } @@ -92,6 +116,14 @@ background-position: -31px -31px; } +.app-diffusion-large { + background-position: -366px -186px; +} + +.device-desktop .phabricator-application-launch-container:hover .app-diffusion-large /* hover */ { + background-position: -427px -186px; +} + .app-diffusion { background-position: -62px -31px; } @@ -104,6 +136,14 @@ background-position: -124px -31px; } +.app-slowvote-large { + background-position: -488px -186px; +} + +.device-desktop .phabricator-application-launch-container:hover .app-slowvote-large /* hover */ { + background-position: -549px -186px; +} + .app-slowvote { background-position: -155px -31px; } @@ -116,6 +156,14 @@ background-position: -217px -31px; } +.app-phriction-large { + background-position: 0px -247px; +} + +.device-desktop .phabricator-application-launch-container:hover .app-phriction-large /* hover */ { + background-position: -61px -247px; +} + .app-phriction { background-position: -248px -31px; } @@ -128,6 +176,14 @@ background-position: -310px -31px; } +.app-maniphest-large { + background-position: -122px -247px; +} + +.device-desktop .phabricator-application-launch-container:hover .app-maniphest-large /* hover */ { + background-position: -183px -247px; +} + .app-maniphest { background-position: -341px -31px; } @@ -140,6 +196,14 @@ background-position: -403px -31px; } +.app-flags-large { + background-position: -244px -247px; +} + +.device-desktop .phabricator-application-launch-container:hover .app-flags-large /* hover */ { + background-position: -305px -247px; +} + .app-flags { background-position: -434px -31px; } @@ -152,6 +216,14 @@ background-position: -496px -31px; } +.app-settings-large { + background-position: -366px -247px; +} + +.device-desktop .phabricator-application-launch-container:hover .app-settings-large /* hover */ { + background-position: -427px -247px; +} + .app-settings { background-position: -527px -31px; } @@ -164,6 +236,14 @@ background-position: 0px -62px; } +.app-applications-large { + background-position: -488px -247px; +} + +.device-desktop .phabricator-application-launch-container:hover .app-applications-large /* hover */ { + background-position: -549px -247px; +} + .app-applications { background-position: -31px -62px; } @@ -176,6 +256,14 @@ background-position: -93px -62px; } +.app-default-large { + background-position: 0px -308px; +} + +.device-desktop .phabricator-application-launch-container:hover .app-default-large /* hover */ { + background-position: -61px -308px; +} + .app-default { background-position: -124px -62px; } @@ -188,6 +276,14 @@ background-position: -186px -62px; } +.app-people-large { + background-position: -122px -308px; +} + +.device-desktop .phabricator-application-launch-container:hover .app-people-large /* hover */ { + background-position: -183px -308px; +} + .app-people { background-position: -217px -62px; } @@ -200,6 +296,14 @@ background-position: -279px -62px; } +.app-ponder-large { + background-position: -244px -308px; +} + +.device-desktop .phabricator-application-launch-container:hover .app-ponder-large /* hover */ { + background-position: -305px -308px; +} + .app-ponder { background-position: -310px -62px; } @@ -212,6 +316,14 @@ background-position: -372px -62px; } +.app-calendar-large { + background-position: -366px -308px; +} + +.device-desktop .phabricator-application-launch-container:hover .app-calendar-large /* hover */ { + background-position: -427px -308px; +} + .app-calendar { background-position: -403px -62px; } @@ -224,6 +336,14 @@ background-position: -465px -62px; } +.app-files-large { + background-position: -488px -308px; +} + +.device-desktop .phabricator-application-launch-container:hover .app-files-large /* hover */ { + background-position: -549px -308px; +} + .app-files { background-position: -496px -62px; } @@ -236,6 +356,14 @@ background-position: -558px -62px; } +.app-projects-large { + background-position: 0px -369px; +} + +.device-desktop .phabricator-application-launch-container:hover .app-projects-large /* hover */ { + background-position: -61px -369px; +} + .app-projects { background-position: 0px -93px; } @@ -248,6 +376,14 @@ background-position: -62px -93px; } +.app-daemons-large { + background-position: -122px -369px; +} + +.device-desktop .phabricator-application-launch-container:hover .app-daemons-large /* hover */ { + background-position: -183px -369px; +} + .app-daemons { background-position: -93px -93px; } @@ -260,6 +396,14 @@ background-position: -155px -93px; } +.app-herald-large { + background-position: -244px -369px; +} + +.device-desktop .phabricator-application-launch-container:hover .app-herald-large /* hover */ { + background-position: -305px -369px; +} + .app-herald { background-position: -186px -93px; } @@ -272,6 +416,14 @@ background-position: -248px -93px; } +.app-countdown-large { + background-position: -366px -369px; +} + +.device-desktop .phabricator-application-launch-container:hover .app-countdown-large /* hover */ { + background-position: -427px -369px; +} + .app-countdown { background-position: -279px -93px; } @@ -284,6 +436,14 @@ background-position: -341px -93px; } +.app-conduit-large { + background-position: -488px -369px; +} + +.device-desktop .phabricator-application-launch-container:hover .app-conduit-large /* hover */ { + background-position: 0px -430px; +} + .app-conduit { background-position: -372px -93px; } @@ -296,6 +456,14 @@ background-position: -434px -93px; } +.app-feed-large { + background-position: -61px -430px; +} + +.device-desktop .phabricator-application-launch-container:hover .app-feed-large /* hover */ { + background-position: -122px -430px; +} + .app-feed { background-position: -465px -93px; } @@ -308,6 +476,14 @@ background-position: -527px -93px; } +.app-paste-large { + background-position: -183px -430px; +} + +.device-desktop .phabricator-application-launch-container:hover .app-paste-large /* hover */ { + background-position: -244px -430px; +} + .app-paste { background-position: 0px -124px; } @@ -320,6 +496,14 @@ background-position: -62px -124px; } +.app-audit-large { + background-position: -305px -430px; +} + +.device-desktop .phabricator-application-launch-container:hover .app-audit-large /* hover */ { + background-position: -366px -430px; +} + .app-audit { background-position: -93px -124px; } @@ -332,6 +516,14 @@ background-position: -155px -124px; } +.app-uiexample-large { + background-position: -427px -430px; +} + +.device-desktop .phabricator-application-launch-container:hover .app-uiexample-large /* hover */ { + background-position: -488px -430px; +} + .app-uiexample { background-position: -186px -124px; } @@ -344,6 +536,14 @@ background-position: -248px -124px; } +.app-phpast-large { + background-position: 0px -491px; +} + +.device-desktop .phabricator-application-launch-container:hover .app-phpast-large /* hover */ { + background-position: -61px -491px; +} + .app-phpast { background-position: -279px -124px; } @@ -356,6 +556,14 @@ background-position: -341px -124px; } +.app-owners-large { + background-position: -122px -491px; +} + +.device-desktop .phabricator-application-launch-container:hover .app-owners-large /* hover */ { + background-position: -183px -491px; +} + .app-owners { background-position: -372px -124px; } @@ -368,6 +576,14 @@ background-position: -434px -124px; } +.app-phid-large { + background-position: -244px -491px; +} + +.device-desktop .phabricator-application-launch-container:hover .app-phid-large /* hover */ { + background-position: -305px -491px; +} + .app-phid { background-position: -465px -124px; } @@ -380,6 +596,14 @@ background-position: -527px -124px; } +.app-diviner-large { + background-position: -366px -491px; +} + +.device-desktop .phabricator-application-launch-container:hover .app-diviner-large /* hover */ { + background-position: -427px -491px; +} + .app-diviner { background-position: 0px -155px; } @@ -392,6 +616,14 @@ background-position: -62px -155px; } +.app-repositories-large { + background-position: -488px -491px; +} + +.device-desktop .phabricator-application-launch-container:hover .app-repositories-large /* hover */ { + background-position: 0px -552px; +} + .app-repositories { background-position: -93px -155px; } @@ -404,6 +636,14 @@ background-position: -155px -155px; } +.app-phame-large { + background-position: -61px -552px; +} + +.device-desktop .phabricator-application-launch-container:hover .app-phame-large /* hover */ { + background-position: -122px -552px; +} + .app-phame { background-position: -186px -155px; } @@ -416,6 +656,14 @@ background-position: -248px -155px; } +.app-macro-large { + background-position: -183px -552px; +} + +.device-desktop .phabricator-application-launch-container:hover .app-macro-large /* hover */ { + background-position: -244px -552px; +} + .app-macro { background-position: -279px -155px; } @@ -428,6 +676,14 @@ background-position: -341px -155px; } +.app-releeph-large { + background-position: -305px -552px; +} + +.device-desktop .phabricator-application-launch-container:hover .app-releeph-large /* hover */ { + background-position: -366px -552px; +} + .app-releeph { background-position: -372px -155px; } @@ -440,6 +696,14 @@ background-position: -434px -155px; } +.app-drydock-large { + background-position: -427px -552px; +} + +.device-desktop .phabricator-application-launch-container:hover .app-drydock-large /* hover */ { + background-position: -488px -552px; +} + .app-drydock { background-position: -465px -155px; } @@ -451,267 +715,3 @@ .app-drydock-selected { background-position: -527px -155px; } - -.app-differential-large { - background-position: 0px -186px; -} - -.device-desktop .phabricator-application-launch-container:hover .app-differential-large /* hover */ { - background-position: -61px -186px; -} - -.app-fact-large { - background-position: -122px -186px; -} - -.device-desktop .phabricator-application-launch-container:hover .app-fact-large /* hover */ { - background-position: -183px -186px; -} - -.app-mail-large { - background-position: -244px -186px; -} - -.device-desktop .phabricator-application-launch-container:hover .app-mail-large /* hover */ { - background-position: -305px -186px; -} - -.app-diffusion-large { - background-position: -366px -186px; -} - -.device-desktop .phabricator-application-launch-container:hover .app-diffusion-large /* hover */ { - background-position: -427px -186px; -} - -.app-slowvote-large { - background-position: -488px -186px; -} - -.device-desktop .phabricator-application-launch-container:hover .app-slowvote-large /* hover */ { - background-position: -549px -186px; -} - -.app-phriction-large { - background-position: 0px -247px; -} - -.device-desktop .phabricator-application-launch-container:hover .app-phriction-large /* hover */ { - background-position: -61px -247px; -} - -.app-maniphest-large { - background-position: -122px -247px; -} - -.device-desktop .phabricator-application-launch-container:hover .app-maniphest-large /* hover */ { - background-position: -183px -247px; -} - -.app-flags-large { - background-position: -244px -247px; -} - -.device-desktop .phabricator-application-launch-container:hover .app-flags-large /* hover */ { - background-position: -305px -247px; -} - -.app-settings-large { - background-position: -366px -247px; -} - -.device-desktop .phabricator-application-launch-container:hover .app-settings-large /* hover */ { - background-position: -427px -247px; -} - -.app-applications-large { - background-position: -488px -247px; -} - -.device-desktop .phabricator-application-launch-container:hover .app-applications-large /* hover */ { - background-position: -549px -247px; -} - -.app-default-large { - background-position: 0px -308px; -} - -.device-desktop .phabricator-application-launch-container:hover .app-default-large /* hover */ { - background-position: -61px -308px; -} - -.app-people-large { - background-position: -122px -308px; -} - -.device-desktop .phabricator-application-launch-container:hover .app-people-large /* hover */ { - background-position: -183px -308px; -} - -.app-ponder-large { - background-position: -244px -308px; -} - -.device-desktop .phabricator-application-launch-container:hover .app-ponder-large /* hover */ { - background-position: -305px -308px; -} - -.app-calendar-large { - background-position: -366px -308px; -} - -.device-desktop .phabricator-application-launch-container:hover .app-calendar-large /* hover */ { - background-position: -427px -308px; -} - -.app-files-large { - background-position: -488px -308px; -} - -.device-desktop .phabricator-application-launch-container:hover .app-files-large /* hover */ { - background-position: -549px -308px; -} - -.app-projects-large { - background-position: 0px -369px; -} - -.device-desktop .phabricator-application-launch-container:hover .app-projects-large /* hover */ { - background-position: -61px -369px; -} - -.app-daemons-large { - background-position: -122px -369px; -} - -.device-desktop .phabricator-application-launch-container:hover .app-daemons-large /* hover */ { - background-position: -183px -369px; -} - -.app-herald-large { - background-position: -244px -369px; -} - -.device-desktop .phabricator-application-launch-container:hover .app-herald-large /* hover */ { - background-position: -305px -369px; -} - -.app-countdown-large { - background-position: -366px -369px; -} - -.device-desktop .phabricator-application-launch-container:hover .app-countdown-large /* hover */ { - background-position: -427px -369px; -} - -.app-conduit-large { - background-position: -488px -369px; -} - -.device-desktop .phabricator-application-launch-container:hover .app-conduit-large /* hover */ { - background-position: 0px -430px; -} - -.app-feed-large { - background-position: -61px -430px; -} - -.device-desktop .phabricator-application-launch-container:hover .app-feed-large /* hover */ { - background-position: -122px -430px; -} - -.app-paste-large { - background-position: -183px -430px; -} - -.device-desktop .phabricator-application-launch-container:hover .app-paste-large /* hover */ { - background-position: -244px -430px; -} - -.app-audit-large { - background-position: -305px -430px; -} - -.device-desktop .phabricator-application-launch-container:hover .app-audit-large /* hover */ { - background-position: -366px -430px; -} - -.app-uiexample-large { - background-position: -427px -430px; -} - -.device-desktop .phabricator-application-launch-container:hover .app-uiexample-large /* hover */ { - background-position: -488px -430px; -} - -.app-phpast-large { - background-position: 0px -491px; -} - -.device-desktop .phabricator-application-launch-container:hover .app-phpast-large /* hover */ { - background-position: -61px -491px; -} - -.app-owners-large { - background-position: -122px -491px; -} - -.device-desktop .phabricator-application-launch-container:hover .app-owners-large /* hover */ { - background-position: -183px -491px; -} - -.app-phid-large { - background-position: -244px -491px; -} - -.device-desktop .phabricator-application-launch-container:hover .app-phid-large /* hover */ { - background-position: -305px -491px; -} - -.app-diviner-large { - background-position: -366px -491px; -} - -.device-desktop .phabricator-application-launch-container:hover .app-diviner-large /* hover */ { - background-position: -427px -491px; -} - -.app-repositories-large { - background-position: -488px -491px; -} - -.device-desktop .phabricator-application-launch-container:hover .app-repositories-large /* hover */ { - background-position: 0px -552px; -} - -.app-phame-large { - background-position: -61px -552px; -} - -.device-desktop .phabricator-application-launch-container:hover .app-phame-large /* hover */ { - background-position: -122px -552px; -} - -.app-macro-large { - background-position: -183px -552px; -} - -.device-desktop .phabricator-application-launch-container:hover .app-macro-large /* hover */ { - background-position: -244px -552px; -} - -.app-releeph-large { - background-position: -305px -552px; -} - -.device-desktop .phabricator-application-launch-container:hover .app-releeph-large /* hover */ { - background-position: -366px -552px; -} - -.app-drydock-large { - background-position: -427px -552px; -} - -.device-desktop .phabricator-application-launch-container:hover .app-drydock-large /* hover */ { - background-position: -488px -552px; -} diff --git a/webroot/rsrc/css/core/buttons.css b/webroot/rsrc/css/core/buttons.css index 51988176fb..c41695afb7 100644 --- a/webroot/rsrc/css/core/buttons.css +++ b/webroot/rsrc/css/core/buttons.css @@ -8,8 +8,6 @@ a.button, a.button:visited, input.inputsubmit { background-color: #19558D; - background-image: url('/rsrc/image/button_gradients.png'); - background-position: 0 -26px; color: white; text-shadow: 0 -1px #19558D; @@ -39,39 +37,26 @@ a.icon:visited { button:active, a.button:active { 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: #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-position: 0 -104px; -} - button.grey, input.inputaux, a.grey, @@ -80,8 +65,6 @@ a.button.disabled, button[disabled], /* Set by JX.Workflow. */ button.disabled { background-color: #f7f7f7; - background-image: url('/rsrc/image/button_gradients.png'); - background-position: 0 -52px; border-color: #aaa; color: #333; border-bottom-color: #999; @@ -101,7 +84,6 @@ a.grey:active, button.grey_active, a.dropdown-open { background-color: #7d7d7d; - background-position: 0 -78px; color: #777; } diff --git a/webroot/rsrc/css/layout/phabricator-crumbs-view.css b/webroot/rsrc/css/layout/phabricator-crumbs-view.css index 167445b7b4..930a995ab7 100644 --- a/webroot/rsrc/css/layout/phabricator-crumbs-view.css +++ b/webroot/rsrc/css/layout/phabricator-crumbs-view.css @@ -8,11 +8,12 @@ } .phabricator-crumbs-view { - background: #e1e5eb; - border-bottom: 1px solid #c5c9ce; - height: 33px; + background-color: #d8dce2; + height: 31px; overflow: hidden; vertical-align: top; + + box-shadow: 0 1px rgba(0, 0, 0, 0.25); } .phabricator-crumbs-view, @@ -26,8 +27,8 @@ .phabricator-crumb-view { display: inline-block; - height: 33px; - line-height: 33px; + height: 31px; + line-height: 31px; overflow: hidden; } @@ -35,7 +36,7 @@ display: inline-block; width: 30px; height: 30px; - margin: 2px 2px 1px 8px; + margin: 1px 2px 0 8px; vertical-align: top; } @@ -61,8 +62,7 @@ .phabricator-crumb-divider { display: inline-block; width: 9px; - height: 33px; - background-image: url(/rsrc/image/tab_divider.png); + height: 31px; vertical-align: top; margin: 0 9px; } diff --git a/webroot/rsrc/css/sprite-gradient.css b/webroot/rsrc/css/sprite-gradient.css new file mode 100644 index 0000000000..19ae1ba676 --- /dev/null +++ b/webroot/rsrc/css/sprite-gradient.css @@ -0,0 +1,58 @@ +/** + * @provides sprite-gradient-css + * @generated + */ + +.sprite-gradient, button, a.button, a.button:visited, input.inputsubmit { + background-image: url(/rsrc/image/sprite-gradient.png); + background-repeat: repeat-x; +} + +@media +only screen and (min-device-pixel-ratio: 1.5), +only screen and (-webkit-min-device-pixel-ratio: 1.5) { + .sprite-gradient, button, a.button, a.button:visited, input.inputsubmit { + background-image: url(/rsrc/image/sprite-gradient-X2.png); + background-size: 4px 274px; + } +} + +.gradient-blue-dark, button, a.button, a.button:visited, input.inputsubmit { + background-position: 0px -26px; +} + +.gradient-blue-light, button:active, a.button:active { + background-position: 0px -53px; +} + +.gradient-black-dark, button.black, a.black, a.black:visited { + background-position: 0px -80px; +} + +.gradient-black-light, button.black:active, a.black:active { + background-position: 0px -107px; +} + +.gradient-breadcrumbs { + background-position: 0px -242px; +} + +.gradient-dark-menu-label { + background-position: 0px 0px; +} + +.gradient-green-dark, button.green, a.green, a.green:visited { + background-position: 0px -134px; +} + +.gradient-green-light, button.green:active, a.green:active { + background-position: 0px -161px; +} + +.gradient-grey-dark, button.grey, input.inputaux, a.grey, a.grey:visited, a.button.disabled, button[disabled], button.disabled { + background-position: 0px -188px; +} + +.gradient-grey-light, button.grey:active, a.grey:active, button.grey_active, a.dropdown-open { + background-position: 0px -215px; +} diff --git a/webroot/rsrc/css/sprite-menu.css b/webroot/rsrc/css/sprite-menu.css index a5a62bcfcb..b87710bbe7 100644 --- a/webroot/rsrc/css/sprite-menu.css +++ b/webroot/rsrc/css/sprite-menu.css @@ -13,10 +13,18 @@ only screen and (min-device-pixel-ratio: 1.5), only screen and (-webkit-min-device-pixel-ratio: 1.5) { .sprite-menu { background-image: url(/rsrc/image/sprite-menu-X2.png); - background-size: 47px 69px; + background-size: 47px 101px; } } +.phabricator-main-menu-alert-bubble { + background-position: 0px -42px; +} + +.phabricator-main-menu-alert-bubble.alert-unread { + background-position: 0px -15px; +} + .alert-notifications .phabricator-main-menu-alert-icon { background-position: 0px 0px; } @@ -25,14 +33,10 @@ only screen and (-webkit-min-device-pixel-ratio: 1.5) { background-position: -15px 0px; } -.phabricator-main-menu-alert-bubble.alert-unread { - background-position: 0px -15px; -} - -.phabricator-main-menu-alert-bubble { - background-position: 0px -42px; -} - .alert-notifications.alert-unread .phabricator-main-menu-alert-icon { background-position: -27px -42px; } + +.phabricator-crumb-divider { + background-position: 0px -69px; +} diff --git a/webroot/rsrc/image/button_content.png b/webroot/rsrc/image/button_content.png deleted file mode 100755 index 3ae1bf4fc9..0000000000 Binary files a/webroot/rsrc/image/button_content.png and /dev/null differ diff --git a/webroot/rsrc/image/button_gradients.png b/webroot/rsrc/image/button_gradients.png deleted file mode 100644 index 486bc64c15..0000000000 Binary files a/webroot/rsrc/image/button_gradients.png and /dev/null differ diff --git a/webroot/rsrc/image/sprite-gradient.png b/webroot/rsrc/image/sprite-gradient.png new file mode 100644 index 0000000000..066b0a9f6e Binary files /dev/null and b/webroot/rsrc/image/sprite-gradient.png differ diff --git a/webroot/rsrc/image/sprite-menu-X2.png b/webroot/rsrc/image/sprite-menu-X2.png index a89c3ef5ed..cf4fdcdac5 100644 Binary files a/webroot/rsrc/image/sprite-menu-X2.png and b/webroot/rsrc/image/sprite-menu-X2.png differ diff --git a/webroot/rsrc/image/sprite-menu.png b/webroot/rsrc/image/sprite-menu.png index b471e69f18..780efad474 100644 Binary files a/webroot/rsrc/image/sprite-menu.png and b/webroot/rsrc/image/sprite-menu.png differ diff --git a/webroot/rsrc/image/sprite.png b/webroot/rsrc/image/sprite.png deleted file mode 100644 index f4cf0312ff..0000000000 Binary files a/webroot/rsrc/image/sprite.png and /dev/null differ diff --git a/webroot/rsrc/image/tab_divider.png b/webroot/rsrc/image/tab_divider.png deleted file mode 100644 index 7a49d55556..0000000000 Binary files a/webroot/rsrc/image/tab_divider.png and /dev/null differ