Grammalecte  Check-in [0ce3ed0d3c]

Overview
Comment:[fx] ui: new spinners
Downloads: Tarball | ZIP archive | SQL archive
Timelines: family | ancestors | descendants | both | fx | multid
Files: files | file ages | folders
SHA3-256: 0ce3ed0d3c3acb8b1e718a126657ac810a3573909a080a86e163cf3ce976b138
User & Date: olr on 2018-03-20 20:54:40
Other Links: branch diff | manifest | tags
Context
2018-03-21
07:48
[fx] lexicon editor: deal with empty dictionary check-in: 019062699a user: olr tags: fx, multid
2018-03-20
20:54
[fx] ui: new spinners check-in: 0ce3ed0d3c user: olr tags: fx, multid
19:55
[graphspell] code clarification check-in: 3cb01f1bc2 user: olr tags: graphspell, multid
Changes
Hide Diffs Unified Diffs Ignore Whitespace Patch

Modified gc_lang/fr/webext/content_scripts/menu.css from [204af6f2e6] to [60c7b45fe2].

︙︙
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

    all: initial;
    position: absolute;
    box-sizing: border-box;
    display: none;
    margin: -8px 0 0 -8px;
    width: 16px;
    height: 16px;
    background-color: hsla(210, 80%, 80%, .5);
    border: 4px solid hsla(210, 80%, 60%, .5);
    border-top: 4px solid hsla(210, 100%, 40%, .7);
    border-bottom: 4px solid hsla(210, 100%, 40%, .7);
    border-radius: 50%;
    text-align: center;
    cursor: pointer;
    box-shadow: 0 0 0 0 hsla(210, 50%, 50%, .5);
    /*z-index: 2147483640; /* maximum is 2147483647: https://stackoverflow.com/questions/491052/minimum-and-maximum-value-of-z-index */
    animation: grammalecte-spin 2s ease 1;
}
.grammalecte_menu_main_button:hover {
    border: 4px solid hsla(210, 80%, 35%, .5);
    background-color: hsla(210, 80%, 55%, .5);
    animation: grammalecte-spin .5s linear infinite;
}

@keyframes grammalecte-spin {
    0% {
        transform: rotate(0deg) scale(1);
        border-top: 4px solid hsla(210, 100%, 40%, .7);
        border-bottom: 4px solid hsla(210, 100%, 40%, .7);
    }
    70% {
        transform: rotate(180deg) scale(.8);
        border-top: 4px solid hsla(0, 100%, 40%, .7);
        border-bottom: 4px solid hsla(0, 100%, 40%, .7);
        box-shadow: 0 0 0 20px hsla(210, 50%, 50%, 0);
    }
    100% {
        transform: rotate(360deg) scale(1);
        border-top: 4px solid hsla(210, 100%, 40%, .7);
        border-bottom: 4px solid hsla(210, 100%, 40%, .7);
        box-shadow: 0 0 0 0 hsla(210, 50%, 50%, 0);
    }
}


/*
    Menu








|
|
|
|



|




<
|






<
<

|
|
<
<
|



<
<








10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

29
30
31
32
33
34
35


36
37
38


39
40
41
42


43
44
45
46
47
48
49

    all: initial;
    position: absolute;
    box-sizing: border-box;
    display: none;
    margin: -8px 0 0 -8px;
    width: 16px;
    height: 16px;
    background-color: hsla(210, 80%, 40%, .2);
    border: 4px solid hsla(210, 80%, 30%, .5);
    border-top: 4px solid hsla(210, 100%, 70%, .9);
    border-bottom: 4px solid hsla(210, 100%, 70%, .9);
    border-radius: 50%;
    text-align: center;
    cursor: pointer;
    box-shadow: 0 0 0 0 hsla(210, 80%, 50%, .5);
    /*z-index: 2147483640; /* maximum is 2147483647: https://stackoverflow.com/questions/491052/minimum-and-maximum-value-of-z-index */
    animation: grammalecte-spin 2s ease 1;
}
.grammalecte_menu_main_button:hover {

    background-color: hsla(180, 100%, 55%, .6);
    animation: grammalecte-spin .5s linear infinite;
}

@keyframes grammalecte-spin {
    0% {
        transform: rotate(0deg) scale(1);


    }
    50% {
        transform: rotate(180deg) scale(.9);


        box-shadow: 0 0 0 10px hsla(210, 50%, 50%, 0);
    }
    100% {
        transform: rotate(360deg) scale(1);


        box-shadow: 0 0 0 0 hsla(210, 50%, 50%, 0);
    }
}


/*
    Menu
︙︙

Modified gc_lang/fr/webext/content_scripts/panel.css from [84bdb6c793] to [df7481e8bd].

︙︙
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161

*/
.grammalecte_spinner {
    visibility: hidden;
    box-sizing: border-box;
    width: 40px;
    height: 40px;
    position: absolute;
    top: 0px;
    right: 200px;
    background-color: hsla(210, 80%, 80%, .5);
    border: 10px solid hsla(210, 80%, 60%, .5);
    border-top: 10px solid hsla(210, 100%, 40%, .7);
    border-bottom: 10px solid hsla(210, 100%, 40%, .7);
    border-radius: 50%;
    text-align: center;
    cursor: pointer;
    box-shadow: 0 0 0 0 hsla(210, 50%, 50%, .5);
    animation: grammalecte-spin-big .5s linear infinite;
}

@keyframes grammalecte-spin-big {
    0% {
        transform: rotate(0deg) scale(1);
        border-top: 10px solid hsla(210, 100%, 40%, .7);
        border-bottom: 10px solid hsla(210, 100%, 40%, .7);
    }
    70% {
        transform: rotate(180deg) scale(.8);
        border-top: 10px solid hsla(0, 100%, 40%, .7);
        border-bottom: 10px solid hsla(0, 100%, 40%, .7);
        box-shadow: 0 0 0 20px hsla(210, 50%, 50%, 0);
    }
    100% {
        transform: rotate(360deg) scale(1);
        border-top: 10px solid hsla(210, 100%, 40%, .7);
        border-bottom: 10px solid hsla(210, 100%, 40%, .7);
        box-shadow: 0 0 0 0 hsla(210, 50%, 50%, 0);
    }
}








|

|
<
|
|



|
|





<
<

|
|
<
<
|



<
<




123
124
125
126
127
128
129
130
131
132

133
134
135
136
137
138
139
140
141
142
143
144


145
146
147


148
149
150
151


152
153
154

*/
.grammalecte_spinner {
    visibility: hidden;
    box-sizing: border-box;
    width: 40px;
    height: 40px;
    position: absolute;
    top: 2px;
    right: 200px;
    background-color: hsla(210, 100%, 30%, .1);

    border: 3px solid hsla(210, 100%, 30%, .1);
    border-top: 3px solid hsla(210, 100%, 50%, .8);
    border-radius: 50%;
    text-align: center;
    cursor: pointer;
    box-shadow: 0 0 0 0 hsla(210, 80%, 50%, .5);
    animation: grammalecte-spin-big 2s linear infinite;
}

@keyframes grammalecte-spin-big {
    0% {
        transform: rotate(0deg) scale(1);


    }
    50% {
        transform: rotate(180deg) scale(.9);


        box-shadow: 0 0 0 10px hsla(210, 50%, 50%, 0);
    }
    100% {
        transform: rotate(360deg) scale(1);


        box-shadow: 0 0 0 0 hsla(210, 50%, 50%, 0);
    }
}

Fossil 2.24 [8be0372c10] 2024-04-23 13:25:26
This page was generated in about 0.005s