206 lines
3.2 KiB
CSS
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;
|
|
}
|