settings.css 39 KB

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