arya/mozhi
1
0
Fork 0
mirror of https://codeberg.org/aryak/mozhi synced 2024-12-22 14:59:44 +05:30
Code Issues Actions Packages Projects Releases Wiki Activity

add light mode (closes #18)
Some checks are pending
mozhi pipeline / Push Docker image to Codeberg docker registry (push) Waiting to run
Details
mozhi pipeline / Build and publish artifacts (push) Waiting to run
Details

Browse Source
This commit is contained in:
Arya 2024-04-05 22:56:50 +05:30
parent 403f68ddf1
commit ecb609f4fb
Signed by: arya
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%; 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;
}
}