styles.scss 25 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402
  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. *
  12. * @license GNU AGPL version 3 or any later version
  13. *
  14. */
  15. 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 {
  16. margin: 0;
  17. padding: 0;
  18. border: 0;
  19. outline: 0;
  20. font-weight: inherit;
  21. font-size: 100%;
  22. font-family: inherit;
  23. vertical-align: baseline;
  24. cursor: default;
  25. }
  26. html, body {
  27. height: 100%;
  28. }
  29. article, aside, dialog, figure, footer, header, hgroup, nav, section {
  30. display: block;
  31. }
  32. body {
  33. line-height: 1.5;
  34. }
  35. table {
  36. border-collapse: separate;
  37. border-spacing: 0;
  38. white-space: nowrap;
  39. }
  40. caption, th, td {
  41. text-align: left;
  42. font-weight: normal;
  43. }
  44. table, td, th {
  45. vertical-align: middle;
  46. }
  47. a {
  48. border: 0;
  49. color: $color-main-text;
  50. text-decoration: none;
  51. cursor: pointer;
  52. * {
  53. cursor: pointer;
  54. }
  55. }
  56. input {
  57. cursor: pointer;
  58. * {
  59. cursor: pointer;
  60. }
  61. }
  62. select, .button span, label {
  63. cursor: pointer;
  64. }
  65. ul {
  66. list-style: none;
  67. }
  68. body {
  69. background-color: $color-main-background;
  70. font-weight: 400;
  71. font-size: .8em;
  72. line-height: 1.6em;
  73. font-family: 'Open Sans', Frutiger, Calibri, 'Myriad Pro', Myriad, sans-serif;
  74. color: $color-main-text;
  75. height: auto;
  76. }
  77. #body-login {
  78. text-align: center;
  79. background-color: $color-primary;
  80. background-image: url('../img/background.jpg?v=1');
  81. background-position: 50% 50%;
  82. background-repeat: no-repeat;
  83. background-size: cover;
  84. }
  85. .two-factor-header {
  86. text-align: center;
  87. }
  88. .two-factor-provider {
  89. text-align: center;
  90. width: 258px !important;
  91. display: inline-block;
  92. margin-bottom: 0 !important;
  93. background-color: rgba($color-main-text, 0.3) !important;
  94. border: none !important;
  95. }
  96. .two-factor-link {
  97. display: inline-block;
  98. padding: 12px;
  99. color: rgba($color-main-background, 0.75);
  100. }
  101. .float-spinner {
  102. height: 32px;
  103. display: none;
  104. }
  105. #body-login .float-spinner {
  106. margin-top: -32px;
  107. padding-top: 32px;
  108. }
  109. #nojavascript {
  110. position: fixed;
  111. top: 0;
  112. bottom: 0;
  113. height: 100%;
  114. width: 100%;
  115. z-index: 9000;
  116. text-align: center;
  117. background-color: rgba($color-main-text, 0.5);
  118. color: $color-primary-text;
  119. line-height: 125%;
  120. font-size: 24px;
  121. div {
  122. display: block;
  123. position: relative;
  124. width: 50%;
  125. top: 35%;
  126. margin: 0px auto;
  127. }
  128. a {
  129. color: $color-primary-text;
  130. border-bottom: 2px dotted $color-main-background;
  131. &:hover, &:focus {
  132. color: nc-lighten($color-main-text, 86%);
  133. }
  134. }
  135. }
  136. /* SCROLLING */
  137. ::-webkit-scrollbar {
  138. width: 5px;
  139. height: 5px;
  140. }
  141. ::-webkit-scrollbar-track-piece {
  142. background-color: transparent;
  143. }
  144. ::-webkit-scrollbar-thumb {
  145. background: nc-lighten($color-main-text, 86%);
  146. border-radius: 3px;
  147. }
  148. /* Searchbox */
  149. .searchbox {
  150. position: relative;
  151. input[type='search'] {
  152. position: relative;
  153. font-size: 1.2em;
  154. padding: 3px;
  155. padding-left: 25px;
  156. background: transparent url('../img/actions/search-white.svg?v=1') no-repeat 6px center;
  157. color: $color-primary-text;
  158. border: 0;
  159. border-radius: 3px;
  160. margin-top: 3px;
  161. width: 0;
  162. cursor: pointer;
  163. -webkit-transition: all 100ms;
  164. transition: all 100ms;
  165. -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=70)';
  166. opacity: .6;
  167. &:focus, &:active, &:valid {
  168. color: $color-primary-text;
  169. width: 155px;
  170. cursor: text;
  171. background-color: $color-primary !important;
  172. border: 1px solid rgba($color-primary-text, 0.5) !important;
  173. }
  174. &:hover, &:focus, &:active {
  175. -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)';
  176. opacity: 1;
  177. }
  178. & ~ .icon-close-white {
  179. display: inline;
  180. position: absolute;
  181. width: 15px;
  182. height: 32px;
  183. right: 3px;
  184. top: 0;
  185. &, &:focus, &:active, &:hover {
  186. border: none;
  187. background-color: transparent;
  188. }
  189. }
  190. &:not(:valid) ~ .icon-close-white {
  191. display: none;
  192. }
  193. &::-webkit-search-cancel-button {
  194. -webkit-appearance: none;
  195. }
  196. }
  197. }
  198. /* CONTENT ------------------------------------------------------------------ */
  199. #controls {
  200. box-sizing: border-box;
  201. position: fixed;
  202. top: 45px;
  203. right: 0;
  204. left: 0;
  205. height: 44px;
  206. width: 100%;
  207. padding: 0;
  208. margin: 0;
  209. background-color: rgba($color-main-background, 0.95);
  210. z-index: 50;
  211. -webkit-user-select: none;
  212. -moz-user-select: none;
  213. -ms-user-select: none;
  214. user-select: none;
  215. }
  216. /* position controls for apps with app-navigation */
  217. #app-navigation + #app-content #controls {
  218. left: 250px;
  219. }
  220. .viewer-mode #app-navigation + #app-content #controls {
  221. left: 0;
  222. }
  223. #controls {
  224. .button, button {
  225. box-sizing: border-box;
  226. display: inline-block;
  227. height: 36px;
  228. padding: 7px 10px;
  229. }
  230. input {
  231. &[type='submit'], &[type='text'], &[type='password'] {
  232. box-sizing: border-box;
  233. display: inline-block;
  234. height: 36px;
  235. padding: 7px 10px;
  236. }
  237. }
  238. select {
  239. box-sizing: border-box;
  240. display: inline-block;
  241. height: 36px;
  242. padding: 7px 10px;
  243. }
  244. .button.hidden {
  245. display: none;
  246. }
  247. }
  248. #content {
  249. position: relative;
  250. height: 100%;
  251. width: 100%;
  252. .hascontrols {
  253. margin-top: 45px;
  254. }
  255. }
  256. #content-wrapper {
  257. position: absolute;
  258. height: 100%;
  259. width: 100%;
  260. overflow-x: hidden;
  261. /* prevent horizontal scrollbar */
  262. padding-top: 45px;
  263. box-sizing: border-box;
  264. }
  265. /* allow horizontal scrollbar for personal and admin settings */
  266. #body-settings:not(.snapjs-left) .app-settings {
  267. overflow-x: auto;
  268. }
  269. #emptycontent, .emptycontent {
  270. color: nc-lighten($color-main-text, 53%);
  271. text-align: center;
  272. margin-top: 30vh;
  273. width: 100%;
  274. }
  275. #app-sidebar #emptycontent, #app-sidebar .emptycontent {
  276. margin-top: 10vh;
  277. }
  278. #emptycontent.emptycontent-search, .emptycontent.emptycontent-search {
  279. position: static;
  280. }
  281. #emptycontent h2, .emptycontent h2 {
  282. margin-bottom: 10px;
  283. line-height: 150%;
  284. }
  285. #emptycontent [class^='icon-'], .emptycontent [class^='icon-'], #emptycontent [class*=' icon-'], .emptycontent [class*=' icon-'] {
  286. background-size: 64px;
  287. height: 64px;
  288. width: 64px;
  289. margin: 0 auto 15px;
  290. -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=40)';
  291. opacity: .4;
  292. }
  293. /* LOG IN & INSTALLATION ------------------------------------------------------------ */
  294. /* Some whitespace to the top */
  295. #body-login {
  296. #header {
  297. padding-top: 100px;
  298. }
  299. background-attachment: fixed;
  300. /* fix background gradient */
  301. height: 100%;
  302. /* fix sticky footer */
  303. p.info, form fieldset legend, #datadirContent label {
  304. text-align: center;
  305. color: $color-primary-text;
  306. }
  307. form {
  308. fieldset .warning-info, input[type='checkbox'] + label {
  309. text-align: center;
  310. color: $color-primary-text;
  311. }
  312. .warning input[type='checkbox'] {
  313. &:hover + label, &:focus + label, + label {
  314. color: $color-primary-text !important;
  315. }
  316. }
  317. }
  318. .update {
  319. h2 {
  320. margin: 0 0 20px;
  321. }
  322. a {
  323. color: $color-primary-text;
  324. border-bottom: 1px solid nc-lighten($color-main-text, 73%);
  325. }
  326. }
  327. .infogroup {
  328. margin-bottom: 15px;
  329. }
  330. p#message img {
  331. vertical-align: middle;
  332. padding: 5px;
  333. }
  334. div.buttons {
  335. text-align: center;
  336. }
  337. p.info {
  338. margin: 0 auto;
  339. padding-top: 20px;
  340. -webkit-user-select: none;
  341. -moz-user-select: none;
  342. -ms-user-select: none;
  343. user-select: none;
  344. a {
  345. font-weight: 600;
  346. padding: 13px;
  347. margin: -13px;
  348. }
  349. }
  350. form {
  351. position: relative;
  352. width: 280px;
  353. margin: 16px auto;
  354. padding: 0;
  355. fieldset {
  356. margin-bottom: 20px;
  357. text-align: left;
  358. -webkit-user-select: none;
  359. -moz-user-select: none;
  360. -ms-user-select: none;
  361. user-select: none;
  362. }
  363. #sqliteInformation {
  364. margin-top: -20px;
  365. margin-bottom: 20px;
  366. }
  367. #adminaccount {
  368. margin-bottom: 15px;
  369. }
  370. fieldset legend {
  371. width: 100%;
  372. }
  373. }
  374. }
  375. /* Dark subtle label text */
  376. /* overrides another !important statement that sets this to unreadable black */
  377. #datadirContent label {
  378. width: 100%;
  379. }
  380. #body-login {
  381. #datadirContent label {
  382. display: block;
  383. margin: 0;
  384. }
  385. form #datadirField legend {
  386. margin-bottom: 15px;
  387. }
  388. #showAdvanced {
  389. padding: 13px;
  390. /* increase clickable area of Advanced dropdown */
  391. img {
  392. vertical-align: bottom;
  393. /* adjust position of Advanced dropdown arrow */
  394. margin-left: -4px;
  395. }
  396. }
  397. .icon-info-white {
  398. padding: 10px;
  399. }
  400. .strengthify-wrapper {
  401. display: inline-block;
  402. position: relative;
  403. left: 15px;
  404. top: -23px;
  405. width: 250px;
  406. }
  407. input {
  408. &[type='text'], &[type='password'], &[type='email'] {
  409. border: none;
  410. font-weight: 300;
  411. }
  412. }
  413. }
  414. /* strengthify wrapper */
  415. /* General new input field look */
  416. /* Nicely grouping input field sets */
  417. .grouptop, .groupmiddle, .groupbottom {
  418. position: relative;
  419. -webkit-user-select: none;
  420. -moz-user-select: none;
  421. -ms-user-select: none;
  422. user-select: none;
  423. }
  424. #body-login .grouptop input, .grouptop input {
  425. margin-bottom: 0 !important;
  426. border-bottom: 0 !important;
  427. border-bottom-left-radius: 0 !important;
  428. border-bottom-right-radius: 0 !important;
  429. }
  430. #body-login .groupmiddle input, .groupmiddle input {
  431. margin-top: 0 !important;
  432. margin-bottom: 0 !important;
  433. border-top: 0 !important;
  434. border-bottom: 0 !important;
  435. border-radius: 0 !important;
  436. box-shadow: 0 1px 0 rgba($color-main-text, 0.1) inset !important;
  437. }
  438. #body-login .groupbottom input, .groupbottom input {
  439. margin-top: 0 !important;
  440. border-top: 0 !important;
  441. border-top-right-radius: 0 !important;
  442. border-top-left-radius: 0 !important;
  443. box-shadow: 0 1px 0 rgba($color-main-text, 0.1) inset !important;
  444. }
  445. #body-login .groupbottom input[type=submit] {
  446. box-shadow: none !important;
  447. }
  448. /* keep the labels for screen readers but hide them since we use placeholders */
  449. label.infield {
  450. display: none;
  451. }
  452. #body-login {
  453. form {
  454. input[type='checkbox'] + label {
  455. position: relative;
  456. margin: 0;
  457. padding: 14px;
  458. vertical-align: middle;
  459. -webkit-user-select: none;
  460. -moz-user-select: none;
  461. -ms-user-select: none;
  462. user-select: none;
  463. }
  464. .errors {
  465. background: rgba($color-error, .35);
  466. border: 1px solid $color-error;
  467. list-style-indent: inside;
  468. margin: 0 0 2em;
  469. padding: 1em;
  470. }
  471. }
  472. .success {
  473. background: rgba($color-success, .35);
  474. border: 1px solid $color-success;
  475. width: 35%;
  476. margin: 30px auto;
  477. padding: 1em;
  478. text-align: center;
  479. }
  480. #showAdvanced > img {
  481. padding: 4px;
  482. box-sizing: border-box;
  483. }
  484. p.info a, #showAdvanced {
  485. color: $color-primary-text;
  486. }
  487. #remember_login {
  488. &:hover + label, &:focus + label {
  489. opacity: .6;
  490. }
  491. }
  492. #forgot-password {
  493. &:hover, &:focus {
  494. opacity: .6;
  495. }
  496. }
  497. p.info a {
  498. &:hover, &:focus {
  499. opacity: .6;
  500. }
  501. }
  502. }
  503. /* Show password toggle */
  504. #show, #dbpassword {
  505. position: absolute;
  506. right: 1em;
  507. top: .8em;
  508. float: right;
  509. }
  510. #show, #dbpassword, #personal-show {
  511. display: none;
  512. }
  513. #show + label, #dbpassword + label {
  514. right: 21px;
  515. top: 15px !important;
  516. margin: -14px !important;
  517. padding: 14px !important;
  518. }
  519. #show:checked + label, #dbpassword:checked + label, #personal-show:checked + label {
  520. -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=80)';
  521. opacity: .8;
  522. }
  523. #show + label, #dbpassword + label, #personal-show + label {
  524. position: absolute !important;
  525. height: 20px;
  526. width: 24px;
  527. background-image: url('../img/actions/toggle.svg?v=1');
  528. background-repeat: no-repeat;
  529. background-position: center;
  530. -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=30)';
  531. opacity: .3;
  532. }
  533. #show + label:before, #dbpassword + label:before, #personal-show + label:before {
  534. display: none;
  535. }
  536. #pass2, input[name='personal-password-clone'] {
  537. padding-right: 30px;
  538. }
  539. .personal-show-container {
  540. position: relative;
  541. display: inline-block;
  542. margin-right: 6px;
  543. }
  544. #personal-show + label {
  545. display: block;
  546. right: 0;
  547. margin-top: -36px;
  548. padding: 6px 4px;
  549. }
  550. /* Database selector */
  551. #body-login {
  552. form #selectDbType {
  553. text-align: center;
  554. white-space: nowrap;
  555. margin: 0;
  556. .info {
  557. white-space: normal;
  558. }
  559. label {
  560. position: static;
  561. margin: 0 -3px 5px;
  562. font-size: 12px;
  563. background: nc-darken($color-main-background, 3%);
  564. color: nc-lighten($color-main-text, 53%);
  565. cursor: pointer;
  566. border: 1px solid nc-lighten($color-main-text, 86%);
  567. span {
  568. cursor: pointer;
  569. padding: 10px 20px;
  570. }
  571. &.ui-state-hover, &.ui-state-active {
  572. color: $color-main-text;
  573. background-color: nc-darken($color-main-background, 8%);
  574. }
  575. }
  576. }
  577. .warning, .update, .error {
  578. display: block;
  579. padding: 10px;
  580. background-color: rgba($color-main-text, 0.3);
  581. color: $color-primary-text;
  582. text-align: left;
  583. border-radius: 3px;
  584. cursor: default;
  585. }
  586. .update {
  587. width: inherit;
  588. text-align: center;
  589. .appList {
  590. list-style: disc;
  591. text-align: left;
  592. margin-left: 25px;
  593. margin-right: 25px;
  594. }
  595. }
  596. .v-align {
  597. width: inherit;
  598. }
  599. .update img.float-spinner {
  600. float: left;
  601. }
  602. }
  603. /* Warnings and errors are the same */
  604. #body-user .warning, #body-settings .warning {
  605. margin-top: 8px;
  606. padding: 5px;
  607. background: rgba($color-error, .15);
  608. border-radius: 3px;
  609. }
  610. .warning {
  611. legend, a {
  612. color: $color-primary-text !important;
  613. font-weight: 600 !important;
  614. }
  615. }
  616. .error {
  617. a {
  618. color: $color-primary-text !important;
  619. font-weight: 600 !important;
  620. &.button {
  621. color: nc-lighten($color-main-text, 33%) !important;
  622. display: inline-block;
  623. text-align: center;
  624. }
  625. }
  626. pre {
  627. white-space: pre-wrap;
  628. text-align: left;
  629. }
  630. }
  631. .error-wide {
  632. width: 700px;
  633. margin-left: -200px !important;
  634. .button {
  635. color: black !important;
  636. }
  637. }
  638. .warning-input {
  639. border-color: $color-error !important;
  640. }
  641. /* Fixes for log in page, TODO should be removed some time */
  642. #body-login {
  643. ul.error-wide {
  644. margin-top: 35px;
  645. }
  646. .warning {
  647. margin: 0 7px 5px 4px;
  648. legend {
  649. -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)';
  650. opacity: 1;
  651. }
  652. }
  653. a.warning {
  654. cursor: pointer;
  655. }
  656. .updateProgress .error {
  657. margin-top: 10px;
  658. margin-bottom: 10px;
  659. }
  660. }
  661. /* fixes for update page TODO should be fixed some time in a proper way */
  662. /* this is just for an error while updating the ownCloud instance */
  663. /* Alternative Logins */
  664. #alternative-logins {
  665. legend {
  666. margin-bottom: 10px;
  667. }
  668. li {
  669. height: 40px;
  670. display: inline-block;
  671. white-space: nowrap;
  672. }
  673. }
  674. /* Log in and install button */
  675. #body-login input {
  676. font-size: 20px;
  677. margin: 5px;
  678. padding: 10px 10px 8px;
  679. &[type='text'], &[type='password'] {
  680. width: calc(100% - 10px); /* 5px margin */
  681. }
  682. &.login {
  683. width: 269px;
  684. background-position: right 16px center;
  685. }
  686. &[type='submit'] {
  687. padding: 10px 20px;
  688. /* larger log in and installation buttons */
  689. }
  690. }
  691. #remember_login {
  692. margin: 18px 5px 0 16px !important;
  693. }
  694. #body-login {
  695. .remember-login-container {
  696. display: inline-block;
  697. margin: 10px 0;
  698. text-align: center;
  699. width: 100%;
  700. }
  701. #forgot-password {
  702. padding: 11px;
  703. float: right;
  704. color: $color-primary-text;
  705. }
  706. .wrapper {
  707. min-height: 100%;
  708. margin: 0 auto -70px;
  709. width: 300px;
  710. }
  711. footer, .push {
  712. height: 70px;
  713. }
  714. }
  715. /* Sticky footer */
  716. /* round profile photos */
  717. .avatar, .avatardiv {
  718. border-radius: 50%;
  719. flex-shrink: 0;
  720. img {
  721. border-radius: 50%;
  722. flex-shrink: 0;
  723. }
  724. }
  725. td.avatar {
  726. border-radius: 0;
  727. }
  728. #notification-container {
  729. position: absolute;
  730. top: 0;
  731. width: 100%;
  732. text-align: center;
  733. }
  734. #notification {
  735. margin: 0 auto;
  736. max-width: 60%;
  737. z-index: 8000;
  738. background-color: $color-main-background;
  739. border: 0;
  740. padding: 1px 8px;
  741. display: none;
  742. position: relative;
  743. top: 0;
  744. border-bottom-left-radius: 3px;
  745. border-bottom-right-radius: 3px;
  746. -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=90)';
  747. opacity: .9;
  748. span {
  749. cursor: pointer;
  750. margin-left: 1em;
  751. }
  752. overflow-x: hidden;
  753. overflow-y: auto;
  754. max-height: 100px;
  755. .row {
  756. position: relative;
  757. .close {
  758. display: inline-block;
  759. vertical-align: middle;
  760. position: absolute;
  761. right: 0;
  762. top: 0;
  763. margin-top: 2px;
  764. }
  765. &.closeable {
  766. padding-right: 20px;
  767. }
  768. }
  769. }
  770. tr .action:not(.permanent), .selectedActions a {
  771. -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=0)';
  772. opacity: 0;
  773. }
  774. tr {
  775. &:hover .action, &:focus .action, .action.permanent {
  776. -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=50)';
  777. opacity: .5;
  778. }
  779. }
  780. .selectedActions a {
  781. -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=50)';
  782. opacity: .5;
  783. }
  784. tr .action {
  785. width: 16px;
  786. height: 16px;
  787. }
  788. .header-action {
  789. -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=80)';
  790. opacity: .8;
  791. }
  792. tr {
  793. &:hover .action:hover, &:focus .action:focus {
  794. -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)';
  795. opacity: 1;
  796. }
  797. }
  798. .selectedActions a {
  799. &:hover, &:focus {
  800. -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)';
  801. opacity: 1;
  802. }
  803. }
  804. .header-action {
  805. &:hover, &:focus {
  806. -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)';
  807. opacity: 1;
  808. }
  809. }
  810. tbody tr {
  811. &:hover, &:focus, &:active {
  812. background-color: nc-darken($color-main-background, 3%);
  813. }
  814. }
  815. code {
  816. font-family: 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', monospace;
  817. }
  818. #quota {
  819. cursor: default;
  820. margin: 30px !important;
  821. position: relative;
  822. padding: 0 !important;
  823. div {
  824. padding: 0;
  825. background-color: nc-darken($color-main-background, 10%);
  826. font-weight: normal;
  827. white-space: nowrap;
  828. border-bottom-left-radius: 3px;
  829. border-top-left-radius: 3px;
  830. min-width: 1%;
  831. max-width: 100%;
  832. }
  833. }
  834. #quotatext {
  835. padding: .6em 1em;
  836. }
  837. #quota div.quota-warning {
  838. background-color: $color-warning;
  839. }
  840. .pager {
  841. list-style: none;
  842. float: right;
  843. display: inline;
  844. margin: .7em 13em 0 0;
  845. li {
  846. display: inline-block;
  847. }
  848. }
  849. .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
  850. overflow: hidden;
  851. text-overflow: ellipsis;
  852. }
  853. .ui-icon-circle-triangle-e {
  854. background-image: url('../img/actions/play-next.svg?v=1');
  855. }
  856. .ui-icon-circle-triangle-w {
  857. background-image: url('../img/actions/play-previous.svg?v=1');
  858. }
  859. /* ---- jQuery UI datepicker ---- */
  860. .ui-widget.ui-datepicker {
  861. margin-top: 10px;
  862. padding: 4px 8px;
  863. width: auto;
  864. .ui-state-default,
  865. .ui-widget-content .ui-state-default,
  866. .ui-widget-header .ui-state-default {
  867. border: 1px solid transparent;
  868. background: inherit;
  869. }
  870. .ui-widget-header {
  871. padding: 7px;
  872. font-size: 13px;
  873. border: none;
  874. background-color: $color-main-background;
  875. color: $color-main-text;
  876. .ui-datepicker-title {
  877. line-height: 1;
  878. font-weight: 300;
  879. }
  880. .ui-icon {
  881. opacity: .5;
  882. &.ui-icon-circle-triangle-e {
  883. background: url("../img/actions/arrow-right.svg") center center no-repeat;
  884. }
  885. &.ui-icon-circle-triangle-w {
  886. background: url("../img/actions/arrow-left.svg") center center no-repeat;
  887. }
  888. }
  889. .ui-state-hover .ui-icon {
  890. opacity: 1;
  891. }
  892. }
  893. .ui-datepicker-calendar {
  894. th {
  895. font-weight: normal;
  896. color: nc-lighten($color-main-text, 33%);
  897. opacity: .8;
  898. }
  899. tr:hover {
  900. background-color: inherit;
  901. }
  902. td {
  903. > * {
  904. border-radius: 50%;
  905. text-align: center;
  906. font-weight: normal;
  907. color: $color-main-text;
  908. padding: 6px;
  909. line-height: 12px;
  910. }
  911. &.ui-datepicker-today a:not(.ui-state-hover) {
  912. background-color: nc-lighten($color-main-text, 86%);
  913. }
  914. &.ui-datepicker-current-day a.ui-state-active,
  915. .ui-state-hover,
  916. .ui-state-focus {
  917. background-color: $color-primary;
  918. color: $color-primary-text;
  919. font-weight: bold;
  920. }
  921. &.ui-datepicker-week-end :not(.ui-state-hover),
  922. .ui-priority-secondary:not(.ui-state-hover) {
  923. color: nc-lighten($color-main-text, 33%);
  924. opacity: .8;
  925. }
  926. }
  927. }
  928. }
  929. .ui-datepicker-prev, .ui-datepicker-next {
  930. border: nc-lighten($color-main-text, 86%);
  931. background: $color-main-background;
  932. }
  933. /* ---- DIALOGS ---- */
  934. #oc-dialog-filepicker-content {
  935. .dirtree {
  936. width: 92%;
  937. float: left;
  938. margin-left: 15px;
  939. overflow: hidden;
  940. div:first-child a {
  941. background-image: url('../img/places/home.svg?v=1');
  942. background-repeat: no-repeat;
  943. background-position: left center;
  944. }
  945. span {
  946. &:not(:last-child) {
  947. cursor: pointer;
  948. }
  949. &:last-child {
  950. font-weight: bold;
  951. }
  952. &:not(:last-child)::after {
  953. content: '>';
  954. padding: 3px;
  955. }
  956. }
  957. }
  958. .filelist-container {
  959. box-sizing: border-box;
  960. display: inline-block;
  961. overflow-y: auto;
  962. height: 100%;
  963. /** overflow under the button row */
  964. width: 100%;
  965. }
  966. .emptycontent {
  967. color: nc-lighten($color-main-text, 53%);
  968. text-align: center;
  969. margin-top: 80px;
  970. width: 100%;
  971. display: none;
  972. }
  973. .filelist {
  974. background-color: white;
  975. width: 100%;
  976. }
  977. #filestable.filelist {
  978. /* prevent the filepicker to overflow */
  979. min-width: initial;
  980. margin-bottom: 50px;
  981. }
  982. .filelist {
  983. td {
  984. padding: 14px;
  985. border-bottom: 1px solid nc-darken($color-main-background, 8%);
  986. }
  987. tr:last-child td {
  988. border-bottom: none;
  989. }
  990. .filename {
  991. overflow: hidden;
  992. white-space: nowrap;
  993. text-overflow: ellipsis;
  994. background-size: 32px;
  995. background-repeat: no-repeat;
  996. padding-left: 51px;
  997. background-position: 7px 7px;
  998. cursor: pointer;
  999. }
  1000. .filesize, .date {
  1001. width: 80px;
  1002. }
  1003. .filesize {
  1004. text-align: right;
  1005. }
  1006. }
  1007. .filepicker_element_selected {
  1008. background-color: lightblue;
  1009. }
  1010. }
  1011. .ui-dialog {
  1012. position: fixed !important;
  1013. }
  1014. span.ui-icon {
  1015. float: left;
  1016. margin: 3px 7px 30px 0;
  1017. }
  1018. /* ---- CONTACTS MENU ---- */
  1019. #contactsmenu {
  1020. .menutoggle {
  1021. background-size: 16px 16px;
  1022. padding: 14px;
  1023. cursor: pointer;
  1024. opacity: .6;
  1025. }
  1026. }
  1027. #contactsmenu > .menu {
  1028. /* show ~4.5 entries */
  1029. height: 278px;
  1030. width: 350px;
  1031. max-width: 90%;
  1032. right: 13px;
  1033. &::after {
  1034. right: 61px;
  1035. }
  1036. .emptycontent {
  1037. margin-top: 5vh !important;
  1038. margin-bottom: 2vh;
  1039. .icon-loading,
  1040. .icon-search {
  1041. display: inline-block;
  1042. }
  1043. }
  1044. .content {
  1045. max-height: calc(100% - 50px);
  1046. height: 100%;
  1047. overflow-y: auto;
  1048. .footer {
  1049. text-align: center;
  1050. a {
  1051. display: block;
  1052. width: 100%;
  1053. padding: 12px 0;
  1054. opacity: .5;
  1055. }
  1056. }
  1057. }
  1058. .contact {
  1059. display: flex;
  1060. position: relative;
  1061. align-items: center;
  1062. padding: 3px 3px 3px 10px;
  1063. border-bottom: 1px solid #eeeeee;
  1064. :last-of-type {
  1065. border-bottom: none;
  1066. }
  1067. .avatar {
  1068. height: 32px;
  1069. width: 32px;
  1070. display: inline-block;
  1071. }
  1072. .body {
  1073. flex-grow: 1;
  1074. padding-left: 8px;
  1075. div {
  1076. position: relative;
  1077. width: 100%;
  1078. }
  1079. .full-name, .last-message {
  1080. /* TODO: don't use fixed width */
  1081. max-width: 204px;
  1082. overflow: hidden;
  1083. white-space: nowrap;
  1084. text-overflow: ellipsis;
  1085. }
  1086. .last-message {
  1087. opacity: .5;
  1088. }
  1089. }
  1090. .top-action, .second-action, .other-actions {
  1091. width: 16px;
  1092. height: 16px;
  1093. padding: 14px;
  1094. opacity: .5;
  1095. cursor: pointer;
  1096. :hover {
  1097. opacity: 1;
  1098. }
  1099. }
  1100. /* actions menu */
  1101. .menu {
  1102. top: 47px;
  1103. margin-right: 13px;
  1104. }
  1105. .popovermenu::after {
  1106. right: 2px;
  1107. }
  1108. }
  1109. }
  1110. #contactsmenu-search {
  1111. width: calc(100% - 16px);
  1112. margin: 8px;
  1113. }
  1114. /* ---- TOOLTIPS ---- */
  1115. .extra-data {
  1116. padding-right: 5px !important;
  1117. }
  1118. /* ---- TAGS ---- */
  1119. #tagsdialog {
  1120. .content {
  1121. width: 100%;
  1122. height: 280px;
  1123. }
  1124. .scrollarea {
  1125. overflow: auto;
  1126. border: 1px solid nc-lighten($color-main-text, 86%);
  1127. width: 100%;
  1128. height: 240px;
  1129. }
  1130. .bottombuttons {
  1131. width: 100%;
  1132. height: 30px;
  1133. * {
  1134. float: left;
  1135. }
  1136. }
  1137. .taglist li {
  1138. background: nc-darken($color-main-background, 3%);
  1139. padding: .3em .8em;
  1140. white-space: nowrap;
  1141. overflow: hidden;
  1142. text-overflow: ellipsis;
  1143. -webkit-transition: background-color 500ms;
  1144. transition: background-color 500ms;
  1145. &:hover, &:active {
  1146. background: nc-darken($color-main-background, 8%);
  1147. }
  1148. }
  1149. .addinput {
  1150. width: 90%;
  1151. clear: both;
  1152. }
  1153. }
  1154. /* ---- BREADCRUMB ---- */
  1155. div.crumb {
  1156. float: left;
  1157. display: block;
  1158. background-image: url('../img/breadcrumb.svg?v=1');
  1159. background-repeat: no-repeat;
  1160. background-position: right center;
  1161. height: 44px;
  1162. background-size: auto 24px;
  1163. &.hidden {
  1164. display: none;
  1165. }
  1166. a, > span {
  1167. position: relative;
  1168. top: 12px;
  1169. padding: 14px 24px 14px 17px;
  1170. color: nc-lighten($color-main-text, 33%);
  1171. }
  1172. &.last a {
  1173. padding-right: 0;
  1174. }
  1175. &:first-child a {
  1176. position: relative;
  1177. top: 13px;
  1178. padding-right: 14px;
  1179. }
  1180. &.last {
  1181. font-weight: 600;
  1182. margin-right: 10px;
  1183. }
  1184. &.ellipsized {
  1185. padding: 0 10px 0 5px;
  1186. }
  1187. a.ellipsislink {
  1188. padding: 0 !important;
  1189. position: relative;
  1190. top: 8px !important;
  1191. }
  1192. &:hover, &:focus, a:focus, &:active {
  1193. -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=70)';
  1194. opacity: .7;
  1195. }
  1196. }
  1197. /* some feedback for hover/tap on breadcrumbs */
  1198. .appear {
  1199. opacity: 1;
  1200. -webkit-transition: opacity 500ms ease 0s;
  1201. -moz-transition: opacity 500ms ease 0s;
  1202. -ms-transition: opacity 500ms ease 0s;
  1203. -o-transition: opacity 500ms ease 0s;
  1204. transition: opacity 500ms ease 0s;
  1205. &.transparent {
  1206. opacity: 0;
  1207. }
  1208. }
  1209. /* public footer */
  1210. #body-public footer {
  1211. position: relative;
  1212. text-align: center;
  1213. .info {
  1214. color: nc-lighten($color-main-text, 33%);
  1215. text-align: center;
  1216. margin: 0 auto;
  1217. padding: 20px 0;
  1218. a {
  1219. color: nc-lighten($color-main-text, 33%);
  1220. font-weight: 600;
  1221. padding: 13px;
  1222. margin: -13px;
  1223. }
  1224. }
  1225. }
  1226. /* LEGACY FIX only - do not use fieldsets for settings */
  1227. fieldset {
  1228. &.warning legend, &.update legend {
  1229. top: 18px;
  1230. position: relative;
  1231. }
  1232. &.warning legend + p, &.update legend + p {
  1233. margin-top: 12px;
  1234. }
  1235. }
  1236. /* for IE10 */
  1237. @-ms-viewport {
  1238. width: device-width;
  1239. }
  1240. /* hidden input type=file field */
  1241. .hiddenuploadfield {
  1242. display: none;
  1243. width: 0;
  1244. height: 0;
  1245. opacity: 0;
  1246. -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=0)';
  1247. }