1
0

styles.scss 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829
  1. /**
  2. * @copyright Copyright (c) 2016, John Molakvoæ <skjnldsv@protonmail.com>
  3. * @copyright Copyright (c) 2016, Lukas Reschke <lukas@statuscode.ch>
  4. * @copyright Copyright (c) 2016, Robin Appelman <robin@icewind.nl>
  5. * @copyright Copyright (c) 2016, Julius Haertl <jus@bitgrid.net>
  6. * @copyright Copyright (c) 2016, Joas Schilling <coding@schilljs.com>
  7. * @copyright Copyright (c) 2016, Morris Jobke <hey@morrisjobke.de>
  8. * @copyright Copyright (c) 2016, Christoph Wurst <christoph@winzerhof-wurst.at>
  9. * @copyright Copyright (c) 2016, Raghu Nayyar <hey@raghunayyar.com>
  10. * @copyright Copyright (c) 2011-2017, Jan-Christoph Borchardt <hey@jancborchardt.net>
  11. * @copyright Copyright (c) 2019-2020, Gary Kim <gary@garykim.dev>
  12. *
  13. * @license GNU AGPL version 3 or any later version
  14. *
  15. */
  16. @use 'sass:math';
  17. @use 'variables';
  18. html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, dialog, figure, footer, header, hgroup, nav, section, main {
  19. margin: 0;
  20. padding: 0;
  21. border: 0;
  22. font-weight: inherit;
  23. font-size: 100%;
  24. font-family: inherit;
  25. vertical-align: baseline;
  26. cursor: default;
  27. scrollbar-color: var(--color-border-dark) transparent;
  28. scrollbar-width: thin;
  29. }
  30. .js-focus-visible :focus:not(.focus-visible) {
  31. outline: none;
  32. }
  33. /** Let vue apps handle the focus themselves */
  34. .content:not(#content-vue) :focus-visible {
  35. box-shadow: inset 0 0 0 2px var(--color-primary-element);
  36. outline: none;
  37. }
  38. html, body {
  39. height: 100%;
  40. // disable pull-down-to-refresh on chromium mobile
  41. overscroll-behavior-y: contain;
  42. }
  43. article, aside, dialog, figure, footer, header, hgroup, nav, section {
  44. display: block;
  45. }
  46. body {
  47. line-height: 1.5;
  48. }
  49. table {
  50. border-collapse: separate;
  51. border-spacing: 0;
  52. white-space: nowrap;
  53. }
  54. caption, th, td {
  55. text-align: left;
  56. font-weight: normal;
  57. }
  58. table, td, th {
  59. vertical-align: middle;
  60. }
  61. a {
  62. border: 0;
  63. color: var(--color-main-text);
  64. text-decoration: none;
  65. cursor: pointer;
  66. * {
  67. cursor: pointer;
  68. }
  69. }
  70. a.external {
  71. margin: 0 3px;
  72. text-decoration: underline;
  73. }
  74. input {
  75. cursor: pointer;
  76. * {
  77. cursor: pointer;
  78. }
  79. }
  80. select, .button span, label {
  81. cursor: pointer;
  82. }
  83. ul {
  84. list-style: none;
  85. }
  86. body {
  87. font-weight: normal;
  88. /* bring the default font size up to 15px */
  89. font-size: var(--default-font-size);
  90. line-height: var(--default-line-height);
  91. font-family: var(--font-face);
  92. color: var(--color-main-text);
  93. }
  94. .two-factor-header {
  95. text-align: center;
  96. }
  97. .two-factor-provider {
  98. text-align: center;
  99. width: 100% !important;
  100. display: inline-block;
  101. margin-bottom: 0 !important;
  102. background-color: var(--color-background-darker) !important;
  103. border: none !important;
  104. }
  105. .two-factor-link {
  106. display: inline-block;
  107. padding: 12px;
  108. color: var(--color-text-lighter);
  109. }
  110. .float-spinner {
  111. height: 32px;
  112. display: none;
  113. }
  114. #nojavascript {
  115. position: fixed;
  116. top: 0;
  117. bottom: 0;
  118. left: 0;
  119. height: 100%;
  120. width: 100%;
  121. z-index: 9000;
  122. text-align: center;
  123. background-color: var(--color-background-darker);
  124. color: var(--color-primary-element-text);
  125. line-height: 125%;
  126. font-size: 24px;
  127. div {
  128. display: block;
  129. position: relative;
  130. width: 50%;
  131. top: 35%;
  132. margin: 0px auto;
  133. }
  134. a {
  135. color: var(--color-primary-element-text);
  136. border-bottom: 2px dotted var(--color-main-background);
  137. &:hover, &:focus {
  138. color: var(--color-primary-element-text-dark);
  139. }
  140. }
  141. }
  142. /* SCROLLING */
  143. ::-webkit-scrollbar {
  144. width: 12px;
  145. height: 12px
  146. }
  147. ::-webkit-scrollbar-corner {
  148. background-color: transparent;
  149. }
  150. ::-webkit-scrollbar-track-piece {
  151. background-color: transparent;
  152. }
  153. ::-webkit-scrollbar-thumb {
  154. background: var(--color-scrollbar);
  155. border-radius: var(--border-radius-large);
  156. border: 2px solid transparent;
  157. background-clip: content-box;
  158. }
  159. /* SELECTION */
  160. ::selection {
  161. background-color: var(--color-primary-element);
  162. color: var(--color-primary-element-text);
  163. }
  164. /* CONTENT ------------------------------------------------------------------ */
  165. #app-navigation * {
  166. box-sizing: border-box;
  167. }
  168. /* EMPTY CONTENT DISPLAY ------------------------------------------------------------ */
  169. #emptycontent,
  170. .emptycontent {
  171. color: var(--color-text-maxcontrast);
  172. text-align: center;
  173. margin-top: 30vh;
  174. width: 100%;
  175. #app-sidebar & {
  176. margin-top: 10vh;
  177. }
  178. .emptycontent-search {
  179. position: static;
  180. }
  181. h2 {
  182. margin-bottom: 10px;
  183. }
  184. [class^='icon-'],
  185. [class*='icon-'] {
  186. background-size: 64px;
  187. height: 64px;
  188. width: 64px;
  189. margin: 0 auto 15px;
  190. &:not([class^='icon-loading']),
  191. &:not([class*='icon-loading']) {
  192. opacity: .4;
  193. }
  194. }
  195. }
  196. /* LOG IN & INSTALLATION ------------------------------------------------------------ */
  197. #datadirContent label {
  198. width: 100%;
  199. }
  200. /* strengthify wrapper */
  201. /* General new input field look */
  202. /* Nicely grouping input field sets */
  203. .grouptop, .groupmiddle, .groupbottom {
  204. position: relative;
  205. -webkit-user-select: none;
  206. -moz-user-select: none;
  207. -ms-user-select: none;
  208. user-select: none;
  209. }
  210. /* Show password toggle */
  211. #show, #dbpassword {
  212. position: absolute;
  213. right: 1em;
  214. top: .8em;
  215. float: right;
  216. }
  217. #show + label, #dbpassword + label {
  218. right: 21px;
  219. top: 15px !important;
  220. margin: -14px !important;
  221. padding: 14px !important;
  222. }
  223. #show:checked + label, #dbpassword:checked + label, #personal-show:checked + label {
  224. opacity: .8;
  225. }
  226. #show:focus-visible + label, #dbpassword-toggle:focus-visible + label, #personal-show:focus-visible + label {
  227. box-shadow: var(--color-primary-element) 0 0 0 2px;
  228. opacity: 1;
  229. border-radius: 9999px;
  230. }
  231. #show + label, #dbpassword + label, #personal-show + label {
  232. position: absolute !important;
  233. height: 20px;
  234. width: 24px;
  235. background-image: var(--icon-toggle-dark);
  236. background-repeat: no-repeat;
  237. background-position: center;
  238. opacity: .3;
  239. }
  240. /* Feedback for keyboard focus and mouse hover */
  241. #show,
  242. #dbpassword,
  243. #personal-show {
  244. &:focus + label {
  245. opacity: 1;
  246. }
  247. + label:hover {
  248. opacity: 1;
  249. }
  250. }
  251. #show + label:before, #dbpassword + label:before, #personal-show + label:before {
  252. display: none;
  253. }
  254. #pass2, input[name='personal-password-clone'] {
  255. padding-right: 30px;
  256. }
  257. .personal-show-container {
  258. position: relative;
  259. display: inline-block;
  260. margin-right: 6px;
  261. }
  262. #personal-show + label {
  263. display: block;
  264. right: 0;
  265. margin-top: -43px;
  266. margin-right: -4px;
  267. padding: 22px;
  268. }
  269. /* Warnings and errors are the same */
  270. #body-user .warning, #body-settings .warning {
  271. margin-top: 8px;
  272. padding: 5px;
  273. border-radius: var(--border-radius);
  274. color: var(--color-main-text);
  275. background-color: rgba(var(--color-warning-rgb), 0.2);
  276. }
  277. .warning {
  278. legend, a {
  279. font-weight: bold !important;
  280. }
  281. }
  282. .error:not(.toastify) {
  283. a {
  284. color: white !important;
  285. font-weight: bold !important;
  286. &.button {
  287. color: var(--color-text-lighter) !important;
  288. display: inline-block;
  289. text-align: center;
  290. }
  291. }
  292. pre {
  293. white-space: pre-wrap;
  294. text-align: left;
  295. }
  296. }
  297. .error-wide {
  298. width: 700px;
  299. margin-left: -200px !important;
  300. .button {
  301. color: black !important;
  302. }
  303. }
  304. .warning-input {
  305. border-color: var(--color-error) !important;
  306. }
  307. /* fixes for update page TODO should be fixed some time in a proper way */
  308. /* this is just for an error while updating the Nextcloud instance */
  309. /* Sticky footer */
  310. /* round profile photos */
  311. .avatar, .avatardiv {
  312. border-radius: 50%;
  313. flex-shrink: 0;
  314. &> img {
  315. border-radius: 50%;
  316. flex-shrink: 0;
  317. }
  318. }
  319. td.avatar {
  320. border-radius: 0;
  321. }
  322. tr .action:not(.permanent), .selectedActions > a {
  323. opacity: 0;
  324. }
  325. tr {
  326. &:hover .action:not(.menuitem),
  327. &:focus .action:not(.menuitem),
  328. .action.permanent:not(.menuitem) {
  329. opacity: .5;
  330. }
  331. }
  332. .selectedActions > a {
  333. opacity: .5;
  334. position: relative;
  335. top: 2px;
  336. &:hover, &:focus {
  337. opacity: 1;
  338. }
  339. }
  340. tr .action {
  341. width: 16px;
  342. height: 16px;
  343. }
  344. .header-action {
  345. opacity: .8;
  346. }
  347. tr {
  348. &:hover .action:hover, &:focus .action:focus {
  349. opacity: 1;
  350. }
  351. }
  352. .selectedActions a {
  353. &:hover, &:focus {
  354. opacity: 1;
  355. }
  356. }
  357. .header-action {
  358. &:hover, &:focus {
  359. opacity: 1;
  360. }
  361. }
  362. tbody tr:not(.group-header) {
  363. &:hover, &:focus, &:active {
  364. background-color: var(--color-background-dark);
  365. }
  366. }
  367. code {
  368. font-family: 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', monospace;
  369. }
  370. .pager {
  371. list-style: none;
  372. float: right;
  373. display: inline;
  374. margin: .7em 13em 0 0;
  375. li {
  376. display: inline-block;
  377. }
  378. }
  379. .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
  380. overflow: hidden;
  381. text-overflow: ellipsis;
  382. }
  383. .ui-icon-circle-triangle-e {
  384. background-image: url('../img/actions/play-next.svg?v=1');
  385. }
  386. .ui-icon-circle-triangle-w {
  387. background-image: url('../img/actions/play-previous.svg?v=1');
  388. }
  389. /* ---- jQuery UI datepicker ---- */
  390. .ui-widget.ui-datepicker {
  391. margin-top: 10px;
  392. padding: 4px 8px;
  393. width: auto;
  394. border-radius: var(--border-radius);
  395. border: none;
  396. z-index: 1600 !important; // above sidebar
  397. .ui-state-default,
  398. .ui-widget-content .ui-state-default,
  399. .ui-widget-header .ui-state-default {
  400. border: 1px solid transparent;
  401. background: inherit;
  402. }
  403. .ui-widget-header {
  404. padding: 7px;
  405. font-size: 13px;
  406. border: none;
  407. background-color: var(--color-main-background);
  408. color: var(--color-main-text);
  409. .ui-datepicker-title {
  410. line-height: 1;
  411. font-weight: normal;
  412. }
  413. .ui-icon {
  414. opacity: .5;
  415. &.ui-icon-circle-triangle-e {
  416. background: url("../img/actions/arrow-right.svg") center center no-repeat;
  417. }
  418. &.ui-icon-circle-triangle-w {
  419. background: url("../img/actions/arrow-left.svg") center center no-repeat;
  420. }
  421. }
  422. .ui-state-hover .ui-icon {
  423. opacity: 1;
  424. }
  425. }
  426. .ui-datepicker-calendar {
  427. th {
  428. font-weight: normal;
  429. color: var(--color-text-lighter);
  430. opacity: .8;
  431. width: 26px;
  432. padding: 2px;
  433. }
  434. tr:hover {
  435. background-color: inherit;
  436. }
  437. td {
  438. &.ui-datepicker-today a:not(.ui-state-hover) {
  439. background-color: var(--color-background-darker);
  440. }
  441. &.ui-datepicker-current-day a.ui-state-active,
  442. .ui-state-hover,
  443. .ui-state-focus {
  444. background-color: var(--color-primary-element);
  445. color: var(--color-primary-element-text);
  446. font-weight: bold;
  447. }
  448. &.ui-datepicker-week-end:not(.ui-state-disabled) :not(.ui-state-hover),
  449. .ui-priority-secondary:not(.ui-state-hover) {
  450. color: var(--color-text-lighter);
  451. opacity: .8;
  452. }
  453. }
  454. }
  455. }
  456. .ui-datepicker-prev, .ui-datepicker-next {
  457. border: var(--color-border-dark);
  458. background: var(--color-main-background);
  459. }
  460. /* ---- jQuery UI timepicker ---- */
  461. .ui-widget.ui-timepicker {
  462. margin-top: 10px !important;
  463. width: auto !important;
  464. border-radius: var(--border-radius);
  465. z-index: 1600 !important;
  466. .ui-widget-content {
  467. border: none !important;
  468. }
  469. .ui-state-default,
  470. .ui-widget-content .ui-state-default,
  471. .ui-widget-header .ui-state-default {
  472. border: 1px solid transparent;
  473. background: inherit;
  474. }
  475. .ui-widget-header {
  476. padding: 7px;
  477. font-size: 13px;
  478. border: none;
  479. background-color: var(--color-main-background);
  480. color: var(--color-main-text);
  481. .ui-timepicker-title {
  482. line-height: 1;
  483. font-weight: normal;
  484. }
  485. }
  486. /* AM/PM fix */
  487. table.ui-timepicker tr .ui-timepicker-hour-cell:first-child {
  488. margin-left: 30px;
  489. }
  490. .ui-timepicker-table {
  491. th {
  492. font-weight: normal;
  493. color: var(--color-text-lighter);
  494. opacity: .8;
  495. &.periods {
  496. padding: 0;
  497. width: 30px;
  498. line-height: 30px;
  499. }
  500. }
  501. tr:hover {
  502. background-color: inherit;
  503. }
  504. td {
  505. &.ui-timepicker-hour-cell a.ui-state-active,
  506. &.ui-timepicker-minute-cell a.ui-state-active,
  507. .ui-state-hover,
  508. .ui-state-focus {
  509. background-color: var(--color-primary-element);
  510. color: var(--color-primary-element-text);
  511. font-weight: bold;
  512. }
  513. &.ui-timepicker-minutes:not(.ui-state-hover) {
  514. color: var(--color-text-lighter);
  515. }
  516. &.ui-timepicker-hours {
  517. border-right: 1px solid var(--color-border);
  518. }
  519. }
  520. }
  521. }
  522. /* ---- jQuery UI datepicker & timepicker global rules ---- */
  523. .ui-widget.ui-datepicker .ui-datepicker-calendar,
  524. .ui-widget.ui-timepicker table.ui-timepicker {
  525. tr {
  526. display: flex;
  527. flex-wrap: nowrap;
  528. justify-content: space-between;
  529. td {
  530. flex: 1 1 auto;
  531. margin: 0;
  532. padding: 2px;
  533. height: 26px;
  534. width: 26px;
  535. display: flex;
  536. align-items: center;
  537. justify-content: center;
  538. > * {
  539. border-radius: 50%;
  540. text-align: center;
  541. font-weight: normal;
  542. color: var(--color-main-text);
  543. display: block;
  544. line-height: 18px;
  545. width: 18px;
  546. height: 18px;
  547. padding: 3px;
  548. font-size: .9em;
  549. }
  550. }
  551. }
  552. }
  553. /* ---- DIALOGS ---- */
  554. .ui-dialog {
  555. position: fixed !important;
  556. }
  557. span.ui-icon {
  558. float: left;
  559. margin: 3px 7px 30px 0;
  560. }
  561. /* ---- TOOLTIPS ---- */
  562. .extra-data {
  563. padding-right: 5px !important;
  564. }
  565. /* ---- TAGS ---- */
  566. #tagsdialog {
  567. .content {
  568. width: 100%;
  569. height: 280px;
  570. }
  571. .scrollarea {
  572. overflow: auto;
  573. border: 1px solid var(--color-background-darker);
  574. width: 100%;
  575. height: 240px;
  576. }
  577. .bottombuttons {
  578. width: 100%;
  579. height: 30px;
  580. * {
  581. float: left;
  582. }
  583. }
  584. .taglist li {
  585. background: var(--color-background-dark);
  586. padding: .3em .8em;
  587. white-space: nowrap;
  588. overflow: hidden;
  589. text-overflow: ellipsis;
  590. -webkit-transition: background-color 500ms;
  591. transition: background-color 500ms;
  592. &:hover, &:active {
  593. background: var(--color-background-darker);
  594. }
  595. }
  596. .addinput {
  597. width: 90%;
  598. clear: both;
  599. }
  600. }
  601. /* ---- BREADCRUMB ---- */
  602. .breadcrumb {
  603. display: inline-flex;
  604. height: 50px;
  605. }
  606. li.crumb {
  607. display: inline-flex;
  608. background-image: url('../img/breadcrumb.svg?v=1');
  609. background-repeat: no-repeat;
  610. background-position: right center;
  611. height: 44px;
  612. background-size: auto 24px;
  613. flex: 0 0 auto;
  614. order: 1;
  615. padding-right: 7px;
  616. &.crumbmenu {
  617. order: 2;
  618. position: relative;
  619. a {
  620. opacity: 0.5
  621. }
  622. &.canDropChildren,
  623. &.canDrop {
  624. .popovermenu {
  625. display: block;
  626. }
  627. }
  628. // Fix because of the display flex
  629. .popovermenu {
  630. top: 100%;
  631. margin-right: 3px;
  632. ul {
  633. max-height: 345px;
  634. overflow-y: auto;
  635. overflow-x: hidden;
  636. padding-right: 5px;
  637. li.canDrop span:first-child {
  638. background-image: url('../img/filetypes/folder-drag-accept.svg?v=1') !important;
  639. }
  640. }
  641. .in-breadcrumb {
  642. display: none;
  643. }
  644. }
  645. }
  646. &.hidden {
  647. display: none;
  648. ~ .crumb {
  649. order: 3;
  650. }
  651. }
  652. > a,
  653. > span {
  654. position: relative;
  655. padding: 12px;
  656. opacity: 0.5;
  657. text-overflow: ellipsis;
  658. white-space: nowrap;
  659. overflow: hidden;
  660. flex: 0 0 auto;
  661. // Some sane max-width for each folder name
  662. max-width: 200px;
  663. &.icon-home,
  664. &.icon-delete {
  665. // Hide home text
  666. text-indent: -9999px;
  667. }
  668. }
  669. > a[class^='icon-'] {
  670. padding: 0;
  671. width: 44px;
  672. }
  673. &:not(:first-child) a {
  674. }
  675. &:last-child {
  676. font-weight: bold;
  677. margin-right: 10px;
  678. // Allow multiple span next to the main 'a'
  679. a ~ span {
  680. padding-left: 0;
  681. }
  682. }
  683. &:hover, &:focus, a:focus, &:active {
  684. opacity: 1;
  685. > a,
  686. > span {
  687. opacity: .7;
  688. }
  689. }
  690. }
  691. /* some feedback for hover/tap on breadcrumbs */
  692. .appear {
  693. opacity: 1;
  694. -webkit-transition: opacity 500ms ease 0s;
  695. -moz-transition: opacity 500ms ease 0s;
  696. -ms-transition: opacity 500ms ease 0s;
  697. -o-transition: opacity 500ms ease 0s;
  698. transition: opacity 500ms ease 0s;
  699. &.transparent {
  700. opacity: 0;
  701. }
  702. }
  703. /* LEGACY FIX only - do not use fieldsets for settings */
  704. fieldset {
  705. &.warning legend, &.update legend {
  706. top: 18px;
  707. position: relative;
  708. }
  709. &.warning legend + p, &.update legend + p {
  710. margin-top: 12px;
  711. }
  712. }
  713. /* for IE10 */
  714. @-ms-viewport {
  715. width: device-width;
  716. }
  717. /* hidden input type=file field */
  718. .hiddenuploadfield {
  719. display: none;
  720. width: 0;
  721. height: 0;
  722. opacity: 0;
  723. }