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

202 lines
3.2 KiB
CSS
Raw Normal View History

:root
{
--color-accent: #D80C49;
--color-secondary: #AE1246;
--color-light: #EEEEEE;
--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;
}
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(.6 * var(--base-size));
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;
align-items: center;
border: 2px solid var(--color-dark);
border-radius: 2px;
background: white;
transition: box-shadow var(--animation-short) var(--animation-ease-out);
}
.TermInput:focus-within
{
box-shadow:
-1px -1px 0px var(--color-dark),
1px -1px 0px var(--color-dark),
1px 1px 0px var(--color-dark),
-1px 1px 0px var(--color-dark);
}
.TermInput_term
{
display: inline-block;
background: var(--color-secondary);
color: var(--color-light);
border-radius: 2px;
padding: calc(.25 * var(--base-size)) calc(.5 * var(--base-size));
margin-left: calc(.3 * var(--base-size));
cursor: pointer;
transition: background var(--animation-short) var(--animation-ease-out);
}
.TermInput_term:hover
{
background: var(--color-accent);
}
.TermInput_input
{
flex: 1;
border: none;
}
/**
* Graph
*/
.Graph
{
position: relative;
display: block;
width: 100%;
height: 100%;
overflow: hidden;
user-select: none;
}
.Graph_edgesContainer
{
position: absolute;
z-index: 0;
top: 0;
left 0;
width: 100%;
height: 100%;
}
.Graph_edgesContainer line
{
stroke: var(--color-dark);
}
.Graph_node
{
position: absolute;
z-index: 1;
display: block;
transform: translate(-50%, -50%);
}
/**
* 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;
margin-left: calc(.3 * var(--base-size));
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-size: var(--font-size-larger);
font-style: normal;
color: var(--color-dark);
}
.SearchResults_result-term
{
background: var(--color-secondary);
color: var(--color-light);
}