1@import 'definitions';
2
3// HdyActionRow
4
5row {
6  label.subtitle {
7    font-size: smaller;
8    opacity: 0.55;
9    text-shadow: none;
10  }
11
12  > box.header {
13    margin-left: 12px;
14    margin-right: 12px;
15    min-height: 50px;
16
17    > box.title {
18      margin-top: 8px;
19      margin-bottom: 8px;
20    }
21  }
22}
23
24// HdyExpanderRow
25
26row.expander {
27  // Drop transparent background on expander rows to let nested rows handle it,
28  // avoiding double highlights.
29  background-color: transparent;
30
31  list.nested > row {
32    background-color: hdyalpha($bg_color, 0.5);
33    border-color: hdyalpha($borders_color, 0.7);
34    border-style: solid;
35    border-width: 1px 0px 0px 0px;
36  }
37
38  // HdyExpanderRow arrow rotation
39
40  image.expander-row-arrow {
41    transition: 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
42  }
43
44  &:checked image.expander-row-arrow {
45    -gtk-icon-transform: rotate(0turn);
46  }
47
48  &:not(:checked) image.expander-row-arrow {
49    opacity: 0.55;
50    text-shadow: none;
51
52    &:dir(ltr) {
53      -gtk-icon-transform: rotate(-0.25turn);
54    }
55
56    &:dir(rtl) {
57      -gtk-icon-transform: rotate(0.25turn);
58    }
59  }
60
61  &:checked image.expander-row-arrow:not(:disabled) {
62    color: $selected_bg_color;
63  }
64
65  & image.expander-row-arrow:disabled {
66    color: $insensitive_fg_color;
67  }
68}
69
70// Shadows
71
72flap,
73deck,
74leaflet {
75  > dimming {
76    background: $leaflet_dimming;
77  }
78
79  > border {
80    min-width: 1px;
81    min-height: 1px;
82    background: $leaflet_border;
83  }
84
85  > shadow {
86    min-width: 56px;
87    min-height: 56px;
88
89    &.left  { @include background-shadow(to right); }
90    &.right { @include background-shadow(to left); }
91    &.up    { @include background-shadow(to bottom); }
92    &.down  { @include background-shadow(to top); }
93  }
94
95  > outline {
96    min-width: 1px;
97    min-height: 1px;
98    background: $leaflet_outline;
99  }
100}
101
102// Avatar
103
104avatar {
105  border-radius: 9999px;
106  -gtk-outline-radius: 9999px;
107  font-weight: bold;
108
109  // The list of colors to generate avatars.
110  // Each avatar color is represented by a font color, a gradient start color and a gradient stop color.
111  // There are 8 different colors for avtars in the list if you change the number of them you
112  // need to update the NUMBER_OF_COLORS in src/hdy-avatar.c.
113  // The 2D list has this form: ((font-color, gradient-top-color, gradient-bottom-color)).
114  $avatarcolorlist: (
115   (#cfe1f5, #83b6ec, #337fdc), // blue
116   (#caeaf2, #7ad9f1, #0f9ac8), // cyan
117   (#cef8d8, #8de6b1, #29ae74), // green
118   (#e6f9d7, #b5e98a, #6ab85b), // lime
119   (#f9f4e1, #f8e359, #d29d09), // yellow
120   (#ffead1, #ffcb62, #d68400), // gold
121   (#ffe5c5, #ffa95a, #ed5b00), // orange
122   (#f8d2ce, #f78773, #e62d42), // raspberry
123   (#fac7de, #e973ab, #e33b6a), // magenta
124   (#e7c2e8, #cb78d4, #9945b5), // purple
125   (#d5d2f5, #9e91e8, #7a59ca), // violet
126   (#f2eade, #e3cf9c, #b08952), // beige
127   (#e5d6ca, #be916d, #785336), // brown
128   (#d8d7d3, #c0bfbc, #6e6d71), // gray
129  );
130
131  @for $i from 1 through length($avatarcolorlist) {
132    &.color#{$i} {
133      $avatarcolor: nth($avatarcolorlist, $i);
134      background-image: linear-gradient(nth($avatarcolor, 2), nth($avatarcolor, 3));
135      color: nth($avatarcolor, 1);
136    }
137  }
138
139  &.contrasted { color: #fff; }
140
141  &.image { background: none; }
142}
143
144// HdyViewSwitcherTitle
145
146viewswitchertitle viewswitcher {
147  margin-left: 12px;
148  margin-right: 12px;
149}
150
151// HdyStatusPage
152
153statuspage > scrolledwindow > viewport > box {
154  margin: 36px 12px;
155
156  > clamp {
157    &:not(:last-child) > box {
158      margin-bottom: 36px;
159    }
160
161    > box {
162      > .icon:not(:last-child) {
163        margin-bottom: 36px;
164      }
165
166      > .title:not(:last-child) {
167        margin-bottom: 12px;
168      }
169    }
170  }
171}
172
173// Preferences
174
175window.preferences > deck > deck > box > stack > stack > scrolledwindow > viewport > clamp,
176preferencespage > scrolledwindow > viewport > clamp {
177  margin: 0 12px;
178
179  transition: margin-bottom 200ms ease;
180
181  > list,
182  > box > preferencesgroup {
183    transition: margin-top 200ms ease;
184  }
185
186  $sizes: ("small": 18px, "medium": 24px, "large": 30px);
187
188  @each $name, $size in $sizes {
189    &.#{$name} {
190      margin-bottom: $size;
191
192      > list,
193      > box > preferencesgroup { margin-top: $size; }
194    }
195  }
196}
197
198preferencesgroup > box {
199  // Add space between the description and the title.
200  > label:not(:first-child) {
201    margin-top: 6px;
202  }
203
204  // Add space between the box and the labels.
205  > box:not(:first-child) {
206    margin-top: 12px;
207  }
208}
209
210tabbar .tab-indicator:not(.clickable) {
211  background: none;
212  box-shadow: none;
213  border-color: transparent;
214}
215