header.scss 14 KB

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