/*
CSS Document
White
Design par Olivier R.
*/
* { margin: 0; padding: 0; }
img { border: none; }
/* Generic classes */
.fleft { float: left; }
.fright { float: right; }
.center { text-align: center; }
.right { text-align: right; }
.left { text-align: left; }
.justify { text-align: justify; }
.hidden { display: none; }
.clearer { clear: both; font-size: 0; height: 0; }
body {
background: hsl(0, 0%, 100%) url(../img/lines.png);
font: normal 16px "Trebuchet MS", "Fira Sans", "Liberation Sans", sans-serif;
color: #505050;
}
.inbox {
width: 800px;
margin: 20px auto 10px auto;
padding: 10px 30px 30px 30px;
background: hsl(0, 0%, 100%);
border: 2px solid #F0F0F0;
border-radius: 20px;
}
h1 {
margin: 5px 0 5px 0;
color: hsl(210, 50%, 50%);
font: bold 30px "Trebuchet MS", "Fira Sans", "Liberation Sans", sans-serif;
text-align: center;
}
h2 {
margin: 5px 0 2px 0;
color: hsl(0, 50%, 50%);
font: bold 20px "Trebuchet MS", "Fira Sans", "Liberation Sans", sans-serif;
}
h3 {
margin: 3px 0 2px 0;
color: hsl(210, 50%, 50%);
font: bold 16px "Trebuchet MS", "Fira Sans", "Liberation Sans", sans-serif;
}
#dic_selector {
color: hsl(210, 50%, 50%);
font: bold 16px "Trebuchet MS", "Fira Sans", "Liberation Sans", sans-serif;
}
details {
font-size: 11px;
font-variant: small-caps;
color: hsl(210, 50%, 50%);
cursor: pointer;
}
details > * {
font-size: 12px;
font-variant: normal;
color: hsl(210, 0%, 0%);
cursor: auto;
}
details.inline {
padding: 3px;
width: 260px;
}
/*
Main buttons
*/
#buttons {
padding: 10px 0;
justify-content: center;
}
.main_button {
margin: 0 5px;
min-width: 100px;
padding: 10px 20px;
background-color: hsl(210, 10%, 95%);
border-radius: 5px;
text-align: center;
cursor: pointer;
}
#lexicon_button {
background-color: hsl(210, 80%, 90%);
color: hsl(210, 80%, 30%);
font-weight: bold;
}
.big_block {
margin: 10px 0;
padding: 10px;
background-color: hsl(210, 20%, 96%);
border-radius: 5px;
}
#add_page {
display: none;
}
.columns {
display: flex;
}
#word_generator {
width: 400px;
}
#generated_words {
width: 400px;
}
#editor {
display: none;
}
#word_section2 {
display: none;
}
.category {
margin-right: 5px;
padding: 10px;
border-radius: 3px;
background-color: hsl(210, 20%, 96%);
cursor: pointer;
}
.category:hover {
background-color: hsl(210, 20%, 90%);
}
.section {
display: none;
padding: 10px;
}
.container {
display: flex;
}
.dic_container {
display: flex;
align-items: center;
justify-content: space-between;
}
.block {
flex-grow: 1;
margin: 5px;
padding: 10px 15px 15px 15px;
background-color: hsl(0, 10%, 96%);
border-radius: 3px;
}
.space_container {
display: flex;
justify-content: space-between;
}
.typeline {
padding: 5px 10px;
}
.widelabel {
display: inline-block;
min-width: 80px;
}
.description {
font-size: 12px;
}
.examples_true {
flex-grow: 1;
margin: 2px;
padding: 10px;
background-color: hsl(120, 10%, 90%);
color: hsl(120, 10%, 50%);
font-size: 12px;
border-radius: 3px;
}
.examples_false {
flex-grow: 1;
margin: 2px;
padding: 10px;
background-color: hsl(0, 10%, 90%);
color: hsl(0, 10%, 50%);
font-size: 12px;
border-radius: 3px;
}
ul {
margin-left: 30px;
}
input[type=text].large {
display: inline-block;
width: 250px;
padding: 5px 10px;
border: 2px solid hsl(0, 0%, 80%);
border-radius: 3px;
height: 24px;
background: transparent;
font: normal 20px Tahoma, "Ubuntu Condensed";
color: hsl(0, 0%, 20%);
}
input[type=text].medium {
display: inline-block;
width: 175px;
padding: 2px 5px;
border: 2px solid hsl(0, 0%, 80%);
border-radius: 3px;
height: 20px;
background: transparent;
font: normal 18px Tahoma, "Ubuntu Condensed";
color: hsl(0, 0%, 20%);
}
input[placeholder] {
color: hsl(0, 0%, 50%);
}
#buttonline {
margin-top: 5px;
text-align: right;
}
#add_to_lexicon {
display: none;
width: 200px;
padding: 5px 10px;
font-size: 16px;
background-color: hsl(150, 50%, 50%);
color: hsl(150, 50%, 96%);
border-radius: 3px;
text-align: center;
cursor: pointer;
}
#add_to_lexicon:hover {
background-color: hsl(150, 60%, 40%);
color: hsl(150, 60%, 90%);
box-shadow: 0 0 2px hsl(150, 60%, 50%);
}
#lexicon_page {
}
/*
Search page
*/
#search_page {
display: none;
}
.button_search {
margin: 5px 0;
width: 100px;
padding: 5px 10px;
font-size: 16px;
background-color: hsl(150, 50%, 50%);
color: hsl(150, 50%, 96%);
border-radius: 3px;
text-align: center;
cursor: pointer;
}
.button_search:hover {
background-color: hsl(150, 60%, 40%);
color: hsl(150, 60%, 90%);
box-shadow: 0 0 2px hsl(150, 60%, 50%);
}
#search_table {
width: 600px;
}
/*
Information page
*/
#info_page {
display: none;
}
#tags_table {
width: 500px;
}
/*
Dictionary
*/
#new_dictionary_button, #delete_dictionary_button {
margin-left: 5px;
padding: 1px 5px;
background-color: hsl(150, 50%, 50%);
color: hsl(150, 0%, 100%);
border-radius: 3px;
cursor: pointer;
}
#delete_dictionary_button {
background-color: hsl(0, 50%, 50%);
color: hsl(0, 0%, 100%);
}
#save_button {
display: none;
margin-left: 5px;
padding: 1px 5px;
background-color: hsl(150, 50%, 50%);
color: hsl(150, 0%, 100%);
border-radius: 3px;
cursor: pointer;
}
#export_button, #import_button {
display: block;
margin-left: 5px;
float: right;
padding: 2px 10px;
background-color: hsl(210, 50%, 50%);
color: hsl(210, 0%, 100%);
border-radius: 3px;
cursor: pointer;
}
#new_dictionary_section {
margin: 5px 0;
padding: 5px 10px;
background-color: hsl(210, 10%, 90%);
border-radius: 3px;
}
#create_dictionary_button {
padding: 1px 5px;
background-color: hsl(120, 50%, 30%);
color: hsl(120, 10%, 100%);
border-radius: 3px;
}
#wait_progress {
width: 100%;
height: 4px;
}
/*
Table
*/
table {
border: 1px solid hsl(210, 10%, 50%);
width: 100%;
}
th {
padding: 5px 10px;
border-left: 1px solid hsl(210, 10%, 90%);
text-align: left;
}
td {
padding: 0 10px;
vertical-align: top;
}
.delete_entry {
cursor: pointer;
font-weight: bold;
color: hsl(0, 100%, 50%);
}