1
0

settings.scss 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861
  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. /* SETTINGS NAVIGATION */
  449. #app-navigation {
  450. /* Navigation icons */
  451. img {
  452. margin-bottom: -3px;
  453. margin-right: 6px;
  454. width: 16px;
  455. }
  456. li span.no-icon {
  457. padding-left: 32px;
  458. }
  459. ul li.active > span.utils {
  460. .delete, .rename {
  461. display: block;
  462. }
  463. }
  464. }
  465. /* SETTINGS SECTIONS */
  466. .section {
  467. margin-bottom: 0;
  468. /* section divider lines, none needed for last one */
  469. &:not(:last-child) {
  470. border-bottom: 1px solid var(--color-border);
  471. }
  472. /* correctly display help icons next to headings */
  473. h2 {
  474. margin-bottom: 22px;
  475. .icon-info {
  476. padding: 6px 20px;
  477. vertical-align: text-bottom;
  478. display: inline-block;
  479. }
  480. }
  481. }
  482. /* LOG */
  483. #log {
  484. white-space: normal;
  485. margin-bottom: 14px;
  486. }
  487. #lessLog {
  488. display: none;
  489. }
  490. table.grid td.date {
  491. white-space: nowrap;
  492. }
  493. #log-section p {
  494. margin-top: 20px;
  495. }
  496. #security-warning-state-ok,
  497. #security-warning-state-warning,
  498. #security-warning-state-failure,
  499. #security-warning-state-loading {
  500. span {
  501. vertical-align: middle;
  502. &.message {
  503. padding: 12px;
  504. }
  505. &.icon {
  506. width: 32px;
  507. height: 32px;
  508. background-position: center center;
  509. display: inline-block;
  510. border-radius: 50%;
  511. }
  512. &.icon-checkmark-white {
  513. background-color: var(--color-success);
  514. }
  515. &.icon-error-white {
  516. background-color: var(--color-warning);
  517. }
  518. &.icon-close-white {
  519. background-color: var(--color-error);
  520. }
  521. }
  522. }
  523. #shareAPI {
  524. &.loading > div {
  525. display: none;
  526. }
  527. p {
  528. padding-bottom: 0.8em;
  529. }
  530. .indent {
  531. padding-left: 28px;
  532. }
  533. .double-indent {
  534. padding-left: 56px;
  535. }
  536. .nocheckbox {
  537. padding-left: 20px;
  538. }
  539. #s2id_linksExcludedGroups {
  540. width: 200px !important;
  541. }
  542. }
  543. #shareApiDefaultPermissionsSection label {
  544. margin-right: 20px;
  545. }
  546. #fileSharingSettings h3 {
  547. display: inline-block;
  548. }
  549. #publicShareDisclaimerText {
  550. width: calc(100% - 23px);
  551. /* 20 px left margin, 3 px right margin */
  552. max-width: 600px;
  553. height: 150px;
  554. margin-left: 20px;
  555. box-sizing: border-box;
  556. }
  557. /* correctly display help icons next to headings */
  558. .icon-info {
  559. padding: 11px 20px;
  560. vertical-align: text-bottom;
  561. opacity: .5;
  562. }
  563. #two-factor-auth h2,
  564. #shareAPI h2,
  565. #mail_general_settings h2 {
  566. display: inline-block;
  567. }
  568. .mail_settings p {
  569. label:first-child {
  570. display: inline-block;
  571. width: 300px;
  572. text-align: right;
  573. }
  574. select:nth-child(2),
  575. input:not([type='button']) {
  576. width: 143px;
  577. }
  578. }
  579. @media (max-width: calc(variables.$breakpoint-mobile * 0.75)) {
  580. .mail_settings p label:first-child {
  581. width: unset;
  582. text-align: left;
  583. display: block;
  584. margin-top: calc(var(--default-grid-baseline) * 2);
  585. }
  586. }
  587. #mail_smtpport {
  588. width: 60px;
  589. }
  590. .cronlog {
  591. margin-left: 10px;
  592. }
  593. .status {
  594. display: inline-block;
  595. height: 16px;
  596. width: 16px;
  597. vertical-align: text-bottom;
  598. &.success {
  599. border-radius: 50%;
  600. }
  601. }
  602. #selectGroups select {
  603. box-sizing: border-box;
  604. display: inline-block;
  605. height: 36px;
  606. padding: 7px 10px;
  607. }
  608. #log .log-message {
  609. word-break: break-all;
  610. min-width: 180px;
  611. }
  612. span {
  613. &.success {
  614. background-color: var(--color-success);
  615. border-radius: var(--border-radius);
  616. }
  617. &.error {
  618. background-color: var(--color-error);
  619. }
  620. &.indeterminate {
  621. background-color: var(--color-warning);
  622. border-radius: 40% 0;
  623. }
  624. }
  625. /* OPERA hack for strengthify*/
  626. doesnotexist:-o-prefocus, .strengthify-wrapper {
  627. left: 185px;
  628. width: 129px;
  629. }
  630. .trusted-domain-warning {
  631. color: #fff;
  632. padding: 5px;
  633. background: #ce3702;
  634. border-radius: 5px;
  635. font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace;
  636. }
  637. #postsetupchecks {
  638. ul {
  639. margin-left: 44px;
  640. list-style: disc;
  641. li {
  642. margin: 10px 0;
  643. }
  644. ul {
  645. list-style: circle;
  646. }
  647. }
  648. .loading {
  649. height: 50px;
  650. background-position: left center;
  651. }
  652. .errors, .errors a {
  653. color: var(--color-error);
  654. }
  655. .warnings, .warnings a {
  656. color: var(--color-warning);
  657. }
  658. .hint {
  659. margin: 20px 0;
  660. }
  661. }
  662. #security-warning {
  663. a {
  664. text-decoration: underline;
  665. }
  666. .extra-top-margin {
  667. margin-top: 12px;
  668. }
  669. }
  670. .security-warning__heading {
  671. display: flex;
  672. flex-wrap: wrap;
  673. margin-bottom: calc(var(--default-grid-baseline) * 8);
  674. > h2 {
  675. margin-bottom: 0px;
  676. }
  677. > a {
  678. width: 44px;
  679. }
  680. }
  681. #admin-tips li {
  682. list-style: initial;
  683. a {
  684. display: inline-block;
  685. padding: 3px 0;
  686. }
  687. }
  688. #warning {
  689. color: red;
  690. }
  691. .settings-hint {
  692. margin-top: -12px;
  693. margin-bottom: 12px;
  694. opacity: .7;
  695. }
  696. .animated {
  697. animation: blink-animation 1s steps(5, start) 4;
  698. }
  699. @keyframes blink-animation {
  700. to {
  701. opacity: 0.6;
  702. }
  703. }
  704. @-webkit-keyframes blink-animation {
  705. to {
  706. opacity: 1;
  707. }
  708. }