misonL commited on
Commit
1ea9345
·
1 Parent(s): 1a0d4d9

feat: Style available tokens table

Browse files

Add comprehensive CSS rules for the `#available-tokens-table` to improve readability and presentation. Includes borders, padding, alternating row colors, and hover effects.

Also, add a version parameter to the stylesheet link in `index.html` to prevent browser caching issues and ensure the new styles are loaded.

Files changed (2) hide show
  1. static/style.css +27 -0
  2. templates/index.html +1 -1
static/style.css CHANGED
@@ -62,4 +62,31 @@ h1 {
62
  font-family: monospace;
63
  max-height: 300px; /* 限制高度并添加滚动条 */
64
  overflow-y: auto;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
65
  }
 
62
  font-family: monospace;
63
  max-height: 300px; /* 限制高度并添加滚动条 */
64
  overflow-y: auto;
65
+ }
66
+
67
+ /* 表格样式 */
68
+ #available-tokens-table {
69
+ width: 100%;
70
+ border-collapse: collapse; /* 合并边框 */
71
+ margin-top: 10px;
72
+ }
73
+
74
+ #available-tokens-table th,
75
+ #available-tokens-table td {
76
+ border: 1px solid #ddd; /* 添加边框 */
77
+ padding: 8px; /* 增加内边距 */
78
+ text-align: left; /* 左对齐文本 */
79
+ }
80
+
81
+ #available-tokens-table th {
82
+ background-color: #f2f2f2; /* 表头背景色 */
83
+ font-weight: bold;
84
+ }
85
+
86
+ #available-tokens-table tbody tr:nth-child(even) {
87
+ background-color: #f9f9f9; /* 交替行背景色 */
88
+ }
89
+
90
+ #available-tokens-table tbody tr:hover {
91
+ background-color: #e9e9e9; /* 鼠标悬停背景色 */
92
  }
templates/index.html CHANGED
@@ -4,7 +4,7 @@
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>Grok API System Status</title>
7
- <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
8
  </head>
9
  <body>
10
  <div class="container">
 
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>Grok API System Status</title>
7
+ <link rel="stylesheet" href="{{ url_for('static', filename='style.css', v='1.1') }}"> {# 添加版本参数防止缓存 #}
8
  </head>
9
  <body>
10
  <div class="container">