forked from NYANDEV/forgejo
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: <img width="1237" alt="Screenshot 2023-08-22 at 22 18 01" src="https://github.com/go-gitea/gitea/assets/115237/b0d82531-f05e-43c6-9e5b-1bfc268c056d"> webauthn: <img width="894" alt="Screenshot 2023-08-22 at 22 05 05" src="https://github.com/go-gitea/gitea/assets/115237/7b583425-d944-474a-a57a-22a65bbd8b29"> 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): <img width="764" alt="Screenshot 2023-08-22 at 22 18 44" src="https://github.com/go-gitea/gitea/assets/115237/1c7472d6-3e17-4224-a992-d8c0b380cc73"> Also, heatmap container does not resize any more after loading now and previous duplicate id `user-heatmap` is gone. --------- Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
This commit is contained in:
silverwind
GitHub
parent
f626366f53
commit
8b5c081d76
9 changed files with 25 additions and 993 deletions
|
|
@ -598,7 +598,6 @@ overview = Overview
|
||||||
following = Following
|
following = Following
|
||||||
follow = Follow
|
follow = Follow
|
||||||
unfollow = Unfollow
|
unfollow = Unfollow
|
||||||
heatmap.loading = Loading Heatmap…
|
|
||||||
user_bio = Biography
|
user_bio = Biography
|
||||||
disabled_public_activity = This user has disabled the public visibility of the activity.
|
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
|
email_visibility.limited = Your email address is visible to all authenticated users
|
||||||
|
|
|
||||||
|
|
@ -10,8 +10,8 @@
|
||||||
{{template "base/alert" .}}
|
{{template "base/alert" .}}
|
||||||
<p>{{.locale.Tr "webauthn_sign_in"}}</p>
|
<p>{{.locale.Tr "webauthn_sign_in"}}</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="ui attached segment">
|
<div class="ui attached segment gt-df gt-ac gt-jc gt-gap-2 gt-py-3">
|
||||||
<div class="ui active indeterminate inline loader"></div>
|
<div class="is-loading" style="width: 40px; height: 40px"></div>
|
||||||
{{.locale.Tr "webauthn_press_button"}}
|
{{.locale.Tr "webauthn_press_button"}}
|
||||||
</div>
|
</div>
|
||||||
<div class="ui attached segment">
|
<div class="ui attached segment">
|
||||||
|
|
|
||||||
|
|
@ -1,14 +1,10 @@
|
||||||
{{if .HeatmapData}}
|
{{if .HeatmapData}}
|
||||||
<div id="user-heatmap"
|
<div id="user-heatmap" class="is-loading"
|
||||||
data-heatmap-data="{{JsonUtils.EncodeToString .HeatmapData}}"
|
data-heatmap-data="{{JsonUtils.EncodeToString .HeatmapData}}"
|
||||||
data-locale-total-contributions="{{$.locale.Tr "heatmap.number_of_contributions_in_the_last_12_months" ($.locale.PrettyNumber .HeatmapTotalContributions)}}"
|
data-locale-total-contributions="{{$.locale.Tr "heatmap.number_of_contributions_in_the_last_12_months" ($.locale.PrettyNumber .HeatmapTotalContributions)}}"
|
||||||
data-locale-no-contributions="{{.locale.Tr "heatmap.no_contributions"}}"
|
data-locale-no-contributions="{{.locale.Tr "heatmap.no_contributions"}}"
|
||||||
data-locale-more="{{.locale.Tr "heatmap.more"}}"
|
data-locale-more="{{.locale.Tr "heatmap.more"}}"
|
||||||
data-locale-less="{{.locale.Tr "heatmap.less"}}"
|
data-locale-less="{{.locale.Tr "heatmap.less"}}"
|
||||||
>
|
></div>
|
||||||
<div slot="loading">
|
|
||||||
<div class="ui active centered inline indeterminate text loader" id="loading-heatmap">{{.locale.Tr "user.heatmap.loading"}}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="divider"></div>
|
<div class="divider"></div>
|
||||||
{{end}}
|
{{end}}
|
||||||
|
|
|
||||||
|
|
@ -2,7 +2,15 @@
|
||||||
width: 100%;
|
width: 100%;
|
||||||
font-size: 9px;
|
font-size: 9px;
|
||||||
position: relative;
|
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 {
|
#user-heatmap text {
|
||||||
|
|
@ -32,37 +40,15 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 1200px) {
|
@media (max-width: 1200px) {
|
||||||
#user-heatmap {
|
|
||||||
min-height: 105px;
|
|
||||||
}
|
|
||||||
#user-heatmap .total-contributions {
|
#user-heatmap .total-contributions {
|
||||||
left: 21px;
|
left: 21px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 1000px) {
|
@media (max-width: 1000px) {
|
||||||
#user-heatmap {
|
|
||||||
min-height: 80px;
|
|
||||||
}
|
|
||||||
#user-heatmap .total-contributions {
|
#user-heatmap .total-contributions {
|
||||||
font-size: 10px;
|
font-size: 10px;
|
||||||
left: 17px;
|
left: 17px;
|
||||||
bottom: -4px;
|
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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
|
||||||
|
|
@ -58,10 +58,6 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.user.profile #loading-heatmap {
|
|
||||||
margin-bottom: 1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.user.profile .ui.secondary.stackable.pointing.menu {
|
.user.profile .ui.secondary.stackable.pointing.menu {
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
942
web_src/fomantic/build/semantic.css
generated
942
web_src/fomantic/build/semantic.css
generated
|
|
@ -13544,948 +13544,6 @@ ol.ui.suffixed.list li:before,
|
||||||
/*******************************
|
/*******************************
|
||||||
User Variable Overrides
|
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
|
* # Fomantic - Menu
|
||||||
* http://github.com/fomantic/Fomantic-UI/
|
* http://github.com/fomantic/Fomantic-UI/
|
||||||
|
|
|
||||||
|
|
@ -34,7 +34,6 @@
|
||||||
"item",
|
"item",
|
||||||
"label",
|
"label",
|
||||||
"list",
|
"list",
|
||||||
"loader",
|
|
||||||
"menu",
|
"menu",
|
||||||
"message",
|
"message",
|
||||||
"modal",
|
"modal",
|
||||||
|
|
|
||||||
|
|
@ -1,18 +1,16 @@
|
||||||
<template>
|
<template>
|
||||||
<div id="user-heatmap">
|
<div class="total-contributions">
|
||||||
<div class="total-contributions">
|
{{ locale.contributions_in_the_last_12_months }}
|
||||||
{{ locale.contributions_in_the_last_12_months }}
|
|
||||||
</div>
|
|
||||||
<calendar-heatmap
|
|
||||||
:locale="locale"
|
|
||||||
:no-data-text="locale.no_contributions"
|
|
||||||
:tooltip-unit="locale.contributions"
|
|
||||||
:end-date="endDate"
|
|
||||||
:values="values"
|
|
||||||
:range-color="colorRange"
|
|
||||||
@day-click="handleDayClick($event)"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
<calendar-heatmap
|
||||||
|
:locale="locale"
|
||||||
|
:no-data-text="locale.no_contributions"
|
||||||
|
:tooltip-unit="locale.contributions"
|
||||||
|
:end-date="endDate"
|
||||||
|
:values="values"
|
||||||
|
:range-color="colorRange"
|
||||||
|
@day-click="handleDayClick($event)"
|
||||||
|
/>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import {CalendarHeatmap} from 'vue3-calendar-heatmap';
|
import {CalendarHeatmap} from 'vue3-calendar-heatmap';
|
||||||
|
|
|
||||||
|
|
@ -30,8 +30,8 @@ export function initHeatmap() {
|
||||||
};
|
};
|
||||||
|
|
||||||
const View = createApp(ActivityHeatmap, {values, locale});
|
const View = createApp(ActivityHeatmap, {values, locale});
|
||||||
|
|
||||||
View.mount(el);
|
View.mount(el);
|
||||||
|
el.classList.remove('is-loading');
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
console.error('Heatmap failed to load', err);
|
console.error('Heatmap failed to load', err);
|
||||||
el.textContent = 'Heatmap failed to load';
|
el.textContent = 'Heatmap failed to load';
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue