You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

796 lines
13 KiB

  1. .video-error-cover {
  2. align-items: center;
  3. background: $base-overlay-background;
  4. color: $primary-text-color;
  5. cursor: pointer;
  6. display: flex;
  7. flex-direction: column;
  8. height: 100%;
  9. justify-content: center;
  10. margin-top: 8px;
  11. position: relative;
  12. text-align: center;
  13. z-index: 100;
  14. }
  15. .media-spoiler {
  16. background: $base-overlay-background;
  17. color: $darker-text-color;
  18. border: 0;
  19. width: 100%;
  20. height: 100%;
  21. &:hover,
  22. &:active,
  23. &:focus {
  24. color: lighten($darker-text-color, 8%);
  25. }
  26. .status__content > & {
  27. margin-top: 15px; // Add margin when used bare for NSFW video player
  28. }
  29. @include fullwidth-gallery;
  30. }
  31. .media-spoiler__warning {
  32. display: block;
  33. font-size: 14px;
  34. }
  35. .media-spoiler__trigger {
  36. display: block;
  37. font-size: 11px;
  38. font-weight: 500;
  39. }
  40. .media-gallery__gifv__label {
  41. display: block;
  42. position: absolute;
  43. color: $primary-text-color;
  44. background: rgba($base-overlay-background, 0.5);
  45. bottom: 6px;
  46. left: 6px;
  47. padding: 2px 6px;
  48. border-radius: 2px;
  49. font-size: 11px;
  50. font-weight: 600;
  51. z-index: 1;
  52. pointer-events: none;
  53. opacity: 0.9;
  54. transition: opacity 0.1s ease;
  55. line-height: 18px;
  56. }
  57. .media-gallery__gifv {
  58. &:hover {
  59. .media-gallery__gifv__label {
  60. opacity: 1;
  61. }
  62. }
  63. }
  64. .media-gallery {
  65. box-sizing: border-box;
  66. margin-top: 8px;
  67. overflow: hidden;
  68. border-radius: 4px;
  69. position: relative;
  70. width: 100%;
  71. min-height: 64px;
  72. @include fullwidth-gallery;
  73. }
  74. .media-gallery__item {
  75. border: 0;
  76. box-sizing: border-box;
  77. display: block;
  78. float: left;
  79. position: relative;
  80. border-radius: 4px;
  81. overflow: hidden;
  82. .full-width & {
  83. border-radius: 0;
  84. }
  85. &.standalone {
  86. .media-gallery__item-gifv-thumbnail {
  87. transform: none;
  88. top: 0;
  89. }
  90. }
  91. &.letterbox {
  92. background: $base-shadow-color;
  93. }
  94. }
  95. .media-gallery__item-thumbnail {
  96. cursor: zoom-in;
  97. display: block;
  98. text-decoration: none;
  99. color: $secondary-text-color;
  100. position: relative;
  101. z-index: 1;
  102. &,
  103. img {
  104. height: 100%;
  105. width: 100%;
  106. object-fit: contain;
  107. &:not(.letterbox) {
  108. height: 100%;
  109. object-fit: cover;
  110. }
  111. }
  112. }
  113. .media-gallery__preview {
  114. width: 100%;
  115. height: 100%;
  116. object-fit: cover;
  117. position: absolute;
  118. top: 0;
  119. left: 0;
  120. z-index: 0;
  121. background: $base-overlay-background;
  122. &--hidden {
  123. display: none;
  124. }
  125. }
  126. .media-gallery__gifv {
  127. height: 100%;
  128. overflow: hidden;
  129. position: relative;
  130. width: 100%;
  131. display: flex;
  132. justify-content: center;
  133. }
  134. .media-gallery__item-gifv-thumbnail {
  135. cursor: zoom-in;
  136. height: 100%;
  137. width: 100%;
  138. position: relative;
  139. z-index: 1;
  140. object-fit: contain;
  141. user-select: none;
  142. &:not(.letterbox) {
  143. height: 100%;
  144. object-fit: cover;
  145. }
  146. }
  147. .media-gallery__item-thumbnail-label {
  148. clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
  149. clip: rect(1px, 1px, 1px, 1px);
  150. overflow: hidden;
  151. position: absolute;
  152. }
  153. .video-modal__container {
  154. max-width: 100vw;
  155. max-height: 100vh;
  156. }
  157. .audio-modal__container {
  158. width: 50vw;
  159. }
  160. .media-modal {
  161. width: 100%;
  162. height: 100%;
  163. position: relative;
  164. &__close,
  165. &__zoom-button {
  166. color: rgba($white, 0.7);
  167. &:hover,
  168. &:focus,
  169. &:active {
  170. color: $white;
  171. background-color: rgba($white, 0.15);
  172. }
  173. &:focus {
  174. background-color: rgba($white, 0.3);
  175. }
  176. }
  177. }
  178. .media-modal__closer {
  179. position: absolute;
  180. top: 0;
  181. left: 0;
  182. right: 0;
  183. bottom: 0;
  184. }
  185. .media-modal__navigation {
  186. position: absolute;
  187. top: 0;
  188. left: 0;
  189. right: 0;
  190. bottom: 0;
  191. pointer-events: none;
  192. transition: opacity 0.3s linear;
  193. will-change: opacity;
  194. * {
  195. pointer-events: auto;
  196. }
  197. &.media-modal__navigation--hidden {
  198. opacity: 0;
  199. * {
  200. pointer-events: none;
  201. }
  202. }
  203. }
  204. .media-modal__nav {
  205. background: transparent;
  206. box-sizing: border-box;
  207. border: 0;
  208. color: rgba($primary-text-color, 0.7);
  209. cursor: pointer;
  210. display: flex;
  211. align-items: center;
  212. font-size: 24px;
  213. height: 20vmax;
  214. margin: auto 0;
  215. padding: 30px 15px;
  216. position: absolute;
  217. top: 0;
  218. bottom: 0;
  219. &:hover,
  220. &:focus,
  221. &:active {
  222. color: $primary-text-color;
  223. }
  224. }
  225. .media-modal__nav--left {
  226. left: 0;
  227. }
  228. .media-modal__nav--right {
  229. right: 0;
  230. }
  231. .media-modal__overlay {
  232. max-width: 600px;
  233. position: absolute;
  234. left: 0;
  235. right: 0;
  236. bottom: 0;
  237. margin: 0 auto;
  238. .picture-in-picture__footer {
  239. border-radius: 0;
  240. background: transparent;
  241. padding: 20px 0;
  242. .icon-button {
  243. color: $white;
  244. &:hover,
  245. &:focus,
  246. &:active {
  247. color: $white;
  248. background-color: rgba($white, 0.15);
  249. }
  250. &:focus {
  251. background-color: rgba($white, 0.3);
  252. }
  253. &.active {
  254. color: $highlight-text-color;
  255. &:hover,
  256. &:focus,
  257. &:active {
  258. background: rgba($highlight-text-color, 0.15);
  259. }
  260. &:focus {
  261. background: rgba($highlight-text-color, 0.3);
  262. }
  263. }
  264. &.star-icon.active {
  265. color: $gold-star;
  266. &:hover,
  267. &:focus,
  268. &:active {
  269. background: rgba($gold-star, 0.15);
  270. }
  271. &:focus {
  272. background: rgba($gold-star, 0.3);
  273. }
  274. }
  275. &.disabled {
  276. color: $white;
  277. background-color: transparent;
  278. cursor: default;
  279. opacity: 0.4;
  280. }
  281. }
  282. }
  283. }
  284. .media-modal__pagination {
  285. display: flex;
  286. justify-content: center;
  287. margin-bottom: 20px;
  288. }
  289. .media-modal__page-dot {
  290. flex: 0 0 auto;
  291. background-color: $white;
  292. opacity: 0.4;
  293. height: 6px;
  294. width: 6px;
  295. border-radius: 50%;
  296. margin: 0 4px;
  297. padding: 0;
  298. border: 0;
  299. font-size: 0;
  300. transition: opacity .2s ease-in-out;
  301. &.active {
  302. opacity: 1;
  303. }
  304. }
  305. .media-modal__close {
  306. position: absolute;
  307. right: 8px;
  308. top: 8px;
  309. z-index: 100;
  310. }
  311. .detailed,
  312. .fullscreen {
  313. .video-player__volume__current,
  314. .video-player__volume::before {
  315. bottom: 27px;
  316. }
  317. .video-player__volume__handle {
  318. bottom: 23px;
  319. }
  320. }
  321. .audio-player {
  322. overflow: hidden;
  323. box-sizing: border-box;
  324. position: relative;
  325. background: darken($ui-base-color, 8%);
  326. border-radius: 4px;
  327. padding-bottom: 44px;
  328. direction: ltr;
  329. &.editable {
  330. border-radius: 0;
  331. height: 100%;
  332. }
  333. .video-player__volume::before,
  334. .video-player__seek::before {
  335. background: currentColor;
  336. opacity: 0.15;
  337. }
  338. .video-player__seek__buffer {
  339. background: currentColor;
  340. opacity: 0.2;
  341. }
  342. .video-player__buttons button {
  343. color: currentColor;
  344. opacity: 0.75;
  345. &:active,
  346. &:hover,
  347. &:focus {
  348. color: currentColor;
  349. opacity: 1;
  350. }
  351. }
  352. .video-player__time-sep,
  353. .video-player__time-total,
  354. .video-player__time-current {
  355. color: currentColor;
  356. }
  357. .video-player__seek::before,
  358. .video-player__seek__buffer,
  359. .video-player__seek__progress {
  360. top: 0;
  361. }
  362. .video-player__seek__handle {
  363. top: -4px;
  364. }
  365. .video-player__controls {
  366. padding-top: 10px;
  367. background: transparent;
  368. }
  369. }
  370. .video-player {
  371. overflow: hidden;
  372. position: relative;
  373. background: $base-shadow-color;
  374. max-width: 100%;
  375. border-radius: 4px;
  376. box-sizing: border-box;
  377. direction: ltr;
  378. color: $white;
  379. &.editable {
  380. border-radius: 0;
  381. height: 100% !important;
  382. }
  383. &:focus {
  384. outline: 0;
  385. }
  386. .detailed-status & {
  387. width: 100%;
  388. height: 100%;
  389. }
  390. @include fullwidth-gallery;
  391. video {
  392. display: block;
  393. max-width: 100vw;
  394. max-height: 80vh;
  395. z-index: 1;
  396. position: relative;
  397. }
  398. &.fullscreen {
  399. width: 100% !important;
  400. height: 100% !important;
  401. margin: 0;
  402. video {
  403. max-width: 100% !important;
  404. max-height: 100% !important;
  405. width: 100% !important;
  406. height: 100% !important;
  407. outline: 0;
  408. }
  409. }
  410. &.inline {
  411. video {
  412. object-fit: contain;
  413. position: relative;
  414. top: 50%;
  415. transform: translateY(-50%);
  416. }
  417. }
  418. &__controls {
  419. position: absolute;
  420. z-index: 2;
  421. bottom: 0;
  422. left: 0;
  423. right: 0;
  424. box-sizing: border-box;
  425. background: linear-gradient(0deg, rgba($base-shadow-color, 0.85) 0, rgba($base-shadow-color, 0.45) 60%, transparent);
  426. padding: 0 15px;
  427. opacity: 0;
  428. transition: opacity .1s ease;
  429. &.active {
  430. opacity: 1;
  431. }
  432. }
  433. &.inactive {
  434. video,
  435. .video-player__controls {
  436. visibility: hidden;
  437. }
  438. }
  439. &__spoiler {
  440. display: none;
  441. position: absolute;
  442. top: 0;
  443. left: 0;
  444. width: 100%;
  445. height: 100%;
  446. z-index: 4;
  447. border: 0;
  448. background: $base-shadow-color;
  449. color: $darker-text-color;
  450. transition: none;
  451. pointer-events: none;
  452. &.active {
  453. display: block;
  454. pointer-events: auto;
  455. &:hover,
  456. &:active,
  457. &:focus {
  458. color: lighten($darker-text-color, 7%);
  459. }
  460. }
  461. &__title {
  462. display: block;
  463. font-size: 14px;
  464. }
  465. &__subtitle {
  466. display: block;
  467. font-size: 11px;
  468. font-weight: 500;
  469. }
  470. }
  471. &__buttons-bar {
  472. display: flex;
  473. justify-content: space-between;
  474. padding-bottom: 8px;
  475. margin: 0 -5px;
  476. .video-player__download__icon {
  477. color: inherit;
  478. .fa,
  479. &:active .fa,
  480. &:hover .fa,
  481. &:focus .fa {
  482. color: inherit;
  483. }
  484. }
  485. }
  486. &__buttons {
  487. display: flex;
  488. flex: 0 1 auto;
  489. min-width: 30px;
  490. align-items: center;
  491. font-size: 16px;
  492. white-space: nowrap;
  493. overflow: hidden;
  494. text-overflow: ellipsis;
  495. .player-button {
  496. display: inline-block;
  497. outline: 0;
  498. flex: 0 0 auto;
  499. background: transparent;
  500. padding: 5px;
  501. font-size: 16px;
  502. border: 0;
  503. color: rgba($white, 0.75);
  504. &:active,
  505. &:hover,
  506. &:focus {
  507. color: $white;
  508. }
  509. }
  510. }
  511. &__time {
  512. display: inline;
  513. flex: 0 1 auto;
  514. overflow: hidden;
  515. text-overflow: ellipsis;
  516. margin: 0 5px;
  517. }
  518. &__time-sep,
  519. &__time-total,
  520. &__time-current {
  521. font-size: 14px;
  522. font-weight: 500;
  523. }
  524. &__time-current {
  525. color: $white;
  526. }
  527. &__time-sep {
  528. display: inline-block;
  529. margin: 0 6px;
  530. }
  531. &__time-sep,
  532. &__time-total {
  533. color: $white;
  534. }
  535. &__volume {
  536. flex: 0 0 auto;
  537. display: inline-flex;
  538. cursor: pointer;
  539. height: 24px;
  540. position: relative;
  541. overflow: hidden;
  542. .no-reduce-motion & {
  543. transition: all 100ms linear;
  544. }
  545. &.active {
  546. overflow: visible;
  547. width: 50px;
  548. margin-right: 16px;
  549. }
  550. &::before {
  551. content: "";
  552. width: 50px;
  553. background: rgba($white, 0.35);
  554. border-radius: 4px;
  555. display: block;
  556. position: absolute;
  557. height: 4px;
  558. left: 0;
  559. top: 50%;
  560. transform: translate(0, -50%);
  561. }
  562. &__current {
  563. display: block;
  564. position: absolute;
  565. height: 4px;
  566. border-radius: 4px;
  567. left: 0;
  568. top: 50%;
  569. transform: translate(0, -50%);
  570. background: lighten($ui-highlight-color, 8%);
  571. }
  572. &__handle {
  573. position: absolute;
  574. z-index: 3;
  575. border-radius: 50%;
  576. width: 12px;
  577. height: 12px;
  578. top: 50%;
  579. left: 0;
  580. margin-left: -6px;
  581. transform: translate(0, -50%);
  582. background: lighten($ui-highlight-color, 8%);
  583. box-shadow: 1px 2px 6px rgba($base-shadow-color, 0.2);
  584. opacity: 0;
  585. .no-reduce-motion & {
  586. transition: opacity 100ms linear;
  587. }
  588. }
  589. &.active &__handle {
  590. opacity: 1;
  591. }
  592. }
  593. &__link {
  594. padding: 2px 10px;
  595. a {
  596. text-decoration: none;
  597. font-size: 14px;
  598. font-weight: 500;
  599. color: $white;
  600. &:hover,
  601. &:active,
  602. &:focus {
  603. text-decoration: underline;
  604. }
  605. }
  606. }
  607. &__seek {
  608. cursor: pointer;
  609. height: 24px;
  610. position: relative;
  611. &::before {
  612. content: "";
  613. width: 100%;
  614. background: rgba($white, 0.35);
  615. border-radius: 4px;
  616. display: block;
  617. position: absolute;
  618. height: 4px;
  619. top: 14px;
  620. }
  621. &__progress,
  622. &__buffer {
  623. display: block;
  624. position: absolute;
  625. height: 4px;
  626. border-radius: 4px;
  627. top: 14px;
  628. background: lighten($ui-highlight-color, 8%);
  629. }
  630. &__buffer {
  631. background: rgba($white, 0.2);
  632. }
  633. &__handle {
  634. position: absolute;
  635. z-index: 3;
  636. opacity: 0;
  637. border-radius: 50%;
  638. width: 12px;
  639. height: 12px;
  640. top: 10px;
  641. margin-left: -6px;
  642. background: lighten($ui-highlight-color, 8%);
  643. box-shadow: 1px 2px 6px rgba($base-shadow-color, 0.2);
  644. .no-reduce-motion & {
  645. transition: opacity .1s ease;
  646. }
  647. &.active {
  648. opacity: 1;
  649. }
  650. }
  651. &:hover {
  652. .video-player__seek__handle {
  653. opacity: 1;
  654. }
  655. }
  656. }
  657. &.detailed,
  658. &.fullscreen {
  659. .video-player__buttons {
  660. .player-button {
  661. padding-top: 10px;
  662. padding-bottom: 10px;
  663. }
  664. }
  665. }
  666. }
  667. .gifv {
  668. video {
  669. max-width: 100vw;
  670. max-height: 80vh;
  671. }
  672. }
  673. /* Tuan's edit */
  674. .video-player__buttons-bar button {
  675. background: none !important;
  676. border: none !important;
  677. color: rgba(255,255,255,0.5) !important;
  678. }