API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Nov 18th, 2019
102
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 30.63 KB | None | 0 0
raw download clone embed print report
  1. * {
  2. -webkit-box-sizing: border-box;
  3. -moz-box-sizing: border-box;
  4. box-sizing: border-box;
  5. -moz-user-select: none;
  6. -webkit-user-drag: none;
  7. -webkit-touch-callout: none;
  8. -ms-content-zooming: none; }
  9.  
  10. html,
  11. body {
  12. width: 100%;
  13. height: 100%;
  14. padding: 0;
  15. margin: 0;
  16. overflow: hidden;
  17. background-color: #e4e4e4;
  18. font-family: Roboto, sans-serif; }
  19.  
  20. a,
  21. a:hover,
  22. a:active,
  23. a:visited {
  24. text-decoration: none;
  25. color: inherit; }
  26.  
  27. .blur {
  28. -webkit-filter: blur(0px);
  29. -moz-filter: blur(0px);
  30. -o-filter: blur(0px);
  31. -ms-filter: blur(0px);
  32. filter: blur(0px); }
  33.  
  34. .viewport {
  35. position: absolute;
  36. top: 0;
  37. left: 0;
  38. width: 100%;
  39. height: 100%; }
  40. .viewport .hotspot {
  41. display: none;
  42. position: relative;
  43. width: 100px;
  44. height: 100px;
  45. padding: 50px;
  46. /*= 2em * 1.4 (2em = half the width of an img, 1.4 = sqrt(2))*/
  47. border-radius: 50%;
  48. margin-left: -51px;
  49. margin-top: -51px;
  50. color: #e4e4e4; }
  51. .viewport .hotspot:hover {
  52. color: #ffffff; }
  53. .viewport .hotspot.visible {
  54. display: block; }
  55. .viewport .hotspot .label {
  56. font-size: 13px;
  57. position: absolute;
  58. bottom: -29px;
  59. left: -45px;
  60. width: 150px;
  61. margin: 0 auto;
  62. text-align: center;
  63. text-shadow: 0 0 3px black, 0 0 6px black;
  64. text-transform: uppercase; }
  65. .viewport .hotspot .drop-shadow {
  66. filter: drop-shadow(0 2px 1px -1px rgba(0, 0, 0, 0.2));
  67. filter: drop-shadow(0 1px 1px 0 rgba(0, 0, 0, 0.14));
  68. filter: drop-shadow(0 1px 3px 0 rgba(0, 0, 0, 0.12));
  69. -webkit-filter: drop-shadow(0 2px 1px rgba(0, 0, 0, 0.2));
  70. -webkit-filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.14));
  71. -webkit-filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.12));
  72. width: 66px;
  73. height: 66px;
  74. border-radius: 33px;
  75. border: 4px double white;
  76. box-shadow: 0 0 6px 3px #2d2d2d;
  77. transform: translate(-50%, -50%);
  78. transition: .25s all; }
  79. .viewport .hotspot .drop-shadow:hover {
  80. filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.2));
  81. filter: drop-shadow(0 4px 5px rgba(0, 0, 0, 0.14));
  82. filter: drop-shadow(0 2px 7px rgba(0, 0, 0, 0.12));
  83. -webkit-filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.2));
  84. -webkit-filter: drop-shadow(0 4px 5px rgba(0, 0, 0, 0.14));
  85. -webkit-filter: drop-shadow(0 2px 7px rgba(0, 0, 0, 0.12));
  86. border: 4px double #1bad8f; }
  87. .viewport .hotspot .spot-center {
  88. display: none;
  89. width: 60px;
  90. height: 60px;
  91. opacity: 0.8;
  92. transition: opacity 0.2s;
  93. cursor: pointer; }
  94. .viewport .hotspot .spot-center.visible {
  95. display: block; }
  96. .viewport .hotspot .spot-center:hover {
  97. opacity: 1; }
  98. .viewport .hotspot .spot-circle-option {
  99. display: block;
  100. overflow: hidden;
  101. position: absolute;
  102. top: 50%;
  103. left: 50%;
  104. width: 30px;
  105. height: 30px;
  106. margin: -15px;
  107. /* 2em = 4em/2 */
  108. /* half the width */ }
  109. .viewport .hotspot.hotspot-info .info-close {
  110. display: none;
  111. position: absolute;
  112. top: -18px;
  113. right: -18px;
  114. width: 30px;
  115. height: 30px;
  116. background-color: #3e3e3e;
  117. border-radius: 50%;
  118. padding: 5px;
  119. border: 1px solid white;
  120. z-index: 99; }
  121. .viewport .hotspot.hotspot-info .info-cloud {
  122. display: none;
  123. position: relative;
  124. overflow: hidden; }
  125. .viewport .hotspot.hotspot-info .info-cloud .info-content {
  126. color: white;
  127. font-size: 14px;
  128. min-width: 300px;
  129. padding: 10px;
  130. background-color: #3e3e3e;
  131. border-radius: 5px; }
  132. .viewport .hotspot.hotspot-info .drop-shadow.expanded {
  133. width: 320px;
  134. height: auto;
  135. border-radius: 10px; }
  136. .viewport .hotspot.hotspot-info .drop-shadow.expanded .info-close {
  137. display: block; }
  138. .viewport .hotspot.hotspot-info .drop-shadow.expanded .info-icon {
  139. display: none; }
  140. .viewport .hotspot.hotspot-info .drop-shadow.expanded .info-cloud {
  141. display: block; }
  142. .viewport .hotspot.hotspot-logo {
  143. margin-left: 0;
  144. margin-top: 0; }
  145. .viewport .hotspot.hotspot-logo .spot-center {
  146. width: 300px;
  147. height: 300px;
  148. margin: -150px -150px;
  149. opacity: 1;
  150. border-radius: 50%;
  151. overflow: hidden;
  152. background-color: #ffffff; }
  153. .viewport .hotspot.hotspot-logo .logo-container {
  154. position: relative;
  155. display: block;
  156. top: 50%;
  157. transform: translateY(-50%); }
  158. .viewport .hotspot.hotspot-logo .logo-container .logo-image {
  159. width: 70%;
  160. height: auto;
  161. display: block;
  162. margin: 0 auto; }
  163.  
  164. .viewControlButton {
  165. position: absolute;
  166. bottom: 13px;
  167. left: 50%;
  168. width: 32px;
  169. height: 32px;
  170. border-radius: 5px;
  171. color: #e4e4e4;
  172. cursor: pointer; }
  173. .viewControlButton.visible {
  174. display: block; }
  175.  
  176. .viewPhotoName {
  177. display: block;
  178. position: absolute;
  179. left: 50px;
  180. bottom: 0;
  181. height: 50px;
  182. color: #e4e4e4; }
  183. .viewPhotoName .photoname-label {
  184. font-size: 14px;
  185. line-height: 50px;
  186. max-width: 250px;
  187. overflow: hidden;
  188. display: inline-block;
  189. text-overflow: ellipsis;
  190. white-space: nowrap;
  191. text-transform: uppercase; }
  192.  
  193. body.view-control-buttons .viewControlButton {
  194. display: block; }
  195.  
  196. /* Hide controls when width is too small */
  197. @media (max-width: 600px) {
  198. body.view-control-buttons .viewControlButton {
  199. display: none; } }
  200.  
  201. .viewControlButton .icon {
  202. display: flex;
  203. align-items: center;
  204. justify-content: center;
  205. position: absolute;
  206. width: 32px;
  207. height: 32px;
  208. color: #e4e4e4; }
  209.  
  210. .effecticon:hover {
  211. font-size: 40px; }
  212.  
  213. /* Center is at margin-left: -20px */
  214. .viewControlButton-0 {
  215. margin-left: -195px; }
  216.  
  217. .viewControlButton-1 {
  218. margin-left: -145px; }
  219.  
  220. .viewControlButton-2 {
  221. margin-left: -95px; }
  222.  
  223. .viewControlButton-3 {
  224. margin-left: -45px; }
  225.  
  226. .viewControlButton-4 {
  227. margin-left: 5px; }
  228.  
  229. .viewControlButton-5 {
  230. margin-left: 55px; }
  231.  
  232. .viewControlButton-6 {
  233. margin-left: 105px; }
  234.  
  235. .button-back {
  236. display: none;
  237. position: absolute;
  238. bottom: 0;
  239. height: 58px;
  240. width: 100%; }
  241. .button-back.visible {
  242. display: block; }
  243. .button-back .viewPhotoContainer .viewPhoto .viewPhotoLoader {
  244. font-size: 14px;
  245. color: #e4e4e4;
  246. position: absolute;
  247. left: 10px;
  248. bottom: 50px; }
  249. @media screen and (max-width: 1040px) {
  250. .button-back .controls {
  251. display: none; } }
  252.  
  253. @media screen and (max-width: 768px) {
  254. .viewControlButton {
  255. display: none !important; }
  256. .chat {
  257. max-width: 100% !important;
  258. width: 100%; }
  259. .intro {
  260. flex-direction: column; }
  261. .intro-desc {
  262. border-left: none !important;
  263. width: 100% !important; }
  264. .intro-360 {
  265. width: 100% !important;
  266. margin-bottom: -34px; }
  267. .intro-360 .watermark {
  268. display: none; } }
  269.  
  270. .spinner {
  271. position: absolute;
  272. left: 50%;
  273. top: 50%;
  274. margin-left: -32px;
  275. margin-top: -32px;
  276. color: rgba(128, 128, 128, 0.6);
  277. z-index: 5; }
  278. .spinner.hidden {
  279. display: none; }
  280.  
  281. .intro-wrapper {
  282. align-items: center;
  283. height: 100%;
  284. z-index: 2;
  285. position: relative;
  286. display: flex;
  287. background-color: rgba(0, 0, 0, 0.35); }
  288. .intro-wrapper .intro-360 {
  289. width: 36%; }
  290. .intro-wrapper .intro-360-small {
  291. width: 36%; }
  292. .intro-wrapper .intro-desc {
  293. width: 64%;
  294. border-left: 2px solid white;
  295. padding: 10px 20px; }
  296. .intro-wrapper .intro-title h4 {
  297. margin-bottom: 14px;
  298. font-size: 20px;
  299. text-align: center;
  300. font-family: 'Roboto Condensed', sans-serif;
  301. text-shadow: 0 0 5px black; }
  302. .intro-wrapper .intro {
  303. display: none;
  304. max-width: 560px;
  305. z-index: 5;
  306. color: #ffffff;
  307. max-height: 456px;
  308. justify-content: space-around;
  309. align-items: center;
  310. margin: 0 auto; }
  311. .intro-wrapper .intro.visible {
  312. display: flex; }
  313. .intro-wrapper .intro .avatars {
  314. text-align: center;
  315. display: flex;
  316. justify-content: center; }
  317. .intro-wrapper .intro .company-logo {
  318. justify-content: center;
  319. height: 115px;
  320. padding-bottom: 10px;
  321. padding-top: 10px;
  322. display: none; }
  323. .intro-wrapper .intro .company-logo img {
  324. height: 100px;
  325. border-radius: 50%; }
  326. .intro-wrapper .intro .owner-avatar {
  327. justify-content: center;
  328. height: 115px;
  329. padding-bottom: 10px;
  330. padding-top: 10px; }
  331. .intro-wrapper .intro .owner-avatar img {
  332. height: 100px;
  333. border-radius: 50%; }
  334. .intro-wrapper .intro .title {
  335. text-align: center;
  336. font-size: 14px;
  337. font-weight: 400;
  338. padding-bottom: 20px;
  339. display: none; }
  340. .intro-wrapper .intro .start-button {
  341. padding: 15px 35px;
  342. border: 2px solid #ffffff;
  343. text-transform: uppercase;
  344. border-radius: 34px;
  345. width: 150px;
  346. text-align: center;
  347. margin: 0 auto;
  348. box-shadow: 0 0 11px #848484; }
  349. .intro-wrapper .intro .start-button .fa-play {
  350. font-size: 16px;
  351. margin-left: 5px; }
  352. .intro-wrapper .intro .start-button.active:hover {
  353. background-color: rgba(0, 0, 0, 0.4);
  354. cursor: pointer;
  355. color: #07d6ab;
  356. border: 2px solid #07d6ab; }
  357. .intro-wrapper .intro .info {
  358. font-family: 'Roboto Condensed', sans-serif;
  359. text-align: center;
  360. font-size: 15px;
  361. padding: 10px 0px;
  362. line-height: 18px;
  363. margin-bottom: 14px;
  364. text-shadow: 0 0 5px black; }
  365. .intro-wrapper .intro .upper {
  366. position: absolute;
  367. top: 0;
  368. left: 21px;
  369. right: 21px;
  370. bottom: 50%;
  371. margin-bottom: 42px;
  372. display: flex;
  373. justify-content: center;
  374. align-items: flex-end; }
  375. .intro-wrapper .intro .center {
  376. position: absolute;
  377. top: 50%;
  378. margin-top: -42px;
  379. left: 50%;
  380. margin-left: -42px;
  381. padding: 10px; }
  382. .intro-wrapper .intro .center .play {
  383. display: none;
  384. color: #e4e4e4;
  385. cursor: pointer;
  386. transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1); }
  387. .intro-wrapper .intro .center .play.visible {
  388. display: flex;
  389. margin: 10px; }
  390. .intro-wrapper .intro .center .play.visible:hover {
  391. color: #ffffff;
  392. transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1); }
  393. .intro-wrapper .intro .lower {
  394. position: absolute;
  395. top: 50%;
  396. margin-top: 42px;
  397. left: 21px;
  398. right: 21px;
  399. bottom: 0;
  400. display: flex;
  401. justify-content: center;
  402. align-items: flex-start; }
  403. .intro-wrapper .intro .lower .description {
  404. display: flex;
  405. top: 0;
  406. position: absolute;
  407. max-height: 100%;
  408. overflow: hidden; }
  409. .intro-wrapper .intro .lower .description .placeholder {
  410. display: flex;
  411. border: none !important;
  412. width: auto; }
  413. .intro-wrapper .intro .lower .description .placeholder .ql-editor {
  414. overflow: hidden; }
  415. .intro-wrapper .intro .elipsis {
  416. position: absolute;
  417. bottom: 0;
  418. display: none;
  419. font-size: 25px; }
  420. .intro-wrapper .intro .elipsis.visible {
  421. display: block; }
  422.  
  423. @media only screen and (max-width: 480px) {
  424. .poke {
  425. right: 3px !important;
  426. bottom: 100px !important;
  427. width: 295px !important; }
  428. .poke .content {
  429. font-size: 14px; }
  430. .intro-wrapper .intro {
  431. max-height: 315px;
  432. display: flex;
  433. margin: 0 15px; }
  434. .intro-wrapper .intro .company-logo {
  435. flex-basis: 100px;
  436. padding-bottom: 0;
  437. padding-top: 0; }
  438. .intro-wrapper .intro .title {
  439. padding: 6px 5px 20px 5px !important; }
  440. .intro-wrapper .intro .start-button {
  441. padding: 11px 30px;
  442. font-size: 14px;
  443. text-align: center; }
  444. .intro-wrapper .intro .info {
  445. padding-left: 0px;
  446. padding-right: 0px;
  447. font-size: 16px;
  448. padding-top: 0; } }
  449.  
  450. .message {
  451. display: none; }
  452. .message.visible {
  453. height: 100%;
  454. display: flex;
  455. flex-direction: column;
  456. justify-content: center;
  457. align-items: center; }
  458.  
  459. .chat {
  460. position: absolute;
  461. bottom: 20px;
  462. right: 20px;
  463. max-height: 42px;
  464. transition: max-height 0.3s;
  465. background: transparent;
  466. color: white;
  467. padding: 0;
  468. width: 360px;
  469. z-index: 9999; }
  470. .chat.hide .title {
  471. display: none; }
  472. .chat.no-trans {
  473. transition: none; }
  474. .chat .chat-panel {
  475. background: #ffffff;
  476. border-radius: 20px; }
  477. .chat .chat-panel .header {
  478. display: flex;
  479. justify-content: center;
  480. padding-bottom: 8px; }
  481. .chat .chat-panel .header .title {
  482. white-space: nowrap;
  483. overflow: hidden;
  484. text-overflow: ellipsis;
  485. color: #2d3e50;
  486. font-weight: bold; }
  487. .chat .chat-panel .initial-screen {
  488. padding-right: 5px;
  489. padding-bottom: 5px; }
  490. .chat .chat-panel .initial-screen .connect-wrapper {
  491. display: inline-block; }
  492. .chat .chat-panel .name-error,
  493. .chat .chat-panel .conversation-error {
  494. color: indianred;
  495. background-color: lightgray;
  496. padding: 4px 3px 3px;
  497. margin-top: 5px;
  498. font-weight: bold; }
  499. .chat .chat-panel .time {
  500. font-size: 11px;
  501. color: #2d3e50;
  502. margin-right: 5px; }
  503. .chat .chat-panel .conversation {
  504. overflow-y: auto;
  505. height: 250px;
  506. padding: 8px;
  507. background-color: #f2f3f3; }
  508. .chat .chat-panel .conversation .message-container {
  509. margin: 6px 0;
  510. color: black;
  511. display: flex;
  512. flex-flow: row nowrap; }
  513. .chat .chat-panel .conversation .message-container .triangle-left,
  514. .chat .chat-panel .conversation .message-container .triangle-right {
  515. visibility: hidden; }
  516. .chat .chat-panel .conversation .message-container.in {
  517. justify-content: space-between; }
  518. .chat .chat-panel .conversation .message-container.in .message-wrapper {
  519. margin-right: 30px;
  520. margin-left: 5px;
  521. background-color: rgba(55, 190, 156, 0.43);
  522. border-radius: 0px 10px 10px 20px !important; }
  523. .chat .chat-panel .conversation .message-container.out {
  524. justify-content: flex-end; }
  525. .chat .chat-panel .conversation .message-container.out .message-wrapper {
  526. margin-right: 5px;
  527. margin-left: 30px;
  528. background-color: #c5c5c5;
  529. border-radius: 10px 0px 20px 10px !important; }
  530. .chat .chat-panel .conversation .message-container .entry-wrapper {
  531. width: 85%;
  532. display: flex;
  533. flex-flow: row nowrap; }
  534. .chat .chat-panel .conversation .message-container .entry-wrapper .triangle-wrapper {
  535. display: flex;
  536. flex-direction: column;
  537. justify-content: center; }
  538. .chat .chat-panel .conversation .message-container .entry-wrapper .triangle-wrapper .triangle-left {
  539. width: 0;
  540. height: 0;
  541. border-style: solid;
  542. border-width: 5px 8.7px 5px 0;
  543. border-color: transparent #ddf4fd transparent transparent; }
  544. .chat .chat-panel .conversation .message-container .entry-wrapper .triangle-wrapper .triangle-right {
  545. width: 0;
  546. height: 0;
  547. border-style: solid;
  548. border-width: 5px 0 5px 8.7px;
  549. border-color: transparent transparent transparent #46d8b1; }
  550. .chat .chat-panel .conversation .message-container .entry-wrapper .message-wrapper {
  551. width: 100%;
  552. overflow: hidden;
  553. overflow-wrap: break-word;
  554. border-radius: 4px; }
  555. .chat .chat-panel .conversation .message-container .entry-wrapper .message-wrapper .msg {
  556. min-height: 25px;
  557. padding: 8px 10px;
  558. font-size: 13px; }
  559. .chat .chat-panel .conversation .message-container .entry-wrapper .message-wrapper .msg.error {
  560. color: red; }
  561. .chat .chat-panel .conversation .message-container .entry-wrapper .message-wrapper .msg a {
  562. color: rgba(0, 0, 0, 0.5);
  563. text-decoration: underline; }
  564. .chat .chat-panel .conversation .message-container .time-wrapper {
  565. display: flex;
  566. flex-direction: column;
  567. justify-content: center; }
  568. .chat .chat-panel .refresh-wrapper {
  569. display: flex;
  570. flex-flow: row nowrap;
  571. padding: 8px 3px 5px 0;
  572. width: 90%;
  573. margin: 0 auto; }
  574. .chat .chat-panel .refresh-wrapper .btn-refresh {
  575. display: block;
  576. width: 100%;
  577. background-color: #ffffff;
  578. border-radius: 4px;
  579. text-align: center;
  580. color: #3e3e3e;
  581. margin: 0;
  582. border: none; }
  583. .chat .chat-panel .refresh-wrapper .btn-refresh .fa {
  584. margin-right: 10px; }
  585. .chat .chat-panel .refresh-wrapper .btn-refresh:hover {
  586. color: #37be9c; }
  587. .chat .chat-panel .refresh-wrapper .refresh-text {
  588. text-transform: uppercase;
  589. margin-left: 0.5rem; }
  590. .chat .chat-panel .send-wrapper {
  591. display: flex;
  592. flex-flow: row nowrap;
  593. padding: 10px; }
  594. .chat .chat-panel .send-wrapper .currentMessage {
  595. caret-color: #37be9c;
  596. font-size: 13px;
  597. background-color: transparent;
  598. border-style: none;
  599. font-family: inherit;
  600. flex: 1 0 auto;
  601. resize: none;
  602. overflow-y: hidden;
  603. padding: 5px 10px; }
  604. .chat .chat-panel .send-wrapper .currentMessage:focus {
  605. outline: none; }
  606. .chat .chat-panel .send-wrapper .send {
  607. color: #37be9c;
  608. align-self: center;
  609. width: 35.55px;
  610. cursor: pointer;
  611. display: flex;
  612. align-items: center;
  613. justify-content: center; }
  614. .chat .tab-wrapper {
  615. color: #e4e4e4;
  616. display: flex;
  617. align-items: center;
  618. justify-content: flex-end; }
  619. .chat .tab-wrapper.in {
  620. color: black;
  621. background-color: rgba(178, 205, 216, 0.84);
  622. border-width: 3px; }
  623. .chat .tab-wrapper .fa-2x {
  624. font-size: 22px; }
  625. .chat .tab-wrapper .indicator {
  626. position: absolute;
  627. top: 5px;
  628. right: 0;
  629. color: #ff8c00; }
  630. .chat .tab-wrapper .photo-container {
  631. box-sizing: content-box;
  632. width: 100%;
  633. position: relative;
  634. height: 75px; }
  635. .chat .tab-wrapper .photo-container .user-photo-wrapper {
  636. background: white;
  637. border: 2px solid;
  638. position: absolute;
  639. overflow: hidden;
  640. border-radius: 50%;
  641. box-sizing: content-box;
  642. width: 60px;
  643. height: 60px;
  644. transition: bottom 0.2s linear;
  645. left: 5px;
  646. top: 5px; }
  647. .chat .tab-wrapper .photo-container .user-photo-wrapper .user-photo {
  648. max-width: 100%;
  649. z-index: 10;
  650. position: relative; }
  651. .chat .tab-wrapper .photo-container .user-photo-wrapper .user-avatar-icon {
  652. color: #d4d4d4;
  653. font-size: 47px;
  654. position: absolute;
  655. top: 10px;
  656. left: 10px;
  657. z-index: 1; }
  658. .chat .tab-wrapper .photo-container .poke {
  659. background: white;
  660. width: 364px;
  661. position: absolute;
  662. left: -30px;
  663. bottom: 57px;
  664. color: #2d3e50;
  665. border-radius: 20px;
  666. box-shadow: 0 0 5px #2d3e50;
  667. font-family: 'Roboto Condensed', sans-serif; }
  668. .chat .tab-wrapper .photo-container .poke .header {
  669. background: #3e3e3e;
  670. color: #e4e4e4;
  671. display: flex;
  672. justify-content: center;
  673. align-items: center;
  674. position: relative;
  675. height: 40px;
  676. border-radius: 10px 10px 0px 0px; }
  677. .chat .tab-wrapper .photo-container .poke .header .btn {
  678. position: absolute;
  679. right: -30px;
  680. top: -30px;
  681. color: #3e3e3e; }
  682. .chat .tab-wrapper .photo-container .poke .header .title {
  683. display: inline; }
  684. .chat .tab-wrapper .photo-container .poke .content {
  685. display: flex;
  686. justify-content: center;
  687. margin: 15px 25px;
  688. text-align: center;
  689. padding-top: 5px;
  690. color: #3e3e3e; }
  691. .chat .tab-wrapper .photo-container .poke .poke-user-photo-wrapper {
  692. border-radius: 50%;
  693. box-sizing: content-box;
  694. width: 60px;
  695. height: 60px;
  696. overflow: hidden;
  697. margin-right: 10px; }
  698. .chat .tab-wrapper .photo-container .poke .poke-user-photo-wrapper .user-photo {
  699. width: 100%;
  700. height: auto; }
  701. .chat .tab-wrapper .photo-container .poke .subheader {
  702. position: relative;
  703. display: flex;
  704. height: 180px;
  705. font-size: 1.5rem;
  706. justify-content: center;
  707. align-items: center;
  708. margin-top: 15px;
  709. flex-direction: column; }
  710. .chat .tab-wrapper .photo-container .poke .subheader .user-name {
  711. line-height: 30px;
  712. font-size: 1.5rem; }
  713. .chat .tab-wrapper .photo-container .poke .subheader .user-data {
  714. line-height: 20px;
  715. font-size: 1rem; }
  716. .chat .tab-wrapper .photo-container .poke .actions {
  717. display: flex;
  718. justify-content: space-around;
  719. padding-bottom: 25px;
  720. padding-top: 10px;
  721. font-weight: 600; }
  722. .chat .tab-wrapper .photo-container .poke .actions .answer {
  723. margin: 15px 0px;
  724. cursor: pointer; }
  725. .chat .tab-wrapper .photo-container .poke .actions .yes {
  726. color: #3e3e3e;
  727. margin: 0 auto;
  728. font-weight: 200;
  729. border: 1px solid #3e3e3e;
  730. padding: 8px 40px;
  731. border-radius: 18px; }
  732. .chat .tab-wrapper .photo-container .poke .actions .yes:hover {
  733. color: #37be9c;
  734. border: 1px solid #37be9c; }
  735. .chat .tab-wrapper .photo-container .poke .actions .no {
  736. color: #be373e; }
  737. .chat .tab-wrapper .tab-fullscreen {
  738. display: none; }
  739. @media screen and (max-width: 768px) {
  740. .chat .tab-wrapper .tab-fullscreen {
  741. display: block;
  742. position: absolute;
  743. right: 130px;
  744. top: -23px; } }
  745. .chat .tab-wrapper .minimize {
  746. position: absolute;
  747. right: 10px;
  748. top: -10px; }
  749. .chat .tab-wrapper .maximize {
  750. position: relative;
  751. display: flex;
  752. align-items: center;
  753. font-size: 12px;
  754. cursor: pointer;
  755. position: absolute; }
  756. .chat .rtc-actions {
  757. display: flex;
  758. align-items: center;
  759. justify-content: flex-end;
  760. width: 100%;
  761. height: 60px;
  762. position: absolute; }
  763. .chat .rtc-actions .button {
  764. border-radius: 50%;
  765. height: 30px;
  766. width: 30px;
  767. display: flex;
  768. align-items: center;
  769. justify-content: center;
  770. margin: 5px;
  771. background: white; }
  772. .chat .rtc-actions .button .icon {
  773. color: black; }
  774. .chat .rtc-actions video {
  775. max-width: 40px; }
  776. .chat .rtc-actions .indicator-outer {
  777. position: relative;
  778. display: flex; }
  779. .chat .rtc-actions .indicator-inner {
  780. background-color: #ffffff;
  781. border-radius: 50%;
  782. position: absolute;
  783. bottom: 20px;
  784. right: -17px;
  785. width: 25px;
  786. height: 25px;
  787. display: flex;
  788. align-items: center;
  789. justify-content: center; }
  790. .chat .rtc-actions .indicator-inner.green {
  791. background-color: #8fef8f; }
  792. .chat .rtc-actions .indicator-inner .connecting {
  793. color: #1ab294;
  794. display: flex;
  795. font-size: 17px; }
  796. .chat.hide {
  797. transition: max-height 0.2s ease-out; }
  798. .chat.hide .minimize {
  799. display: none; }
  800. .chat.hide .photo-container > .user-photo-wrapper {
  801. /*bottom: 8px;
  802. transition: bottom 0.2s linear;*/
  803. display: none; }
  804. .chat.show {
  805. transition: height 0.5s ease-in;
  806. background-color: white;
  807. border-radius: 20px;
  808. box-shadow: 0 4px 16px #272727; }
  809. .chat.show .maximize {
  810. display: none; }
  811.  
  812. .hidden {
  813. display: none !important; }
  814.  
  815. .logo {
  816. position: absolute;
  817. margin: 8px;
  818. width: 110px;
  819. height: 110px;
  820. border-radius: 50%;
  821. overflow: hidden;
  822. display: flex;
  823. align-items: center;
  824. justify-content: center;
  825. background-color: #ffffff; }
  826. @media screen and (max-width: 768px) {
  827. .logo {
  828. width: 80px;
  829. height: 80px; } }
  830.  
  831. .logo img {
  832. width: 70%; }
  833.  
  834. .fullscreen {
  835. position: absolute;
  836. left: 5px; }
  837.  
  838. .fullscreen-label {
  839. position: absolute;
  840. left: 37px;
  841. white-space: nowrap;
  842. line-height: 32px;
  843. font-size: 12px; }
  844.  
  845. .fa-2x {
  846. font-size: 26px; }
  847.  
  848. .static-shadow {
  849. box-shadow: 0 0 10px 0 0 5px #6b6b6b; }
  850.  
  851. .btn {
  852. width: 32px;
  853. height: 32px;
  854. border-radius: 5px;
  855. color: #e4e4e4;
  856. cursor: pointer;
  857. display: flex;
  858. align-items: center;
  859. justify-content: center;
  860. margin: 5px; }
  861.  
  862. .watermark {
  863. opacity: 1; }
  864. .watermark .watermark-gray {
  865. color: #ffffff;
  866. letter-spacing: 1px;
  867. margin-right: 1px;
  868. font-size: 10px; }
  869. .watermark .watermark-green {
  870. color: #37be9c;
  871. letter-spacing: 1px;
  872. font-size: 10px;
  873. font-weight: 600; }
  874.  
  875. .right-description {
  876. position: fixed;
  877. right: 30px;
  878. top: 10px; }
  879.  
  880. .btn-chat-new {
  881. margin-bottom: 95px;
  882. background-color: #ffffff;
  883. border-radius: 50%;
  884. box-shadow: 0px 0px 8px #bdbdbd;
  885. width: 70px;
  886. height: 70px;
  887. text-align: center;
  888. color: #3e3e3e; }
  889.  
  890. .btn-chat-new:hover {
  891. width: 80px;
  892. height: 80px;
  893. box-shadow: 0px 0px 8px #37be9c; }
  894.  
  895. /*.btn-link-new {
  896. margin-bottom: 43px;
  897. background-color: #ffffff;
  898. border-radius: 50%;
  899. box-shadow: 0px 0px 8px #bdbdbd;
  900. width: 50px;
  901. height: 50px;
  902. text-align: center;
  903. color: #37be9c;
  904. }*/
  905. .btn-link-new {
  906. display: none; }
  907.  
  908. /*.btn-unlink-new {
  909. margin-bottom: 43px;
  910. background-color: #c11717;
  911. border-radius: 50%;
  912. box-shadow: 0px 4px 7px black;
  913. width: 50px;
  914. height: 50px;
  915. text-align: center;
  916. }*/
  917. .btn-call-new {
  918. position: absolute;
  919. background-color: #ffffff;
  920. border-radius: 50%;
  921. box-shadow: 0px 0px 8px #bdbdbd;
  922. width: 50px;
  923. height: 50px;
  924. text-align: center;
  925. color: #37be9c;
  926. z-index: 10;
  927. top: -37px;
  928. right: 75px; }
  929.  
  930. .btn-call-new:hover {
  931. width: 60px;
  932. height: 60px; }
  933.  
  934. .btn-hangup-new {
  935. margin-right: 4px;
  936. margin-bottom: 42px;
  937. background-color: #c11717;
  938. border-radius: 50%;
  939. box-shadow: 0px 4px 7px black;
  940. width: 50px;
  941. height: 50px;
  942. text-align: center; }
  943.  
  944. .btn-minimize-new {
  945. background-color: #ffffff;
  946. border-radius: 50%;
  947. box-shadow: 0px 0px 8px #bdbdbd;
  948. width: 50px;
  949. height: 50px;
  950. text-align: center;
  951. color: #525252;
  952. cursor: pointer;
  953. position: absolute;
  954. bottom: 0;
  955. right: 10px;
  956. z-index: 9999; }
  957.  
  958. .fullscreen-new {
  959. margin-bottom: 39px;
  960. margin-right: 5px;
  961. background-color: #ffffff;
  962. border-radius: 50%;
  963. box-shadow: 0px 0px 8px #bdbdbd;
  964. width: 50px;
  965. height: 50px;
  966. text-align: center;
  967. color: #525252;
  968. cursor: pointer; }
  969.  
  970. .fullscreen-new2 {
  971. margin-bottom: -20px;
  972. width: 50px;
  973. height: 50px;
  974. text-align: center;
  975. cursor: pointer; }
  976.  
  977. .indicator-new {
  978. font-size: 31px;
  979. margin-right: 66px;
  980. font-size: 22px; }
  981.  
  982. .img360 {
  983. height: 120px;
  984. margin-top: -12px;
  985. display: block;
  986. margin: 0 auto;
  987. -webkit-filter: drop-shadow(0px 0px 5px #222);
  988. filter: drop-shadow(0px 0px 5px #222); }
  989.  
  990. .personname {
  991. color: black;
  992. font-size: 14px;
  993. font-weight: 600;
  994. position: absolute;
  995. left: 75px;
  996. top: 12px;
  997. display: flex;
  998. flex-direction: column; }
  999.  
  1000. .personname #header ~ * {
  1001. font-size: 10px;
  1002. font-weight: normal; }
  1003.  
  1004. .watermarkpos {
  1005. margin: 0 auto;
  1006. text-align: center;
  1007. text-shadow: 0 0 3px #000000; }
  1008.  
  1009. .viewPhotoShow {
  1010. display: none; }
  1011.  
  1012. @media screen and (max-width: 768px) {
  1013. .chat {
  1014. position: absolute;
  1015. bottom: 0px;
  1016. right: 0;
  1017. max-height: 42px;
  1018. transition: max-height 0.3s;
  1019. background: transparent;
  1020. color: white;
  1021. padding: 0;
  1022. width: 100%; }
  1023. .owner-avatar {
  1024. display: none; }
  1025. .photo-container {
  1026. margin-right: 8px !important; }
  1027. .poke {
  1028. right: 15px !important;
  1029. left: auto !important;
  1030. bottom: 100px !important;
  1031. width: 295px !important; }
  1032. .poke .content {
  1033. font-size: 14px; }
  1034. .maximize {
  1035. position: relative;
  1036. display: flex;
  1037. align-items: center;
  1038. font-size: 12px;
  1039. cursor: pointer;
  1040. position: absolute; }
  1041. .intro-wrapper .intro .title {
  1042. text-align: center;
  1043. font-size: 12px;
  1044. font-weight: 700;
  1045. padding: 6px 50px 20px 50px;
  1046. background-color: rgba(0, 0, 0, 0.25); }
  1047. .viewPhotoName {
  1048. left: 10px;
  1049. bottom: 0; }
  1050. .viewPhotoName .photoname-label {
  1051. max-width: 150px;
  1052. font-size: 14px;
  1053. max-width: 170px;
  1054. text-transform: uppercase; }
  1055. .viewPhotoShow {
  1056. display: block; }
  1057. .minimize {
  1058. left: auto !important;
  1059. right: 131px; } }
  1060.  
  1061. .InfoChatMessage {
  1062. position: absolute;
  1063. bottom: 79px;
  1064. right: -150px;
  1065. background: rgba(0, 0, 0, 0.74);
  1066. border: 5px solid white;
  1067. border-radius: 20px 20px 0px 20px; }
  1068.  
  1069. .InfoChatDesc {
  1070. padding: 15px 15px;
  1071. color: white;
  1072. font-size: 14px;
  1073. text-align: center; }
  1074.  
  1075. .InfoChatMessage {
  1076. -webkit-animation: 6s 1 zanikanie;
  1077. animation: 6s 1 zanikanie;
  1078. opacity: 0; }
  1079.  
  1080. @keyframes zanikanie {
  1081. 0% {
  1082. opacity: 1;
  1083. filter: alpha(opacity=100);
  1084. right: 70px; }
  1085. 70% {
  1086. opacity: 1;
  1087. filter: alpha(opacity=100);
  1088. right: 70px; }
  1089. 100% {
  1090. opacity: 0;
  1091. filter: alpha(opacity=0);
  1092. right: 70px; } }
  1093.  
  1094. @-webkit-keyframes zanikanie {
  1095. 0% {
  1096. opacity: 1;
  1097. filter: alpha(opacity=100);
  1098. right: 70px; }
  1099. 70% {
  1100. opacity: 1;
  1101. filter: alpha(opacity=100);
  1102. right: 70px; }
  1103. 100% {
  1104. opacity: 0;
  1105. filter: alpha(opacity=0);
  1106. right: 70px; } }
  1107.  
  1108. @media screen and (max-width: 480px) {
  1109. .personname {
  1110. font-size: 12px;
  1111. font-weight: 600; } }
  1112.  
  1113. @media screen and (max-width: 360px) {
  1114. .personname {
  1115. display: none; } }
  1116.  
  1117. /*# sourceMappingURL=style.css.map*/
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!