87 lines
1.4 KiB
CSS
87 lines
1.4 KiB
CSS
content {
|
|
display: grid;
|
|
grid-template-columns: auto;
|
|
grid-template-rows: 100px auto;
|
|
grid-template-areas: 'message' 'form';
|
|
}
|
|
|
|
form {
|
|
grid-area: form;
|
|
display: inline-grid;
|
|
grid-template-rows: 64px 100px;
|
|
grid-template-areas:
|
|
'source dest'
|
|
'submition submition';
|
|
}
|
|
|
|
sourcelang {
|
|
grid-area: source;
|
|
}
|
|
|
|
destlang {
|
|
grid-area: dest;
|
|
}
|
|
|
|
sourcelang, destlang {
|
|
display: grid;
|
|
grid-template-rows: 24px 40px;;
|
|
grid-template-areas: 'label' 'select';
|
|
}
|
|
|
|
label {
|
|
grid-area: label;
|
|
text-align: center;
|
|
}
|
|
|
|
/* inspired from https://coderwall.com/p/w7npmq/fully-custom-select-box-simple-css-only */
|
|
.form-style {
|
|
border: 1px solid #ddd;
|
|
width: 120px;
|
|
border-radius: 3px;
|
|
overflow: hidden;
|
|
/* background: #edf0f2; */
|
|
margin: auto;
|
|
}
|
|
|
|
.form-style select, .form-style input {
|
|
padding: 5px 8px;
|
|
width: 100%;
|
|
border: none;
|
|
box-shadow: none;
|
|
background: transparent;
|
|
background-image: none;
|
|
text-align: center;
|
|
-webkit-appearance: none;
|
|
}
|
|
|
|
.form-style select:focus {
|
|
outline: none;
|
|
}
|
|
|
|
submit {
|
|
margin: auto;
|
|
width: 50%;
|
|
grid-area: submition;
|
|
}
|
|
|
|
message {
|
|
grid-area: message;
|
|
margin: 0 20px;
|
|
}
|
|
|
|
sidebar {
|
|
display: block;
|
|
}
|
|
|
|
sidebar > ul {
|
|
padding-inline-start: 0;
|
|
margin: 40px;
|
|
display: block;
|
|
list-style: none;
|
|
}
|
|
|
|
sidebar > ul >li {
|
|
font-size: 1.1em;
|
|
margin: 20px;
|
|
}
|