blitzwing/mozhi
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add light mode (closes #18)

Browse source
This commit is contained in:
Arya Kiran 2024-04-05 22:56:50 +05:30
parent 403f68ddf1
commit ecb609f4fb
No known key found for this signature in database
GPG key ID: 842D12BDA50DF120
1 changed files with 67 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

67
public/css/style.css
View file

@ -26,6 +26,7 @@ footer {
width: 95%;
border-top: 1px solid #b2b2b2;
}
footer p {
margin: 0.2em 0 0.2em 0;
}
@ -34,6 +35,7 @@ a {
color: #f57c00;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
@ -46,10 +48,12 @@ nav {
justify-content: flex-end;
gap: 1rem;
}
nav li {
display: inline-block no;
margin-right: 20px;
}
.navlogo {
width: 75px;
height: 75px;
@ -65,6 +69,7 @@ textarea {
border-color: #9d9d9d;
color: #f8f9fa;
}
textarea:focus {
border-color: #e5ebff;
outline: 1px solid #e5ebff;
@ -97,6 +102,7 @@ button {
border-radius: 4px;
background: #f57c00;
}
button:hover {
box-shadow: 5px 5px 0px 0px rgba(245, 124, 0, 0.25);
cursor: pointer;
@ -114,6 +120,7 @@ button:hover {
border-radius: 4px;
background: #f57c00;
}
.button:hover {
box-shadow: 5px 5px 0px 0px rgba(245, 124, 0, 0.25);
cursor: pointer;
@ -124,6 +131,7 @@ button:hover {
display: flex;
flex-wrap: wrap;
}
.wrap.languages {
flex-wrap: nowrap;
margin-bottom: 20px;
@ -132,10 +140,12 @@ button:hover {
.language {
margin: 0px 10px;
}
.item {
width: 100%;
height: 220px;
}
.item-wrapper {
display: block;
width: 90%;
@ -194,8 +204,10 @@ button:hover {
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;
@ -212,3 +224,58 @@ button:hover {
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;
}
}