MahnoKropotkinvich/redox
1
0
Fork 0
mirror of https://gitlab.redox-os.org/redox-os/redox.git synced 2026-07-03 10:08:45 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add dark mode

Browse Source
This commit is contained in:
Wildan M 2026-03-27 04:11:39 +07:00
parent b113987aa7
commit e7e89a28c2
No known key found for this signature in database
GPG Key ID: 01AC53185C679C79
1 changed files with 67 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

88
src/web/style.css
View File

@ -6,8 +6,8 @@
body { body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
background-color: #f9f9fb; background-color: #eee;
color: #24292e; color: #222;
line-height: 1.6; line-height: 1.6;
} }
@ -23,8 +23,8 @@ body {
.category-title { .category-title {
font-size: 1.5rem; font-size: 1.5rem;
color: #24292e; color: #222;
border-bottom: 2px solid #e1e4e8; border-bottom: 2px solid #eee;
padding-bottom: 10px; padding-bottom: 10px;
margin-bottom: 20px; margin-bottom: 20px;
font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
@ -38,8 +38,8 @@ body {
} }
.package-card { .package-card {
background-color: #ffffff; background-color: #fff;
border: 1px solid #e1e4e8; border: 1px solid #eee;
border-radius: 6px; border-radius: 6px;
padding: 15px; padding: 15px;
margin: 10px; margin: 10px;
@ -74,16 +74,16 @@ body {
align-items: center; align-items: center;
color: #6a737d; color: #6a737d;
font-size: 0.9rem; font-size: 0.9rem;
border-top: 1px solid #e1e4e8; border-top: 1px solid #eee;
padding-top: 10px; padding-top: 10px;
} }
.package-card .pkg-version { .package-card .pkg-version {
font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
background-color: #f3f4f6; background-color: #fff;
padding: 3px 6px; padding: 3px 6px;
border-radius: 4px; border-radius: 4px;
color: #24292e; color: #222;
} }
.package-card .pkg-size { .package-card .pkg-size {
@ -91,14 +91,14 @@ body {
} }
a { a {
color: #24292e; color: #222;
text-decoration: none; text-decoration: none;
border-bottom: 1px solid #e1e4e8; border-bottom: 1px solid #eee;
} }
a:hover { a:hover {
color: #000000; color: #000000;
border-bottom: 1px solid #24292e; border-bottom: 1px solid #222;
} }
h1, h2, h3 { h1, h2, h3 {
@ -108,7 +108,7 @@ h1, h2, h3 {
code { code {
font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
background-color: #f3f4f6; background-color: #fff;
padding: 0.2em 0.4em; padding: 0.2em 0.4em;
border-radius: 3px; border-radius: 3px;
font-size: 0.9em; font-size: 0.9em;
@ -116,7 +116,7 @@ code {
.card { .card {
background-color: #ffffff; background-color: #ffffff;
border: 1px solid #e1e4e8; border: 1px solid #eee;
border-radius: 6px; border-radius: 6px;
padding: 20px; padding: 20px;
margin-bottom: 20px; margin-bottom: 20px;
@ -124,7 +124,7 @@ code {
.pkg-header, .index-header { .pkg-header, .index-header {
background-color: #ffffff; background-color: #ffffff;
border-bottom: 1px solid #d1d5da; border-bottom: 1px solid #ddd;
padding: 40px 0; padding: 40px 0;
margin-bottom: 40px; margin-bottom: 40px;
text-align: center; text-align: center;
@ -157,19 +157,19 @@ code {
} }
.back-link:hover { .back-link:hover {
color: #24292e; color: #222;
border: none; border: none;
} }
.install-action { .install-action {
display: inline-block; display: inline-block;
background-color: #f3f4f6; background-color: #fff;
border: 1px solid #d1d5da; border: 1px solid #ddd;
border-radius: 6px; border-radius: 6px;
padding: 12px 20px; padding: 12px 20px;
font-family: ui-monospace, SFMono-Regular, monospace; font-family: ui-monospace, SFMono-Regular, monospace;
font-size: 1.1rem; font-size: 1.1rem;
color: #24292e; color: #222;
} }
.install-action .prompt { .install-action .prompt {
@ -220,7 +220,7 @@ table {
th, td { th, td {
padding: 10px 0; padding: 10px 0;
text-align: left; text-align: left;
border-bottom: 1px solid #e1e4e8; border-bottom: 1px solid #eee;
} }
th { th {
@ -241,6 +241,52 @@ th {
.pkg-deps li, .pkg-dependents li { .pkg-deps li, .pkg-dependents li {
padding: 8px 0; padding: 8px 0;
border-bottom: 1px solid #e1e4e8; border-bottom: 1px solid #eee;
width: 50%; width: 50%;
} }
@media (prefers-color-scheme: dark) {
body {
background-color: #000;
color: #ccc;
}
.package-card, .card, .pkg-header, .index-header {
background-color: #111;
border-color: #333;
}
.category-title {
color: #f0f6fc;
border-bottom-color: #333;
}
.package-card .pkg-stats {
color: #8b949e;
border-top-color: #333;
}
.package-card .pkg-version, code, .install-action {
background-color: #222;
color: #cdd;
border-color: #333;
}
a, .pkg-header h1, .back-link:hover {
color: #5af;
border-bottom-color: #333;
}
a:hover {
color: #7cf;
border-bottom-color: #7cf;
}
.pkg-header .version, .pkg-header .description, .back-link, .install-action .prompt, th {
color: #999;
}
th, td, .pkg-deps li, .pkg-dependents li {
border-bottom-color: #333;
}
}