linkerd
/
linkerd2
mirror of https://github.com/linkerd/linkerd2.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Use more descriptive CSS variable names (#135) (#147) 

* Use more descriptive CSS variable names (#135)

Signed-off-by: Nathan Murthy <drip.dr0p.dr0p@gmail.com>

* Decouple the names of the colors from their use

Signed-off-by: Nathan Murthy <drip.dr0p.dr0p@gmail.com>

* Rename a few more root CSS color var names

Signed-off-by: Nathan Murthy <drip.dr0p.dr0p@gmail.com>

* Update more CSS color vars referenced elsewhere

Signed-off-by: Nathan Murthy <drip.dr0p.dr0p@gmail.com>
This commit is contained in:
Nathan Murthy 2018-01-17 11:23:12 -08:00 committed by Risha Mars
parent fd3cfcb5d9
commit 84d8fa6639
6 changed files with 28 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/app/css/deployment.css
View File

@ -29,7 +29,7 @@
}
&.unadded {
background: var(--status-gray);
background: var(--silvergrey);
color: white;
vertical-align: top;
}

8
web/app/css/health-pane.css
View File

@ -25,13 +25,13 @@
border: 2px solid var(--green);
}
&.health-bad {
border: 2px solid var(--bad-red);
border: 2px solid var(--siennared);
}
&.health-neutral {
border: 2px solid #108ee9;
}
&.health-unknown {
border: 2px solid var(--status-gray);
border: 2px solid var(--silvergrey);
}
}
@ -44,7 +44,7 @@
}
&.health-bad {
& .ant-progress-bg {
background: var(--bad-red);
background: var(--siennared);
}
}
&.health-neutral {
@ -54,7 +54,7 @@
}
&.health-unknown {
& .ant-progress-bg {
background: var(--status-gray);
background: var(--silvergrey);
}
}
}

6
web/app/css/latency-overview.css
View File

@ -19,12 +19,12 @@
}
& .current-latency-P50 {
border-left: 4px solid var(--latency-p50);;
border-left: 4px solid var(--pictonblue);;
}
& .current-latency-P95 {
border-left: 4px solid var(--latency-p95);
border-left: 4px solid var(--curiousblue);
}
& .current-latency-P99 {
border-left: 4px solid var(--latency-p99);
border-left: 4px solid var(--royalblue);
}
}

8
web/app/css/line-graph.css
View File

@ -11,17 +11,17 @@
}
.line-p50 {
stroke: var(--latency-p50);
stroke: var(--pictonblue);
}
.line-p95 {
stroke: var(--latency-p95);
stroke: var(--curiousblue);
}
.line-p99 {
stroke: var(--latency-p99);
stroke: var(--royalblue);
}
.flash {
fill: var(--latency-p50);
fill: var(--pictonblue);
}

4
web/app/css/service-mesh.css
View File

@ -16,7 +16,7 @@
}
.incomplete-mesh-message, .complete-mesh-message {
background-color: var(--messageblue);
background-color: var(--royalblue);
color: white;
padding: var(--base-width);
font-size: 16;
@ -43,7 +43,7 @@ td .status-dot {
background-color: var(--green);
}
&.status-dot-bad {
background-color: var(--bad-red);
background-color: var(--siennared);
}
&.status-dot-neutral {
background-color: #E0E0E0;

30
web/app/css/styles.css
View File

@ -2,18 +2,16 @@
:root {
--white: #fff;
--buttonblue: #4076c4;
--messageblue: #2F80ED;
--royalblue: #2F80ED;
--darkblue: #071E3C;
--curiousblue: #2D9CDB;
--pictonblue: #56CCF2;
--warmgrey: #f6f6f6;
--coldgrey: #c9c9c9;
--latency-p99: var(--messageblue);
--latency-p95: #2D9CDB;
--latency-p50: #56CCF2;
--subheader-grey: #828282;
--status-gray: #BDBDBD;
--neutralgrey: #828282;
--silvergrey: #BDBDBD;
--green: #27AE60;
--bad-red: #EB5757;
--siennared: #EB5757;
--font-stack: 'Lato', helvetica, arial, sans-serif;
--font-weight-light: 300;
--font-weight-regular: 400;
@ -90,7 +88,7 @@ h2, h3, h4, h5, h6 {
.summary-info {
font-size: 12px;
color: var(--subheader-grey);
color: var(--neutralgrey);
}
.metric-title {
@ -115,7 +113,7 @@ h2, h3, h4, h5, h6 {
.no-data-msg {
font-size: 12px;
color: var(--subheader-grey);
color: var(--neutralgrey);
}
.action {
@ -151,7 +149,7 @@ h2, h3, h4, h5, h6 {
padding: var(--base-width);
margin-bottom: calc(3 * var(--base-width));
border-radius: 5px;
background: var(--bad-red);
background: var(--siennared);
color: white;
font-size: 12px;
font-weight: var(--font-weight-bold);
@ -168,10 +166,10 @@ h2, h3, h4, h5, h6 {
/* from https://conduit.io/ */
a.button {
color: var(--messageblue);
color: var(--royalblue);
background: #fff;
border-radius: 48px;
border: 1px solid var(--messageblue);
border: 1px solid var(--royalblue);
padding: 10px 14px 11px 14px;
font-weight: var(--font-weight-bold);
font-size: 14px;
@ -185,12 +183,12 @@ a.button:hover {
text-decoration: none;
}
a.button:active {
background-color: var(--messageblue);
background-color: var(--royalblue);
color: #fff;
}
a.button.primary {
color: #fff;
background-color: var(--messageblue);
background-color: var(--royalblue);
}
a.button.primary:hover {
top: 1px;
@ -218,7 +216,7 @@ a.button.primary:active {
text-transform: uppercase;
font-weight: var(--font-weight-bold);
border-bottom: 1px solid;
border-color: var(--status-gray);
border-color: var(--silvergrey);
word-break: keep-all;
&.ant-table-column-sort {