_window-picker.scss
ASCII text
1
/* Window Picker */
2
3
// Window picker
4
.window-picker {
5
// Space between window thumbnails
6
@if $version >= 3.38 {
7
spacing: 8px;
8
} @else {
9
-horizontal-spacing: 16px;
10
-vertical-spacing: 16px;
11
}
12
13
@if $version < 40 {
14
// Padding for container around window thumbnails
15
padding: 0 16px 32px;
16
17
&.external-monitor {
18
padding: 16px;
19
}
20
}
21
}
22
23
@if $version < 40 {
24
// Borders on window thumbnails
25
.window-clone-border {
26
border: 4px solid stroke($on-dark);
27
border-radius: $corner-radius;
28
// For window decorations with round corners we can't match
29
// the exact shape when the window is scaled. So apply a shadow
30
// to fix that case
31
box-shadow: inset 0 0 0 1px stroke($on-dark);
32
}
33
}
34
35
// Window titles
36
.window-caption {
37
padding: 4px 8px;
38
border-radius: $corner-radius;
39
background-color: $scrim;
40
color: $on-scrim;
41
42
@if $version < 40 {
43
spacing: 0;
44
border: 0;
45
font-size: 1em;
46
font-weight: normal;
47
}
48
}
49
50
// Close button
51
.window-close {
52
transition-duration: $duration;
53
height: $medium-size;
54
width: $medium-size;
55
padding: 0;
56
border: 0;
57
border-radius: $medium-size / 2;
58
box-shadow: $shadow-z2;
59
background-color: $error;
60
color: $on-error;
61
62
background-image: url("assets/window-close.svg");
63
background-size: 24px;
64
65
@if $version < 3.38 {
66
-shell-close-overlap: $medium-size / 2;
67
}
68
69
&:hover {
70
box-shadow: $shadow-z4;
71
border-color: transparent;
72
background-color: overlay("hover", $on-error, $on: $error);
73
color: $on-error;
74
75
@if $version < 3.32 {
76
background-image: url("assets/window-close.svg");
77
}
78
}
79
80
&:active {
81
transition-duration: $duration-ripple;
82
box-shadow: $shadow-z8;
83
border-color: transparent;
84
background-color: overlay("pressed", $on-error, $on: $error);
85
color: $on-error;
86
87
@if $version < 3.32 {
88
background-image: url("assets/window-close.svg");
89
}
90
}
91
92
StIcon {
93
icon-size: 24px;
94
color: transparent;
95
}
96
}
97
98
@if $version >= 40 {
99
.workspace-background {
100
// keep in sync with BACKGROUND_CORNER_RADIUS_PIXELS in workspace.js
101
border-radius: 30px;
102
background-color: black;
103
box-shadow: $shadow-z4; // use z4 for the huge card
104
}
105
}
106