header.css 2.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130
  1. .cp__header {
  2. @apply shadow z-10 h-12;
  3. -webkit-app-region: drag;
  4. padding: 0 0.5rem;
  5. display: flex;
  6. align-items: center;
  7. flex: 0 0 auto;
  8. background-color: var(--ls-primary-background-color, #fff);
  9. position: sticky;
  10. position: -webkit-sticky;
  11. top: 0;
  12. left: 0;
  13. right: 0;
  14. user-select: none;
  15. transition: width 0.3s;
  16. line-height: 1;
  17. .it svg {
  18. transform: scale(0.8);
  19. }
  20. .repos {
  21. .dropdown-wrapper {
  22. left: unset;
  23. right: -46px;
  24. min-width: 14rem;
  25. }
  26. }
  27. a.button {
  28. margin: 0 4px;
  29. }
  30. }
  31. .is-electron.is-mac .cp__header {
  32. padding-left: 78px;
  33. -moz-transition: padding-left .3s ease-in;
  34. -o-transition: padding-left .3s ease-in;
  35. -webkit-transition: padding-left .3s ease-in;
  36. transition: padding-left .3s ease-in;
  37. }
  38. .cp__header .navigation svg {
  39. transform: scale(0.7);
  40. }
  41. .is-electron.is-mac.is-fullscreen .cp__header {
  42. padding-left: 0;
  43. }
  44. .cp__header a, .cp__header svg {
  45. -webkit-app-region: no-drag;
  46. }
  47. .cp__header-left-menu {
  48. @apply px-4 mr-4;
  49. border-right: 1px solid var(--ls-secondary-background-color);
  50. color: var(--ls-link-text-color);
  51. display: block;
  52. height: 100%;
  53. }
  54. .cp__header-left-menu:focus {
  55. @apply outline-none;
  56. background: var(--ls-menu-hover-color);
  57. }
  58. .cp__header-logo {
  59. @apply p-2;
  60. }
  61. .cp__header-logo {
  62. display: none;
  63. }
  64. .cp__header-logo:hover {
  65. opacity: 1;
  66. }
  67. .cp__header-logo-img {
  68. width: 24px;
  69. height: 24px;
  70. }
  71. @screen sm {
  72. .cp__header {
  73. @apply shadow-none;
  74. }
  75. .cp__header-left-menu {
  76. display: none;
  77. }
  78. .cp__header-logo {
  79. display: block;
  80. }
  81. }
  82. .cp__header-logo svg {
  83. transform: scale(0.9);
  84. }
  85. #repo-name {
  86. vertical-align: middle;
  87. display: inline-block;
  88. white-space: nowrap;
  89. overflow: hidden;
  90. text-overflow: ellipsis;
  91. max-width: 7ch;
  92. color: var(--ls-icon-color, #045591);
  93. height: 14px;
  94. @apply md:max-w-none;
  95. }
  96. a.button {
  97. padding: 0.25rem;
  98. opacity: 0.6;
  99. display: block;
  100. border-radius: 4px;
  101. }
  102. a.button:hover {
  103. opacity: 1;
  104. background: var(--ls-tertiary-background-color);
  105. }
  106. .is-mac.is-electron :is(.cp__header, .cp__right-sidebar-topbar) :is(button, .button, a) {
  107. cursor: default !important;
  108. }