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.

 _drawing.scss

View raw Download
text/plain • 5.55 kiB
ASCII text
        
            
1
// Drawing mixins
2
3
// generic drawing of more complex things
4
5
// shadows
6
@mixin shadow($level) {
7
@if $level==1 {
8
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
9
}
10
@if $level==2 {
11
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
12
}
13
@if $level==3 {
14
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
15
}
16
@if $level==4 {
17
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
18
}
19
@if $level==5 {
20
box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
21
}
22
}
23
24
// entries
25
@mixin entry($t, $fc:$selected_bg_color) {
26
//
27
// Entries drawing function
28
//
29
// $t: entry type
30
// $fc: focus color
31
//
32
// possible $t values:
33
// normal, focus, insensitive, backdrop, backdrop-insensitive;
34
//
35
@if $t==normal {
36
@include shadow(1);
37
background-color: if($fc!=$selected_bg_color, $fc, $base_color);
38
color: if($fc!=$selected_bg_color, $selected_fg_color, $fg_color);
39
}
40
@if $t==focus {
41
@include shadow(2);
42
}
43
@if $t==insensitive {
44
background-color: $insensitive_base_color;
45
color: $insensitive_fg_color;
46
}
47
@else if $t==flat {
48
border-image: -gtk-gradient(radial,
49
center bottom, 0,
50
center bottom, 0.001,
51
to($fc),
52
to(transparent))
53
0 0 0 / 0 0 0px;
54
border-radius: 0;
55
box-shadow: inset 0 -1px if($fc!=$selected_bg_color, $fc, $fill_color);
56
background-color: transparent;
57
color: $fg_color;
58
}
59
@else if $t==flat-focus {
60
border-image: -gtk-gradient(radial,
61
center bottom, 0,
62
center bottom, 0.75,
63
to($fc),
64
to(transparent))
65
0 0 2 / 0 0 2px;
66
box-shadow: inset 0 -1px if($fc!=$selected_bg_color, $fc, $fill_color);
67
}
68
@else if $t==flat-insensitive {
69
box-shadow: inset 0 -1px $fill_color;
70
background-color: transparent;
71
color: $insensitive_fg_color;
72
}
73
@if $t==backdrop {
74
color: $backdrop_fg_color;
75
}
76
@if $t==backdrop-insensitive {
77
color: $backdrop_insensitive_fg_color;
78
}
79
}
80
81
// buttons
82
@mixin button($t, $c:$light_color) {
83
//
84
// Button drawing function
85
//
86
// $t: button type,
87
// $c: base button color for colored* types
88
//
89
// possible $t values:
90
// normal, hover, active, active-hover, insensitive, insensitive-active,
91
// backdrop, backdrop-insensitive, undecorated;
92
//
93
@if $t==normal {
94
@include shadow(1);
95
background-color: $c;
96
background-image: -gtk-gradient(radial,
97
center center, 0,
98
center center, 0.75,
99
to(gtkalpha(currentColor,0)),
100
to(transparent)),
101
linear-gradient(to bottom, gtkalpha(currentColor,0));
102
color: if($c!=$light_color, $selected_fg_color, $fg_color);
103
}
104
@else if $t==flat {
105
outline-offset: -2px;
106
box-shadow: none;
107
background-color: gtkalpha(currentColor,0);
108
color: if($c!=$light_color, $c, $fg_color);
109
}
110
@else if $t==hover {
111
@include shadow(2);
112
background-image: -gtk-gradient(radial,
113
center center, 0,
114
center center, 0.001,
115
to(gtkalpha(currentColor,0)),
116
to(transparent)),
117
linear-gradient(to bottom, gtkalpha(currentColor,0));
118
}
119
@else if $t==flat-hover {
120
outline-color: gtkalpha(currentColor, 0.1);
121
box-shadow: none;
122
background-image: -gtk-gradient(radial,
123
center center, 0,
124
center center, 0.001,
125
to(gtkalpha(currentColor,0)),
126
to(transparent)),
127
linear-gradient(to bottom, gtkalpha(currentColor,0.1));
128
}
129
@else if $t==active {
130
background-image: -gtk-gradient(radial,
131
center center, 0,
132
center center, 0.75,
133
to($fill_color),
134
to(transparent)),
135
linear-gradient(to bottom, gtkalpha(currentColor,0));
136
}
137
@else if $t==flat-active {
138
outline-color: gtkalpha(currentColor, 0);
139
background-image: -gtk-gradient(radial,
140
center center, 0,
141
center center, 0.75,
142
to(gtkalpha(currentColor,0.2)),
143
to(transparent)),
144
linear-gradient(to bottom, gtkalpha(currentColor,0.0));
145
}
146
@else if $t==checked {
147
background-color: $selected_bg_color;
148
color: $selected_fg_color;
149
}
150
@else if $t==insensitive-checked {
151
background-color: gtkalpha(currentColor,0.08);
152
color: $selected_bg_color;
153
}
154
@else if $t==insensitive {
155
box-shadow: none;
156
background-color: gtkalpha(currentColor,0.08);
157
color: $fg_color;
158
// color: gtkalpha(currentColor,0.4);
159
> GtkLabel, GtkImage { color: inherit; }
160
> GtkLabel, GtkImage { opacity: 0.4; }
161
}
162
@else if $t==backdrop {
163
// color: gtkalpha(currentColor,0.8);
164
> GtkLabel, GtkImage { opacity: 0.8; }
165
}
166
@else if $t==backdrop-insensitive {
167
// color: gtkalpha(currentColor,0.8 * 0.4);
168
> GtkLabel, GtkImage { color: inherit; }
169
> GtkLabel, GtkImage { opacity: 0.8 * 0.4; }
170
}
171
}
172
173