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

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
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%, 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);
    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, 50%, 50%, .5);
    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 {
    border: 4px solid hsla(210, 80%, 35%, .5);
    background-color: hsla(210, 80%, 55%, .5);
    background-color: hsla(180, 100%, 55%, .6);
    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);
    50% {
        transform: rotate(180deg) scale(.9);
        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);
        box-shadow: 0 0 0 10px 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

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
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: 0px;
    top: 2px;
    right: 200px;
    background-color: hsla(210, 80%, 80%, .5);
    background-color: hsla(210, 100%, 30%, .1);
    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: 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, 50%, 50%, .5);
    animation: grammalecte-spin-big .5s linear infinite;
    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);
        border-top: 10px solid hsla(210, 100%, 40%, .7);
        border-bottom: 10px solid hsla(210, 100%, 40%, .7);
    }
    70% {
        transform: rotate(180deg) scale(.8);
    50% {
        transform: rotate(180deg) scale(.9);
        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);
        box-shadow: 0 0 0 10px 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);
    }
}