cjvt-valency/dip_src/flask_app/static/style.css
2019-03-20 17:49:34 +01:00

206 lines
3.2 KiB
CSS

html {
height: 95%;
}
body {
height: 95%;
display: flex;
flex-direction: column;
/* font-family: "Arial", Helvetica, sans-serif; */
background-color: var(--color-1);
}
div {
border: 0.0px solid gray;
}
#letters a, #words a, .frame-sentences-wrapper a {
text-decoration: none;
color: inherit;
font-weight: bold;
}
#letters a:hover, #words a:hover {
color: var(--color-1);
}
.monospace {
font-family: "Lucida Console", Monaco, monospace
}
#header h2 {
text-align: center;
}
#letters {
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
padding: 5px;
margin: 5px;
background-color: var(--color-3);
border-radius: 5px;
}
#letters span {
margin: 5px;
}
#words {
width: 200px;
overflow-y: scroll;
background-color: var(--color-3);
border-radius: 5px;
margin: 5px;
padding-top: 5px;
}
#main-body {
display: flex;
flex-direction: row;
}
#main-content {
flex-grow: 1;
margin: 5px;
display: flex;
flex-direction: column;
}
#reduce-functions {
background-color: var(--color-3);
padding: 5px;
margin-bottom: 5px;
border-radius: 5px;
}
#reduce-functions * {
display: inline-block;
}
#word-info {
background-color: var(--color-4);
border-top-left-radius: 5px;
border-top-right-radius: 5px;
margin-top: 5px;
padding: 5px;
}
#word-info-left {
display: inline-block;
float: left;
margin-right: 50px;
}
#word-info-right {
display: inline-block;
float: left;
}
#frames-area {
flex-grow: 1;
background-color: var(--color-2);
padding: 5px;
}
#words {
width: 200px;
overflow-y: scroll;
}
.frame-sense {
display: inline;
float: left;
height: 100%;
}
.frame-table {
display: inline;
float: left;
border-collapse: collapse;
border: 1px solid;
margin-right: 20px;
}
.frame-table td, th {
border-left: 1px solid;
border-right: 1px solid;
padding: 2px;
min-width: 50px;
max-width: 100px;
max-height: 200px;
}
.frame-sentences-wrapper {
clear: both;
}
.frame-sentences td {
padding-bottom: 10px;
}
/* Hide some data*/
/*
.frame-table tr:nth-child(2) {
display: none;
}
.frame-table tr:nth-child(3) {
display: none;
}
*/
.token-div {
margin-top: 10px;
margin-bottom: 5px;
}
.token-div td:nth-child(1) {
min-width: 100px;
}
.hw-highlight {
color: blue;
}
.functor-highlight {
color: red;
cursor: pointer;
}
/* CSS - Cascading Style Sheet */
/* Palette color codes */
/* Palette URL: http://paletton.com/#uid=13D0u0k7UUa3cZA5wXlaiQ5cFL3 */
/* Feel free to copy&paste color codes to your application */
/* As hex codes */
/* As RGBa codes */
.rgba-primary-0 { color: rgba(183,206,236,1) } /* Main Primary color */
.rgba-primary-1 { color: rgba(228,238,251,1) }
.rgba-primary-2 { color: rgba(206,223,245,1) }
.rgba-primary-3 { color: rgba(159,188,225,1) }
.rgba-primary-4 { color: rgba(135,168,211,1) }
/* Generated by Paletton.com © 2002-2014 */
/* http://paletton.com */
:root {
--color-0: #B7CEEC;
--color-1: #E4EEFB;
--color-2: #CEDFF5;
--color-3: #9FBCE1;
--color-4: #87A8D3;
}