From 8b5c081d766bc7be725b07a8abfb2d8f39c45fd3 Mon Sep 17 00:00:00 2001 From: silverwind Date: Fri, 25 Aug 2023 18:03:14 +0200 Subject: [PATCH] Remove fomantic loader module (#26670) Replace Fomantic `loader` CSS module with our existing `is-loading` spinner. Only three places in the UI used this module, which are pictured here: imagediff: Screenshot 2023-08-22 at 22 18 01 webauthn: Screenshot 2023-08-22 at 22 05 05 heatmap (I removed the previous loading text, it was unreadable because it was tiny and on fast machines only visible for a fraction of a second): Screenshot 2023-08-22 at 22 18 44 Also, heatmap container does not resize any more after loading now and previous duplicate id `user-heatmap` is gone. --------- Co-authored-by: wxiaoguang --- options/locale/locale_en-US.ini | 1 - templates/user/auth/webauthn.tmpl | 4 +- templates/user/heatmap.tmpl | 8 +- web_src/css/features/heatmap.css | 32 +- web_src/css/user.css | 4 - web_src/fomantic/build/semantic.css | 942 ---------------------- web_src/fomantic/semantic.json | 1 - web_src/js/components/ActivityHeatmap.vue | 24 +- web_src/js/features/heatmap.js | 2 +- 9 files changed, 25 insertions(+), 993 deletions(-) diff --git a/options/locale/locale_en-US.ini b/options/locale/locale_en-US.ini index e32399dd8..abb98c608 100644 --- a/options/locale/locale_en-US.ini +++ b/options/locale/locale_en-US.ini @@ -598,7 +598,6 @@ overview = Overview following = Following follow = Follow unfollow = Unfollow -heatmap.loading = Loading Heatmap… user_bio = Biography disabled_public_activity = This user has disabled the public visibility of the activity. email_visibility.limited = Your email address is visible to all authenticated users diff --git a/templates/user/auth/webauthn.tmpl b/templates/user/auth/webauthn.tmpl index ef0488640..c689f9c6d 100644 --- a/templates/user/auth/webauthn.tmpl +++ b/templates/user/auth/webauthn.tmpl @@ -10,8 +10,8 @@ {{template "base/alert" .}}

{{.locale.Tr "webauthn_sign_in"}}

-
-
+
+
{{.locale.Tr "webauthn_press_button"}}
diff --git a/templates/user/heatmap.tmpl b/templates/user/heatmap.tmpl index d912eb2a8..3bf7e6cbb 100644 --- a/templates/user/heatmap.tmpl +++ b/templates/user/heatmap.tmpl @@ -1,14 +1,10 @@ {{if .HeatmapData}} -
-
-
{{.locale.Tr "user.heatmap.loading"}}
-
-
+ >
{{end}} diff --git a/web_src/css/features/heatmap.css b/web_src/css/features/heatmap.css index d0cd2b573..364754751 100644 --- a/web_src/css/features/heatmap.css +++ b/web_src/css/features/heatmap.css @@ -2,7 +2,15 @@ width: 100%; font-size: 9px; position: relative; - min-height: 125px; +} + +/* before the Vue component is mounted, show a loading indicator with dummy size */ +/* the ratio is guesswork, see https://github.com/razorness/vue3-calendar-heatmap/issues/26 */ +#user-heatmap.is-loading { + aspect-ratio: 5.415; /* the size is about 790 x 145 */ +} +.user.profile #user-heatmap.is-loading { + aspect-ratio: 5.645; /* the size is about 953 x 169 */ } #user-heatmap text { @@ -32,37 +40,15 @@ } @media (max-width: 1200px) { - #user-heatmap { - min-height: 105px; - } #user-heatmap .total-contributions { left: 21px; } } @media (max-width: 1000px) { - #user-heatmap { - min-height: 80px; - } #user-heatmap .total-contributions { font-size: 10px; left: 17px; bottom: -4px; } } - -.user.profile #user-heatmap { - min-height: 135px; -} - -@media (max-width: 1200px) { - .user.profile #user-heatmap { - min-height: 115px; - } -} - -@media (max-width: 1000px) { - .user.profile #user-heatmap { - min-height: 90px; - } -} diff --git a/web_src/css/user.css b/web_src/css/user.css index b63724502..2f951440b 100644 --- a/web_src/css/user.css +++ b/web_src/css/user.css @@ -58,10 +58,6 @@ } } -.user.profile #loading-heatmap { - margin-bottom: 1em; -} - .user.profile .ui.secondary.stackable.pointing.menu { flex-wrap: wrap; } diff --git a/web_src/fomantic/build/semantic.css b/web_src/fomantic/build/semantic.css index 4004415fa..c2003ab2d 100644 --- a/web_src/fomantic/build/semantic.css +++ b/web_src/fomantic/build/semantic.css @@ -13544,948 +13544,6 @@ ol.ui.suffixed.list li:before, /******************************* User Variable Overrides *******************************/ -/*! - * # Fomantic-UI - Loader - * http://github.com/fomantic/Fomantic-UI/ - * - * - * Released under the MIT license - * http://opensource.org/licenses/MIT - * - */ - -/******************************* - Loader -*******************************/ - -/* Standard Size */ - -.ui.loader { - display: none; - position: absolute; - top: 50%; - left: 50%; - margin: 0; - text-align: center; - z-index: 1000; - transform: translateX(-50%) translateY(-50%); -} - -/* Static Shape */ - -.ui.loader:before { - position: absolute; - content: ''; - top: 0; - left: 50%; - width: 100%; - height: 100%; - border-radius: 500rem; - border: 0.2em solid rgba(0, 0, 0, 0.1); -} - -/* Active Shape */ - -.ui.loader:after { - position: absolute; - content: ''; - top: 0; - left: 50%; - width: 100%; - height: 100%; - -webkit-animation: loader 0.6s infinite linear; - animation: loader 0.6s infinite linear; - border: 0.2em solid #767676; - border-radius: 500rem; - box-shadow: 0 0 0 1px transparent; -} - -/* Speeds */ - -.ui.fast.loading.loading:after, -.ui.fast.loading.loading .input > i.icon:after, -.ui.fast.loading.loading > i.icon:after, -.ui.fast.loader:after { - -webkit-animation-duration: 0.3s; - animation-duration: 0.3s; -} - -.ui.slow.loading.loading:after, -.ui.slow.loading.loading .input > i.icon:after, -.ui.slow.loading.loading > i.icon:after, -.ui.slow.loader:after { - -webkit-animation-duration: 0.9s; - animation-duration: 0.9s; -} - -/* Active Animation */ - -@-webkit-keyframes loader { - 100% { - transform: rotate(360deg); - } -} - -@keyframes loader { - 100% { - transform: rotate(360deg); - } -} - -/*------------------- - Coupling ---------------------*/ - -/* Show inside active dimmer */ - -.ui.dimmer > .loader { - display: block; -} - -/* Black Dimmer */ - -.ui.dimmer > .ui.loader { - color: rgba(255, 255, 255, 0.9); -} - -.ui.dimmer > .ui.loader:not(.elastic):before { - border-color: rgba(255, 255, 255, 0.15); -} - -/* White Dimmer (Inverted) */ - -.ui.inverted.dimmer > .ui.loader { - color: rgba(0, 0, 0, 0.87); -} - -.ui.inverted.dimmer > .ui.loader:not(.elastic):before { - border-color: rgba(0, 0, 0, 0.1); -} - -/******************************* - Types -*******************************/ - -/*------------------- - Text - --------------------*/ - -.ui.ui.ui.ui.text.loader { - width: auto; - height: auto; - text-align: center; - font-style: normal; -} - -/******************************* - States -*******************************/ - -.ui.indeterminate.loader:after { - animation-direction: reverse; - -webkit-animation-duration: 1.2s; - animation-duration: 1.2s; -} - -.ui.loader.active, -.ui.loader.visible { - display: block; -} - -.ui.loader.disabled, -.ui.loader.hidden { - display: none; -} - -/******************************* - Variations -*******************************/ - -/*------------------- - Sizes ---------------------*/ - -.ui.loader { - width: 2.28571429rem; - height: 2.28571429rem; - font-size: 1em; -} - -.ui.loader:before, -.ui.loader:after { - width: 2.28571429rem; - height: 2.28571429rem; - margin: 0 0 0 -1.14285714rem; -} - -.ui.text.loader { - min-width: 2.28571429rem; - padding-top: 3.07142857rem; -} - -.ui.mini.loader { - width: 1rem; - height: 1rem; - font-size: 0.78571429em; -} - -.ui.mini.loader:before, -.ui.mini.loader:after { - width: 1rem; - height: 1rem; - margin: 0 0 0 -0.5rem; -} - -.ui.mini.text.loader { - min-width: 1rem; - padding-top: 1.78571429rem; -} - -.ui.tiny.loader { - width: 1.14285714rem; - height: 1.14285714rem; - font-size: 0.85714286em; -} - -.ui.tiny.loader:before, -.ui.tiny.loader:after { - width: 1.14285714rem; - height: 1.14285714rem; - margin: 0 0 0 -0.57142857rem; -} - -.ui.tiny.text.loader { - min-width: 1.14285714rem; - padding-top: 1.92857143rem; -} - -.ui.small.loader { - width: 1.71428571rem; - height: 1.71428571rem; - font-size: 0.92857143em; -} - -.ui.small.loader:before, -.ui.small.loader:after { - width: 1.71428571rem; - height: 1.71428571rem; - margin: 0 0 0 -0.85714286rem; -} - -.ui.small.text.loader { - min-width: 1.71428571rem; - padding-top: 2.5rem; -} - -.ui.large.loader { - width: 3.42857143rem; - height: 3.42857143rem; - font-size: 1.14285714em; -} - -.ui.large.loader:before, -.ui.large.loader:after { - width: 3.42857143rem; - height: 3.42857143rem; - margin: 0 0 0 -1.71428571rem; -} - -.ui.large.text.loader { - min-width: 3.42857143rem; - padding-top: 4.21428571rem; -} - -.ui.big.loader { - width: 3.71428571rem; - height: 3.71428571rem; - font-size: 1.28571429em; -} - -.ui.big.loader:before, -.ui.big.loader:after { - width: 3.71428571rem; - height: 3.71428571rem; - margin: 0 0 0 -1.85714286rem; -} - -.ui.big.text.loader { - min-width: 3.71428571rem; - padding-top: 4.5rem; -} - -.ui.huge.loader { - width: 4.14285714rem; - height: 4.14285714rem; - font-size: 1.42857143em; -} - -.ui.huge.loader:before, -.ui.huge.loader:after { - width: 4.14285714rem; - height: 4.14285714rem; - margin: 0 0 0 -2.07142857rem; -} - -.ui.huge.text.loader { - min-width: 4.14285714rem; - padding-top: 4.92857143rem; -} - -.ui.massive.loader { - width: 4.57142857rem; - height: 4.57142857rem; - font-size: 1.71428571em; -} - -.ui.massive.loader:before, -.ui.massive.loader:after { - width: 4.57142857rem; - height: 4.57142857rem; - margin: 0 0 0 -2.28571429rem; -} - -.ui.massive.text.loader { - min-width: 4.57142857rem; - padding-top: 5.35714286rem; -} - -/*------------------- - Colors ---------------------*/ - -.ui.primary.elastic.loader.loader:before, -.ui.primary.basic.elastic.loading.button:before, -.ui.primary.basic.elastic.loading.button:after, -.ui.primary.elastic.loading.loading.loading:not(.segment):before, -.ui.primary.elastic.loading.loading.loading .input > i.icon:before, -.ui.primary.elastic.loading.loading.loading.loading > i.icon:before, -.ui.primary.loading.loading.loading.loading:not(.usual):not(.button):after, -.ui.primary.loading.loading.loading.loading .input > i.icon:after, -.ui.primary.loading.loading.loading.loading > i.icon:after, -.ui.primary.loader.loader.loader:after { - color: #2185D0; -} - -.ui.inverted.primary.elastic.loader:before, -.ui.inverted.primary.elastic.loading.loading.loading:not(.segment):before, -.ui.inverted.primary.elastic.loading.loading.loading .input > i.icon:before, -.ui.inverted.primary.elastic.loading.loading.loading > i.icon:before, -.ui.inverted.primary.loading.loading.loading.loading:not(.usual):after, -.ui.inverted.primary.loading.loading.loading.loading .input > i.icon:after, -.ui.inverted.primary.loading.loading.loading.loading > i.icon:after, -.ui.inverted.primary.loader.loader.loader:after { - color: #54C8FF; -} - -.ui.secondary.elastic.loader.loader:before, -.ui.secondary.basic.elastic.loading.button:before, -.ui.secondary.basic.elastic.loading.button:after, -.ui.secondary.elastic.loading.loading.loading:not(.segment):before, -.ui.secondary.elastic.loading.loading.loading .input > i.icon:before, -.ui.secondary.elastic.loading.loading.loading.loading > i.icon:before, -.ui.secondary.loading.loading.loading.loading:not(.usual):not(.button):after, -.ui.secondary.loading.loading.loading.loading .input > i.icon:after, -.ui.secondary.loading.loading.loading.loading > i.icon:after, -.ui.secondary.loader.loader.loader:after { - color: #1B1C1D; -} - -.ui.inverted.secondary.elastic.loader:before, -.ui.inverted.secondary.elastic.loading.loading.loading:not(.segment):before, -.ui.inverted.secondary.elastic.loading.loading.loading .input > i.icon:before, -.ui.inverted.secondary.elastic.loading.loading.loading > i.icon:before, -.ui.inverted.secondary.loading.loading.loading.loading:not(.usual):after, -.ui.inverted.secondary.loading.loading.loading.loading .input > i.icon:after, -.ui.inverted.secondary.loading.loading.loading.loading > i.icon:after, -.ui.inverted.secondary.loader.loader.loader:after { - color: #545454; -} - -.ui.red.elastic.loader.loader:before, -.ui.red.basic.elastic.loading.button:before, -.ui.red.basic.elastic.loading.button:after, -.ui.red.elastic.loading.loading.loading:not(.segment):before, -.ui.red.elastic.loading.loading.loading .input > i.icon:before, -.ui.red.elastic.loading.loading.loading.loading > i.icon:before, -.ui.red.loading.loading.loading.loading:not(.usual):not(.button):after, -.ui.red.loading.loading.loading.loading .input > i.icon:after, -.ui.red.loading.loading.loading.loading > i.icon:after, -.ui.red.loader.loader.loader:after { - color: #DB2828; -} - -.ui.inverted.red.elastic.loader:before, -.ui.inverted.red.elastic.loading.loading.loading:not(.segment):before, -.ui.inverted.red.elastic.loading.loading.loading .input > i.icon:before, -.ui.inverted.red.elastic.loading.loading.loading > i.icon:before, -.ui.inverted.red.loading.loading.loading.loading:not(.usual):after, -.ui.inverted.red.loading.loading.loading.loading .input > i.icon:after, -.ui.inverted.red.loading.loading.loading.loading > i.icon:after, -.ui.inverted.red.loader.loader.loader:after { - color: #FF695E; -} - -.ui.orange.elastic.loader.loader:before, -.ui.orange.basic.elastic.loading.button:before, -.ui.orange.basic.elastic.loading.button:after, -.ui.orange.elastic.loading.loading.loading:not(.segment):before, -.ui.orange.elastic.loading.loading.loading .input > i.icon:before, -.ui.orange.elastic.loading.loading.loading.loading > i.icon:before, -.ui.orange.loading.loading.loading.loading:not(.usual):not(.button):after, -.ui.orange.loading.loading.loading.loading .input > i.icon:after, -.ui.orange.loading.loading.loading.loading > i.icon:after, -.ui.orange.loader.loader.loader:after { - color: #F2711C; -} - -.ui.inverted.orange.elastic.loader:before, -.ui.inverted.orange.elastic.loading.loading.loading:not(.segment):before, -.ui.inverted.orange.elastic.loading.loading.loading .input > i.icon:before, -.ui.inverted.orange.elastic.loading.loading.loading > i.icon:before, -.ui.inverted.orange.loading.loading.loading.loading:not(.usual):after, -.ui.inverted.orange.loading.loading.loading.loading .input > i.icon:after, -.ui.inverted.orange.loading.loading.loading.loading > i.icon:after, -.ui.inverted.orange.loader.loader.loader:after { - color: #FF851B; -} - -.ui.yellow.elastic.loader.loader:before, -.ui.yellow.basic.elastic.loading.button:before, -.ui.yellow.basic.elastic.loading.button:after, -.ui.yellow.elastic.loading.loading.loading:not(.segment):before, -.ui.yellow.elastic.loading.loading.loading .input > i.icon:before, -.ui.yellow.elastic.loading.loading.loading.loading > i.icon:before, -.ui.yellow.loading.loading.loading.loading:not(.usual):not(.button):after, -.ui.yellow.loading.loading.loading.loading .input > i.icon:after, -.ui.yellow.loading.loading.loading.loading > i.icon:after, -.ui.yellow.loader.loader.loader:after { - color: #FBBD08; -} - -.ui.inverted.yellow.elastic.loader:before, -.ui.inverted.yellow.elastic.loading.loading.loading:not(.segment):before, -.ui.inverted.yellow.elastic.loading.loading.loading .input > i.icon:before, -.ui.inverted.yellow.elastic.loading.loading.loading > i.icon:before, -.ui.inverted.yellow.loading.loading.loading.loading:not(.usual):after, -.ui.inverted.yellow.loading.loading.loading.loading .input > i.icon:after, -.ui.inverted.yellow.loading.loading.loading.loading > i.icon:after, -.ui.inverted.yellow.loader.loader.loader:after { - color: #FFE21F; -} - -.ui.olive.elastic.loader.loader:before, -.ui.olive.basic.elastic.loading.button:before, -.ui.olive.basic.elastic.loading.button:after, -.ui.olive.elastic.loading.loading.loading:not(.segment):before, -.ui.olive.elastic.loading.loading.loading .input > i.icon:before, -.ui.olive.elastic.loading.loading.loading.loading > i.icon:before, -.ui.olive.loading.loading.loading.loading:not(.usual):not(.button):after, -.ui.olive.loading.loading.loading.loading .input > i.icon:after, -.ui.olive.loading.loading.loading.loading > i.icon:after, -.ui.olive.loader.loader.loader:after { - color: #B5CC18; -} - -.ui.inverted.olive.elastic.loader:before, -.ui.inverted.olive.elastic.loading.loading.loading:not(.segment):before, -.ui.inverted.olive.elastic.loading.loading.loading .input > i.icon:before, -.ui.inverted.olive.elastic.loading.loading.loading > i.icon:before, -.ui.inverted.olive.loading.loading.loading.loading:not(.usual):after, -.ui.inverted.olive.loading.loading.loading.loading .input > i.icon:after, -.ui.inverted.olive.loading.loading.loading.loading > i.icon:after, -.ui.inverted.olive.loader.loader.loader:after { - color: #D9E778; -} - -.ui.green.elastic.loader.loader:before, -.ui.green.basic.elastic.loading.button:before, -.ui.green.basic.elastic.loading.button:after, -.ui.green.elastic.loading.loading.loading:not(.segment):before, -.ui.green.elastic.loading.loading.loading .input > i.icon:before, -.ui.green.elastic.loading.loading.loading.loading > i.icon:before, -.ui.green.loading.loading.loading.loading:not(.usual):not(.button):after, -.ui.green.loading.loading.loading.loading .input > i.icon:after, -.ui.green.loading.loading.loading.loading > i.icon:after, -.ui.green.loader.loader.loader:after { - color: #21BA45; -} - -.ui.inverted.green.elastic.loader:before, -.ui.inverted.green.elastic.loading.loading.loading:not(.segment):before, -.ui.inverted.green.elastic.loading.loading.loading .input > i.icon:before, -.ui.inverted.green.elastic.loading.loading.loading > i.icon:before, -.ui.inverted.green.loading.loading.loading.loading:not(.usual):after, -.ui.inverted.green.loading.loading.loading.loading .input > i.icon:after, -.ui.inverted.green.loading.loading.loading.loading > i.icon:after, -.ui.inverted.green.loader.loader.loader:after { - color: #2ECC40; -} - -.ui.teal.elastic.loader.loader:before, -.ui.teal.basic.elastic.loading.button:before, -.ui.teal.basic.elastic.loading.button:after, -.ui.teal.elastic.loading.loading.loading:not(.segment):before, -.ui.teal.elastic.loading.loading.loading .input > i.icon:before, -.ui.teal.elastic.loading.loading.loading.loading > i.icon:before, -.ui.teal.loading.loading.loading.loading:not(.usual):not(.button):after, -.ui.teal.loading.loading.loading.loading .input > i.icon:after, -.ui.teal.loading.loading.loading.loading > i.icon:after, -.ui.teal.loader.loader.loader:after { - color: #00B5AD; -} - -.ui.inverted.teal.elastic.loader:before, -.ui.inverted.teal.elastic.loading.loading.loading:not(.segment):before, -.ui.inverted.teal.elastic.loading.loading.loading .input > i.icon:before, -.ui.inverted.teal.elastic.loading.loading.loading > i.icon:before, -.ui.inverted.teal.loading.loading.loading.loading:not(.usual):after, -.ui.inverted.teal.loading.loading.loading.loading .input > i.icon:after, -.ui.inverted.teal.loading.loading.loading.loading > i.icon:after, -.ui.inverted.teal.loader.loader.loader:after { - color: #6DFFFF; -} - -.ui.blue.elastic.loader.loader:before, -.ui.blue.basic.elastic.loading.button:before, -.ui.blue.basic.elastic.loading.button:after, -.ui.blue.elastic.loading.loading.loading:not(.segment):before, -.ui.blue.elastic.loading.loading.loading .input > i.icon:before, -.ui.blue.elastic.loading.loading.loading.loading > i.icon:before, -.ui.blue.loading.loading.loading.loading:not(.usual):not(.button):after, -.ui.blue.loading.loading.loading.loading .input > i.icon:after, -.ui.blue.loading.loading.loading.loading > i.icon:after, -.ui.blue.loader.loader.loader:after { - color: #2185D0; -} - -.ui.inverted.blue.elastic.loader:before, -.ui.inverted.blue.elastic.loading.loading.loading:not(.segment):before, -.ui.inverted.blue.elastic.loading.loading.loading .input > i.icon:before, -.ui.inverted.blue.elastic.loading.loading.loading > i.icon:before, -.ui.inverted.blue.loading.loading.loading.loading:not(.usual):after, -.ui.inverted.blue.loading.loading.loading.loading .input > i.icon:after, -.ui.inverted.blue.loading.loading.loading.loading > i.icon:after, -.ui.inverted.blue.loader.loader.loader:after { - color: #54C8FF; -} - -.ui.violet.elastic.loader.loader:before, -.ui.violet.basic.elastic.loading.button:before, -.ui.violet.basic.elastic.loading.button:after, -.ui.violet.elastic.loading.loading.loading:not(.segment):before, -.ui.violet.elastic.loading.loading.loading .input > i.icon:before, -.ui.violet.elastic.loading.loading.loading.loading > i.icon:before, -.ui.violet.loading.loading.loading.loading:not(.usual):not(.button):after, -.ui.violet.loading.loading.loading.loading .input > i.icon:after, -.ui.violet.loading.loading.loading.loading > i.icon:after, -.ui.violet.loader.loader.loader:after { - color: #6435C9; -} - -.ui.inverted.violet.elastic.loader:before, -.ui.inverted.violet.elastic.loading.loading.loading:not(.segment):before, -.ui.inverted.violet.elastic.loading.loading.loading .input > i.icon:before, -.ui.inverted.violet.elastic.loading.loading.loading > i.icon:before, -.ui.inverted.violet.loading.loading.loading.loading:not(.usual):after, -.ui.inverted.violet.loading.loading.loading.loading .input > i.icon:after, -.ui.inverted.violet.loading.loading.loading.loading > i.icon:after, -.ui.inverted.violet.loader.loader.loader:after { - color: #A291FB; -} - -.ui.purple.elastic.loader.loader:before, -.ui.purple.basic.elastic.loading.button:before, -.ui.purple.basic.elastic.loading.button:after, -.ui.purple.elastic.loading.loading.loading:not(.segment):before, -.ui.purple.elastic.loading.loading.loading .input > i.icon:before, -.ui.purple.elastic.loading.loading.loading.loading > i.icon:before, -.ui.purple.loading.loading.loading.loading:not(.usual):not(.button):after, -.ui.purple.loading.loading.loading.loading .input > i.icon:after, -.ui.purple.loading.loading.loading.loading > i.icon:after, -.ui.purple.loader.loader.loader:after { - color: #A333C8; -} - -.ui.inverted.purple.elastic.loader:before, -.ui.inverted.purple.elastic.loading.loading.loading:not(.segment):before, -.ui.inverted.purple.elastic.loading.loading.loading .input > i.icon:before, -.ui.inverted.purple.elastic.loading.loading.loading > i.icon:before, -.ui.inverted.purple.loading.loading.loading.loading:not(.usual):after, -.ui.inverted.purple.loading.loading.loading.loading .input > i.icon:after, -.ui.inverted.purple.loading.loading.loading.loading > i.icon:after, -.ui.inverted.purple.loader.loader.loader:after { - color: #DC73FF; -} - -.ui.pink.elastic.loader.loader:before, -.ui.pink.basic.elastic.loading.button:before, -.ui.pink.basic.elastic.loading.button:after, -.ui.pink.elastic.loading.loading.loading:not(.segment):before, -.ui.pink.elastic.loading.loading.loading .input > i.icon:before, -.ui.pink.elastic.loading.loading.loading.loading > i.icon:before, -.ui.pink.loading.loading.loading.loading:not(.usual):not(.button):after, -.ui.pink.loading.loading.loading.loading .input > i.icon:after, -.ui.pink.loading.loading.loading.loading > i.icon:after, -.ui.pink.loader.loader.loader:after { - color: #E03997; -} - -.ui.inverted.pink.elastic.loader:before, -.ui.inverted.pink.elastic.loading.loading.loading:not(.segment):before, -.ui.inverted.pink.elastic.loading.loading.loading .input > i.icon:before, -.ui.inverted.pink.elastic.loading.loading.loading > i.icon:before, -.ui.inverted.pink.loading.loading.loading.loading:not(.usual):after, -.ui.inverted.pink.loading.loading.loading.loading .input > i.icon:after, -.ui.inverted.pink.loading.loading.loading.loading > i.icon:after, -.ui.inverted.pink.loader.loader.loader:after { - color: #FF8EDF; -} - -.ui.brown.elastic.loader.loader:before, -.ui.brown.basic.elastic.loading.button:before, -.ui.brown.basic.elastic.loading.button:after, -.ui.brown.elastic.loading.loading.loading:not(.segment):before, -.ui.brown.elastic.loading.loading.loading .input > i.icon:before, -.ui.brown.elastic.loading.loading.loading.loading > i.icon:before, -.ui.brown.loading.loading.loading.loading:not(.usual):not(.button):after, -.ui.brown.loading.loading.loading.loading .input > i.icon:after, -.ui.brown.loading.loading.loading.loading > i.icon:after, -.ui.brown.loader.loader.loader:after { - color: #A5673F; -} - -.ui.inverted.brown.elastic.loader:before, -.ui.inverted.brown.elastic.loading.loading.loading:not(.segment):before, -.ui.inverted.brown.elastic.loading.loading.loading .input > i.icon:before, -.ui.inverted.brown.elastic.loading.loading.loading > i.icon:before, -.ui.inverted.brown.loading.loading.loading.loading:not(.usual):after, -.ui.inverted.brown.loading.loading.loading.loading .input > i.icon:after, -.ui.inverted.brown.loading.loading.loading.loading > i.icon:after, -.ui.inverted.brown.loader.loader.loader:after { - color: #D67C1C; -} - -.ui.grey.elastic.loader.loader:before, -.ui.grey.basic.elastic.loading.button:before, -.ui.grey.basic.elastic.loading.button:after, -.ui.grey.elastic.loading.loading.loading:not(.segment):before, -.ui.grey.elastic.loading.loading.loading .input > i.icon:before, -.ui.grey.elastic.loading.loading.loading.loading > i.icon:before, -.ui.grey.loading.loading.loading.loading:not(.usual):not(.button):after, -.ui.grey.loading.loading.loading.loading .input > i.icon:after, -.ui.grey.loading.loading.loading.loading > i.icon:after, -.ui.grey.loader.loader.loader:after { - color: #767676; -} - -.ui.inverted.grey.elastic.loader:before, -.ui.inverted.grey.elastic.loading.loading.loading:not(.segment):before, -.ui.inverted.grey.elastic.loading.loading.loading .input > i.icon:before, -.ui.inverted.grey.elastic.loading.loading.loading > i.icon:before, -.ui.inverted.grey.loading.loading.loading.loading:not(.usual):after, -.ui.inverted.grey.loading.loading.loading.loading .input > i.icon:after, -.ui.inverted.grey.loading.loading.loading.loading > i.icon:after, -.ui.inverted.grey.loader.loader.loader:after { - color: #DCDDDE; -} - -.ui.black.elastic.loader.loader:before, -.ui.black.basic.elastic.loading.button:before, -.ui.black.basic.elastic.loading.button:after, -.ui.black.elastic.loading.loading.loading:not(.segment):before, -.ui.black.elastic.loading.loading.loading .input > i.icon:before, -.ui.black.elastic.loading.loading.loading.loading > i.icon:before, -.ui.black.loading.loading.loading.loading:not(.usual):not(.button):after, -.ui.black.loading.loading.loading.loading .input > i.icon:after, -.ui.black.loading.loading.loading.loading > i.icon:after, -.ui.black.loader.loader.loader:after { - color: #1B1C1D; -} - -.ui.inverted.black.elastic.loader:before, -.ui.inverted.black.elastic.loading.loading.loading:not(.segment):before, -.ui.inverted.black.elastic.loading.loading.loading .input > i.icon:before, -.ui.inverted.black.elastic.loading.loading.loading > i.icon:before, -.ui.inverted.black.loading.loading.loading.loading:not(.usual):after, -.ui.inverted.black.loading.loading.loading.loading .input > i.icon:after, -.ui.inverted.black.loading.loading.loading.loading > i.icon:after, -.ui.inverted.black.loader.loader.loader:after { - color: #545454; -} - -.ui.elastic.loader.loader:before, -.ui.elastic.loading.loading.loading:before, -.ui.elastic.loading.loading.loading .input > i.icon:before, -.ui.elastic.loading.loading.loading > i.icon:before, -.ui.loading.loading.loading.loading:not(.usual):after, -.ui.loading.loading.loading.loading .input > i.icon:after, -.ui.loading.loading.loading.loading > i.icon:after, -.ui.loader.loader.loader:after { - border-color: currentColor; -} - -.ui.elastic.loading.loading.loading.loading.button:not(.inverted):not(.basic):before { - color: #FFFFFF; -} - -.ui.elastic.basic.loading.button:before, -.ui.elastic.basic.loading.button:after { - color: #767676; -} - -.ui.double.loading.loading.loading.loading.button:after { - border-bottom-color: currentColor; -} - -/*------------------- - Inline - --------------------*/ - -.ui.inline.loader { - position: relative; - vertical-align: middle; - margin: 0; - left: 0; - top: 0; - transform: none; -} - -.ui.inline.loader.active, -.ui.inline.loader.visible { - display: inline-block; -} - -/* Centered Inline */ - -.ui.centered.inline.loader.active, -.ui.centered.inline.loader.visible { - display: block; - margin-left: auto; - margin-right: auto; -} - -.ui.loading.loading.loading.loading.loading.loading:after, -.ui.loading.loading.loading.loading.loading.loading .input > i.icon:after, -.ui.loading.loading.loading.loading.loading.loading > i.icon:after, -.ui.loader.loader.loader.loader.loader:after { - border-left-color: transparent; - border-right-color: transparent; -} - -.ui.loading.loading.loading.loading.loading.loading.loading:not(.double):after, -.ui.loading.loading.loading.loading.loading.loading.loading:not(.double) .input > i.icon:after, -.ui.loading.loading.loading.loading.loading.loading.loading:not(.double) > i.icon:after, -.ui.loader.loader.loader.loader.loader.loader:not(.double):after { - border-bottom-color: transparent; -} - -.ui.loading.loading.loading.loading.loading.loading.segment:after, -.ui.loading.loading.loading.loading.loading.loading.form:after { - border-left-color: rgba(0, 0, 0, 0.1); - border-right-color: rgba(0, 0, 0, 0.1); -} - -.ui.loading.loading.loading.loading.loading.loading.segment:not(.double):after, -.ui.loading.loading.loading.loading.loading.loading.form:not(.double):after { - border-bottom-color: rgba(0, 0, 0, 0.1); -} - -/*------------------- - Elastic - --------------------*/ - -.ui.dimmer > .ui.elastic.loader { - color: #FFFFFF; -} - -.ui.inverted.dimmer > .ui.elastic.loader { - color: #767676; -} - -.ui.elastic.loading.loading:not(.form):not(.segment):after, -.ui.elastic.loading.loading .input > i.icon:after, -.ui.elastic.loading.loading > i.icon:after, -.ui.elastic.loader.loader:after { - -webkit-animation: loader 1s infinite cubic-bezier(0.27, 1.05, 0.92, 0.61); - animation: loader 1s infinite cubic-bezier(0.27, 1.05, 0.92, 0.61); - -webkit-animation-delay: 0.3s; - animation-delay: 0.3s; -} - -.ui.elastic.loading.loading.loading:not(.form):not(.segment):before, -.ui.elastic.loading.loading.loading .input > i.icon:before, -.ui.elastic.loading.loading.loading > i.icon:before, -.ui.elastic.loader.loader:before { - -webkit-animation: elastic-loader 1s infinite cubic-bezier(0.27, 1.05, 0.92, 0.61); - animation: elastic-loader 1s infinite cubic-bezier(0.27, 1.05, 0.92, 0.61); - -moz-animation: currentcolor-elastic-loader 1s infinite cubic-bezier(0.27, 1.05, 0.92, 0.61); - border-right-color: transparent; -} - -.ui.elastic.inline.loader:empty { - -webkit-animation: loader 8s infinite linear; - animation: loader 8s infinite linear; -} - -.ui.slow.elastic.loading.loading:not(.form):not(.segment):after, -.ui.slow.elastic.loading.loading .input > i.icon:after, -.ui.slow.elastic.loading.loading > i.icon:after, -.ui.slow.elastic.loader.loader:after { - -webkit-animation-duration: 1.5s; - animation-duration: 1.5s; - -webkit-animation-delay: 0.45s; - animation-delay: 0.45s; -} - -.ui.slow.elastic.loading.loading.loading:not(.form):not(.segment):before, -.ui.slow.elastic.loading.loading.loading .input > i.icon:before, -.ui.slow.elastic.loading.loading.loading > i.icon:before, -.ui.slow.elastic.loader.loader:before { - -webkit-animation-duration: 1.5s; - animation-duration: 1.5s; -} - -.ui.fast.elastic.loading.loading:not(.form):not(.segment):after, -.ui.fast.elastic.loading.loading .input > i.icon:after, -.ui.fast.elastic.loading.loading > i.icon:after, -.ui.fast.elastic.loader.loader:after { - -webkit-animation-duration: 0.66s; - animation-duration: 0.66s; - -webkit-animation-delay: 0.2s; - animation-delay: 0.2s; -} - -.ui.fast.elastic.loading.loading.loading:not(.form):not(.segment):before, -.ui.fast.elastic.loading.loading.loading .input > i.icon:before, -.ui.fast.elastic.loading.loading.loading > i.icon:before, -.ui.fast.elastic.loader.loader:before { - -webkit-animation-duration: 0.66s; - animation-duration: 0.66s; -} - -@-webkit-keyframes elastic-loader { - 0%, 1% { - border-left-color: transparent; - border-bottom-color: transparent; - } - - 1.1%, 50% { - border-left-color: inherit; - } - - 10%, 35.1% { - border-bottom-color: transparent; - } - - 10.1%, 35% { - border-bottom-color: inherit; - } - - 50.1% { - border-left-color: transparent; - } - - 100% { - border-left-color: transparent; - border-bottom-color: transparent; - transform: rotate(360deg); - } -} - -@keyframes elastic-loader { - 0%, 1% { - border-left-color: transparent; - border-bottom-color: transparent; - } - - 1.1%, 50% { - border-left-color: inherit; - } - - 10%, 35.1% { - border-bottom-color: transparent; - } - - 10.1%, 35% { - border-bottom-color: inherit; - } - - 50.1% { - border-left-color: transparent; - } - - 100% { - border-left-color: transparent; - border-bottom-color: transparent; - transform: rotate(360deg); - } -} - -@-webkit-keyframes currentcolor-elastic-loader { - 0%, 1% { - border-left-color: transparent; - border-bottom-color: transparent; - } - - 1.1%, 50% { - border-left-color: currentColor; - } - - 10%, 35.1% { - border-bottom-color: transparent; - } - - 10.1%, 35% { - border-bottom-color: currentColor; - } - - 50.1% { - border-left-color: transparent; - } - - 100% { - border-left-color: transparent; - border-bottom-color: transparent; - transform: rotate(360deg); - } -} - -@keyframes currentcolor-elastic-loader { - 0%, 1% { - border-left-color: transparent; - border-bottom-color: transparent; - } - - 1.1%, 50% { - border-left-color: currentColor; - } - - 10%, 35.1% { - border-bottom-color: transparent; - } - - 10.1%, 35% { - border-bottom-color: currentColor; - } - - 50.1% { - border-left-color: transparent; - } - - 100% { - border-left-color: transparent; - border-bottom-color: transparent; - transform: rotate(360deg); - } -} - -/******************************* - Theme Overrides -*******************************/ - -/******************************* - Site Overrides -*******************************/ /* * # Fomantic - Menu * http://github.com/fomantic/Fomantic-UI/ diff --git a/web_src/fomantic/semantic.json b/web_src/fomantic/semantic.json index 2902dbf34..79aec9493 100644 --- a/web_src/fomantic/semantic.json +++ b/web_src/fomantic/semantic.json @@ -34,7 +34,6 @@ "item", "label", "list", - "loader", "menu", "message", "modal", diff --git a/web_src/js/components/ActivityHeatmap.vue b/web_src/js/components/ActivityHeatmap.vue index acae1aedd..1b083ed13 100644 --- a/web_src/js/components/ActivityHeatmap.vue +++ b/web_src/js/components/ActivityHeatmap.vue @@ -1,18 +1,16 @@