style.css 1.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100
  1. html, body {
  2. background-color: #000;
  3. color: #eee;
  4. margin: 0px;
  5. padding: 0px;
  6. position: fixed;
  7. overflow: hidden;
  8. top: 0;
  9. bottom: 0;
  10. left: 0;
  11. right: 0;
  12. /* Prevent user selection. */
  13. user-select: none;
  14. touch-callout: none;
  15. -webkit-touch-callout: none;
  16. -webkit-user-select: none;
  17. }
  18. .dialog {
  19. display: none;
  20. align-items: center;
  21. justify-content: center;
  22. font-family: sans-serif;
  23. font-size: 170%;
  24. position: absolute;
  25. width: 100%;
  26. height: 100%;
  27. background: rgba(255, 255, 255, 0.2);
  28. -webkit-user-select: none;
  29. -moz-user-select: none;
  30. user-select: none;
  31. }
  32. .dialog.visible {
  33. display: flex;
  34. }
  35. .dialog .wrap {
  36. padding: 30px 60px;
  37. margin: 20px auto;
  38. width: 60%;
  39. background: rgba(0, 0, 0, 0.8);
  40. border-radius: 5px;
  41. }
  42. .dialog h1 {
  43. margin: 0;
  44. }
  45. a, a:visited {
  46. color: skyblue;
  47. }
  48. #watermark img {
  49. position: fixed;
  50. overflow: hidden;
  51. left: 0;
  52. bottom: 0;
  53. opacity: 0.3;
  54. width: 24px;
  55. height: 24px;
  56. padding: 12px;
  57. -webkit-user-select: none;
  58. -moz-user-select: none;
  59. user-select: none;
  60. }
  61. #watermark img:hover {
  62. opacity: 1;
  63. -webkit-filter: drop-shadow(white 0 0 5px);
  64. }
  65. canvas {
  66. cursor: -webkit-grab;
  67. }
  68. canvas:active {
  69. cursor: -webkit-grabbing;
  70. }
  71. #play-overlay {
  72. position: fixed;
  73. width: 100%;
  74. height: 100%;
  75. left: 0;
  76. top: 0;
  77. right: 0;
  78. bottom: 0;
  79. background-color: rgba(0, 0, 0, 0.5);
  80. display: none;
  81. align-items: center;
  82. justify-content: center;
  83. }
  84. #play-overlay.visible {
  85. display: flex;
  86. }
  87. #play-overlay img {
  88. width: 30%;
  89. height: 30%;
  90. }
  91. #error .message {
  92. font-family: monospace;
  93. }