123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687 |
- html, body {
- width: 100%;
- height: 100%;
- padding: 0;
- margin: 0;
- background-color: white;
- }
- body {
- background: url("LogoV3.png");
- background-position: center center;
- background-repeat: no-repeat;
- }
- .container {
- width: calc(100% - 50px);
- display: flex;
- flex-wrap: wrap;
- justify-content: center;
- align-items: center;
- background: rgba(255, 255, 255, 0.6);
- margin: auto;
- margin-top: 10px;
- margin-bottom: 10px;
- outline: 2px solid black;
- max-width: 1000px;
- }
- .containerTitle {
- width:100%;
- order: 1;
- display: flex;
- background-color: rgba(0, 0, 0, 0.8);
- height: 50px;
- }
- .title {
- font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
- font-size: 40px;
- color: white;
- text-align: center;
- margin-left: 20px;
- order: 1;
- }
- .result {
- color:green;
- font-size: 30px;
- order: 2;
- text-align: center;
- margin-top: 5px;
- margin-left: 20px;
- }
- .result.failed {
- color:red;
- }
- .waitRing {
- order: 3;
- height: 40px;
- margin-top: 5px;
- margin-bottom: 5px;
- }
- .waitRing.hidden {
- display: none;
- }
- .renderCanvas {
- position:absolute;
- transform: translateX(-600px);
- width: 600px;
- height: 400px;
- }
- .renderImage {
- order: 1;
- flex-basis: 50%;
- width: 50%;
- }
- .resultImage {
- width: 50%;
- flex-basis: 50%;
- order: 2;
- }
|