1
0

apps.scss 30 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414
  1. /**
  2. * @copyright Copyright (c) 2016-2017, John Molakvoæ <skjnldsv@protonmail.com>
  3. * @copyright Copyright (c) 2016, Julius Haertl <jus@bitgrid.net>
  4. * @copyright Copyright (c) 2016, Morris Jobke <hey@morrisjobke.de>
  5. * @copyright Copyright (c) 2016, pgys <info@pexlab.space>
  6. * @copyright Copyright (c) 2016, Lukas Reschke <lukas@statuscode.ch>
  7. * @copyright Copyright (c) 2016, Stefan Weil <sw@weilnetz.de>
  8. * @copyright Copyright (c) 2016, Roeland Jago Douma <rullzer@owncloud.com>
  9. * @copyright Copyright (c) 2016, jowi <sjw@gmx.ch>
  10. * @copyright Copyright (c) 2015, Hendrik Leppelsack <hendrik@leppelsack.de>
  11. * @copyright Copyright (c) 2015, Thomas Müller <thomas.mueller@tmit.eu>
  12. * @copyright Copyright (c) 2015, Vincent Petry <pvince81@owncloud.com>
  13. * @copyright Copyright (c) 2014-2017, Jan-Christoph Borchardt <hey@jancborchardt.net>
  14. *
  15. * @license GNU AGPL version 3 or any later version
  16. *
  17. */
  18. @use 'variables';
  19. @use 'sass:math';
  20. @import 'functions';
  21. :root {
  22. --body-container-margin: calc(var(--default-grid-baseline) * 2);
  23. /* - 2px is required for making it look nice */
  24. --body-container-radius: calc(var(--default-clickable-area) / 2 + var(--default-grid-baseline) * 2 - 2px);
  25. --body-height: calc(100% - env(safe-area-inset-bottom) - 50px - var(--body-container-margin));
  26. }
  27. @media screen and (max-width: variables.$breakpoint-mobile) {
  28. :root {
  29. --body-container-margin: 0px;
  30. --body-container-radius: 0px;
  31. }
  32. }
  33. html {
  34. width: 100%;
  35. height: 100%;
  36. position: absolute;
  37. // color-background-plain should always be defined. It is the primary user colour
  38. background-color: var(--color-background-plain, var(--color-main-background));
  39. }
  40. body {
  41. // color-background-plain should always be defined. It is the primary user colour
  42. background-color: var(--color-background-plain, var(--color-main-background));
  43. // image-background-plain means the admin has disabled the background image
  44. background-image: var(--image-background, var(--image-background-default));
  45. background-size: cover;
  46. background-position: center;
  47. position: fixed;
  48. width: 100%;
  49. height: calc(100vh - env(safe-area-inset-bottom));
  50. }
  51. /* BASE STYLING ------------------------------------------------------------ */
  52. // no h1 allowed since h1 = logo
  53. h2 {
  54. font-weight: bold;
  55. font-size: 20px;
  56. margin-bottom: 12px;
  57. line-height: 30px;
  58. color: var(--color-text-light);
  59. }
  60. h3 {
  61. font-size: 16px;
  62. margin: 12px 0;
  63. color: var(--color-text-light);
  64. }
  65. h4 {
  66. font-size: 14px;
  67. }
  68. /* do not use italic typeface style, instead lighter color */
  69. em {
  70. font-style: normal;
  71. color: var(--color-text-lighter);
  72. }
  73. dl {
  74. padding: 12px 0;
  75. }
  76. dt,
  77. dd {
  78. display: inline-block;
  79. padding: 12px;
  80. padding-left: 0;
  81. }
  82. dt {
  83. width: 130px;
  84. white-space: nowrap;
  85. text-align: right;
  86. }
  87. kbd {
  88. padding: 4px 10px;
  89. border: 1px solid #ccc;
  90. box-shadow: 0 1px 0 rgba(0, 0, 0, .2);
  91. border-radius: var(--border-radius);
  92. display: inline-block;
  93. white-space: nowrap;
  94. }
  95. /* APP STYLING ------------------------------------------------------------ */
  96. #content[class*='app-'] * {
  97. box-sizing: border-box;
  98. }
  99. /* APP-NAVIGATION ------------------------------------------------------------ */
  100. /* Navigation: folder like structure */
  101. #app-navigation:not(.vue) {
  102. // We use fixed variable for the pill style as we have larger containers around nested list entries
  103. --border-radius-pill: calc(var(--default-clickable-area) / 2);
  104. width: variables.$navigation-width;
  105. z-index: 500;
  106. overflow-y: auto;
  107. overflow-x: hidden;
  108. background-color: var(--color-main-background-blur);
  109. backdrop-filter: var(--filter-background-blur);
  110. -webkit-backdrop-filter: var(--filter-background-blur); -webkit-user-select: none;
  111. position: sticky;
  112. height: 100%;
  113. -moz-user-select: none;
  114. -ms-user-select: none;
  115. user-select: none;
  116. display: flex;
  117. flex-direction: column;
  118. flex-grow: 0;
  119. flex-shrink: 0;
  120. /* 'New' button */
  121. .app-navigation-new {
  122. display: block;
  123. padding: calc(var(--default-grid-baseline) * 2);
  124. button {
  125. display: inline-block;
  126. width: 100%;
  127. padding: 10px;
  128. padding-left: 34px;
  129. background-position: 10px center;
  130. text-align: left;
  131. margin: 0;
  132. }
  133. }
  134. li {
  135. position: relative;
  136. }
  137. > ul {
  138. position: relative;
  139. height: 100%;
  140. width: 100%;
  141. overflow-x: hidden;
  142. overflow-y: auto;
  143. box-sizing: border-box;
  144. display: flex;
  145. flex-direction: column;
  146. padding: calc(var(--default-grid-baseline) * 2);
  147. padding-bottom: 0;
  148. &:last-child {
  149. padding-bottom: calc(var(--default-grid-baseline) * 2);
  150. }
  151. > li {
  152. display: inline-flex;
  153. flex-wrap: wrap;
  154. order: 1;
  155. flex-shrink: 0;
  156. margin: 0;
  157. margin-bottom: 3px;
  158. width: 100%;
  159. border-radius: var(--border-radius-pill);
  160. /* Pinned-to-bottom entries */
  161. &.pinned {
  162. order: 2;
  163. &.first-pinned {
  164. margin-top: auto !important;
  165. }
  166. }
  167. > .app-navigation-entry-deleted {
  168. /* Ugly hack for overriding the main entry link */
  169. padding-left: 44px !important;
  170. }
  171. > .app-navigation-entry-edit {
  172. /* Ugly hack for overriding the main entry link */
  173. /* align the input correctly with the link text
  174. 44px-6px padding for the input */
  175. padding-left: 38px !important;
  176. }
  177. a:hover,
  178. a:focus {
  179. &,
  180. > a {
  181. background-color: var(--color-background-hover);
  182. }
  183. }
  184. a:focus-visible {
  185. box-shadow: var(--color-primary) inset 0 0 0 2px;
  186. outline: none;
  187. }
  188. &.active,
  189. a:active,
  190. a.selected ,
  191. a.active {
  192. &,
  193. > a {
  194. background-color: var(--color-primary-light);
  195. }
  196. }
  197. /* align loader */
  198. &.icon-loading-small:after {
  199. left: 22px;
  200. top: 22px;
  201. }
  202. /* hide deletion/collapse of subitems */
  203. &.deleted,
  204. &.collapsible:not(.open) {
  205. > ul {
  206. // NO ANIMATE because if not really hidden, we can still tab through it
  207. display: none;
  208. }
  209. }
  210. &.app-navigation-caption {
  211. font-weight: bold;
  212. line-height: 44px;
  213. padding: 0 44px;
  214. white-space: nowrap;
  215. text-overflow: ellipsis;
  216. box-shadow: none !important;
  217. user-select: none;
  218. pointer-events:none;
  219. &:not(:first-child) {
  220. margin-top: 22px;
  221. }
  222. }
  223. /* Second level nesting for lists */
  224. > ul {
  225. flex: 0 1 auto;
  226. width: 100%;
  227. position: relative;
  228. > li {
  229. display: inline-flex;
  230. flex-wrap: wrap;
  231. padding-left: 44px;
  232. width: 100%;
  233. margin-bottom: 3px;
  234. &:hover,
  235. &:focus {
  236. &,
  237. > a {
  238. border-radius: var(--border-radius-pill);
  239. background-color: var(--color-background-hover);
  240. }
  241. }
  242. &.active,
  243. a.selected {
  244. &,
  245. > a {
  246. border-radius: var(--border-radius-pill);
  247. background-color: var(--color-primary-light);
  248. }
  249. }
  250. /* align loader */
  251. &.icon-loading-small:after {
  252. left: 22px; /* 44px / 2 */
  253. }
  254. > .app-navigation-entry-deleted {
  255. /* margin to keep active indicator visible */
  256. margin-left: 4px;
  257. padding-left: 84px;
  258. }
  259. > .app-navigation-entry-edit {
  260. /* margin to keep active indicator visible */
  261. margin-left: 4px;
  262. /* align the input correctly with the link text
  263. 44px+44px-4px-6px padding for the input */
  264. padding-left: 78px !important;
  265. }
  266. }
  267. }
  268. }
  269. /* Menu and submenu */
  270. > li,
  271. > li > ul > li {
  272. position: relative;
  273. box-sizing: border-box;
  274. /* hide icons if loading */
  275. &.icon-loading-small {
  276. > a,
  277. > .app-navigation-entry-bullet {
  278. /* hide icon or bullet if loading state*/
  279. background: transparent !important;
  280. }
  281. }
  282. /* Main entry link */
  283. > a {
  284. background-size: 16px 16px;
  285. background-position: 14px center;
  286. background-repeat: no-repeat;
  287. display: block;
  288. justify-content: space-between;
  289. line-height: 44px;
  290. min-height: 44px;
  291. padding: 0 12px 0 14px;
  292. overflow: hidden;
  293. box-sizing: border-box;
  294. white-space: nowrap;
  295. text-overflow: ellipsis;
  296. border-radius: var(--border-radius-pill);
  297. color: var(--color-main-text);
  298. flex: 1 1 0px;
  299. z-index: 100; /* above the bullet to allow click*/
  300. /* TODO: forbid using img as icon in menu? */
  301. &.svg {
  302. padding: 0 12px 0 44px;
  303. :focus-visible {
  304. padding: 0 8px 0 42px;
  305. }
  306. }
  307. &:first-child img {
  308. margin-right: 11px;
  309. width: 16px;
  310. height: 16px;
  311. // Legacy invert if bright background
  312. filter: var(--background-invert-if-dark);
  313. }
  314. /* counter can also be inside the link */
  315. > .app-navigation-entry-utils {
  316. display: inline-block;
  317. float: right;
  318. .app-navigation-entry-utils-counter {
  319. padding-right: 0 !important;
  320. }
  321. }
  322. }
  323. /* Bullet icon */
  324. > .app-navigation-entry-bullet {
  325. position: absolute;
  326. display: block;
  327. margin: 16px;
  328. width: 12px;
  329. height: 12px;
  330. border: none;
  331. border-radius: 50%;
  332. cursor: pointer;
  333. transition: background 100ms ease-in-out;
  334. + a {
  335. /* hide icon if bullet, can't have both */
  336. background: transparent !important;
  337. }
  338. }
  339. /* popover fix the flex positionning of the li parent */
  340. > .app-navigation-entry-menu {
  341. top: 44px;
  342. }
  343. /* show edit/undo field if editing/deleted */
  344. &.editing .app-navigation-entry-edit {
  345. opacity: 1;
  346. z-index: 250;
  347. }
  348. &.deleted .app-navigation-entry-deleted {
  349. transform: translateX(0);
  350. z-index: 250;
  351. }
  352. }
  353. }
  354. &.hidden {
  355. display: none;
  356. }
  357. /**
  358. * Button styling for menu, edit and undo
  359. */
  360. .app-navigation-entry-utils .app-navigation-entry-utils-menu-button > button,
  361. .app-navigation-entry-deleted .app-navigation-entry-deleted-button {
  362. border: 0;
  363. opacity: 0.5;
  364. background-color: transparent;
  365. background-repeat: no-repeat;
  366. background-position: center;
  367. &:hover,
  368. &:focus {
  369. background-color: transparent;
  370. opacity: 1;
  371. }
  372. }
  373. /**
  374. * Collapsible menus
  375. */
  376. .collapsible {
  377. /* Fallback for old collapse button.
  378. TODO: to be removed. Leaved here for retro compatibility */
  379. .collapse {
  380. opacity: 0;
  381. position: absolute;
  382. width: 44px;
  383. height: 44px;
  384. margin: 0;
  385. z-index: 110;
  386. /* Needed for IE11; otherwise the button appears to the right of the
  387. * link. */
  388. left: 0;
  389. &:focus-visible {
  390. opacity: 1;
  391. border-width: 0;
  392. box-shadow: inset 0 0 0 2px var(--color-primary);
  393. background: none;
  394. }
  395. }
  396. &:before {
  397. position: absolute;
  398. height: 44px;
  399. width: 44px;
  400. margin: 0;
  401. padding: 0;
  402. background: none;
  403. @include icon-color('triangle-s', 'actions', variables.$color-black, 1, true);
  404. background-size: 16px;
  405. background-repeat: no-repeat;
  406. background-position: center;
  407. border: none;
  408. border-radius: 0;
  409. outline: none !important;
  410. box-shadow: none;
  411. content: ' ';
  412. opacity: 0;
  413. -webkit-transform: rotate(-90deg);
  414. -ms-transform: rotate(-90deg);
  415. transform: rotate(-90deg);
  416. z-index: 105; // above a, under button
  417. border-radius: 50%;
  418. transition: opacity variables.$animation-quick ease-in-out;
  419. }
  420. /* force padding on link no matter if 'a' has an icon class */
  421. > a:first-child {
  422. padding-left: 44px;
  423. }
  424. &:hover,
  425. &:focus {
  426. &:before {
  427. opacity: 1;
  428. }
  429. > a {
  430. background-image: none;
  431. }
  432. > .app-navigation-entry-bullet {
  433. background: transparent !important;
  434. }
  435. }
  436. &.open {
  437. &:before {
  438. -webkit-transform: rotate(0);
  439. -ms-transform: rotate(0);
  440. transform: rotate(0);
  441. }
  442. }
  443. }
  444. /**
  445. * App navigation utils, buttons and counters for drop down menu
  446. */
  447. .app-navigation-entry-utils {
  448. flex: 0 1 auto;
  449. ul {
  450. display: flex !important;
  451. align-items: center;
  452. justify-content: flex-end;
  453. }
  454. li {
  455. width: 44px !important;
  456. height: 44px;
  457. }
  458. button {
  459. height: 100%;
  460. width: 100%;
  461. margin: 0;
  462. box-shadow: none;
  463. }
  464. .app-navigation-entry-utils-menu-button {
  465. /* Prevent bg img override if an icon class is set */
  466. button:not([class^='icon-']):not([class*=' icon-']) {
  467. @include icon-color('more', 'actions', variables.$color-black, 1, true);
  468. }
  469. &:hover button,
  470. &:focus button {
  471. background-color: transparent;
  472. opacity: 1;
  473. }
  474. }
  475. .app-navigation-entry-utils-counter {
  476. overflow: hidden;
  477. text-align: right;
  478. font-size: 9pt;
  479. line-height: 44px;
  480. padding: 0 12px; /* Same padding as all li > a in the app-navigation */
  481. &.highlighted {
  482. padding: 0;
  483. text-align: center;
  484. span {
  485. padding: 2px 5px;
  486. border-radius: 10px;
  487. background-color: var(--color-primary);
  488. color: var(--color-primary-text);
  489. }
  490. }
  491. }
  492. }
  493. /**
  494. * Editable entries
  495. */
  496. .app-navigation-entry-edit {
  497. padding-left: 5px;
  498. padding-right: 5px;
  499. display: block;
  500. width: calc(100% - 1px); /* Avoid border overlapping */
  501. transition: opacity 250ms ease-in-out;
  502. opacity: 0;
  503. position: absolute;
  504. background-color: var(--color-main-background);
  505. z-index: -1;
  506. form,
  507. div {
  508. display: inline-flex;
  509. width: 100%;
  510. }
  511. input {
  512. padding: 5px;
  513. margin-right: 0;
  514. height: 38px;
  515. &:hover,
  516. &:focus {
  517. /* overlapp borders */
  518. z-index: 1;
  519. }
  520. }
  521. input[type='text'] {
  522. width: 100%;
  523. min-width: 0; /* firefox hack: override auto */
  524. border-bottom-right-radius: 0;
  525. border-top-right-radius: 0;
  526. }
  527. button,
  528. input:not([type='text']) {
  529. width: 36px;
  530. height: 38px;
  531. flex: 0 0 36px;
  532. &:not(:last-child) {
  533. border-radius: 0 !important;
  534. }
  535. &:not(:first-child) {
  536. margin-left: -1px;
  537. }
  538. &:last-child {
  539. border-bottom-right-radius: var(--border-radius);
  540. border-top-right-radius: var(--border-radius);
  541. border-bottom-left-radius: 0;
  542. border-top-left-radius: 0;
  543. }
  544. }
  545. }
  546. /**
  547. * Deleted entries with undo button
  548. */
  549. .app-navigation-entry-deleted {
  550. display: inline-flex;
  551. padding-left: 44px;
  552. transform: translateX(#{variables.$navigation-width});
  553. .app-navigation-entry-deleted-description {
  554. position: relative;
  555. white-space: nowrap;
  556. text-overflow: ellipsis;
  557. overflow: hidden;
  558. flex: 1 1 0px;
  559. line-height: 44px;
  560. }
  561. .app-navigation-entry-deleted-button {
  562. margin: 0;
  563. height: 44px;
  564. width: 44px;
  565. line-height: 44px;
  566. &:hover,
  567. &:focus {
  568. opacity: 1;
  569. }
  570. }
  571. }
  572. /**
  573. * Common rules for animation of undo and edit entries
  574. */
  575. .app-navigation-entry-edit,
  576. .app-navigation-entry-deleted {
  577. width: calc(100% - 1px); /* Avoid border overlapping */
  578. transition: transform 250ms ease-in-out,
  579. opacity 250ms ease-in-out,
  580. z-index 250ms ease-in-out;
  581. position: absolute;
  582. left: 0;
  583. background-color: var(--color-main-background);
  584. box-sizing: border-box;
  585. }
  586. /**
  587. * drag and drop
  588. */
  589. .drag-and-drop {
  590. -webkit-transition: padding-bottom 500ms ease 0s;
  591. transition: padding-bottom 500ms ease 0s;
  592. padding-bottom: 40px;
  593. }
  594. .error {
  595. color: var(--color-error);
  596. }
  597. .app-navigation-entry-utils ul,
  598. .app-navigation-entry-menu ul {
  599. list-style-type: none;
  600. }
  601. }
  602. /* CONTENT --------------------------------------------------------- */
  603. #content {
  604. box-sizing: border-box;
  605. position: static;
  606. margin: var(--body-container-margin);
  607. margin-top: 50px;
  608. padding: 0;
  609. display: flex;
  610. width: calc(100% - var(--body-container-margin) * 2);
  611. height: var(--body-height);
  612. border-radius: var(--body-container-radius);
  613. overflow: clip;
  614. &:not(.with-sidebar--full) {
  615. position: fixed;
  616. }
  617. }
  618. @media only screen and (max-width: variables.$breakpoint-mobile) {
  619. #content {
  620. border-top-left-radius: var(--border-radius-large);
  621. border-top-right-radius: var(--border-radius-large);
  622. }
  623. #app-navigation {
  624. border-top-left-radius: var(--border-radius-large);
  625. }
  626. #app-sidebar {
  627. border-top-right-radius: var(--border-radius-large);
  628. }
  629. }
  630. /* APP-CONTENT AND WRAPPER ------------------------------------------ */
  631. /* Part where the content will be loaded into */
  632. /**
  633. * !Important. We are defining the minimum requirement we want for flex
  634. * Just before the mobile breakpoint we have variables.$breakpoint-mobile (1024px) - variables.$navigation-width
  635. * -> 468px. In that case we want 200px for the list and 268px for the content
  636. */
  637. $min-content-width: variables.$breakpoint-mobile - variables.$navigation-width - variables.$list-min-width;
  638. #app-content {
  639. z-index: 1000;
  640. background-color: var(--color-main-background);
  641. flex-basis: 100vw;
  642. overflow: auto;
  643. position: initial;
  644. height: 100%;
  645. /* margin if navigation element is here */
  646. /* no top border for first settings item */
  647. > .section:first-child {
  648. border-top: none;
  649. }
  650. /* if app-content-list is present */
  651. #app-content-wrapper {
  652. display: flex;
  653. position: relative;
  654. align-items: stretch;
  655. /* make sure we have at least full height for loaders or such
  656. no need for list/details since we have a flex stretch */
  657. min-height: 100%;
  658. /* CONTENT DETAILS AFTER LIST*/
  659. .app-content-details {
  660. /* grow full width */
  661. flex: 1 1 $min-content-width;
  662. #app-navigation-toggle-back {
  663. display: none;
  664. }
  665. }
  666. }
  667. }
  668. /* APP-SIDEBAR ------------------------------------------------------------ */
  669. /*
  670. Sidebar: a sidebar to be used within #content
  671. #app-content will be shrinked properly
  672. */
  673. #app-sidebar {
  674. width: 27vw;
  675. min-width: variables.$sidebar-min-width;
  676. max-width: variables.$sidebar-max-width;
  677. display: block;
  678. position: -webkit-sticky;
  679. position: sticky;
  680. top: variables.$header-height;
  681. right:0;
  682. overflow-y: auto;
  683. overflow-x: hidden;
  684. z-index: 1500;
  685. opacity: 0.7px;
  686. height: calc(100vh - #{variables.$header-height});
  687. background: var(--color-main-background);
  688. border-left: 1px solid var(--color-border);
  689. flex-shrink: 0;
  690. // no animations possible, use OC.Apps.showAppSidebar
  691. &.disappear {
  692. display: none;
  693. }
  694. }
  695. /* APP-SETTINGS ------------------------------------------------------------ */
  696. /* settings area */
  697. #app-settings {
  698. // To the bottom w/ flex
  699. margin-top: auto;
  700. &.open,
  701. &.opened {
  702. #app-settings-content {
  703. display: block;
  704. }
  705. }
  706. }
  707. #app-settings-content {
  708. display: none;
  709. padding: calc(var(--default-grid-baseline) * 2);
  710. padding-top: 0;
  711. padding-left: calc(var(--default-grid-baseline) * 4);
  712. /* restrict height of settings and make scrollable */
  713. max-height: 300px;
  714. overflow-y: auto;
  715. box-sizing: border-box;
  716. /* display input fields at full width */
  717. input[type='text'] {
  718. width: 93%;
  719. }
  720. .info-text {
  721. padding: 5px 0 7px 22px;
  722. color: var(--color-text-lighter);
  723. }
  724. input {
  725. &[type='checkbox'],
  726. &[type='radio'] {
  727. &.radio,
  728. &.checkbox {
  729. + label {
  730. display: inline-block;
  731. width: 100%;
  732. padding: 5px 0;
  733. }
  734. }
  735. }
  736. }
  737. }
  738. #app-settings-header {
  739. box-sizing: border-box;
  740. background-color: transparent;
  741. overflow: hidden;
  742. border-radius: calc(var(--default-clickable-area) / 2);
  743. padding: calc(var(--default-grid-baseline) * 2);
  744. padding-top: 0;
  745. .settings-button {
  746. display: flex;
  747. align-items: center;
  748. height: 44px;
  749. width: 100%;
  750. padding: 0;
  751. margin: 0;
  752. background-color: transparent;
  753. box-shadow: none;
  754. border: 0;
  755. border-radius: calc(var(--default-clickable-area) / 2);
  756. text-align: left;
  757. font-weight: normal;
  758. font-size: 100%;
  759. opacity: 0.8;
  760. /* like app-navigation a */
  761. color: var(--color-main-text);
  762. &.opened {
  763. border-top: solid 1px var(--color-border);
  764. background-color: var(--color-main-background);
  765. margin-top: 8px;
  766. }
  767. &:hover,
  768. &:focus {
  769. background-color: var(--color-background-hover);
  770. }
  771. &::before {
  772. background-image: var(--icon-settings-dark);
  773. background-position: 14px center;
  774. background-repeat: no-repeat;
  775. content: '';
  776. width: 44px;
  777. height: 44px;
  778. top: 0;
  779. left: 0;
  780. display: block;
  781. }
  782. &:focus-visible {
  783. box-shadow: 0 0 0 2px inset var(--color-primary) !important;
  784. background-position: 12px center;
  785. }
  786. }
  787. }
  788. /* GENERAL SECTION ------------------------------------------------------------ */
  789. .section {
  790. display: block;
  791. padding: 30px;
  792. margin-bottom: 24px;
  793. &.hidden {
  794. display: none !important;
  795. }
  796. /* slight position correction of checkboxes and radio buttons */
  797. input {
  798. &[type='checkbox'],
  799. &[type='radio'] {
  800. vertical-align: -2px;
  801. margin-right: 4px;
  802. }
  803. }
  804. }
  805. .sub-section {
  806. position: relative;
  807. margin-top: 10px;
  808. margin-left: 27px;
  809. margin-bottom: 10px;
  810. }
  811. .appear {
  812. opacity: 1;
  813. -webkit-transition: opacity 500ms ease 0s;
  814. -moz-transition: opacity 500ms ease 0s;
  815. -ms-transition: opacity 500ms ease 0s;
  816. -o-transition: opacity 500ms ease 0s;
  817. transition: opacity 500ms ease 0s;
  818. &.transparent {
  819. opacity: 0;
  820. }
  821. }
  822. /* TABS ------------------------------------------------------------ */
  823. .tabHeaders {
  824. display: flex;
  825. margin-bottom: 16px;
  826. .tabHeader {
  827. display: flex;
  828. flex-direction: column;
  829. flex-grow: 1;
  830. text-align: center;
  831. white-space: nowrap;
  832. overflow: hidden;
  833. text-overflow: ellipsis;
  834. cursor: pointer;
  835. color: var(--color-text-lighter);
  836. margin-bottom: 1px;
  837. padding: 5px;
  838. &.hidden {
  839. display: none;
  840. }
  841. /* Use same amount as sidebar padding */
  842. &:first-child {
  843. padding-left: 15px;
  844. }
  845. &:last-child {
  846. padding-right: 15px;
  847. }
  848. .icon {
  849. display: inline-block;
  850. width: 100%;
  851. height: 16px;
  852. background-size: 16px;
  853. vertical-align: middle;
  854. margin-top: -2px;
  855. margin-right: 3px;
  856. opacity: .7;
  857. cursor: pointer;
  858. }
  859. a {
  860. color: var(--color-text-lighter);
  861. margin-bottom: 1px;
  862. overflow: hidden;
  863. text-overflow: ellipsis;
  864. }
  865. &.selected {
  866. font-weight: bold;
  867. }
  868. &.selected,
  869. &:hover,
  870. &:focus {
  871. margin-bottom: 0px;
  872. color: var(--color-main-text);
  873. border-bottom: 1px solid var(--color-text-lighter);
  874. }
  875. }
  876. }
  877. .tabsContainer {
  878. clear: left;
  879. .tab {
  880. padding: 0 15px 15px;
  881. }
  882. }
  883. /* POPOVER MENU ------------------------------------------------------------ */
  884. $popoveritem-height: 44px;
  885. $popovericon-size: 16px;
  886. $outter-margin: math.div($popoveritem-height - $popovericon-size, 2);
  887. .contact .popovermenu ul,
  888. .popover__menu {
  889. > li > a > img {
  890. filter: var(--background-invert-if-dark);
  891. // We do not want to invert the color of the user_status emoji:
  892. // https://github.com/nextcloud/nextcloud-vue/blob/8899087f8f8d45e0ed744bde9faa00b625a21905/src/components/NcAvatar/NcAvatar.vue#L495
  893. &[src^="data"] {
  894. filter: none;
  895. }
  896. }
  897. }
  898. .bubble,
  899. .app-navigation-entry-menu,
  900. .popovermenu {
  901. position: absolute;
  902. background-color: var(--color-main-background);
  903. color: var(--color-main-text);
  904. border-radius: var(--border-radius-large);
  905. padding: 3px;
  906. z-index: 110;
  907. margin: 5px;
  908. margin-top: -5px;
  909. right: 0;
  910. filter: drop-shadow(0 1px 3px var(--color-box-shadow));
  911. display: none;
  912. will-change: filter;
  913. &:after {
  914. bottom: 100%;
  915. // Required right-distance is half menu icon size + right padding
  916. // = 16px/2 + 14px = 22px
  917. // popover right margin is 5px, arrow width is 9px to center and border is 1px
  918. // 22px - 9px - 5px - 1px = 7px
  919. right: 7px;
  920. /* change this to adjust the arrow position */
  921. border: solid transparent;
  922. content: ' ';
  923. height: 0;
  924. width: 0;
  925. position: absolute;
  926. pointer-events: none;
  927. border-bottom-color: var(--color-main-background);
  928. border-width: 9px;
  929. }
  930. /* Center the popover */
  931. &.menu-center {
  932. transform: translateX(50%);
  933. right: 50%;
  934. margin-right: 0;
  935. &:after {
  936. right: 50%;
  937. transform: translateX(50%);
  938. }
  939. }
  940. /* Align the popover to the left */
  941. &.menu-left {
  942. right: auto;
  943. left: 0;
  944. margin-right: 0;
  945. &:after {
  946. left: 6px;
  947. right: auto;
  948. }
  949. }
  950. &.open {
  951. display: block;
  952. }
  953. &.contactsmenu-popover {
  954. margin: 0;
  955. }
  956. ul {
  957. /* Overwrite #app-navigation > ul ul */
  958. display: flex !important;
  959. flex-direction: column;
  960. }
  961. li {
  962. display: flex;
  963. flex: 0 0 auto;
  964. &.hidden {
  965. display: none;
  966. }
  967. > button,
  968. > a,
  969. > .menuitem {
  970. cursor: pointer;
  971. line-height: $popoveritem-height;
  972. border: 0;
  973. border-radius: var(--border-radius-large);
  974. background-color: transparent;
  975. display: flex;
  976. align-items: flex-start;
  977. height: auto;
  978. margin: 0;
  979. font-weight: normal;
  980. box-shadow: none;
  981. width: 100%;
  982. color: var(--color-main-text);
  983. white-space: nowrap;
  984. span[class^='icon-'],
  985. span[class*=' icon-'],
  986. &[class^='icon-'],
  987. &[class*=' icon-'] {
  988. min-width: 0; /* Overwrite icons*/
  989. min-height: 0;
  990. background-position: #{math.div($popoveritem-height - $popovericon-size, 2)} center;
  991. background-size: $popovericon-size;
  992. }
  993. span[class^='icon-'],
  994. span[class*=' icon-'] {
  995. /* Keep padding to define the width to
  996. assure correct position of a possible text */
  997. padding: #{math.div($popoveritem-height, 2)} 0 #{math.div($popoveritem-height, 2)} $popoveritem-height;
  998. }
  999. // If no icons set, force left margin to align
  1000. &:not([class^='icon-']):not([class*='icon-']) {
  1001. > span,
  1002. > input,
  1003. > form {
  1004. &:not([class^='icon-']):not([class*='icon-']):first-child {
  1005. margin-left: $popoveritem-height;
  1006. }
  1007. }
  1008. }
  1009. &[class^='icon-'],
  1010. &[class*=' icon-'] {
  1011. padding: 0 #{math.div($popoveritem-height - $popovericon-size, 2)} 0 $popoveritem-height !important;
  1012. }
  1013. &:hover,
  1014. &:focus {
  1015. background-color: var(--color-background-hover);
  1016. }
  1017. &:focus,
  1018. &:focus-visible {
  1019. box-shadow: 0 0 0 2px var(--color-primary-element);
  1020. }
  1021. &.active {
  1022. border-radius: var(--border-radius-pill);
  1023. background-color: var(--color-primary-light);
  1024. }
  1025. /* prevent .action class to break the design */
  1026. &.action {
  1027. padding: inherit !important;
  1028. }
  1029. > span {
  1030. cursor: pointer;
  1031. white-space: nowrap;
  1032. }
  1033. > p {
  1034. width: 150px;
  1035. line-height: 1.6em;
  1036. padding: 8px 0;
  1037. white-space: normal;
  1038. }
  1039. > select {
  1040. margin: 0;
  1041. margin-left: 6px;
  1042. }
  1043. /* Add padding if contains icon+text */
  1044. &:not(:empty) {
  1045. padding-right: $outter-margin !important;
  1046. }
  1047. /* DEPRECATED! old img in popover fallback
  1048. * TODO: to remove */
  1049. > img {
  1050. width: $popovericon-size;
  1051. padding: #{math.div($popoveritem-height - $popovericon-size, 2)};
  1052. }
  1053. /* checkbox/radio fixes */
  1054. > input.radio + label,
  1055. > input.checkbox + label {
  1056. padding: 0 !important;
  1057. width: 100%;
  1058. }
  1059. > input.checkbox + label::before {
  1060. margin: -2px 13px 0;
  1061. }
  1062. > input.radio + label::before {
  1063. margin: -2px 12px 0;
  1064. }
  1065. > input:not([type=radio]):not([type=checkbox]):not([type=image]) {
  1066. width: 150px;
  1067. }
  1068. form {
  1069. display: flex;
  1070. flex: 1 1 auto;
  1071. /* put a small space between text and form
  1072. if there is an element before */
  1073. align-items: center;
  1074. &:not(:first-child) {
  1075. margin-left: 5px;
  1076. }
  1077. }
  1078. /* no margin if hidden span before */
  1079. > span.hidden + form,
  1080. > span[style*='display:none'] + form {
  1081. margin-left: 0;
  1082. }
  1083. /* Inputs inside popover supports text, submit & reset */
  1084. input {
  1085. min-width: $popoveritem-height;
  1086. max-height: #{$popoveritem-height - 4px}; /* twice the element margin-y */
  1087. margin: 2px 0;
  1088. flex: 1 1 auto;
  1089. // space between inline inputs
  1090. &:not(:first-child) {
  1091. margin-left: 5px;
  1092. }
  1093. }
  1094. }
  1095. /* css hack, only first not hidden */
  1096. &:not(.hidden):not([style*='display:none']) {
  1097. &:first-of-type {
  1098. > button, > a, > .menuitem {
  1099. > form, > input {
  1100. margin-top: $outter-margin - 2px; // minus the input margin
  1101. }
  1102. }
  1103. }
  1104. &:last-of-type {
  1105. > button, > a, > .menuitem {
  1106. > form, > input {
  1107. margin-bottom: 0px;
  1108. }
  1109. }
  1110. }
  1111. }
  1112. > button {
  1113. padding: 0;
  1114. span {
  1115. opacity: 1;
  1116. }
  1117. }
  1118. }
  1119. }
  1120. .popovermenu {
  1121. li {
  1122. > button,
  1123. > a,
  1124. > .menuitem {
  1125. /* DEPRECATED! old img in popover fallback
  1126. * TODO: to remove */
  1127. > img {
  1128. width: $popoveritem-height;
  1129. height: $popoveritem-height;
  1130. }
  1131. }
  1132. }
  1133. }
  1134. /* CONTENT LIST ------------------------------------------------------------ */
  1135. .app-content-list {
  1136. position: -webkit-sticky;
  1137. position: relative;
  1138. top: 0;
  1139. border-right: 1px solid var(--color-border);
  1140. display: flex;
  1141. flex-direction: column;
  1142. transition: transform 250ms ease-in-out;
  1143. min-height: 100%;
  1144. max-height: 100%;
  1145. overflow-y: auto;
  1146. overflow-x: hidden;
  1147. flex: 1 1 variables.$list-min-width;
  1148. min-width: variables.$list-min-width;
  1149. max-width: variables.$list-max-width;
  1150. /* Default item */
  1151. .app-content-list-item {
  1152. position: relative;
  1153. height: 68px;
  1154. cursor: pointer;
  1155. padding: 10px 7px;
  1156. display: flex;
  1157. flex-wrap: wrap;
  1158. align-items: center;
  1159. flex: 0 0 auto;
  1160. /* Icon fixes */
  1161. &,
  1162. > .app-content-list-item-menu {
  1163. > [class^='icon-'],
  1164. > [class*=' icon-'] {
  1165. order: 4;
  1166. width: 24px;
  1167. height: 24px;
  1168. margin: -7px; // right padding of item
  1169. padding: 22px;
  1170. opacity: .3;
  1171. cursor: pointer;
  1172. &:hover,
  1173. &:focus {
  1174. opacity: .7;
  1175. }
  1176. &[class^='icon-star'],
  1177. &[class*=' icon-star'] {
  1178. opacity: .7;
  1179. &:hover,
  1180. &:focus {
  1181. opacity: 1 ;
  1182. }
  1183. }
  1184. &.icon-starred {
  1185. opacity: 1 ;
  1186. }
  1187. }
  1188. }
  1189. &:hover,
  1190. &:focus,
  1191. &.active {
  1192. background-color: var(--color-background-dark);
  1193. // display checkbox on hover/focus/active
  1194. .app-content-list-item-checkbox.checkbox + label {
  1195. display: flex;
  1196. }
  1197. }
  1198. .app-content-list-item-checkbox.checkbox + label,
  1199. .app-content-list-item-star {
  1200. position: absolute;
  1201. height: 40px;
  1202. width: 40px;
  1203. z-index: 50;
  1204. }
  1205. .app-content-list-item-checkbox.checkbox {
  1206. &:checked,
  1207. &:hover,
  1208. &:focus,
  1209. &.active {
  1210. + label {
  1211. // display checkbox if checked
  1212. display: flex;
  1213. // if checked, lower the opacity of the avatar
  1214. + .app-content-list-item-icon {
  1215. opacity: .7;
  1216. }
  1217. }
  1218. }
  1219. + label {
  1220. top: 14px;
  1221. left: 7px;
  1222. // hidden by default, only chown on hover-focus or if checked
  1223. display: none;
  1224. &::before {
  1225. margin: 0;
  1226. }
  1227. /* Hide the star, priority to the checkbox */
  1228. ~ .app-content-list-item-star {
  1229. display: none;
  1230. }
  1231. }
  1232. }
  1233. .app-content-list-item-star {
  1234. display: flex;
  1235. top: 10px;
  1236. left: 32px;
  1237. background-size: 16px;
  1238. height: 20px;
  1239. width: 20px;
  1240. margin: 0;
  1241. padding: 0;
  1242. }
  1243. .app-content-list-item-icon {
  1244. position: absolute;
  1245. display: inline-block;
  1246. height: 40px;
  1247. width: 40px;
  1248. line-height: 40px;
  1249. border-radius: 50%;
  1250. vertical-align: middle;
  1251. margin-right: 10px;
  1252. color: #fff;
  1253. text-align: center;
  1254. font-size: 1.5em;
  1255. text-transform: capitalize;
  1256. object-fit: cover;
  1257. user-select: none;
  1258. cursor: pointer;
  1259. top: 50%;
  1260. margin-top: -20px;
  1261. }
  1262. .app-content-list-item-line-one,
  1263. .app-content-list-item-line-two {
  1264. display: block;
  1265. padding-left: 50px;
  1266. white-space: nowrap;
  1267. overflow: hidden;
  1268. text-overflow: ellipsis;
  1269. order: 1;
  1270. flex: 1 1 0px;
  1271. padding-right: 10px;
  1272. cursor: pointer;
  1273. }
  1274. .app-content-list-item-line-two {
  1275. opacity: .5;
  1276. order: 3;
  1277. flex: 1 0;
  1278. flex-basis: calc(100% - 44px);
  1279. }
  1280. .app-content-list-item-details {
  1281. order: 2;
  1282. white-space: nowrap;
  1283. overflow: hidden;
  1284. text-overflow: ellipsis;
  1285. max-width: 100px;
  1286. opacity: .5;
  1287. font-size: 80%;
  1288. user-select: none;
  1289. }
  1290. .app-content-list-item-menu {
  1291. order: 4;
  1292. position: relative;
  1293. .popovermenu {
  1294. margin: 0;
  1295. // action icon have -7px margin
  1296. // default popover is normally 5px
  1297. right: -2px;
  1298. }
  1299. }
  1300. }
  1301. &.selection .app-content-list-item-checkbox.checkbox + label {
  1302. display: flex;
  1303. }
  1304. }