modified
dev.team/workspace/templates/style.css +250 -0 | @@ -193,3 +193,253 @@ main { | ||
| 193 | 193 | padding: 5px 11px; |
| 194 | 194 | font-size: 13px; |
| 195 | 195 | } |
| 196 | + | |
| 197 | +/* ---------- Alerts ---------- */ | |
| 198 | +.alert { | |
| 199 | + padding: 12px 16px; | |
| 200 | + border-radius: var(--radius-sm); | |
| 201 | + margin-bottom: 20px; | |
| 202 | + font-size: 14px; | |
| 203 | + font-weight: 500; | |
| 204 | + display: flex; | |
| 205 | + align-items: center; | |
| 206 | + gap: 10px; | |
| 207 | +} | |
| 208 | + | |
| 209 | +.alert::before { | |
| 210 | + content: "!"; | |
| 211 | + flex: 0 0 auto; | |
| 212 | + width: 20px; | |
| 213 | + height: 20px; | |
| 214 | + border-radius: 50%; | |
| 215 | + display: inline-flex; | |
| 216 | + align-items: center; | |
| 217 | + justify-content: center; | |
| 218 | + font-size: 12px; | |
| 219 | + font-weight: 700; | |
| 220 | +} | |
| 221 | + | |
| 222 | +.alert-error { | |
| 223 | + background: #fef2f2; | |
| 224 | + color: #991b1b; | |
| 225 | + border: 1px solid #fecaca; | |
| 226 | +} | |
| 227 | + | |
| 228 | +.alert-error::before { | |
| 229 | + background: #dc2626; | |
| 230 | + color: #fff; | |
| 231 | +} | |
| 232 | + | |
| 233 | +/* ---------- Issues table ---------- */ | |
| 234 | +.issues-table { | |
| 235 | + width: 100%; | |
| 236 | + border-collapse: separate; | |
| 237 | + border-spacing: 0; | |
| 238 | + background: var(--color-surface); | |
| 239 | + border: 1px solid var(--color-border); | |
| 240 | + border-radius: var(--radius-md); | |
| 241 | + overflow: hidden; | |
| 242 | + box-shadow: var(--shadow-sm); | |
| 243 | +} | |
| 244 | + | |
| 245 | +.issues-table th, | |
| 246 | +.issues-table td { | |
| 247 | + padding: 14px 18px; | |
| 248 | + text-align: left; | |
| 249 | + border-bottom: 1px solid var(--color-border); | |
| 250 | + vertical-align: middle; | |
| 251 | +} | |
| 252 | + | |
| 253 | +.issues-table thead th { | |
| 254 | + background: #f8fafc; | |
| 255 | + font-size: 12px; | |
| 256 | + font-weight: 700; | |
| 257 | + text-transform: uppercase; | |
| 258 | + letter-spacing: 0.05em; | |
| 259 | + color: var(--color-text-muted); | |
| 260 | + white-space: nowrap; | |
| 261 | +} | |
| 262 | + | |
| 263 | +.issues-table tbody tr { | |
| 264 | + transition: background-color 0.12s ease; | |
| 265 | +} | |
| 266 | + | |
| 267 | +.issues-table tbody tr:hover { | |
| 268 | + background: var(--color-primary-soft); | |
| 269 | +} | |
| 270 | + | |
| 271 | +.issues-table tbody tr:last-child td { | |
| 272 | + border-bottom: none; | |
| 273 | +} | |
| 274 | + | |
| 275 | +.issues-table td:first-child { | |
| 276 | + font-family: var(--font-mono); | |
| 277 | + font-size: 13px; | |
| 278 | + color: var(--color-text-muted); | |
| 279 | +} | |
| 280 | + | |
| 281 | +.issues-table a { | |
| 282 | + color: var(--color-text); | |
| 283 | + font-weight: 600; | |
| 284 | +} | |
| 285 | + | |
| 286 | +.issues-table a:hover { | |
| 287 | + color: var(--color-primary); | |
| 288 | + text-decoration: none; | |
| 289 | +} | |
| 290 | + | |
| 291 | +.row-actions { | |
| 292 | + display: flex; | |
| 293 | + gap: 8px; | |
| 294 | + align-items: center; | |
| 295 | + justify-content: flex-end; | |
| 296 | +} | |
| 297 | + | |
| 298 | +/* ---------- Badges ---------- */ | |
| 299 | +.badge { | |
| 300 | + display: inline-block; | |
| 301 | + padding: 3px 11px; | |
| 302 | + border-radius: 999px; | |
| 303 | + font-size: 12px; | |
| 304 | + font-weight: 600; | |
| 305 | + line-height: 1.4; | |
| 306 | + text-transform: capitalize; | |
| 307 | + letter-spacing: 0.01em; | |
| 308 | + white-space: nowrap; | |
| 309 | +} | |
| 310 | + | |
| 311 | +.badge-open { background: #dbeafe; color: #1e40af; } | |
| 312 | +.badge-in_progress { background: #fef3c7; color: #92400e; } | |
| 313 | +.badge-done { background: #d1fae5; color: #065f46; } | |
| 314 | +.badge-closed { background: #e5e7eb; color: #374151; } | |
| 315 | + | |
| 316 | +.badge-low { background: #e0f2fe; color: #075985; } | |
| 317 | +.badge-medium { background: #fef3c7; color: #92400e; } | |
| 318 | +.badge-high { background: #ffedd5; color: #9a3412; } | |
| 319 | +.badge-critical { background: #fee2e2; color: #991b1b; } | |
| 320 | + | |
| 321 | +/* ---------- Forms ---------- */ | |
| 322 | +.issue-form { | |
| 323 | + background: var(--color-surface); | |
| 324 | + padding: 28px; | |
| 325 | + border: 1px solid var(--color-border); | |
| 326 | + border-radius: var(--radius-lg); | |
| 327 | + box-shadow: var(--shadow-sm); | |
| 328 | +} | |
| 329 | + | |
| 330 | +.form-group { margin-bottom: 20px; } | |
| 331 | + | |
| 332 | +.form-group label { | |
| 333 | + display: block; | |
| 334 | + margin-bottom: 7px; | |
| 335 | + font-weight: 600; | |
| 336 | + font-size: 14px; | |
| 337 | + color: var(--color-text); | |
| 338 | +} | |
| 339 | + | |
| 340 | +.form-group input, | |
| 341 | +.form-group textarea, | |
| 342 | +.form-group select { | |
| 343 | + width: 100%; | |
| 344 | + padding: 10px 13px; | |
| 345 | + border: 1px solid var(--color-border-strong); | |
| 346 | + border-radius: var(--radius-sm); | |
| 347 | + font-size: 14px; | |
| 348 | + font-family: inherit; | |
| 349 | + color: var(--color-text); | |
| 350 | + background: var(--color-surface); | |
| 351 | + transition: border-color 0.15s ease, box-shadow 0.15s ease; | |
| 352 | +} | |
| 353 | + | |
| 354 | +.form-group textarea { | |
| 355 | + resize: vertical; | |
| 356 | + min-height: 120px; | |
| 357 | + line-height: 1.5; | |
| 358 | +} | |
| 359 | + | |
| 360 | +.form-group input::placeholder, | |
| 361 | +.form-group textarea::placeholder { | |
| 362 | + color: var(--color-text-subtle); | |
| 363 | +} | |
| 364 | + | |
| 365 | +.form-group input:focus, | |
| 366 | +.form-group textarea:focus, | |
| 367 | +.form-group select:focus { | |
| 368 | + outline: none; | |
| 369 | + border-color: var(--color-primary); | |
| 370 | + box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15); | |
| 371 | +} | |
| 372 | + | |
| 373 | +.form-row { display: flex; gap: 20px; } | |
| 374 | +.form-row .form-group { flex: 1; } | |
| 375 | + | |
| 376 | +.actions { display: flex; gap: 12px; margin-top: 24px; } | |
| 377 | + | |
| 378 | +/* ---------- Issue detail ---------- */ | |
| 379 | +.issue-detail { | |
| 380 | + background: var(--color-surface); | |
| 381 | + padding: 28px; | |
| 382 | + border: 1px solid var(--color-border); | |
| 383 | + border-radius: var(--radius-lg); | |
| 384 | + box-shadow: var(--shadow-sm); | |
| 385 | +} | |
| 386 | + | |
| 387 | +.issue-detail h2 { | |
| 388 | + font-size: 22px; | |
| 389 | + margin-bottom: 16px; | |
| 390 | +} | |
| 391 | + | |
| 392 | +.issue-detail .description { | |
| 393 | + white-space: pre-wrap; | |
| 394 | + color: var(--color-text-muted); | |
| 395 | + font-size: 15px; | |
| 396 | + line-height: 1.7; | |
| 397 | + margin: 0 0 8px; | |
| 398 | +} | |
| 399 | + | |
| 400 | +.meta { | |
| 401 | + width: 100%; | |
| 402 | + border-collapse: collapse; | |
| 403 | + margin: 20px 0; | |
| 404 | +} | |
| 405 | + | |
| 406 | +.meta td { | |
| 407 | + padding: 10px 12px; | |
| 408 | + border-bottom: 1px solid var(--color-border); | |
| 409 | + font-size: 14px; | |
| 410 | +} | |
| 411 | + | |
| 412 | +.meta td:first-child { | |
| 413 | + font-weight: 600; | |
| 414 | + width: 130px; | |
| 415 | + color: var(--color-text-muted); | |
| 416 | +} | |
| 417 | + | |
| 418 | +/* ---------- Empty state ---------- */ | |
| 419 | +.empty { | |
| 420 | + color: var(--color-text-muted); | |
| 421 | + font-size: 15px; | |
| 422 | + text-align: center; | |
| 423 | + padding: 48px 24px; | |
| 424 | + background: var(--color-surface); | |
| 425 | + border: 1px dashed var(--color-border-strong); | |
| 426 | + border-radius: var(--radius-lg); | |
| 427 | +} | |
| 428 | + | |
| 429 | +/* ---------- Responsive ---------- */ | |
| 430 | +@media (max-width: 640px) { | |
| 431 | + main { padding: 20px 16px 48px; } | |
| 432 | + | |
| 433 | + .page-header { flex-direction: column; align-items: flex-start; gap: 12px; } | |
| 434 | + .page-header h1 { font-size: 24px; } | |
| 435 | + | |
| 436 | + .form-row { flex-direction: column; gap: 0; } | |
| 437 | + | |
| 438 | + .issue-form, | |
| 439 | + .issue-detail { padding: 20px; } | |
| 440 | + | |
| 441 | + .issues-table th, | |
| 442 | + .issues-table td { padding: 12px 12px; } | |
| 443 | + | |
| 444 | + .row-actions { flex-wrap: wrap; justify-content: flex-start; } | |
| 445 | +} | |
| @@ -193,3 +193,253 @@ main { | |||
| 193 | padding: 5px 11px; | 193 | padding: 5px 11px; |
| 194 | font-size: 13px; | 194 | font-size: 13px; |
| 195 | } | 195 | } |
| 196 | + | ||
| 197 | +/* ---------- Alerts ---------- */ | ||
| 198 | +.alert { | ||
| 199 | + padding: 12px 16px; | ||
| 200 | + border-radius: var(--radius-sm); | ||
| 201 | + margin-bottom: 20px; | ||
| 202 | + font-size: 14px; | ||
| 203 | + font-weight: 500; | ||
| 204 | + display: flex; | ||
| 205 | + align-items: center; | ||
| 206 | + gap: 10px; | ||
| 207 | +} | ||
| 208 | + | ||
| 209 | +.alert::before { | ||
| 210 | + content: "!"; | ||
| 211 | + flex: 0 0 auto; | ||
| 212 | + width: 20px; | ||
| 213 | + height: 20px; | ||
| 214 | + border-radius: 50%; | ||
| 215 | + display: inline-flex; | ||
| 216 | + align-items: center; | ||
| 217 | + justify-content: center; | ||
| 218 | + font-size: 12px; | ||
| 219 | + font-weight: 700; | ||
| 220 | +} | ||
| 221 | + | ||
| 222 | +.alert-error { | ||
| 223 | + background: #fef2f2; | ||
| 224 | + color: #991b1b; | ||
| 225 | + border: 1px solid #fecaca; | ||
| 226 | +} | ||
| 227 | + | ||
| 228 | +.alert-error::before { | ||
| 229 | + background: #dc2626; | ||
| 230 | + color: #fff; | ||
| 231 | +} | ||
| 232 | + | ||
| 233 | +/* ---------- Issues table ---------- */ | ||
| 234 | +.issues-table { | ||
| 235 | + width: 100%; | ||
| 236 | + border-collapse: separate; | ||
| 237 | + border-spacing: 0; | ||
| 238 | + background: var(--color-surface); | ||
| 239 | + border: 1px solid var(--color-border); | ||
| 240 | + border-radius: var(--radius-md); | ||
| 241 | + overflow: hidden; | ||
| 242 | + box-shadow: var(--shadow-sm); | ||
| 243 | +} | ||
| 244 | + | ||
| 245 | +.issues-table th, | ||
| 246 | +.issues-table td { | ||
| 247 | + padding: 14px 18px; | ||
| 248 | + text-align: left; | ||
| 249 | + border-bottom: 1px solid var(--color-border); | ||
| 250 | + vertical-align: middle; | ||
| 251 | +} | ||
| 252 | + | ||
| 253 | +.issues-table thead th { | ||
| 254 | + background: #f8fafc; | ||
| 255 | + font-size: 12px; | ||
| 256 | + font-weight: 700; | ||
| 257 | + text-transform: uppercase; | ||
| 258 | + letter-spacing: 0.05em; | ||
| 259 | + color: var(--color-text-muted); | ||
| 260 | + white-space: nowrap; | ||
| 261 | +} | ||
| 262 | + | ||
| 263 | +.issues-table tbody tr { | ||
| 264 | + transition: background-color 0.12s ease; | ||
| 265 | +} | ||
| 266 | + | ||
| 267 | +.issues-table tbody tr:hover { | ||
| 268 | + background: var(--color-primary-soft); | ||
| 269 | +} | ||
| 270 | + | ||
| 271 | +.issues-table tbody tr:last-child td { | ||
| 272 | + border-bottom: none; | ||
| 273 | +} | ||
| 274 | + | ||
| 275 | +.issues-table td:first-child { | ||
| 276 | + font-family: var(--font-mono); | ||
| 277 | + font-size: 13px; | ||
| 278 | + color: var(--color-text-muted); | ||
| 279 | +} | ||
| 280 | + | ||
| 281 | +.issues-table a { | ||
| 282 | + color: var(--color-text); | ||
| 283 | + font-weight: 600; | ||
| 284 | +} | ||
| 285 | + | ||
| 286 | +.issues-table a:hover { | ||
| 287 | + color: var(--color-primary); | ||
| 288 | + text-decoration: none; | ||
| 289 | +} | ||
| 290 | + | ||
| 291 | +.row-actions { | ||
| 292 | + display: flex; | ||
| 293 | + gap: 8px; | ||
| 294 | + align-items: center; | ||
| 295 | + justify-content: flex-end; | ||
| 296 | +} | ||
| 297 | + | ||
| 298 | +/* ---------- Badges ---------- */ | ||
| 299 | +.badge { | ||
| 300 | + display: inline-block; | ||
| 301 | + padding: 3px 11px; | ||
| 302 | + border-radius: 999px; | ||
| 303 | + font-size: 12px; | ||
| 304 | + font-weight: 600; | ||
| 305 | + line-height: 1.4; | ||
| 306 | + text-transform: capitalize; | ||
| 307 | + letter-spacing: 0.01em; | ||
| 308 | + white-space: nowrap; | ||
| 309 | +} | ||
| 310 | + | ||
| 311 | +.badge-open { background: #dbeafe; color: #1e40af; } | ||
| 312 | +.badge-in_progress { background: #fef3c7; color: #92400e; } | ||
| 313 | +.badge-done { background: #d1fae5; color: #065f46; } | ||
| 314 | +.badge-closed { background: #e5e7eb; color: #374151; } | ||
| 315 | + | ||
| 316 | +.badge-low { background: #e0f2fe; color: #075985; } | ||
| 317 | +.badge-medium { background: #fef3c7; color: #92400e; } | ||
| 318 | +.badge-high { background: #ffedd5; color: #9a3412; } | ||
| 319 | +.badge-critical { background: #fee2e2; color: #991b1b; } | ||
| 320 | + | ||
| 321 | +/* ---------- Forms ---------- */ | ||
| 322 | +.issue-form { | ||
| 323 | + background: var(--color-surface); | ||
| 324 | + padding: 28px; | ||
| 325 | + border: 1px solid var(--color-border); | ||
| 326 | + border-radius: var(--radius-lg); | ||
| 327 | + box-shadow: var(--shadow-sm); | ||
| 328 | +} | ||
| 329 | + | ||
| 330 | +.form-group { margin-bottom: 20px; } | ||
| 331 | + | ||
| 332 | +.form-group label { | ||
| 333 | + display: block; | ||
| 334 | + margin-bottom: 7px; | ||
| 335 | + font-weight: 600; | ||
| 336 | + font-size: 14px; | ||
| 337 | + color: var(--color-text); | ||
| 338 | +} | ||
| 339 | + | ||
| 340 | +.form-group input, | ||
| 341 | +.form-group textarea, | ||
| 342 | +.form-group select { | ||
| 343 | + width: 100%; | ||
| 344 | + padding: 10px 13px; | ||
| 345 | + border: 1px solid var(--color-border-strong); | ||
| 346 | + border-radius: var(--radius-sm); | ||
| 347 | + font-size: 14px; | ||
| 348 | + font-family: inherit; | ||
| 349 | + color: var(--color-text); | ||
| 350 | + background: var(--color-surface); | ||
| 351 | + transition: border-color 0.15s ease, box-shadow 0.15s ease; | ||
| 352 | +} | ||
| 353 | + | ||
| 354 | +.form-group textarea { | ||
| 355 | + resize: vertical; | ||
| 356 | + min-height: 120px; | ||
| 357 | + line-height: 1.5; | ||
| 358 | +} | ||
| 359 | + | ||
| 360 | +.form-group input::placeholder, | ||
| 361 | +.form-group textarea::placeholder { | ||
| 362 | + color: var(--color-text-subtle); | ||
| 363 | +} | ||
| 364 | + | ||
| 365 | +.form-group input:focus, | ||
| 366 | +.form-group textarea:focus, | ||
| 367 | +.form-group select:focus { | ||
| 368 | + outline: none; | ||
| 369 | + border-color: var(--color-primary); | ||
| 370 | + box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15); | ||
| 371 | +} | ||
| 372 | + | ||
| 373 | +.form-row { display: flex; gap: 20px; } | ||
| 374 | +.form-row .form-group { flex: 1; } | ||
| 375 | + | ||
| 376 | +.actions { display: flex; gap: 12px; margin-top: 24px; } | ||
| 377 | + | ||
| 378 | +/* ---------- Issue detail ---------- */ | ||
| 379 | +.issue-detail { | ||
| 380 | + background: var(--color-surface); | ||
| 381 | + padding: 28px; | ||
| 382 | + border: 1px solid var(--color-border); | ||
| 383 | + border-radius: var(--radius-lg); | ||
| 384 | + box-shadow: var(--shadow-sm); | ||
| 385 | +} | ||
| 386 | + | ||
| 387 | +.issue-detail h2 { | ||
| 388 | + font-size: 22px; | ||
| 389 | + margin-bottom: 16px; | ||
| 390 | +} | ||
| 391 | + | ||
| 392 | +.issue-detail .description { | ||
| 393 | + white-space: pre-wrap; | ||
| 394 | + color: var(--color-text-muted); | ||
| 395 | + font-size: 15px; | ||
| 396 | + line-height: 1.7; | ||
| 397 | + margin: 0 0 8px; | ||
| 398 | +} | ||
| 399 | + | ||
| 400 | +.meta { | ||
| 401 | + width: 100%; | ||
| 402 | + border-collapse: collapse; | ||
| 403 | + margin: 20px 0; | ||
| 404 | +} | ||
| 405 | + | ||
| 406 | +.meta td { | ||
| 407 | + padding: 10px 12px; | ||
| 408 | + border-bottom: 1px solid var(--color-border); | ||
| 409 | + font-size: 14px; | ||
| 410 | +} | ||
| 411 | + | ||
| 412 | +.meta td:first-child { | ||
| 413 | + font-weight: 600; | ||
| 414 | + width: 130px; | ||
| 415 | + color: var(--color-text-muted); | ||
| 416 | +} | ||
| 417 | + | ||
| 418 | +/* ---------- Empty state ---------- */ | ||
| 419 | +.empty { | ||
| 420 | + color: var(--color-text-muted); | ||
| 421 | + font-size: 15px; | ||
| 422 | + text-align: center; | ||
| 423 | + padding: 48px 24px; | ||
| 424 | + background: var(--color-surface); | ||
| 425 | + border: 1px dashed var(--color-border-strong); | ||
| 426 | + border-radius: var(--radius-lg); | ||
| 427 | +} | ||
| 428 | + | ||
| 429 | +/* ---------- Responsive ---------- */ | ||
| 430 | +@media (max-width: 640px) { | ||
| 431 | + main { padding: 20px 16px 48px; } | ||
| 432 | + | ||
| 433 | + .page-header { flex-direction: column; align-items: flex-start; gap: 12px; } | ||
| 434 | + .page-header h1 { font-size: 24px; } | ||
| 435 | + | ||
| 436 | + .form-row { flex-direction: column; gap: 0; } | ||
| 437 | + | ||
| 438 | + .issue-form, | ||
| 439 | + .issue-detail { padding: 20px; } | ||
| 440 | + | ||
| 441 | + .issues-table th, | ||
| 442 | + .issues-table td { padding: 12px 12px; } | ||
| 443 | + | ||
| 444 | + .row-actions { flex-wrap: wrap; justify-content: flex-start; } | ||
| 445 | +} | ||