mozhi/public/css/style.css
Arya Kiran ecb609f4fb
Some checks are pending
mozhi pipeline / Push Docker image to Codeberg docker registry (push) Waiting to run
mozhi pipeline / Build and publish artifacts (push) Waiting to run
add light mode (closes #18)
2024-04-05 22:56:50 +05:30

281 lines
4.4 KiB
CSS

/*General theming*/
body {
font-family: sans-serif;
margin: 20px auto;
line-height: 1.5em;
max-width: 1000px;
font-size: 1rem;
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;
}
footer p {
margin: 0.2em 0 0.2em 0;
}
a {
color: #f57c00;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
/* Navigation */
nav {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-end;
gap: 1rem;
}
nav li {
display: inline-block no;
margin-right: 20px;
}
.navlogo {
width: 75px;
height: 75px;
}
/* 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;
}
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;
/* Accent shadow */
box-shadow: 2px 2px 0px 0px rgba(245, 124, 0, 0.25);
color: #b2b2b2;
background-color: #2f2f2f;
width: 100%;
}
button {
display: flex;
font-size: 17px;
padding: 4px 8px;
justify-content: flex-end;
gap: 2px;
border: none;
border-radius: 4px;
background: #f57c00;
}
button:hover {
box-shadow: 5px 5px 0px 0px rgba(245, 124, 0, 0.25);
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;
}
.button:hover {
box-shadow: 5px 5px 0px 0px rgba(245, 124, 0, 0.25);
cursor: pointer;
}
/* Spacing stuff */
.wrap {
display: flex;
flex-wrap: wrap;
}
.wrap.languages {
flex-wrap: nowrap;
margin-bottom: 20px;
}
.language {
margin: 0px 10px;
}
.item {
width: 100%;
height: 220px;
}
.item-wrapper {
display: block;
width: 90%;
max-width: 720px;
margin: 5px 10px;
gap: 10px;
}
/* CSS for the custom engine selector */
.custom-select {
position: relative;
display: inline-block;
margin: 5px 10px;
}
.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;
}
/* Javascript searchable select used in source/target language */
.nice-select,
.nice-select-dropdown,
.nice-select-search {
border-right: none;
border-bottom: none;
border-top: none;
border-radius: 4px;
border-left: 2px solid #f57c00;
/* The rgba is the same value as above, but with a 0.25 opacity */
box-shadow: 2px 2px 0px 0px rgba(245, 124, 0, 0.25);
}
.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;
}
@media (prefers-color-scheme: dark) {
.options {
background-color: #FFEDD5;
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,
.nice-select,
.nice-select-dropdown,
.nice-select-search {
background-color: #fff2e2;
color: #2f2f2f;
}
body {
background-color: #FFEDD5;
color: #000;
}
button {
color: #fbe9e7;
}
header {
border-bottom: 1px solid #b2b2b2;
}
footer {
border-top: 1px solid #b2b2b2;
}
}