analytics/assets/css/loader.css
Vignesh Joglekar 425975efec
Adds dark mode to entire dashboard (#467)
* Adds New Dark Mode Assets

* Moves triangle for dropdown to a reasonable position

* Majority .eex dark implementation

* Fixes Logo Positioning

* Adds theme flag to user schema, uses it

* Uses correct variables for theme applicator script

* Minor missed theme changes/fallbacks

* Individual Component Support + Theme Context

* Sources Tab Support

This was a pain to test D:

* Partial Stats Sections Support

* More of stats modules supported

* Modal +table support

* Improves some Flatpickr in light theme, supports dark theme

* Fixes missed settings tab colors

* Finishes Devices module support

* Fixes bar graph colors

* Better colorizes maps module

* Undoes colorized bars

(they looked bad, on second thought)

* Fixes loading indicator

* Finishes conversions module

* Adds changelog entry

The PR number could be wrong, will double check

* Fixes missed header color

* Fixes naming of migration and removes static alter

* Does migration correctly

As I said, my Elixir is pretty weak heh

* Adds support for spike notifications setting

* Improves contrast and visibility for email settings

* Resolves @ukutaht's comments on #467

* Fixes missing dark style

* Found one more missed dark element (shared links)

* Formatting fixes
2020-12-16 11:57:28 +02:00

46 lines
755 B
CSS

.loading {
width: 50px;
height: 50px;
animation: loaderFadein .2s ease-in;
}
.loading.sm {
width: 25px;
height: 25px;
}
.loading div {
display: inline-block;
width: 50px;
height: 50px;
border: 3px solid #dae1e7;
border-radius: 50%;
border-top-color: #606f7b;
animation: spin 1s ease-in-out infinite;
-webkit-animation: spin 1s ease-in-out infinite;
}
.dark .loading div {
border: 3px solid #606f7b;
border-top-color: #dae1e7;
}
.loading.sm div {
width: 25px;
height: 25px;
}
@keyframes spin {
to { -webkit-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
to { -webkit-transform: rotate(360deg); }
}
@keyframes loaderFadein {
0% { opacity: 0; }
50% { opacity: 0; }
100% { opacity: 1; }
}