2014-04-19 10:00:37 -07:00
|
|
|
/**
|
|
|
|
* @provides phui-font-icon-base-css
|
|
|
|
*/
|
|
|
|
|
|
|
|
.phui-font-fa {
|
|
|
|
display: inline-block;
|
|
|
|
color: {$darkgreytext};
|
|
|
|
font-style: normal;
|
|
|
|
font-weight: normal;
|
2014-04-22 18:29:14 -07:00
|
|
|
line-height: 1;
|
2014-04-19 10:00:37 -07:00
|
|
|
-webkit-font-smoothing: antialiased;
|
|
|
|
-moz-osx-font-smoothing: grayscale;
|
|
|
|
}
|
|
|
|
|
|
|
|
.ph-rotate-90 {
|
|
|
|
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
|
|
|
|
-webkit-transform: rotate(90deg);
|
|
|
|
-moz-transform: rotate(90deg);
|
|
|
|
-ms-transform: rotate(90deg);
|
|
|
|
-o-transform: rotate(90deg);
|
|
|
|
transform: rotate(90deg);
|
|
|
|
}
|
|
|
|
|
|
|
|
.ph-rotate-180 {
|
|
|
|
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
|
|
|
|
-webkit-transform: rotate(180deg);
|
|
|
|
-moz-transform: rotate(180deg);
|
|
|
|
-ms-transform: rotate(180deg);
|
|
|
|
-o-transform: rotate(180deg);
|
|
|
|
transform: rotate(180deg);
|
|
|
|
}
|
|
|
|
|
|
|
|
.ph-rotate-270 {
|
|
|
|
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
|
|
|
|
-webkit-transform: rotate(270deg);
|
|
|
|
-moz-transform: rotate(270deg);
|
|
|
|
-ms-transform: rotate(270deg);
|
|
|
|
-o-transform: rotate(270deg);
|
|
|
|
transform: rotate(270deg);
|
|
|
|
}
|
|
|
|
|
|
|
|
.ph-flip-horizontal {
|
|
|
|
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1);
|
|
|
|
-webkit-transform: scale(-1, 1);
|
|
|
|
-moz-transform: scale(-1, 1);
|
|
|
|
-ms-transform: scale(-1, 1);
|
|
|
|
-o-transform: scale(-1, 1);
|
|
|
|
transform: scale(-1, 1);
|
|
|
|
}
|
|
|
|
|
|
|
|
.ph-flip-vertical {
|
|
|
|
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1);
|
|
|
|
-webkit-transform: scale(1, -1);
|
|
|
|
-moz-transform: scale(1, -1);
|
|
|
|
-ms-transform: scale(1, -1);
|
|
|
|
-o-transform: scale(1, -1);
|
|
|
|
transform: scale(1, -1);
|
|
|
|
}
|
|
|
|
|
|
|
|
.ph-spin {
|
|
|
|
-webkit-animation: spin 2s infinite linear;
|
|
|
|
-moz-animation: spin 2s infinite linear;
|
|
|
|
-o-animation: spin 2s infinite linear;
|
|
|
|
animation: spin 2s infinite linear;
|
|
|
|
}
|
|
|
|
@-moz-keyframes spin {
|
|
|
|
0% {
|
|
|
|
-moz-transform: rotate(0deg);
|
|
|
|
}
|
|
|
|
100% {
|
|
|
|
-moz-transform: rotate(359deg);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
@-webkit-keyframes spin {
|
|
|
|
0% {
|
|
|
|
-webkit-transform: rotate(0deg);
|
|
|
|
}
|
|
|
|
100% {
|
|
|
|
-webkit-transform: rotate(359deg);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
@-o-keyframes spin {
|
|
|
|
0% {
|
|
|
|
-o-transform: rotate(0deg);
|
|
|
|
}
|
|
|
|
100% {
|
|
|
|
-o-transform: rotate(359deg);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
@-ms-keyframes spin {
|
|
|
|
0% {
|
|
|
|
-ms-transform: rotate(0deg);
|
|
|
|
}
|
|
|
|
100% {
|
|
|
|
-ms-transform: rotate(359deg);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
@keyframes spin {
|
|
|
|
0% {
|
|
|
|
transform: rotate(0deg);
|
|
|
|
}
|
|
|
|
100% {
|
|
|
|
transform: rotate(359deg);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2014-05-16 18:59:02 -07:00
|
|
|
.phui-icon-view.dark {
|
|
|
|
color: {$darkgreytext};
|
|
|
|
}
|
2014-05-12 10:08:32 -07:00
|
|
|
.phui-icon-view.bluegrey {
|
2014-05-28 20:56:20 -07:00
|
|
|
color: {$bluetext};
|
2014-04-19 10:00:37 -07:00
|
|
|
}
|
2014-05-12 10:08:32 -07:00
|
|
|
.phui-icon-view.white {
|
2014-04-19 10:00:37 -07:00
|
|
|
color: #fff;
|
|
|
|
}
|
2014-05-12 10:08:32 -07:00
|
|
|
.phui-icon-view.red {
|
2014-04-19 10:00:37 -07:00
|
|
|
color: {$red};
|
|
|
|
}
|
2014-05-12 10:08:32 -07:00
|
|
|
.phui-icon-view.orange {
|
2014-04-19 10:00:37 -07:00
|
|
|
color: {$orange};
|
|
|
|
}
|
2014-05-12 10:08:32 -07:00
|
|
|
.phui-icon-view.yellow {
|
2014-04-19 10:00:37 -07:00
|
|
|
color: {$yellow};
|
|
|
|
}
|
2014-05-12 10:08:32 -07:00
|
|
|
.phui-icon-view.green {
|
2014-04-19 10:00:37 -07:00
|
|
|
color: {$green}
|
|
|
|
}
|
2014-05-12 10:08:32 -07:00
|
|
|
.phui-icon-view.blue {
|
2014-04-19 10:00:37 -07:00
|
|
|
color: {$blue};
|
|
|
|
}
|
2014-05-12 10:08:32 -07:00
|
|
|
.phui-icon-view.sky {
|
2014-04-19 10:00:37 -07:00
|
|
|
color: {$sky};
|
|
|
|
}
|
2014-05-12 10:08:32 -07:00
|
|
|
.phui-icon-view.indigo {
|
2014-04-19 10:00:37 -07:00
|
|
|
color: {$indigo};
|
|
|
|
}
|
2014-10-15 10:33:26 -07:00
|
|
|
.phui-icon-view.pink {
|
|
|
|
color: {$pink};
|
|
|
|
}
|
2015-08-31 14:51:51 -07:00
|
|
|
.phui-icon-view.fire {
|
|
|
|
color: {$fire};
|
|
|
|
}
|
2014-05-12 10:08:32 -07:00
|
|
|
.phui-icon-view.violet {
|
2014-04-19 10:00:37 -07:00
|
|
|
color: {$violet};
|
|
|
|
}
|
2014-05-12 10:08:32 -07:00
|
|
|
.phui-icon-view.lightbluetext {
|
2014-04-19 10:00:37 -07:00
|
|
|
color: {$lightbluetext};
|
|
|
|
}
|
2014-05-12 10:08:32 -07:00
|
|
|
.phui-icon-view.lightgreytext,
|
|
|
|
.phui-icon-view.grey {
|
2016-03-04 15:44:24 -08:00
|
|
|
color: rgba({$alphagrey},0.3);
|
2014-04-19 10:00:37 -07:00
|
|
|
}
|
2014-05-21 10:18:43 -07:00
|
|
|
|
2016-08-19 12:49:38 -07:00
|
|
|
/* Backgrounds */
|
|
|
|
|
|
|
|
.phui-icon-view.bg-dark {
|
|
|
|
background-color: {$darkgreytext};
|
|
|
|
}
|
|
|
|
.phui-icon-view.bg-bluegrey {
|
|
|
|
background-color: {$bluetext};
|
|
|
|
}
|
Redesign Config Application
Summary: Ref T11132, significantly cleans up the Config app, new layout, icons, spacing, etc. Some minor todos around re-designing "issues", mobile support, and maybe another pass at actual Group pages.
Test Plan: Visit and test every page in the config app, set new items, resolve setup issues, etc.
Reviewers: epriestley
Reviewed By: epriestley
Subscribers: PHID-OPKG-gm6ozazyms6q6i22gyam, Korvin
Maniphest Tasks: T11132
Differential Revision: https://secure.phabricator.com/D16468
2016-08-29 15:36:13 -07:00
|
|
|
.phui-icon-view.bg-grey {
|
|
|
|
background-color: {$lightgreytext};
|
|
|
|
}
|
2016-08-19 12:49:38 -07:00
|
|
|
.phui-icon-view.bg-red {
|
|
|
|
background-color: {$red};
|
|
|
|
}
|
|
|
|
.phui-icon-view.bg-orange {
|
|
|
|
background-color: {$orange};
|
|
|
|
}
|
|
|
|
.phui-icon-view.bg-yellow {
|
|
|
|
background-color: {$yellow};
|
|
|
|
}
|
|
|
|
.phui-icon-view.bg-green {
|
|
|
|
background-color: {$green}
|
|
|
|
}
|
|
|
|
.phui-icon-view.bg-blue {
|
|
|
|
background-color: {$blue};
|
|
|
|
}
|
|
|
|
.phui-icon-view.bg-sky {
|
|
|
|
background-color: {$sky};
|
|
|
|
}
|
|
|
|
.phui-icon-view.bg-indigo {
|
|
|
|
background-color: {$indigo};
|
|
|
|
}
|
|
|
|
.phui-icon-view.bg-pink {
|
|
|
|
background-color: {$pink};
|
|
|
|
}
|
|
|
|
.phui-icon-view.bg-fire {
|
|
|
|
background-color: {$fire};
|
|
|
|
}
|
|
|
|
.phui-icon-view.bg-violet {
|
|
|
|
background-color: {$violet};
|
|
|
|
}
|
|
|
|
|
2014-05-21 10:18:43 -07:00
|
|
|
/* Hovers */
|
|
|
|
|
|
|
|
.device-desktop a.phui-icon-view.lightgreytext:hover,
|
|
|
|
.device-desktop a.phui-icon-view.grey:hover {
|
|
|
|
color: {$darkgreytext};
|
|
|
|
}
|
|
|
|
|
|
|
|
.device-desktop a.phui-icon-view.bluegrey:hover {
|
|
|
|
color: {$darkbluetext};
|
|
|
|
}
|