header.scss 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673
  1. /**
  2. * @copyright Copyright (c) 2016, John Molakvoæ <skjnldsv@protonmail.com>
  3. * @copyright Copyright (c) 2016, Julius Haertl <jus@bitgrid.net>
  4. * @copyright Copyright (c) 2016, Lukas Reschke <lukas@statuscode.ch>
  5. * @copyright Copyright (c) 2016, Jos Poortvliet <jos@opensuse.org>
  6. * @copyright Copyright (c) 2016, Erik Pellikka <erik@pellikka.org>
  7. * @copyright Copyright (c) 2016, jowi <sjw@gmx.ch>
  8. * @copyright Copyright (c) 2015, Hendrik Leppelsack <hendrik@leppelsack.de>
  9. * @copyright Copyright (c) 2015, Volker E <volker.e@temporaer.net>
  10. * @copyright Copyright (c) 2014-2017, Jan-Christoph Borchardt <hey@jancborchardt.net>
  11. *
  12. * @license GNU AGPL version 3 or any later version
  13. *
  14. */
  15. /* prevent ugly selection effect on accidental selection */
  16. #header,
  17. #navigation,
  18. #expanddiv {
  19. -webkit-user-select: none;
  20. -moz-user-select: none;
  21. -ms-user-select: none;
  22. }
  23. /* removed until content-focusing issue is fixed */
  24. #skip-to-content a {
  25. position: absolute;
  26. left: -10000px;
  27. top: auto;
  28. width: 1px;
  29. height: 1px;
  30. overflow: hidden;
  31. &:focus {
  32. left: 76px;
  33. top: -9px;
  34. color: var(--color-primary-text);
  35. width: auto;
  36. height: auto;
  37. }
  38. }
  39. /* HEADERS ------------------------------------------------------------------ */
  40. #body-user #header,
  41. #body-settings #header,
  42. #body-public #header {
  43. display: inline-flex;
  44. position: fixed;
  45. top: 0;
  46. width: 100%;
  47. z-index: 2000;
  48. height: $header-height;
  49. background-color: var(--color-primary);
  50. box-sizing: border-box;
  51. justify-content: space-between;
  52. }
  53. /* LOGO and APP NAME -------------------------------------------------------- */
  54. #nextcloud {
  55. padding: 7px 0;
  56. padding-left: 86px; // logo width + 2* pa
  57. position: relative;
  58. height: 100%;
  59. box-sizing: border-box;
  60. opacity: 1;
  61. display: flex;
  62. align-items: center;
  63. flex-wrap: wrap;
  64. overflow: hidden;
  65. &:focus {
  66. opacity: .75;
  67. }
  68. &:hover, &:active {
  69. opacity: 1;
  70. }
  71. }
  72. #header {
  73. /* Header menu */
  74. $header-menu-entry-height: 44px;
  75. .header-left > nav > .menu,
  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: 0 0 var(--border-radius) var(--border-radius);
  80. box-sizing: border-box;
  81. z-index: 2000;
  82. position: absolute;
  83. max-width: 350px;
  84. max-height: $header-menu-entry-height * 7.5; // half entry
  85. right: 5px; // relative to parent
  86. top: $header-height;
  87. margin: 0;
  88. -webkit-overflow-scrolling: touch;
  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. /* Use by the apps menu and the settings right menu */
  105. ul {
  106. li {
  107. a {
  108. display: inline-flex;
  109. align-items: center;
  110. height: $header-menu-entry-height;
  111. color: var(--color-main-text);
  112. padding: 10px 12px;
  113. box-sizing: border-box;
  114. opacity: .7;
  115. white-space: nowrap;
  116. position: relative;
  117. width: 100%;
  118. &:hover,
  119. &:focus,
  120. &:active,
  121. &.active {
  122. opacity: 1;
  123. box-shadow: inset 4px 0 var(--color-primary);
  124. }
  125. span {
  126. display: inline-block;
  127. padding-bottom: 0;
  128. color: var(--color-main-text);
  129. white-space: nowrap;
  130. overflow: hidden;
  131. text-overflow: ellipsis;
  132. max-width: 110px;
  133. }
  134. .icon-loading-small {
  135. margin-right: 10px;
  136. background-size: 16px 16px;
  137. }
  138. img,
  139. svg {
  140. opacity: .7;
  141. margin-right: 10px;
  142. height: 16px;
  143. width: 16px;
  144. }
  145. }
  146. }
  147. }
  148. }
  149. .logo {
  150. display: inline-flex;
  151. background-image: var(--image-logo);
  152. background-repeat: no-repeat;
  153. background-size: contain;
  154. background-position: center;
  155. width: 62px;
  156. position: absolute;
  157. left: 12px;
  158. top: 1px;
  159. bottom: 1px;
  160. img {
  161. opacity: 0;
  162. max-width: 100%;
  163. max-height: 200px;
  164. }
  165. }
  166. .header-appname-container {
  167. display: none;
  168. padding-right: 10px;
  169. flex-shrink: 0;
  170. }
  171. /* show caret indicator next to logo to make clear it is tappable */
  172. .icon-caret {
  173. display: inline-block;
  174. width: 12px;
  175. height: 12px;
  176. margin: 0;
  177. margin-top: -21px;
  178. padding: 0;
  179. vertical-align: middle;
  180. }
  181. #header-left, .header-left,
  182. #header-right, .header-right {
  183. display: inline-flex;
  184. align-items: center;
  185. }
  186. #header-left, .header-left {
  187. flex: 0 0;
  188. flex-grow: 1;
  189. white-space: nowrap;
  190. }
  191. #header-right, .header-right {
  192. justify-content: flex-end;
  193. flex-shrink: 1;
  194. }
  195. /* Right header standard */
  196. .header-right {
  197. > div,
  198. > form {
  199. height: 100%;
  200. position: relative;
  201. > .menutoggle {
  202. display: flex;
  203. justify-content: center;
  204. align-items: center;
  205. width: $header-height;
  206. height: 100%;
  207. cursor: pointer;
  208. opacity: 0.6;
  209. padding: 0;
  210. margin: 0;
  211. }
  212. }
  213. }
  214. }
  215. /* hover effect for app switcher label */
  216. .header-appname-container .header-appname {
  217. opacity: .75;
  218. }
  219. .menutoggle {
  220. .icon-caret {
  221. opacity: .75;
  222. }
  223. &:hover {
  224. .header-appname, .icon-caret {
  225. opacity: 1;
  226. }
  227. }
  228. &:focus {
  229. .header-appname, .icon-caret {
  230. opacity: 1;
  231. }
  232. }
  233. &.active {
  234. .header-appname, .icon-caret {
  235. opacity: 1;
  236. }
  237. }
  238. }
  239. /* only used for public share pages now as we have the app icons when logged in */
  240. .header-appname {
  241. color: var(--color-primary-text);
  242. font-size: 16px;
  243. font-weight: bold;
  244. margin: 0;
  245. padding: 0;
  246. padding-right: 5px;
  247. overflow: hidden;
  248. text-overflow: ellipsis;
  249. }
  250. /* do not show menu toggle on public share links as there is no menu */
  251. #body-public #header .icon-caret {
  252. display: none;
  253. }
  254. /* NAVIGATION --------------------------------------------------------------- */
  255. nav[role='navigation'] {
  256. display: inline-block;
  257. width: $header-height;
  258. height: $header-height;
  259. margin-left: -$header-height;
  260. position: relative;
  261. }
  262. #header .header-left > nav > #navigation {
  263. position: relative;
  264. left: 25px; /* half the togglemenu */
  265. transform: translateX(-50%);
  266. width: 160px;
  267. }
  268. #header .header-left > nav > #navigation,
  269. .ui-datepicker,
  270. .ui-timepicker.ui-widget {
  271. background-color: var(--color-main-background);
  272. filter: drop-shadow(0 1px 10px var(--color-box-shadow));
  273. &:after {
  274. /* position of dropdown arrow */
  275. left: 50%;
  276. bottom: 100%;
  277. border: solid transparent;
  278. content: ' ';
  279. height: 0;
  280. width: 0;
  281. position: absolute;
  282. pointer-events: none;
  283. border-color: rgba(0, 0, 0, 0);
  284. border-bottom-color: var(--color-main-background);
  285. border-width: 10px;
  286. margin-left: -10px; /* border width */
  287. }
  288. }
  289. #navigation {
  290. box-sizing: border-box;
  291. .in-header {
  292. display: none;
  293. }
  294. }
  295. #apps {
  296. max-height: inherit;
  297. overflow-x: hidden;
  298. overflow-y: auto;
  299. -webkit-overflow-scrolling: touch;
  300. }
  301. /* USER MENU -----------------------------------------------------------------*/
  302. #settings {
  303. display: inline-block;
  304. height: 100%;
  305. cursor: pointer;
  306. flex: 0 0 auto;
  307. /* User menu on the right */
  308. #expand {
  309. opacity: 1; /* override icon opacity */
  310. padding-right: 12px;
  311. &:hover,
  312. &:focus,
  313. &:active {
  314. color: var(--color-primary-text);
  315. #expandDisplayName,
  316. .avatardiv{
  317. border-radius: 50%;
  318. border: 2px solid var(--color-primary-text);
  319. margin: -2px;
  320. }
  321. .avatardiv{
  322. background-color: var(--color-primary-text);
  323. }
  324. #expandDisplayName {
  325. opacity: 1;
  326. }
  327. }
  328. /* Profile picture in header */
  329. .avatardiv {
  330. cursor: pointer;
  331. height: 32px;
  332. width: 32px;
  333. img {
  334. opacity: 1;
  335. cursor: pointer;
  336. }
  337. /* do not show display name when profile picture is present */
  338. &.avatardiv-shown + #expandDisplayName {
  339. display: none;
  340. }
  341. }
  342. #expandDisplayName {
  343. padding: 8px;
  344. opacity: .6;
  345. cursor: pointer;
  346. /* full opacity for gear icon if active */
  347. #body-settings & {
  348. opacity: 1;
  349. }
  350. }
  351. /* show triangle below user menu if active */
  352. #body-settings &:before {
  353. content: ' ';
  354. height: 0;
  355. width: 0;
  356. position: absolute;
  357. pointer-events: none;
  358. border: 0 solid transparent;
  359. border-bottom-color: var(--color-main-background);
  360. border-width: 10px;
  361. bottom: 0;
  362. z-index: 100;
  363. display: block;
  364. }
  365. }
  366. #expanddiv:after {
  367. right: 22px;
  368. }
  369. }
  370. /* Apps menu */
  371. #appmenu {
  372. display: inline-flex;
  373. min-width: $header-height;
  374. z-index: 2;
  375. li {
  376. position: relative;
  377. cursor: pointer;
  378. margin: 0 2px;
  379. display: flex;
  380. justify-content: center;
  381. a {
  382. position: relative;
  383. display: flex;
  384. margin: 0;
  385. height: $header-height;
  386. width: $header-height;
  387. align-items: center;
  388. justify-content: center;
  389. opacity: .6;
  390. }
  391. /* focused app visual feedback */
  392. &:hover a,
  393. a:focus,
  394. a.active {
  395. opacity: 1;
  396. }
  397. &:hover a + span,
  398. a:focus + span,
  399. &:hover span,
  400. &:focus span,
  401. a:focus span {
  402. display: inline-block;
  403. text-overflow: initial;
  404. width: auto;
  405. overflow: hidden;
  406. background-color: var(--color-primary-element);
  407. padding: 0 5px;
  408. z-index: 2;
  409. }
  410. /* hidden apps menu */
  411. img,
  412. .icon-more-white {
  413. display: inline-block;
  414. width: 20px;
  415. height: 20px;
  416. }
  417. /* App title */
  418. span {
  419. opacity: 0;
  420. position: absolute;
  421. color: var(--color-primary-text);
  422. bottom: 2px;
  423. width: calc(100% - 4px);
  424. text-align: center;
  425. overflow: hidden;
  426. text-overflow: ellipsis;
  427. transition: all var(--animation-quick) ease;
  428. pointer-events: none;
  429. }
  430. /* Set up transitions for showing app titles on hover */
  431. /* App icon */
  432. svg,
  433. .icon-more-white {
  434. transition: transform var(--animation-quick) ease;
  435. }
  436. /* Triangle */
  437. a::before {
  438. transition: border var(--animation-quick) ease;
  439. }
  440. }
  441. /* Show all app titles on hovering app menu area */
  442. &:hover {
  443. li {
  444. /* Move up app icon */
  445. svg,
  446. .icon-more,
  447. .icon-more-white,
  448. .icon-loading-small,
  449. .icon-loading-small-dark {
  450. transform: translateY(-7px);
  451. }
  452. /* Show app title */
  453. span {
  454. opacity: .6;
  455. bottom: 2px;
  456. z-index: -1; /* fix clickability issue - otherwise we need to move the span into the link */
  457. }
  458. /* Prominent app title for current and hovered/focused app */
  459. &:hover span,
  460. &:focus span,
  461. .active + span {
  462. opacity: 1;
  463. }
  464. /* Smaller triangle because of limited space */
  465. a::before {
  466. border-width: 5px;
  467. }
  468. }
  469. }
  470. /* Also show app title on focusing single entry (showing all on focus is only possible with CSS4 and parent selectors) */
  471. li a:focus {
  472. /* Move up app icon */
  473. svg,
  474. .icon-more,
  475. .icon-more-white,
  476. .icon-loading-small,
  477. .icon-loading-small-dark {
  478. transform: translateY(-7px);
  479. }
  480. /* Show app title */
  481. & + span,
  482. span {
  483. opacity: 1;
  484. bottom: 2px;
  485. }
  486. /* Smaller triangle because of limited space */
  487. &::before {
  488. border-width: 5px;
  489. }
  490. }
  491. /* show triangle below active app */
  492. li a::before {
  493. content: ' ';
  494. height: 0;
  495. width: 0;
  496. position: absolute;
  497. pointer-events: none;
  498. border: 0 solid transparent;
  499. border-bottom-color: var(--color-main-background);
  500. border-width: 10px;
  501. transform: translateX(-50%);
  502. left: 50%;
  503. bottom: 0;
  504. display: none;
  505. }
  506. /* triangle focus feedback */
  507. li a.active::before,
  508. li:hover a::before,
  509. li:hover a.active::before,
  510. li a:focus::before {
  511. display: block;
  512. }
  513. li a.active::before {
  514. z-index: 99;
  515. }
  516. li:hover a::before,
  517. li a.active:hover::before,
  518. li a:focus::before {
  519. z-index: 101;
  520. }
  521. li.hidden {
  522. display: none;
  523. }
  524. #more-apps {
  525. z-index: 3;
  526. }
  527. }
  528. /* Skip navigation links – show only on keyboard focus */
  529. .skip-navigation {
  530. padding: 11px;
  531. position: absolute;
  532. overflow: hidden;
  533. z-index: 9999;
  534. top: -999px;
  535. left: 3px;
  536. /* Force primary color, otherwise too light focused color */
  537. background: var(--color-primary) !important;
  538. &.skip-content {
  539. left: $navigation-width;
  540. margin-left: 3px;
  541. }
  542. &:focus,
  543. &:active {
  544. top: $header-height;
  545. }
  546. }
  547. /* SEARCHBOX --------------------------------------------------------------- */
  548. .searchbox {
  549. position: relative;
  550. display: flex;
  551. align-items: center;
  552. input[type='search'] {
  553. position: relative;
  554. font-size: 1.2em;
  555. padding: 3px;
  556. padding-left: 25px;
  557. padding-right: 20px;
  558. background-color: transparent;
  559. color: var(--color-primary-text);
  560. border: 0;
  561. border-radius: var(--border-radius-pill);
  562. height: 34px;
  563. width: 0;
  564. cursor: pointer;
  565. transition: width 100ms, opacity 100ms;
  566. opacity: .6;
  567. &:focus, &:active, &:valid {
  568. background-position-x: 6px;
  569. color: var(--color-primary-text);
  570. width: 155px;
  571. cursor: text;
  572. background-color: transparent !important;
  573. border: 1px solid var(--color-border) !important;
  574. }
  575. &:hover, &:focus, &:active {
  576. opacity: 1;
  577. }
  578. & ~ .icon-close-white {
  579. display: inline;
  580. position: absolute;
  581. width: 30px;
  582. height: 100%;
  583. right: 0;
  584. top: 0;
  585. margin: 0;
  586. &, &:focus, &:active, &:hover {
  587. border: none;
  588. background-color: transparent;
  589. }
  590. }
  591. &:not(:valid) ~ .icon-close-white {
  592. display: none;
  593. }
  594. &::-webkit-search-cancel-button {
  595. -webkit-appearance: none;
  596. }
  597. }
  598. }
  599. /* Empty content messages in the header e.g. notifications, contacts menu, … */
  600. header #emptycontent,
  601. header .emptycontent {
  602. h2 {
  603. font-weight: normal;
  604. font-size: 16px;
  605. }
  606. [class^='icon-'],
  607. [class*='icon-'] {
  608. background-size: 48px;
  609. height: 48px;
  610. width: 48px;
  611. }
  612. }