devin15/cursor2api-rust

1:root {2  /* 基础颜色变量 */3  --primary-color: #2196F3;4  --primary-dark: #1976D2;5  --primary-color-alpha: rgba(33, 150, 243, 0.1);6  --success-color: #4CAF50;7  --error-color: #F44336;8  --background-color: #F5F5F5;9  --card-background: #FFFFFF;10  --text-primary: #333333;11  --text-secondary: #757575;12  --border-color: #e0e0e0;13  --disabled-bg: #f5f5f5;14 15  /* 布局变量 */16  --border-radius: 8px;17  --spacing: 20px;18 19  /* 动画变量 */20  --transition-fast: 0.2s;21  --transition-slow: 0.3s;22}23 24/* 暗色模式 */25@media (prefers-color-scheme: dark) {26  :root {27    --primary-color: #90CAF9;28    --primary-dark: #64B5F6;29    --background-color: #121212;30    --card-background: #1e1e1e;31    --text-primary: #e0e0e0;32    --text-secondary: #9e9e9e;33    --border-color: #404040;34    --disabled-bg: #2d2d2d;35    color-scheme: dark;36  }37}38 39/* 基础样式 */40html {41  scroll-behavior: smooth;42  box-sizing: border-box;43}44 45*,46*:before,47*:after {48  box-sizing: inherit;49}50 51body {52  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;53  max-width: 1200px;54  margin: 0 auto;55  padding: var(--spacing);56  background: var(--background-color);57  color: var(--text-primary);58  line-height: 1.6;59}60 61/* 容器样式 */62.container {63  background: var(--card-background);64  padding: var(--spacing);65  border-radius: var(--border-radius);66  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);67  margin-bottom: var(--spacing);68  transition: transform var(--transition-fast);69}70 71.container:hover {72  transform: translateY(-2px);73}74 75/* 标题样式 */76h1,77h2,78h3 {79  color: var(--text-primary);80  margin-top: 0;81  line-height: 1.2;82}83 84/* 表单元素样式 */85.form-group {86  margin-bottom: 20px;87}88 89/* 标签样式 */90label {91  display: block;92  margin-bottom: 8px;93  font-weight: 500;94  color: var(--text-primary);95}96 97input,98select,99textarea,100.form-control {101  width: 100%;102  padding: 10px 12px;103  border: 1px solid var(--border-color);104  border-radius: 4px;105  background: var(--card-background);106  color: var(--text-primary);107  font-size: 14px;108  line-height: 1.5;109  transition: all var(--transition-fast);110  appearance: none;111}112 113input[type="checkbox"] {114  width: auto;115  margin-right: 8px;116  cursor: pointer;117  appearance: auto;118}119 120input[type="checkbox"] + label {121  cursor: pointer;122  color: var(--text-primary);123  user-select: none;124}125 126input:hover,127select:hover,128textarea:hover,129.form-control:hover {130  border-color: var(--primary-color);131}132 133input:focus,134select:focus,135textarea:focus,136.form-control:focus {137  border-color: var(--primary-color);138  box-shadow: 0 0 0 2px var(--primary-color-alpha);139  outline: none;140}141 142/* 禁用状态 */143input:disabled,144select:disabled,145textarea:disabled,146.form-control:disabled {147  background-color: var(--disabled-bg);148  border-color: var(--border-color);149  cursor: not-allowed;150  opacity: 0.7;151}152 153/* 错误状态 */154input.error,155select.error,156textarea.error,157.form-control.error {158  border-color: var(--error-color);159}160 161/* Select 特殊样式 */162select {163  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23757575'%3E%3Cpath d='M7 10l5 5 5-5H7z'/%3E%3C/svg%3E");164  background-repeat: no-repeat;165  background-position: right 8px center;166  background-size: 20px;167  padding-right: 36px;168}169 170/* Textarea 特殊样式 */171textarea {172  min-height: 150px;173  resize: vertical;174  font-family: monospace;175  line-height: 1.4;176}177 178/* 按钮基础样式 */179button {180  display: inline-flex;181  align-items: center;182  justify-content: center;183  min-height: 44px;184  padding: 8px 24px;185  border: none;186  border-radius: var(--border-radius);187  background: var(--primary-color);188  color: white;189  font-size: 16px;190  font-weight: 500;191  text-align: center;192  text-decoration: none;193  cursor: pointer;194  transition: all var(--transition-fast);195  user-select: none;196  -webkit-tap-highlight-color: transparent;197}198 199/* 按钮状态 */200button:hover {201  background: var(--primary-dark);202  transform: translateY(-1px);203  box-shadow: 0 4px 12px var(--primary-color-alpha);204}205 206button:active {207  transform: translateY(1px);208}209 210button:disabled {211  background: var(--disabled-bg);212  color: var(--text-secondary);213  cursor: not-allowed;214  transform: none;215  box-shadow: none;216}217 218/* 次要按钮样式 */219button.secondary {220  background: var(--text-secondary);221}222 223/* 按钮组 */224.button-group {225  display: flex;226  gap: 10px;227  margin: var(--spacing) 0;228}229 230/* 消息提示 */231.message {232  padding: 12px;233  border-radius: var(--border-radius);234  margin: 10px 0;235  border: 1px solid transparent;236}237 238.success {239  background: var(--success-color);240  color: #fff;241}242 243.error {244  background: var(--error-color);245  color: #fff;246}247 248/* 表格样式 */249table {250  width: 100%;251  border-collapse: collapse;252  margin-top: var(--spacing);253  background: var(--card-background);254  border-radius: var(--border-radius);255  overflow: hidden;256}257 258th,259td {260  padding: 12px;261  text-align: left;262  border-bottom: 1px solid var(--text-secondary);263}264 265th {266  background: var(--primary-color);267  color: white;268  font-weight: 500;269}270 271tr:nth-child(even) {272  background: rgba(0, 0, 0, 0.02);273}274 275tr:hover {276  background: rgba(0, 0, 0, 0.04);277}278 279/* 辅助类 */280.visually-hidden {281  position: absolute;282  width: 1px;283  height: 1px;284  padding: 0;285  margin: -1px;286  overflow: hidden;287  clip: rect(0, 0, 0, 0);288  border: 0;289}290 291.text-center {292  text-align: center;293}294 295.help-text {296  margin-top: 4px;297  font-size: 14px;298  color: var(--text-secondary);299}300 301.error-text {302  color: var(--error-color);303}304 305.mt-0 {306  margin-top: 0;307}308 309.mb-0 {310  margin-bottom: 0;311}312 313/* 响应式设计 */314@media (max-width: 768px) {315  :root {316    --spacing: 16px;317  }318 319  body {320    padding: 10px;321  }322 323  .button-group {324    flex-direction: column;325  }326 327  button {328    width: 100%;329    padding: 12px 20px;330  }331 332  input,333  select,334  textarea,335  .form-control {336    font-size: 16px;337    padding: 14px 16px;338  }339 340  table {341    display: block;342    overflow-x: auto;343    -webkit-overflow-scrolling: touch;344  }345 346  th,347  td {348    white-space: nowrap;349  }350}