settings.scss 19 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354
  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. @use 'variables';
  5. @use 'sass:math';
  6. @import 'functions';
  7. input {
  8. &#openid, &#webdav {
  9. width: 20em;
  10. }
  11. }
  12. /* PERSONAL */
  13. .clear {
  14. clear: both;
  15. }
  16. /* icons for sidebar */
  17. .nav-icon-personal-settings {
  18. @include icon-color('personal', 'settings', variables.$color-black);
  19. }
  20. .nav-icon-security {
  21. @include icon-color('toggle-filelist', 'settings', variables.$color-black);
  22. }
  23. .nav-icon-clientsbox {
  24. @include icon-color('change', 'settings', variables.$color-black);
  25. }
  26. .nav-icon-federated-cloud {
  27. @include icon-color('share', 'settings', variables.$color-black);
  28. }
  29. .nav-icon-second-factor-backup-codes, .nav-icon-ssl-root-certificate {
  30. @include icon-color('password', 'settings', variables.$color-black);
  31. }
  32. #personal-settings-avatar-container {
  33. display: inline-grid;
  34. grid-template-columns: 1fr;
  35. grid-template-rows: 2fr 1fr 2fr;
  36. vertical-align: top;
  37. }
  38. .profile-settings-container {
  39. display: inline-grid;
  40. grid-template-columns: 1fr 1fr 1fr;
  41. }
  42. .personal-show-container {
  43. width: 100%;
  44. }
  45. .personal-settings-setting-box {
  46. .section {
  47. padding: 10px 30px;
  48. .headerbar-label {
  49. margin-bottom: 0;
  50. }
  51. input {
  52. &[type='text'], &[type='email'], &[type='tel'], &[type='url'] {
  53. width: 100%;
  54. }
  55. }
  56. }
  57. &-profile {
  58. grid-row: 3/5;
  59. }
  60. &-detail {
  61. grid-row: 5;
  62. }
  63. &-detail--without-profile {
  64. grid-row: 3;
  65. }
  66. }
  67. select {
  68. &#timezone {
  69. width: 100%;
  70. }
  71. }
  72. #personal-settings {
  73. display: grid;
  74. padding: 20px;
  75. max-width: 1700px;
  76. grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  77. grid-column-gap: 10px;
  78. .section {
  79. padding: 10px 10px;
  80. border: 0;
  81. h2 {
  82. margin-bottom: 12px;
  83. }
  84. h3 {
  85. > label {
  86. font-weight: bold;
  87. }
  88. }
  89. }
  90. .personal-info {
  91. margin-right: 10%;
  92. margin-bottom: 12px;
  93. margin-top: 12px;
  94. }
  95. .personal-info[class^='icon-'], .personal-info[class*=' icon-'] {
  96. background-position: 0px 2px;
  97. padding-left: 30px;
  98. opacity: 0.7;
  99. }
  100. }
  101. // Button for 'Reasons to use Nextcloud in your organization'
  102. .development-notice {
  103. text-align: center;
  104. a:not(.link-button) {
  105. text-decoration: underline;
  106. }
  107. }
  108. .link-button {
  109. display: inline-block;
  110. margin: 16px;
  111. padding: 14px 20px;
  112. background-color: var(--color-primary-element);
  113. color: var(--color-primary-element-text);
  114. border-radius: var(--border-radius-pill);
  115. border: 1px solid var(--color-primary-element);
  116. box-shadow: 0 2px 9px var(--color-box-shadow);
  117. &:active,
  118. &:hover,
  119. &:focus,
  120. &:focus-visible {
  121. box-shadow: 0 0 0 4px var(--color-main-background) !important;
  122. outline: 2px solid var(--color-main-text) !important;
  123. }
  124. &.icon-file {
  125. padding-left: 48px;
  126. background-position: 24px;
  127. }
  128. }
  129. .personal-settings-container {
  130. display: inline-grid;
  131. grid-template-columns: 1fr 1fr 1fr;
  132. &:after {
  133. clear: both;
  134. }
  135. > div {
  136. h3 {
  137. position: relative;
  138. display: inline-flex;
  139. flex-wrap: nowrap;
  140. justify-content: flex-start;
  141. width: 100%;
  142. align-items: center;
  143. gap: 8px;
  144. > label {
  145. white-space: nowrap;
  146. text-overflow: ellipsis;
  147. overflow: hidden;
  148. }
  149. }
  150. > form span {
  151. &[class^='icon-checkmark'], &[class^='icon-error'] {
  152. position: relative;
  153. right: 8px;
  154. top: -28px;
  155. pointer-events: none;
  156. float: right;
  157. }
  158. }
  159. }
  160. .verify {
  161. position: relative;
  162. left: 100%;
  163. top: 0;
  164. height: 0;
  165. img {
  166. padding: 12px 7px 6px;
  167. }
  168. }
  169. .verify-action {
  170. cursor: pointer;
  171. }
  172. input:disabled {
  173. background-color: white;
  174. color: black;
  175. border: none;
  176. opacity: 100;
  177. }
  178. }
  179. /* verify accounts */
  180. /* only show pointer cursor when popup will be there */
  181. .verification-dialog {
  182. display: none;
  183. right: -9px;
  184. top: 40px;
  185. width: 275px;
  186. p {
  187. padding: 10px;
  188. }
  189. .verificationCode {
  190. font-family: monospace;
  191. display: block;
  192. overflow-wrap: break-word;
  193. }
  194. }
  195. .federation-menu {
  196. position: relative;
  197. cursor: pointer;
  198. width: 44px;
  199. height: 44px;
  200. padding: 10px;
  201. margin: 0;
  202. background: none;
  203. border: none;
  204. &:hover,
  205. &:focus {
  206. background-color: var(--color-background-hover);
  207. border-radius: var(--border-radius-pill);
  208. .icon-federation-menu {
  209. opacity: 0.8;
  210. }
  211. }
  212. .icon-federation-menu {
  213. padding-left: 16px;
  214. background-size: 16px;
  215. background-position: left center;
  216. opacity: .3;
  217. cursor: inherit;
  218. .icon-triangle-s {
  219. display: inline-block;
  220. vertical-align: middle;
  221. cursor: inherit;
  222. }
  223. }
  224. .federationScopeMenu {
  225. top: 44px;
  226. &.popovermenu {
  227. .menuitem {
  228. // override h3 heading font size
  229. font-size: 12.8px;
  230. line-height: 1.6em;
  231. .menuitem-text-detail {
  232. opacity: .75;
  233. }
  234. &.active {
  235. box-shadow: inset 2px 0 var(--color-primary-element);
  236. .menuitem-text {
  237. font-weight: bold;
  238. }
  239. }
  240. &.disabled {
  241. opacity: .5;
  242. cursor: default;
  243. * {
  244. cursor: default;
  245. }
  246. }
  247. }
  248. }
  249. }
  250. }
  251. .clientsbox img {
  252. height: 60px;
  253. }
  254. #sslCertificate {
  255. tr.expired {
  256. background-color: rgba(255, 0, 0, 0.5);
  257. }
  258. td {
  259. padding: 5px;
  260. }
  261. }
  262. #displaynameerror,
  263. #displaynamechanged {
  264. display: none;
  265. }
  266. input#identity {
  267. width: 20em;
  268. }
  269. #showWizard {
  270. display: inline-block;
  271. }
  272. .msg {
  273. &.success {
  274. color: #fff;
  275. background-color: #47a447;
  276. padding: 3px;
  277. }
  278. &.error {
  279. color: #fff;
  280. background-color: #d2322d;
  281. padding: 3px;
  282. }
  283. }
  284. table.nostyle {
  285. label {
  286. margin-right: 2em;
  287. }
  288. td {
  289. padding: 0.2em 0;
  290. }
  291. }
  292. #security-password {
  293. #passwordform {
  294. display: flex;
  295. flex-wrap: wrap;
  296. flex-direction: column;
  297. gap: 1rem;
  298. .input-control {
  299. display: flex;
  300. flex-wrap: wrap;
  301. flex-direction: column;
  302. label {
  303. margin-bottom: 0.5rem;
  304. }
  305. }
  306. #pass1, .personal-show-container {
  307. flex-shrink: 1;
  308. width: 300px;
  309. min-width: 150px;
  310. }
  311. // Extremely fragile code, to be replaced by PasswordField component soon
  312. .personal-show-container {
  313. #pass2 {
  314. position: relative;
  315. top: 0.5rem;
  316. }
  317. .personal-show-label {
  318. top: 34px !important;
  319. margin-right: 0;
  320. margin-top: 0 !important;
  321. right: 3px;
  322. }
  323. }
  324. #pass2 {
  325. width: 100%;
  326. }
  327. .password-state {
  328. display: inline-block;
  329. }
  330. .strengthify-wrapper {
  331. position: absolute;
  332. left: 0;
  333. width: 100%;
  334. border-radius: 0 0 2px 2px;
  335. margin-top: 5px;
  336. overflow: hidden;
  337. height: 3px;
  338. }
  339. }
  340. }
  341. /* Two-Factor Authentication (2FA) */
  342. #two-factor-auth {
  343. h3 {
  344. margin-top: 24px;
  345. }
  346. li > div {
  347. margin-left: 20px;
  348. }
  349. .two-factor-provider-settings-icon {
  350. width: 16px;
  351. height: 16px;
  352. vertical-align: sub;
  353. filter: var(--background-invert-if-dark);
  354. }
  355. }
  356. /* USERS */
  357. .isgroup {
  358. .groupname {
  359. width: 85%;
  360. display: block;
  361. overflow: hidden;
  362. text-overflow: ellipsis;
  363. }
  364. &.active .groupname {
  365. width: 65%;
  366. }
  367. }
  368. li.active {
  369. .delete,
  370. .rename {
  371. display: block;
  372. }
  373. }
  374. .app-navigation-entry-utils {
  375. .delete,
  376. .rename {
  377. display: none;
  378. }
  379. }
  380. #usersearchform {
  381. position: absolute;
  382. top: 2px;
  383. right: 0;
  384. input {
  385. width: 150px;
  386. }
  387. label {
  388. font-weight: bold;
  389. }
  390. }
  391. /* display table at full width */
  392. table.grid {
  393. width: 100%;
  394. th {
  395. height: 2em;
  396. padding: 0 1em 0 0;
  397. border-bottom: 1px solid var(--color-border);
  398. text-align: left;
  399. font-weight: normal;
  400. }
  401. td {
  402. border-bottom: 1px solid var(--color-border);
  403. padding: 0 1em 0 0;
  404. text-align: left;
  405. font-weight: normal;
  406. }
  407. }
  408. td, th {
  409. &.name {
  410. padding-left: .8em;
  411. min-width: 5em;
  412. max-width: 12em;
  413. text-overflow: ellipsis;
  414. overflow: hidden;
  415. }
  416. &.password {
  417. padding-left: .8em;
  418. > img {
  419. visibility: hidden;
  420. }
  421. }
  422. &.displayName > img {
  423. visibility: hidden;
  424. }
  425. &.password,
  426. &.mailAddress {
  427. min-width: 5em;
  428. max-width: 12em;
  429. cursor: pointer;
  430. span {
  431. width: 90%;
  432. display: inline-block;
  433. text-overflow: ellipsis;
  434. overflow: hidden;
  435. }
  436. }
  437. &.mailAddress {
  438. cursor: pointer;
  439. }
  440. &.password > span {
  441. margin-right: 1.2em;
  442. color: #C7C7C7;
  443. }
  444. }
  445. span.usersLastLoginTooltip {
  446. white-space: nowrap;
  447. }
  448. /* APPS */
  449. #app-content > svg.app-filter {
  450. float: left;
  451. height: 0;
  452. width: 0;
  453. }
  454. #app-category-app-bundles {
  455. margin-bottom: 20px;
  456. }
  457. .appinfo {
  458. margin: 1em 40px;
  459. }
  460. #app-navigation {
  461. /* Navigation icons */
  462. img {
  463. margin-bottom: -3px;
  464. margin-right: 6px;
  465. width: 16px;
  466. }
  467. li span.no-icon {
  468. padding-left: 32px;
  469. }
  470. ul li.active > span.utils {
  471. .delete, .rename {
  472. display: block;
  473. }
  474. }
  475. .appwarning {
  476. background: #fcc;
  477. }
  478. &.appwarning:hover {
  479. background: #fbb;
  480. }
  481. .app-external {
  482. color: var(--color-text-maxcontrast);
  483. }
  484. }
  485. span.version {
  486. margin-left: 1em;
  487. margin-right: 1em;
  488. color: var(--color-text-maxcontrast);
  489. }
  490. .app-version {
  491. color: var(--color-text-maxcontrast);
  492. }
  493. .app-level {
  494. span {
  495. color: var(--color-text-maxcontrast);
  496. background-color: transparent;
  497. border: 1px solid var(--color-text-maxcontrast);
  498. border-radius: var(--border-radius);
  499. padding: 3px 6px;
  500. }
  501. a {
  502. padding: 10px;
  503. margin: -6px;
  504. white-space: nowrap;
  505. }
  506. .official {
  507. background-position: left center;
  508. background-position: 5px center;
  509. padding-left: 25px;
  510. }
  511. .supported {
  512. border-color: var(--color-success);
  513. background-position: left center;
  514. background-position: 5px center;
  515. padding-left: 25px;
  516. color: var(--color-success);
  517. }
  518. }
  519. .app-score {
  520. position: relative;
  521. top: 4px;
  522. opacity: .5;
  523. }
  524. .app-settings-content {
  525. #searchresults {
  526. display: none;
  527. }
  528. }
  529. #apps-list.store {
  530. .section {
  531. border: 0;
  532. }
  533. .app-name {
  534. display: block;
  535. margin: 5px 0;
  536. }
  537. .app-image-icon .icon-settings-dark {
  538. width: 100%;
  539. height: 150px;
  540. background-size: 45px;
  541. opacity: 0.5;
  542. }
  543. .app-score-image {
  544. height: 14px;
  545. }
  546. .actions {
  547. margin-top: 10px;
  548. button {
  549. margin: 10px 0;
  550. }
  551. }
  552. }
  553. #app-sidebar #app-details-view {
  554. h2 {
  555. .icon-settings-dark,
  556. svg {
  557. display: inline-block;
  558. width: 16px;
  559. height: 16px;
  560. margin-right: 10px;
  561. opacity: .7;
  562. }
  563. }
  564. .app-level {
  565. clear: right;
  566. width: 100%;
  567. .supported,
  568. .official {
  569. vertical-align: top;
  570. }
  571. .app-score-image {
  572. float: right;
  573. }
  574. }
  575. .app-author, .app-licence {
  576. color: var(--color-text-maxcontrast);
  577. }
  578. .app-dependencies {
  579. margin: 10px 0;
  580. }
  581. .app-description p {
  582. margin: 10px 0;
  583. }
  584. .close {
  585. position: absolute;
  586. top: 0;
  587. right: 0;
  588. padding: 14px;
  589. opacity: 0.5;
  590. z-index: 1;
  591. width: 44px;
  592. height: 44px;
  593. }
  594. .actions {
  595. display: flex;
  596. align-items: center;
  597. .app-groups {
  598. padding: 5px;
  599. }
  600. }
  601. .appslink {
  602. text-decoration: underline;
  603. margin-right: 5px;
  604. }
  605. .app-level,
  606. .actions,
  607. .documentation,
  608. .app-dependencies,
  609. .app-description {
  610. margin: 20px 0;
  611. }
  612. }
  613. @media only screen and (min-width: 1601px) {
  614. .store .section {
  615. width: 25%;
  616. }
  617. .with-app-sidebar .store .section {
  618. width: 33%;
  619. }
  620. }
  621. @media only screen and (max-width: 1600px) {
  622. .store .section {
  623. width: 25%;
  624. }
  625. .with-app-sidebar .store .section {
  626. width: 33%;
  627. }
  628. }
  629. @media only screen and (max-width: 1400px) {
  630. .store .section {
  631. width: 33%;
  632. }
  633. .with-app-sidebar .store .section {
  634. width: 50%;
  635. }
  636. }
  637. @media only screen and (max-width: 900px) {
  638. .store .section {
  639. width: 50%;
  640. }
  641. .with-app-sidebar .store .section {
  642. width: 100%;
  643. }
  644. }
  645. @media only screen and (max-width: variables.$breakpoint-mobile) {
  646. .store .section {
  647. width: 50%;
  648. }
  649. }
  650. @media only screen and (max-width: 480px) {
  651. .store .section {
  652. width: 100%;
  653. }
  654. }
  655. /* hide app version and level on narrower screens */
  656. @media only screen and (max-width: 900px) {
  657. .apps-list.installed {
  658. .app-version, .app-level {
  659. display: none !important;
  660. }
  661. }
  662. }
  663. @media only screen and (max-width: 500px) {
  664. .apps-list.installed .app-groups {
  665. display: none !important;
  666. }
  667. }
  668. .section {
  669. margin-bottom: 0;
  670. /* section divider lines, none needed for last one */
  671. &:not(:last-child) {
  672. border-bottom: 1px solid var(--color-border);
  673. }
  674. /* correctly display help icons next to headings */
  675. h2 {
  676. margin-bottom: 22px;
  677. .icon-info {
  678. padding: 6px 20px;
  679. vertical-align: text-bottom;
  680. display: inline-block;
  681. }
  682. }
  683. }
  684. .followupsection {
  685. display: block;
  686. padding: 0 30px 30px 30px;
  687. }
  688. .app-image {
  689. position: relative;
  690. height: 150px;
  691. opacity: 1;
  692. overflow: hidden;
  693. }
  694. .app-description-toggle-show, .app-description-toggle-hide {
  695. clear: both;
  696. padding: 7px 0;
  697. cursor: pointer;
  698. opacity: .5;
  699. }
  700. .app-description-container {
  701. clear: both;
  702. position: relative;
  703. top: 7px;
  704. }
  705. .app-description {
  706. clear: both;
  707. }
  708. #app-category-1 {
  709. margin-bottom: 18px;
  710. }
  711. /* capitalize 'Other' category */
  712. #app-category-925 {
  713. text-transform: capitalize;
  714. }
  715. .app-dependencies {
  716. color: #ce3702;
  717. }
  718. .missing-dependencies {
  719. list-style: initial;
  720. list-style-type: initial;
  721. list-style-position: inside;
  722. }
  723. .apps-list {
  724. $toolbar-padding: 8px;
  725. $toolbar-height: 44px + $toolbar-padding * 2;
  726. .app-list-move {
  727. transition: transform 1s;
  728. }
  729. #app-list-update-all {
  730. margin-left: 10px;
  731. }
  732. .toolbar {
  733. height: $toolbar-height;
  734. padding: $toolbar-padding;
  735. // Leave room for app-navigation-toggle
  736. padding-left: $toolbar-height;
  737. width: 100%;
  738. background-color: var(--color-main-background);
  739. position: sticky;
  740. top: 0;
  741. z-index: 1;
  742. display: flex;
  743. align-items: center;
  744. }
  745. &.installed {
  746. .apps-list-container {
  747. display: table;
  748. width: 100%;
  749. height: auto;
  750. white-space: normal;
  751. }
  752. margin-bottom: 100px;
  753. .section {
  754. display: table-row;
  755. padding: 0;
  756. margin: 0;
  757. > * {
  758. display: table-cell;
  759. height: initial;
  760. vertical-align: middle;
  761. float: none;
  762. border-bottom: 1px solid var(--color-border);
  763. padding: 6px;
  764. box-sizing: border-box;
  765. }
  766. > .actions {
  767. display: flex;
  768. gap: 8px;
  769. flex-wrap: wrap;
  770. justify-content: end;
  771. }
  772. &.selected {
  773. background-color: var(--color-background-dark);
  774. }
  775. }
  776. .groups-enable {
  777. margin-top: 0;
  778. label {
  779. margin-right: 3px;
  780. }
  781. }
  782. .app-image {
  783. width: 44px;
  784. height: auto;
  785. text-align: right;
  786. }
  787. .app-image-icon svg,
  788. .app-image-icon .icon-settings-dark {
  789. margin-top: 5px;
  790. width: 20px;
  791. height: 20px;
  792. opacity: .5;
  793. background-size: cover;
  794. display: inline-block;
  795. }
  796. .actions {
  797. text-align: right;
  798. .icon-loading-small {
  799. display: inline-block;
  800. top: 4px;
  801. margin-right: 10px;
  802. }
  803. }
  804. }
  805. &:not(.installed) .app-image-icon svg {
  806. position: absolute;
  807. bottom: 43px;
  808. /* position halfway vertically */
  809. width: 64px;
  810. height: 64px;
  811. opacity: .1;
  812. }
  813. display: flex;
  814. flex-wrap: wrap;
  815. align-content: flex-start;
  816. &.hidden {
  817. display: none;
  818. }
  819. .section {
  820. position: relative;
  821. flex: 0 0 auto;
  822. h2.app-name {
  823. display: block;
  824. margin: 8px 0;
  825. }
  826. &:hover {
  827. background-color: var(--color-background-dark);
  828. }
  829. }
  830. .app-description {
  831. p {
  832. margin: 10px 0;
  833. }
  834. ul {
  835. list-style: disc;
  836. }
  837. ol {
  838. list-style: decimal;
  839. ol, ul {
  840. padding-left: 15px;
  841. }
  842. }
  843. > {
  844. ul, ol {
  845. margin-left: 19px;
  846. }
  847. }
  848. ul {
  849. ol, ul {
  850. padding-left: 15px;
  851. }
  852. }
  853. }
  854. /* Bundle header */
  855. .apps-header {
  856. position: relative;
  857. div {
  858. display: table-cell;
  859. height: 70px;
  860. }
  861. h2 {
  862. padding-left: 6px;
  863. padding-top: 15px;
  864. margin-bottom: 12px;
  865. .enable {
  866. position: relative;
  867. top: -1px;
  868. margin-left: 12px;
  869. }
  870. + .section {
  871. margin-top: 50px;
  872. }
  873. }
  874. }
  875. }
  876. // Display buttons above each other on mobile
  877. @media (max-width: math.div(variables.$breakpoint-mobile, 2)) {
  878. .apps-list.installed .section > .actions {
  879. display: table-cell;
  880. }
  881. }
  882. #apps-list-search {
  883. .section {
  884. h2 {
  885. margin-bottom: 0;
  886. }
  887. }
  888. }
  889. /* LOG */
  890. #log {
  891. white-space: normal;
  892. margin-bottom: 14px;
  893. }
  894. #lessLog {
  895. display: none;
  896. }
  897. table.grid td.date {
  898. white-space: nowrap;
  899. }
  900. #log-section p {
  901. margin-top: 20px;
  902. }
  903. #security-warning-state-ok,
  904. #security-warning-state-warning,
  905. #security-warning-state-failure,
  906. #security-warning-state-loading {
  907. span {
  908. vertical-align: middle;
  909. &.message {
  910. padding: 12px;
  911. }
  912. &.icon {
  913. width: 32px;
  914. height: 32px;
  915. background-position: center center;
  916. display: inline-block;
  917. border-radius: 50%;
  918. }
  919. &.icon-checkmark-white {
  920. background-color: var(--color-success);
  921. }
  922. &.icon-error-white {
  923. background-color: var(--color-warning);
  924. }
  925. &.icon-close-white {
  926. background-color: var(--color-error);
  927. }
  928. }
  929. }
  930. #shareAPI {
  931. &.loading > div {
  932. display: none;
  933. }
  934. p {
  935. padding-bottom: 0.8em;
  936. }
  937. .indent {
  938. padding-left: 28px;
  939. }
  940. .double-indent {
  941. padding-left: 56px;
  942. }
  943. .nocheckbox {
  944. padding-left: 20px;
  945. }
  946. #s2id_linksExcludedGroups {
  947. width: 200px !important;
  948. }
  949. }
  950. #shareApiDefaultPermissionsSection label {
  951. margin-right: 20px;
  952. }
  953. #fileSharingSettings h3 {
  954. display: inline-block;
  955. }
  956. #publicShareDisclaimerText {
  957. width: calc(100% - 23px);
  958. /* 20 px left margin, 3 px right margin */
  959. max-width: 600px;
  960. height: 150px;
  961. margin-left: 20px;
  962. box-sizing: border-box;
  963. }
  964. /* correctly display help icons next to headings */
  965. .icon-info {
  966. padding: 11px 20px;
  967. vertical-align: text-bottom;
  968. opacity: .5;
  969. }
  970. #two-factor-auth h2,
  971. #shareAPI h2,
  972. #mail_general_settings h2 {
  973. display: inline-block;
  974. }
  975. .mail_settings p {
  976. label:first-child {
  977. display: inline-block;
  978. width: 300px;
  979. text-align: right;
  980. }
  981. select:nth-child(2),
  982. input:not([type='button']) {
  983. width: 143px;
  984. }
  985. }
  986. @media (max-width: calc(variables.$breakpoint-mobile * 0.75)) {
  987. .mail_settings p label:first-child {
  988. width: unset;
  989. text-align: left;
  990. display: block;
  991. margin-top: calc(var(--default-grid-baseline) * 2);
  992. }
  993. }
  994. #mail_smtpport {
  995. width: 60px;
  996. }
  997. .cronlog {
  998. margin-left: 10px;
  999. }
  1000. .status {
  1001. display: inline-block;
  1002. height: 16px;
  1003. width: 16px;
  1004. vertical-align: text-bottom;
  1005. &.success {
  1006. border-radius: 50%;
  1007. }
  1008. }
  1009. #selectGroups select {
  1010. box-sizing: border-box;
  1011. display: inline-block;
  1012. height: 36px;
  1013. padding: 7px 10px;
  1014. }
  1015. #log .log-message {
  1016. word-break: break-all;
  1017. min-width: 180px;
  1018. }
  1019. span {
  1020. &.success {
  1021. background-color: var(--color-success);
  1022. border-radius: var(--border-radius);
  1023. }
  1024. &.error {
  1025. background-color: var(--color-error);
  1026. }
  1027. &.indeterminate {
  1028. background-color: var(--color-warning);
  1029. border-radius: 40% 0;
  1030. }
  1031. }
  1032. /* OPERA hack for strengthify*/
  1033. doesnotexist:-o-prefocus, .strengthify-wrapper {
  1034. left: 185px;
  1035. width: 129px;
  1036. }
  1037. .trusted-domain-warning {
  1038. color: #fff;
  1039. padding: 5px;
  1040. background: #ce3702;
  1041. border-radius: 5px;
  1042. font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace;
  1043. }
  1044. #postsetupchecks {
  1045. ul {
  1046. margin-left: 44px;
  1047. list-style: disc;
  1048. li {
  1049. margin: 10px 0;
  1050. }
  1051. ul {
  1052. list-style: circle;
  1053. }
  1054. }
  1055. .loading {
  1056. height: 50px;
  1057. background-position: left center;
  1058. }
  1059. .errors, .errors a {
  1060. color: var(--color-error);
  1061. }
  1062. .warnings, .warnings a {
  1063. color: var(--color-warning);
  1064. }
  1065. .hint {
  1066. margin: 20px 0;
  1067. }
  1068. }
  1069. #security-warning {
  1070. a {
  1071. text-decoration: underline;
  1072. }
  1073. .extra-top-margin {
  1074. margin-top: 12px;
  1075. }
  1076. }
  1077. .security-warning__heading {
  1078. display: flex;
  1079. flex-wrap: wrap;
  1080. margin-bottom: calc(var(--default-grid-baseline) * 8);
  1081. > h2 {
  1082. margin-bottom: 0px;
  1083. }
  1084. > a {
  1085. width: 44px;
  1086. }
  1087. }
  1088. #admin-tips li {
  1089. list-style: initial;
  1090. a {
  1091. display: inline-block;
  1092. padding: 3px 0;
  1093. }
  1094. }
  1095. #warning {
  1096. color: red;
  1097. }
  1098. .settings-hint {
  1099. margin-top: -12px;
  1100. margin-bottom: 12px;
  1101. opacity: .7;
  1102. }
  1103. .animated {
  1104. animation: blink-animation 1s steps(5, start) 4;
  1105. }
  1106. @keyframes blink-animation {
  1107. to {
  1108. opacity: 0.6;
  1109. }
  1110. }
  1111. @-webkit-keyframes blink-animation {
  1112. to {
  1113. opacity: 1;
  1114. }
  1115. }