toolbar.css 1.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273
  1. /* 工具栏样式 */
  2. .Blueprint-toolbar {
  3. grid-column: 1 / -1;
  4. background: #2b2b2b;
  5. border-bottom: 1px solid #404040;
  6. display: flex;
  7. align-items: center;
  8. padding: 0 16px;
  9. gap: 12px;
  10. z-index: 100;
  11. }
  12. .Blueprint-toolbar-button {
  13. padding: 8px 16px;
  14. background: #3d3d3d;
  15. border: 1px solid #555;
  16. border-radius: 4px;
  17. color: #fff;
  18. cursor: pointer;
  19. font-size: 14px;
  20. transition: background 0.2s;
  21. }
  22. .Blueprint-toolbar-button:hover {
  23. background: #4a4a4a;
  24. }
  25. .Blueprint-toolbar-button:active {
  26. background: #363636;
  27. }
  28. .Blueprint-toolbar-spacer {
  29. flex: 1;
  30. }
  31. .Blueprint-toolbar-title {
  32. color: #fff;
  33. font-size: 16px;
  34. font-weight: 500;
  35. text-align: center;
  36. user-select: none;
  37. white-space: nowrap;
  38. overflow: hidden;
  39. text-overflow: ellipsis;
  40. max-width: 400px;
  41. display: flex;
  42. align-items: center;
  43. justify-content: center;
  44. gap: 8px;
  45. }
  46. .Blueprint-toolbar-status {
  47. display: inline-flex;
  48. align-items: center;
  49. }
  50. .Blueprint-toolbar-dot {
  51. width: 8px;
  52. height: 8px;
  53. border-radius: 50%;
  54. display: inline-block;
  55. flex-shrink: 0;
  56. }
  57. .Blueprint-toolbar-dot.dirty {
  58. background-color: #f44336;
  59. box-shadow: 0 0 4px rgba(244, 67, 54, 0.6);
  60. }
  61. .Blueprint-toolbar-dot.saved {
  62. background-color: #4caf50;
  63. box-shadow: 0 0 4px rgba(76, 175, 80, 0.6);
  64. }