mirror of
https://codeberg.org/aryak/mozhi
synced 2024-11-26 16:11:57 +05:30
add light mode (closes #18)
This commit is contained in:
parent
403f68ddf1
commit
ecb609f4fb
@ -26,6 +26,7 @@ footer {
|
|||||||
width: 95%;
|
width: 95%;
|
||||||
border-top: 1px solid #b2b2b2;
|
border-top: 1px solid #b2b2b2;
|
||||||
}
|
}
|
||||||
|
|
||||||
footer p {
|
footer p {
|
||||||
margin: 0.2em 0 0.2em 0;
|
margin: 0.2em 0 0.2em 0;
|
||||||
}
|
}
|
||||||
@ -34,6 +35,7 @@ a {
|
|||||||
color: #f57c00;
|
color: #f57c00;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
a:hover {
|
a:hover {
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
@ -46,10 +48,12 @@ nav {
|
|||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
gap: 1rem;
|
gap: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
nav li {
|
nav li {
|
||||||
display: inline-block no;
|
display: inline-block no;
|
||||||
margin-right: 20px;
|
margin-right: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.navlogo {
|
.navlogo {
|
||||||
width: 75px;
|
width: 75px;
|
||||||
height: 75px;
|
height: 75px;
|
||||||
@ -65,6 +69,7 @@ textarea {
|
|||||||
border-color: #9d9d9d;
|
border-color: #9d9d9d;
|
||||||
color: #f8f9fa;
|
color: #f8f9fa;
|
||||||
}
|
}
|
||||||
|
|
||||||
textarea:focus {
|
textarea:focus {
|
||||||
border-color: #e5ebff;
|
border-color: #e5ebff;
|
||||||
outline: 1px solid #e5ebff;
|
outline: 1px solid #e5ebff;
|
||||||
@ -97,6 +102,7 @@ button {
|
|||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
background: #f57c00;
|
background: #f57c00;
|
||||||
}
|
}
|
||||||
|
|
||||||
button:hover {
|
button:hover {
|
||||||
box-shadow: 5px 5px 0px 0px rgba(245, 124, 0, 0.25);
|
box-shadow: 5px 5px 0px 0px rgba(245, 124, 0, 0.25);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
@ -114,6 +120,7 @@ button:hover {
|
|||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
background: #f57c00;
|
background: #f57c00;
|
||||||
}
|
}
|
||||||
|
|
||||||
.button:hover {
|
.button:hover {
|
||||||
box-shadow: 5px 5px 0px 0px rgba(245, 124, 0, 0.25);
|
box-shadow: 5px 5px 0px 0px rgba(245, 124, 0, 0.25);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
@ -124,6 +131,7 @@ button:hover {
|
|||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
.wrap.languages {
|
.wrap.languages {
|
||||||
flex-wrap: nowrap;
|
flex-wrap: nowrap;
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
@ -132,10 +140,12 @@ button:hover {
|
|||||||
.language {
|
.language {
|
||||||
margin: 0px 10px;
|
margin: 0px 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.item {
|
.item {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 220px;
|
height: 220px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.item-wrapper {
|
.item-wrapper {
|
||||||
display: block;
|
display: block;
|
||||||
width: 90%;
|
width: 90%;
|
||||||
@ -194,8 +204,10 @@ button:hover {
|
|||||||
border-top: none;
|
border-top: none;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
border-left: 2px solid #f57c00;
|
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);
|
box-shadow: 2px 2px 0px 0px rgba(245, 124, 0, 0.25);
|
||||||
}
|
}
|
||||||
|
|
||||||
.center-area {
|
.center-area {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-around;
|
justify-content: space-around;
|
||||||
@ -212,3 +224,58 @@ button:hover {
|
|||||||
text-align: center;
|
text-align: center;
|
||||||
margin: auto;
|
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;
|
||||||
|
}
|
||||||
|
}
|
Loading…
Reference in New Issue
Block a user