blob: 43a06822d5ce430e1ba769f7a8142337b4f9ae96 [file] [log] [blame]
pineafana5ce9102021-09-02 17:21:31 +01001.backgroundImage {
2 position: absolute;
3 bottom: -8px;
4 left: -3px;
5 width: calc(100% + 6px);
6 border-radius: 0 0 16.5px 16.5px;
7 filter: var(--card-overlay-filter);
8}
9
10.header {
11 width: 100vw;
12 height: 100vh;
13 position: relative;
14 overflow: hidden;
15 filter: var(--card-overlay-filter);
16}
17
18.panel {
19 position: absolute;
20 overflow: hidden;
21 width: min(76%, 800px);
22 height: auto;
23 top: calc((100% - min(76%, 800px)) / 1.5 );
24 left: calc((100% - min(76%, 800px)) / 2 );
25 border-radius: 16.5px;
26 background-color: var(--card-background-color);
27 backdrop-filter: blur(7px);
28 filter: var(--card-filter);
Samuel Shuert604e31d2021-09-02 16:06:20 -050029 padding-top: 30px;
30 padding-bottom: 40px;
pineafana5ce9102021-09-02 17:21:31 +010031}
32
33.title {
34 width: 100%;
35 text-align: center;
36 font-weight: 100;
Samuel Shuert604e31d2021-09-02 16:06:20 -050037 margin-top: 0px;
38 margin-bottom: -20px;
pineafana5ce9102021-09-02 17:21:31 +010039 font-size: max(2em, 4vw);
Samuel Shuert835c71f2021-09-03 15:49:26 -050040 color: var(--card-text-color);
41 word-break: break-word;
pineafana5ce9102021-09-02 17:21:31 +010042}
43
44.subtext {
Samuel Shuert604e31d2021-09-02 16:06:20 -050045 margin-bottom: 0px;
pineafana5ce9102021-09-02 17:21:31 +010046 width: 100%;
47 text-align: center;
48 font-weight: 100;
49 font-size: max(1.5em, 1.5vw);
50 color: var(--card-text-color);
51}
52
53.subtextExtra {
54 margin-bottom: 80px;
55}
56
57@keyframes arrow-slide {
58 0% {
59 -webkit-transform: translateY(0);
60 transform: translateY(0);
61 }
62 50% {
63 -webkit-transform: translateY(-1em);
64 transform: translateY(-1em);
65 }
66 100% {
67 -webkit-transform: translateY(0);
68 transform: translateY(0);
69 }
70}
71.arrow {
72 -webkit-animation: arrow-slide 2s ease-in-out infinite both;
73 animation: arrow-slide 2s ease-in-out infinite both;
74}
75
76.arrowSpan {
77 position: absolute;
78 bottom: 100px;
79 width: 100%;
80 text-align: center;
81}
82
83.arrowHidden {
84 display: none;
85}
86
87.buttonLayout {
88 display: flex;
89 flex-direction: row;
90 justify-content: flex-end;
91 align-items: center;
Samuel Shuert604e31d2021-09-02 16:06:20 -050092 flex-wrap: wrap;
pineafana5ce9102021-09-02 17:21:31 +010093 padding: 0px;
94 position: absolute;
95 bottom: 5px;
96 right: 5px;
97}
98
99.button {
100 display: flex;
101 flex-direction: row;
102 align-items: flex-start;
103 justify-content: right;
104 position: static;
105 flex: none;
106 order: 1;
107 flex-grow: 0;
108
109 margin: 5px;
110 padding: 5px 10px;
111 border-radius: 8px;
112}