This repository has been archived on 2023-02-26. You can view files and clone it, but cannot push or open issues or pull requests.
langue-phundrak-com/css/dictionary/index.css
2018-12-30 16:22:54 +01:00

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;
}