IFractions.css 2.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123
  1. .ifr-canvas {
  2. width: 100%;
  3. }
  4. .ifr-input__container {
  5. position: absolute;
  6. margin-left: auto;
  7. margin-right: auto;
  8. left: 0;
  9. right: 0;
  10. text-align: center;
  11. visibility: hidden;
  12. }
  13. .ifr-input {
  14. background-color: #fff;
  15. padding: 15px 40px;
  16. box-sizing: border-box;
  17. border: 3px solid #ccc;
  18. font-size: 24px;
  19. font-family: Arial;
  20. color: #000;
  21. text-align: center;
  22. }
  23. .ifr-input:focus {
  24. outline: 3px solid #85accc;
  25. }
  26. .ifr-input__container {
  27. top: 220px;
  28. }
  29. .ifr-input {
  30. padding: 5px 4px;
  31. font-size: 8px;
  32. }
  33. @media only screen and (min-width: 576px) {
  34. .ifr-input__container {
  35. top: 220px;
  36. }
  37. .ifr-input {
  38. padding: 10px 36px;
  39. font-size: 16px;
  40. }
  41. }
  42. @media only screen and (min-width: 768px) {
  43. .ifr-input__container {
  44. top: 220px;
  45. }
  46. .ifr-input {
  47. padding: 10px 36px;
  48. font-size: 16px;
  49. }
  50. }
  51. @media only screen and (min-width: 992px) {
  52. .ifr-input__container {
  53. top: 280px;
  54. }
  55. .ifr-input {
  56. padding: 14px 40px;
  57. font-size: 18px;
  58. }
  59. }
  60. @media only screen and (min-width: 1200px) {
  61. .ifr-input__container {
  62. top: 330px;
  63. }
  64. .ifr-input {
  65. padding: 14px 40px;
  66. font-size: 24px;
  67. }
  68. }
  69. .ifr-modal {
  70. /* Hidden by default */
  71. display: none;
  72. /* Stay in place */
  73. position: fixed;
  74. /* Sit on top */
  75. z-index: 1;
  76. /* Location of the box */
  77. padding-top: 155px;
  78. left: 0;
  79. top: 0;
  80. /* Full width */
  81. width: 100%;
  82. /* Full height */
  83. height: 100%;
  84. /* Enable scroll if needed */
  85. overflow: auto;
  86. /* Fallback color */
  87. background-color: rgb(0, 0, 0);
  88. /* Black w/ opacity */
  89. background-color: rgba(0, 0, 0, 0.4);
  90. }
  91. .ifr-modal__content {
  92. background-color: #fefefe;
  93. margin: auto;
  94. padding: 20px;
  95. border: 1px solid #888;
  96. width: 50%;
  97. }
  98. .ifr-modal__content img {
  99. display: block;
  100. margin-left: auto;
  101. margin-right: auto;
  102. }
  103. .ifr-modal__closeButton {
  104. color: #aaaaaa;
  105. float: right;
  106. font-size: 28px;
  107. font-weight: bold;
  108. }
  109. .ifr-modal__closeButton:hover,
  110. .ifr-modal__closeButton:focus {
  111. color: #000;
  112. text-decoration: none;
  113. cursor: pointer;
  114. }
  115. .ifr-infoBox__menu__img {
  116. width: 60%;
  117. }