wikimedica-disease-search/app/style/style.css

286 lines
4.5 KiB
CSS
Raw Normal View History

:root
{
--color-accent: #D80C49;
--color-secondary: #AE1246;
--color-light: #EEEEEE;
--color-light-darker: #E0E0E0;
--color-dark-lighter: #6A6A6A;
--color-dark: #1D1D1D;
--font-family: 'Source Sans Pro';
--font-size: 18px;
--font-size-larger: 22px;
--font-color: var(--color-dark);
--base-size: 25px;
--animation-ease-out: cubic-bezier(0.075, 0.82, 0.165, 1);
--animation-short: .3s;
2019-12-02 06:20:27 +00:00
--shadow-normal:
0 1px 1px 0 rgba(0, 0, 0, 0.14),
0 2px 1px -1px rgba(0, 0, 0, 0.12),
0 1px 3px 0 rgba(0, 0, 0, 0.20);
--shadow-high:
0 4px 5px 0 rgba(0, 0, 0, 0.14),
0 1px 10px 0 rgba(0, 0, 0, 0.12),
0 2px 4px -1px rgba(0, 0, 0, 0.20);
}
body, html
{
padding: 0;
margin: 0;
outline: 0;
height: 100%;
background-color: var(--color-light);
font-family: var(--font-family);
font-size: var(--font-size);
line-height: var(--base-size);
color: var(--font-color);
}
body, html, #root
{
width: 100%;
height: 100%;
}
input
{
font-family: var(--font-family);
font-size: var(--font-size);
padding: 0 calc(.5 * var(--base-size));
height: calc(2 * var(--base-size));
line-height: calc(2 * var(--base-size));
}
*, *::before, *::after
{
box-sizing: border-box;
}
/**
* App
*/
.App
{
width: 100%;
height: 100%;
}
.App .TermInput
{
position: absolute;
z-index: 2;
width: 600px;
top: calc(2 * var(--base-size));
left: 50%;
transform: translateX(-50%);
}
/**
* TermInput
*/
.TermInput
{
display: flex;
flex-wrap: wrap;
align-items: center;
border-radius: 2px;
background: white;
2019-12-02 06:20:27 +00:00
box-shadow: var(--shadow-normal);
transition: box-shadow var(--animation-short) var(--animation-ease-out);
}
.TermInput:focus-within
{
2019-12-02 06:20:27 +00:00
box-shadow: var(--shadow-high);
}
.TermInput_term
{
display: inline-block;
border-radius: 2px;
padding: calc(.25 * var(--base-size)) calc(.5 * var(--base-size));
margin:
calc(.25 * var(--base-size))
0
calc(.25 * var(--base-size))
calc(.25 * var(--base-size));
background: var(--color-secondary);
color: var(--color-light);
cursor: pointer;
transition: background var(--animation-short) var(--animation-ease-out);
}
.TermInput_term:hover
{
background: var(--color-accent);
}
.TermInput_input
{
flex: 1;
border: none;
}
.TermInput_suggestions
{
width: 100%;
margin: 0;
padding: 0;
list-style: none;
}
.TermInput_suggestion
{
height: calc(2 * var(--base-size));
padding: 0 calc(.5 * var(--base-size));
cursor: pointer;
line-height: calc(2 * var(--base-size));
transition: background var(--animation-short) var(--animation-ease-out);
}
.TermInput_suggestion-focus
{
background: var(--color-light-darker);
}
/**
* Graph
*/
.Graph
{
position: relative;
display: block;
width: 100%;
height: 100%;
overflow: hidden;
user-select: none;
}
.Graph_edgesContainer
{
position: absolute;
z-index: 0;
top: 0;
2019-12-04 04:41:12 +00:00
left: 0;
width: 100%;
height: 100%;
}
.Graph_node
{
position: absolute;
z-index: 1;
display: block;
transform: translate(-50%, -50%);
2019-12-02 06:20:27 +00:00
box-shadow: var(--shadow-normal);
transition: box-shadow var(--animation-short) var(--animation-ease-out);
}
2019-12-02 06:20:27 +00:00
.Graph_edge
{
stroke: var(--color-dark);
}
.Graph_node-dragging
{
box-shadow: var(--shadow-high);
}
.Graph_element-exit, .Graph_element-enter
{
transition: opacity var(--animation-short) var(--animation-ease-out);
}
.Graph_element-enter
{
opacity: 0;
}
.Graph_element-enter-active
{
opacity: 1;
}
.Graph_element-exit
{
opacity: 1;
}
.Graph_element-exit-active
{
2019-12-02 06:20:27 +00:00
opacity: 0;
}
.Graph_empty
{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
font-size: var(--font-size-larger);
font-style: italic;
color: var(--color-dark-lighter);
}
/**
* SearchResults
*/
.SearchResults_result
{
display: inline-block;
max-width: 200px;
padding: calc(.25 * var(--base-size)) calc(.5 * var(--base-size));
background: white;
border-radius: 2px;
cursor: pointer;
text-align: center;
font-style: italic;
color: var(--color-dark-lighter);
transition: background var(--animation-short) var(--animation-ease-out);
}
.SearchResults_result-disease
{
font-style: normal;
color: var(--color-dark);
}
.SearchResults_result-term
{
background: var(--color-secondary);
color: var(--color-light);
}