139 lines
2.6 KiB
SCSS
139 lines
2.6 KiB
SCSS
/* You can add global styles to this file, and also import other style files */
|
|
:root {
|
|
--primary: #fff;
|
|
--primary-text: #444444;
|
|
--primary-border: #ccc;
|
|
--primary-hover: #eee;
|
|
--secondary: #eee;
|
|
--secondary-hover: #c9c9c9;
|
|
--secondary-border: #bbb;
|
|
|
|
--disabled: #eee;
|
|
--disabled-text: #aaa;
|
|
|
|
--transparent: rgba(0,0,0, 0);
|
|
|
|
--shadow-1: rgba(0, 0, 0, 0.2);
|
|
--shadow-2: rgba(0, 0, 0, 0.14);
|
|
--shadow-3: rgba(0, 0, 0, 0.12);
|
|
--shadow-hover: #777;
|
|
|
|
--alert: #eb1d3f;
|
|
--alert-text: #fff;
|
|
--alert-hover: #c20d2b;
|
|
--alert-border: #b91b35;
|
|
|
|
--selection: #185eb4;
|
|
}
|
|
|
|
html {
|
|
height: 100%;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
font-family: Roboto, "Helvetica Neue", sans-serif;
|
|
padding-top: 3.2rem;
|
|
background-color: var(--primary);
|
|
}
|
|
|
|
.shadowed {
|
|
box-shadow: 0px 2px 1px -1px var(--shadow-1),
|
|
0px 1px 1px 0px var(--shadow-2),
|
|
0px 1px 3px 0px var(--shadow-3);
|
|
transition: box-shadow .2s ease-out;
|
|
|
|
&:hover {
|
|
box-shadow: 0 .2em .5em var(--shadow-hover);
|
|
}
|
|
}
|
|
|
|
a.no-style {
|
|
color: inherit;
|
|
text-decoration: none;
|
|
}
|
|
|
|
button {
|
|
border-style: solid;
|
|
border-width: .1rem;
|
|
border-color: var(--transparent);
|
|
border-radius: .2rem;
|
|
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
padding: .5rem;
|
|
background-color: var(--transparent);
|
|
color: var(--primary-text);
|
|
|
|
transition: background-color .2s ease-out,
|
|
border-color .2s ease-out;
|
|
|
|
&:hover {
|
|
background-color: var(--primary-hover);
|
|
border-color: var(--primary-border);
|
|
}
|
|
|
|
&:disabled {
|
|
background-color: var(--disabled);
|
|
color: var(--disabled-text);
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
&.icon {
|
|
width: 2rem;
|
|
height: 2rem;
|
|
min-width: 1rem;
|
|
min-height: 1rem;
|
|
padding: 0;
|
|
}
|
|
|
|
&.raised {
|
|
background-color: var(--primary); //#4a4a4a;
|
|
box-shadow: 0px 2px 1px -1px var(--shadow-1),
|
|
0px 1px 1px 0px var(--shadow-2),
|
|
0px 1px 3px 0px var(--shadow-3);
|
|
}
|
|
|
|
&.stroked {
|
|
border-color: var(--primary-border);
|
|
|
|
&.primary {
|
|
background-color: var(--primary);
|
|
|
|
&:hover {
|
|
background-color: var(--primary-hover);
|
|
}
|
|
}
|
|
|
|
&.secondary {
|
|
background-color: var(--secondary);
|
|
|
|
&:hover {
|
|
background-color: var(--secondary-hover)
|
|
}
|
|
}
|
|
}
|
|
|
|
&.alert {
|
|
background-color: var(--alert);
|
|
color: var(--alert-text);
|
|
|
|
&:hover {
|
|
background-color: var(--alert-hover);
|
|
border-color: var(--alert-border);
|
|
}
|
|
}
|
|
}
|
|
|
|
.dialog-actions {
|
|
margin-top: 1rem;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
> * {
|
|
flex: 1 1 45%;
|
|
max-width: 45%;
|
|
}
|
|
} |