| 2371 |
2371 |
|
color: var(--content-secondary);
|
| 2372 |
2372 |
|
margin-bottom: var(--space-5);
|
| 2373 |
2373 |
|
}
|
| 2374 |
|
- |
.oauth-waiting-spinner {
|
|
2374 |
+ |
.oauth-waiting-light {
|
|
2375 |
+ |
display: block;
|
| 2375 |
2376 |
|
margin: 0 auto var(--space-5);
|
| 2376 |
2377 |
|
}
|
| 2377 |
2378 |
|
|
| 4041 |
4042 |
|
}
|
| 4042 |
4043 |
|
|
| 4043 |
4044 |
|
/* Spinner animation */
|
| 4044 |
|
- |
@keyframes spin {
|
| 4045 |
|
- |
0% { transform: rotate(0deg); }
|
| 4046 |
|
- |
100% { transform: rotate(360deg); }
|
|
4045 |
+ |
/* Activity light. A drive light does not sweep, it flickers: hard cuts at
|
|
4046 |
+ |
uneven intervals, which is what reads as work happening rather than a
|
|
4047 |
+ |
timer running. steps(1, end) holds each stop until the next one, so no
|
|
4048 |
+ |
value is ever interpolated and nothing fades. */
|
|
4049 |
+ |
@keyframes activity-flicker {
|
|
4050 |
+ |
0%, 9% { background: var(--action); }
|
|
4051 |
+ |
10%, 21% { background: var(--surface-sunken); }
|
|
4052 |
+ |
22%, 26% { background: var(--action); }
|
|
4053 |
+ |
27%, 43% { background: var(--surface-sunken); }
|
|
4054 |
+ |
44%, 57% { background: var(--action); }
|
|
4055 |
+ |
58%, 62% { background: var(--surface-sunken); }
|
|
4056 |
+ |
63%, 69% { background: var(--action); }
|
|
4057 |
+ |
70%, 100% { background: var(--surface-sunken); }
|
| 4047 |
4058 |
|
}
|
| 4048 |
4059 |
|
|
| 4049 |
|
- |
.spinner {
|
|
4060 |
+ |
/* The lamp sits in a recess, which is why it takes the inset bevel: the
|
|
4061 |
+ |
well is cut into the panel and the lit face sits at the bottom of it. */
|
|
4062 |
+ |
.activity-light {
|
| 4050 |
4063 |
|
display: inline-block;
|
| 4051 |
|
- |
width: 1em;
|
| 4052 |
|
- |
height: 1em;
|
| 4053 |
|
- |
border: 2px solid currentColor;
|
| 4054 |
|
- |
border-top-color: transparent;
|
| 4055 |
|
- |
border-radius: var(--radius-full);
|
| 4056 |
|
- |
animation: spin 0.8s linear infinite;
|
|
4064 |
+ |
width: 0.7em;
|
|
4065 |
+ |
height: 0.7em;
|
|
4066 |
+ |
vertical-align: -0.05em;
|
|
4067 |
+ |
background: var(--surface-sunken);
|
|
4068 |
+ |
border: var(--border-width) solid var(--border);
|
|
4069 |
+ |
border-radius: var(--radius-xs);
|
|
4070 |
+ |
box-shadow: var(--bevel-inset);
|
|
4071 |
+ |
animation: activity-flicker 1.2s steps(1, end) infinite;
|
| 4057 |
4072 |
|
}
|
| 4058 |
4073 |
|
|
| 4059 |
4074 |
|
/* Button loading state */
|
| 4072 |
4087 |
|
position: absolute;
|
| 4073 |
4088 |
|
left: 50%;
|
| 4074 |
4089 |
|
top: 50%;
|
| 4075 |
|
- |
width: 1em;
|
| 4076 |
|
- |
height: 1em;
|
| 4077 |
|
- |
margin-left: -0.5em;
|
| 4078 |
|
- |
margin-top: -0.5em;
|
| 4079 |
|
- |
border: 2px solid currentColor;
|
| 4080 |
|
- |
border-top-color: transparent;
|
| 4081 |
|
- |
border-radius: var(--radius-full);
|
| 4082 |
|
- |
animation: spin 0.8s linear infinite;
|
|
4090 |
+ |
width: 0.7em;
|
|
4091 |
+ |
height: 0.7em;
|
|
4092 |
+ |
margin-left: -0.35em;
|
|
4093 |
+ |
margin-top: -0.35em;
|
|
4094 |
+ |
background: var(--surface-sunken);
|
|
4095 |
+ |
border: var(--border-width) solid var(--border);
|
|
4096 |
+ |
border-radius: var(--radius-xs);
|
|
4097 |
+ |
box-shadow: var(--bevel-inset);
|
|
4098 |
+ |
animation: activity-flicker 1.2s steps(1, end) infinite;
|
| 4083 |
4099 |
|
}
|
| 4084 |
4100 |
|
|
| 4085 |
4101 |
|
.hidden { display: none !important; }
|