classicy 0.6.50 → 0.6.52

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "module": "./dist/classicy.es.js",
4
4
  "types": "./dist/types/src/index.d.ts",
5
5
  "name": "classicy",
6
- "version": "0.6.50",
6
+ "version": "0.6.52",
7
7
  "repository": {
8
8
  "type": "git",
9
9
  "url": "https://github.com/robbiebyrd/classicy"
@@ -35,7 +35,8 @@
35
35
  "preview": "npm run build && npm link && cd example && npm i && npm link classicy && npm run build && npm run dev"
36
36
  },
37
37
  "files": [
38
- "dist"
38
+ "dist",
39
+ "src/SystemFolder/ControlPanels/AppearanceManager/styles"
39
40
  ],
40
41
  "style": "./dist/classicy.css",
41
42
  "exports": {
@@ -45,7 +46,8 @@
45
46
  "require": "./dist/classicy.umd.js"
46
47
  },
47
48
  "./dist/classicy.css": "./dist/classicy.css",
48
- "./dist/*": "./dist/*"
49
+ "./dist/*": "./dist/*",
50
+ "./scss/*": "./src/SystemFolder/ControlPanels/AppearanceManager/styles/*"
49
51
  },
50
52
  "dependencies": {
51
53
  "@analytics/google-tag-manager": "^0.6.0",
@@ -0,0 +1,186 @@
1
+ @use 'sass:color';
2
+ @use 'sass:string';
3
+ @use 'sass:list';
4
+ @use 'assets';
5
+
6
+ @mixin platinumWindowBoxShadow {
7
+ box-shadow: inset calc(var(--window-border-size) * -1) calc(var(--window-border-size) * -1) var(--color-system-05),
8
+ inset var(--window-border-size) var(--window-border-size) var(--color-window-border-outset),
9
+ var(--window-border-size) var(--window-border-size) 0 0 black;
10
+ }
11
+
12
+ @mixin platinumBoxShadow {
13
+ box-shadow: inset var(--window-border-size) var(--window-border-size) var(--color-system-05),
14
+ var(--window-border-size) var(--window-border-size) var(--color-window-border-outset);
15
+ }
16
+
17
+ @mixin platinumWindowBorder {
18
+ border: var(--window-border-size) solid var(--color-window-border);
19
+ @include platinumWindowBoxShadow;
20
+ }
21
+
22
+ @mixin platinumWindowHeaderBorder {
23
+ border: 1px solid var(--color-system-07);
24
+ border-bottom: 1px solid var(--color-system-05);
25
+ @include platinumWindowBoxShadow;
26
+ box-shadow: inset var(--window-border-size) var(--window-border-size) var(--color-window-border-outset);
27
+ }
28
+
29
+ @mixin platinumWindowHeaderBorderDepressed {
30
+ box-shadow: inset calc(var(--window-border-size) * -1) calc(var(--window-border-size) * -1) var(--color-system-03),
31
+ inset calc(var(--window-border-size) * 1) calc(var(--window-border-size) * 1) var(--color-system-05),
32
+ calc(var(--window-border-size) * 1) calc(var(--window-border-size) * 1) var(--color-system-06);
33
+ border-bottom: calc(var(--window-border-size) * 1) solid black;
34
+ color: var(--color-black);
35
+ }
36
+
37
+ @mixin platinumWindowInnerBoxShadow {
38
+ box-shadow: calc(var(--window-border-size) * -1) calc(var(--window-border-size) * -1) var(--color-system-05),
39
+ calc(var(--window-border-size) * 1) calc(var(--window-border-size) * 1) var(--color-window-border-outset);
40
+ }
41
+
42
+ @mixin platinumWindowInnerBoxShadowOuter {
43
+ box-shadow: calc(var(--window-border-size) * -1) calc(var(--window-border-size) * -1) var(--color-system-05);
44
+ }
45
+
46
+
47
+ @mixin platinumWindowInnerBorder {
48
+ border: var(--window-border-size) solid var(--color-window-border);
49
+ @include platinumWindowInnerBoxShadow;
50
+ }
51
+
52
+ @mixin platinumWindowControlBoxBorder {
53
+ box-shadow: inset var(--window-border-size) var(--window-border-size) 0 0 var(--color-system-03),
54
+ inset calc((var(--window-border-size)) * -1) calc((var(--window-border-size)) * -1) 0 0 var(--color-system-05);
55
+ border: var(--window-border-size) solid black;
56
+ }
57
+
58
+ @mixin platinumWindowControlBox {
59
+ width: calc(var(--window-control-size)) !important;
60
+ height: calc(var(--window-control-size)) !important;
61
+ background: linear-gradient(135deg, var(--color-system-05), var(--color-white) 80%);
62
+
63
+ &:before {
64
+ display: block;
65
+ width: 100%;
66
+ height: 100%;
67
+ background-image: assets.$corner-dither;
68
+ background-repeat: no-repeat;
69
+ background-size: cover;
70
+ mix-blend-mode: luminosity;
71
+ opacity: 0.25;
72
+ content: ' ';
73
+ }
74
+ }
75
+
76
+ @mixin platinumWindowControlBoxDepressable {
77
+ @include platinumWindowControlBox;
78
+ @include platinumWindowControlBoxBorder;
79
+ &:active {
80
+ box-shadow: inset var(--window-border-size) var(--window-border-size) 0 0 var(--color-system-07),
81
+ inset calc(var(--window-border-size) * -1) calc(var(--window-border-size) * -1) 0 0 var(--color-system-05);
82
+ background: linear-gradient(135deg, var(--color-system-06), var(--color-system-05));
83
+ }
84
+ &:after {
85
+ position: relative;
86
+ top: calc((var(--window-control-size) * -1) - var(--window-border-size));
87
+ display: block;
88
+ width: 100%;
89
+ height: 100%;
90
+ background-position: center center;
91
+ background-repeat: no-repeat;
92
+ background-size: contain;
93
+ content: ' ';
94
+ }
95
+ }
96
+
97
+ @mixin platinumWindowUndepressable {
98
+ box-shadow: inset calc(var(--window-border-size) * -1) calc(var(--window-border-size) * -1) var(--color-system-05),
99
+ inset calc(var(--window-border-size) * -2) calc(var(--window-border-size) * -2) var(--color-system-04),
100
+ inset calc(var(--window-border-size) * 1) calc(var(--window-border-size) * 1) var(--color-system-04),
101
+ inset calc(var(--window-border-size) * 2) calc(var(--window-border-size) * 2) var(--color-white);
102
+ background-color: var(--color-system-02);
103
+ border: var(--window-border-size) solid black;
104
+ border-radius: var(--window-padding-size);
105
+ }
106
+
107
+ @mixin platinumWindowDepressable {
108
+ @include platinumWindowUndepressable;
109
+ &:active {
110
+ box-shadow: inset calc(var(--window-border-size) * -1) calc(var(--window-border-size) * -1) var(--color-system-05),
111
+ inset calc(var(--window-border-size) * -2) calc(var(--window-border-size) * -2) var(--color-system-06),
112
+ inset calc(var(--window-border-size) * 1) calc(var(--window-border-size) * 1) var(--color-system-07),
113
+ inset calc(var(--window-border-size) * 2) calc(var(--window-border-size) * 2) var(--color-system-06);
114
+ background-color: var(--color-system-05);
115
+ color: var(--color-white);
116
+ }
117
+
118
+ &:disabled {
119
+ box-shadow: none;
120
+ background-color: var(--color-system-03);
121
+ border-color: var(--color-system-05);
122
+ color: var(--color-system-05);
123
+
124
+ * {
125
+ color: var(--color-system-05);
126
+ }
127
+ }
128
+ }
129
+
130
+ @mixin platinumWindowDepressed {
131
+ border-radius: var(--window-padding-size);
132
+ box-shadow: inset calc(var(--window-border-size) * -1) calc(var(--window-border-size) * -1) var(--color-system-05),
133
+ inset calc(var(--window-border-size) * -2) calc(var(--window-border-size) * -2) var(--color-system-06),
134
+ inset calc(var(--window-border-size) * 1) calc(var(--window-border-size) * 1) var(--color-system-07),
135
+ inset calc(var(--window-border-size) * 2) calc(var(--window-border-size) * 2) var(--color-system-06);
136
+ background-color: var(--color-system-05);
137
+ color: var(--color-white);
138
+ }
139
+
140
+ @mixin platinumDepressableDefault {
141
+ @include platinumWindowDepressable;
142
+ box-shadow: 0 0 0 var(--window-border-size) var(--color-system-04),
143
+ 0 0 0 calc(var(--window-border-size) * 2) var(--color-system-02),
144
+ 0 0 0 calc(var(--window-border-size) * 3) var(--color-black),
145
+ inset calc(var(--window-border-size) * -1) calc(var(--window-border-size) * -1) 0 0 var(--color-system-05),
146
+ inset var(--window-border-size) var(--window-border-size) 0 0 var(--color-system-06);
147
+
148
+ &:active {
149
+ @include platinumDepressableBoxShadowActive;
150
+ }
151
+ }
152
+
153
+ @mixin platinumDepressableBoxShadowActive {
154
+ box-shadow: inset calc(var(--window-border-size) * -1) calc(var(--window-border-size) * -1) var(--color-system-07),
155
+ inset calc(var(--window-border-size) * -2) calc(var(--window-border-size) * -2) var(--color-system-06),
156
+ inset calc(var(--window-border-size) * 1) calc(var(--window-border-size) * 1) var(--color-system-07),
157
+ inset calc(var(--window-border-size) * 2) calc(var(--window-border-size) * 2) var(--color-system-06),
158
+ 0 0 0 var(--window-border-size) var(--color-system-04),
159
+ 0 0 0 calc(var(--window-border-size) * 2) var(--color-black),
160
+ inset calc(var(--window-border-size) * -2) calc(var(--window-border-size) * -2) 0 0 var(--color-system-05),
161
+ inset var(--window-border-size) var(--window-border-size) 0 0 var(--color-system-06);
162
+ }
163
+
164
+ @function encode-color($string) {
165
+ $hex: string.slice(color.ie-hex-str($string), 4);
166
+ $string: string.unquote('#{$hex}');
167
+ $string: '%23' + $string;
168
+ @return $string;
169
+ }
170
+
171
+ @mixin theme-halftone($thisColor, $size: 5%) {
172
+ $thisColor: encode-color($thisColor);
173
+ background-image: url('data:image/svg+xml,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 2.8 2.8" xml:space="preserve"><path fill="' + $thisColor + '" d="M1,1.2H0.5C0.3,1.2,0.2,1.2,0.2,1V0.5c0-0.1,0.1-0.2,0.2-0.2H1c0.1,0,0.2,0.1,0.2,0.2V1C1.2,1.2,1.2,1.2,1,1.2z"/><path fill="' + $thisColor + '" d="M2.3,2.5H1.7c-0.1,0-0.2-0.1-0.2-0.2V1.7c0-0.1,0.1-0.2,0.2-0.2h0.6c0.1,0,0.2,0.1,0.2,0.2v0.6C2.5,2.4,2.4,2.5,2.3,2.5z"/></svg>') !important;
174
+ background-repeat: repeat;
175
+ background-size: $size;
176
+ }
177
+
178
+ @mixin no-select {
179
+ -webkit-user-select: none; /* Safari */
180
+ -ms-user-select: none; /* IE 10 and IE 11 */
181
+ user-select: none; /* Standard syntax */
182
+ }
183
+
184
+ .hidden {
185
+ visibility: hidden;
186
+ }
@@ -0,0 +1,13 @@
1
+ $corner-dither: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA3IDciPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjciIHN0eWxlPSJmaWxsOiMyMzFmMjA7IHN0cm9rZS13aWR0aDowcHg7Ii8+PHBvbHlnb24gcG9pbnRzPSIzIDAgMiAwIDIgMSAxIDEgMSAyIDAgMiAwIDMgMCA0IDEgNCAxIDMgMiAzIDIgMiAzIDIgMyAxIDQgMSA0IDAgMyAwIiBzdHlsZT0iZmlsbDojMmUyZTJlOyBzdHJva2Utd2lkdGg6MHB4OyIvPjxyZWN0IHg9IjYiIHk9IjYiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIHN0eWxlPSJmaWxsOiNmZmY7IHN0cm9rZS13aWR0aDowcHg7Ii8+PHBvbHlnb24gcG9pbnRzPSI1IDAgNCAwIDQgMSAzIDEgMyAyIDIgMiAyIDMgMSAzIDEgNCAwIDQgMCA1IDAgNiAxIDYgMSA1IDIgNSAyIDQgMyA0IDMgMyA0IDMgNCAyIDUgMiA1IDEgNiAxIDYgMCA1IDAiIHN0eWxlPSJmaWxsOiM1YzVjNWM7IHN0cm9rZS13aWR0aDowcHg7Ii8+PHBvbHlnb24gcG9pbnRzPSI2IDAgNiAxIDUgMSA1IDIgNCAyIDQgMyAzIDMgMyA0IDIgNCAyIDUgMSA1IDEgNiAwIDYgMCA3IDEgNyAyIDcgMiA2IDMgNiAzIDUgNCA1IDQgNCA1IDQgNSAzIDYgMyA2IDIgNyAyIDcgMSA3IDAgNiAwIiBzdHlsZT0iZmlsbDojODc4Nzg3OyBzdHJva2Utd2lkdGg6MHB4OyIvPjxwb2x5Z29uIHBvaW50cz0iNiAyIDYgMyA1IDMgNSA0IDQgNCA0IDUgMyA1IDMgNiAyIDYgMiA3IDMgNyA0IDcgNCA2IDUgNiA1IDUgNiA1IDYgNCA3IDQgNyAzIDcgMiA2IDIiIHN0eWxlPSJmaWxsOiNiMWIxYjE7IHN0cm9rZS13aWR0aDowcHg7Ii8+PHBvbHlnb24gcG9pbnRzPSI2IDQgNiA1IDUgNSA1IDYgNCA2IDQgNyA1IDcgNiA3IDYgNiA3IDYgNyA1IDcgNCA2IDQiIHN0eWxlPSJmaWxsOiNkOGQ4ZDc7IHN0cm9rZS13aWR0aDowcHg7Ii8+PC9zdmc+');
2
+ $collapse: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI4LjEuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCAxMCAxMCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMTAgMTA7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHJlY3QgeT0iNiIgd2lkdGg9IjEwIiBoZWlnaHQ9IjEiLz4KPHJlY3QgeT0iNCIgd2lkdGg9IjEwIiBoZWlnaHQ9IjEiLz4KPC9zdmc+Cg==');
3
+ $zoom: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMCAxMCI+PHJlY3QgeT0iNS41IiB3aWR0aD0iNi41IiBoZWlnaHQ9IjEiIHN0eWxlPSJmaWxsOiMyMzFmMjA7IHN0cm9rZS13aWR0aDowcHg7Ii8+PHJlY3QgeD0iNS41IiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSI2LjUiIHN0eWxlPSJmaWxsOiMyMzFmMjA7IHN0cm9rZS13aWR0aDowcHg7Ii8+PC9zdmc+');
4
+ $title-bar-center: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMS41MyAxMiI+PGRlZnM+PHN0eWxlPi5jbHMtMXtmaWxsOiNmZmZ9LmNscy0ye2ZpbGw6Izc4Nzg3OH08L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNLS4yNCAwaDEyLjAxdjFILS4yNHoiIGNsYXNzPSJjbHMtMSIvPjxwYXRoIGQ9Ik0tLjI0IDFoMTIuMDF2MUgtLjI0eiIgY2xhc3M9ImNscy0yIi8+PHBhdGggZD0iTS0uMjQgMmgxMi4wMXYxSC0uMjR6IiBjbGFzcz0iY2xzLTEiLz48cGF0aCBkPSJNLS4yNCAzaDEyLjAxdjFILS4yNHoiIGNsYXNzPSJjbHMtMiIvPjxwYXRoIGQ9Ik0tLjI0IDRoMTIuMDF2MUgtLjI0eiIgY2xhc3M9ImNscy0xIi8+PHBhdGggZD0iTS0uMjQgNWgxMi4wMXYxSC0uMjR6IiBjbGFzcz0iY2xzLTIiLz48cGF0aCBkPSJNLS4yNCA2aDEyLjAxdjFILS4yNHoiIGNsYXNzPSJjbHMtMSIvPjxwYXRoIGQ9Ik0tLjI0IDdoMTIuMDF2MUgtLjI0eiIgY2xhc3M9ImNscy0yIi8+PHBhdGggZD0iTS0uMjQgOGgxMi4wMXYxSC0uMjR6IiBjbGFzcz0iY2xzLTEiLz48cGF0aCBkPSJNLS4yNCA5aDEyLjAxdjFILS4yNHoiIGNsYXNzPSJjbHMtMiIvPjxwYXRoIGQ9Ik0tLjI0IDEwaDEyLjAxdjFILS4yNHoiIGNsYXNzPSJjbHMtMSIvPjxwYXRoIGQ9Ik0tLjI0IDExaDEyLjAxdjFILS4yNHoiIGNsYXNzPSJjbHMtMiIvPjwvc3ZnPg==');
5
+ $title-bar-left: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzIDEyIj48cmVjdCB5PSIwIiB3aWR0aD0iMyIgaGVpZ2h0PSIxIiBzdHlsZT0iZmlsbDojZmZmOyBzdHJva2Utd2lkdGg6MHB4OyIvPjxyZWN0IHg9IjEiIHk9IjEiIHdpZHRoPSIyIiBoZWlnaHQ9IjEiIHN0eWxlPSJmaWxsOiM3ODc4Nzg7IHN0cm9rZS13aWR0aDowcHg7Ii8+PHJlY3QgeT0iMiIgd2lkdGg9IjMiIGhlaWdodD0iMSIgc3R5bGU9ImZpbGw6I2ZmZjsgc3Ryb2tlLXdpZHRoOjBweDsiLz48cmVjdCB4PSIxIiB5PSIzIiB3aWR0aD0iMiIgaGVpZ2h0PSIxIiBzdHlsZT0iZmlsbDojNzg3ODc4OyBzdHJva2Utd2lkdGg6MHB4OyIvPjxyZWN0IHk9IjQiIHdpZHRoPSIzIiBoZWlnaHQ9IjEiIHN0eWxlPSJmaWxsOiNmZmY7IHN0cm9rZS13aWR0aDowcHg7Ii8+PHJlY3QgeD0iMSIgeT0iNSIgd2lkdGg9IjIiIGhlaWdodD0iMSIgc3R5bGU9ImZpbGw6Izc4Nzg3ODsgc3Ryb2tlLXdpZHRoOjBweDsiLz48cmVjdCB5PSI2IiB3aWR0aD0iMyIgaGVpZ2h0PSIxIiBzdHlsZT0iZmlsbDojZmZmOyBzdHJva2Utd2lkdGg6MHB4OyIvPjxyZWN0IHg9IjEiIHk9IjciIHdpZHRoPSIyIiBoZWlnaHQ9IjEiIHN0eWxlPSJmaWxsOiM3ODc4Nzg7IHN0cm9rZS13aWR0aDowcHg7Ii8+PHJlY3QgeT0iOCIgd2lkdGg9IjMiIGhlaWdodD0iMSIgc3R5bGU9ImZpbGw6I2ZmZjsgc3Ryb2tlLXdpZHRoOjBweDsiLz48cmVjdCB4PSIxIiB5PSI5IiB3aWR0aD0iMiIgaGVpZ2h0PSIxIiBzdHlsZT0iZmlsbDojNzg3ODc4OyBzdHJva2Utd2lkdGg6MHB4OyIvPjxyZWN0IHk9IjEwIiB3aWR0aD0iMyIgaGVpZ2h0PSIxIiBzdHlsZT0iZmlsbDojZmZmOyBzdHJva2Utd2lkdGg6MHB4OyIvPjxyZWN0IHg9IjEiIHk9IjExIiB3aWR0aD0iMiIgaGVpZ2h0PSIxIiBzdHlsZT0iZmlsbDojNzg3ODc4OyBzdHJva2Utd2lkdGg6MHB4OyIvPjwvc3ZnPg==');
6
+ $title-bar-right: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzIDEyIj48cmVjdCB5PSIwIiB3aWR0aD0iMiIgaGVpZ2h0PSIxIiBzdHlsZT0iZmlsbDojZmZmOyBzdHJva2Utd2lkdGg6MHB4OyIvPjxyZWN0IHk9IjEiIHdpZHRoPSIzIiBoZWlnaHQ9IjEiIHN0eWxlPSJmaWxsOiM3ODc4Nzg7IHN0cm9rZS13aWR0aDowcHg7Ii8+PHJlY3QgeT0iMiIgd2lkdGg9IjIiIGhlaWdodD0iMSIgc3R5bGU9ImZpbGw6I2ZmZjsgc3Ryb2tlLXdpZHRoOjBweDsiLz48cmVjdCB5PSIzIiB3aWR0aD0iMyIgaGVpZ2h0PSIxIiBzdHlsZT0iZmlsbDojNzg3ODc4OyBzdHJva2Utd2lkdGg6MHB4OyIvPjxyZWN0IHk9IjQiIHdpZHRoPSIyIiBoZWlnaHQ9IjEiIHN0eWxlPSJmaWxsOiNmZmY7IHN0cm9rZS13aWR0aDowcHg7Ii8+PHJlY3QgeT0iNSIgd2lkdGg9IjMiIGhlaWdodD0iMSIgc3R5bGU9ImZpbGw6Izc4Nzg3ODsgc3Ryb2tlLXdpZHRoOjBweDsiLz48cmVjdCB5PSI2IiB3aWR0aD0iMiIgaGVpZ2h0PSIxIiBzdHlsZT0iZmlsbDojZmZmOyBzdHJva2Utd2lkdGg6MHB4OyIvPjxyZWN0IHk9IjciIHdpZHRoPSIzIiBoZWlnaHQ9IjEiIHN0eWxlPSJmaWxsOiM3ODc4Nzg7IHN0cm9rZS13aWR0aDowcHg7Ii8+PHJlY3QgeT0iOCIgd2lkdGg9IjIiIGhlaWdodD0iMSIgc3R5bGU9ImZpbGw6I2ZmZjsgc3Ryb2tlLXdpZHRoOjBweDsiLz48cmVjdCB5PSI5IiB3aWR0aD0iMyIgaGVpZ2h0PSIxIiBzdHlsZT0iZmlsbDojNzg3ODc4OyBzdHJva2Utd2lkdGg6MHB4OyIvPjxyZWN0IHk9IjEwIiB3aWR0aD0iMiIgaGVpZ2h0PSIxIiBzdHlsZT0iZmlsbDojZmZmOyBzdHJva2Utd2lkdGg6MHB4OyIvPjxyZWN0IHk9IjExIiB3aWR0aD0iMyIgaGVpZ2h0PSIxIiBzdHlsZT0iZmlsbDojNzg3ODc4OyBzdHJva2Utd2lkdGg6MHB4OyIvPjwvc3ZnPg==');
7
+ $resizer: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMCAxMCI+PGcgaWQ9Il83RUJ2dW8iPjxyZWN0IHg9IjQuNTUiIHk9IjkuMDkiIHdpZHRoPSIuOTEiIGhlaWdodD0iLjkxIiBzdHlsZT0iZmlsbDojNzk3OTc5OyBzdHJva2Utd2lkdGg6MHB4OyIvPjxyZWN0IHg9IjMuNjQiIHk9IjkuMDkiIHdpZHRoPSIuOTEiIGhlaWdodD0iLjkxIiBzdHlsZT0iZmlsbDojYWJhYmFiOyBzdHJva2Utd2lkdGg6MHB4OyIvPjxyZWN0IHg9IjUuNDUiIHk9IjguMTgiIHdpZHRoPSIuOTEiIGhlaWdodD0iLjkxIiBzdHlsZT0iZmlsbDojNzk3OTc5OyBzdHJva2Utd2lkdGg6MHB4OyIvPjxyZWN0IHg9IjQuNTUiIHk9IjguMTgiIHdpZHRoPSIuOTEiIGhlaWdodD0iLjkxIiBzdHlsZT0iZmlsbDojY2NjOyBzdHJva2Utd2lkdGg6MHB4OyIvPjxyZWN0IHg9IjMuNjQiIHk9IjguMTgiIHdpZHRoPSIuOTEiIGhlaWdodD0iLjkxIiBzdHlsZT0iZmlsbDojZmZmOyBzdHJva2Utd2lkdGg6MHB4OyIvPjxyZWN0IHg9IjYuMzYiIHk9IjcuMjciIHdpZHRoPSIuOTEiIGhlaWdodD0iLjkxIiBzdHlsZT0iZmlsbDojNzk3OTc5OyBzdHJva2Utd2lkdGg6MHB4OyIvPjxyZWN0IHg9IjUuNDUiIHk9IjcuMjciIHdpZHRoPSIuOTEiIGhlaWdodD0iLjkxIiBzdHlsZT0iZmlsbDojY2NjOyBzdHJva2Utd2lkdGg6MHB4OyIvPjxyZWN0IHg9IjQuNTUiIHk9IjcuMjciIHdpZHRoPSIuOTEiIGhlaWdodD0iLjkxIiBzdHlsZT0iZmlsbDojZmZmOyBzdHJva2Utd2lkdGg6MHB4OyIvPjxyZWN0IHg9IjMuNjQiIHk9IjcuMjciIHdpZHRoPSIuOTEiIGhlaWdodD0iLjkxIiBzdHlsZT0iZmlsbDojY2NjOyBzdHJva2Utd2lkdGg6MHB4OyIvPjxyZWN0IHg9IjIuNzMiIHk9IjcuMjciIHdpZHRoPSIuOTEiIGhlaWdodD0iLjkxIiBzdHlsZT0iZmlsbDojNzk3OTc5OyBzdHJva2Utd2lkdGg6MHB4OyIvPjxyZWN0IHg9IjEuODIiIHk9IjcuMjciIHdpZHRoPSIuOTEiIGhlaWdodD0iLjkxIiBzdHlsZT0iZmlsbDojYWJhYmFiOyBzdHJva2Utd2lkdGg6MHB4OyIvPjxyZWN0IHg9IjcuMjciIHk9IjYuMzYiIHdpZHRoPSIuOTEiIGhlaWdodD0iLjkxIiBzdHlsZT0iZmlsbDojNzk3OTc5OyBzdHJva2Utd2lkdGg6MHB4OyIvPjxyZWN0IHg9IjYuMzYiIHk9IjYuMzYiIHdpZHRoPSIuOTEiIGhlaWdodD0iLjkxIiBzdHlsZT0iZmlsbDojY2NjOyBzdHJva2Utd2lkdGg6MHB4OyIvPjxyZWN0IHg9IjUuNDUiIHk9IjYuMzYiIHdpZHRoPSIuOTEiIGhlaWdodD0iLjkxIiBzdHlsZT0iZmlsbDojZmZmOyBzdHJva2Utd2lkdGg6MHB4OyIvPjxyZWN0IHg9IjQuNTUiIHk9IjYuMzYiIHdpZHRoPSIuOTEiIGhlaWdodD0iLjkxIiBzdHlsZT0iZmlsbDojY2NjOyBzdHJva2Utd2lkdGg6MHB4OyIvPjxyZWN0IHg9IjMuNjQiIHk9IjYuMzYiIHdpZHRoPSIuOTEiIGhlaWdodD0iLjkxIiBzdHlsZT0iZmlsbDojNzk3OTc5OyBzdHJva2Utd2lkdGg6MHB4OyIvPjxyZWN0IHg9IjIuNzMiIHk9IjYuMzYiIHdpZHRoPSIuOTEiIGhlaWdodD0iLjkxIiBzdHlsZT0iZmlsbDojY2NjOyBzdHJva2Utd2lkdGg6MHB4OyIvPjxyZWN0IHg9IjEuODIiIHk9IjYuMzYiIHdpZHRoPSIuOTEiIGhlaWdodD0iLjkxIiBzdHlsZT0iZmlsbDojZmZmOyBzdHJva2Utd2lkdGg6MHB4OyIvPjxyZWN0IHg9IjguMTgiIHk9IjUuNDUiIHdpZHRoPSIuOTEiIGhlaWdodD0iLjkxIiBzdHlsZT0iZmlsbDojNzk3OTc5OyBzdHJva2Utd2lkdGg6MHB4OyIvPjxyZWN0IHg9IjcuMjciIHk9IjUuNDUiIHdpZHRoPSIuOTEiIGhlaWdodD0iLjkxIiBzdHlsZT0iZmlsbDojY2NjOyBzdHJva2Utd2lkdGg6MHB4OyIvPjxyZWN0IHg9IjYuMzYiIHk9IjUuNDUiIHdpZHRoPSIuOTEiIGhlaWdodD0iLjkxIiBzdHlsZT0iZmlsbDojZmZmOyBzdHJva2Utd2lkdGg6MHB4OyIvPjxyZWN0IHg9IjUuNDUiIHk9IjUuNDUiIHdpZHRoPSIuOTEiIGhlaWdodD0iLjkxIiBzdHlsZT0iZmlsbDojY2NjOyBzdHJva2Utd2lkdGg6MHB4OyIvPjxyZWN0IHg9IjQuNTUiIHk9IjUuNDUiIHdpZHRoPSIuOTEiIGhlaWdodD0iLjkxIiBzdHlsZT0iZmlsbDojNzk3OTc5OyBzdHJva2Utd2lkdGg6MHB4OyIvPjxyZWN0IHg9IjMuNjQiIHk9IjUuNDUiIHdpZHRoPSIuOTEiIGhlaWdodD0iLjkxIiBzdHlsZT0iZmlsbDojY2NjOyBzdHJva2Utd2lkdGg6MHB4OyIvPjxyZWN0IHg9IjIuNzMiIHk9IjUuNDUiIHdpZHRoPSIuOTEiIGhlaWdodD0iLjkxIiBzdHlsZT0iZmlsbDojZmZmOyBzdHJva2Utd2lkdGg6MHB4OyIvPjxyZWN0IHg9IjEuODIiIHk9IjUuNDUiIHdpZHRoPSIuOTEiIGhlaWdodD0iLjkxIiBzdHlsZT0iZmlsbDojY2NjOyBzdHJva2Utd2lkdGg6MHB4OyIvPjxyZWN0IHg9Ii45MSIgeT0iNS40NSIgd2lkdGg9Ii45MSIgaGVpZ2h0PSIuOTEiIHN0eWxlPSJmaWxsOiM3OTc5Nzk7IHN0cm9rZS13aWR0aDowcHg7Ii8+PHJlY3QgeD0iMCIgeT0iNS40NSIgd2lkdGg9Ii45MSIgaGVpZ2h0PSIuOTEiIHN0eWxlPSJmaWxsOiNhYmFiYWI7IHN0cm9rZS13aWR0aDowcHg7Ii8+PHJlY3QgeD0iOS4wOSIgeT0iNC41NSIgd2lkdGg9Ii45MSIgaGVpZ2h0PSIuOTEiIHN0eWxlPSJmaWxsOiM3OTc5Nzk7IHN0cm9rZS13aWR0aDowcHg7Ii8+PHJlY3QgeD0iOC4xOCIgeT0iNC41NSIgd2lkdGg9Ii45MSIgaGVpZ2h0PSIuOTEiIHN0eWxlPSJmaWxsOiNjY2M7IHN0cm9rZS13aWR0aDowcHg7Ii8+PHJlY3QgeD0iNy4yNyIgeT0iNC41NSIgd2lkdGg9Ii45MSIgaGVpZ2h0PSIuOTEiIHN0eWxlPSJmaWxsOiNmZmY7IHN0cm9rZS13aWR0aDowcHg7Ii8+PHJlY3QgeD0iNi4zNiIgeT0iNC41NSIgd2lkdGg9Ii45MSIgaGVpZ2h0PSIuOTEiIHN0eWxlPSJmaWxsOiNjY2M7IHN0cm9rZS13aWR0aDowcHg7Ii8+PHJlY3QgeD0iNS40NSIgeT0iNC41NSIgd2lkdGg9Ii45MSIgaGVpZ2h0PSIuOTEiIHN0eWxlPSJmaWxsOiM3OTc5Nzk7IHN0cm9rZS13aWR0aDowcHg7Ii8+PHJlY3QgeD0iNC41NSIgeT0iNC41NSIgd2lkdGg9Ii45MSIgaGVpZ2h0PSIuOTEiIHN0eWxlPSJmaWxsOiNjY2M7IHN0cm9rZS13aWR0aDowcHg7Ii8+PHJlY3QgeD0iMy42NCIgeT0iNC41NSIgd2lkdGg9Ii45MSIgaGVpZ2h0PSIuOTEiIHN0eWxlPSJmaWxsOiNmZmY7IHN0cm9rZS13aWR0aDowcHg7Ii8+PHJlY3QgeD0iMi43MyIgeT0iNC41NSIgd2lkdGg9Ii45MSIgaGVpZ2h0PSIuOTEiIHN0eWxlPSJmaWxsOiNjY2M7IHN0cm9rZS13aWR0aDowcHg7Ii8+PHJlY3QgeD0iMS44MiIgeT0iNC41NSIgd2lkdGg9Ii45MSIgaGVpZ2h0PSIuOTEiIHN0eWxlPSJmaWxsOiM3OTc5Nzk7IHN0cm9rZS13aWR0aDowcHg7Ii8+PHJlY3QgeD0iLjkxIiB5PSI0LjU1IiB3aWR0aD0iLjkxIiBoZWlnaHQ9Ii45MSIgc3R5bGU9ImZpbGw6I2NjYzsgc3Ryb2tlLXdpZHRoOjBweDsiLz48cmVjdCB4PSIwIiB5PSI0LjU1IiB3aWR0aD0iLjkxIiBoZWlnaHQ9Ii45MSIgc3R5bGU9ImZpbGw6I2ZmZjsgc3Ryb2tlLXdpZHRoOjBweDsiLz48cmVjdCB4PSI5LjA5IiB5PSIzLjY0IiB3aWR0aD0iLjkxIiBoZWlnaHQ9Ii45MSIgc3R5bGU9ImZpbGw6I2ZmZjsgc3Ryb2tlLXdpZHRoOjBweDsiLz48cmVjdCB4PSI4LjE4IiB5PSIzLjY0IiB3aWR0aD0iLjkxIiBoZWlnaHQ9Ii45MSIgc3R5bGU9ImZpbGw6I2ZmZjsgc3Ryb2tlLXdpZHRoOjBweDsiLz48cmVjdCB4PSI3LjI3IiB5PSIzLjY0IiB3aWR0aD0iLjkxIiBoZWlnaHQ9Ii45MSIgc3R5bGU9ImZpbGw6I2NjYzsgc3Ryb2tlLXdpZHRoOjBweDsiLz48cmVjdCB4PSI2LjM2IiB5PSIzLjY0IiB3aWR0aD0iLjkxIiBoZWlnaHQ9Ii45MSIgc3R5bGU9ImZpbGw6Izc5Nzk3OTsgc3Ryb2tlLXdpZHRoOjBweDsiLz48cmVjdCB4PSI1LjQ1IiB5PSIzLjY0IiB3aWR0aD0iLjkxIiBoZWlnaHQ9Ii45MSIgc3R5bGU9ImZpbGw6I2NjYzsgc3Ryb2tlLXdpZHRoOjBweDsiLz48cmVjdCB4PSI0LjU1IiB5PSIzLjY0IiB3aWR0aD0iLjkxIiBoZWlnaHQ9Ii45MSIgc3R5bGU9ImZpbGw6I2ZmZjsgc3Ryb2tlLXdpZHRoOjBweDsiLz48cmVjdCB4PSIzLjY0IiB5PSIzLjY0IiB3aWR0aD0iLjkxIiBoZWlnaHQ9Ii45MSIgc3R5bGU9ImZpbGw6I2NjYzsgc3Ryb2tlLXdpZHRoOjBweDsiLz48cmVjdCB4PSIyLjczIiB5PSIzLjY0IiB3aWR0aD0iLjkxIiBoZWlnaHQ9Ii45MSIgc3R5bGU9ImZpbGw6Izc5Nzk3OTsgc3Ryb2tlLXdpZHRoOjBweDsiLz48cmVjdCB4PSIxLjgyIiB5PSIzLjY0IiB3aWR0aD0iLjkxIiBoZWlnaHQ9Ii45MSIgc3R5bGU9ImZpbGw6I2NjYzsgc3Ryb2tlLXdpZHRoOjBweDsiLz48cmVjdCB4PSIuOTEiIHk9IjMuNjQiIHdpZHRoPSIuOTEiIGhlaWdodD0iLjkxIiBzdHlsZT0iZmlsbDojZmZmOyBzdHJva2Utd2lkdGg6MHB4OyIvPjxyZWN0IHg9IjcuMjciIHk9IjIuNzMiIHdpZHRoPSIuOTEiIGhlaWdodD0iLjkxIiBzdHlsZT0iZmlsbDojNzk3OTc5OyBzdHJva2Utd2lkdGg6MHB4OyIvPjxyZWN0IHg9IjYuMzYiIHk9IjIuNzMiIHdpZHRoPSIuOTEiIGhlaWdodD0iLjkxIiBzdHlsZT0iZmlsbDojY2NjOyBzdHJva2Utd2lkdGg6MHB4OyIvPjxyZWN0IHg9IjUuNDUiIHk9IjIuNzMiIHdpZHRoPSIuOTEiIGhlaWdodD0iLjkxIiBzdHlsZT0iZmlsbDojZmZmOyBzdHJva2Utd2lkdGg6MHB4OyIvPjxyZWN0IHg9IjQuNTUiIHk9IjIuNzMiIHdpZHRoPSIuOTEiIGhlaWdodD0iLjkxIiBzdHlsZT0iZmlsbDojY2NjOyBzdHJva2Utd2lkdGg6MHB4OyIvPjxyZWN0IHg9IjMuNjQiIHk9IjIuNzMiIHdpZHRoPSIuOTEiIGhlaWdodD0iLjkxIiBzdHlsZT0iZmlsbDojNzk3OTc5OyBzdHJva2Utd2lkdGg6MHB4OyIvPjxyZWN0IHg9IjIuNzMiIHk9IjIuNzMiIHdpZHRoPSIuOTEiIGhlaWdodD0iLjkxIiBzdHlsZT0iZmlsbDojY2NjOyBzdHJva2Utd2lkdGg6MHB4OyIvPjxyZWN0IHg9IjEuODIiIHk9IjIuNzMiIHdpZHRoPSIuOTEiIGhlaWdodD0iLjkxIiBzdHlsZT0iZmlsbDojZmZmOyBzdHJva2Utd2lkdGg6MHB4OyIvPjxyZWN0IHg9IjcuMjciIHk9IjEuODIiIHdpZHRoPSIuOTEiIGhlaWdodD0iLjkxIiBzdHlsZT0iZmlsbDojZmZmOyBzdHJva2Utd2lkdGg6MHB4OyIvPjxyZWN0IHg9IjYuMzYiIHk9IjEuODIiIHdpZHRoPSIuOTEiIGhlaWdodD0iLjkxIiBzdHlsZT0iZmlsbDojZmZmOyBzdHJva2Utd2lkdGg6MHB4OyIvPjxyZWN0IHg9IjUuNDUiIHk9IjEuODIiIHdpZHRoPSIuOTEiIGhlaWdodD0iLjkxIiBzdHlsZT0iZmlsbDojY2NjOyBzdHJva2Utd2lkdGg6MHB4OyIvPjxyZWN0IHg9IjQuNTUiIHk9IjEuODIiIHdpZHRoPSIuOTEiIGhlaWdodD0iLjkxIiBzdHlsZT0iZmlsbDojNzk3OTc5OyBzdHJva2Utd2lkdGg6MHB4OyIvPjxyZWN0IHg9IjMuNjQiIHk9IjEuODIiIHdpZHRoPSIuOTEiIGhlaWdodD0iLjkxIiBzdHlsZT0iZmlsbDojY2NjOyBzdHJva2Utd2lkdGg6MHB4OyIvPjxyZWN0IHg9IjIuNzMiIHk9IjEuODIiIHdpZHRoPSIuOTEiIGhlaWdodD0iLjkxIiBzdHlsZT0iZmlsbDojZmZmOyBzdHJva2Utd2lkdGg6MHB4OyIvPjxyZWN0IHg9IjUuNDUiIHk9Ii45MSIgd2lkdGg9Ii45MSIgaGVpZ2h0PSIuOTEiIHN0eWxlPSJmaWxsOiM3OTc5Nzk7IHN0cm9rZS13aWR0aDowcHg7Ii8+PHJlY3QgeD0iNC41NSIgeT0iLjkxIiB3aWR0aD0iLjkxIiBoZWlnaHQ9Ii45MSIgc3R5bGU9ImZpbGw6I2NjYzsgc3Ryb2tlLXdpZHRoOjBweDsiLz48cmVjdCB4PSIzLjY0IiB5PSIuOTEiIHdpZHRoPSIuOTEiIGhlaWdodD0iLjkxIiBzdHlsZT0iZmlsbDojZmZmOyBzdHJva2Utd2lkdGg6MHB4OyIvPjxyZWN0IHg9IjUuNDUiIHk9IjAiIHdpZHRoPSIuOTEiIGhlaWdodD0iLjkxIiBzdHlsZT0iZmlsbDojZmZmOyBzdHJva2Utd2lkdGg6MHB4OyIvPjxyZWN0IHg9IjQuNTUiIHk9IjAiIHdpZHRoPSIuOTEiIGhlaWdodD0iLjkxIiBzdHlsZT0iZmlsbDojZmZmOyBzdHJva2Utd2lkdGg6MHB4OyIvPjwvZz48L3N2Zz4=');
8
+ $triangle: url("data:image/svg+xml,%3Csvg id='a' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 14'%3E%3Cpolygon points='8 7 0 0 0 14 8 7' stroke-width='0'/%3E%3C/svg%3E");
9
+ $down-arrow: url("data:image/svg+xml,%3Csvg id='a' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 25 30'%3E%3Cpolygon points='12.5 17.21 25 17.21 18.75 23.6 12.5 30 6.25 23.6 0 17.21 12.5 17.21' stroke-width='0'/%3E%3Cpolygon points='12.5 12.79 0 12.79 6.25 6.4 12.5 0 18.75 6.4 25 12.79 12.5 12.79' stroke-width='0'/%3E%3C/svg%3E%0A");
10
+
11
+ $title-bar-center-red: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMi4wMSAxMiI+CiAgPGRlZnM+CiAgICA8c3R5bGU+CiAgICAgIC5jbHMtMSB7CiAgICAgICAgZmlsbDogI2VmOGM4OTsKICAgICAgfQoKICAgICAgLmNscy0yIHsKICAgICAgICBmaWxsOiAjZjlkYWRhOwogICAgICB9CiAgICA8L3N0eWxlPgogIDwvZGVmcz4KICA8cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik0wLDBoMTIuMDF2MUgwVjBaIi8+CiAgPHBhdGggY2xhc3M9ImNscy0yIiBkPSJNMCwxaDEyLjAxdjFIMHYtMVoiLz4KICA8cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik0wLDJoMTIuMDF2MUgwdi0xWiIvPgogIDxwYXRoIGNsYXNzPSJjbHMtMiIgZD0iTTAsM2gxMi4wMXYxSDB2LTFaIi8+CiAgPHBhdGggY2xhc3M9ImNscy0xIiBkPSJNMCw0aDEyLjAxdjFIMHYtMVoiLz4KICA8cGF0aCBjbGFzcz0iY2xzLTIiIGQ9Ik0wLDVoMTIuMDF2MUgwdi0xWiIvPgogIDxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTAsNmgxMi4wMXYxSDB2LTFaIi8+CiAgPHBhdGggY2xhc3M9ImNscy0yIiBkPSJNMCw3aDEyLjAxdjFIMHYtMVoiLz4KICA8cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik0wLDhoMTIuMDF2MUgwdi0xWiIvPgogIDxwYXRoIGNsYXNzPSJjbHMtMiIgZD0iTTAsOWgxMi4wMXYxSDB2LTFaIi8+CiAgPHBhdGggY2xhc3M9ImNscy0xIiBkPSJNMCwxMGgxMi4wMXYxSDB2LTFaIi8+CiAgPHBhdGggY2xhc3M9ImNscy0yIiBkPSJNMCwxMWgxMi4wMXYxSDB2LTFaIi8+Cjwvc3ZnPg==');
12
+ $title-bar-left-red: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzIDEyIj4KICAgIDxyZWN0IHk9IjAiIHdpZHRoPSIzIiBoZWlnaHQ9IjEiIHN0eWxlPSJmaWxsOiNmOWRhZGE7IHN0cm9rZS13aWR0aDowcHg7Ii8+CiAgICA8cmVjdCB4PSIxIiB5PSIxIiB3aWR0aD0iMiIgaGVpZ2h0PSIxIiBzdHlsZT0iZmlsbDojZWY4Yzg5OyBzdHJva2Utd2lkdGg6MHB4OyIvPgogICAgPHJlY3QgeT0iMiIgd2lkdGg9IjMiIGhlaWdodD0iMSIgc3R5bGU9ImZpbGw6I2Y5ZGFkYTsgc3Ryb2tlLXdpZHRoOjBweDsiLz4KICAgIDxyZWN0IHg9IjEiIHk9IjMiIHdpZHRoPSIyIiBoZWlnaHQ9IjEiIHN0eWxlPSJmaWxsOiNlZjhjODk7IHN0cm9rZS13aWR0aDowcHg7Ii8+CiAgICA8cmVjdCB5PSI0IiB3aWR0aD0iMyIgaGVpZ2h0PSIxIiBzdHlsZT0iZmlsbDojZjlkYWRhOyBzdHJva2Utd2lkdGg6MHB4OyIvPgogICAgPHJlY3QgeD0iMSIgeT0iNSIgd2lkdGg9IjIiIGhlaWdodD0iMSIgc3R5bGU9ImZpbGw6I2VmOGM4OTsgc3Ryb2tlLXdpZHRoOjBweDsiLz4KICAgIDxyZWN0IHk9IjYiIHdpZHRoPSIzIiBoZWlnaHQ9IjEiIHN0eWxlPSJmaWxsOiNmOWRhZGE7IHN0cm9rZS13aWR0aDowcHg7Ii8+CiAgICA8cmVjdCB4PSIxIiB5PSI3IiB3aWR0aD0iMiIgaGVpZ2h0PSIxIiBzdHlsZT0iZmlsbDojZWY4Yzg5OyBzdHJva2Utd2lkdGg6MHB4OyIvPgogICAgPHJlY3QgeT0iOCIgd2lkdGg9IjMiIGhlaWdodD0iMSIgc3R5bGU9ImZpbGw6I2Y5ZGFkYTsgc3Ryb2tlLXdpZHRoOjBweDsiLz4KICAgIDxyZWN0IHg9IjEiIHk9IjkiIHdpZHRoPSIyIiBoZWlnaHQ9IjEiIHN0eWxlPSJmaWxsOiNlZjhjODk7IHN0cm9rZS13aWR0aDowcHg7Ii8+CiAgICA8cmVjdCB5PSIxMCIgd2lkdGg9IjMiIGhlaWdodD0iMSIgc3R5bGU9ImZpbGw6I2Y5ZGFkYTsgc3Ryb2tlLXdpZHRoOjBweDsiLz4KICAgIDxyZWN0IHg9IjEiIHk9IjExIiB3aWR0aD0iMiIgaGVpZ2h0PSIxIiBzdHlsZT0iZmlsbDojZWY4Yzg5OyBzdHJva2Utd2lkdGg6MHB4OyIvPgo8L3N2Zz4=');
13
+ $title-bar-right-red: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzIDEyIj4KICAgIDxyZWN0IHk9IjAiIHdpZHRoPSIyIiBoZWlnaHQ9IjEiIHN0eWxlPSJmaWxsOiNmOWRhZGE7IHN0cm9rZS13aWR0aDowcHg7Ii8+CiAgICA8cmVjdCB5PSIxIiB3aWR0aD0iMyIgaGVpZ2h0PSIxIiBzdHlsZT0iZmlsbDojZWY4Yzg5OyBzdHJva2Utd2lkdGg6MHB4OyIvPgogICAgPHJlY3QgeT0iMiIgd2lkdGg9IjIiIGhlaWdodD0iMSIgc3R5bGU9ImZpbGw6I2Y5ZGFkYTsgc3Ryb2tlLXdpZHRoOjBweDsiLz4KICAgIDxyZWN0IHk9IjMiIHdpZHRoPSIzIiBoZWlnaHQ9IjEiIHN0eWxlPSJmaWxsOiNlZjhjODk7IHN0cm9rZS13aWR0aDowcHg7Ii8+CiAgICA8cmVjdCB5PSI0IiB3aWR0aD0iMiIgaGVpZ2h0PSIxIiBzdHlsZT0iZmlsbDojZjlkYWRhOyBzdHJva2Utd2lkdGg6MHB4OyIvPgogICAgPHJlY3QgeT0iNSIgd2lkdGg9IjMiIGhlaWdodD0iMSIgc3R5bGU9ImZpbGw6I2VmOGM4OTsgc3Ryb2tlLXdpZHRoOjBweDsiLz4KICAgIDxyZWN0IHk9IjYiIHdpZHRoPSIyIiBoZWlnaHQ9IjEiIHN0eWxlPSJmaWxsOiNmOWRhZGE7IHN0cm9rZS13aWR0aDowcHg7Ii8+CiAgICA8cmVjdCB5PSI3IiB3aWR0aD0iMyIgaGVpZ2h0PSIxIiBzdHlsZT0iZmlsbDojZWY4Yzg5OyBzdHJva2Utd2lkdGg6MHB4OyIvPgogICAgPHJlY3QgeT0iOCIgd2lkdGg9IjIiIGhlaWdodD0iMSIgc3R5bGU9ImZpbGw6I2Y5ZGFkYTsgc3Ryb2tlLXdpZHRoOjBweDsiLz4KICAgIDxyZWN0IHk9IjkiIHdpZHRoPSIzIiBoZWlnaHQ9IjEiIHN0eWxlPSJmaWxsOiNlZjhjODk7IHN0cm9rZS13aWR0aDowcHg7Ii8+CiAgICA8cmVjdCB5PSIxMCIgd2lkdGg9IjIiIGhlaWdodD0iMSIgc3R5bGU9ImZpbGw6I2Y5ZGFkYTsgc3Ryb2tlLXdpZHRoOjBweDsiLz4KICAgIDxyZWN0IHk9IjExIiB3aWR0aD0iMyIgaGVpZ2h0PSIxIiBzdHlsZT0iZmlsbDojZWY4Yzg5OyBzdHJva2Utd2lkdGg6MHB4OyIvPgo8L3N2Zz4K')