anta
Version:
CLI tool and lib to gather app audits via [Lighthouse](https://github.com/GoogleChrome/lighthouse/).
357 lines (345 loc) • 6.92 kB
text/less
.fail {
color: #F5222D;
fill: #F5222D;
}
.pass {
color: #FA8C16;
fill: #FA8C16;
}
.great {
color: #52C41A;
fill: #52C41A;
}
.bg-fail {
background-color: #F5222D;
}
.bg-pass {
background-color: #FA8C16;
}
.bg-great {
background-color: #52C41A;
}
html, body {
height: 100%;
}
body {
margin: 0;
padding: 0;
font-family: sans-serif;
color: rgba(0, 0, 0, 0.45);
}
.container, .header {
margin: 0 auto;
// max-width: 1200px;
}
.header {
height: 64px;
line-height: 64px;
border-bottom: 1px solid #E9E9E9;
.ide & {
display: none;
}
&-left {
float: left;
padding-left: 12px;
.anticon {
margin-right: 8px;
}
}
&-right {
float: right;
> span {
margin-right: 30px;
&:last-child {
margin-right: 12px;
}
.anticon {
margin-right: 8px;
}
}
}
}
.container {
display: flex;
.side {
width: 260px;
min-width: 200px;
padding-top: 12px;
.page {
display: flex;
justify-content: space-between;
padding-left: 25px;
}
.url {
word-wrap: break-word;
word-break: break-all;
margin-right: 10px;
}
.sel {
color: #1890FF;
}
.ant-collapse-borderless > .ant-collapse-item > .ant-collapse-content > .ant-collapse-content-box {
padding-bottom: 0;
}
.ant-collapse > .ant-collapse-item > .ant-collapse-header {
padding-top: 0;
}
.ant-collapse > .ant-collapse-item > .ant-collapse-header {
color: rgba(0, 0, 0, 0.65);
.ide & {
color: rgba(255, 255, 255, 0.6);
}
}
}
}
.side, .metrics, .opportunities, .passed-audits .inner {
.anticon-caret-right {
font-size: 12px;
color: rgba(0, 0, 0, 0.25);
margin-right: 10px;
transition: transform 0.24s;
vertical-align: 1px;
.ide & {
color: rgba(255, 255, 255, 0.8);
}
&.dark {
color: rgba(0, 0, 0, 0.45);
.ide & {
color: rgba(255, 255, 255, 0.6);
}
}
}
.ant-collapse-item-active .anticon-caret-right {
transform: rotate(90deg);
vertical-align: 2px;
}
}
.metrics, .opportunities, .passed-audits .inner {
.anticon-caret-right {
transform: scale(0.7);
}
.ant-collapse-item-active .anticon-caret-right {
transform: rotate(90deg) scale(0.7);
}
.ant-collapse > .ant-collapse-item-active > .ant-collapse-header {
padding-bottom: 0;
}
}
.opportunities, .passed-audits .inner {
.ant-collapse {
margin-left: -12px;
}
.ant-collapse > .ant-collapse-item:last-child {
border-bottom: 0;
}
}
.main {
flex: 1;
border-left: 1px solid #E9E9E9;
.top-clps {
.agent {
margin-left: 20px;
color: rgba(255, 0, 0, 0.6);
font-size: 12px;
}
p, ul {
margin-bottom: 8px;
}
}
.ide & {
border-left: 1px solid #0B102D;
h3 {
color: #fff;
}
}
&-header {
display: flex;
align-items: center;
margin: 20px;
}
&-chart {
width: 72px;
height: 72px;
position: relative;
&-score {
display: block;
position: absolute;
width: 100%;
text-align: center;
line-height: 1;
top: 50%;
transform: translateY(-50%);
left: 0;
margin: 0;
}
.fcolor {
fill: #fff;
.ide & {
fill: #1A203E;
}
}
}
&-title {
margin-left: 20px;
h3 {
margin-bottom: 4px;
font-weight: normal;
}
}
.top-clps, .passed-audits {
border-radius: 0;
border-right: 1px solid #E9E9E9;
background-color: #FAFAFA;
.ide & {
border-right: 1px solid #171C37;
background-color: #222847;
}
}
.passed-audits {
border-top: 1px solid #E9E9E9;
.ide & {
border-top: 1px solid #171C37;
}
}
.metrics-header, .opportunities-header {
height: 40px;
line-height: 40px;
padding: 0 18px;
border-top: 1px solid #E9E9E9;
border-bottom: 1px solid #E9E9E9;
background-color: #FAFAFA;
color: rgba(0, 0, 0, 0.85);
.ide & {
border-top: 1px solid #171C37;
border-bottom: 1px solid #171C37;
background-color: #222847;
color: rgba(255, 255, 255, 0.6);
}
}
.audit-header {
b {
margin-right: 10px;
font-weight: 500;
.ide & {
color: #fff;
}
}
}
.metrics {
margin: 10px 18px;
.ant-collapse > .ant-collapse-item.ant-collapse-no-arrow > {
.ant-collapse-header {
padding-left: 0;
padding-top: 0;
}
.ant-collapse-content {
padding-left: 22px;
}
}
&-thumbnails {
margin: 24px 18px;
border-top: 1px solid #E9E9E9;
display: flex;
overflow-x: auto;
overflow-y: hidden;
.img-container {
position: relative;
margin-right: 10px;
span {
position: absolute;
top: 0;
right: 0;
padding-right: 4px;
&:after {
content: ' ';
position: absolute;
right: 0;
top: 0;
height: 6px;
width: 2px;
background-color: #E9E9E9;
}
}
img {
margin-top: 20px;
width: 70px;
border: 1px solid #E9E9E9;
}
}
}
.timeline {
height: 4px;
background-color: #F5F5F5;
margin-bottom: 10px;
width: 70 * 10 + 10 * 9px; // thumbnails-img width * 10 + margin-right * 9
position: relative;
&-mark {
position: absolute;
top: 0;
bottom: 0;
left: 0;
}
}
}
.opportunities {
padding: 10px 18px;
}
.opportunities, .passed-audits {
.audit-header b {
font-weight: 400;
}
.help-txt {
p {
margin: 0;
}
code {
padding: 0.2em 0.4em;
margin: 0;
font-size: 85%;
background-color: rgba(27,31,35,0.05);
border-radius: 3px;
}
}
.ant-collapse > .ant-collapse-item.ant-collapse-no-arrow > {
.ant-collapse-content {
padding-left: 34px;
}
}
}
.passed-audits {
.out-panel > .ant-collapse-content {
background-color: white;
.ide & {
background-color: transparent;
}
}
.inner {
padding: 10px 18px;
}
}
}
body.ide {
background-color: #1A203E;
color: rgba(255, 255, 255, 0.6);
}
.ide .ant-collapse-borderless > .ant-collapse-item {
border-bottom: 1px solid #171C37;
}
.ide .ant-collapse > .ant-collapse-item > .ant-collapse-header {
color: rgba(255, 255, 255, 0.6);
}
.ide .ant-collapse-content {
color: rgba(255, 255, 255, 0.6);
}
.ide .crc-tree.ant-tree-show-line li {
span.ant-tree-switcher, .ant-tree-node-content-wrapper {
background-color: transparent;
color: rgba(255, 255, 255, 0.8);
b {
color: #fff;
}
}
}
.ant-collapse-borderless {
background-color: transparent;
}