mozhi/public/css/style.css

352 lines
5.3 KiB
CSS
Raw Normal View History

2023-09-10 17:27:22 +05:30
/*General theming*/
body {
font-family: sans-serif;
margin: 20px auto;
line-height: 1.5em;
2023-09-19 23:33:10 +05:30
max-width: 1000px;
font-size: 1rem;
2023-09-10 17:27:22 +05:30
background-color: #222;
color: #f8f9fa;
padding: 0 10px;
hyphens: auto;
}
header {
display: flex;
justify-content: space-between;
align-items: center;
white-space: nowrap;
flex-wrap: wrap;
border-bottom: 1px solid #b2b2b2;
width: 95%;
}
footer {
width: 95%;
border-top: 1px solid #b2b2b2;
}
2024-04-05 22:56:50 +05:30
2023-09-10 17:27:22 +05:30
footer p {
margin: 0.2em 0 0.2em 0;
}
a {
color: #f57c00;
2023-09-10 17:27:22 +05:30
text-decoration: none;
}
2024-04-05 22:56:50 +05:30
2023-09-10 17:27:22 +05:30
a:hover {
text-decoration: underline;
}
2024-05-21 21:27:35 +05:30
#url {
color: #010000;
text-decoration: none;
}
2023-09-10 17:27:22 +05:30
/* Navigation */
nav {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-end;
gap: 1rem;
}
2024-04-05 22:56:50 +05:30
2023-09-10 17:27:22 +05:30
nav li {
display: inline-block no;
margin-right: 20px;
}
2024-04-05 22:56:50 +05:30
2023-09-10 17:27:22 +05:30
.navlogo {
2023-09-11 08:23:30 +05:30
width: 75px;
height: 75px;
2023-09-10 17:27:22 +05:30
}
/* Theming for buttons and text areas*/
textarea {
width: 100%;
font-size: 1rem;
padding: 4px;
border: 2px solid #888888;
background-color: #222;
border-color: #9d9d9d;
color: #f8f9fa;
}
2024-04-05 22:56:50 +05:30
2023-09-10 17:27:22 +05:30
textarea:focus {
border-color: #e5ebff;
outline: 1px solid #e5ebff;
}
select {
display: flex;
padding: 4px 8px;
justify-content: space-between;
flex: 1 0 0;
border-right: none;
border-bottom: none;
border-top: none;
border-radius: 4px;
border-left: 2px solid #f57c00;
2023-09-10 17:27:22 +05:30
/* Accent shadow */
2023-09-11 08:00:29 +05:30
box-shadow: 2px 2px 0px 0px rgba(245, 124, 0, 0.25);
2023-09-10 17:27:22 +05:30
color: #b2b2b2;
background-color: #2f2f2f;
2023-09-19 23:33:10 +05:30
width: 100%;
2023-09-10 17:27:22 +05:30
}
button {
display: flex;
font-size: 17px;
2023-09-10 17:27:22 +05:30
padding: 4px 8px;
justify-content: flex-end;
gap: 2px;
border: none;
border-radius: 4px;
background: #f57c00;
2023-09-10 17:27:22 +05:30
}
2024-04-05 22:56:50 +05:30
2023-09-10 17:27:22 +05:30
button:hover {
2023-09-11 08:00:29 +05:30
box-shadow: 5px 5px 0px 0px rgba(245, 124, 0, 0.25);
2023-09-10 17:27:22 +05:30
cursor: pointer;
}
/* While we're at it, fake button css style for the url.*/
.button {
display: flex;
font-size: 17px;
padding: 4px 8px;
justify-content: flex-end;
gap: 2px;
border: none;
border-radius: 4px;
background: #f57c00;
}
2024-04-05 22:56:50 +05:30
.button:hover {
box-shadow: 5px 5px 0px 0px rgba(245, 124, 0, 0.25);
cursor: pointer;
}
2023-09-10 17:27:22 +05:30
/* Spacing stuff */
.wrap {
display: flex;
flex-wrap: wrap;
}
2024-04-05 22:56:50 +05:30
2023-09-10 17:27:22 +05:30
.wrap.languages {
flex-wrap: nowrap;
margin-bottom: 20px;
}
.language {
margin: 0px 10px;
}
2024-04-05 22:56:50 +05:30
2023-09-10 17:27:22 +05:30
.item {
width: 100%;
2023-10-04 20:30:45 +05:30
height: 220px;
2023-09-10 17:27:22 +05:30
}
2024-04-05 22:56:50 +05:30
2023-09-10 17:27:22 +05:30
.item-wrapper {
display: block;
2023-09-21 15:37:09 +05:30
width: 90%;
2023-10-04 20:30:45 +05:30
max-width: 720px;
2023-09-10 17:27:22 +05:30
margin: 5px 10px;
gap: 10px;
}
/* CSS for the custom engine selector */
.custom-select {
position: relative;
display: inline-block;
2023-09-19 23:33:10 +05:30
margin: 5px 10px;
2023-09-10 17:27:22 +05:30
}
.selected-option {
padding: 7px;
border: 1px solid #ccc;
border-radius: 4px;
text-decoration: none;
color: #f8f9fa;
}
.options {
display: none;
position: absolute;
background-color: #222;
border: 1px solid #ccc;
border-radius: 4px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
list-style: none;
padding: 0;
margin: 0;
width: 100%;
z-index: 1;
}
.options li {
padding: 10px;
}
.options li:hover {
background-color: #f0f0f0;
}
.custom-select:hover .options {
display: block;
}
2023-09-10 20:22:51 +05:30
/* Javascript searchable select used in source/target language */
.nice-select,
.nice-select-dropdown,
.nice-select-search {
2023-09-10 20:22:51 +05:30
border-right: none;
border-bottom: none;
border-top: none;
border-radius: 4px;
border-left: 2px solid #f57c00;
2024-04-05 22:56:50 +05:30
/* The rgba is the same value as above, but with a 0.25 opacity */
2023-09-11 08:00:29 +05:30
box-shadow: 2px 2px 0px 0px rgba(245, 124, 0, 0.25);
2023-09-10 20:22:51 +05:30
}
2024-04-05 22:56:50 +05:30
2023-10-13 18:30:41 +05:30
.center-area {
display: flex;
justify-content: space-around;
align-items: center;
max-width: 35%;
margin: auto;
margin-bottom: 1%;
}
.center-area2 {
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
margin: auto;
}
2024-04-05 22:56:50 +05:30
2024-05-21 21:27:35 +05:30
@media (prefers-color-scheme: light) {
2024-04-05 22:56:50 +05:30
.options {
2024-05-21 21:27:35 +05:30
background-color: #ffedd5;
2024-04-05 22:56:50 +05:30
border: 1px solid #ccc;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.options li:hover {
background-color: #f0f0f0;
}
.selected-option {
border: 1px solid #888888;
color: #000;
}
/* Theming for buttons and text areas*/
textarea {
border: 2px solid #888888;
background-color: #fff4e6;
border-color: #9d9d9d;
color: #000;
}
textarea:focus {
border-color: #261f1e;
outline: 1px solid #261f1e;
}
select,
2024-05-21 21:27:35 +05:30
.nice-select .nice-select-dropdown,
2024-04-05 22:56:50 +05:30
.nice-select,
.nice-select-search {
2024-05-21 21:27:35 +05:30
background-color: #fff;
2024-04-05 22:56:50 +05:30
color: #2f2f2f;
}
body {
2024-05-21 21:27:35 +05:30
background-color: #ffedd5;
2024-04-05 22:56:50 +05:30
color: #000;
}
2024-05-21 21:27:35 +05:30
button,
#url {
2024-04-05 22:56:50 +05:30
color: #fbe9e7;
}
header {
border-bottom: 1px solid #b2b2b2;
}
footer {
border-top: 1px solid #b2b2b2;
}
.def_type {
color: cyan;
text-transform: capitalize;
}
.syn {
color: burlywood;
}
.syn_type {
color: cyan;
}
.use_in_sentence {
color: yellow;
}
}
#definitions_and_translations {
display: grid;
margin: auto;
width: 1100px;
gap: 10px;
grid-template-areas: "definitions translations";
}
.def_type {
color: #007979;
text-transform: capitalize;
}
.syn {
color: #804700;
}
.syn_type {
color: #007979;
}
.use_in_sentence {
color: #009902;
}
.definitions li:not(:last-child) {
margin-bottom: 1rem;
}
@media screen and (max-width: 1200px) {
#definitions_and_translations {
display: grid;
width: 90vw;
grid-template-areas:
"translations translations"
"definitions definitions";
}
}
div.definitions {
grid-area: definitions;
}
div.translations {
grid-area: translations;
2024-05-21 21:27:35 +05:30
}