quick-settings/data/Indicator.css at 0086e849f773ffc92324c781184234f44374bda9 · elementary/quick-settings · 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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
/*
 * SPDX-License-Identifier: GPL-3.0-or-later
 * SPDX-FileCopyrightText: 2025 elementary, Inc. (https://elementary.io)
 */

quicksettings tattlebox box {
    padding: 0.666rem; /* 6px */
}

quicksettings scalebox,
quicksettings .togglebox {
    padding: 0.666rem; /* 6px */
}

quicksettings scalebox scale {
    margin: 0.666rem 0.666rem 0; /* 6px */
}

quicksettings separator.horizontal {
    margin: 0.333rem 0; /* 3px */
}

quicksettings .image-button.toggle {
    border-radius: 1em;
}

quicksettings .image-button {
    border: none;
    box-shadow: none;
    min-height: 2.1666rem; /* 26px */
    min-width: 2.1666rem; /* 26px */
}

quicksettings .image-button {
    background: alpha(@text_color, 0.1);
}

quicksettings .image-button:checked {
    background: @selected_bg_color;
    color: @selected_fg_color;
}

quicksettings .image-button:disabled {
    background: @insensitive_bg_color;
}

quicksettings .no-padding {
    padding: 0;
}

quicksettings .flat avatar {
    border: none;
    box-shadow: none;
}

quicksettings .color-scheme .toggle image {
    transition: all 600ms cubic-bezier(0.66, 3, 0.64, 1);
}

quicksettings .color-scheme .toggle:checked image {
    -gtk-icon-transform: rotate(180deg);
}

quicksettings .rotation .toggle image.arrow {
    animation: rotation-allow 600ms cubic-bezier(0.4, 0, 0.2, 1) 1;
    opacity: 1;
}

quicksettings .rotation .toggle:checked image.arrow {
    animation: rotation-lock 600ms linear 1;
    opacity: 0.5;
}

quicksettings .rotation .toggle image.lock {
    transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0.5;
}

quicksettings .rotation .toggle:checked image.lock {
    opacity: 1;
}

@keyframes rotation-lock {
    0% {
        opacity: 1;
        -gtk-icon-transform: rotate(0turn);
    }
    10% {
        -gtk-icon-transform: rotate(0.05turn);
        opacity: 0.5;
    }
    40% {
        -gtk-icon-transform: rotate(-0.04turn);
        opacity: 0.5;
    }
    70% {
        -gtk-icon-transform: rotate(0.01turn);
        opacity: 0.5;
    }
    100% {
        -gtk-icon-transform: rotate(0turn);
        opacity: 0.5;
    }
}

@keyframes rotation-allow {
    from {
        opacity: 0.5;
    }
    to {
        -gtk-icon-transform: rotate(1turn);
        opacity: 1;
    }
}