|
40 | 40 | }
|
41 | 41 |
|
42 | 42 | #thanks-container {
|
43 |
| - display: flex; |
44 |
| - justify-content: center; |
45 |
| - align-items: center; |
46 |
| - flex-direction: column; |
47 | 43 | background: var(--background);
|
48 | 44 | width: var(--size);
|
49 | 45 | height: var(--size);
|
50 | 46 | border-radius: 3px;
|
| 47 | + } |
| 48 | + |
| 49 | + #thanks-content { |
51 | 50 | animation: thanks 800ms var(--ease);
|
52 | 51 | }
|
53 | 52 |
|
|
65 | 64 | color: var(--color);
|
66 | 65 | opacity: .6;
|
67 | 66 | }
|
| 67 | + |
| 68 | + .center { |
| 69 | + display: flex; |
| 70 | + justify-content: center; |
| 71 | + align-items: center; |
| 72 | + flex-direction: column; |
| 73 | + } |
68 | 74 | </style>
|
69 | 75 | </head>
|
70 | 76 | <body>
|
71 | 77 | <div id="container">
|
72 |
| - <div id="thanks-container"> |
73 |
| - <svg width="60px" height="60px" viewBox="0 0 60 60" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> |
74 |
| - <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> |
75 |
| - <g id="Artboard" transform="translate(-325.000000, -310.000000)"> |
76 |
| - <g id="cat" transform="translate(325.000000, 310.000000)"> |
77 |
| - <g id="Duotone" transform="translate(1.000000, 1.000000)"> |
78 |
| - <polygon id="Shape" fill="#FFFFFF" fill-rule="nonzero" points="52.75 34 29.75 21.25 29.75 21.25 35.25 19 35.25 0.25 27.75 5.25 17.75 5.25 10.25 0.25 10.25 19 15.25 21 15.25 57.75 52.75 57.75 57.75 49"></polygon> |
79 |
| - <path d="M22.75,24 L15.25,21 L15.25,26 L22.75,29 L35,24 L29.75,21 L22.75,24 Z" id="Shape" fill="#E5DBFF" fill-rule="nonzero"></path> |
80 |
| - <path d="M15.25,52.75 L15.25,57.75 L52.75,57.75 L57.75,49 L52.75,49 L50.25,52.75 L15.25,52.75 Z" id="Shape" fill="#E5DBFF" fill-rule="nonzero"></path> |
81 |
| - <path d="M17.75,10.25 L17.75,12.75" id="Shape" stroke="#7048E8" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path> |
82 |
| - <path d="M27.75,10.25 L27.75,12.75" id="Shape" stroke="#7048E8" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path> |
83 |
| - <polyline id="Shape" stroke="#7048E8" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" points="15.25 57.75 6.5 57.75 0.25 51.5 6.5 42.75 1.5 37.75 5.25 32.75"></polyline> |
84 |
| - <polygon id="Shape" stroke="#7048E8" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" points="27.75 5.25 17.75 5.25 10.25 0.25 10.25 19 22.75 24 35.25 19 35.25 0.25"></polygon> |
85 |
| - <polyline id="Shape" stroke="#7048E8" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" points="15.25 21 15.25 57.75 52.75 57.75 57.75 49 52.75 34 29.75 21.25"></polyline> |
86 |
| - <path d="M30.25,57.75 L30.25,35.25" id="Shape" stroke="#7048E8" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path> |
87 |
| - <path d="M22.75,57.75 L22.75,35.25" id="Shape" stroke="#7048E8" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path> |
88 |
| - <polyline id="Shape" stroke="#7048E8" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" points="45.25 42.75 39 42.75 30.25 52.75"></polyline> |
89 |
| - </g> |
90 |
| - <g id="Frames-24px"> |
91 |
| - <rect id="Rectangle-path" x="0" y="0" width="60" height="60"></rect> |
92 |
| - </g> |
93 |
| - </g> |
94 |
| - </g> |
95 |
| - </g> |
96 |
| - </svg> |
97 |
| - <div id="thanks">Thanks for voting!</div> |
98 |
| - <div id="redirect">Redirecting you back in a second.</div> |
| 78 | + <div id="thanks-container" class="center"> |
| 79 | + <div id="thanks-content" class="center"> |
| 80 | + <svg width="60px" height="60px" viewBox="0 0 60 60" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> |
| 81 | + <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> |
| 82 | + <g id="Artboard" transform="translate(-325.000000, -310.000000)"> |
| 83 | + <g id="cat" transform="translate(325.000000, 310.000000)"> |
| 84 | + <g id="Duotone" transform="translate(1.000000, 1.000000)"> |
| 85 | + <polygon id="Shape" fill="#FFFFFF" fill-rule="nonzero" points="52.75 34 29.75 21.25 29.75 21.25 35.25 19 35.25 0.25 27.75 5.25 17.75 5.25 10.25 0.25 10.25 19 15.25 21 15.25 57.75 52.75 57.75 57.75 49"></polygon> |
| 86 | + <path d="M22.75,24 L15.25,21 L15.25,26 L22.75,29 L35,24 L29.75,21 L22.75,24 Z" id="Shape" fill="#E5DBFF" fill-rule="nonzero"></path> |
| 87 | + <path d="M15.25,52.75 L15.25,57.75 L52.75,57.75 L57.75,49 L52.75,49 L50.25,52.75 L15.25,52.75 Z" id="Shape" fill="#E5DBFF" fill-rule="nonzero"></path> |
| 88 | + <path d="M17.75,10.25 L17.75,12.75" id="Shape" stroke="#7048E8" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path> |
| 89 | + <path d="M27.75,10.25 L27.75,12.75" id="Shape" stroke="#7048E8" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path> |
| 90 | + <polyline id="Shape" stroke="#7048E8" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" points="15.25 57.75 6.5 57.75 0.25 51.5 6.5 42.75 1.5 37.75 5.25 32.75"></polyline> |
| 91 | + <polygon id="Shape" stroke="#7048E8" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" points="27.75 5.25 17.75 5.25 10.25 0.25 10.25 19 22.75 24 35.25 19 35.25 0.25"></polygon> |
| 92 | + <polyline id="Shape" stroke="#7048E8" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" points="15.25 21 15.25 57.75 52.75 57.75 57.75 49 52.75 34 29.75 21.25"></polyline> |
| 93 | + <path d="M30.25,57.75 L30.25,35.25" id="Shape" stroke="#7048E8" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path> |
| 94 | + <path d="M22.75,57.75 L22.75,35.25" id="Shape" stroke="#7048E8" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path> |
| 95 | + <polyline id="Shape" stroke="#7048E8" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" points="45.25 42.75 39 42.75 30.25 52.75"></polyline> |
| 96 | + </g> |
| 97 | + <g id="Frames-24px"> |
| 98 | + <rect id="Rectangle-path" x="0" y="0" width="60" height="60"></rect> |
| 99 | + </g> |
| 100 | + </g> |
| 101 | + </g> |
| 102 | + </g> |
| 103 | + </svg> |
| 104 | + <div id="thanks">Thanks for voting!</div> |
| 105 | + <div id="redirect">Redirecting you back in a second.</div> |
| 106 | + </div> |
99 | 107 | </div>
|
100 | 108 | </div>
|
101 | 109 | <script>
|
|
0 commit comments