header.css 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381
  1. @charset "UTF-8";
  2. /**
  3. * @copyright Copyright (c) 2018, John Molakvoæ (skjnldsv@protonmail.com)
  4. *
  5. * @author John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
  6. *
  7. * @license GNU AGPL version 3 or any later version
  8. *
  9. * This program is free software: you can redistribute it and/or modify
  10. * it under the terms of the GNU Affero General Public License as
  11. * published by the Free Software Foundation, either version 3 of the
  12. * License, or (at your option) any later version.
  13. *
  14. * This program is distributed in the hope that it will be useful,
  15. * but WITHOUT ANY WARRANTY; without even the implied warranty of
  16. * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
  17. * GNU Affero General Public License for more details.
  18. *
  19. * You should have received a copy of the GNU Affero General Public License
  20. * along with this program. If not, see <http://www.gnu.org/licenses/>.
  21. *
  22. */
  23. /**
  24. * @copyright Copyright (c) 2016, John Molakvoæ <skjnldsv@protonmail.com>
  25. * @copyright Copyright (c) 2016, Julius Haertl <jus@bitgrid.net>
  26. * @copyright Copyright (c) 2016, Lukas Reschke <lukas@statuscode.ch>
  27. * @copyright Copyright (c) 2016, Jos Poortvliet <jos@opensuse.org>
  28. * @copyright Copyright (c) 2016, Erik Pellikka <erik@pellikka.org>
  29. * @copyright Copyright (c) 2016, jowi <sjw@gmx.ch>
  30. * @copyright Copyright (c) 2015, Hendrik Leppelsack <hendrik@leppelsack.de>
  31. * @copyright Copyright (c) 2015, Volker E <volker.e@temporaer.net>
  32. * @copyright Copyright (c) 2014-2017, Jan-Christoph Borchardt <hey@jancborchardt.net>
  33. *
  34. * @license GNU AGPL version 3 or any later version
  35. *
  36. */
  37. /* prevent ugly selection effect on accidental selection */
  38. #header,
  39. #expanddiv {
  40. -webkit-user-select: none;
  41. -moz-user-select: none;
  42. -ms-user-select: none;
  43. }
  44. #header a:not(.button):focus-visible, #header button:not(.button-vue):focus-visible, #header div[role=button]:focus-visible,
  45. #expanddiv a:not(.button):focus-visible,
  46. #expanddiv button:not(.button-vue):focus-visible,
  47. #expanddiv div[role=button]:focus-visible {
  48. outline: none;
  49. }
  50. #header a:not(.button):focus-visible::after, #header .button-vue:focus-visible::after, #header div[role=button]:focus-visible::after,
  51. #expanddiv a:not(.button):focus-visible::after,
  52. #expanddiv .button-vue:focus-visible::after,
  53. #expanddiv div[role=button]:focus-visible::after {
  54. content: " ";
  55. position: absolute;
  56. transform: translateX(-50%);
  57. width: 12px;
  58. height: 2px;
  59. border-radius: 3px;
  60. background-color: var(--color-primary-text);
  61. left: 50%;
  62. opacity: 1;
  63. }
  64. #header a:not(.button):focus-visible::after, #header .button-vue:focus-visible::after,
  65. #expanddiv a:not(.button):focus-visible::after,
  66. #expanddiv .button-vue:focus-visible::after {
  67. bottom: 2px;
  68. }
  69. #header .header-right a:not(.button):focus-visible::after, #header .header-right div[role=button]:focus-visible::after,
  70. #expanddiv .header-right a:not(.button):focus-visible::after,
  71. #expanddiv .header-right div[role=button]:focus-visible::after {
  72. bottom: 4px;
  73. }
  74. #header .header-right #expand.menutoggle:focus-visible::after,
  75. #expanddiv .header-right #expand.menutoggle:focus-visible::after {
  76. left: 40%;
  77. }
  78. /* HEADERS ------------------------------------------------------------------ */
  79. #body-user #header,
  80. #body-settings #header,
  81. #body-public #header {
  82. display: inline-flex;
  83. position: absolute;
  84. top: 0;
  85. width: 100%;
  86. z-index: 2000;
  87. height: 50px;
  88. box-sizing: border-box;
  89. justify-content: space-between;
  90. }
  91. /* LOGO and APP NAME -------------------------------------------------------- */
  92. #nextcloud {
  93. padding: 5px 0;
  94. padding-left: 86px;
  95. position: relative;
  96. height: calc(100% - 4px);
  97. box-sizing: border-box;
  98. opacity: 1;
  99. align-items: center;
  100. display: flex;
  101. flex-wrap: wrap;
  102. overflow: hidden;
  103. margin: 2px;
  104. }
  105. #nextcloud:hover, #nextcloud:active {
  106. opacity: 1;
  107. }
  108. #header {
  109. /* Header menu */
  110. /* Right header standard */
  111. }
  112. #header .header-right > div > .menu {
  113. background-color: var(--color-main-background);
  114. filter: drop-shadow(0 1px 5px var(--color-box-shadow));
  115. border-radius: var(--border-radius-large);
  116. box-sizing: border-box;
  117. z-index: 2000;
  118. position: absolute;
  119. max-width: 350px;
  120. min-height: 66px;
  121. max-height: calc(100vh - 50px - 8px);
  122. right: 8px;
  123. top: 50px;
  124. margin: 0;
  125. overflow-y: auto;
  126. /* Dropdown arrow */
  127. /* Use by the settings right menu */
  128. }
  129. #header .header-right > div > .menu:not(.popovermenu) {
  130. display: none;
  131. }
  132. #header .header-right > div > .menu:after {
  133. border: 10px solid transparent;
  134. border-bottom-color: var(--color-main-background);
  135. bottom: 100%;
  136. content: " ";
  137. height: 0;
  138. width: 0;
  139. position: absolute;
  140. pointer-events: none;
  141. right: 10px;
  142. }
  143. #header .header-right > div > .menu > div, #header .header-right > div > .menu > ul {
  144. -webkit-overflow-scrolling: touch;
  145. min-height: 66px;
  146. max-height: calc(100vh - 50px - 8px);
  147. }
  148. #header .header-right > div > .menu.settings-menu > ul {
  149. padding: 4px;
  150. display: flex;
  151. flex-direction: column;
  152. gap: 2px;
  153. }
  154. #header .header-right > div > .menu.settings-menu > ul li a {
  155. border-radius: 6px;
  156. display: inline-flex;
  157. align-items: center;
  158. height: 44px;
  159. color: var(--color-main-text);
  160. padding: 10px 12px;
  161. box-sizing: border-box;
  162. white-space: nowrap;
  163. position: relative;
  164. width: 100%;
  165. }
  166. #header .header-right > div > .menu.settings-menu > ul li a:hover, #header .header-right > div > .menu.settings-menu > ul li a:focus {
  167. background-color: var(--color-background-hover);
  168. }
  169. #header .header-right > div > .menu.settings-menu > ul li a:active, #header .header-right > div > .menu.settings-menu > ul li a.active {
  170. background-color: var(--color-primary-light);
  171. }
  172. #header .header-right > div > .menu.settings-menu > ul li a:focus-visible {
  173. box-shadow: inset 0 0 0 2px var(--color-primary);
  174. outline: none;
  175. }
  176. #header .header-right > div > .menu.settings-menu > ul li a span {
  177. display: inline-block;
  178. padding-bottom: 0;
  179. color: var(--color-main-text);
  180. white-space: nowrap;
  181. overflow: hidden;
  182. text-overflow: ellipsis;
  183. max-width: 110px;
  184. }
  185. #header .header-right > div > .menu.settings-menu > ul li a .icon-loading-small {
  186. margin-right: 10px;
  187. background-size: 16px 16px;
  188. }
  189. #header .header-right > div > .menu.settings-menu > ul li a img,
  190. #header .header-right > div > .menu.settings-menu > ul li a svg {
  191. opacity: 0.7;
  192. margin-right: 10px;
  193. height: 16px;
  194. width: 16px;
  195. filter: var(--background-invert-if-dark);
  196. }
  197. #header .logo {
  198. display: inline-flex;
  199. width: 62px;
  200. position: absolute;
  201. left: 12px;
  202. filter: var(--image-logoheader-custom, var(--background-image-invert-if-bright));
  203. }
  204. #header .header-appname-container {
  205. display: none;
  206. padding-right: 10px;
  207. flex-shrink: 0;
  208. }
  209. #header #header-left, #header .header-left,
  210. #header #header-right, #header .header-right {
  211. display: inline-flex;
  212. align-items: center;
  213. }
  214. #header #header-left, #header .header-left {
  215. flex: 1 0;
  216. white-space: nowrap;
  217. min-width: 0;
  218. }
  219. #header #header-right, #header .header-right {
  220. justify-content: flex-end;
  221. flex-shrink: 1;
  222. }
  223. #header .header-right > div,
  224. #header .header-right > form {
  225. height: 100%;
  226. position: relative;
  227. }
  228. #header .header-right > div > .menutoggle,
  229. #header .header-right > form > .menutoggle {
  230. display: flex;
  231. justify-content: center;
  232. align-items: center;
  233. width: 50px;
  234. height: 44px;
  235. cursor: pointer;
  236. opacity: 0.85;
  237. padding: 0;
  238. margin: 2px 0;
  239. }
  240. #header .header-right > div > .menutoggle:focus,
  241. #header .header-right > form > .menutoggle:focus {
  242. opacity: 1;
  243. }
  244. #header .header-right > div > .menutoggle:focus-visible,
  245. #header .header-right > form > .menutoggle:focus-visible {
  246. outline: none;
  247. }
  248. /* hover effect for app switcher label */
  249. .header-appname-container .header-appname {
  250. opacity: 0.75;
  251. }
  252. /* TODO: move into minimal css file for public shared template */
  253. /* only used for public share pages now as we have the app icons when logged in */
  254. .header-appname {
  255. color: var(--color-primary-text);
  256. font-size: 16px;
  257. font-weight: bold;
  258. margin: 0;
  259. padding: 0;
  260. padding-right: 5px;
  261. overflow: hidden;
  262. text-overflow: ellipsis;
  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. /* USER MENU -----------------------------------------------------------------*/
  275. #settings {
  276. display: inline-block;
  277. height: 100%;
  278. cursor: pointer;
  279. flex: 0 0 auto;
  280. /* User menu on the right */
  281. }
  282. #settings #expand {
  283. opacity: 1; /* override icon opacity */
  284. margin-right: 12px;
  285. /* Profile picture in header */
  286. /* show triangle below user menu if active */
  287. }
  288. #settings #expand:hover, #settings #expand:focus, #settings #expand:active {
  289. color: var(--color-primary-text);
  290. }
  291. #settings #expand:hover #expandDisplayName,
  292. #settings #expand:hover .avatardiv, #settings #expand:focus #expandDisplayName,
  293. #settings #expand:focus .avatardiv, #settings #expand:active #expandDisplayName,
  294. #settings #expand:active .avatardiv {
  295. border-radius: 50%;
  296. border: 2px solid var(--color-primary-text);
  297. margin: -2px;
  298. }
  299. #settings #expand:hover .avatardiv, #settings #expand:focus .avatardiv, #settings #expand:active .avatardiv {
  300. background-color: var(--color-primary-text);
  301. }
  302. #settings #expand:hover #expandDisplayName, #settings #expand:focus #expandDisplayName, #settings #expand:active #expandDisplayName {
  303. opacity: 1;
  304. }
  305. #settings #expand .avatardiv {
  306. cursor: pointer;
  307. height: 32px;
  308. width: 32px;
  309. /* do not show display name when profile picture is present */
  310. }
  311. #settings #expand .avatardiv img {
  312. opacity: 1;
  313. cursor: pointer;
  314. }
  315. #settings #expand .avatardiv.avatardiv-shown + #expandDisplayName {
  316. display: none;
  317. }
  318. #settings #expand #expandDisplayName {
  319. padding: 8px;
  320. opacity: 0.6;
  321. cursor: pointer;
  322. /* full opacity for gear icon if active */
  323. }
  324. #body-settings #settings #expand #expandDisplayName {
  325. opacity: 1;
  326. }
  327. #body-settings #settings #expand:before {
  328. content: " ";
  329. height: 0;
  330. width: 0;
  331. position: absolute;
  332. pointer-events: none;
  333. bottom: 2px;
  334. z-index: 100;
  335. display: block;
  336. width: 10px;
  337. height: 5px;
  338. border-radius: 3px;
  339. background-color: var(--color-primary-text);
  340. }
  341. #settings #expanddiv:after {
  342. right: 22px;
  343. }
  344. /* Skip navigation links – show only on keyboard focus */
  345. #skip-actions {
  346. position: absolute;
  347. overflow: hidden;
  348. z-index: 9999;
  349. top: -999px;
  350. left: 3px;
  351. height: 50px;
  352. padding: 11px;
  353. }
  354. #skip-actions:focus-within {
  355. top: 50px;
  356. }
  357. /* Empty content messages in the header e.g. notifications, contacts menu, … */
  358. header #emptycontent h2,
  359. header .emptycontent h2 {
  360. font-weight: normal;
  361. font-size: 16px;
  362. }
  363. header #emptycontent [class^=icon-],
  364. header #emptycontent [class*=icon-],
  365. header .emptycontent [class^=icon-],
  366. header .emptycontent [class*=icon-] {
  367. background-size: 48px;
  368. height: 48px;
  369. width: 48px;
  370. }
  371. /*# sourceMappingURL=header.css.map */