teaching-dev/packages/tdev/page-read-check/PageReadCheck/styles.module.scss at 3b8e84bebc988e66ac077614668e0a7a6ee7b35c · GBSL-Informatik/teaching-dev · GitHub

1
2
3
4
5
6
7
8
9
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
.pageReadCheck {
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: var(--ifm-global-radius);
    .status {
        margin-left: 240px;
        min-width: 4em;
        display: flex;
        gap: 8px;
        align-items: center;
        justify-content: flex-end;
        .minReadTime {
            border-top-left-radius: 0;
            border-top-right-radius: 0;
        }
    }
    @keyframes flash {
        0%,
        100% {
            opacity: 1;
        }
        50% {
            opacity: 0.7;
        }
    }

    @keyframes shake {
        0%,
        100% {
            transform: translateX(0);
        }
        10%,
        30%,
        50%,
        70%,
        90% {
            transform: translateX(-5px);
        }
        20%,
        40%,
        60%,
        80% {
            transform: translateX(5px);
        }
    }
    &.animate {
        animation:
            flash 1s normal,
            shake 1.5s normal;
        transform-origin: center;
    }
}