@@ -31,13 +31,21 @@ class Navigation extends LitElement {
3131
3232 a {
3333 margin-top: var(--spacing-200);
34- color: var(--link-color );
34+ color: var(--fantomas-800 );
3535 display: inline-block;
36+ text-decoration: none;
37+ background-color: var(--fantomas-200);
38+ padding: var(--spacing-50) var(--spacing-100);
3639 }
40+
41+ a:hover {
42+ background-color: var(--fantomas-400);
43+ color: var(--fantomas-50);
44+ }
3745
3846 a:only-child {
3947 text-align: center;
40- flex: 1 ;
48+ margin-inline: auto ;
4149 }
4250 ` ;
4351
@@ -93,7 +101,7 @@ class CopyToClipboard extends LitElement {
93101 margin: 0;
94102 transition: all 200ms;
95103 position: absolute;
96- z-index: 1 ;
104+ z-index: 101 ;
97105 left: 50%;
98106 transform: translateX(-50%);
99107 bottom: 100%;
@@ -146,113 +154,113 @@ class FantomasSetting extends LitElement {
146154 }
147155
148156 static styles = css `
149- :host {
150- display: inline-block;
151- }
157+ :host {
158+ display: inline-block;
159+ }
152160
153- :host([green]) iconify-icon {
154- color: #92DC84;
155- }
161+ :host([green]) iconify-icon {
162+ color: #92DC84;
163+ }
156164
157- :host([green]) .tooltip {
158- background-color: #92DC84;
159- }
165+ :host([green]) .tooltip {
166+ background-color: #92DC84;
167+ }
160168
161- :host([green]) .tooltip::after {
162- border-color: #92DC84 transparent transparent transparent;
163- }
169+ :host([green]) .tooltip::after {
170+ border-color: #92DC84 transparent transparent transparent;
171+ }
164172
165- :host([orange]) iconify-icon {
166- color: #F5BF4F;
167- }
173+ :host([orange]) iconify-icon {
174+ color: #F5BF4F;
175+ }
168176
169- :host([orange]) .tooltip {
170- background-color: #F5BF4F;
171- }
177+ :host([orange]) .tooltip {
178+ background-color: #F5BF4F;
179+ }
172180
173- :host([orange]) .tooltip::after {
174- border-color: #F5BF4F transparent transparent transparent;
175- }
181+ :host([orange]) .tooltip::after {
182+ border-color: #F5BF4F transparent transparent transparent;
183+ }
176184
177- :host([red]) iconify-icon {
178- color: #EA7268;
179- }
185+ :host([red]) iconify-icon {
186+ color: #EA7268;
187+ }
180188
181- :host([red]) .tooltip {
182- background-color: #EA7268;
183- }
189+ :host([red]) .tooltip {
190+ background-color: #EA7268;
191+ }
184192
185- :host([red]) .tooltip::after {
186- border-color: #EA7268 transparent transparent transparent;
187- }
193+ :host([red]) .tooltip::after {
194+ border-color: #EA7268 transparent transparent transparent;
195+ }
188196
189- :host([gr]) iconify-icon {
190- color: #00A8E2;
191- }
197+ :host([gr]) iconify-icon {
198+ color: #00A8E2;
199+ }
192200
193- :host([gr]) .tooltip {
194- background-color: #00A8E2;
195- }
201+ :host([gr]) .tooltip {
202+ background-color: #00A8E2;
203+ }
196204
197- :host([gr]) .tooltip::after {
198- border-color: #00A8E2 transparent transparent transparent;
199- }
205+ :host([gr]) .tooltip::after {
206+ border-color: #00A8E2 transparent transparent transparent;
207+ }
200208
201- div {
202- height: var(--configuration-icon-size);
203- position: relative;
204- }
209+ div {
210+ height: var(--configuration-icon-size);
211+ position: relative;
212+ }
205213
206- img {
207- box-sizing: border-box;
208- padding: 4px;
209- background-color: #00A8E2;
210- height: var(--configuration-icon-size);
211- width: var(--configuration-icon-size);
212- border-radius: 12px;
213- display: inline-block;
214- }
214+ img {
215+ box-sizing: border-box;
216+ padding: 4px;
217+ background-color: #00A8E2;
218+ height: var(--configuration-icon-size);
219+ width: var(--configuration-icon-size);
220+ border-radius: 12px;
221+ display: inline-block;
222+ }
215223
216- img, iconify-icon {
217- position: relative;
218- cursor: pointer;
224+ img, iconify-icon {
225+ position: relative;
226+ cursor: pointer;
219227
220- &:hover + .tooltip {
221- visibility: visible;
222- opacity: 1;
228+ &:hover + .tooltip {
229+ visibility: visible;
230+ opacity: 1;
231+ }
223232 }
224- }
225-
226- .tooltip {
227- visibility: hidden;
228- opacity: 0;
229- white-space: nowrap;
230- font-size: 14px;
231- line-height: 1.5;
232- background-color: rgba(0, 0, 0, .95);
233- color: #FFF;
234- text-align: center;
235- border-radius: var(--radius);
236- padding: var(--spacing-100);
237- margin: 0;
238- transition: all 200ms;
239- position: absolute;
240- z-index: 1;
241- left: 50%;
242- transform: translateX(-50%);
243- bottom: 100%;
244233
245- &::after {
246- content: " ";
247- position: absolute;
248- top: 100%;
249- left: 50%;
250- transform: translateX(-50%);
251- border-width: var(--radius);
252- border-style: solid;
253- border-color: rgba(0, 0, 0, .95) transparent transparent transparent;
234+ .tooltip {
235+ visibility: hidden;
236+ opacity: 0;
237+ white-space: nowrap;
238+ font-size: 14px;
239+ line-height: 1.5;
240+ background-color: rgba(0, 0, 0, .95);
241+ color: #FFF;
242+ text-align: center;
243+ border-radius: var(--radius);
244+ padding: var(--spacing-100);
245+ margin: 0;
246+ transition: all 200ms;
247+ position: absolute;
248+ z-index: 101;
249+ left: 50%;
250+ transform: translateX(-50%);
251+ bottom: 100%;
252+
253+ &::after {
254+ content: " ";
255+ position: absolute;
256+ top: 100%;
257+ left: 50%;
258+ transform: translateX(-50%);
259+ border-width: var(--radius);
260+ border-style: solid;
261+ border-color: rgba(0, 0, 0, .95) transparent transparent transparent;
262+ }
254263 }
255- }
256264 ` ;
257265
258266 constructor ( props ) {
0 commit comments