e2c00965ac
This CL maps the colors being used in the web app to variables to make it easier to change color palette without having to track color changes across files. Bug: v8:10673 Change-Id: Icf1c53396b8a831367c4ed420931e6233d780a07 Reviewed-on: https://chromium-review.googlesource.com/c/v8/v8/+/2298005 Commit-Queue: Zeynep Cankara <zcankara@google.com> Reviewed-by: Camillo Bruni <cbruni@chromium.org> Cr-Commit-Position: refs/heads/master@{#68864}
99 lines
1.9 KiB
CSS
99 lines
1.9 KiB
CSS
|
|
:root {
|
|
--background-color: #000000;
|
|
--surface-color: #121212;
|
|
--primary-color: #BB86FC;
|
|
--secondary-color: #03DAC6;
|
|
--on-surface-color: #ffffff;
|
|
--on-background-color: #f5f0f0;
|
|
--on-primary-color: #000000;
|
|
--on-secondary-color: #000000;
|
|
--default-color: #9B6EDC;
|
|
--error-color: #CF6679;
|
|
--map-background-color: #5e5454;
|
|
--timeline-background-color: #1f1f1f;
|
|
--red: #dc6eae;
|
|
--green: #aedc6e;
|
|
--yellow: #EEFF41;
|
|
--blue: #6e77dc;
|
|
--orange: #dc9b6e;
|
|
--violet: #d26edc;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Roboto', sans-serif;
|
|
font-size: 14px;
|
|
color: var(--on-background-color);
|
|
margin-left: 5%;
|
|
margin-right: 5%;
|
|
background-color: var(--background-color);
|
|
letter-spacing: 0.5px;
|
|
}
|
|
h2 {
|
|
background-color: var(--primary-color);
|
|
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
|
|
transition: 0.3s;
|
|
color: var(--on-primary-color);
|
|
padding: 15px 25px;
|
|
text-align: center;
|
|
text-decoration: none;
|
|
display: inline-block;
|
|
}
|
|
.panel {
|
|
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
|
|
transition: 0.3s;
|
|
background-color: var(--surface-color);
|
|
color: var(--on-surface-color);
|
|
padding: 30px 30px 30px 30px ;
|
|
margin: auto;
|
|
overflow-x: scroll;
|
|
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
|
|
}
|
|
.colorbox {
|
|
width: 10px;
|
|
height: 10px;
|
|
border: 1px var(--background-color) solid;
|
|
}
|
|
|
|
.primary{
|
|
background-color: var(--default-color);
|
|
}
|
|
|
|
.red {
|
|
background-color: var(--red);
|
|
}
|
|
|
|
.green {
|
|
background-color: var(--green);
|
|
}
|
|
|
|
.yellow {
|
|
background-color: var(--yellow);
|
|
color: var(--map-background-color);
|
|
}
|
|
|
|
.blue {
|
|
background-color: var(--blue);
|
|
}
|
|
|
|
.orange {
|
|
background-color:var(--orange);
|
|
}
|
|
|
|
.violet {
|
|
background-color: var(--violet);
|
|
color: var(--map-background-color);
|
|
}
|
|
|
|
.success {
|
|
background-color: var(--secondary-color);
|
|
}
|
|
|
|
.failure {
|
|
background-color: var(--error-color);
|
|
}
|
|
a:link {
|
|
color: var(--secondary-color);
|
|
background-color: transparent;
|
|
text-decoration: none;
|
|
} |