files.scss 23 KB

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