A fork of the Materia GTK theme.

By using this site, you agree to have cookies stored on your device, strictly for functional purposes, such as storing your session and preferences.

Dismiss

 _extends.scss

View raw Download
text/plain • 3.84 kiB
ASCII text
        
            
1
@use "../../theme";
2
@use "../../theme-color";
3
@use "../../st-theme";
4
@use "../../gnome-shell/sass/drawing";
5
@use "../../gnome-shell/sass/typography";
6
7
%button-shared {
8
@include drawing.button(normal);
9
@include typography.button;
10
11
min-height: theme.$medium-size;
12
padding: 0 16px;
13
border-radius: theme.$corner-radius;
14
&:focus { @include drawing.button(focus); }
15
&:hover, &:checked { @include drawing.button(hover); }
16
&:active { @include drawing.button(active);}
17
&:insensitive { @include drawing.button(insensitive);}
18
}
19
%icon-button-shared {
20
@include drawing.button(normal);
21
22
min-height: theme.$medium-size;
23
min-width: theme.$medium-size;
24
padding: 6px;
25
border-radius: theme.$corner-radius;
26
&:focus { @include drawing.button(focus); }
27
&:hover, &:checked { @include drawing.button(hover); }
28
&:active { @include drawing.button(active);}
29
&:insensitive { @include drawing.button(insensitive);}
30
}
31
%slider-shared {
32
height: 20px;
33
color: theme-color.$primary;
34
-slider-height: 2px;
35
-slider-background-color: theme-color.stroke(theme-color.$on-surface); //background of the trough
36
-slider-border-color: transparent; //trough border color
37
-slider-active-background-color: theme-color.$primary; //active trough fill
38
-slider-active-border-color: transparent; //active trough border
39
-slider-border-width: 0;
40
-slider-handle-radius: 6px;
41
}
42
%separator-shared {
43
-gradient-height: 1px;
44
-gradient-start: theme-color.divider(theme-color.$on-surface);
45
-gradient-end: theme-color.divider(theme-color.$on-surface);
46
-margin-horizontal: 4px;
47
height: 1.5em;
48
}
49
%dialog-entry-shared {
50
@include drawing.entry(normal);
51
52
width: 250px;
53
min-height: theme.$medium-size;
54
padding: 0 8px;
55
border-radius: theme.$corner-radius theme.$corner-radius 0 0;
56
color: theme-color.$on-surface;
57
caret-color: theme-color.$on-surface;
58
selection-background-color: theme-color.$selected-overlay;
59
selected-color: theme-color.$on-surface;
60
&:focus {
61
@include drawing.entry(focus);
62
63
padding: 0 8px;
64
border-width: 0;
65
color: theme-color.$on-surface;
66
}
67
}
68
%desklet-shared {
69
color: theme-color.$on-surface;
70
border: none;
71
padding: 12px;
72
box-shadow: theme.$shadow-z8;
73
}
74
%calendar-shared {
75
width: 16px;
76
height: 16px;
77
border-radius: 999px;
78
transition-duration: st-theme.$duration;
79
&:active { background-color: theme-color.stroke(theme-color.$on-surface);}
80
}
81
%menu-shared {
82
background-color: theme-color.$surface-z8;
83
border-radius: theme.$corner-radius;
84
color: theme-color.$on-surface;
85
box-shadow: theme.$shadow-z4;
86
}
87
%menu-button-label-shared {
88
&:ltr {
89
padding-left: 4px;
90
}
91
&:rtl {
92
padding-right: 4px;
93
}
94
}
95
%dialogs-subject-shared {
96
font-weight: bold;
97
color: theme-color.$on-surface;
98
padding-top: 10px;
99
padding-left: 17px;
100
padding-bottom: 6px;
101
}
102
%dialogs-subject-rtl-shared {
103
padding-left: 0;
104
padding-right: 17px;
105
}
106
%dialogs-description-shared {
107
color: theme-color.$on-surface;
108
padding-left: 17px;
109
width: 28em;
110
}
111
%check-box-shared {
112
width: 24px;
113
height: 24px;
114
padding: (theme.$medium-size - 24px) / 2;
115
border-radius: 100px;
116
background-image: url(assets/checkbox-off.svg);
117
}
118
%radiobutton-shared {
119
width: 20px;
120
height: 20px;
121
padding: (theme.$medium-size - 20px) / 2;
122
border-radius: 100px;
123
background-image: url(assets/radiobutton-off.svg);
124
}
125
%tile-shared {
126
background-color: theme-color.$scrim-alt;
127
border: 2px solid theme-color.divider(theme-color.$on-surface);
128
}
129
%tile-shared-snap {
130
background-color: theme-color.$scrim-alt;
131
border: 2px solid theme-color.$primary;
132
}
133
%osd-panel-shared {
134
color: theme-color.$on-surface;
135
background-color: theme-color.$surface-z8;
136
border: none;
137
border-radius: theme.$corner-radius;
138
padding: 12px;
139
box-shadow: theme.$shadow-z8;
140
}
141
%osd-info-workspace-shared {
142
@include typography.headline6;
143
@extend %osd-panel-shared;
144
145
text-align: center;
146
padding: 8px 10px;
147
}
148