style.scss 911 B

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768
  1. @import './base';
  2. html,
  3. body {
  4. height: 100%;
  5. }
  6. .mod-start,
  7. .mod-main {
  8. position: relative;
  9. height: 100%;
  10. }
  11. .mod-start{
  12. display: flex;
  13. align-items: center;
  14. justify-content: center;
  15. }
  16. .mod-camera {
  17. height: 60%;
  18. #cameraVideo {
  19. display: block;
  20. width: 100%;
  21. height: 100%;
  22. object-fit: fill;
  23. }
  24. }
  25. .mod-game {
  26. height: 40%;
  27. canvas {
  28. display: block;
  29. width: 100%;
  30. height: 100%;
  31. }
  32. }
  33. .mod-record {
  34. position: absolute;
  35. left: 50%;
  36. bottom: 0;
  37. width: 60px;
  38. height: 60px;
  39. transform: translate(-50%, 0);
  40. font-size: 14px;
  41. line-height: 60px;
  42. border-radius: 50%;
  43. text-align: center;
  44. background-color: rgba($color: red, $alpha: 1.0);
  45. color: #fff;
  46. user-select: none;
  47. &:active{
  48. opacity: .8;
  49. }
  50. }
  51. .hide {
  52. display: none;
  53. }
  54. .show {
  55. display: block;
  56. }