gtk-4.0/widgets/_granite.scss 3.2 K raw
1
/************
2
 * Popovers *
3
 ************/
4
5
GraniteWidgetsPopOver {
6
  
7
  border: 1px solid $base_color;
8
  background: $base_color;
9
  color: $fg_color;
10
11
  .button {
12
    background-image: none;
13
    background: none;
14
    border: none;
15
16
    &:active,
17
    &:active:hover, {
18
      color: $selected_bg_color;
19
    }
20
  }
21
22
  > .frame {
23
    border:none;
24
  }
25
26
  .sidebar.view {
27
    border: none;
28
    background: none;
29
  }
30
}
31
32
GraniteWidgetsStaticNotebook .frame {
33
  border: none;
34
}
35
36
.popover_bg {
37
  background-color: $base_color;
38
  background-image: none;
39
  border: 1px solid $base_color;
40
  color: $fg_color;
41
}
42
43
44
/***********
45
 * Welcome *
46
 **********/
47
48
GraniteWidgetsWelcome {
49
  background-color: $base_color;
50
51
  GtkLabel {
52
    color: $fg_color;
53
  }
54
55
  .h1,.h3 {
56
    color: transparentize($fg_color, 0.2);
57
  }
58
}
59
60
/**************
61
* Source List *
62
***************/
63
64
.source-list {
65
66
  background-color: $bg_color;
67
  border: solid $borders_color;
68
  color: $fg_color;
69
  border-right-width: 1px;
70
71
  &:backdrop {}
72
73
  .category-expander {
74
    color: transparent;
75
  }
76
77
  .badge {
78
    background-image: none;
79
    background-color: transparentize(black, 0.6);
80
    color: $bg_color;
81
    border-radius: 10px;
82
    padding: 0 6px;
83
    margin: 0 3px;
84
    border-width: 0;
85
86
    &:selected:backdrop,
87
    &:selected:hover:backdrop {
88
      background-color: transparentize(black, 0.8);
89
      color: darken($bg_color, 5%);
90
    }
91
  }
92
93
  row,
94
  .list-row {
95
    border:none;
96
    padding: 0;
97
98
    > GtkLabel,
99
    > label {
100
      padding-left: 6px;
101
      padding-right: 6px;
102
    }
103
  }
104
}
105
106
107
/**************
108
* Text Styles *
109
**************/
110
111
.h1 {
112
  font-size: 24px;
113
}
114
115
.h2 {
116
  font-weight: 300;
117
  font-size: 18px;
118
}
119
120
.h3 {
121
  font-size: 11px;
122
}
123
124
.h4,
125
.category-label {
126
  font-size: 12px;
127
  padding: 6px;
128
  color: transparentize($fg_color, 0.7);
129
  font-weight: bold;
130
  text-shadow: 0 1px transparentize(white,0.8);
131
}
132
133
134
/**************
135
* Storage Bar *
136
**************/
137
.storage-bar {
138
139
  .trough {
140
    border: none;
141
    box-shadow:0 1px 0 0 $bottom_highlight;
142
    background-image: none;
143
    background-color: transparent;
144
    padding: 8px 6px;
145
  }
146
147
  .fill-block {
148
    background-color: $yellow;
149
    border:none;
150
    box-shadow: inset 0 1px 0 0 transparentize(black, 0.9), inset 0 -1px 0 0 transparentize(black, 0.9);
151
152
    transition: all 200ms ease-in-out;
153
154
    padding: 8px 6px;
155
  
156
    &:first-child {
157
      border-top-left-radius: 4px;
158
      border-bottom-left-radius: 4px;
159
      border-left-width: 1px;
160
      box-shadow: inset 0 1px 0 0 transparentize(black, 0.9),
161
                  inset 1px 0 0 transparentize(black, 0.9),
162
                  inset 0 -1px 0 0 transparentize(black, 0.9);
163
    }
164
    
165
    &:last-child {
166
      border-top-right-radius: 4px;
167
      border-bottom-right-radius: 4px;
168
      box-shadow: inset 0 1px 0 0 transparentize(black, 0.9),
169
                  inset -1px 0 0 transparentize(black, 0.9),
170
                  inset 0 -1px 0 0 transparentize(black, 0.9);
171
    }
172
173
    &.empty-block {
174
      background-color: $base_color;
175
    }
176
    
177
    &.app {
178
      background-color: $blue;
179
    }
180
181
    &.audio {
182
      background-color: $orange;
183
    }
184
185
    &.photo {
186
      background-color: $red;
187
    }
188
189
    &.video {
190
      background-color: $purple;
191
    }
192
193
    .legend {
194
      padding: 12px;
195
      border-radius: 4px;
196
    }
197
  }
198
}