qrcode-reader.css 1.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495
  1. #qrr-overlay {
  2. position: fixed;
  3. top: 0;
  4. left: 0;
  5. background: black;
  6. opacity: 0.6;
  7. width: 100%;
  8. height: 100%;
  9. display: none;
  10. z-index: 1000;
  11. }
  12. #qrr-container {
  13. font-family: sans-serif;
  14. position: fixed;
  15. top: 0;
  16. left: 0;
  17. right: 0;
  18. bottom: 0;
  19. background: white;
  20. width: 100%;
  21. height: 100%;
  22. margin: auto;
  23. display: none;
  24. z-index: 1001;
  25. }
  26. #qrr-container h1 {
  27. margin-top: 0;
  28. }
  29. #qrr-close {
  30. position: absolute;
  31. bottom: 20px;
  32. font-size: 1.5em;
  33. left: 50%;
  34. transform: translateX(-50%);
  35. cursor: pointer;
  36. color: black;
  37. width: 93%;
  38. padding: 10px 0;
  39. border:none;
  40. border-radius: 10px;
  41. }
  42. #qrr-loading-message {
  43. text-align: center;
  44. padding: 15px;
  45. width: 90%;
  46. margin: 30px auto 0;
  47. }
  48. #qrr-canvas {
  49. display: block;
  50. height: 100%;
  51. width: 100%;
  52. overflow-x: scroll;
  53. cursor: pointer;
  54. margin: auto;
  55. }
  56. #qrr-canvas.hidden {
  57. display: none;
  58. }
  59. #qrr-output {
  60. width: 95%;
  61. max-height: 15%;
  62. margin: 20px auto 10px;
  63. overflow-y: auto;
  64. text-align: center;
  65. }
  66. #qrr-ok {
  67. display: none;
  68. position: absolute;
  69. right: 10px;
  70. bottom: 10px;
  71. padding: 10px 50px;
  72. cursor: pointer;
  73. font-weight: bold;
  74. text-decoration: none;
  75. background-color: green;
  76. color: white;
  77. border-radius: 10px;
  78. }
  79. #qrr-output-data {
  80. display: none;
  81. }
  82. #qrr-nodata{
  83. width: 100%;
  84. background-color: none;
  85. }