mirror of
https://we.phorge.it/source/phorge.git
synced 2024-11-18 12:52:42 +01:00
Pop the buttons
Summary: Keeping in step with the gradients on the grey buttons, this adds slight gradients and hover states to blue and green. I feel like they are much more obviously buttons now in the UI (on headers for example). Test Plan: Review UI Buttons, check differential, actions, other random buttons. {F1137208} Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Differential Revision: https://secure.phabricator.com/D15379
This commit is contained in:
parent
db4fdf8c2d
commit
58aac5de0e
2 changed files with 18 additions and 6 deletions
|
@ -7,7 +7,7 @@
|
||||||
*/
|
*/
|
||||||
return array(
|
return array(
|
||||||
'names' => array(
|
'names' => array(
|
||||||
'core.pkg.css' => '3b2e293c',
|
'core.pkg.css' => '80c32191',
|
||||||
'core.pkg.js' => '7d8faf57',
|
'core.pkg.js' => '7d8faf57',
|
||||||
'darkconsole.pkg.js' => 'e7393ebb',
|
'darkconsole.pkg.js' => 'e7393ebb',
|
||||||
'differential.pkg.css' => '2de124c9',
|
'differential.pkg.css' => '2de124c9',
|
||||||
|
@ -124,7 +124,7 @@ return array(
|
||||||
'rsrc/css/phui/phui-badge.css' => 'f25c3476',
|
'rsrc/css/phui/phui-badge.css' => 'f25c3476',
|
||||||
'rsrc/css/phui/phui-big-info-view.css' => 'bd903741',
|
'rsrc/css/phui/phui-big-info-view.css' => 'bd903741',
|
||||||
'rsrc/css/phui/phui-box.css' => '348bd872',
|
'rsrc/css/phui/phui-box.css' => '348bd872',
|
||||||
'rsrc/css/phui/phui-button.css' => 'c096e4e9',
|
'rsrc/css/phui/phui-button.css' => 'a64a8de6',
|
||||||
'rsrc/css/phui/phui-chart.css' => '6bf6f78e',
|
'rsrc/css/phui/phui-chart.css' => '6bf6f78e',
|
||||||
'rsrc/css/phui/phui-crumbs-view.css' => '79d536e5',
|
'rsrc/css/phui/phui-crumbs-view.css' => '79d536e5',
|
||||||
'rsrc/css/phui/phui-document-pro.css' => '92d5b648',
|
'rsrc/css/phui/phui-document-pro.css' => '92d5b648',
|
||||||
|
@ -804,7 +804,7 @@ return array(
|
||||||
'phui-badge-view-css' => 'f25c3476',
|
'phui-badge-view-css' => 'f25c3476',
|
||||||
'phui-big-info-view-css' => 'bd903741',
|
'phui-big-info-view-css' => 'bd903741',
|
||||||
'phui-box-css' => '348bd872',
|
'phui-box-css' => '348bd872',
|
||||||
'phui-button-css' => 'c096e4e9',
|
'phui-button-css' => 'a64a8de6',
|
||||||
'phui-calendar-css' => 'ccabe893',
|
'phui-calendar-css' => 'ccabe893',
|
||||||
'phui-calendar-day-css' => 'd1cf6f93',
|
'phui-calendar-day-css' => 'd1cf6f93',
|
||||||
'phui-calendar-list-css' => 'c1c7f338',
|
'phui-calendar-list-css' => 'c1c7f338',
|
||||||
|
|
|
@ -26,8 +26,9 @@ button,
|
||||||
a.button,
|
a.button,
|
||||||
a.button:visited,
|
a.button:visited,
|
||||||
input[type="submit"] {
|
input[type="submit"] {
|
||||||
background-color: {$blue};
|
background-color: #2980b9;
|
||||||
border: 1px solid {$blue};
|
border: 1px solid #2980b9;
|
||||||
|
background-image: linear-gradient(to bottom, #3498db, #2980b9);
|
||||||
color: white;
|
color: white;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
|
@ -53,6 +54,7 @@ a.green,
|
||||||
a.green:visited {
|
a.green:visited {
|
||||||
background-color: {$green};
|
background-color: {$green};
|
||||||
border-color: {$green};
|
border-color: {$green};
|
||||||
|
background-image: linear-gradient(to bottom, #23BB5B, #139543);
|
||||||
}
|
}
|
||||||
|
|
||||||
button.grey,
|
button.grey,
|
||||||
|
@ -101,7 +103,9 @@ a.phuix-dropdown-open {
|
||||||
a.button:hover,
|
a.button:hover,
|
||||||
button:hover {
|
button:hover {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
background-color: {$sky};
|
background-color: #2980b9;
|
||||||
|
background-image: linear-gradient(to bottom, #3498db, #1b6ba0);
|
||||||
|
border-color: #115988;
|
||||||
transition: 0.1s;
|
transition: 0.1s;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -114,13 +118,16 @@ button.grey:hover {
|
||||||
|
|
||||||
a.button.green:hover,
|
a.button.green:hover,
|
||||||
button.green:hover {
|
button.green:hover {
|
||||||
|
border-color: #127336;
|
||||||
background-color: #0DAD48;
|
background-color: #0DAD48;
|
||||||
|
background-image: linear-gradient(to bottom, #23BB5B, #178841);
|
||||||
transition: 0.1s;
|
transition: 0.1s;
|
||||||
}
|
}
|
||||||
|
|
||||||
a.button.simple:hover,
|
a.button.simple:hover,
|
||||||
button.simple:hover {
|
button.simple:hover {
|
||||||
background-color: {$blue};
|
background-color: {$blue};
|
||||||
|
background-image: linear-gradient(to bottom, {$blue}, {$blue});
|
||||||
color: #fff;
|
color: #fff;
|
||||||
transition: 0.1s;
|
transition: 0.1s;
|
||||||
}
|
}
|
||||||
|
@ -165,6 +172,7 @@ button.link {
|
||||||
display: inline;
|
display: inline;
|
||||||
border: none;
|
border: none;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
|
background-image: none;
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
@ -310,6 +318,7 @@ a.policy-control .caret {
|
||||||
.phui-button-bar-borderless .button {
|
.phui-button-bar-borderless .button {
|
||||||
border: 0;
|
border: 0;
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
|
background-image: none;
|
||||||
padding-left: 10px;
|
padding-left: 10px;
|
||||||
padding-right: 10px;
|
padding-right: 10px;
|
||||||
}
|
}
|
||||||
|
@ -321,6 +330,7 @@ a.policy-control .caret {
|
||||||
|
|
||||||
.phui-button-bar-borderless .button:hover {
|
.phui-button-bar-borderless .button:hover {
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
|
background-image: none;
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -357,10 +367,12 @@ a.policy-control .caret {
|
||||||
.phui-button-bar .button.simple:hover {
|
.phui-button-bar .button.simple:hover {
|
||||||
border-color: {$lightblueborder};
|
border-color: {$lightblueborder};
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
|
background-image: none;
|
||||||
color: {$sky};
|
color: {$sky};
|
||||||
}
|
}
|
||||||
|
|
||||||
.phui-button-bar .button.simple:hover .phui-icon-view {
|
.phui-button-bar .button.simple:hover .phui-icon-view {
|
||||||
border-color: {$lightblueborder};
|
border-color: {$lightblueborder};
|
||||||
color: {$sky};
|
color: {$sky};
|
||||||
|
background-image: none;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue