My SMM panel
25'ten fazla konu seçemezsiniz Konular bir harf veya rakamla başlamalı, kısa çizgiler ('-') içerebilir ve en fazla 35 karakter uzunluğunda olabilir.
 
 
 
 
 
 

1275 satır
19 KiB

  1. @use "vars";
  2. @font-face {
  3. font-family: "PatuaOne";
  4. src: url("../PatuaOne-Regular.ttf") format("opentype");
  5. font-style: normal;
  6. font-weight: normal;
  7. }
  8. html body {
  9. font-family: 'PatuaOne', 'Times New Roman';
  10. margin: 0;
  11. }
  12. section {
  13. position: relative;
  14. padding-top: 3em;
  15. padding-bottom: 3em;
  16. overflow: hidden;
  17. }
  18. button {
  19. font-family: 'PatuaOne', 'Times New Roman';
  20. }
  21. h1 {
  22. color: white;
  23. }
  24. h2 {
  25. color: vars.getColor("brand-orange");
  26. text-align: center;
  27. }
  28. h3 {
  29. color: vars.getColor("faded-text");
  30. // text-transform: uppercase;
  31. }
  32. ul {
  33. color: vars.getColor("faded-text");
  34. list-style-type: none;
  35. padding: 0;
  36. }
  37. input, select {
  38. border: 2px solid black;
  39. border-radius: 20px;
  40. padding: 4px;
  41. }
  42. .icon {
  43. width: 25px;
  44. margin: 10px;
  45. }
  46. .services-cards li {
  47. padding-bottom: 8px;
  48. &:before {
  49. width: 30px;
  50. height: 30px;
  51. content: url("../images/green-check.svg");
  52. display: inline;
  53. margin-right: 5px;
  54. // top: 30px;
  55. }
  56. }
  57. a {
  58. text-decoration: none;
  59. }
  60. nav {
  61. position: absolute;
  62. width: 100%;
  63. top: 10px;
  64. display: flex;
  65. flex-flow: row wrap;
  66. align-items: center;
  67. justify-content: space-between;
  68. // background-color: transparent;
  69. }
  70. nav h1 {
  71. margin: 4px 0 10px 6px;
  72. display: inline-block;
  73. }
  74. nav.info-page h1 {
  75. margin: 4px 0 10px 6px;
  76. display: inline-block;
  77. color: vars.getColor('brand-orange');
  78. }
  79. .formal-font {
  80. font-family: "FreeSans";
  81. }
  82. nav #logo {
  83. margin-right: 50px;
  84. }
  85. nav form {
  86. display: flex;
  87. flex-wrap: wrap;
  88. margin-right: 20px;
  89. }
  90. nav form div {
  91. margin: 0 10px;
  92. }
  93. nav form button {
  94. min-width: 5em;
  95. }
  96. nav form p {
  97. margin-top: 0;
  98. }
  99. nav form input,label {
  100. opacity: 0.7;
  101. }
  102. nav .nav-toggle {
  103. position: absolute;
  104. right: 10px;
  105. top: 5px;
  106. display: none;
  107. height: 45px;
  108. width: 45px;
  109. margin-left: auto;
  110. background: url("../images/menu-icon.svg");
  111. background-size: 100%;
  112. background-size: cover;
  113. color: white;
  114. }
  115. nav .nav-toggle.toggled {
  116. background: url("../images/cancel-icon2.svg");
  117. width: 25px;
  118. height: 25px;
  119. background-size: 100%;
  120. background-size: cover;
  121. top: 10px;
  122. right: 15px;
  123. color: white;
  124. }
  125. div.landing-hero {
  126. top: 0;
  127. height: 50em;
  128. background-color: #ff4e00;
  129. // background-image: linear-gradient(to right bottom, #ff4e00, #fc6200, #f87200, #f58100, #f18e00, #f19507, #f09c0f, #f0a317, #f3a620, #f6a927, #f8ad2e, #fbb034);
  130. background-image: linear-gradient(315deg, #ff4e00 0%, #ec9f05 74%);
  131. z-index: 0;
  132. }
  133. div.hero-filter {
  134. width: 100%;
  135. height: 100%;
  136. }
  137. div.hero-filter h2 {
  138. color: black;
  139. opacity: 0.7;
  140. max-width: 10em;
  141. font-size: 2.4em;
  142. position: absolute;
  143. top: 3em;
  144. margin-left: 5%;
  145. }
  146. div.hero-filter p {
  147. position: absolute;
  148. top: 12em;
  149. margin-left: 5%;
  150. font-size: 20px;
  151. width: 10em;
  152. opacity: 0.7;
  153. }
  154. div.errors {
  155. background-color: #ececec;
  156. color: vars.getColor("red-alert");
  157. border: 2px solid vars.getColor("red-alert");
  158. border-radius: 4px;
  159. min-height: 50px;
  160. position: absolute;
  161. left: 50%;
  162. margin-right: -50%;
  163. top: 100px;
  164. min-width: 30em;
  165. transform: translate(-50%, -50%);
  166. }
  167. .errors ul {
  168. margin: auto;
  169. }
  170. form.login {
  171. // font-weight: bold;
  172. color: white;
  173. }
  174. .cancel-icon {
  175. width: 30px;
  176. }
  177. form.login input {
  178. margin-left: 2px;
  179. color: white;
  180. background-color: transparent;
  181. border: 2px solid white;
  182. border-radius: 2px;
  183. outline-color: orange
  184. }
  185. form.login .login-btn {
  186. @include vars.special-button("medium-blue", "dark-blue");
  187. }
  188. .hero-filter .register-btn {
  189. @include vars.transparent-button;
  190. display: block;
  191. position: relative;
  192. width: 7em;
  193. top: 60%;
  194. margin-left: auto;
  195. margin-right: auto;
  196. }
  197. div.blue-background {
  198. background-image: url("../images/black-circle.svg");
  199. background-size: 10px;
  200. background-color: #0d324d;
  201. }
  202. section.about-us {
  203. padding: 70px 0;
  204. }
  205. section.about-us p {
  206. max-width: 600px;
  207. margin-left: auto;
  208. margin-right: auto;
  209. border-top: 2px solid vars.getColor("grey");
  210. border-bottom: 2px solid vars.getColor("grey");
  211. padding: 15px;
  212. background-color: #0d324d;
  213. color: white;
  214. }
  215. section.services-cards {
  216. // margin-bottom: 0;
  217. background-color: lightgrey;
  218. padding-bottom: 4em;
  219. background: linear-gradient(to bottom right, transparent 0%, transparent 50%, #e9e9e9 50%, vars.getColor("light-grey") 100%);
  220. }
  221. section.services-cards .cards{
  222. display: flex;
  223. flex-flow: wrap;
  224. margin-top: 2em;
  225. gap: 25px;
  226. justify-content: center;
  227. max-width: 1050px;
  228. margin-left: auto;
  229. margin-right: auto;
  230. text-align: center;
  231. }
  232. section.services-cards h2 {
  233. text-align: center;
  234. padding: 10px;
  235. margin-top: 0;
  236. padding-top: 30px;
  237. color: white;
  238. }
  239. section.services-cards .card {
  240. width: 280px;
  241. height: 350px;
  242. padding: 18px 9px;
  243. border-radius: 4px;
  244. background: white;
  245. box-shadow: 7px 10px 8px rgb(156 166 175 / 22%);
  246. transition: transform 0.2s;
  247. &:hover {
  248. transform: translateY(-20px);
  249. }
  250. }
  251. section.services-cards img {
  252. width: 50px;
  253. height: 50px;
  254. }
  255. section.services-cards button {
  256. @include vars.brand-button("orange");
  257. }
  258. section.features-info {
  259. // height: fit-content;
  260. height: 60em;
  261. background: radial-gradient(ellipse at left, #fff, vars.getColor("light-grey") 80%);
  262. }
  263. .circle-prop {
  264. height: 100%;
  265. overflow: hidden;
  266. width: 100%;
  267. position: relative;
  268. // transform: translateX(-10em);
  269. }
  270. .circle-prop svg {
  271. width: 50%;
  272. }
  273. .features-info img {
  274. width: 600px;
  275. position: absolute;
  276. top: 15%;
  277. right: 4%;
  278. }
  279. div.info-cards {
  280. position: absolute;
  281. top: 10em;
  282. margin-left: 20%;
  283. width: 70%;
  284. }
  285. .info-card {
  286. margin-bottom: 40px;
  287. &:nth-of-type(2) {
  288. margin-left: 13%;
  289. }
  290. &:nth-of-type(3) {
  291. margin-left: 10%;
  292. }
  293. &:nth-of-type(4) {
  294. margin-left: 5%;
  295. }
  296. p {
  297. max-width: 20em;
  298. background: white;
  299. padding: 5px;
  300. border-radius: 4px;
  301. text-align: center;
  302. color: vars.getColor("faded-text2");
  303. // border: 2px solid vars.getColor("medium-orange");
  304. @include vars.hovering;
  305. }
  306. }
  307. section.panel-infos {
  308. min-height: 40em;
  309. margin-top: 5em;
  310. margin-bottom: 5em;
  311. display: flex;
  312. flex-flow: wrap;
  313. align-items: center;
  314. justify-content: center;
  315. gap: 20px;
  316. .panel-preview {
  317. // box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
  318. @include vars.hovering;
  319. padding: 0;
  320. }
  321. }
  322. .panel-infos h2 {
  323. width: 100%;
  324. }
  325. .panel-info {
  326. width: 50%;
  327. margin-top: 4em;
  328. }
  329. .panel-info img {
  330. width: 50px;
  331. height: 50px;
  332. }
  333. .panel-info p {
  334. color: vars.getColor("faded-text2");
  335. }
  336. section.benefits-info div {
  337. margin: 1em auto;
  338. padding: 1em 1em;
  339. border-top: 2px solid vars.getColor("faded-text2");
  340. border-bottom: 2px solid vars.getColor("faded-text2");
  341. max-width: 40em;
  342. color: vars.getColor("faded-text");
  343. }
  344. .benefits-info h2 {
  345. margin-bottom: 2em;
  346. }
  347. section.faq-info {
  348. margin-bottom: 6em;
  349. margin-top: 3em;
  350. min-height: 30em;
  351. }
  352. .faq-info h2 {
  353. margin-bottom: 2em;
  354. }
  355. section.faq-info .collapsibles {
  356. display: flex;
  357. flex-flow: wrap;
  358. gap: 2em;
  359. justify-content: center;
  360. max-width: 65em;
  361. width: fit-content;
  362. margin-left: auto;
  363. margin-right: auto;
  364. align-text: center;
  365. }
  366. .faq-info .collapsible {
  367. text-align: center;
  368. width: 20em;
  369. &:not(.active) .content {
  370. display: none;
  371. }
  372. }
  373. .collapsible button {
  374. width: 95%;
  375. display: block;
  376. margin-right: auto;
  377. height: 2.5em;
  378. border: 2px solid vars.getColor("brand-orange");
  379. @include vars.button("light-grey");
  380. font-size: 17px;
  381. // font-weight: bold;
  382. }
  383. .collapsible button:after {
  384. content: '\02795'; /* Unicode character for "plus" sign (+) */
  385. font-size: 13px;
  386. color: white;
  387. float: right;
  388. margin-left: 5px;
  389. }
  390. .collapsible .content {
  391. // background-color: vars.getColor("faded-text2");
  392. border: 2px solid black;
  393. border-radius: 4px;
  394. padding: 4px;
  395. // transition: all 0.2s;
  396. // height: 1px;
  397. }
  398. footer {
  399. height: 6em;
  400. background-color: vars.getColor("dark-grey");
  401. padding: 20px;
  402. color: vars.getColor("faded-text2");
  403. }
  404. footer .foot-links {
  405. width: 20em;
  406. margin: 2em auto;
  407. text-align: center;
  408. }
  409. footer a {
  410. margin: 0 8px;
  411. color: vars.getColor("faded-text2");
  412. &:hover {
  413. color: vars.getColor("faded-text");
  414. }
  415. }
  416. .hidden {
  417. display: none;
  418. }
  419. .loading-icon {
  420. display: block;
  421. width: 50px;
  422. height: 50px;
  423. margin: auto;
  424. }
  425. .register-area p {
  426. text-align: center;
  427. }
  428. .register-area .loading-icon {
  429. margin-top: 100px;
  430. }
  431. div.register-area {
  432. overflow: hidden;
  433. height: 0px;
  434. width: 100%;
  435. z-index: 1;
  436. @include vars.hovering3;
  437. margin-bottom: 2em;
  438. position: fixed;
  439. border-radius: 0;
  440. padding: 0;
  441. opacity: 0;
  442. transition: all 0.2s;
  443. background: white;
  444. h3 {
  445. text-align: center;
  446. }
  447. label,input {
  448. color: black;
  449. display: block;
  450. border-color: black;
  451. width: 95%;
  452. }
  453. div {
  454. margin-top: 20px;
  455. margin-bottom: 20px;
  456. width: 100%;
  457. }
  458. form {
  459. width: 160px;
  460. margin: 20px auto;
  461. }
  462. .submit-btn {
  463. width: 100%;
  464. background-color: #3bb78f;
  465. @include vars.special-button("light-green", "dark-green");
  466. }
  467. .cancel-button {
  468. width: 20px;
  469. height: 20px;
  470. background: url("../images/close-icon-black.svg");
  471. background-size: cover;
  472. position: absolute;
  473. top: 20px;
  474. right: 20px;
  475. }
  476. }
  477. section.features-info {
  478. min-height: 70em;
  479. }
  480. div.register-area.active {
  481. min-height: 400px;
  482. opacity: 1;
  483. }
  484. .medium-icon {
  485. width: 50px;
  486. height: 50px;
  487. margin-left: auto;
  488. margin-right: auto;
  489. display: block;
  490. top: 50px;
  491. }
  492. // Make small screens more usable
  493. @media (max-width: 720px) {
  494. nav { display: block; }
  495. nav form {
  496. // display: none;
  497. width: 190px;
  498. margin-left: auto;
  499. margin-right: auto;
  500. align-items: center;
  501. margin-top: 5em;
  502. opacity: 0;
  503. transition: transform 0.3s;
  504. transform: translateY(-50px);
  505. }
  506. nav form.active {
  507. display: block;
  508. transform: translateX(0%);
  509. opacity: 1;
  510. // background: white;
  511. // color: black;
  512. }
  513. nav form div {
  514. margin: 10px auto;
  515. }
  516. nav div label,input {
  517. display: block;
  518. }
  519. nav .nav-toggle {
  520. display: block;
  521. }
  522. div.register-area.active {
  523. display: initial;
  524. }
  525. div.register-area h1 {
  526. font-size: 1.5rem;
  527. display: inline-block;
  528. color: vars.getColor("brand-orange");
  529. }
  530. div.register-area h3 {
  531. text-align: center;
  532. }
  533. div.register-area .login {
  534. color: vars.getColor("brand-orange");
  535. display: block;
  536. margin-left: auto;
  537. margin-right: auto;
  538. // margin-top: 1em;
  539. width: 10em;
  540. // top: 40px;
  541. // position: absolute;
  542. }
  543. div.register-area .login input {
  544. border: 2px solid black;
  545. border-color: black;
  546. color: black;
  547. }
  548. div.register-area button {
  549. margin-top: 1em;
  550. width: 6em;
  551. }
  552. div.register-area div {
  553. margin-top: 10px;
  554. margin-bottom: 5px;
  555. margin-left: auto;
  556. margin-right: auto;
  557. }
  558. .landing-hero div.hero-filter h2 {
  559. top: 4em;
  560. }
  561. .landing-hero div.hero-filter p {
  562. top: 15em;
  563. }
  564. .landing-hero div.hero-filter .register-btn {
  565. top: 75%;
  566. }
  567. }
  568. .info-heading {
  569. text-align: center;
  570. margin-top: 3em;
  571. margin-left: auto;
  572. margin-right: auto;
  573. max-width: 35em;
  574. padding: 3em;
  575. height: 30em;
  576. button {
  577. display: block;
  578. margin: 3em auto;
  579. width: 6em;
  580. @include vars.special-button("light-green", "dark-green");
  581. }
  582. }
  583. main.panel {
  584. // min-height: 750px;
  585. height: 100vh;
  586. // max-height: 100vh;
  587. background-image: linear-gradient(315deg, #ff4e00 0%, #ec9f05 74%);
  588. }
  589. #panel {
  590. top: 50px;
  591. padding: 0 5%;
  592. margin: auto;
  593. position: relative;
  594. max-width: 800px;
  595. height: 90%;
  596. display: flex;
  597. gap: 10px;
  598. }
  599. #sidebar {
  600. position: relative;
  601. width: 6%;
  602. max-width: 55px;
  603. height: 50%;
  604. color: white;
  605. background: transparent;
  606. display: block;
  607. flex-shrink: 0;
  608. a {
  609. display: block;
  610. margin: 20px 0;
  611. }
  612. svg {
  613. width: 100%;
  614. height: 35px;
  615. color: white;
  616. }
  617. a.selected svg {
  618. color: vars.getColor("brand-orange");
  619. }
  620. }
  621. #panel #main {
  622. background: white;
  623. width: 100%;
  624. flex-shrink: 1;
  625. margin-left: auto;
  626. position: relative;
  627. @include vars.hovering3;
  628. transition: opacity 0.5s ease;
  629. vertical-align: middle;
  630. overflow: scroll;
  631. // text-align: center;
  632. section {
  633. padding: 5px;
  634. border-radius: 4px;
  635. min-height: 3em;
  636. margin-bottom: 1em;
  637. }
  638. h4 {
  639. margin: 4px;
  640. color: vars.getColor("dark-grey");
  641. }
  642. p {
  643. margin: 0;
  644. }
  645. .welcome-pane {
  646. text-align: center;
  647. }
  648. .credits-pane {
  649. border: 3px solid vars.getColor("orange");
  650. display: flex;
  651. align-items: center;
  652. justify-content: center;
  653. color: vars.getColor('brand-orange');
  654. }
  655. .alerts-pane {
  656. border: 3px solid vars.getColor("grey");
  657. padding: 1em;
  658. }
  659. }
  660. .fade-enter-from, .fade-leave-to {
  661. opacity: 0;
  662. }
  663. .recent-pane, .history-pane{
  664. table {
  665. border-spacing: 4px;
  666. margin: auto;
  667. text-align: center;
  668. width: 100%;
  669. }
  670. th {
  671. font-weight: normal;
  672. color: vars.getColor("light2-grey");
  673. }
  674. tr {
  675. border-bottom: 3px solid black;
  676. }
  677. td {
  678. border-bottom: 2px solid vars.getColor("grey");
  679. // color: vars.getColor("light3-grey");
  680. // font-size: 1rem;
  681. font-size: 0.8rem;
  682. }
  683. td.completed span {
  684. background: vars.getColor('green');
  685. color: vars.darkenColor('green');
  686. border-radius: 4px;
  687. padding: 2px;
  688. }
  689. td.processing {
  690. color: vars.getColor('light-blue');
  691. }
  692. td.canceled {
  693. color: vars.getColor('red-alert');
  694. }
  695. }
  696. .pending-pane {
  697. .pending-heading {
  698. position: relative;
  699. border-bottom: 1px solid vars.getColor('light2-grey');
  700. // background-color: vars.getColor('light-grey');
  701. &:hover {
  702. color: vars.darkenColor('text-blue-medium');
  703. }
  704. }
  705. .pending-content {
  706. color: grey;
  707. height: 0;
  708. overflow: hidden;
  709. transition: all 0.2s;
  710. }
  711. .selected .pending-content {
  712. height: fit-content;
  713. }
  714. li {
  715. margin: 10px 0;
  716. display: inline-block;
  717. width: 15em;
  718. }
  719. img {
  720. // border: 2px solid vars.getColor('light2-grey');
  721. padding: 4px;
  722. // border-radius: 50%;
  723. margin-top: 5px;
  724. width: 25px;
  725. display: inline-block;
  726. margin-bottom: 3px;
  727. margin-left: 2px;
  728. position: absolute;
  729. transition: all 0.2s;
  730. }
  731. .selected img {
  732. transform: rotate(180deg);
  733. }
  734. }
  735. .history-pane {
  736. overflow: visible;
  737. transition: all 0.2s;
  738. .nav-btn {
  739. width: 1.5em;
  740. transform: translateY(1.5em);
  741. }
  742. .nav-btn.right {
  743. bottom: 0px;
  744. right: 1em;
  745. position: absolute;
  746. display: block;
  747. margin-left: auto;
  748. }
  749. .nav-btn.left {
  750. bottom: 0px;
  751. left: 1em;
  752. position: absolute;
  753. display: block;
  754. margin-right: auto;
  755. }
  756. .nav-legend {
  757. color: grey;
  758. transform: translateX(-1.5em);
  759. text-align: center;
  760. position: absolute;
  761. width: 3em;
  762. left: 50%;
  763. }
  764. }
  765. .actions {
  766. margin-bottom: 1em;
  767. }
  768. .actions a {
  769. color: vars.getColor('brand-orange');
  770. margin: 1em;
  771. margin-bottom: 2em;
  772. padding: 3px;
  773. }
  774. .actions a:hover {
  775. color: vars.darkenColor('brand-orange');
  776. }
  777. .logout-pane {
  778. margin-top: 25%;
  779. text-align: center;
  780. height: 10em;
  781. a {
  782. display: block;
  783. // vertical-align: center;
  784. margin: auto;
  785. margin-top: 2em;
  786. height: 1.3em;
  787. width: 5em;
  788. @include vars.inverting-button(black, white);
  789. }
  790. }
  791. .settings-page {
  792. h3 {
  793. text-align: center;
  794. }
  795. h5 {
  796. display: inline-block;
  797. margin-right: 2em;
  798. margin-top: 0;
  799. margin-bottom: 0.5em;
  800. color: vars.getColor('brand-orange');
  801. }
  802. input {
  803. display: block;
  804. margin-bottom: 1em;
  805. right: 2px;
  806. position: relative;
  807. }
  808. button {
  809. &>*{vertical-align: middle;}
  810. margin-right: 10px;
  811. display: inline-block;
  812. @include vars.inverting-button(vars.getColor('text-blue-medium'), white);
  813. }
  814. .loading-icon {
  815. width: 1.5em;
  816. height: 1.5em;
  817. display: none;
  818. color: white;
  819. margin-left: 0.5em;
  820. margin-right: 0.5em;
  821. }
  822. .loading .loading-icon {
  823. display: inline;
  824. }
  825. .completed span {
  826. color: vars.getColor('green');
  827. }
  828. .error span {
  829. color: vars.getColor('red-alert');
  830. }
  831. }
  832. .services-legend {
  833. display: flex;
  834. justify-content: space-between;
  835. margin-top: 20px;
  836. border-top: 1px solid darkgrey;
  837. border-bottom: 1px solid darkgrey;
  838. min-height: 2em;
  839. background-color: rgb(239, 239, 239);
  840. color: rgb(118, 118, 118);
  841. padding-right: 30px;
  842. h5 {
  843. display: inline-block;
  844. margin: auto;
  845. text-align: center;
  846. width: 20%;
  847. // max-width: 25%;
  848. }
  849. :nth-child(1) {
  850. width: 30%;
  851. }
  852. }
  853. .sliding-menu {
  854. display: flex;
  855. justify-content: center;
  856. flex-basis: 50%;
  857. margin-top: 1em;
  858. flex-flow: wrap;
  859. gap: 10px;
  860. a {
  861. width: 25%;
  862. font-size: 1.1rem;
  863. background: none;
  864. border: none;
  865. color: grey;
  866. text-align: center;
  867. }
  868. .selected {
  869. color: black;
  870. }
  871. }
  872. .menu-slider {
  873. width: 55%;
  874. div {
  875. transition: all 0.2s;
  876. width: 50%;
  877. border-bottom: 2px solid black;
  878. flex: 2;
  879. }
  880. }
  881. .menu-slider.credits div {
  882. transform: translateX(100%);
  883. }
  884. .menu-slider.right div {
  885. transform: translateX(100%);
  886. }
  887. .services-pane {
  888. li {
  889. display: flex;
  890. // gap: 0.5em;
  891. justify-content: space-between;
  892. align-items: center;
  893. border-top: 1px solid grey;
  894. // border-bottom: 1px solid grey;
  895. padding: 6px 0;
  896. }
  897. li span {
  898. // width: 10%;
  899. text-align:center;
  900. vertical-align: middle;
  901. }
  902. li :nth-child(1) {
  903. width: 30%;
  904. }
  905. li:hover span {
  906. color: vars.darkenColor('faded-text');
  907. }
  908. svg {
  909. width: 25px;
  910. height: 25px;
  911. color: vars.getColor('brand-orange');
  912. right: 10px;
  913. }
  914. svg:hover {
  915. color: vars.getColor('dark-orange');
  916. }
  917. }
  918. #overlay {
  919. position: fixed;
  920. width: 100%;
  921. height: 100%;
  922. background-color: rgba(0,0,0,0.5);
  923. left: 0;
  924. top: 0;
  925. .overlay-item {
  926. width: 20em;
  927. min-height: 20em;
  928. background: white;
  929. margin: auto;
  930. margin-top: 20%;
  931. opacity: 1;
  932. border-radius: 4px;
  933. padding: 5px;
  934. @include vars.hovering2;
  935. div {
  936. width: 15em;
  937. margin: auto;
  938. margin-bottom: 1em;
  939. }
  940. input {
  941. // width: 40%;
  942. display: inline;
  943. }
  944. }
  945. .icon {
  946. width: 40px;
  947. height: 40px;
  948. display: block;
  949. margin: 0 auto;
  950. }
  951. h3 {
  952. text-align: center;
  953. margin-top: 5px;
  954. }
  955. h4 {
  956. text-align: center;
  957. }
  958. .cancel {
  959. position: absolute;
  960. width: 30px;
  961. right: 10px;
  962. top: 10px;
  963. }
  964. button {
  965. display: inline-block;
  966. margin: auto;
  967. display: flex;
  968. align-items: center;
  969. text-align: center;
  970. justify-content: center;
  971. @include vars.inverting-button(vars.getColor('brand-orange'), white);
  972. font-size: 1.1rem;
  973. min-width: 7em;
  974. }
  975. #url {
  976. width: 100%;
  977. }
  978. p {
  979. margin-top: 2em;
  980. text-align: center;
  981. }
  982. }
  983. button .loading-icon {
  984. display: inline;
  985. height: 1.5em;
  986. }
  987. #panel #main .credits-display {
  988. text-align: center;
  989. margin: 1em;
  990. color: vars.getColor('brand-orange');
  991. display: flex;
  992. justify-content: center;
  993. align-items: center;
  994. }
  995. .select-credits .credits-pane {
  996. flex-flow: wrap;
  997. border-radius: 4px;
  998. margin-bottom: 2em;
  999. text-align: center;
  1000. display: flex;
  1001. gap: 5%;
  1002. padding: 0.5em 0;
  1003. span {margin-right: 0.5em;}
  1004. }
  1005. .select-credits h2 {
  1006. margin: 0;
  1007. }
  1008. .select-credits h3 {
  1009. text-align: center;
  1010. }
  1011. .select-credits input {
  1012. width: 3em;
  1013. }
  1014. .brand-btn {
  1015. display: inline-block;
  1016. margin: auto;
  1017. display: flex;
  1018. align-items: center;
  1019. text-align: center;
  1020. justify-content: center;
  1021. @include vars.inverting-button(vars.getColor('brand-orange'), white);
  1022. font-size: 1.1rem;
  1023. min-width: 7em;
  1024. }
  1025. div#card-errors {
  1026. margin: 5%;
  1027. text-align: center;
  1028. }
  1029. #payment-section {
  1030. h4 {
  1031. text-align: center;
  1032. }
  1033. form {
  1034. margin-top: 2em;
  1035. }
  1036. label {
  1037. display: block;
  1038. }
  1039. input {
  1040. margin: 1em 0;
  1041. }
  1042. #save-card {
  1043. display: flex;
  1044. gap: 10px;
  1045. align-items: center;
  1046. justify-content: center;
  1047. }
  1048. #billing-name {
  1049. width: 25em;
  1050. max-width: 90%;
  1051. }
  1052. }
  1053. #card-element {
  1054. border: 2px solid grey;
  1055. border-radius: 4px;
  1056. padding: 10px;
  1057. }
  1058. .info-grey {
  1059. text-align: center;
  1060. color: grey;
  1061. // color: vars.getColor('light2-grey');
  1062. div {
  1063. width: 20%;
  1064. margin: auto;
  1065. height: 4px;
  1066. margin-top: 1em;
  1067. background: vars.getColor('light2-grey');
  1068. border-radius: 2px;
  1069. }
  1070. }
  1071. .saved-card {
  1072. display: flex;
  1073. gap: 15px;
  1074. align-items: center;
  1075. justify-content: space-around;
  1076. max-width: 15em;
  1077. margin: auto;
  1078. }
  1079. .status-dialog {
  1080. margin: auto;
  1081. max-width: 20em;
  1082. img {
  1083. margin: auto;
  1084. display: block;
  1085. }
  1086. }