index.css 1.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687
  1. html, body {
  2. width: 100%;
  3. height: 100%;
  4. padding: 0;
  5. margin: 0;
  6. background-color: white;
  7. }
  8. body {
  9. background: url("LogoV3.png");
  10. background-position: center center;
  11. background-repeat: no-repeat;
  12. }
  13. .container {
  14. width: calc(100% - 50px);
  15. display: flex;
  16. flex-wrap: wrap;
  17. justify-content: center;
  18. align-items: center;
  19. background: rgba(255, 255, 255, 0.6);
  20. margin: auto;
  21. margin-top: 10px;
  22. margin-bottom: 10px;
  23. outline: 2px solid black;
  24. max-width: 1000px;
  25. }
  26. .containerTitle {
  27. width:100%;
  28. order: 1;
  29. display: flex;
  30. background-color: rgba(0, 0, 0, 0.8);
  31. height: 50px;
  32. }
  33. .title {
  34. font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  35. font-size: 40px;
  36. color: white;
  37. text-align: center;
  38. margin-left: 20px;
  39. order: 1;
  40. }
  41. .result {
  42. color:green;
  43. font-size: 30px;
  44. order: 2;
  45. text-align: center;
  46. margin-top: 5px;
  47. margin-left: 20px;
  48. }
  49. .result.failed {
  50. color:red;
  51. }
  52. .waitRing {
  53. order: 3;
  54. height: 40px;
  55. margin-top: 5px;
  56. margin-bottom: 5px;
  57. }
  58. .waitRing.hidden {
  59. display: none;
  60. }
  61. .renderCanvas {
  62. position:absolute;
  63. transform: translateX(-600px);
  64. width: 600px;
  65. height: 400px;
  66. }
  67. .renderImage {
  68. order: 1;
  69. flex-basis: 50%;
  70. width: 50%;
  71. }
  72. .resultImage {
  73. width: 50%;
  74. flex-basis: 50%;
  75. order: 2;
  76. }