settings.scss 26 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565156615671568156915701571157215731574157515761577157815791580158115821583158415851586158715881589159015911592159315941595159615971598159916001601160216031604160516061607160816091610161116121613161416151616161716181619162016211622162316241625162616271628162916301631163216331634163516361637163816391640164116421643164416451646164716481649165016511652165316541655165616571658165916601661166216631664166516661667166816691670167116721673167416751676167716781679168016811682168316841685168616871688168916901691169216931694169516961697169816991700170117021703170417051706170717081709171017111712171317141715171617171718171917201721172217231724172517261727172817291730173117321733173417351736173717381739174017411742174317441745174617471748174917501751175217531754175517561757175817591760176117621763176417651766176717681769177017711772
  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. input {
  5. &#openid, &#webdav {
  6. width: 20em;
  7. }
  8. }
  9. /* PERSONAL */
  10. .clear {
  11. clear: both;
  12. }
  13. /* icons for sidebar */
  14. .nav-icon-personal-settings {
  15. @include icon-color('personal', 'settings', $color-black);
  16. }
  17. .nav-icon-security {
  18. @include icon-color('toggle-filelist', 'settings', $color-black);
  19. }
  20. .nav-icon-clientsbox {
  21. @include icon-color('change', 'settings', $color-black);
  22. }
  23. .nav-icon-federated-cloud {
  24. @include icon-color('share', 'settings', $color-black);
  25. }
  26. .nav-icon-second-factor-backup-codes, .nav-icon-ssl-root-certificate {
  27. @include icon-color('password', 'settings', $color-black);
  28. }
  29. #avatarform {
  30. .avatardiv {
  31. margin: 10px auto;
  32. }
  33. .warning {
  34. width: 100%;
  35. }
  36. .jcrop-keymgr {
  37. display: none !important;
  38. }
  39. }
  40. #displayavatar {
  41. text-align: center;
  42. }
  43. #uploadavatarbutton, #selectavatar, #removeavatar {
  44. padding: 21px;
  45. }
  46. .jcrop-holder {
  47. z-index: 500;
  48. }
  49. #cropper {
  50. float: left;
  51. z-index: 500;
  52. /* float cropper above settings page to prevent unexpected flowing from dynamically sized element */
  53. position: fixed;
  54. background-color: rgba(0, 0, 0, 0.2);
  55. box-sizing: border-box;
  56. top: 45px;
  57. left: 0;
  58. width: 100%;
  59. height: calc(100% - 45px);
  60. .inner-container {
  61. z-index: 2001;
  62. /* above the top bar if needed */
  63. position: absolute;
  64. top: 50%;
  65. left: 50%;
  66. transform: translate(-50%, -50%);
  67. background: #fff;
  68. color: #333;
  69. border-radius: var(--border-radius-large);
  70. box-shadow: 0 0 10px var(--color-box-shadow);
  71. padding: 15px;
  72. .jcrop-holder,
  73. .jcrop-holder img,
  74. img.jcrop-preview {
  75. border-radius: var(--border-radius);
  76. }
  77. .button {
  78. margin-top: 15px;
  79. }
  80. .primary {
  81. float: right;
  82. }
  83. }
  84. }
  85. #personal-settings-avatar-container {
  86. display: inline-grid;
  87. grid-template-columns: 1fr;
  88. grid-template-rows: 2fr 1fr;
  89. vertical-align: top;
  90. }
  91. .profile-settings-container {
  92. display: inline-grid;
  93. grid-template-columns: 1fr;
  94. grid-template-rows: 1fr 2fr 1fr;
  95. }
  96. .personal-show-container {
  97. width: 100%;
  98. }
  99. .personal-settings-setting-box input {
  100. &[type='text'], &[type='email'], &[type='tel'], &[type='url'] {
  101. width: 100%;
  102. }
  103. }
  104. select {
  105. &#timezone,
  106. &#languageinput,
  107. &#localeinput {
  108. width: 100%;
  109. }
  110. }
  111. #personal-settings {
  112. display: grid;
  113. padding: 20px;
  114. max-width: 1500px;
  115. grid-template-columns: 1fr 2fr 1fr;
  116. .section {
  117. padding: 10px 10px;
  118. border: 0;
  119. h2 {
  120. margin-bottom: 12px;
  121. }
  122. }
  123. .personal-info {
  124. margin-right: 10%;
  125. margin-bottom: 12px;
  126. margin-top: 12px;
  127. }
  128. .personal-info[class^='icon-'], .personal-info[class*=' icon-'] {
  129. background-position: 0px 2px;
  130. padding-left: 30px;
  131. opacity: 0.7;
  132. }
  133. }
  134. @media (min-width: 1200px) and (max-width: 1400px) {
  135. #personal-settings {
  136. display: grid;
  137. grid-template-columns: 1fr 2fr;
  138. #personal-settings-avatar-container {
  139. grid-template-columns: 1fr;
  140. grid-template-rows: 1fr;
  141. }
  142. .personal-settings-container {
  143. grid-template-columns: 1fr 1fr;
  144. grid-template-rows: 1fr 1fr 1fr;
  145. }
  146. .profile-settings-container {
  147. grid-template-columns: 1fr 1fr;
  148. grid-template-rows: 1fr;
  149. grid-column: 2;
  150. }
  151. }
  152. }
  153. @media (max-width: 1200px) {
  154. #personal-settings {
  155. display: grid;
  156. grid-template-columns: 1fr;
  157. #personal-settings-avatar-container {
  158. grid-template-rows: 1fr;
  159. }
  160. .personal-settings-container {
  161. grid-template-columns: 1fr 1fr;
  162. grid-template-rows: 1fr 1fr 1fr;
  163. }
  164. .profile-settings-container {
  165. grid-template-columns: 1fr 1fr;
  166. grid-template-rows: 1fr;
  167. }
  168. }
  169. }
  170. @media (max-width: 560px) {
  171. #personal-settings {
  172. display: grid;
  173. grid-template-columns: 1fr;
  174. #personal-settings-avatar-container {
  175. grid-template-rows: 1fr;
  176. }
  177. .personal-settings-container {
  178. grid-template-columns: 1fr;
  179. grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
  180. }
  181. .profile-settings-container {
  182. grid-template-columns: 1fr;
  183. grid-template-rows: 1fr 1fr;
  184. }
  185. }
  186. }
  187. .personal-settings-container {
  188. display: inline-grid;
  189. grid-template-columns: 1fr 1fr;
  190. grid-template-rows: 1fr 1fr 2fr;
  191. &:after {
  192. clear: both;
  193. }
  194. > div {
  195. h3 {
  196. position: relative;
  197. display: inline-flex;
  198. flex-wrap: nowrap;
  199. justify-content: flex-start;
  200. width: 100%;
  201. > label {
  202. white-space: nowrap;
  203. text-overflow: ellipsis;
  204. overflow: hidden;
  205. }
  206. }
  207. > form span {
  208. &[class^='icon-checkmark'], &[class^='icon-error'] {
  209. position: relative;
  210. right: 8px;
  211. top: -28px;
  212. pointer-events: none;
  213. float: right;
  214. }
  215. }
  216. }
  217. .verify {
  218. position: relative;
  219. left: 100%;
  220. top: 0;
  221. height: 0;
  222. img {
  223. padding: 12px 7px 6px;
  224. }
  225. }
  226. .verify-action {
  227. cursor: pointer;
  228. }
  229. input:disabled {
  230. background-color: white;
  231. color: black;
  232. border: none;
  233. opacity: 100;
  234. }
  235. }
  236. #body-settings #quota {
  237. cursor: default;
  238. position: relative;
  239. progress {
  240. height: 6px;
  241. &::-moz-progress-bar {
  242. border-radius: 3px 0 0 3px;
  243. }
  244. &::-webkit-progress-value {
  245. border-radius: 3px 0 0 3px;
  246. }
  247. }
  248. div {
  249. font-weight: normal;
  250. white-space: nowrap;
  251. }
  252. }
  253. /* verify accounts */
  254. /* only show pointer cursor when popup will be there */
  255. .verification-dialog {
  256. display: none;
  257. right: -9px;
  258. top: 40px;
  259. width: 275px;
  260. p {
  261. padding: 10px;
  262. }
  263. .verificationCode {
  264. font-family: monospace;
  265. display: block;
  266. overflow-wrap: break-word;
  267. }
  268. }
  269. .federation-menu {
  270. position: relative;
  271. cursor: pointer;
  272. margin-left: 10px;
  273. &:focus {
  274. .icon-federation-menu {
  275. opacity: 0.7;
  276. }
  277. }
  278. .icon-federation-menu {
  279. padding-left: 16px;
  280. background-size: 16px;
  281. background-position: left center;
  282. opacity: .3;
  283. cursor: inherit;
  284. .icon-triangle-s {
  285. display: inline-block;
  286. vertical-align: middle;
  287. cursor: inherit;
  288. }
  289. }
  290. .federationScopeMenu {
  291. top: 44px;
  292. &.popovermenu {
  293. .menuitem {
  294. // override h3 heading font size
  295. font-size: 12.8px;
  296. line-height: 1.6em;
  297. .menuitem-text-detail {
  298. opacity: .75;
  299. }
  300. &.active {
  301. box-shadow: inset 2px 0 var(--color-primary);
  302. .menuitem-text {
  303. font-weight: bold;
  304. }
  305. }
  306. }
  307. }
  308. }
  309. }
  310. #groups-groups {
  311. padding-top: 5px;
  312. }
  313. .clientsbox img {
  314. height: 60px;
  315. }
  316. #sslCertificate {
  317. tr.expired {
  318. background-color: rgba(255, 0, 0, 0.5);
  319. }
  320. td {
  321. padding: 5px;
  322. }
  323. }
  324. #displaynameerror,
  325. #displaynamechanged {
  326. display: none;
  327. }
  328. input#identity {
  329. width: 20em;
  330. }
  331. #showWizard {
  332. display: inline-block;
  333. }
  334. .msg {
  335. &.success {
  336. color: #fff;
  337. background-color: #47a447;
  338. padding: 3px;
  339. }
  340. &.error {
  341. color: #fff;
  342. background-color: #d2322d;
  343. padding: 3px;
  344. }
  345. }
  346. table.nostyle {
  347. label {
  348. margin-right: 2em;
  349. }
  350. td {
  351. padding: 0.2em 0;
  352. }
  353. }
  354. #security-password {
  355. #passwordform {
  356. display: flex;
  357. flex-wrap: wrap;
  358. #pass1, .personal-show-container, #passwordbutton {
  359. flex-shrink: 1;
  360. width: 200px;
  361. min-width: 150px;
  362. }
  363. #pass2 {
  364. width: 100%;
  365. }
  366. .password-state {
  367. display: inline-block;
  368. }
  369. .strengthify-wrapper {
  370. position: absolute;
  371. left: 0;
  372. width: 100%;
  373. border-radius: 0 0 2px 2px;
  374. margin-top: -6px;
  375. overflow: hidden;
  376. height: 3px;
  377. }
  378. }
  379. }
  380. /* Two-Factor Authentication (2FA) */
  381. #two-factor-auth {
  382. h3 {
  383. margin-top: 24px;
  384. }
  385. li > div {
  386. margin-left: 20px;
  387. }
  388. .two-factor-provider-settings-icon {
  389. width: 16px;
  390. height: 16px;
  391. vertical-align: sub;
  392. }
  393. }
  394. .social-button {
  395. padding-left: 0 !important;
  396. margin-left: -10px;
  397. img {
  398. padding: 10px;
  399. }
  400. }
  401. /* USERS */
  402. .isgroup {
  403. .groupname {
  404. width: 85%;
  405. display: block;
  406. overflow: hidden;
  407. text-overflow: ellipsis;
  408. }
  409. &.active .groupname {
  410. width: 65%;
  411. }
  412. }
  413. li.active {
  414. .delete,
  415. .rename {
  416. display: block;
  417. }
  418. }
  419. .app-navigation-entry-utils {
  420. .delete,
  421. .rename {
  422. display: none;
  423. }
  424. }
  425. #usersearchform {
  426. position: absolute;
  427. top: 2px;
  428. right: 0;
  429. input {
  430. width: 150px;
  431. }
  432. label {
  433. font-weight: bold;
  434. }
  435. }
  436. /* display table at full width */
  437. table.grid {
  438. width: 100%;
  439. th {
  440. height: 2em;
  441. color: #999;
  442. border-bottom: 1px solid var(--color-border);
  443. padding: 0 .5em;
  444. padding-left: .8em;
  445. text-align: left;
  446. font-weight: normal;
  447. }
  448. td {
  449. border-bottom: 1px solid var(--color-border);
  450. padding: 0 .5em;
  451. padding-left: .8em;
  452. text-align: left;
  453. font-weight: normal;
  454. }
  455. }
  456. td, th {
  457. &.name {
  458. padding-left: .8em;
  459. min-width: 5em;
  460. max-width: 12em;
  461. text-overflow: ellipsis;
  462. overflow: hidden;
  463. }
  464. &.password {
  465. padding-left: .8em;
  466. > img {
  467. visibility: hidden;
  468. }
  469. }
  470. &.displayName > img {
  471. visibility: hidden;
  472. }
  473. &.password,
  474. &.mailAddress {
  475. min-width: 5em;
  476. max-width: 12em;
  477. cursor: pointer;
  478. span {
  479. width: 90%;
  480. display: inline-block;
  481. text-overflow: ellipsis;
  482. overflow: hidden;
  483. }
  484. }
  485. &.mailAddress {
  486. cursor: pointer;
  487. }
  488. &.password > span {
  489. margin-right: 1.2em;
  490. color: #C7C7C7;
  491. }
  492. }
  493. span.usersLastLoginTooltip {
  494. white-space: nowrap;
  495. }
  496. /* dropdowns will be relative to this element */
  497. #userlist {
  498. position: relative;
  499. .storageLocation, .userBackend, .lastLogin {
  500. display: none;
  501. }
  502. th.name {
  503. color: #000;
  504. }
  505. tr {
  506. height: 50px;
  507. }
  508. .mailAddress .loading-small {
  509. width: 16px;
  510. height: 16px;
  511. margin-left: -26px;
  512. position: relative;
  513. top: 3px;
  514. }
  515. .groupsListContainer.hidden {
  516. display: none;
  517. }
  518. thead th,
  519. thead tr {
  520. z-index: 100;
  521. background-color: var(--color-main-background);
  522. @include position('sticky');
  523. // positional attribute is required for position to take affect.
  524. top: 0;
  525. }
  526. }
  527. #newuser {
  528. .groupsListContainer.hidden {
  529. display: none;
  530. }
  531. .multiselect {
  532. min-width: 150px !important;
  533. position: relative;
  534. top: -1px;
  535. }
  536. input {
  537. &:not([type='submit']),
  538. &:not([type='reset']) {
  539. width: 100%;
  540. }
  541. }
  542. .userActions {
  543. position: sticky;
  544. right: 60px;
  545. z-index: 20;
  546. }
  547. .userActions input {
  548. width: 44px;
  549. height: 44px;
  550. &.icon-close {
  551. border: none;
  552. background-color: initial;
  553. opacity: .5;
  554. }
  555. &:hover {
  556. opacity: 1;
  557. }
  558. }
  559. }
  560. /* used to highlight a user row in red */
  561. #userlist tr.row-warning {
  562. background-color: #FDD;
  563. }
  564. /* APPS */
  565. #app-content > svg.app-filter {
  566. float: left;
  567. height: 0;
  568. width: 0;
  569. }
  570. #app-category-app-bundles {
  571. margin-bottom: 20px;
  572. }
  573. .appinfo {
  574. margin: 1em 40px;
  575. }
  576. #app-navigation {
  577. /* Navigation icons */
  578. img {
  579. margin-bottom: -3px;
  580. margin-right: 6px;
  581. width: 16px;
  582. }
  583. li span.no-icon {
  584. padding-left: 32px;
  585. }
  586. ul li.active > span.utils {
  587. .delete, .rename {
  588. display: block;
  589. }
  590. }
  591. .appwarning {
  592. background: #fcc;
  593. }
  594. &.appwarning:hover {
  595. background: #fbb;
  596. }
  597. .app-external {
  598. color: var(--color-text-maxcontrast);
  599. }
  600. }
  601. span.version {
  602. margin-left: 1em;
  603. margin-right: 1em;
  604. color: var(--color-text-maxcontrast);
  605. }
  606. .app-version {
  607. color: var(--color-text-maxcontrast);
  608. }
  609. .app-level {
  610. margin-top: 8px;
  611. span {
  612. color: var(--color-text-maxcontrast);
  613. background-color: transparent;
  614. border: 1px solid var(--color-text-maxcontrast);
  615. border-radius: var(--border-radius);
  616. padding: 3px 6px;
  617. }
  618. a {
  619. padding: 10px;
  620. margin: -6px;
  621. white-space: nowrap;
  622. }
  623. .official {
  624. background-position: left center;
  625. background-position: 5px center;
  626. padding-left: 25px;
  627. }
  628. .supported {
  629. border-color: var(--color-success);
  630. background-position: left center;
  631. background-position: 5px center;
  632. padding-left: 25px;
  633. color: var(--color-success);
  634. }
  635. }
  636. .app-score {
  637. position: relative;
  638. top: 4px;
  639. opacity: .5;
  640. }
  641. .app-settings-content {
  642. #searchresults {
  643. display: none;
  644. }
  645. }
  646. #apps-list.store {
  647. .section {
  648. border: 0;
  649. }
  650. .app-name {
  651. display: block;
  652. margin: 5px 0;
  653. }
  654. .app-name, .app-image * {
  655. cursor: pointer;
  656. }
  657. .app-summary {
  658. opacity: .7;
  659. }
  660. .app-image-icon .icon-settings-dark {
  661. width: 100%;
  662. height: 150px;
  663. background-size: 45px;
  664. opacity: 0.5;
  665. }
  666. .app-score-image {
  667. height: 14px;
  668. }
  669. .actions {
  670. margin-top: 10px;
  671. }
  672. }
  673. #app-sidebar #app-details-view {
  674. h2 {
  675. .icon-settings-dark,
  676. svg {
  677. display: inline-block;
  678. width: 16px;
  679. height: 16px;
  680. margin-right: 10px;
  681. opacity: .7;
  682. }
  683. }
  684. .app-level {
  685. clear: right;
  686. width: 100%;
  687. .supported,
  688. .official {
  689. vertical-align: top;
  690. }
  691. .app-score-image {
  692. float: right;
  693. }
  694. }
  695. .app-author, .app-licence {
  696. color: var(--color-text-maxcontrast);
  697. }
  698. .app-dependencies {
  699. margin: 10px 0;
  700. }
  701. .app-description p {
  702. margin: 10px 0;
  703. }
  704. .close {
  705. position: absolute;
  706. top: 0;
  707. right: 0;
  708. padding: 14px;
  709. opacity: 0.5;
  710. z-index: 1;
  711. width: 44px;
  712. height: 44px;
  713. }
  714. .actions {
  715. display: flex;
  716. align-items: center;
  717. .app-groups {
  718. padding: 5px;
  719. }
  720. }
  721. .appslink {
  722. text-decoration: underline;
  723. margin-right: 5px;
  724. }
  725. .app-level,
  726. .actions,
  727. .documentation,
  728. .app-dependencies,
  729. .app-description {
  730. margin: 20px 0;
  731. }
  732. }
  733. @media only screen and (min-width: 1601px) {
  734. .store .section {
  735. width: 25%;
  736. }
  737. .with-app-sidebar .store .section {
  738. width: 33%;
  739. }
  740. }
  741. @media only screen and (max-width: 1600px) {
  742. .store .section {
  743. width: 25%;
  744. }
  745. .with-app-sidebar .store .section {
  746. width: 33%;
  747. }
  748. }
  749. @media only screen and (max-width: 1400px) {
  750. .store .section {
  751. width: 33%;
  752. }
  753. .with-app-sidebar .store .section {
  754. width: 50%;
  755. }
  756. }
  757. @media only screen and (max-width: 900px) {
  758. .store .section {
  759. width: 50%;
  760. }
  761. .with-app-sidebar .store .section {
  762. width: 100%;
  763. }
  764. }
  765. @media only screen and (max-width: $breakpoint-mobile) {
  766. .store .section {
  767. width: 50%;
  768. }
  769. }
  770. @media only screen and (max-width: 480px) {
  771. .store .section {
  772. width: 100%;
  773. }
  774. }
  775. /* hide app version and level on narrower screens */
  776. @media only screen and (max-width: 900px) {
  777. .apps-list.installed {
  778. .app-version, .app-level {
  779. display: none !important;
  780. }
  781. }
  782. }
  783. @media only screen and (max-width: 500px) {
  784. .apps-list.installed .app-groups {
  785. display: none !important;
  786. }
  787. }
  788. #version.section {
  789. border-bottom: none;
  790. }
  791. .section {
  792. margin-bottom: 0;
  793. /* section divider lines, none needed for last one */
  794. &:not(:last-child) {
  795. border-bottom: 1px solid var(--color-border);
  796. }
  797. /* correctly display help icons next to headings */
  798. h2 {
  799. margin-bottom: 22px;
  800. .icon-info {
  801. padding: 6px 20px;
  802. vertical-align: text-bottom;
  803. display: inline-block;
  804. }
  805. }
  806. }
  807. .personal-settings-setting-box .section {
  808. padding: 10px 30px;
  809. }
  810. .followupsection {
  811. display: block;
  812. padding: 0 30px 30px 30px;
  813. color: #555;
  814. }
  815. .app-image {
  816. position: relative;
  817. height: 150px;
  818. opacity: 1;
  819. overflow: hidden;
  820. }
  821. .app-name, .app-version, .app-score, .app-level {
  822. display: inline-block;
  823. }
  824. .app-description-toggle-show, .app-description-toggle-hide {
  825. clear: both;
  826. padding: 7px 0;
  827. cursor: pointer;
  828. opacity: .5;
  829. }
  830. .app-description-container {
  831. clear: both;
  832. position: relative;
  833. top: 7px;
  834. }
  835. .app-description {
  836. clear: both;
  837. }
  838. #app-category-1 {
  839. margin-bottom: 18px;
  840. }
  841. /* capitalize 'Other' category */
  842. #app-category-925 {
  843. text-transform: capitalize;
  844. }
  845. .app-dependencies {
  846. color: #ce3702;
  847. }
  848. .missing-dependencies {
  849. list-style: initial;
  850. list-style-type: initial;
  851. list-style-position: inside;
  852. }
  853. .apps-list {
  854. .section {
  855. cursor: pointer;
  856. }
  857. .app-list-move {
  858. transition: transform 1s;
  859. }
  860. #app-list-update-all {
  861. margin-left: 10px;
  862. }
  863. .counter {
  864. padding-left: $header-height - 10px;
  865. margin: 10px;
  866. }
  867. &.installed {
  868. .apps-list-container {
  869. display: table;
  870. width: 100%;
  871. height: auto;
  872. }
  873. margin-bottom: 100px;
  874. .section {
  875. display: table-row;
  876. padding: 0;
  877. margin: 0;
  878. > * {
  879. display: table-cell;
  880. height: initial;
  881. vertical-align: middle;
  882. float: none;
  883. border-bottom: 1px solid var(--color-border);
  884. padding: 6px;
  885. box-sizing: border-box;
  886. }
  887. &.selected {
  888. background-color: var(--color-background-dark);
  889. }
  890. }
  891. .groups-enable {
  892. margin-top: 0;
  893. label {
  894. margin-right: 3px;
  895. }
  896. }
  897. .app-image {
  898. width: 44px;
  899. height: auto;
  900. text-align: right;
  901. }
  902. .app-image-icon svg,
  903. .app-image-icon .icon-settings-dark {
  904. margin-top: 5px;
  905. width: 20px;
  906. height: 20px;
  907. opacity: .5;
  908. background-size: cover;
  909. display: inline-block;
  910. }
  911. .actions {
  912. text-align: right;
  913. .icon-loading-small {
  914. display: inline-block;
  915. top: 4px;
  916. margin-right: 10px;
  917. }
  918. }
  919. }
  920. &:not(.installed) .app-image-icon svg {
  921. position: absolute;
  922. bottom: 43px;
  923. /* position halfway vertically */
  924. width: 64px;
  925. height: 64px;
  926. opacity: .1;
  927. }
  928. display: flex;
  929. flex-wrap: wrap;
  930. align-content: flex-start;
  931. &.hidden {
  932. display: none;
  933. }
  934. .section {
  935. position: relative;
  936. flex: 0 0 auto;
  937. h2.app-name {
  938. display: block;
  939. margin: 8px 0;
  940. }
  941. &:hover {
  942. background-color: var(--color-background-dark);
  943. }
  944. }
  945. .app-description {
  946. p {
  947. margin: 10px 0;
  948. }
  949. ul {
  950. list-style: disc;
  951. }
  952. ol {
  953. list-style: decimal;
  954. ol, ul {
  955. padding-left: 15px;
  956. }
  957. }
  958. > {
  959. ul, ol {
  960. margin-left: 19px;
  961. }
  962. }
  963. ul {
  964. ol, ul {
  965. padding-left: 15px;
  966. }
  967. }
  968. }
  969. /* Bundle header */
  970. .apps-header {
  971. display: table-row;
  972. position: relative;
  973. div {
  974. display: table-cell;
  975. height: 70px;
  976. }
  977. h2 {
  978. display: table-cell;
  979. position: absolute;
  980. padding-left: 6px;
  981. padding-top: 15px;
  982. .enable {
  983. position: relative;
  984. top: -1px;
  985. margin-left: 12px;
  986. }
  987. + .section {
  988. margin-top: 50px;
  989. }
  990. }
  991. }
  992. }
  993. #apps-list-search {
  994. .section {
  995. h2 {
  996. margin-bottom: 0;
  997. }
  998. }
  999. }
  1000. /* LOG */
  1001. #log {
  1002. white-space: normal;
  1003. margin-bottom: 14px;
  1004. }
  1005. #lessLog {
  1006. display: none;
  1007. }
  1008. table.grid td.date {
  1009. white-space: nowrap;
  1010. }
  1011. #log-section p {
  1012. margin-top: 20px;
  1013. }
  1014. #security-warning-state-ok,
  1015. #security-warning-state-warning,
  1016. #security-warning-state-failure,
  1017. #security-warning-state-loading {
  1018. span {
  1019. vertical-align: middle;
  1020. &.message {
  1021. padding: 12px;
  1022. }
  1023. &.icon {
  1024. width: 32px;
  1025. height: 32px;
  1026. background-position: center center;
  1027. display: inline-block;
  1028. border-radius: 50%;
  1029. }
  1030. &.icon-checkmark-white {
  1031. background-color: var(--color-success);
  1032. }
  1033. &.icon-error-white {
  1034. background-color: var(--color-warning);
  1035. }
  1036. &.icon-close-white {
  1037. background-color: var(--color-error);
  1038. }
  1039. }
  1040. }
  1041. #shareAPI {
  1042. p {
  1043. padding-bottom: 0.8em;
  1044. }
  1045. input#shareapiExpireAfterNDays {
  1046. width: 40px;
  1047. }
  1048. .indent {
  1049. padding-left: 28px;
  1050. }
  1051. .double-indent {
  1052. padding-left: 56px;
  1053. }
  1054. .nocheckbox {
  1055. padding-left: 20px;
  1056. }
  1057. }
  1058. #shareApiDefaultPermissionsSection label {
  1059. margin-right: 20px;
  1060. }
  1061. #fileSharingSettings h3 {
  1062. display: inline-block;
  1063. }
  1064. #publicShareDisclaimerText {
  1065. width: calc(100% - 23px);
  1066. /* 20 px left margin, 3 px right margin */
  1067. max-width: 600px;
  1068. height: 150px;
  1069. margin-left: 20px;
  1070. box-sizing: border-box;
  1071. }
  1072. /* correctly display help icons next to headings */
  1073. .icon-info {
  1074. padding: 11px 20px;
  1075. vertical-align: text-bottom;
  1076. opacity: .5;
  1077. }
  1078. #two-factor-auth h2,
  1079. #shareAPI h2,
  1080. #encryptionAPI h2,
  1081. #mail_general_settings h2 {
  1082. display: inline-block;
  1083. }
  1084. #encryptionAPI li {
  1085. list-style-type: initial;
  1086. margin-left: 20px;
  1087. padding: 5px 0;
  1088. }
  1089. .mail_settings p {
  1090. label:first-child {
  1091. display: inline-block;
  1092. width: 300px;
  1093. text-align: right;
  1094. }
  1095. select:nth-child(2),
  1096. input:not([type='button']) {
  1097. width: 143px;
  1098. }
  1099. }
  1100. #mail_smtpport {
  1101. width: 40px;
  1102. }
  1103. .cronlog {
  1104. margin-left: 10px;
  1105. }
  1106. .status {
  1107. display: inline-block;
  1108. height: 16px;
  1109. width: 16px;
  1110. vertical-align: text-bottom;
  1111. &.success {
  1112. border-radius: 50%;
  1113. }
  1114. }
  1115. #selectGroups select {
  1116. box-sizing: border-box;
  1117. display: inline-block;
  1118. height: 36px;
  1119. padding: 7px 10px;
  1120. }
  1121. #log .log-message {
  1122. word-break: break-all;
  1123. min-width: 180px;
  1124. }
  1125. span {
  1126. &.success {
  1127. background-color: var(--color-success);
  1128. border-radius: var(--border-radius);
  1129. }
  1130. &.error {
  1131. background-color: var(--color-error);
  1132. }
  1133. &.indeterminate {
  1134. background-color: var(--color-warning);
  1135. border-radius: 40% 0;
  1136. }
  1137. }
  1138. /* OPERA hack for strengthify*/
  1139. doesnotexist:-o-prefocus, .strengthify-wrapper {
  1140. left: 185px;
  1141. width: 129px;
  1142. }
  1143. .trusted-domain-warning {
  1144. color: #fff;
  1145. padding: 5px;
  1146. background: #ce3702;
  1147. border-radius: 5px;
  1148. font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace;
  1149. }
  1150. /* HELP */
  1151. .help-includes {
  1152. overflow: hidden !important;
  1153. }
  1154. .help-iframe {
  1155. width: 100%;
  1156. height: 100%;
  1157. margin: 0;
  1158. padding: 0;
  1159. border: 0;
  1160. overflow: auto;
  1161. }
  1162. #postsetupchecks {
  1163. ul {
  1164. margin-left: 44px;
  1165. list-style: disc;
  1166. li {
  1167. margin: 10px 0;
  1168. }
  1169. ul {
  1170. list-style: circle;
  1171. }
  1172. }
  1173. .loading {
  1174. height: 50px;
  1175. background-position: left center;
  1176. }
  1177. .errors, .errors a {
  1178. color: var(--color-error);
  1179. }
  1180. .warnings, .warnings a {
  1181. color: var(--color-warning);
  1182. }
  1183. .hint {
  1184. margin: 20px 0;
  1185. }
  1186. }
  1187. #security-warning {
  1188. a {
  1189. text-decoration: underline;
  1190. }
  1191. .extra-top-margin {
  1192. margin-top: 12px;
  1193. }
  1194. }
  1195. #admin-tips li {
  1196. list-style: initial;
  1197. a {
  1198. display: inline-block;
  1199. padding: 3px 0;
  1200. }
  1201. }
  1202. #selectEncryptionModules {
  1203. margin-left: 30px;
  1204. padding: 10px;
  1205. }
  1206. #encryptionModules {
  1207. padding: 10px;
  1208. }
  1209. #warning {
  1210. color: red;
  1211. }
  1212. .settings-hint {
  1213. margin-top: -12px;
  1214. margin-bottom: 12px;
  1215. opacity: .7;
  1216. }
  1217. /* USERS LIST -------------------------------------------------------------- */
  1218. #body-settings {
  1219. $grid-row-height: 60px;
  1220. $grid-col-min-width: 150px;
  1221. #app-content.user-list-grid {
  1222. display: grid;
  1223. grid-auto-columns: 1fr;
  1224. grid-auto-rows: $grid-row-height;
  1225. grid-column-gap: 20px;
  1226. .row {
  1227. // TODO replace with css4 subgrid when available
  1228. // fallback for ie11 no grid
  1229. display: flex;
  1230. display: grid;
  1231. grid-row-start: span 1;
  1232. grid-gap: 3px;
  1233. align-items: center;
  1234. z-index: 0;
  1235. /* let's define the column until storage path,
  1236. what follows will be manually defined */
  1237. grid-template-columns: 44px minmax($grid-col-min-width + 30px, 1fr) repeat(auto-fit, minmax($grid-col-min-width, 1fr));
  1238. border-bottom: var(--color-border) 1px solid;
  1239. &.disabled {
  1240. opacity: .5;
  1241. }
  1242. /* grid col width */
  1243. .name,
  1244. .password,
  1245. .mailAddress,
  1246. .languages,
  1247. .storageLocation,
  1248. .userBackend,
  1249. .lastLogin {
  1250. min-width: $grid-col-min-width;
  1251. display: flex;
  1252. color: var(--color-text-dark);
  1253. vertical-align: baseline;
  1254. }
  1255. .groups,
  1256. .subadmins,
  1257. .quota {
  1258. .multiselect {
  1259. min-width: $grid-col-min-width;
  1260. color: var(--color-text-dark);
  1261. vertical-align: baseline;
  1262. }
  1263. }
  1264. .obfuscated {
  1265. width: 400px;
  1266. opacity: .7;
  1267. }
  1268. .userActions {
  1269. min-width: 44px;
  1270. position: sticky;
  1271. right: 40px;
  1272. z-index: 109;
  1273. }
  1274. .subtitle {
  1275. color: var(--color-text-maxcontrast);
  1276. vertical-align: baseline;
  1277. }
  1278. /* various */
  1279. &#grid-header,
  1280. &#new-user {
  1281. @include position('sticky');
  1282. align-self: normal;
  1283. background-color: var(--color-main-background);
  1284. z-index: 100; /* above multiselect */
  1285. top: $header-height;
  1286. &.sticky {
  1287. box-shadow: 0 -2px 10px 1px var(--color-box-shadow);
  1288. }
  1289. /* fake input for groups validation */
  1290. input#newgroups {
  1291. position: absolute;
  1292. opacity: 0;
  1293. width: 80% !important;
  1294. margin: 0 10%;
  1295. z-index: 0;
  1296. }
  1297. }
  1298. // separate prop to set initial value to top: 50px
  1299. &#new-user {
  1300. height: 120px;
  1301. .row {
  1302. padding-top: 50px;
  1303. }
  1304. }
  1305. &#grid-header {
  1306. color: var(--color-text-maxcontrast);
  1307. z-index: 60; /* above new-user */
  1308. border-bottom-width: thin;
  1309. #headerDisplayName,
  1310. #headerPassword,
  1311. #headerAddress,
  1312. #headerGroups,
  1313. #headerSubAdmins,
  1314. #theHeaderUserBackend,
  1315. #theHeaderLastLogin,
  1316. #headerQuota,
  1317. #theHeaderStorageLocation,
  1318. #headerLanguages {
  1319. /* Line up header text with column content for when there’s inputs */
  1320. padding-left: 7px;
  1321. text-transform: none;
  1322. color: var(--color-text-maxcontrast);
  1323. vertical-align: baseline;
  1324. }
  1325. }
  1326. &:hover {
  1327. input:not([type='submit']):not(:focus):not(:active) {
  1328. border-color: var(--color-border) !important;
  1329. }
  1330. &:not(#grid-header) {
  1331. box-shadow: 5px 0 0 var(--color-primary-element) inset;
  1332. }
  1333. }
  1334. > div,
  1335. > form {
  1336. grid-row: 1;
  1337. display: inline-flex;
  1338. color: var(--color-text-lighter);
  1339. position: relative;
  1340. > input:not(:focus):not(:active) {
  1341. border-color: transparent;
  1342. cursor: pointer;
  1343. }
  1344. > input:focus, > input:active {
  1345. + .icon-confirm {
  1346. display: block !important;
  1347. }
  1348. }
  1349. /* inputs like mail, username, password */
  1350. &:not(.userActions) > input:not([type='submit']) {
  1351. width: 100%;
  1352. min-width: 0;
  1353. }
  1354. &.name {
  1355. word-break: break-all;
  1356. }
  1357. &.displayName,
  1358. &.mailAddress {
  1359. > input {
  1360. text-overflow: ellipsis;
  1361. }
  1362. }
  1363. &.name,
  1364. &.userBackend {
  1365. /* better multi-line visual */
  1366. line-height: 1.3em;
  1367. max-height: 100%;
  1368. overflow: hidden;
  1369. /* not supported by all browsers
  1370. so we keep the overflow hidden
  1371. as a fallback */
  1372. text-overflow: ellipsis;
  1373. display: -webkit-box;
  1374. -webkit-line-clamp: 2;
  1375. -webkit-box-orient: vertical;
  1376. }
  1377. &.quota {
  1378. height: 44px;
  1379. display: flex;
  1380. align-items: center;
  1381. justify-content: center;
  1382. progress {
  1383. width: 100%;
  1384. margin: 0 10px;
  1385. height: 3px;
  1386. }
  1387. }
  1388. .icon-confirm {
  1389. flex: 0 0 auto;
  1390. cursor: pointer;
  1391. &:not(:active) {
  1392. display: none;
  1393. }
  1394. }
  1395. &.avatar {
  1396. height: 32px;
  1397. width: 32px;
  1398. margin: 6px;
  1399. img {
  1400. display: block;
  1401. }
  1402. }
  1403. &.userActions {
  1404. .action-item {
  1405. position: absolute;
  1406. }
  1407. #newsubmit {
  1408. width: 100%;
  1409. }
  1410. .toggleUserActions {
  1411. position: relative;
  1412. display: block;
  1413. align-items: center;
  1414. .icon-more {
  1415. width: 44px;
  1416. height: 44px;
  1417. opacity: .5;
  1418. cursor: pointer;
  1419. margin-left: 40px;
  1420. &:hover {
  1421. opacity: .7;
  1422. }
  1423. }
  1424. }
  1425. .feedback {
  1426. display: flex;
  1427. align-items: center;
  1428. white-space: nowrap;
  1429. transition: opacity 200ms ease-in-out;
  1430. .icon-checkmark {
  1431. opacity: .5;
  1432. margin-right: 5px;
  1433. }
  1434. }
  1435. }
  1436. /* Fill the grid cell */
  1437. .multiselect.multiselect-vue {
  1438. width: 100%;
  1439. }
  1440. }
  1441. }
  1442. .infinite-loading-container {
  1443. display: flex;
  1444. align-items: center;
  1445. justify-content: center;
  1446. grid-row-start: span 4;
  1447. }
  1448. .users-list-end {
  1449. opacity: .5;
  1450. user-select: none;
  1451. }
  1452. }
  1453. }