You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

286 lines
4.8 KiB
CSS

:root {
--blue: blue;
--white: #e4e5e2;
--light-yellow: #ffffcc;
--silver: #999999;
--links-color: #3366ff;
--body-text-color: #3b3b3b;
--action-color: #3366ff;
--situation-color: #66cc66;
--logic-color:#ff9933;
--proposition-color: #ff6633;
--hyperlink-color: #cc3333;
--process-color: #66cc99;
--language-color: #ffcc66;
--agent-color: #cc3333;
--tool-color: #4b2f2e;
--form-color: #003399;
}
@font-face {
font-family: Fluxisch;
src: url(fonts/FLuxisch_ElseWeb_font/FluxischElse-Regular.woff);
}
@font-face{
font-family: Picnic;
src: url(fonts/PicNic-Regular.woff);
}
@font-face {
font-family: symbols1;
src: url(fonts/symbols.woff) format("woff");
}
@font-face {
font-family: mono;
src: url(fonts/diatype-semi-mono-regular.woff) format("woff");
}
body {
font-size: 16pt;
font-family: mono;
margin:0;
background-color: var(--white);
color: var(--body-text-color);
}
h1 {
font-size: 23pt;
font-family: Fluxisch;
font-style: bold;
margin-top: 10pt;
margin-bottom:10pt;
}
h2 {
font-size: 20pt;
font-family: Fluxisch;
font-style: bold;
margin-top: 10pt;
margin-bottom:10pt;
margin-right: 0;
}
p {
margin-top: 2pt;
margin-bottom: 2pt;
}
strong {
font-weight: normal;
}
a {
font-size: 18pt;
font-family: mono;
color: var(--links-color);
text-decoration:none;
}
.head{
display:flex;
justify-content: space-between;
align-items: center;
padding-left: 20pt;
padding-right: 15pt;
border-bottom: 1.6pt solid white;
}
.head a{
margin-top: 10pt;
margin-bottom:10pt;
}
#title{
margin-top: 17pt;
}
.question input{
width:10em;
font-size: 16pt;
padding-top: 3pt;
padding-right: 8pt;
padding-left: 8pt;
padding-bottom: 3pt;
margin-left: 15pt;
margin-right: 2pt;
margin-top: 10pt;
color:var(--body-text-color);
background-color: var(--white);
border: 1.8pt solid white;
border-radius: 8pt;
}
.description{
display: flex;
justify-content:flex-start;
align-items: start;
border-bottom: 1.6pt solid white;
}
.description p{
width: 100%;
margin-bottom: 10pt;
padding-left: 20pt;
padding-right: 15pt;
text-indent: 20pt;
}
#intro {
width: 70%;
padding-top: 10pt;
padding-right: 50pt;
border-right:1.6pt solid white;
}
#intro p{
text-indent: 20pt;
}
#panel {
width: 30%;
}
.legend{
display:flex;
flex-wrap: wrap;
height: 100%;
margin-left: 15pt;
margin-right: 15pt;
padding-top: 10pt;
padding-bottom: 10pt;
}
.btn {
display: flex;
align-items: center;
background: var(--white) solid;
color: var(--body-text-color);
font-size: 18pt;
border-radius: 8pt;
border: 1.6pt solid white;
box-shadow: 0 8px 16px 0 rgba(0,0,0,0), 0 6px 20px 0 rgba(0,0,0,0);
padding-top: 2pt;
padding-right: 8pt;
padding-left: 8pt;
padding-bottom: 2pt;
margin-left: 2pt;
margin-right: 2pt;
margin-top: 2pt;
margin-bottom: 2pt;
}
.btn:hover {
box-shadow: 0 0px 10px 0 var(--silver), 0 0px 10px 0 var(--silver);
cursor: pointer;
}
.btn.active {
box-shadow: 0 2px 0px 0px var(--silver), 0 0px 10px 0 var(--silver);
}
.words {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(450px, 1fr));
gap: 0;
margin-left: 0;
margin-right: 0;
}
.word {
display: none;
padding-top: 15pt;
padding-bottom: 15pt;
padding-left: 20pt;
padding-right: 20pt;
}
.show {
display: flex;
flex-wrap: wrap;
align-content: flex-start;
}
.word p{
order:2;
}
.title {
/* border: solid 0.3pt; */
font-size: 21pt;
font-weight:bold;
font-family: Fluxisch;
padding: 0%;
/* width: 20%; */
margin-top: 1pt;
margin-left: 2vw;
margin-right: 0.5vw;
margin-bottom: 0;
text-decoration: underline 1pt;
text-decoration-color: var(--body-text-color);
}
.symbol-leg {
color: var(--body-text-color);
font-family: symbols1;
font-size: 25pt;
padding-left: 10pt;
padding-right: 10pt;
}
.symbol-word {
color: var(--body-text-color);
margin-top: -5pt;
font-family: symbols1;
font-size: 20pt;
}
.leg_titles{
display: none;
font-size: 18pt;
font-family: mono;
margin-left: 8pt;
}
.leg_titles.on {
display: inline;
}
.action{
box-shadow: inset 0 0 10px 2px var(--action-color);
}
.situation{
border-top: var(--situation-color) 3pt solid;
}
.logic{
border-bottom: var(--logic-color) 3pt solid;
}
.proposition {
border-left: var(--proposition-color) 3pt solid;
}
.hyperlink {
border-radius: 0px 0px 70px 0px / 0px 0px 72px 1px;
}
.form {
border-right: var(--form-color) 3pt solid;
}
.tool {
box-shadow: 0 0 10px 2px var(--tool-color);
}
.language {
text-shadow: 0 0 2px var(--text-color);
}