github/hubproxy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化导航栏

Browse Source
This commit is contained in:
user123456
2025-06-12 15:15:14 +08:00
parent a5eca5d97b
commit 99a53087b1
2 changed files with 248 additions and 229 deletions
Download Patch File Download Diff File Expand all files Collapse all files

280
src/public/search.html
View File

@@ -11,49 +11,89 @@
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css" rel="stylesheet"> <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://font.sec.miui.com/font/css?family=MiSans:400,700:MiSans"> <link rel="stylesheet" href="https://font.sec.miui.com/font/css?family=MiSans:400,700:MiSans">
<style> <style>
/* 使用首页完全相同的颜色系统 */
:root { :root {
--color: #fafafa; --background: #ffffff;
--fontcolor: #333; --foreground: #0f172a;
--inputcolor: #f5f5f5; --card: #ffffff;
--inputcolor-font: #333; --card-foreground: #0f172a;
--card-bg: #f8f9fa; --primary: #2563eb;
--border-color: #dee2e6; --primary-foreground: #f8fafc;
/* 导航栏变量 */ --secondary: #f1f5f9;
--nav-background: #ffffff; --secondary-foreground: #0f172a;
--nav-foreground: #0f172a; --muted: #f1f5f9;
--nav-border: #e2e8f0; --muted-foreground: #64748b;
--nav-primary: #2563eb; --accent: #f1f5f9;
--nav-muted: #f1f5f9; --accent-foreground: #0f172a;
--nav-muted-foreground: #64748b; --border: #e2e8f0;
--nav-radius: 0.5rem; --input: #ffffff;
--ring: #2563eb;
--radius: 0.5rem;
}
.dark {
--background: #0f172a;
--foreground: #f8fafc;
--card: #1e293b;
--card-foreground: #f8fafc;
--primary: #3b82f6;
--primary-foreground: #f8fafc;
--secondary: #1e293b;
--secondary-foreground: #f8fafc;
--muted: #1e293b;
--muted-foreground: #94a3b8;
--accent: #1e293b;
--accent-foreground: #f8fafc;
--border: #334155;
--input: #1e293b;
--ring: #3b82f6;
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
:root { :root {
--color: #53535338; --background: #0f172a;
--fontcolor: #b8b8b8; --foreground: #f8fafc;
--inputcolor: #012333; --card: #1e293b;
--inputcolor-font: #969696d8; --card-foreground: #f8fafc;
--card-bg: #012333; --primary: #3b82f6;
--border-color: #2d3338; --primary-foreground: #f8fafc;
/* 暗色主题导航栏变量 */ --secondary: #1e293b;
--nav-background: #0f172a; --secondary-foreground: #f8fafc;
--nav-foreground: #f8fafc; --muted: #1e293b;
--nav-border: #334155; --muted-foreground: #94a3b8;
--nav-primary: #3b82f6; --accent: #1e293b;
--nav-muted: #1e293b; --accent-foreground: #f8fafc;
--nav-muted-foreground: #94a3b8; --border: #334155;
--input: #1e293b;
--ring: #3b82f6;
} }
} }
/* 导航栏样式 */ * {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: 'Misans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
background-color: var(--background);
color: var(--foreground);
line-height: 1.5;
min-height: 100vh;
display: flex;
flex-direction: column;
transition: background-color 0.3s, color 0.3s;
}
/* 导航栏样式 - 与首页完全一致 */
.navbar { .navbar {
position: sticky; position: sticky;
top: 0; top: 0;
z-index: 50; z-index: 50;
width: 100%; width: 100%;
border-bottom: 1px solid var(--nav-border); border-bottom: 1px solid var(--border);
background-color: var(--nav-background); background-color: var(--background);
backdrop-filter: blur(8px); backdrop-filter: blur(8px);
background-color: rgba(255, 255, 255, 0.95); background-color: rgba(255, 255, 255, 0.95);
} }
@@ -77,7 +117,7 @@
align-items: center; align-items: center;
gap: 0.5rem; gap: 0.5rem;
text-decoration: none; text-decoration: none;
color: var(--nav-foreground); color: var(--foreground);
font-weight: 600; font-weight: 600;
font-size: 1.125rem; font-size: 1.125rem;
} }
@@ -86,7 +126,7 @@
width: 2rem; width: 2rem;
height: 2rem; height: 2rem;
border-radius: 0.5rem; border-radius: 0.5rem;
background: linear-gradient(135deg, var(--nav-primary), #3b82f6); background: linear-gradient(135deg, var(--primary), #3b82f6);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@@ -101,72 +141,47 @@
.nav-link { .nav-link {
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
border-radius: var(--nav-radius); border-radius: var(--radius);
text-decoration: none; text-decoration: none;
color: var(--nav-muted-foreground); color: var(--muted-foreground);
transition: all 0.2s; transition: all 0.2s;
font-weight: 500; font-weight: 500;
} }
.nav-link:hover, .nav-link:hover,
.nav-link.active { .nav-link.active {
color: var(--nav-foreground); color: var(--foreground);
background-color: var(--nav-muted); background-color: var(--muted);
text-decoration: none;
} }
.theme-toggle { .theme-toggle {
padding: 0.5rem; padding: 0.5rem;
border: none; border: none;
border-radius: var(--nav-radius); border-radius: var(--radius);
background-color: transparent; background-color: transparent;
color: var(--nav-muted-foreground); color: var(--muted-foreground);
cursor: pointer; cursor: pointer;
transition: all 0.2s; transition: all 0.2s;
} }
.theme-toggle:hover { .theme-toggle:hover {
background-color: var(--nav-muted); background-color: var(--muted);
color: var(--nav-foreground); color: var(--foreground);
}
/* 暗色主题类 */
.dark {
--color: #53535338;
--fontcolor: #b8b8b8;
--inputcolor: #012333;
--inputcolor-font: #969696d8;
--card-bg: #012333;
--border-color: #2d3338;
--nav-background: #0f172a;
--nav-foreground: #f8fafc;
--nav-border: #334155;
--nav-primary: #3b82f6;
--nav-muted: #1e293b;
--nav-muted-foreground: #94a3b8;
}
body {
background-color: var(--color);
color: var(--fontcolor);
font-family: 'Misans', Arial, sans-serif;
padding: 0;
min-height: 100vh;
margin: 0;
} }
/* 主要内容区域 */
.main-content { .main-content {
padding: 30px; flex: 1;
padding: 2rem 1rem;
} }
.container { .container {
max-width: 1200px; max-width: 1200px;
padding: 20px; margin: 0 auto;
margin-top: 20px;
} }
h1 { h1 {
color: var(--fontcolor); color: var(--foreground);
font-weight: bold; font-weight: bold;
margin-bottom: 30px; margin-bottom: 30px;
text-align: center; text-align: center;
@@ -177,23 +192,27 @@
} }
.form-control { .form-control {
background-color: var(--inputcolor); background-color: var(--input);
color: var(--inputcolor-font); color: var(--foreground);
border: 1px solid var(--border);
border-radius: 20px; border-radius: 20px;
padding: 10px 20px; padding: 10px 20px;
height: 46px; height: 46px;
transition: all 0.2s;
} }
.form-control:focus { .form-control:focus {
background-color: var(--inputcolor); background-color: var(--input);
color: var(--inputcolor-font); color: var(--foreground);
border-color: var(--ring);
box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);
} }
.search-button { .search-button {
border-radius: 20px; border-radius: 20px;
padding: 10px 30px; padding: 10px 30px;
background-color: #39c5bc; background-color: var(--primary);
color: white; color: var(--primary-foreground);
border: none; border: none;
transition: all 0.3s ease; transition: all 0.3s ease;
height: 46px; height: 46px;
@@ -202,27 +221,17 @@
.search-button:hover { .search-button:hover {
transform: scale(1.05); transform: scale(1.05);
background-color: #2ea8a0; background-color: #1d4ed8;
}
.input-group {
display: flex;
align-items: center;
}
.input-group-append {
display: flex;
align-items: center;
} }
.result-card { .result-card {
background-color: var(--card-bg); background-color: var(--card);
border-radius: 10px; border-radius: 10px;
padding: 20px; padding: 20px;
margin-bottom: 20px; margin-bottom: 20px;
transition: all 0.3s ease; transition: all 0.3s ease;
cursor: pointer; cursor: pointer;
border: 1px solid var(--border-color); border: 1px solid var(--border);
} }
.result-card:hover { .result-card:hover {
@@ -234,7 +243,7 @@
font-size: 1.2rem; font-size: 1.2rem;
font-weight: 500; font-weight: 500;
margin-bottom: 10px; margin-bottom: 10px;
color: #0091e2; color: var(--primary);
display: flex; display: flex;
align-items: center; align-items: center;
gap: 10px; gap: 10px;
@@ -242,7 +251,7 @@
} }
.result-description { .result-description {
color: var(--fontcolor); color: var(--muted-foreground);
margin: 10px 0; margin: 10px 0;
font-size: 0.95rem; font-size: 0.95rem;
line-height: 1.5; line-height: 1.5;
@@ -254,8 +263,7 @@
justify-content: space-between; justify-content: space-between;
align-items: flex-start; align-items: flex-start;
font-size: 0.9rem; font-size: 0.9rem;
color: var(--fontcolor); color: var(--muted-foreground);
opacity: 0.8;
margin-top: 15px; margin-top: 15px;
flex-wrap: wrap; flex-wrap: wrap;
gap: 10px; gap: 10px;
@@ -271,13 +279,13 @@
.meta-pulls { .meta-pulls {
font-size: 0.85rem; font-size: 0.85rem;
color: #666; color: var(--muted-foreground);
text-align: right; text-align: right;
} }
.meta-pulls .pulls-count { .meta-pulls .pulls-count {
font-size: 1rem; font-size: 1rem;
color: #333; color: var(--foreground);
margin-top: 4px; margin-top: 4px;
} }
@@ -309,7 +317,7 @@
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
white-space: nowrap; white-space: nowrap;
color: #666; color: var(--muted-foreground);
} }
.meta-item .icon { .meta-item .icon {
@@ -347,8 +355,8 @@
.loading-spinner { .loading-spinner {
width: 40px; width: 40px;
height: 40px; height: 40px;
border: 4px solid #f3f3f3; border: 4px solid var(--muted);
border-top: 4px solid #39c5bc; border-top: 4px solid var(--primary);
border-radius: 50%; border-radius: 50%;
animation: spin 1s linear infinite; animation: spin 1s linear infinite;
margin: 0 auto; margin: 0 auto;
@@ -364,8 +372,8 @@
top: 10%; top: 10%;
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
background-color: #39c5bcde; background-color: var(--primary);
color: white; color: var(--primary-foreground);
padding: 15px 20px; padding: 15px 20px;
border-radius: 10px; border-radius: 10px;
font-size: 90%; font-size: 90%;
@@ -384,20 +392,21 @@
padding: 5px 15px; padding: 5px 15px;
border: none; border: none;
border-radius: 5px; border-radius: 5px;
background-color: #39c5bc; background-color: var(--primary);
color: white; color: var(--primary-foreground);
cursor: pointer; cursor: pointer;
transition: all 0.3s ease; transition: all 0.3s ease;
} }
.pagination button:disabled { .pagination button:disabled {
background-color: #cccccc; background-color: var(--muted);
color: var(--muted-foreground);
cursor: not-allowed; cursor: not-allowed;
} }
.pagination button:hover:not(:disabled) { .pagination button:hover:not(:disabled) {
transform: scale(1.05); transform: scale(1.05);
background-color: #2ea8a0; background-color: #1d4ed8;
} }
.tag-list { .tag-list {
@@ -411,9 +420,9 @@
align-items: flex-start; align-items: flex-start;
margin-bottom: 15px; margin-bottom: 15px;
padding: 20px; padding: 20px;
background-color: var(--card-bg); background-color: var(--card);
border-radius: 10px; border-radius: 10px;
border: 1px solid var(--border-color); border: 1px solid var(--border);
flex-direction: column; flex-direction: column;
} }
@@ -426,18 +435,18 @@
width: 100%; width: 100%;
margin: 15px 0 20px 0; margin: 15px 0 20px 0;
position: relative; position: relative;
background: var(--card-bg); background: var(--card);
padding: 15px; padding: 15px;
border-radius: 10px; border-radius: 10px;
border: 2px solid #39c5bc; border: 2px solid var(--primary);
box-shadow: 0 2px 8px rgba(57, 197, 188, 0.1); box-shadow: 0 2px 8px rgba(37, 99, 235, 0.1);
} }
.tag-search-container::before { .tag-search-container::before {
content: '🔍 标签搜索'; content: '🔍 标签搜索';
display: block; display: block;
margin-bottom: 10px; margin-bottom: 10px;
color: #39c5bc; color: var(--primary);
font-weight: bold; font-weight: bold;
font-size: 0.9rem; font-size: 0.9rem;
} }
@@ -446,17 +455,17 @@
width: 100%; width: 100%;
padding: 12px 40px 12px 15px; padding: 12px 40px 12px 15px;
border-radius: 8px; border-radius: 8px;
border: 1px solid var(--border-color); border: 1px solid var(--border);
background-color: var(--inputcolor); background-color: var(--input);
color: var(--inputcolor-font); color: var(--foreground);
font-size: 1rem; font-size: 1rem;
transition: all 0.3s ease; transition: all 0.3s ease;
} }
.tag-search-input:focus { .tag-search-input:focus {
outline: none; outline: none;
border-color: #39c5bc; border-color: var(--ring);
box-shadow: 0 0 0 3px rgba(57, 197, 188, 0.2); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
} }
.tag-search-input::placeholder { .tag-search-input::placeholder {
@@ -471,7 +480,7 @@
transform: translateY(-5%); transform: translateY(-5%);
background: none; background: none;
border: none; border: none;
color: var(--fontcolor); color: var(--foreground);
cursor: pointer; cursor: pointer;
padding: 8px; padding: 8px;
opacity: 0.6; opacity: 0.6;
@@ -487,19 +496,12 @@
.tag-search-clear:hover { .tag-search-clear:hover {
opacity: 1; opacity: 1;
background-color: rgba(57, 197, 188, 0.1); background-color: rgba(37, 99, 235, 0.1);
transform: translateY(-5%) scale(1.1); transform: translateY(-5%) scale(1.1);
} }
@media (prefers-color-scheme: dark) { .tag-search-input::placeholder {
.tag-search-container { color: var(--muted-foreground);
border-color: #39c5bc;
box-shadow: 0 2px 8px rgba(57, 197, 188, 0.2);
}
.tag-search-input::placeholder {
color: #666;
}
} }
.tag-title { .tag-title {
@@ -511,12 +513,12 @@
} }
.tag-description { .tag-description {
color: var(--fontcolor); color: var(--foreground);
opacity: 0.8; opacity: 0.8;
} }
.tag-pull-command { .tag-pull-command {
background-color: var(--inputcolor); background-color: var(--input);
padding: 10px 15px; padding: 10px 15px;
border-radius: 5px; border-radius: 5px;
font-family: monospace; font-family: monospace;
@@ -528,8 +530,8 @@
position: absolute; position: absolute;
right: 5px; right: 5px;
top: 5px; top: 5px;
background: #39c5bc; background: var(--primary);
color: white; color: var(--primary-foreground);
border: none; border: none;
padding: 2px 8px; padding: 2px 8px;
border-radius: 3px; border-radius: 3px;
@@ -538,8 +540,8 @@
} }
.tag-item { .tag-item {
background-color: var(--card-bg); background-color: var(--card);
border: 1px solid var(--border-color); border: 1px solid var(--border);
border-radius: 10px; border-radius: 10px;
padding: 15px; padding: 15px;
margin-bottom: 15px; margin-bottom: 15px;
@@ -549,12 +551,12 @@
font-size: 1.1rem; font-size: 1.1rem;
font-weight: bold; font-weight: bold;
margin-bottom: 10px; margin-bottom: 10px;
color: #39c5bc; color: var(--primary);
} }
.tag-meta { .tag-meta {
font-size: 0.9rem; font-size: 0.9rem;
color: var(--fontcolor); color: var(--foreground);
opacity: 0.8; opacity: 0.8;
margin-bottom: 10px; margin-bottom: 10px;
} }
@@ -567,7 +569,7 @@
} }
.arch-item { .arch-item {
background-color: var(--inputcolor); background-color: var(--input);
padding: 5px 10px; padding: 5px 10px;
border-radius: 5px; border-radius: 5px;
font-size: 0.8rem; font-size: 0.8rem;
@@ -598,7 +600,7 @@
.back-to-search { .back-to-search {
margin-bottom: 20px; margin-bottom: 20px;
color: #39c5bc; color: var(--primary);
cursor: pointer; cursor: pointer;
display: none; display: none;
} }
@@ -834,9 +836,9 @@
jumpInput.style.width = '60px'; jumpInput.style.width = '60px';
jumpInput.style.padding = '4px'; jumpInput.style.padding = '4px';
jumpInput.style.borderRadius = '4px'; jumpInput.style.borderRadius = '4px';
jumpInput.style.border = '1px solid var(--border-color)'; jumpInput.style.border = '1px solid var(--border)';
jumpInput.style.backgroundColor = 'var(--inputcolor)'; jumpInput.style.backgroundColor = 'var(--input)';
jumpInput.style.color = 'var(--inputcolor-font)'; jumpInput.style.color = 'var(--foreground)';
// 跳转按钮 // 跳转按钮
const jumpButton = document.createElement('button'); const jumpButton = document.createElement('button');

197
src/public/skopeo.html
View File

@@ -11,49 +11,89 @@
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css" rel="stylesheet"> <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://font.sec.miui.com/font/css?family=MiSans:400,700:MiSans"> <link rel="stylesheet" href="https://font.sec.miui.com/font/css?family=MiSans:400,700:MiSans">
<style> <style>
/* 使用首页完全相同的颜色系统 */
:root { :root {
--color: #fafafa; --background: #ffffff;
--fontcolor: #333; --foreground: #0f172a;
--inputcolor: #f5f5f5; --card: #ffffff;
--inputcolor-font: #333; --card-foreground: #0f172a;
--card-bg: #f8f9fa; --primary: #2563eb;
--border-color: #dee2e6; --primary-foreground: #f8fafc;
/* 导航栏变量 */ --secondary: #f1f5f9;
--nav-background: #ffffff; --secondary-foreground: #0f172a;
--nav-foreground: #0f172a; --muted: #f1f5f9;
--nav-border: #e2e8f0; --muted-foreground: #64748b;
--nav-primary: #2563eb; --accent: #f1f5f9;
--nav-muted: #f1f5f9; --accent-foreground: #0f172a;
--nav-muted-foreground: #64748b; --border: #e2e8f0;
--nav-radius: 0.5rem; --input: #ffffff;
--ring: #2563eb;
--radius: 0.5rem;
}
.dark {
--background: #0f172a;
--foreground: #f8fafc;
--card: #1e293b;
--card-foreground: #f8fafc;
--primary: #3b82f6;
--primary-foreground: #f8fafc;
--secondary: #1e293b;
--secondary-foreground: #f8fafc;
--muted: #1e293b;
--muted-foreground: #94a3b8;
--accent: #1e293b;
--accent-foreground: #f8fafc;
--border: #334155;
--input: #1e293b;
--ring: #3b82f6;
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
:root { :root {
--color: #53535338; --background: #0f172a;
--fontcolor: #b8b8b8; --foreground: #f8fafc;
--inputcolor: #012333; --card: #1e293b;
--inputcolor-font: #969696d8; --card-foreground: #f8fafc;
--card-bg: #012333; --primary: #3b82f6;
--border-color: #2d3338; --primary-foreground: #f8fafc;
/* 暗色主题导航栏变量 */ --secondary: #1e293b;
--nav-background: #0f172a; --secondary-foreground: #f8fafc;
--nav-foreground: #f8fafc; --muted: #1e293b;
--nav-border: #334155; --muted-foreground: #94a3b8;
--nav-primary: #3b82f6; --accent: #1e293b;
--nav-muted: #1e293b; --accent-foreground: #f8fafc;
--nav-muted-foreground: #94a3b8; --border: #334155;
--input: #1e293b;
--ring: #3b82f6;
} }
} }
/* 导航栏样式 */ * {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: 'Misans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
background-color: var(--background);
color: var(--foreground);
line-height: 1.5;
min-height: 100vh;
display: flex;
flex-direction: column;
transition: background-color 0.3s, color 0.3s;
}
/* 导航栏样式 - 与首页完全一致 */
.navbar { .navbar {
position: sticky; position: sticky;
top: 0; top: 0;
z-index: 50; z-index: 50;
width: 100%; width: 100%;
border-bottom: 1px solid var(--nav-border); border-bottom: 1px solid var(--border);
background-color: var(--nav-background); background-color: var(--background);
backdrop-filter: blur(8px); backdrop-filter: blur(8px);
background-color: rgba(255, 255, 255, 0.95); background-color: rgba(255, 255, 255, 0.95);
} }
@@ -77,7 +117,7 @@
align-items: center; align-items: center;
gap: 0.5rem; gap: 0.5rem;
text-decoration: none; text-decoration: none;
color: var(--nav-foreground); color: var(--foreground);
font-weight: 600; font-weight: 600;
font-size: 1.125rem; font-size: 1.125rem;
} }
@@ -86,7 +126,7 @@
width: 2rem; width: 2rem;
height: 2rem; height: 2rem;
border-radius: 0.5rem; border-radius: 0.5rem;
background: linear-gradient(135deg, var(--nav-primary), #3b82f6); background: linear-gradient(135deg, var(--primary), #3b82f6);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@@ -101,61 +141,37 @@
.nav-link { .nav-link {
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
border-radius: var(--nav-radius); border-radius: var(--radius);
text-decoration: none; text-decoration: none;
color: var(--nav-muted-foreground); color: var(--muted-foreground);
transition: all 0.2s; transition: all 0.2s;
font-weight: 500; font-weight: 500;
} }
.nav-link:hover, .nav-link:hover,
.nav-link.active { .nav-link.active {
color: var(--nav-foreground); color: var(--foreground);
background-color: var(--nav-muted); background-color: var(--muted);
text-decoration: none;
} }
.theme-toggle { .theme-toggle {
padding: 0.5rem; padding: 0.5rem;
border: none; border: none;
border-radius: var(--nav-radius); border-radius: var(--radius);
background-color: transparent; background-color: transparent;
color: var(--nav-muted-foreground); color: var(--muted-foreground);
cursor: pointer; cursor: pointer;
transition: all 0.2s; transition: all 0.2s;
} }
.theme-toggle:hover { .theme-toggle:hover {
background-color: var(--nav-muted); background-color: var(--muted);
color: var(--nav-foreground); color: var(--foreground);
}
/* 暗色主题类 */
.dark {
--color: #53535338;
--fontcolor: #b8b8b8;
--inputcolor: #012333;
--inputcolor-font: #969696d8;
--card-bg: #012333;
--border-color: #2d3338;
--nav-background: #0f172a;
--nav-foreground: #f8fafc;
--nav-border: #334155;
--nav-primary: #3b82f6;
--nav-muted: #1e293b;
--nav-muted-foreground: #94a3b8;
}
body {
background-color: var(--color);
color: var(--fontcolor);
font-family: 'Misans', Arial, sans-serif;
padding: 0;
min-height: 100vh;
margin: 0;
} }
/* 主要内容区域 */
.main-content { .main-content {
flex: 1;
padding: 30px; padding: 30px;
} }
@@ -182,7 +198,7 @@
} }
h1 { h1 {
color: var(--fontcolor); color: var(--foreground);
font-weight: bold; font-weight: bold;
margin-bottom: 30px; margin-bottom: 30px;
} }
@@ -191,14 +207,14 @@
border-radius: 6px; border-radius: 6px;
transition: background-color 0.3s, transform 0.2s; transition: background-color 0.3s, transform 0.2s;
padding: 10px 30px; padding: 10px 30px;
background-color: #555c5c; background-color: var(--primary);
color: rgb(255, 255, 255); color: var(--primary-foreground);
border: none; border: none;
margin-bottom: 3%; margin-bottom: 3%;
} }
.rounded-button:hover { .rounded-button:hover {
background-color: #39c5bcda; background-color: #1d4ed8;
transform: scale(1.05); transform: scale(1.05);
} }
@@ -214,13 +230,14 @@
} }
pre { pre {
background: #012333; background: var(--muted);
color: #39c5bc; color: var(--primary);
padding: 15px 20px 15px 20px; padding: 15px 20px 15px 20px;
margin: 0px 0; margin: 0px 0;
border-radius: 0.5rem; border-radius: 0.5rem;
overflow-x: auto; overflow-x: auto;
position: relative; position: relative;
border: 1px solid var(--border);
} }
pre::before { pre::before {
@@ -231,9 +248,9 @@
left: 6px; left: 6px;
width: 10px; width: 10px;
height: 10px; height: 10px;
background: #bd3c35; background: #dc3545;
border-radius: 50%; border-radius: 50%;
box-shadow: 20px 0 0 #d69f27, 40px 0 0 #39c5bb; box-shadow: 20px 0 0 #ffc107, 40px 0 0 #28a745;
} }
code { code {
@@ -269,13 +286,13 @@
} }
.form-control { .form-control {
background-color: var(--inputcolor); background-color: var(--input);
color: var(--inputcolor-font); color: var(--foreground);
} }
.form-control:focus { .form-control:focus {
background-color: var(--inputcolor); background-color: var(--input);
color: var(--inputcolor-font); color: var(--foreground);
} }
#toast { #toast {
@@ -283,8 +300,8 @@
top: 10%; top: 10%;
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
background-color: #39c5bcde; background-color: var(--primary);
color: white; color: var(--primary-foreground);
padding: 15px 20px; padding: 15px 20px;
border-radius: 10px; border-radius: 10px;
font-size: 90%; font-size: 90%;
@@ -296,9 +313,9 @@
top: 20px; top: 20px;
left: 20px; left: 20px;
padding: 2px 8px; padding: 2px 8px;
background-color: #f5f5f5; background-color: var(--muted);
border: 0px solid #fafafa; border: 1px solid var(--border);
color: #333; color: var(--foreground);
border-radius: 10px; border-radius: 10px;
cursor: pointer; cursor: pointer;
transition: all 0.3s ease; transition: all 0.3s ease;
@@ -307,8 +324,8 @@
} }
.back-button:hover { .back-button:hover {
background-color: #39c5bc; background-color: var(--primary);
color: white; color: var(--primary-foreground);
transform: scale(1.05); transform: scale(1.05);
text-decoration: none; text-decoration: none;
} }
@@ -323,7 +340,7 @@
font-weight: bold; font-weight: bold;
margin-bottom: 20px; margin-bottom: 20px;
padding: 10px; padding: 10px;
background-color: var(--inputcolor); background-color: var(--input);
border-radius: 10px; border-radius: 10px;
display: inline-block; display: inline-block;
} }
@@ -371,8 +388,8 @@
display: none; display: none;
margin-top: 20px; margin-top: 20px;
padding: 10px 20px; padding: 10px 20px;
background-color: #39c5bb; background-color: var(--primary);
color: white; color: var(--primary-foreground);
border: none; border: none;
border-radius: 8px; border-radius: 8px;
cursor: pointer; cursor: pointer;
@@ -381,7 +398,7 @@
} }
.download-button:hover { .download-button:hover {
background-color: #2ea89e; background-color: #1d4ed8;
transform: scale(1.05); transform: scale(1.05);
} }
@@ -392,7 +409,7 @@
.info-text { .info-text {
font-size: 0.9rem; font-size: 0.9rem;
color: var(--fontcolor); color: var(--foreground);
opacity: 0.8; opacity: 0.8;
margin-bottom: 15px; margin-bottom: 15px;
text-align: left; text-align: left;