ASCII text
1
/* OVERVIEW */
2
@use "../../../../theme";
4
@use "../../../../theme-color";
5
@use "../../gnome-shell";
6
@use "../../typography";
7
@use "../base/scrollbar";
8
// Same as the ANIMATION_TIME in overview.js
10
$transition-duration: 250ms;
11
$color: theme-color.$system;
13
$on-color: theme-color.$on-system;
14
@if gnome-shell.$version < 40 {
16
$color: transparent;
17
$on-color: theme-color.$on-dark;
18
}
19
@if gnome-shell.$version >= 40 {
21
.controls-manager,
22
.secondary-monitor-workspaces {
23
spacing: 16px;
24
}
25
#overviewGroup {
27
background-color: $color;
28
color: $on-color;
29
StScrollBar {
31
@include scrollbar.color($on-color);
32
}
33
}
34
} @else {
35
#overview {
36
spacing: 24px;
37
background-color: $color;
38
color: $on-color;
39
StScrollBar {
41
@include scrollbar.color($on-color);
42
}
43
}
44
.overview-controls {
46
padding-bottom: 32px;
47
}
48
}
49
@mixin panel {
51
transition-duration: $transition-duration;
52
border: 0;
53
background-color: theme-color.fill($on-color);
54
color: $on-color;
55
}
56
@mixin status-text {
58
@include typography.headline3;
59
color: theme-color.disabled($on-color);
60
}
61
@mixin item {
63
@include _item;
64
&:focus {
66
@include _item-focus;
67
}
68
&:hover,
70
&:selected {
71
@include _item-hover;
72
}
73
&:active,
75
&:checked {
76
@include _item-active;
77
}
78
}
79
@mixin icon {
81
.overview-icon {
82
@include _item;
83
}
84
&:focus {
86
.overview-icon {
87
@include _item-focus;
88
}
89
}
90
&:drop,
92
&:hover,
93
&:selected {
94
.overview-icon {
95
@include _item-hover;
96
}
97
}
98
&:active,
100
&:checked {
101
.overview-icon {
102
@include _item-active;
103
}
104
}
105
}
106
@mixin _item {
108
padding: 6px;
109
border: 0;
110
border-radius: theme.$corner-radius;
111
background-color: transparent;
112
color: inherit;
113
text-align: center;
114
transition-duration: theme.$state-duration;
115
}
116
@mixin _item-focus {
118
border-image: none;
119
background-image: none;
120
background-color: theme-color.focus-overlay($on-color);
121
color: inherit;
122
transition-duration: 0ms;
123
}
124
@mixin _item-hover {
126
border: 0;
127
border-image: none;
128
background-image: none;
129
background-color: theme-color.hover-overlay($on-color);
130
color: inherit;
131
transition-duration: 0ms;
132
}
133
@mixin _item-active {
135
box-shadow: none;
136
background-color: theme-color.pressed-overlay($on-color);
137
color: inherit;
138
transition-duration: theme.$ripple-duration;
139
}
140