header.scss 5.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267
  1. /*!
  2. * SPDX-FileCopyrightText: 2016-2024 Nextcloud GmbH and Nextcloud contributors
  3. * SPDX-FileCopyrightText: 2016 ownCloud, Inc.
  4. * SPDX-License-Identifier: AGPL-3.0-or-later
  5. */
  6. @use 'variables';
  7. /* prevent ugly selection effect on accidental selection */
  8. #header,
  9. #expanddiv {
  10. -webkit-user-select: none;
  11. -moz-user-select: none;
  12. -ms-user-select: none;
  13. a:not(.button):focus-visible, button:not(.button-vue):focus-visible, div[role="button"]:focus-visible {
  14. outline: none;
  15. }
  16. a:not(.button):focus-visible::after, .button-vue:focus-visible::after, div[role=button]:focus-visible::after {
  17. content: " ";
  18. position: absolute;
  19. transform: translateX(-50%);
  20. width: 12px;
  21. height: 2px;
  22. border-radius: 3px;
  23. background-color: var(--color-background-plain-text);
  24. left: 50%;
  25. opacity: 1;
  26. }
  27. a:not(.button):focus-visible::after, .button-vue:focus-visible::after {
  28. bottom: 2px;
  29. }
  30. .header-right {
  31. a:not(.button):focus-visible::after, div[role=button]:focus-visible::after {
  32. bottom: 4px;
  33. }
  34. #expand.menutoggle:focus-visible::after {
  35. left: 40%;
  36. }
  37. }
  38. }
  39. /* HEADERS ------------------------------------------------------------------ */
  40. #body-user #header,
  41. #body-settings #header,
  42. #body-public #header {
  43. display: inline-flex;
  44. position: absolute;
  45. top: 0;
  46. width: 100%;
  47. z-index: 2000;
  48. height: variables.$header-height;
  49. box-sizing: border-box;
  50. justify-content: space-between;
  51. }
  52. /* LOGO and APP NAME -------------------------------------------------------- */
  53. #nextcloud {
  54. padding: 5px 0;
  55. padding-left: 86px; // logo width + 2* pa
  56. position: relative;
  57. height: calc(100% - 4px);
  58. box-sizing: border-box;
  59. opacity: 1;
  60. align-items: center;
  61. display: flex;
  62. flex-wrap: wrap;
  63. overflow: hidden;
  64. margin: 2px;
  65. &:hover, &:active {
  66. opacity: 1;
  67. }
  68. }
  69. @mixin header-menu-height() {
  70. min-height: calc(44px * 1.5); // show at least 1.5 entries
  71. max-height: calc(100vh - #{variables.$header-height} - 8px);
  72. }
  73. #header {
  74. /* Header menu */
  75. $header-menu-entry-height: 44px;
  76. .header-right > div > .menu {
  77. background-color: var(--color-main-background);
  78. filter: drop-shadow(0 1px 5px var(--color-box-shadow));
  79. border-radius: var(--border-radius-large);
  80. box-sizing: border-box;
  81. z-index: 2000;
  82. position: absolute;
  83. max-width: 350px;
  84. @include header-menu-height();
  85. right: 8px; // relative to parent
  86. top: variables.$header-height;
  87. margin: 0;
  88. overflow-y: auto;
  89. &:not(.popovermenu) {
  90. display: none;
  91. }
  92. /* Dropdown arrow */
  93. &:after {
  94. border: 10px solid transparent;
  95. border-bottom-color: var(--color-main-background);
  96. bottom: 100%;
  97. content: ' ';
  98. height: 0;
  99. width: 0;
  100. position: absolute;
  101. pointer-events: none;
  102. right: 10px;
  103. }
  104. & > div,
  105. & > ul {
  106. -webkit-overflow-scrolling: touch;
  107. @include header-menu-height();
  108. }
  109. }
  110. .logo {
  111. display: inline-flex;
  112. background-image: var(--image-logoheader, var(--image-logo, url('../img/logo/logo.svg')));
  113. background-repeat: no-repeat;
  114. background-size: contain;
  115. background-position: center;
  116. width: 62px;
  117. position: absolute;
  118. left: 12px;
  119. top: 1px;
  120. bottom: 1px;
  121. // Invert if not customized and background is bright
  122. filter: var(--image-logoheader-custom, var(--background-image-invert-if-bright));
  123. }
  124. .header-appname-container {
  125. display: none;
  126. padding-right: 10px;
  127. flex-shrink: 0;
  128. }
  129. #header-left, .header-left,
  130. #header-right, .header-right {
  131. display: inline-flex;
  132. align-items: center;
  133. }
  134. #header-left, .header-left {
  135. flex: 1 0;
  136. white-space: nowrap;
  137. min-width: 0;
  138. }
  139. #header-right, .header-right {
  140. justify-content: flex-end;
  141. flex-shrink: 1;
  142. }
  143. /* Right header standard */
  144. .header-right {
  145. > .header-menu__trigger img {
  146. filter: var(--background-image-invert-if-bright);
  147. }
  148. > div,
  149. > form {
  150. height: 100%;
  151. position: relative;
  152. > .menutoggle {
  153. display: flex;
  154. justify-content: center;
  155. align-items: center;
  156. width: variables.$header-height;
  157. height: 44px;
  158. cursor: pointer;
  159. opacity: 0.85;
  160. padding: 0;
  161. margin: 2px 0;
  162. &:focus {
  163. opacity: 1;
  164. }
  165. &:focus-visible {
  166. outline: none;
  167. }
  168. }
  169. }
  170. }
  171. }
  172. /* hover effect for app switcher label */
  173. .header-appname-container .header-appname {
  174. opacity: .75;
  175. }
  176. /* TODO: move into minimal css file for public shared template */
  177. /* only used for public share pages now as we have the app icons when logged in */
  178. .header-appname {
  179. color: var(--color-primary-element-text);
  180. font-size: 16px;
  181. font-weight: bold;
  182. margin: 0;
  183. padding: 0;
  184. padding-right: 5px;
  185. overflow: hidden;
  186. text-overflow: ellipsis;
  187. // Take full width to push the header-shared-by bellow (if any)
  188. flex: 1 1 100%;
  189. }
  190. .header-info {
  191. display: flex;
  192. flex-direction: column;
  193. overflow: hidden;
  194. }
  195. .header-title {
  196. overflow: hidden;
  197. text-overflow: ellipsis;
  198. }
  199. .header-shared-by {
  200. color: var(--color-primary-element-text);
  201. position: relative;
  202. font-weight: 300;
  203. font-size: 11px;
  204. line-height: 11px;
  205. overflow: hidden;
  206. text-overflow: ellipsis;
  207. }
  208. /* Skip navigation links – show only on keyboard focus */
  209. #skip-actions {
  210. position: absolute;
  211. overflow: hidden;
  212. z-index: 9999;
  213. top: -999px;
  214. left: 3px;
  215. padding: 11px;
  216. display: flex;
  217. flex-wrap: wrap;
  218. gap: 11px;
  219. &:focus-within {
  220. top: variables.$header-height;
  221. }
  222. }
  223. /* Empty content messages in the header e.g. notifications, contacts menu, … */
  224. header #emptycontent,
  225. header .emptycontent {
  226. h2 {
  227. font-weight: normal;
  228. font-size: 16px;
  229. }
  230. [class^='icon-'],
  231. [class*='icon-'] {
  232. background-size: 48px;
  233. height: 48px;
  234. width: 48px;
  235. }
  236. }