1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 |
|
9 |
|
10 |
|
11 |
|
12 |
|
13 | @import './Theme.css';
|
14 |
|
15 | .sumerianSceneContainer {
|
16 | width: 100%;
|
17 | height: 100%;
|
18 | position: relative;
|
19 | }
|
20 |
|
21 | .sumerianScene {
|
22 | width: 100%;
|
23 | height: 100%;
|
24 | }
|
25 |
|
26 | .loadingOverlay {
|
27 | display: flex;
|
28 | align-items: center;
|
29 | justify-content: center;
|
30 | width: 100%;
|
31 | height: 100%;
|
32 | background-color: var(--lightSquidInk);
|
33 | }
|
34 |
|
35 | .loadingContainer {
|
36 | display: flex;
|
37 | flex-direction: column;
|
38 | align-items: center;
|
39 | justify-content: center;
|
40 | }
|
41 |
|
42 | .loadingLogo {
|
43 | margin-bottom: 20px;
|
44 | width: 80px;
|
45 | fill: var(--white);
|
46 | }
|
47 |
|
48 | .loadingSceneName {
|
49 | color: var(--white);
|
50 | margin: 0 2px 20px 2px;
|
51 | font-size: 18px;
|
52 | font-family: 'Amazon Ember';
|
53 | }
|
54 |
|
55 | .loadingBar {
|
56 | height: 2px;
|
57 | width: 100%;
|
58 | border-radius: 2px;
|
59 | background-color: var(--deepSquidInk);
|
60 | }
|
61 |
|
62 | .loadingBarFill {
|
63 | background-color: var(--light-blue);
|
64 | height: 100%;
|
65 | border-radius: 2px;
|
66 | }
|
67 |
|
68 | .sceneErrorText {
|
69 | color: var(--red);
|
70 | font-size: 14px;
|
71 | font-family: 'Amazon Ember';
|
72 | }
|
73 |
|
74 | .sceneBar {
|
75 | display: flex;
|
76 | align-items: center;
|
77 | font-size: 100%;
|
78 | position: absolute;
|
79 | bottom: 0;
|
80 | width: 100%;
|
81 | }
|
82 |
|
83 | .sceneName {
|
84 | color: var(--white);
|
85 | margin: 0 1.5em;
|
86 | font-size: 1em;
|
87 | }
|
88 |
|
89 | .sceneActions {
|
90 | margin-left: auto;
|
91 | margin-right: 16px;
|
92 | margin-bottom: 16px;
|
93 | }
|
94 |
|
95 | .actionButton {
|
96 | position: relative;
|
97 | padding: 0;
|
98 | background: none;
|
99 | height: 54px;
|
100 | width: 54px;
|
101 | cursor:pointer;
|
102 | outline: none;
|
103 | text-decoration: none;
|
104 | border: none;
|
105 | border-radius: 30px;
|
106 | transition: all .3s ease-in-out;
|
107 | color: var(--white);
|
108 | fill: currentColor;
|
109 | }
|
110 |
|
111 | .actionButton:hover {
|
112 | background-color: var(--deepSquidInk);
|
113 | box-shadow: 0.3px 0.3px 0.3px rgba(0, 0, 0, 0.3);
|
114 | }
|
115 |
|
116 | .actionButton:hover > .tooltip {
|
117 | display: block;
|
118 | }
|
119 |
|
120 | .actionButton:hover > svg {
|
121 | -webkit-filter: none;
|
122 | filter: none;
|
123 | }
|
124 |
|
125 | .actionButton:focus {
|
126 | outline: none;
|
127 | }
|
128 |
|
129 | .actionButton > svg {
|
130 | width: 1.8em;
|
131 | height: 1.8em;
|
132 | -webkit-filter: drop-shadow(1px 1px 1px var(--grey));
|
133 | filter: drop-shadow(1px 1px 1px var(--grey));
|
134 | }
|
135 |
|
136 | .actionIcon {
|
137 | fill: var(--white);
|
138 | }
|
139 |
|
140 | .tooltip {
|
141 | display: inline;
|
142 | position: relative;
|
143 | font-size: 12px;
|
144 | font-family: 'Amazon Ember';
|
145 | margin: 0 0 0 16px;
|
146 | }
|
147 |
|
148 | .autoShowTooltip .actionButton {
|
149 | background-color: var(--deepSquidInk);
|
150 | }
|
151 |
|
152 | .tooltip:after {
|
153 | background-color: var(--deepSquidInk);
|
154 | border-radius: 2px;
|
155 | bottom: 46px;
|
156 | color: var(--white);
|
157 | content: attr(data-text);
|
158 | text-decoration: none;
|
159 | padding: 10px;
|
160 | left: 50%;
|
161 | -webkit-transform: translateX(-50%);
|
162 | -moz-transform: translateX(-50%);
|
163 | -ms-transform: translateX(-50%);
|
164 | -o-transform: translateX(-50%);
|
165 | transform: translateX(-50%);
|
166 | position: absolute;
|
167 | white-space: nowrap;
|
168 | opacity: 0;
|
169 | transition: all .3s ease-in-out;
|
170 | }
|
171 |
|
172 | .tooltip:before {
|
173 | border: solid;
|
174 | border-color: var(--deepSquidInk) transparent transparent transparent;
|
175 | border-width: 5px;
|
176 | bottom: 36px;
|
177 | content:"";
|
178 | left: 50%;
|
179 | -webkit-transform: translateX(-50%);
|
180 | -moz-transform: translateX(-50%);
|
181 | -ms-transform: translateX(-50%);
|
182 | -o-transform: translateX(-50%);
|
183 | transform: translateX(-50%);
|
184 | position: absolute;
|
185 | font-size: 14px;
|
186 | opacity: 0;
|
187 | transition: all .3s ease-in-out;
|
188 | }
|
189 |
|
190 |
|
191 | .autoShowTooltip:after,
|
192 | .tooltip:hover:after {
|
193 | opacity: 1;
|
194 | transition-delay: 1s;
|
195 | }
|
196 |
|
197 | .autoShowTooltip:before,
|
198 | .tooltip:hover:before {
|
199 | opacity: 1;
|
200 | transition-delay: 1s;
|
201 | } |
\ | No newline at end of file |