A fork of the Materia GTK theme.

Important information: Google announced that, from September 2026, Android devices will require ALL apps to be signed by Google, effectively leading to an iOS situation. Value your right to a computer that does what you want; do not tolerate this monopolistic practice! Contact me if you don't understand why it is bad. Click to learn more.

 _panel.scss

View raw Download
text/plain • 3.24 kiB
ASCII text
        
            
1
/* Top Bar */
2
3
#panel {
4
$background: if($version >= 3.26 and $version <= 3.30, $scrim, $panel);
5
6
transition-duration: $duration-panel;
7
height: $menuitem-size;
8
background-color: $background;
9
font-weight: bold;
10
font-feature-settings: "tnum";
11
12
// spacing between activities, app menu and such
13
#panelLeft,
14
#panelCenter {
15
spacing: 0;
16
}
17
18
// the rounded outset corners
19
.panel-corner {
20
-panel-corner-radius: 0;
21
-panel-corner-background-color: transparent;
22
-panel-corner-border-width: 0;
23
-panel-corner-border-color: transparent;
24
25
&:active, &:overview, &:focus {
26
-panel-corner-border-color: transparent;
27
}
28
}
29
30
// panel menus
31
.panel-button {
32
-natural-hpadding: $panel-button-hpadding;
33
-minimum-hpadding: $panel-button-hpadding / 2;
34
transition-duration: $duration;
35
color: on($background, text2);
36
text-shadow: none;
37
font-weight: bold;
38
39
.system-status-icon,
40
.app-menu-icon > StIcon,
41
.popup-menu-arrow {
42
icon-shadow: none;
43
}
44
45
&:hover {
46
color: on($background);
47
text-shadow: none;
48
49
.system-status-icon,
50
.app-menu-icon > StIcon,
51
.popup-menu-arrow {
52
icon-shadow: none;
53
}
54
}
55
56
&:active, &:overview, &:focus, &:checked {
57
box-shadow: inset 0 -2px on($background);
58
// Trick due to St limitations. It needs a background to draw a box-shadow
59
background-color: rgba($background, .01);
60
color: on($background);
61
62
> .system-status-icon {
63
icon-shadow: none;
64
}
65
}
66
67
// status area icons
68
.system-status-icon {
69
icon-size: 16px;
70
padding: 0 4px;
71
}
72
73
// app menu icon
74
.app-menu-icon {
75
-st-icon-style: symbolic;
76
margin-left: 4px;
77
margin-right: 4px;
78
// dimensions of the icon are hardcoded
79
}
80
}
81
82
.panel-status-indicators-box,
83
.panel-status-menu-box {
84
spacing: 2px;
85
}
86
87
// spacing between power icon and (optional) percentage label
88
.power-status.panel-status-indicators-box {
89
spacing: 0;
90
}
91
92
// indicator for active
93
.screencast-indicator,
94
.remote-access-indicator {
95
color: $warning;
96
}
97
98
// transparent panel on lock & login screens
99
&:overview,
100
&.unlock-screen,
101
&.login-screen,
102
&.lock-screen {
103
background-color: transparent;
104
105
.panel-corner {
106
-panel-corner-radius: 0;
107
-panel-corner-background-color: transparent;
108
-panel-corner-border-color: transparent;
109
}
110
111
.panel-button {
112
color: on(dark, text2);
113
114
&:hover, &:active, &:overview, &:focus, &:checked {
115
color: on(dark);
116
}
117
}
118
}
119
120
@if $version >= 3.26 and $version <= 3.30 {
121
&.solid {
122
transition-duration: $duration-panel;
123
background-color: $panel;
124
125
.panel-corner {
126
-panel-corner-background-color: transparent;
127
}
128
129
.panel-button {
130
color: on($panel, text2);
131
text-shadow: none;
132
133
&:hover, &:active, &:overview, &:focus, &:checked {
134
color: on($panel);
135
}
136
}
137
138
.system-status-icon,
139
.app-menu-icon > StIcon,
140
.popup-menu-arrow {
141
icon-shadow: none;
142
}
143
}
144
}
145
}
146
147
// App Menu
148
#appMenu {
149
spacing: 4px;
150
151
@if $version <= 3.32 {
152
spinner-image: url("process-working.svg");
153
}
154
155
.label-shadow {
156
color: transparent;
157
}
158
}
159