1
0

files.scss 28 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322
  1. /**
  2. * Copyright (c) 2011, Jan-Christoph Borchardt, http://jancborchardt.net
  3. * @copyright Copyright (c) 2019, Fabian Dreßler <nudelsalat@clouz.de>
  4. *
  5. * This file is licensed under the Affero General Public License version 3 or later.
  6. * See the COPYING-README file.
  7. */
  8. @use 'variables';
  9. @import 'functions';
  10. /* FILE MENU */
  11. .actions {
  12. padding: 5px;
  13. height: 100%;
  14. display: inline-block;
  15. float: left;
  16. }
  17. .actions input, .actions button, .actions .button { margin:0; float:left; }
  18. .actions .button a { color: #555; }
  19. .actions .button a:hover,
  20. .actions .button a:focus {
  21. background-color: var(--color-background-hover);
  22. }
  23. .actions .button a:active {
  24. background-color: var(--color-primary-light);
  25. }
  26. .actions.creatable {
  27. position: relative;
  28. display: flex;
  29. flex: 1 1;
  30. .button:not(:last-child) {
  31. margin-right: 3px;
  32. }
  33. }
  34. .actions.hidden {
  35. display: none;
  36. }
  37. #trash {
  38. margin-right: 8px;
  39. float: right;
  40. z-index: 1010;
  41. padding: 10px;
  42. font-weight: normal;
  43. }
  44. .newFileMenu .error,
  45. .newFileMenu .error + .icon-confirm,
  46. .files-fileList .error {
  47. color: var(--color-error);
  48. border-color: var(--color-error);
  49. }
  50. /* FILE TABLE */
  51. .files-filestable {
  52. position: relative;
  53. width: 100%;
  54. min-width: 250px;
  55. display: block;
  56. flex-direction: column;
  57. // hide table if emptycontent is not hidden
  58. .emptycontent:not(.hidden) ~ & {
  59. display: none;
  60. }
  61. // floating header
  62. thead {
  63. position: -webkit-sticky;
  64. position: sticky;
  65. // breadcrumbs
  66. top: 44px;
  67. // under breadcrumbs, over file list
  68. z-index: 60;
  69. display: block;
  70. background-color: var(--color-main-background-translucent);
  71. }
  72. /**
  73. * This is a dirty hack as the sticky header requires us to use a different display type on the table element
  74. */
  75. tbody {
  76. display: table;
  77. width: 100%;
  78. tr[data-permissions="0"],
  79. tr[data-permissions="16"] {
  80. background-color: var(--color-background-dark);
  81. td.filename .nametext .innernametext {
  82. color: var(--color-text-maxcontrast);
  83. }
  84. }
  85. // Deactivates the possiblility to checkmark or click on the encrypted folder
  86. tr[data-e2eencrypted="true"] {
  87. pointer-events: none;
  88. }
  89. }
  90. }
  91. .files-filestable.hidden {
  92. display: none;
  93. }
  94. /* fit app list view heights */
  95. .app-files #app-content > .viewcontainer {
  96. min-height: 0%;
  97. width: 100%;
  98. }
  99. .app-files #app-content {
  100. // force the width to be the full width to not go bigger than the screen
  101. // flex will grow for the mobile view if necessary
  102. width: calc(100% - 300px);
  103. }
  104. .file-drag, .file-drag .files-filestable tbody tr, .file-drag .files-filestable tbody tr:hover {
  105. background-color: var(--color-primary-light) !important;
  106. }
  107. .app-files #app-content.dir-drop {
  108. background-color: var(--color-main-background) !important;
  109. }
  110. .file-drag .files-filestable tbody tr, .file-drag .files-filestable tbody tr:hover{
  111. background-color: transparent !important;
  112. }
  113. .app-files #app-content.dir-drop .files-filestable tbody tr.dropping-to-dir{
  114. background-color: var(--color-primary-light) !important;
  115. }
  116. /* icons for sidebar */
  117. .nav-icon-files {
  118. @include icon-color('folder', 'files', variables.$color-black);
  119. }
  120. .nav-icon-recent {
  121. @include icon-color('recent', 'files', variables.$color-black);
  122. }
  123. .nav-icon-favorites {
  124. @include icon-color('starred', 'actions', variables.$color-black, 2, true);
  125. }
  126. .nav-icon-sharingin,
  127. .nav-icon-sharingout,
  128. .nav-icon-pendingshares,
  129. .nav-icon-shareoverview {
  130. @include icon-color('share', 'files', variables.$color-black);
  131. }
  132. .nav-icon-sharinglinks {
  133. @include icon-color('public', 'files', variables.$color-black);
  134. }
  135. .nav-icon-extstoragemounts {
  136. @include icon-color('external', 'files', variables.$color-black);
  137. }
  138. .nav-icon-trashbin {
  139. @include icon-color('delete', 'files', variables.$color-black);
  140. }
  141. .nav-icon-trashbin-starred {
  142. @include icon-color('delete', 'files', #ff0000);
  143. }
  144. .nav-icon-deletedshares {
  145. @include icon-color('unshare', 'files', variables.$color-black);
  146. }
  147. .nav-icon-favorites-starred {
  148. @include icon-color('starred', 'actions', variables.$color-yellow, 2, true);
  149. }
  150. #app-navigation .nav-files a.nav-icon-files {
  151. width: auto;
  152. }
  153. /* button needs overrides due to navigation styles */
  154. #app-navigation .nav-files a.new {
  155. width: 40px;
  156. height: 32px;
  157. padding: 0 10px;
  158. margin: 0;
  159. cursor: pointer;
  160. }
  161. #app-navigation .nav-files a.new.hidden {
  162. display: none;
  163. }
  164. #app-navigation .nav-files a.new.disabled {
  165. opacity: 0.3;
  166. }
  167. .files-filestable tbody tr {
  168. height: 51px;
  169. }
  170. .files-filestable tbody tr:hover,
  171. .files-filestable tbody tr:focus,
  172. .files-filestable tbody .name:focus,
  173. .files-filestable tbody tr:hover .filename form,
  174. table tr.mouseOver td {
  175. background-color: var(--color-background-hover);
  176. }
  177. .files-filestable tbody tr:active,
  178. .files-filestable tbody tr.highlighted,
  179. .files-filestable tbody tr.highlighted .name:focus,
  180. .files-filestable tbody tr.selected,
  181. .files-filestable tbody tr.searchresult {
  182. background-color: var(--color-primary-light);
  183. }
  184. tbody a { color: var(--color-main-text); }
  185. span.conflict-path, span.extension, span.uploading, td.date {
  186. color: var(--color-text-maxcontrast);
  187. }
  188. span.conflict-path, span.extension {
  189. -webkit-transition: opacity 300ms;
  190. -moz-transition: opacity 300ms;
  191. -o-transition: opacity 300ms;
  192. transition: opacity 300ms;
  193. vertical-align: top;
  194. }
  195. tr:hover span.conflict-path,
  196. tr:focus span.conflict-path,
  197. tr:hover span.extension,
  198. tr:focus span.extension {
  199. opacity: 1;
  200. color: var(--color-text-maxcontrast);
  201. }
  202. table th, table th a {
  203. color: var(--color-text-maxcontrast);
  204. }
  205. table.multiselect th a {
  206. color: var(--color-main-text);
  207. }
  208. table th .columntitle {
  209. display: block;
  210. padding: 15px;
  211. height: 50px;
  212. box-sizing: border-box;
  213. -moz-box-sizing: border-box;
  214. vertical-align: middle;
  215. &:focus-visible {
  216. border-radius: 2px;
  217. }
  218. }
  219. table.multiselect th .columntitle {
  220. display: inline-block;
  221. margin-right: -20px;
  222. }
  223. table th .columntitle.name {
  224. padding-left: 0;
  225. margin-left: 44px;
  226. }
  227. table.multiselect th .columntitle.name {
  228. margin-left: 0;
  229. }
  230. table th .sort-indicator {
  231. width: 10px;
  232. height: 8px;
  233. margin-left: 5px;
  234. display: inline-block;
  235. vertical-align: text-bottom;
  236. opacity: .3;
  237. }
  238. .sort-indicator.hidden,
  239. .multiselect .sort-indicator,
  240. table.multiselect th:hover .sort-indicator.hidden,
  241. table.multiselect th:focus .sort-indicator.hidden {
  242. visibility: hidden;
  243. }
  244. .multiselect .sort, .multiselect .sort span {
  245. cursor: default;
  246. }
  247. table th:hover .sort-indicator.hidden,
  248. table th:focus .sort-indicator.hidden {
  249. visibility: visible;
  250. }
  251. table th,
  252. table td {
  253. border-bottom: 1px solid var(--color-border);
  254. text-align: left;
  255. font-weight: normal;
  256. }
  257. table td {
  258. padding: 0 15px;
  259. font-style: normal;
  260. background-position: 8px center;
  261. background-repeat: no-repeat;
  262. }
  263. table th.column-name {
  264. position: relative;
  265. width: 9999px; /* not really sure why this works better than 100% … table styling */
  266. padding: 0;
  267. }
  268. .column-name-container {
  269. position: relative;
  270. height: 50px;
  271. }
  272. table th.column-selection {
  273. padding-top: 2px;
  274. }
  275. table th.column-size, table td.filesize {
  276. text-align: right;
  277. }
  278. table th.column-mtime, table td.date,
  279. table th.column-last, table td.column-last {
  280. -moz-box-sizing: border-box;
  281. box-sizing: border-box;
  282. position: relative;
  283. /* this can not be just width, both need to be set … table styling */
  284. min-width: 130px;
  285. }
  286. #app-content-recent,
  287. #app-content-favorites,
  288. #app-content-shareoverview,
  289. #app-content-sharingout,
  290. #app-content-sharingin,
  291. #app-content-sharinglinks,
  292. #app-content-deletedshares,
  293. #app-content-pendingshares {
  294. margin-top: 22px;
  295. thead {
  296. top: 0;
  297. }
  298. }
  299. table.multiselect thead th {
  300. background-color: var(--color-main-background-translucent);
  301. font-weight: bold;
  302. }
  303. #app-content.with-app-sidebar table.multiselect thead{
  304. margin-right: 27%;
  305. }
  306. table.multiselect .column-name {
  307. position: relative;
  308. width: 9999px; /* when we use 100%, the styling breaks on mobile … table styling */
  309. }
  310. table.multiselect .column-mtime>a {
  311. display: none;
  312. }
  313. table td.selection,
  314. table th.selection,
  315. table td.fileaction {
  316. width: 32px;
  317. text-align: center;
  318. }
  319. table td.filename a.name,
  320. table td.filename p.name {
  321. display: flex;
  322. position:relative; /* Firefox needs to explicitly have this default set … */
  323. -moz-box-sizing: border-box;
  324. box-sizing: border-box;
  325. height: 50px;
  326. line-height: 50px;
  327. padding: 0;
  328. }
  329. table td.filename .thumbnail-wrapper {
  330. /* we need this to make sure flex is working inside a table cell */
  331. width: 0;
  332. min-width: 50px;
  333. max-width: 50px;
  334. height: 50px;
  335. }
  336. table td.filename .thumbnail-wrapper.icon-loading-small {
  337. &:after {
  338. z-index: 10;
  339. }
  340. .thumbnail {
  341. opacity: 0.2;
  342. }
  343. }
  344. table td.filename .thumbnail {
  345. display: inline-block;
  346. width: 32px;
  347. height: 32px;
  348. background-size: 32px;
  349. margin-left: 9px;
  350. margin-top: 9px;
  351. border-radius: var(--border-radius);
  352. cursor: pointer;
  353. position: absolute;
  354. z-index: 4;
  355. }
  356. table td.filename p.name .thumbnail {
  357. cursor: default;
  358. }
  359. // Show slight border around previews for images, txt, etc.
  360. table tr[data-has-preview='true'] .thumbnail {
  361. border: 1px solid var(--color-border);
  362. }
  363. table:not(.view-grid) td.filename input.filename {
  364. width: 70% !important;
  365. margin-left: 48px !important;
  366. cursor: text;
  367. }
  368. table td.filename form {
  369. margin-top: -40px;
  370. position: relative;
  371. top: -6px;
  372. }
  373. table td.filename a, table td.login, table td.logout, table td.download, table td.upload, table td.create, table td.delete { padding:3px 8px 8px 3px; }
  374. table td.filename .nametext, .modified, .column-last>span:first-child { float:left; padding:15px 0; }
  375. .modified, .column-last>span:first-child {
  376. position: relative;
  377. overflow: hidden;
  378. text-overflow: ellipsis;
  379. width: 110px;
  380. }
  381. /* TODO fix usability bug (accidental file/folder selection) */
  382. table {
  383. td.filename {
  384. max-width: 0;
  385. .nametext {
  386. width: 0;
  387. flex-grow: 1;
  388. display: flex;
  389. overflow: hidden;
  390. white-space: nowrap;
  391. text-overflow: ellipsis;
  392. height: 100%;
  393. z-index: 10;
  394. padding: 0 20px 0 0;
  395. }
  396. }
  397. }
  398. .hide-hidden-files .files-filestable .files-fileList tr.hidden-file,
  399. .hide-hidden-files .files-filestable .files-fileList tr.hidden-file.dragging {
  400. display: none;
  401. }
  402. .files-fileList tr.animate-opacity {
  403. -webkit-transition:opacity 250ms;
  404. -moz-transition:opacity 250ms;
  405. -o-transition:opacity 250ms;
  406. transition:opacity 250ms;
  407. }
  408. .files-fileList tr.dragging {
  409. opacity: 0.2;
  410. }
  411. table td.filename .nametext .innernametext {
  412. text-overflow: ellipsis;
  413. overflow: hidden;
  414. position: relative;
  415. vertical-align: top;
  416. }
  417. /* for smaller resolutions - see mobile.css */
  418. table td.filename .uploadtext {
  419. position: absolute;
  420. font-weight: normal;
  421. // checkbox width
  422. margin-left: 50px;
  423. left: 0;
  424. bottom: 0;
  425. height: 20px;
  426. padding: 0 4px;
  427. // align with file name
  428. padding-left: 1px;
  429. font-size: 11px;
  430. // double the font size
  431. line-height: 22px;
  432. color: var(--color-text-maxcontrast);
  433. text-overflow: ellipsis;
  434. white-space: nowrap;
  435. }
  436. table td.selection {
  437. padding: 0;
  438. }
  439. /* File checkboxes */
  440. .files-fileList tr td.selection>.selectCheckBox + label:before {
  441. opacity: 0.3;
  442. margin-right: 0;
  443. }
  444. /* Show checkbox with full opacity when hovering, checked, or selected */
  445. .files-fileList tr:hover td.selection>.selectCheckBox + label:before,
  446. .files-fileList tr:focus td.selection>.selectCheckBox + label:before,
  447. .files-fileList tr td.selection>.selectCheckBox:checked + label:before,
  448. .files-fileList tr.selected td.selection>.selectCheckBox + label:before {
  449. opacity: 1;
  450. }
  451. /* Show checkbox with half opacity when selecting range */
  452. .files-fileList tr.halfselected td.selection>.selectCheckBox + label:before {
  453. opacity: 0.5;
  454. }
  455. /* Use label to have bigger clickable size for checkbox */
  456. .files-fileList tr td.selection>.selectCheckBox,
  457. .select-all {
  458. & + label {
  459. padding: 16px;
  460. }
  461. &:focus-visible + label {
  462. background-color: var(--color-background-hover);
  463. border-radius: var(--border-radius-pill);
  464. outline: none !important;
  465. border: 2px solid var(--color-primary) !important;
  466. padding: 14px;
  467. }
  468. }
  469. .files-fileList tr td.selection>.selectCheckBox:focus-visible + label,
  470. .select-all:focus-visible + label {
  471. outline-offset: 0px;
  472. }
  473. .files-fileList tr td.filename {
  474. position: relative;
  475. width: 100%;
  476. padding-left: 0;
  477. padding-right:0;
  478. -webkit-transition:background-image 500ms; -moz-transition:background-image 500ms; -o-transition:background-image 500ms; transition:background-image 500ms;
  479. }
  480. .files-fileList tr td.filename a.name label,
  481. .files-fileList tr td.filename p.name label {
  482. position: absolute;
  483. width: 80%;
  484. height: 50px;
  485. }
  486. .files-fileList tr td.filename .favorite {
  487. display: inline-block;
  488. float: left;
  489. }
  490. .files-fileList tr td.filename .favorite-mark {
  491. position: absolute;
  492. display: block;
  493. top: -6px;
  494. right: -6px;
  495. line-height: 100%;
  496. text-align: center;
  497. }
  498. #uploadsize-message,#delete-confirm { display:none; }
  499. /* File actions */
  500. .fileactions {
  501. z-index: 50;
  502. }
  503. .busy .fileactions, .busy .action {
  504. visibility: hidden;
  505. }
  506. /* fix position of bubble pointer for Files app */
  507. .bubble,
  508. #app-navigation .app-navigation-entry-menu {
  509. min-width: 100px;
  510. }
  511. /* force show the loading icon, not only on hover */
  512. .files-fileList .icon-loading-small {
  513. opacity: 1 !important;
  514. display: inline !important;
  515. }
  516. .files-fileList .action.action-share-notification span, .files-fileList a.name {
  517. cursor: default !important;
  518. }
  519. /*
  520. * Make the disabled link look not like a link in file list rows
  521. */
  522. .files-fileList a.name.disabled {
  523. * {
  524. cursor: default;
  525. }
  526. a, a * {
  527. cursor: pointer;
  528. }
  529. &:focus {
  530. background: none;
  531. }
  532. }
  533. a.action > img {
  534. height: 16px;
  535. width: 16px;
  536. vertical-align: text-bottom;
  537. }
  538. a.action.action-editlocally img.icon {
  539. filter: var(--background-invert-if-dark);
  540. }
  541. /* Actions for selected files */
  542. .selectedActions {
  543. position: relative;
  544. display: inline-block;
  545. vertical-align: middle;
  546. }
  547. .selectedActions.hidden {
  548. display: none;
  549. }
  550. .selectedActions a {
  551. display: inline;
  552. line-height: 50px;
  553. padding: 16px 5px;
  554. }
  555. .selectedActions a.hidden {
  556. display: none;
  557. }
  558. .selectedActions a img {
  559. position:relative;
  560. vertical-align: text-bottom;
  561. margin-bottom: -1px;
  562. }
  563. .selectedActions .actions-selected .icon-more {
  564. margin-top: -3px;
  565. }
  566. .files-fileList td a {
  567. a.action {
  568. display: inline;
  569. padding: 17px 8px;
  570. line-height: 50px;
  571. opacity: .3;
  572. &.action-share {
  573. padding: 17px 14px;
  574. &.permanent:not(.shared-style) .icon-shared + span {
  575. /* hide text of the share action */
  576. /* .hidden-visually for accessbility */
  577. position: absolute;
  578. left:-10000px;
  579. top: auto;
  580. width: 1px;
  581. height: 1px;
  582. overflow: hidden;
  583. }
  584. .avatar {
  585. display: inline-block;
  586. vertical-align: middle;
  587. }
  588. }
  589. &.action-menu {
  590. padding-top: 17px;
  591. padding-bottom: 17px;
  592. padding-left: 14px;
  593. padding-right: 14px;
  594. }
  595. &.no-permission {
  596. &:hover, &:focus {
  597. opacity: .3;
  598. }
  599. }
  600. &.disabled {
  601. &:hover, &:focus,
  602. img {
  603. opacity: .3;
  604. }
  605. &.action-download {
  606. opacity: .7;
  607. &:hover, &:focus {
  608. opacity: .7;
  609. }
  610. }
  611. }
  612. &:hover, &:focus {
  613. opacity: 1;
  614. }
  615. &:focus {
  616. background-color: var(--color-background-hover);
  617. border-radius: var(--border-radius-pill);
  618. }
  619. }
  620. .fileActionsMenu a.action, a.action.action-share.shared-style {
  621. opacity: .7;
  622. }
  623. .fileActionsMenu .action.permanent {
  624. opacity: 1;
  625. }
  626. }
  627. // Ellipsize long sharer names
  628. .files-fileList .action.action-share.permanent.shared-style span:not(.icon) {
  629. display: inline-block;
  630. max-width: 70px;
  631. overflow: hidden;
  632. text-overflow: ellipsis;
  633. vertical-align: middle;
  634. margin-left: 6px;
  635. }
  636. .files-fileList .remoteAddress .userDomain {
  637. margin-left: 0 !important;
  638. }
  639. .files-fileList .favorite-mark.permanent {
  640. opacity: 1;
  641. }
  642. .files-fileList .fileActionsMenu a.action:hover,
  643. .files-fileList .fileActionsMenu a.action:focus,
  644. /* show share action of shared items darker to distinguish from non-shared */
  645. .files-fileList a.action.action-share.shared-style:hover,
  646. .files-fileList a.action.action-share.shared-style:focus {
  647. opacity: 1;
  648. }
  649. .files-fileList tr a.action.disabled {
  650. background: none;
  651. }
  652. .selectedActions a.download.disabled,
  653. .files-fileList tr a.action.action-download.disabled {
  654. color: #000000;
  655. }
  656. .files-fileList tr:hover a.action.disabled:hover * {
  657. cursor: default;
  658. }
  659. .summary {
  660. color: var(--color-text-maxcontrast);
  661. /* add whitespace to bottom of files list to correctly show dropdowns */
  662. $action-menu-items-count: 7; // list view has currently max 7 items in its action menu
  663. height: 44px * ($action-menu-items-count + 0.5); // 0.5 is added to show some whitespace below
  664. }
  665. .files-filestable .summary .filesummary {
  666. width: 100%;
  667. /* Width of checkbox and file preview */
  668. padding-left: 101px;
  669. }
  670. /* Less whitespace needed on link share page
  671. * as there is a footer and action menus have fewer entries.
  672. */
  673. #body-public .summary {
  674. height: 180px;
  675. }
  676. .summary:hover,
  677. .summary:focus,
  678. .summary,
  679. table tr.summary td {
  680. background-color: transparent;
  681. }
  682. .summary td {
  683. border-bottom: none;
  684. vertical-align: top;
  685. padding-top: 20px;
  686. }
  687. .summary td:first-child {
  688. padding: 0;
  689. }
  690. .hiddeninfo {
  691. white-space: pre-line;
  692. }
  693. table.dragshadow {
  694. width:auto;
  695. z-index: 2000;
  696. }
  697. table.dragshadow td.filename {
  698. padding-left:60px;
  699. padding-right:16px;
  700. height: 36px;
  701. /* Override "max-width: 0" to prevent file name and size from overlapping */
  702. max-width: unset;
  703. }
  704. table.dragshadow td.size {
  705. padding-right:8px;
  706. }
  707. .mask {
  708. z-index: 50;
  709. position: absolute;
  710. top: 0;
  711. left: 0;
  712. right: 0;
  713. bottom: 0;
  714. background-color: var(--color-main-background);
  715. background-repeat: no-repeat no-repeat;
  716. background-position: 50%;
  717. opacity: 0.7;
  718. transition: opacity 100ms;
  719. -moz-transition: opacity 100ms;
  720. -o-transition: opacity 100ms;
  721. -ms-transition: opacity 100ms;
  722. -webkit-transition: opacity 100ms;
  723. }
  724. .mask.transparent{
  725. opacity: 0;
  726. }
  727. .newFileMenu {
  728. font-weight: 300;
  729. top: 100%;
  730. left: -48px !important;
  731. margin-top: 4px;
  732. min-width: 100px;
  733. z-index: 1001;
  734. /* Center triangle */
  735. &::after {
  736. left: 61px !important;
  737. }
  738. }
  739. .files-controls {
  740. box-sizing: border-box;
  741. position: -webkit-sticky;
  742. position: sticky;
  743. height: 54px;
  744. padding: 0;
  745. margin: 0;
  746. background-color: var(--color-main-background-translucent);
  747. z-index: 62; /* must be above the filelist sticky header and texteditor menubar */
  748. -webkit-user-select: none;
  749. -moz-user-select: none;
  750. -ms-user-select: none;
  751. user-select: none;
  752. display: flex;
  753. top: 0;
  754. padding-top: 3px;
  755. .actions {
  756. > div,
  757. & {
  758. > .button, button {
  759. box-sizing: border-box;
  760. display: inline-block;
  761. display: flex;
  762. height: 44px;
  763. width: 44px;
  764. padding: 9px; // width - border - icon width = 18px
  765. align-items: center;
  766. justify-content: center;
  767. }
  768. .button.hidden {
  769. display: none;
  770. }
  771. }
  772. }
  773. }
  774. /* position controls for apps with app-navigation */
  775. .viewer-mode #app-navigation + #app-content .files-controls {
  776. left: 0;
  777. }
  778. .files-filestable .filename .action .icon,
  779. .files-filestable .selectedActions a .icon,
  780. .files-filestable .filename .favorite-mark .icon,
  781. .files-controls .actions .button .icon {
  782. display: inline-block;
  783. vertical-align: middle;
  784. background-size: 16px 16px;
  785. }
  786. .files-filestable .filename .favorite-mark {
  787. // Override default icons to always hide the star icon and always show the
  788. // starred icon even when hovered or focused.
  789. & .icon-star {
  790. background-image: none;
  791. }
  792. & .icon-starred {
  793. background-image: var(--icon-starred-yellow) !important;
  794. }
  795. }
  796. .files-filestable .filename .action .icon.hidden,
  797. .files-filestable .selectedActions a .icon.hidden,
  798. .files-controls .actions .button .icon.hidden {
  799. display: none;
  800. }
  801. .files-filestable .filename .action .icon.loading,
  802. .files-filestable .selectedActions a .icon.loading,
  803. .files-controls .actions .button .icon.loading {
  804. width: 15px;
  805. height: 15px;
  806. }
  807. .app-files .actions .button.new {
  808. position: relative;
  809. }
  810. .breadcrumb {
  811. align-items: center;
  812. .icon-home {
  813. border-radius: var(--border-radius);
  814. }
  815. }
  816. .breadcrumb .canDrop > a,
  817. .files-filestable tbody tr.canDrop {
  818. background-color: rgba( variables.$color-primary, .3 );
  819. }
  820. .dropzone-background {
  821. background-color: rgba( variables.$color-primary, .3 );
  822. :hover{
  823. box-shadow: none !important;
  824. }
  825. }
  826. .notCreatable {
  827. margin-left: 12px;
  828. margin-right: 44px;
  829. margin-top: 12px;
  830. color: var(--color-main-text);
  831. overflow: auto;
  832. min-width: 160px;
  833. height: 54px;
  834. &:not(.hidden) {
  835. display: flex;
  836. }
  837. .icon-alert-outline {
  838. top: -15px;
  839. position: relative;
  840. margin-right: 4px;
  841. }
  842. }
  843. .quota-navigation-item {
  844. margin: 0 !important;
  845. border: none;
  846. border-radius: 0;
  847. background-color: transparent;
  848. z-index:1;
  849. height: 44px;
  850. display: flex !important;
  851. flex-direction: column;
  852. &__text {
  853. height: 30px;
  854. }
  855. &[href='#'] {
  856. // if no link is set, no mouse feedback
  857. &, * {
  858. cursor: default !important;
  859. }
  860. }
  861. &__container {
  862. height: 5px;
  863. border-radius: var(--border-radius);
  864. }
  865. }
  866. /* GRID */
  867. .files-filestable.view-grid:not(.hidden) {
  868. $grid-size: 160px;
  869. $grid-pad: 14px;
  870. /* HEADER and MULTISELECT */
  871. thead {
  872. tr {
  873. display: block;
  874. border-bottom: 1px solid var(--color-border);
  875. background-color: var(--color-main-background-translucent);
  876. th {
  877. width: auto;
  878. border: none;
  879. }
  880. }
  881. }
  882. /* MAIN FILE LIST */
  883. tbody {
  884. display: grid;
  885. grid-template-columns: repeat(auto-fill, $grid-size);
  886. justify-content: space-around;
  887. row-gap: 15px;
  888. margin: 15px 0;
  889. // ensure search still filters tr with .hidden
  890. tr:not(.hidden) {
  891. display: block;
  892. position: relative;
  893. height: $grid-size + 44px - $grid-pad;
  894. border-radius: var(--border-radius);
  895. &:hover, &:focus, &:active,
  896. &.selected,
  897. &.searchresult,
  898. .name:focus,
  899. &.highlighted {
  900. background-color: transparent;
  901. .thumbnail-wrapper,
  902. .nametext,
  903. .fileactions {
  904. background-color: var(--color-background-hover);
  905. }
  906. }
  907. }
  908. td {
  909. display: inline;
  910. border-bottom: none;
  911. &.filename {
  912. .thumbnail-wrapper {
  913. min-width: 0;
  914. max-width: none;
  915. position: absolute;
  916. width: $grid-size;
  917. height: $grid-size;
  918. padding: $grid-pad; // same as action icon bottom and right padding
  919. top: 0;
  920. left: 0;
  921. z-index: -1; // make sure the default click is the link
  922. .thumbnail {
  923. width: calc(100% - 2 * #{$grid-pad});
  924. height: calc(100% - 2 * #{$grid-pad}); //action icon padding
  925. background-size: contain;
  926. margin: 0;
  927. border-radius: var(--border-radius);
  928. background-repeat: no-repeat;
  929. background-position: center;
  930. /* Position favorite star related to checkbox to left and 3-dot menu below
  931. * Position is inherited from the selection while in grid view
  932. */
  933. .favorite-mark {
  934. padding: $grid-pad;
  935. left: auto;
  936. top: -22px; // center in corner of thumbnail
  937. right: -22px; // center in corner of thumbnail
  938. }
  939. }
  940. }
  941. .uploadtext {
  942. width: 100%;
  943. margin: 0;
  944. top: 0;
  945. bottom: auto;
  946. // checkbox align
  947. height: 28px;
  948. padding-top: 4px;
  949. // checkbox margins
  950. padding-left: calc(44px - 16px);
  951. }
  952. .name {
  953. height: 100%;
  954. border-radius: var(--border-radius);
  955. // since we're using thumbnail, name and actions bg
  956. // we need to hide the overflow for the radius to show
  957. // luckily the popovermenu is outside .name
  958. overflow: hidden;
  959. // we but the thumbnail in background to ensure
  960. // the name is the default click handler
  961. // force back the cursor which has been overridden
  962. // and disabled for some reason...
  963. cursor: pointer !important;
  964. .nametext {
  965. display: flex;
  966. height: 44px;
  967. margin-top: $grid-size - $grid-pad;
  968. text-align: center;
  969. line-height: 44px;
  970. padding: 0;
  971. .innernametext {
  972. display: inline-block;
  973. text-align: center;
  974. overflow: hidden;
  975. text-overflow: ellipsis;
  976. white-space: nowrap;
  977. }
  978. &:before {
  979. content: '';
  980. flex: 1;
  981. min-width: 14px;
  982. }
  983. &:after {
  984. content: '';
  985. flex: 1;
  986. min-width: 44px;
  987. }
  988. /* No space for extension in grid view */
  989. .extension {
  990. display: none;
  991. }
  992. }
  993. .fileactions {
  994. height: initial;
  995. margin-top: $grid-size - $grid-pad;
  996. display: flex;
  997. align-items: center;
  998. position: absolute;
  999. right: 0;
  1000. .action {
  1001. padding: $grid-pad;
  1002. width: 44px;
  1003. height: 44px;
  1004. display: flex;
  1005. align-items: center;
  1006. justify-content: center;
  1007. // hide all actions in grid view that are not the menu
  1008. &:not(.action-menu) {
  1009. display: none;
  1010. }
  1011. }
  1012. }
  1013. }
  1014. .fileActionsMenu {
  1015. // force show the sharing entry in the dropdown menu
  1016. .action-share-container.hidden {
  1017. display: block !important;
  1018. // avatar in shared by user dropdown menu
  1019. .action-share img {
  1020. padding: 6px;
  1021. border-radius: 50%;
  1022. }
  1023. }
  1024. // force show the sharing entry in the dropdown menu
  1025. .action-restore-container.hidden {
  1026. display: block !important;
  1027. }
  1028. // force show the sharing entry in the dropdown menu
  1029. .action-comment-container.hidden {
  1030. display: block !important;
  1031. }
  1032. }
  1033. form {
  1034. padding: 3px 14px;
  1035. border-radius: var(--border-radius);
  1036. input.filename {
  1037. width: 100%;
  1038. margin-left: 0;
  1039. cursor: text;
  1040. }
  1041. }
  1042. }
  1043. /* No space for filesize and date in grid view */
  1044. &.filesize,
  1045. &.date {
  1046. display: none;
  1047. }
  1048. &.selection,
  1049. &.filename .favorite-mark {
  1050. position: absolute;
  1051. top: -8px; // half the checkbox width, center on corner of thumbnail
  1052. left: -8px; // half the checkbox width, center on corner of thumbnail
  1053. display: flex;
  1054. width: 44px;
  1055. height: 44px;
  1056. z-index: 10;
  1057. background: transparent;
  1058. label {
  1059. width: 44px;
  1060. height: 44px;
  1061. display: inline-flex;
  1062. padding: $grid-pad; // like any action icon
  1063. &::before {
  1064. margin: 0;
  1065. width: $grid-pad; // 16px - border
  1066. height: $grid-pad; // 16px - border
  1067. }
  1068. }
  1069. }
  1070. /* Position actions menu below file */
  1071. .popovermenu {
  1072. left: 0;
  1073. width: $grid-size - 10px; // 2 * margin
  1074. margin: 0 5px;
  1075. /* Ellipsize long entries, normally menu width is adjusted but for grid we use fixed width. */
  1076. .menuitem span:not(.icon) {
  1077. overflow: hidden;
  1078. text-overflow: ellipsis;
  1079. }
  1080. }
  1081. }
  1082. }
  1083. tr.hidden-file td.filename .name .nametext .extension {
  1084. display: block;
  1085. }
  1086. /* Center align the footer file number & size summary */
  1087. tfoot {
  1088. display: grid;
  1089. .summary:not(.hidden) {
  1090. display: inline-block;
  1091. margin: 0 auto;
  1092. $action-menu-items-count: 9; // grid view has currently max 9 items in its action menu
  1093. height: 44px * ($action-menu-items-count + 0.5); // 0.5 is added to show some whitespace below
  1094. td {
  1095. padding-top: 50px;
  1096. &:first-child,
  1097. &.date {
  1098. display: none;
  1099. }
  1100. .info {
  1101. margin-left: 0;
  1102. }
  1103. }
  1104. }
  1105. }
  1106. }
  1107. /* Grid view toggle */
  1108. #view-toggle {
  1109. background-color: transparent;
  1110. border: none;
  1111. margin: 0;
  1112. padding: 22px;
  1113. opacity: .5;
  1114. position: fixed;
  1115. right: calc(var(--default-grid-baseline) * 4);
  1116. top: calc(var(--header-height) + var(--default-grid-baseline));
  1117. z-index: 100;
  1118. &:hover,
  1119. &:focus,
  1120. #showgridview:focus + & {
  1121. opacity: 1;
  1122. }
  1123. &:focus-visible,
  1124. #showgridview:focus-visible + & {
  1125. box-shadow: inset 0 0 0 2px var(--color-primary) !important;
  1126. }
  1127. }
  1128. /**
  1129. * Make sure the hidden input is always
  1130. * on the visible scrolled area of the
  1131. * page to avoid scrolling to top when focusing
  1132. */
  1133. #showgridview {
  1134. position: fixed;
  1135. top: 0;
  1136. }
  1137. /* Adjustments for link share page */
  1138. #body-public {
  1139. .files-filestable.view-grid:not(.hidden) tbody td {
  1140. /* More space for filename since there is no share icon */
  1141. &.filename .name .nametext .innernametext {
  1142. max-width: 124px;
  1143. }
  1144. /* Position actions menu correctly below 3-dot-menu */
  1145. .popovermenu {
  1146. left: -80px;
  1147. }
  1148. }
  1149. /* Right-align view toggle on link share page */
  1150. #view-toggle {
  1151. position: absolute;
  1152. right: 0;
  1153. top: 0;
  1154. }
  1155. }
  1156. /* Hide legacy Gallery toggle */
  1157. #gallery-button {
  1158. display: none;
  1159. }
  1160. #tag_multiple_files_container {
  1161. overflow: hidden;
  1162. background-color: #fff;
  1163. border-radius: 3px;
  1164. position: relative;
  1165. display: flex;
  1166. flex-wrap: wrap;
  1167. margin-bottom: 10px;
  1168. h3 {
  1169. width: 100%;
  1170. padding: 0 18px;
  1171. }
  1172. .systemTagsInputFieldContainer {
  1173. flex: 1 1 80%;
  1174. min-width: 0;
  1175. margin: 0 12px;
  1176. }
  1177. }