header.scss 13 KB

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