A fork of Glitch Social, a fork of Mastodon.
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.

701 lines
11KB

  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. height: 110px;
  72. @include fullwidth-gallery;
  73. }
  74. .media-gallery__item {
  75. border: none;
  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. .extended-video-player {
  165. width: 100%;
  166. height: 100%;
  167. display: flex;
  168. align-items: center;
  169. justify-content: center;
  170. video {
  171. max-width: $media-modal-media-max-width;
  172. max-height: $media-modal-media-max-height;
  173. }
  174. }
  175. }
  176. .media-modal__closer {
  177. position: absolute;
  178. top: 0;
  179. left: 0;
  180. right: 0;
  181. bottom: 0;
  182. }
  183. .media-modal__navigation {
  184. position: absolute;
  185. top: 0;
  186. left: 0;
  187. right: 0;
  188. bottom: 0;
  189. pointer-events: none;
  190. transition: opacity 0.3s linear;
  191. will-change: opacity;
  192. * {
  193. pointer-events: auto;
  194. }
  195. &.media-modal__navigation--hidden {
  196. opacity: 0;
  197. * {
  198. pointer-events: none;
  199. }
  200. }
  201. }
  202. .media-modal__nav {
  203. background: rgba($base-overlay-background, 0.5);
  204. box-sizing: border-box;
  205. border: 0;
  206. color: $primary-text-color;
  207. cursor: pointer;
  208. display: flex;
  209. align-items: center;
  210. font-size: 24px;
  211. height: 20vmax;
  212. margin: auto 0;
  213. padding: 30px 15px;
  214. position: absolute;
  215. top: 0;
  216. bottom: 0;
  217. }
  218. .media-modal__nav--left {
  219. left: 0;
  220. }
  221. .media-modal__nav--right {
  222. right: 0;
  223. }
  224. .media-modal__pagination {
  225. width: 100%;
  226. text-align: center;
  227. position: absolute;
  228. left: 0;
  229. bottom: 20px;
  230. pointer-events: none;
  231. }
  232. .media-modal__meta {
  233. text-align: center;
  234. position: absolute;
  235. left: 0;
  236. bottom: 20px;
  237. width: 100%;
  238. pointer-events: none;
  239. &--shifted {
  240. bottom: 62px;
  241. }
  242. a {
  243. pointer-events: auto;
  244. text-decoration: none;
  245. font-weight: 500;
  246. color: $ui-secondary-color;
  247. &:hover,
  248. &:focus,
  249. &:active {
  250. text-decoration: underline;
  251. }
  252. }
  253. }
  254. .media-modal__page-dot {
  255. display: inline-block;
  256. }
  257. .media-modal__button {
  258. background-color: $white;
  259. height: 12px;
  260. width: 12px;
  261. border-radius: 6px;
  262. margin: 10px;
  263. padding: 0;
  264. border: 0;
  265. font-size: 0;
  266. }
  267. .media-modal__button--active {
  268. background-color: $ui-highlight-color;
  269. }
  270. .media-modal__close {
  271. position: absolute;
  272. right: 8px;
  273. top: 8px;
  274. z-index: 100;
  275. }
  276. .detailed,
  277. .fullscreen {
  278. .video-player__volume__current,
  279. .video-player__volume::before {
  280. bottom: 27px;
  281. }
  282. .video-player__volume__handle {
  283. bottom: 23px;
  284. }
  285. }
  286. .audio-player {
  287. box-sizing: border-box;
  288. position: relative;
  289. background: darken($ui-base-color, 8%);
  290. border-radius: 4px;
  291. padding-bottom: 44px;
  292. direction: ltr;
  293. &.editable {
  294. border-radius: 0;
  295. height: 100%;
  296. }
  297. &__waveform {
  298. padding: 15px 0;
  299. position: relative;
  300. overflow: hidden;
  301. &::before {
  302. content: "";
  303. display: block;
  304. position: absolute;
  305. border-top: 1px solid lighten($ui-base-color, 4%);
  306. width: 100%;
  307. height: 0;
  308. left: 0;
  309. top: calc(50% + 1px);
  310. }
  311. }
  312. &__progress-placeholder {
  313. background-color: rgba(lighten($ui-highlight-color, 8%), 0.5);
  314. }
  315. &__wave-placeholder {
  316. background-color: lighten($ui-base-color, 16%);
  317. }
  318. .video-player__controls {
  319. padding: 0 15px;
  320. padding-top: 10px;
  321. background: darken($ui-base-color, 8%);
  322. border-top: 1px solid lighten($ui-base-color, 4%);
  323. border-radius: 0 0 4px 4px;
  324. }
  325. }
  326. .video-player {
  327. overflow: hidden;
  328. position: relative;
  329. background: $base-shadow-color;
  330. max-width: 100%;
  331. border-radius: 4px;
  332. box-sizing: border-box;
  333. direction: ltr;
  334. &.editable {
  335. border-radius: 0;
  336. height: 100% !important;
  337. }
  338. &:focus {
  339. outline: 0;
  340. }
  341. .detailed-status & {
  342. width: 100%;
  343. height: 100%;
  344. }
  345. @include fullwidth-gallery;
  346. video {
  347. max-width: 100vw;
  348. max-height: 80vh;
  349. z-index: 1;
  350. position: relative;
  351. }
  352. &.fullscreen {
  353. width: 100% !important;
  354. height: 100% !important;
  355. margin: 0;
  356. video {
  357. max-width: 100% !important;
  358. max-height: 100% !important;
  359. width: 100% !important;
  360. height: 100% !important;
  361. outline: 0;
  362. }
  363. }
  364. &.inline {
  365. video {
  366. object-fit: contain;
  367. position: relative;
  368. top: 50%;
  369. transform: translateY(-50%);
  370. }
  371. }
  372. &__controls {
  373. position: absolute;
  374. z-index: 2;
  375. bottom: 0;
  376. left: 0;
  377. right: 0;
  378. box-sizing: border-box;
  379. background: linear-gradient(0deg, rgba($base-shadow-color, 0.85) 0, rgba($base-shadow-color, 0.45) 60%, transparent);
  380. padding: 0 15px;
  381. opacity: 0;
  382. transition: opacity .1s ease;
  383. &.active {
  384. opacity: 1;
  385. }
  386. }
  387. &.inactive {
  388. video,
  389. .video-player__controls {
  390. visibility: hidden;
  391. }
  392. }
  393. &__spoiler {
  394. display: none;
  395. position: absolute;
  396. top: 0;
  397. left: 0;
  398. width: 100%;
  399. height: 100%;
  400. z-index: 4;
  401. border: 0;
  402. background: $base-shadow-color;
  403. color: $darker-text-color;
  404. transition: none;
  405. pointer-events: none;
  406. &.active {
  407. display: block;
  408. pointer-events: auto;
  409. &:hover,
  410. &:active,
  411. &:focus {
  412. color: lighten($darker-text-color, 7%);
  413. }
  414. }
  415. &__title {
  416. display: block;
  417. font-size: 14px;
  418. }
  419. &__subtitle {
  420. display: block;
  421. font-size: 11px;
  422. font-weight: 500;
  423. }
  424. }
  425. &__buttons-bar {
  426. display: flex;
  427. justify-content: space-between;
  428. padding-bottom: 10px;
  429. .video-player__download__icon {
  430. color: inherit;
  431. .fa,
  432. &:active .fa,
  433. &:hover .fa,
  434. &:focus .fa {
  435. color: inherit;
  436. }
  437. }
  438. }
  439. &__buttons {
  440. font-size: 16px;
  441. white-space: nowrap;
  442. overflow: hidden;
  443. text-overflow: ellipsis;
  444. &.left {
  445. button {
  446. padding-left: 0;
  447. }
  448. }
  449. &.right {
  450. button {
  451. padding-right: 0;
  452. }
  453. }
  454. button {
  455. background: transparent;
  456. padding: 2px 10px;
  457. font-size: 16px;
  458. border: 0;
  459. color: rgba($white, 0.75);
  460. &:active,
  461. &:hover,
  462. &:focus {
  463. color: $white;
  464. }
  465. }
  466. }
  467. &__time-sep,
  468. &__time-total,
  469. &__time-current {
  470. font-size: 14px;
  471. font-weight: 500;
  472. }
  473. &__time-current {
  474. color: $white;
  475. margin-left: 60px;
  476. }
  477. &__time-sep {
  478. display: inline-block;
  479. margin: 0 6px;
  480. }
  481. &__time-sep,
  482. &__time-total {
  483. color: $white;
  484. }
  485. &__volume {
  486. cursor: pointer;
  487. height: 24px;
  488. display: inline;
  489. &::before {
  490. content: "";
  491. width: 50px;
  492. background: rgba($white, 0.35);
  493. border-radius: 4px;
  494. display: block;
  495. position: absolute;
  496. height: 4px;
  497. left: 70px;
  498. bottom: 20px;
  499. }
  500. &__current {
  501. display: block;
  502. position: absolute;
  503. height: 4px;
  504. border-radius: 4px;
  505. left: 70px;
  506. bottom: 20px;
  507. background: lighten($ui-highlight-color, 8%);
  508. }
  509. &__handle {
  510. position: absolute;
  511. z-index: 3;
  512. border-radius: 50%;
  513. width: 12px;
  514. height: 12px;
  515. bottom: 16px;
  516. left: 70px;
  517. transition: opacity .1s ease;
  518. background: lighten($ui-highlight-color, 8%);
  519. box-shadow: 1px 2px 6px rgba($base-shadow-color, 0.2);
  520. pointer-events: none;
  521. }
  522. }
  523. &__link {
  524. padding: 2px 10px;
  525. a {
  526. text-decoration: none;
  527. font-size: 14px;
  528. font-weight: 500;
  529. color: $white;
  530. &:hover,
  531. &:active,
  532. &:focus {
  533. text-decoration: underline;
  534. }
  535. }
  536. }
  537. &__seek {
  538. cursor: pointer;
  539. height: 24px;
  540. position: relative;
  541. &::before {
  542. content: "";
  543. width: 100%;
  544. background: rgba($white, 0.35);
  545. border-radius: 4px;
  546. display: block;
  547. position: absolute;
  548. height: 4px;
  549. top: 10px;
  550. }
  551. &__progress,
  552. &__buffer {
  553. display: block;
  554. position: absolute;
  555. height: 4px;
  556. border-radius: 4px;
  557. top: 10px;
  558. background: lighten($ui-highlight-color, 8%);
  559. }
  560. &__buffer {
  561. background: rgba($white, 0.2);
  562. }
  563. &__handle {
  564. position: absolute;
  565. z-index: 3;
  566. opacity: 0;
  567. border-radius: 50%;
  568. width: 12px;
  569. height: 12px;
  570. top: 6px;
  571. margin-left: -6px;
  572. transition: opacity .1s ease;
  573. background: lighten($ui-highlight-color, 8%);
  574. box-shadow: 1px 2px 6px rgba($base-shadow-color, 0.2);
  575. pointer-events: none;
  576. &.active {
  577. opacity: 1;
  578. }
  579. }
  580. &:hover {
  581. .video-player__seek__handle {
  582. opacity: 1;
  583. }
  584. }
  585. }
  586. &.detailed,
  587. &.fullscreen {
  588. .video-player__buttons {
  589. button {
  590. padding-top: 10px;
  591. padding-bottom: 10px;
  592. }
  593. }
  594. }
  595. }
  596. .gifv {
  597. video {
  598. max-width: 100vw;
  599. max-height: 80vh;
  600. }
  601. }