1/*
2  This file is part of RawTherapee.
3
4  Copyright (c) 2016-2019 TooWaBoo
5  Version 3.06
6
7  RawTherapee is free software: you can redistribute it and/or modify
8  it under the terms of the GNU General Public License as published by
9  the Free Software Foundation, either version 3 of the License, or
10  (at your option) any later version.
11
12  RawTherapee is distributed in the hope that it will be useful,
13  but WITHOUT ANY WARRANTY; without even the implied warranty of
14  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
15  GNU General Public License for more details.
16
17  You should have received a copy of the GNU General Public License
18  along with RawTherapee.  If not, see <http://www.gnu.org/licenses/>.
19*/
20
21/*** Change me *** rgb(red,green,blue) *** allowed values from 0 to 255 for each color ***/
22
23@define-color accent-color rgb(35,99,166);              /*** Active color for Lists, Menu, Borders ... * Default: rgb(35,99,166) ***/
24@define-color text-hl-color rgb(210,210,210);           /*** Active text color * Default: rgb(210,210,210) ***/
25
26@define-color bg-highlighted-text-color rgb(35,99,166); /*** Highlighted text color background* Default: rgb(35,99,166) ***/
27@define-color highlighted-text-color rgb(210,210,210);  /*** Highlighted text color * Default: rgb(210,210,210) ***/
28
29@define-color bg-image rgb(75,75,75);                   /*** Image area & File Browser background * Default: rgb(70,70,70) ***/
30@define-color bg-image2 rgb(90,90,90);             /*** Thumbnail background ***/
31
32@define-color accent-color2 rgb(35,99,166);             /*** Scale, Progressbar, Scrollbar, Tabs * Default: rgb(35,99,166) ***/
33@define-color accent-color4 rgb(115,115,115);           /*** Slider knob * Default: rgb(115,115,115) ***/
34
35@define-color accent-color3 rgb(35,99,166);             /*** Selected thumbnail background color * Default: rgb(35,99,166) ***/
36@define-color text-hl-color3 rgb(210,210,210);          /*** Selected thumbnail text color * Default: rgb(210,210,210) ***/
37
38/*** Change me end *****************************************************************************/
39
40@define-color bg-light-grey rgb(95,95,95);
41@define-color bg-grey rgb(75,75,75);
42@define-color bg-dark-grey rgb(40,40,40);
43
44@define-color bg-button-hover rgba(0,0,0,.25);
45@define-color bg-button-active rgba(0,0,0,.60);
46
47@define-color winHeaderbar rgb(55,55,55);
48@define-color winTitle rgb(190,190,190);
49
50@define-color bg-tooltip rgb(185,185,185);
51@define-color border-tooltip rgb(40,40,40);
52@define-color text-tooltip rgb(40,40,40);
53/***********************************************/
54@define-color text-color rgb(186,186,186);
55@define-color text-tbEntry rgb(192,192,192);
56@define-color border-color rgba(255,255,255,.30);
57@define-color bg-list-hover rgb(50,50,50);
58@define-color bg-scale-entry rgba(0,0,0,.14);
59@define-color bg-button-border rgba(0,0,0,.60);
60@define-color bg-entry-border rgba(0,0,0,.40);
61@define-color view-grid-border rgba(255,255,255,0.15);
62@define-color headline-big rgb(195,195,195);
63@define-color headline-hl rgb(230,230,230);
64@define-color headline-frame rgb(215,215,215);
65/*** New Color Variable v2.53 ************************************************************************/
66@define-color fg-disabled rgb(128,128,128);
67@define-color bg-tb-spinbutton shade(@bg-grey, 1.33);
68/***********************************************************************************************/
69
70* {
71    color: @text-color;
72    text-shadow: none;
73    outline-style: none; /* removes the ugly dashed focus line */
74    border-image: none;
75    background-image: none;
76    background-color: transparent;
77    transition: none;
78    -gtk-icon-shadow: none;
79    -gtk-icon-style: symbolic;
80    min-width: 0;
81    min-height: 0;
82    padding: 0;
83    margin: 0;
84    border: none;
85    box-shadow: none;
86}
87
88*:disabled {
89    color: @fg-disabled;
90    -gtk-icon-effect: none;
91}
92
93image:disabled {
94    opacity: .45;
95}
96
97#ToolPanelNotebook {
98    min-width: 25em;
99}
100#HistoryPanel {
101    min-width: 17.5em;
102}
103
104window.background {
105    background-color: @bg-light-grey;
106}
107/* Single Window */
108window > box {
109    padding: 0.416666666666666666em;
110}
111/**/
112dialog {
113    background-color: @bg-grey;
114    border-radius: 0;
115    -GtkDialog-button-spacing: 0;
116    -GtkDialog-content-area-spacing: 0;
117    -GtkDialog-content-area-border: 0;
118    -GtkDialog-action-area-border: 0;
119}
120dialog > box {
121    padding: 0.666666666666666666em;
122}
123messagedialog {
124    background-color: @bg-light-grey;
125    border-radius: 0;
126}
127tooltip {
128    background-color: @bg-tooltip;
129    border: 0.083333333333333333em solid @border-tooltip;
130    border-radius: 0.333333333333333333em;
131    padding: 0;
132    margin: 0;
133}
134tooltip label {
135    color: @text-tooltip;
136}
137
138paned {
139    background-color: @bg-light-grey;
140}
141
142arrow {
143    min-width: 1.333333333333333333em;
144    min-height: 1.333333333333333333em;
145}
146/* combobox cellview to high for font size 8@96dpi*/
147cellview {
148    margin: -1px 0;
149}
150
151text {
152    background-color: @bg-dark-grey;
153}
154
155/*?win*/
156#PlacesPaned {
157    margin: 0;
158}
159
160overshoot,
161undershoot {
162    background-image: none; /* removes the dashed scrollbar line */
163}
164
165label {
166    padding: 0.083333333333333333em 0;
167    margin: 0.125em 0.166666666666666666em;
168    min-height: 1.333333333333333333em;
169}
170
171/*** Frames ************************************************************************************/
172border,
173frame {
174    border: none;
175    padding: 0;
176    margin: 0;
177    background-color: transparent;
178    min-height: 0;
179    min-width: 0;
180    border-radius: 0;
181}
182
183/* affects selection list*/
184entry > window > frame {
185    margin: 0;
186}
187
188#PlacesPaned frame {
189    margin: -5px 0 0;
190}
191
192#RightNotebook > stack > scrolledwindow frame,
193#BatchQueueButtonsMainContainer frame,
194#MyExpander frame,
195dialog frame {
196    margin: 0;
197    padding: 0.19em 0.75em;
198}
199#RightNotebook > stack > scrolledwindow frame > border,
200#BatchQueueButtonsMainContainer > frame > border,
201#MyExpander frame > border,
202dialog frame > border {
203    padding: 0 0.333333333333333333em 0.333333333333333333em;
204    border-radius: 0;
205    border: 0.083333333333333333em solid @border-color;
206    background-color: transparent;
207    margin: 0 -0.583333333333333333em;
208}
209frame > label {
210    margin: 0;
211    padding: 0.416666666666666666em 0;
212    color: @headline-frame;
213}
214frame > checkbutton label{
215    color: @headline-frame;
216}
217#RightNotebook > stack > scrolledwindow frame > label:not(.dummy),
218#BatchQueueButtonsMainContainer frame > label:not(.dummy),
219#ToolPanelNotebook frame > label:not(.dummy),
220dialog frame > label:not(.dummy) {
221    padding: 0.25em 0.5em;
222}
223
224#PrefNotebook box > frame > border {
225    padding-top: 0;
226    padding-bottom: 0.25em;
227}
228#PrefNotebook scrolledwindow scrolledwindow {
229    border: 0.083333333333333333em solid @bg-dark-grey;
230}
231
232#BatchQueueButtonsMainContainer frame > border {
233    margin-bottom: 0.833333333333333333em;
234}
235#BatchQueueButtonsMainContainer frame:nth-child(3) > border {
236    padding-left: 0.916666666666666666em;
237}
238
239/*** end ***************************************************************************************/
240
241/*** Lists & Views *****************************************************************************/
242textview.view, treeview.view {
243    background-color: @bg-dark-grey;
244    border-color: @view-grid-border;
245    padding: 0.166666666666666666em;
246    margin: 0;
247}
248treeview header {
249    background-color: @bg-dark-grey;
250}
251textview:hover, treeview:hover {
252    background-color: @bg-list-hover;
253}
254textview:selected, treeview:selected {
255    color: @text-hl-color;
256    background-color: @accent-color;
257    border-top-color: transparent;
258}
259
260/* Filter treeview */
261#RightNotebook > stack > :nth-child(1) checkbutton + scrolledwindow {
262    min-height: calc(6em + 43px);
263    border: 0.083333333333333333em solid @bg-dark-grey;
264}
265#RightNotebook > stack > :nth-child(1) checkbutton + scrolledwindow treeview {
266    border-bottom:  0.083333333333333333em solid @bg-dark-grey;
267}
268/**/
269
270#PlacesPaned  > box:nth-child(3) treeview {
271    padding: 0.25em 0;
272}
273
274#HistoryPanel {
275    margin-top: 0.25em;
276}
277#RightNotebook #HistoryPanel {
278    margin-top: 0.333333333333333333em;
279}
280#HistoryPanel > border {
281    margin-top: 1.75em;
282}
283#HistoryPanel > label {
284    margin: 0 0 -1.5em 0;
285    padding: 0 0 0 0.083333333333333333em;
286}
287
288#Snapshots > border {
289    min-height: calc(6em + 36px);
290}
291#Snapshots > label {
292    margin-bottom: -4px;
293}
294#Snapshots scrolledwindow + box {
295    background-color: @bg-dark-grey;
296    margin: -8px  0 -4px ;
297    border-top: 0.083333333333333333em solid @view-grid-border;
298}
299#PlacesPaned > box:nth-child(1) scrolledwindow + grid {
300    background-color:@bg-dark-grey;
301    margin: -2px 0 -2px 0;
302    border-top: 0.083333333333333333em solid @view-grid-border;
303}
304
305fontchooser scrolledwindow,
306#PlacesPaned scrolledwindow,
307#HistoryPanel scrolledwindow,
308#Snapshots scrolledwindow {
309    background-color: @bg-dark-grey;
310    border: 0.083333333333333333em solid @bg-dark-grey;
311}
312
313/*Corrects the space of the snapshot view to the paned separator*/
314#Snapshots {
315    margin-top: 0.166666666666666666em;
316}
317/**/
318
319/*** end ***************************************************************************************/
320
321/*** Navigator *********************************************************************************/
322#Navigator {
323    padding-top: 0.75em;
324    padding-bottom: 0.25em;
325    background-color: @bg-dark-grey;
326}
327#Navigator label {
328    padding: 0;
329}
330
331/*** end ***************************************************************************************/
332
333/*** Load - Save dialog ************************************************************************/
334filechooser {
335margin-bottom: 0.25em;
336}
337
338filechooser box > box box > button {
339margin-top: 0.5em;
340margin-right: 0;
341}
342
343filechooser image  {
344    opacity: 0.80;
345}
346filechooser *:selected image,
347filechooser *:checked image,
348filechooser *:active image {
349    opacity: 1;
350}
351
352filechooser list {
353    background-color: @bg-dark-grey;
354}
355
356filechooser #pathbarbox {
357    border: none;
358    background-color: @bg-dark-grey;
359    padding: 0.5em;
360}
361
362/* Right side */
363filechooser > box > paned > box:nth-child(3) {
364    border: 0.083333333333333333em solid @bg-dark-grey;
365    background-color: @bg-dark-grey;
366    padding: 0;
367    margin: 0;
368}
369filechooser > box > paned > box:nth-child(3) > box > * > * > * > frame {
370    padding: 0;
371    margin: -8px -1px;
372    background-color: @bg-dark-grey;
373}
374/**/
375filechooser placessidebar viewport.frame {
376    background-color: @bg-dark-grey;
377    padding: 0;
378    margin: -4px 0 -1px;
379    border: 0.083333333333333333em solid @bg-dark-grey;
380}
381filechooser placessidebar list row image {
382    min-width: 1.333333333333333333em;
383    min-height: 1.333333333333333333em;
384}
385filechooser placessidebar list row {
386    margin: 0;
387    padding: 0 0.5em 0 0.83333333333333333em;
388    min-height: calc(1.416666666666666666em + 8px);
389}
390filechooser placessidebar list row label{
391    margin: 0 0 0 0.583333333333333333em;
392}
393filechooser list row:hover {
394    background-color: @bg-list-hover;
395}
396filechooser placessidebar list row:selected label,
397filechooser placessidebar list row:selected {
398    background-color: @accent-color;
399    color: @text-hl-color;
400}
401
402/*** end ***************************************************************************************/
403
404/*** Histogram *********************************************************************************/
405#HistogramPanel {
406    min-height: 0;
407    margin: 0;
408    padding: 0;
409    border: none;
410    background-color: transparent;
411}
412
413#HistogramPanel > :nth-child(2) {
414    border: none;
415    border-left: 0.083333333333333333em solid @bg-light-grey;
416    background-color: @bg-dark-grey;
417}
418
419#HistogramPanel > :nth-child(1) {
420    border: none;
421    background-color: transparent;
422}
423
424#EditorLeftPaned  #HistogramPanel > :nth-child(1) {
425    border: none;
426    border-right: 0.083333333333333333em solid @bg-light-grey;
427    background-color: @bg-dark-grey;
428}
429
430#EditorLeftPaned  #HistogramPanel > :nth-child(2) {
431    border: none;
432    background-color: transparent;
433}
434
435#HistogramArea,
436#HistogramRGBArea {
437    border: 0.083333333333333333em solid @bg-dark-grey;
438    background-color: @bg-dark-grey;
439}
440
441#histButton {
442    padding: 0.25em 0.25em 0;
443    margin: 0 0 -1px 0;
444    border: none;
445    background-color: transparent;
446    background-image: none;
447    min-height: 1.333333333333333333em;
448    min-width: 1.333333333333333333em;
449    border-radius: 0;
450    box-shadow: none;
451}
452#histButton:last-child {
453    padding-bottom: 0.25em;
454    margin: 0;
455}
456
457/*** end ***************************************************************************************/
458
459/*** Separator *********************************************************************************/
460separator,
461.separator {
462    min-width: 0.083333333333333333em;
463    min-height: 0.083333333333333333em;
464    background-color: transparent;
465}
466grid separator.horizontal, box separator.horizontal {
467    margin: 0.25em 0.19em;
468    padding: 0;
469}
470grid separator.vertical, box separator.vertical {
471    margin: 0 0.25em;
472    padding: 0;
473}
474
475#PlacesPaned .view.separator {
476    min-height: 0.5em;
477}
478
479filechooser separator {
480    background-color: @view-grid-border;
481}
482
483.view.separator,
484dialog separator {
485    background-color: @border-color;
486}
487popover separator:not(:only-child) {
488    margin: 0 0.5em;
489    background-color: @border-color;
490}
491
492paned.horizontal > separator {
493    background-color: transparent;
494    background-image: none;
495    min-width: 0;
496    border: none;
497    margin:  0 -0.25em 0 -3px;
498    padding: 0 0.25em;
499}
500/* Double line separator */
501paned.vertical > separator {
502    background-image: none;
503    background-color: @bg-light-grey;
504    min-height: 0.416666666666666666em;
505    border-top: 0.083333333333333333em solid @bg-dark-grey;
506    border-bottom: none;
507    margin: 0.416666666666666666em 0 -0.5em;
508    padding: 0.2em 0 0;
509}
510
511#EditorLeftPaned > paned.vertical:last-child > separator {
512    margin-bottom: 1px;
513}
514/**/
515/* Remove hard coded pixel from tool button */
516#EditorLeftPaned > paned.vertical:last-child > box {
517    margin-top: -2px;
518    padding: 0;
519}
520/**/
521
522dialog paned.horizontal > separator {
523    background-color: @bg-grey;
524    border-color: @bg-grey;
525    min-width: 0.333333333333333333em;
526}
527
528menu separator {
529    background-color: @view-grid-border;
530    margin: 0.25em 0.5em;
531}
532
533#Navigator separator {
534    background-color: @view-grid-border;
535    margin: 0;
536    padding: 0;
537}
538
539.scrollableToolbar separator.vertical {
540    background-color: shade(@bg-light-grey, .72);
541    margin: 0.19em;
542}
543
544#MyExpander separator.horizontal {
545    background-color: @view-grid-border;
546    margin: 0.25em 0.19em;
547}
548#MyFileChooserButton separator {
549    background-color: transparent;
550}
551
552#PlacesPaned .view.separator {
553    color: @view-grid-border;
554}
555
556#MetaPanelNotebook separator {
557    background-color: @border-color;
558    margin: 0.19em 0;
559}
560/*** end****************************************************************************************/
561
562/*** PartialPaste ******************************************************************************/
563#PartialPaste {
564    border-bottom: 0.083333333333333333em solid @border-color;
565    border-top: 0.083333333333333333em solid @border-color;
566    padding-top: 0.5em;
567    padding-bottom: 0.5em;
568}
569
570#PartialPaste separator.vertical {
571    margin: 0 0.333333333333333333em;
572    padding: 0;
573}
574
575#PartialPaste separator { /* Struggles with #PartialPasteHeaderSep */
576    background-color: @border-color;
577    margin: 0.166666666666666666em 0.5em 0.166666666666666666em 1.166666666666666666em;
578}
579#PartialPasteHeaderSep.horizontal {
580    background-color: rgb(192,192,192);
581    margin: 0.166666666666666666em 0.5em;
582}
583
584#PartialPasteHeader label {
585    color: @headline-big;
586    font-weight: bold;
587}
588
589/*** end ***************************************************************************************/
590
591/*** Scrollbar *********************************************************************************/
592scrollbar {
593    background-color: rgba(0,0,0,.40);
594    border: none;
595    margin: 0;
596    padding: 0;
597    border-radius: 0;
598}
599scrollbar slider {
600    background-color: @text-color;
601    padding: 0;
602    margin: 0;
603    border-color: transparent;
604    border-style: solid;
605    border-radius: 0.5em;
606}
607scrollbar.overlay-indicator {
608    opacity: 0.8;
609}
610scrollbar.overlay-indicator:not(.hovering) {
611    opacity: 0.5;
612}
613
614scrollbar:not(.overlay-indicator) {
615    border-color: @bg-dark-grey;
616    border-style: solid;
617    background-color: rgba(0,0,0,.30);
618}
619scrollbar:not(.overlay-indicator).horizontal {
620    border-width: 0 0.083333333333333333em 0.083333333333333333em 0.083333333333333333em;
621}
622scrollbar:not(.overlay-indicator).vertical {
623    border-width: 0.083333333333333333em 0.083333333333333333em 0.083333333333333333em 0;
624}
625scrollbar:not(.overlay-indicator) slider {
626    background-color: shade(@text-color, .9);
627}
628
629scrollbar:not(.overlay-indicator).horizontal slider,
630scrollbar.horizontal.hovering slider {
631    min-height: 0.5em;
632    min-width: 2em;
633    border-width: 0.25em;
634}
635scrollbar:not(.overlay-indicator).horizontal.fine-tune slider,
636scrollbar.horizontal.hovering.fine-tune slider {
637    min-height: calc(0.5em - 2px);
638    border-width: calc(0.25em + 1px);
639    margin: 0 -1px;
640}
641scrollbar.horizontal.overlay-indicator:not(.hovering) slider {
642    min-width: 2em;
643    min-height: 0.25em;
644    border-width: 0;
645    border-radius: 0.25em;
646    margin: 0.166666666666666666em 0.25em;
647}
648
649scrollbar:not(.overlay-indicator).vertical slider,
650scrollbar.vertical.hovering slider {
651    min-height: 2em;
652    min-width: 0.5em;
653    border-width: 0.25em;
654}
655scrollbar:not(.overlay-indicator).vertical.fine-tune slider,
656scrollbar.vertical.hovering.fine-tune slider {
657    min-width: calc(0.5em - 2px);
658    border-width: calc(0.25em + 1px);
659    margin: -1px 0;
660}
661scrollbar.vertical.overlay-indicator:not(.hovering) slider {
662    min-width: 0.25em;
663    min-height: 2em;
664    border-width: 0;
665    border-radius: 0.25em;
666    margin: 0.25em 0.166666666666666666em;
667}
668
669scrollbar:not(.overlay-indicator) slider:hover,
670scrollbar.hovering slider:hover {
671    background-color: shade(@accent-color2,1.12);
672}
673
674/* Scrollbar stuck workaround */
675scrollbar:not(.overlay-indicator):hover {
676    min-width: 1px;
677}
678
679/* Toolbar stuck workaround */
680.scrollableToolbar > scrollbar:not(.dummy),
681.scrollableToolbar > scrollbar:not(.dummy) > contents:not(.dummy),
682.scrollableToolbar > scrollbar:not(.dummy) > contents:not(.dummy) > trough:not(.dummy),
683.scrollableToolbar > scrollbar:not(.dummy) > contents:not(.dummy) > trough:not(.dummy) > slider:not(.dummy) {
684    padding: 0;
685    margin: 0;
686    min-height: 0;
687    min-width: 0;
688    border: none;
689}
690
691/*** end ***************************************************************************************/
692
693/*** Scale**************************************************************************************/
694scale {
695    padding: 0;
696   min-height: 1.833333333333333333em;
697    margin: 0 -0.333333333333333333em;
698}
699
700scale slider {
701    min-width: 0;
702    min-height: 0;
703    margin: -0.583333333333333333em;
704    padding: 0.583333333333333333em;
705    border-radius: 1.166666666666666666em;
706    background-image: linear-gradient(to bottom, shade (@accent-color4,1.15), shade (@accent-color4,.85));
707    border: 0.083333333333333333em solid shade(@bg-dark-grey,0.9);
708}
709scale slider:hover {
710    background-image: linear-gradient(to bottom, shade (@accent-color4,1.25), shade (@accent-color4,.95));
711}
712
713scale trough {
714    margin: 0.583333333333333333em;
715    background-color: shade(@bg-grey,.83);
716    border-radius: 0.333333333333333333em;
717    min-height: 0;
718    min-width: 0;
719    padding: 0 0.583333333333333333em;
720    border: none;
721}
722scale.color trough {
723    border: 0.083333333333333333em solid shade(@bg-dark-grey,0.9);
724    min-height: 0.333333333333333333em;
725    min-width: 0.333333333333333333em;
726    border-radius: 0;
727    padding: 0;
728}
729
730scale trough highlight {
731    background-color: transparent;
732    background-image: linear-gradient(to bottom, shade (@accent-color2,1.22), shade(@accent-color2,.88));
733    border: 0.083333333333333333em solid shade(@bg-dark-grey,0.9);
734    margin: 0 -0.583333333333333333em;
735    border-radius: 0.333333333333333333em;
736    min-height: 0;
737    min-width: 0;
738    padding: 0.333333333333333333em 0.333333333333333333em 0 0; /*height of trough */
739}
740
741scale.fine-tune trough highlight {
742    padding: 0.5em 0.5em 0 0;
743    border-radius: 0.5em;
744}
745
746scale:disabled slider,
747scale:disabled trough highlight {
748    background-color: shade(@bg-grey,.83);
749    background-image: none;
750    border-color: transparent;
751}
752
753#BatchQueueButtonsMainContainer scale trough,
754#BatchQueueButtonsMainContainer scale:disabled slider,
755#BatchQueueButtonsMainContainer scale:disabled trough highlight {
756    background-color: @bg-grey;
757}
758
759/*** end ***************************************************************************************/
760
761/*** Progressbar *******************************************************************************/
762progressbar.vertical {
763    min-width: 0;
764    min-height: 9em;
765}
766progressbar text {
767    background-color: transparent;
768}
769progressbar.vertical text {
770    color: transparent;
771}
772
773progressbar trough {
774    background-color: alpha(@bg-grey, .45);
775    border: 0.083333333333333333em solid transparent;
776    border-radius: 0.416666666666666666em;
777}
778#IopsPanel progressbar trough {
779    background-color: @bg-grey;
780}
781
782progressbar trough progress {
783    background-color: transparent;
784    border-radius: 0.416666666666666666em;
785    border: 0.083333333333333333em solid @bg-button-border;
786}
787
788progressbar.vertical trough {
789    min-width: 0.416666666666666666em;
790}
791progressbar.vertical trough progress {
792    min-width: 0.416666666666666666em;
793    margin: -1px 0;
794    background-image: linear-gradient(to right, shade (@accent-color2,1.2), shade(@accent-color2,.85));
795}
796
797
798progressbar.horizontal trough {
799    min-height: 0.416666666666666666em;
800    margin-top: 0.416666666666666666em;
801}
802#IopsPanel progressbar.horizontal trough {
803    margin-top: 0;
804}
805
806progressbar.horizontal trough progress {
807    min-height: 0.416666666666666666em;
808    margin: 0 -1px;
809    background-image: linear-gradient(to bottom, shade (@accent-color2,1.2), shade(@accent-color2,.85));
810}
811
812/* #IopsPanel progressbar trough.empty, */
813progressbar.horizontal trough.empty,
814progressbar.vertical trough.empty {
815    background-color: transparent;
816}
817progressbar trough.empty progress {
818    border-color: transparent;
819    background-image: none;
820    box-shadow: none;
821}
822
823/*** end ***************************************************************************************/
824
825/*** Notebook **********************************************************************************/
826notebook,
827notebook header,
828notebook tabs,
829notebook tab,
830notebook stack {
831    border-radius: 0;
832    border: none;
833    padding: 0;
834    margin: 0;
835    min-width: 0;
836    min-height: 0;
837}
838notebook > header {
839    background-color: @bg-dark-grey;
840    padding: 0 0.416666666666666666em;
841}
842notebook > header.left {
843    padding: 0.416666666666666666em 0;
844}
845notebook tabs {
846    background-color: transparent;
847}
848notebook > header tab {
849    background-color: transparent;
850    margin: 0.416666666666666666em 0.25em;
851    padding: 0 0.333333333333333333em;
852}
853notebook > header.left tab {
854    margin: 0.25em 0.416666666666666666em;
855    padding: 0.333333333333333333em 0;
856}
857notebook > header tab > grid > image {
858    min-height: 2em;
859    min-width: 2em;
860    padding: 0.25em;
861    margin: 0;
862}
863
864notebook > header tab:hover label {
865    color: @headline-hl;
866}
867notebook > header tab:checked {
868    box-shadow: 0 0.25em @accent-color2;
869}
870notebook > header.left tab:checked {
871    box-shadow: 0.25em 0 @accent-color2;
872}
873notebook > header > tabs > arrow {
874    background-color: transparent;
875    border-radius: 0.2em;
876    padding: 0 0.166666666666666666em;
877    margin: 0.5em 0;
878}
879notebook > header.left > tabs > arrow {
880    padding: 0.166666666666666666em 0;
881    margin: 0 0.5em;
882}
883notebook > header > tabs > arrow:hover {
884    background-color: rgba(255,255,255,.1);
885}
886notebook > header > tabs > arrow:active {
887    background-color: transparent;
888}
889
890notebook stack {
891    background-color: @bg-light-grey;
892}
893dialog notebook stack {
894    background-color: @bg-grey;
895}
896
897/*?win*/
898#MainNotebook > stack {
899    padding: 0.416666666666666666em;
900}
901
902#MainNotebook > stack > :nth-child(2) > box:nth-child(3) {
903    margin-top: 0.416666666666666666em;
904}
905
906
907/* Adds a line on top of the notebook as a separtor for the titlebar (only on CSD) */
908dialog.csd #PrefNotebook > header,
909dialog.csd #AboutNotebook > header,
910window.csd:not(.fullscreen) #MainNotebook > header.top {
911    border-top: 0.083333333333333333em solid rgba(200,200,200,.18);
912}
913/**/
914
915
916#RightNotebook > stack > scrolledwindow > viewport > box > box:last-child > image,
917#ToolPanelNotebook > stack > scrolledwindow > viewport > box > box:last-child > image {
918    min-height: 5em;
919}
920
921#ToolPanelNotebook {
922    background-color: @bg-dark-grey;
923}
924#ToolPanelNotebook > header {
925    border-bottom: 0.083333333333333333em solid @view-grid-border;
926    margin-left: 0.083333333333333333em;
927    margin-right: 0.083333333333333333em;
928    padding: 0 0.19em;
929}
930#ToolPanelNotebook > header tabs {
931    margin: 0 0 0.25em;
932}
933#ToolPanelNotebook > header tab {
934    padding: 0;
935}
936#ToolPanelNotebook > header tab image{
937    min-height: 2em;
938    min-width: 2em;
939    margin: 0.19em 0.25em 0.333333333333333333em;
940    padding: 0;
941}
942#ToolPanelNotebook > stack {
943    background-color: @bg-dark-grey;
944    padding: 0.5em 0;
945}
946
947#RightNotebook > header {
948    margin: 0 0.416666666666666666em 0 0;
949}
950#RightNotebook > stack {
951    background-color: @bg-grey;
952    padding: 0;
953}
954#RightNotebook > header tab label {
955    padding-left: 0.25em;
956    padding-right: 0.25em;
957}
958
959#RightNotebook > stack > scrolledwindow > viewport {
960    padding: 0 0.5em;
961    border: 0.083333333333333333em solid @bg-dark-grey;
962}
963
964#PrefNotebook > header {
965    margin: -0.666666666666666666em -0.666666666666666666em 0.333333333333333333em;
966}
967#PrefNotebook > stack {
968    margin: 0 -0.666666666666666666em;
969}
970#PrefNotebook > stack > scrolledwindow > viewport {
971    padding: 0 0.666666666666666666em;
972}
973
974#AboutNotebook > header {
975    margin: -0.666666666666666666em -0.666666666666666666em 0.666666666666666666em;
976}
977
978#AboutNotebook > stack text,
979#AboutNotebook > stack textview {
980    background-color: @bg-dark-grey;
981    padding: 0.75em 0;
982}
983/* Meta panel notebook */
984#MetaPanelNotebook > header {
985    background-color: @bg-grey;
986    padding: 0.333333333333333333em;
987    margin: 0 0.5em 0;
988}
989#MetaPanelNotebook > header > tabs {
990    background-color: @bg-dark-grey;
991    padding-left: 0.333333333333333333em;
992}
993#MetaPanelNotebook > stack {
994    background-color: @bg-dark-grey;
995    padding: 0 0 0.5em 0;
996}
997
998#MetaPanelNotebook > stack > box {
999    border: none;
1000    background-color: @bg-grey;
1001    border-radius: 0;
1002    border-top-style: none;
1003    padding: 0 0.333333333333333333em 0.25em;
1004    margin:0 0.5em -0.5em;
1005}
1006#MetaPanelNotebook > stack > box:nth-child(1) > scrolledwindow {
1007    margin: 0 0 0.333333333333333333em;
1008    padding: 0;
1009}
1010
1011#MetaPanelNotebook > stack > box:nth-child(2) > scrolledwindow > viewport.frame {
1012    padding: 0 0 0 1.083333333333333333em;
1013}
1014
1015#MetaPanelNotebook entry {
1016    padding: 0 0.333333333333333333em;
1017    background-color: @bg-dark-grey;
1018    border-radius: 0;
1019    margin-left: 0;
1020    margin-right: 0;
1021}
1022
1023#MetaPanelNotebook .view {
1024    border: 0.083333333333333333em solid @bg-dark-grey;
1025    padding: 0.083333333333333333em 0.25em;
1026}
1027
1028#MetaPanelNotebook text {
1029    background-color: transparent;
1030}
1031
1032#MetaPanelNotebook stack label {
1033    margin-top: 0;
1034    margin-bottom: 0;
1035    padding: 0;
1036}
1037
1038/*** end ***************************************************************************************/
1039
1040/*** File Browser ******************************************************************************/
1041#FileCatalog {
1042    background-color: @bg-image;
1043    border: 0.083333333333333333em solid @bg-dark-grey;
1044}
1045#FileCatalog:selected {
1046    background-color: @accent-color3;
1047    color: @text-hl-color3;
1048}
1049#FileCatalog:hover {
1050    background-color: @bg-image2;
1051}
1052
1053/*?win*/
1054#FileBrowser {
1055    padding: 0;
1056    margin: 0;
1057}
1058
1059#ToolBarPanelFileBrowser {
1060    margin: 0 0 0.416666666666666666em 0;
1061    min-height: 0;
1062    min-width: 0;
1063    padding: 0;
1064}
1065#FileBrowserQueryToolbar > viewport > box {
1066    margin: 0 0 0.416666666666666666em 0;
1067    min-height: 0;
1068    min-width: 0;
1069    padding: 0;
1070}
1071
1072/*** end ***************************************************************************************/
1073
1074/*** Image Editor ******************************************************************************/
1075#EditorRightPaned {
1076    margin: 0;
1077}
1078
1079#BeforeAfterContainer {
1080    background-color: @bg-grey;
1081    border: 0.083333333333333333em solid @bg-dark-grey;
1082    border-radius: 0;
1083    padding: 0;
1084    margin: calc(0.416666666666666666em - 2px) 0 0.416666666666666666em;
1085}
1086#BeforeAfterContainer > box:nth-child(2) > box:nth-child(2),
1087#BeforeAfterContainer > box:nth-child(1) > box:nth-child(2){
1088    border-top: 0.083333333333333333em solid @bg-dark-grey;
1089}
1090#BeforeAfterContainer > box:nth-child(2){
1091    border-left: 0.083333333333333333em solid @bg-dark-grey;
1092}
1093
1094/* !!! Must be same height as "Small Lock Button" */
1095#BeforeAfterContainer label {
1096    padding: 0 0.5em;
1097    min-height: 2em;
1098    min-width: 2em;
1099    margin: 0.25em 0;
1100    border: 0.083333333333333333em solid transparent;
1101}
1102
1103#EditorToolbarTop {
1104    margin: 0 -1px 0 -1px;
1105    padding: 0;
1106    min-height: 0;
1107}
1108
1109#IopsPanel {
1110    margin: 0;
1111    padding: 0;
1112    min-height: 0;
1113}
1114
1115#EditorZoomPanel label {
1116    min-width: 4em;
1117    margin: 0;
1118}
1119/*** end ***************************************************************************************/
1120
1121/*** Toolbox ***********************************************************************************/
1122#MyExpander image {
1123    min-width: 1.333333333333333333em;
1124    min-height: 0;
1125    margin: -1px 0.19em;
1126}
1127
1128/*Curve spinbutton background */
1129#MyExpander flowbox > flowboxchild {
1130  background-color: transparent;
1131}
1132/**/
1133#MyExpander .drawingarea:not(.slider) {
1134    border: 0.083333333333333333em solid @bg-light-grey;
1135    background-color: @bg-dark-grey;
1136}
1137#MyExpander .slider,
1138#MyExpander #CurveSHCSelector {
1139    background-image: linear-gradient(to bottom, shade (@accent-color4,1.15), shade (@accent-color4,.85));
1140    background-color: @accent-color4;
1141    border: 0.083333333333333333em solid rgb(15,15,15);
1142}
1143#MyExpander .drawingarea:disabled {
1144    background-color: shade(@bg-grey,.85);
1145    border-color: @bg-dark-grey;
1146    background-image: none;
1147}
1148#ThresholdAdjuster {
1149    margin: 0.083333333333333333em 0 0.166666666666666666em 0;
1150}
1151
1152#ToolPanelNotebook > stack > scrolledwindow > viewport.frame {
1153    padding: 0 0.5em;
1154    margin-top: -0.5em;
1155}
1156
1157#MyExpander {
1158    margin: 0;
1159    padding: 0;
1160}
1161#ExpanderBox > box, #ExpanderBox > grid {
1162    background-color: @bg-grey;
1163    border: none;
1164    border-radius: 0;
1165    margin: 0;
1166    padding: 0.5em 0.333333333333333333em;
1167}
1168
1169    /* Sub-tool (MyExpander) */
1170#ExpanderBox2 > box, #ExpanderBox2 > grid {
1171    background-color: transparent;
1172    border: 0.083333333333333333em solid @border-color;
1173    border-radius: 0;
1174    margin: 0 0.19em;
1175    padding: 0.333333333333333333em;
1176}
1177
1178#MyExpanderTitle > box {
1179    margin: 0;
1180    padding: 0.25em 0;
1181}
1182
1183#MyExpanderTitle label {
1184    color: @headline-big;
1185    padding: 0;
1186    margin: 0.083333333333333333em 0.25em 0 0.166666666666666666em;
1187}
1188
1189#MyExpanderTitle:hover label {
1190    color: @headline-hl;
1191}
1192/*** end ***************************************************************************************/
1193
1194/*** Context & popups menus *****************************************************************************/
1195.csd.popup > decoration {
1196    background-image: none;
1197    border-radius: 0;
1198    border: none;
1199    padding: 0;
1200    margin: 0;
1201    box-shadow: 0 0.25em 0.75em 0.083333333333333333em rgba(0, 0, 0, 0.50), 0 0 0 0.083333333333333333em @bg-dark-grey;
1202}
1203
1204menu {
1205    background-color: @bg-dark-grey;
1206    border: 0.083333333333333333em solid @accent-color;
1207    padding: 0.083333333333333333em;
1208    margin: 0;
1209    border-radius: 0;
1210}
1211menu > arrow.top,
1212menu > arrow.top:hover,
1213menu > arrow.bottom,
1214menu > arrow.bottom:hover {
1215    background-color: transparent;
1216    border: none;
1217    padding: 0.5em;
1218    min-height: 1.5em;
1219}
1220
1221menuitem {
1222    padding: 0 0.333333333333333333em;
1223    margin: 0.083333333333333333em;
1224    min-height: 2em;
1225}
1226
1227menu arrow {
1228    min-width: 1.333333333333333333em;
1229    margin: 0 -0.19em;
1230    padding: 0;
1231    margin: 0 -0.25em 0 0;
1232}
1233menuitem:hover {
1234    background-color: @accent-color;
1235}
1236menuitem:hover > * > *,
1237menuitem:hover > * {
1238    color: @text-hl-color;
1239}
1240
1241menu image:not(.dummy),
1242#MyExpander menu image:not(.dummy) {
1243    min-height: 2em;
1244    min-width: 1.5em;
1245    padding: 0;
1246    margin: 0 0 0 -1.333333333333333333em;
1247}
1248
1249/*** Selection popup list (used in filechooser) ***/
1250entry > window > frame:not(.dummy) {
1251    background-color: @bg-dark-grey;
1252    padding: 0;
1253}
1254entry > window > frame > border:not(.dummy) {
1255    background-color: @bg-dark-grey;
1256    padding: 0.083333333333333333em;
1257    margin: 0.083333333333333333em;
1258    border: 0.083333333333333333em solid @accent-color;
1259}
1260/* end */
1261
1262/*** end ***************************************************************************************/
1263
1264/*** Popover *** Context menu filechooser ******************************************************/
1265popover {
1266    box-shadow: 0 1px 6px 1px rgba(0, 0, 0, 0.5), 0 0 0 1px @bg-dark-grey;
1267}
1268popover {
1269    background-color: @bg-dark-grey;
1270    border: 0.083333333333333333em solid  @accent-color;
1271    border-radius: 0;
1272    padding: 0;
1273    margin: 0;
1274}
1275popover > box {
1276    padding: 0;
1277    margin: -9px;
1278}
1279popover modelbutton {
1280    min-height: 2em;
1281    padding: 0 0.416666666666666666em;
1282    margin: 0;
1283    border-radius: 0;
1284}
1285
1286popover label {
1287    margin-right: 0.5em;
1288}
1289popover modelbutton:hover label,
1290popover modelbutton:hover {
1291    background-color: @accent-color;
1292    color: @text-hl-color;
1293}
1294/** end ****************************************************************************************/
1295
1296/*** Switch ***********************************************************************************/
1297switch {
1298    min-height: 2.333333333333333333em;
1299    min-width: 11em;
1300    margin: 0 0.19em;
1301    padding: 0;
1302    border-radius: 0.2em;
1303    background-image: none;
1304    border: 0.083333333333333333em solid @bg-entry-border;
1305    background-color: @bg-scale-entry;
1306    margin-bottom: 0.5em;
1307}
1308
1309switch slider {
1310    background-color: shade (@bg-light-grey, .85);
1311    background-image: linear-gradient(to bottom, rgba(125,125,125,.4), rgba(60,60,60,.4));
1312    border: 0.083333333333333333em solid @bg-entry-border;
1313    box-shadow: inset 0 0.083333333333333333em rgba(242, 242, 242, 0.1);
1314    border-radius: 0.2em 0 0 0.2em;
1315
1316    /* Needed to cover the total switch */
1317    margin: -0.083333333333333333em;
1318    padding: 0.083333333333333333em;
1319}
1320switch:checked  slider{
1321    border-radius: 0 0.2em 0.2em 0;
1322}
1323
1324switch:hover slider {
1325    background-color: shade (@bg-light-grey, .65);
1326    background-image: linear-gradient(to bottom, rgba(125,125,125,.4), rgba(60,60,60,.4));
1327}
1328
1329switch:checked {
1330    background-color: @accent-color2;
1331    color: @headline-big;
1332}
1333
1334switch:disabled:not(:checked) {
1335    box-shadow: none;
1336    background-image: none;
1337    background-color: shade (@bg-light-grey, .85);
1338}
1339
1340
1341/** end ****************************************************************************************/
1342
1343/*** Buttons ***********************************************************************************/
1344button,
1345#BeforeAfterContainer button {
1346    min-height: 1.666666666666666666em;
1347    min-width: 1.666666666666666666em;/*x*/
1348    margin: 0.125em;
1349    border-radius: 0.2em;
1350    border: 0.083333333333333333em solid @bg-button-border;
1351    background-color: transparent;
1352    box-shadow: inset 0 0.083333333333333333em rgba(242, 242, 242, 0.1);
1353    background-image: linear-gradient(to bottom, rgba(100,100,100,.3), rgba(30,30,30,.3));
1354}
1355button.flat {
1356    border: 0.083333333333333333em solid transparent;
1357    box-shadow: none;
1358    background-image: none;
1359    background-color: transparent;
1360}
1361
1362button.flat:hover,
1363button:hover,
1364#BeforeAfterContainer button:hover,
1365#FileBrowserQueryToolbar entry + button.flat:hover,
1366#FileBrowserIconToolbar entry + button.flat:hover {
1367    border-color: @bg-button-border;
1368    box-shadow: inset 0 0.083333333333333333em rgba(242, 242, 242, 0.1);
1369    background-image: linear-gradient(to bottom, rgba(100,100,100,.3), rgba(30,30,30,.3));
1370    background-color: @bg-button-hover;
1371}
1372.curve-mainbox .curve-buttonbox  button.flat:hover,
1373#ToolPanelNotebook > stack > box > box button:hover,
1374#MainNotebook > header tab #CloseButton:hover,
1375#MainNotebook > header > grid > button:hover {
1376    background-color: alpha(@bg-grey, 0.6);
1377    border-color: shade(@bg-dark-grey, 0.6);
1378    box-shadow: inset 0 0.1em rgba(242, 242, 242, 0.12);
1379}
1380
1381button.flat:active,
1382button.flat:checked,
1383button:active,
1384button:checked,
1385#BeforeAfterContainer button:checked,
1386#FileBrowserQueryToolbar entry + button.flat:active,
1387#FileBrowserIconToolbar entry + button.flat:active {
1388    border-color: @bg-button-border;
1389    box-shadow: inset 0 0.1em rgba(242, 242, 242, 0.08);
1390    background-image: linear-gradient(to bottom, rgba(100,100,100,.3), rgba(30,30,30,.3));
1391    background-color: @bg-button-active;
1392}
1393.curve-mainbox .curve-buttonbox  button.flat:active,
1394.curve-mainbox .curve-buttonbox  button.flat:checked,
1395#ToolPanelNotebook > stack > box > box button:active,
1396#MainNotebook > header tab #CloseButton:active,
1397#MainNotebook > header > grid > button:active {
1398    background-color: alpha(@bg-light-grey, 0.8);
1399    border-color: shade(@bg-dark-grey, 0.6);
1400    box-shadow: inset 0 0.1em rgba(242, 242, 242, 0.15);
1401}
1402
1403/* Combobox */
1404button.combo {
1405    padding: 0 0 0 0.25em;
1406}
1407combobox entry.combo + button.combo {
1408    min-width: 1em;
1409    margin-left: 0;
1410    padding: 0;
1411    border-top-left-radius: 0;
1412    border-bottom-left-radius: 0;
1413    border-left: none;
1414}
1415#WB-Size-Helper button.combo {
1416    min-width: 0;
1417    margin: 0;
1418}
1419#WB-Size-Helper {
1420    min-width: 3.5em;
1421    margin: 0.125em;
1422}
1423
1424combobox arrow {
1425    margin-right: 0.083333333333333333em;
1426}
1427
1428combobox entry.combo + button.combo arrow {
1429    margin-right: 0;
1430}
1431
1432#PlacesPaned button.combo {
1433    margin: 0;
1434}
1435#PlacesPaned combobox {
1436    margin-bottom: calc(0.416666666666666666em - 8px);
1437}
1438
1439#ProfilePanel combobox {
1440    margin-right: -2px;
1441}
1442
1443/* Misc */
1444button label {
1445    margin: 0 0.416666666666666666em;
1446}
1447button image:not(.dummy),
1448#MyExpander button image:not(.dummy) {
1449    margin: 0;
1450}
1451#MyFileChooserButton label {
1452    margin: 0 0 0 0.416666666666666666em;
1453}
1454#MyFileChooserButton image:not(.dummy):last-child {
1455    margin: 0 0.416666666666666666em 0 0;
1456    min-width: 1.333333333333333333em;
1457    opacity: 0.85;
1458}
1459#MetaPanelNotebook button + button:last-child {
1460    margin-right: 0;
1461}
1462#MetaPanelNotebook scrolledwindow + grid > button:first-child,
1463#MetaPanelNotebook scrolledwindow + grid + grid > button:first-child {
1464    margin-left: 0;
1465}
1466#MetaPanelNotebook scrolledwindow + grid > button:last-child,
1467#MetaPanelNotebook scrolledwindow + grid + grid > button:last-child {
1468    margin-right: 0;
1469}
1470
1471#ProfilePanel > grid {
1472    margin-bottom: calc(0.416666666666666666em -2px);
1473}
1474
1475/* Reset button */
1476scale + button.flat,
1477spinbutton + button.flat,
1478scale + image + image + button.flat {
1479    min-height: 1.333333333333333333em;
1480    margin-top:0.095em;
1481    margin-bottom: 0.095em;
1482}
1483
1484/* Color chooser & buttons */
1485button.color {
1486    min-width: 3.25em;
1487    box-shadow: none;
1488    background-image: none;
1489    background-color: transparent;
1490}
1491
1492button.color colorswatch {
1493    min-height: 0;
1494    min-width: 0;
1495    margin: 1px;
1496    border-radius: 0.2em;
1497}
1498
1499colorchooser colorswatch {
1500    border: 1px solid @bg-button-border;
1501}
1502colorchooser colorswatch#add-color-button:first-child {
1503  border-radius: 5.5px 0 0 5.5px;
1504}
1505
1506/* Font chooser button */
1507button.font label{
1508    min-height: 0;
1509    min-width: 0;
1510    margin: 0 0.19em;
1511}
1512
1513/* Save, Cancel, OK ... buttons */
1514dialog .dialog-action-area button {
1515    min-height: 2.166666666666666666em;
1516    margin: 0.5em 0 0 0.333333333333333333em;
1517    padding: 0;
1518}
1519messagedialog .dialog-action-area button {
1520    min-height: 1.833333333333333333em;
1521    margin: -12px 0.5em 0.5em;
1522    padding: 0;
1523}
1524messagedialog .dialog-action-area button:not(:only-child):nth-child(1) {
1525    margin-right: 0.25em;
1526}
1527messagedialog .dialog-action-area button:not(:only-child):nth-child(2) {
1528    margin-left: 0.25em;
1529}
1530
1531/* Big tool buttons */
1532#ToolBarPanelFileBrowser button,
1533#EditorTopPanel button,
1534#IopsPanel button,
1535#ProfilePanel button,
1536#MainNotebook > header > grid > button,
1537#MyExpander button.independent.toggle:not(.image-button):not(.text-button):first-child:only-child, /* Graduated filter big button */
1538.curve-mainbox .curve-buttonbox button.flat,
1539#BatchQueueButtonsMainContainer + grid + box button,
1540#RightNotebook > stack > scrolledwindow:last-child button.image-button, /* Fast Export */
1541#MetaPanelNotebook scrolledwindow + grid > button,
1542#MetaPanelNotebook scrolledwindow + grid + grid > button {
1543    min-height: 2.333333333333333333em;
1544    min-width: 2.333333333333333333em;
1545    margin: 0 0.125em;
1546}
1547#ToolBarPanelFileBrowser > button:first-child,
1548#EditorTopPanel > button:first-child,
1549#IopsPanel > button:nth-child(6),
1550#ProfilePanel > grid > button:first-child {
1551    margin-left: 0;
1552}
1553#ToolBarPanelFileBrowser > button:last-child,
1554#ToolBarPanelFileBrowser > box:last-child > button:last-child,
1555#EditorTopPanel > button:last-child,
1556#EditorTopPanel > box:last-child > button:last-child,
1557#IopsPanel > button:last-child,
1558#ProfilePanel > grid > button:last-child,
1559#BatchQueueButtonsMainContainer + grid + box button {
1560    margin-right: 0;
1561}
1562#MyExpander button.independent.toggle:not(.image-button):not(.text-button):first-child:only-child, /* Graduated filter button */
1563#MetaPanelNotebook scrolledwindow + grid > button,
1564#MetaPanelNotebook scrolledwindow + grid + grid > button {
1565    margin: 0.125em;
1566}
1567
1568#EditorTopPanel button.narrowbutton {
1569    min-width: 0;
1570    padding: 0 0.13em;
1571}
1572
1573/* Image close button */
1574#MainNotebook > header tab #CloseButton {
1575    padding: 0.166666666666666666em;
1576    margin: 0.333333333333333333em 0 0.5em 0.19em;
1577    min-width: 0;
1578    min-height: 0;
1579}
1580
1581/* Filter buttons*/
1582#ToolBarPanelFileBrowser .smallbuttonbox {
1583    min-height: 0;
1584    padding: 0;
1585    margin: 0;
1586}
1587#ToolBarPanelFileBrowser .smallbuttonbox:nth-child(2) {
1588    margin-top: 0.12em;
1589}
1590#ToolBarPanelFileBrowser .smallbuttonbox button.smallbutton image {
1591    margin: -0.12em;
1592    min-width: 0;
1593    min-height: 0;
1594}
1595#ToolBarPanelFileBrowser .smallbuttonbox button.smallbutton {
1596    min-height: 0;
1597    min-width: 1.333333333333333333em;
1598    padding: 0;
1599    margin: 0 0.25em;
1600    border: none;
1601    border-radius: 0;
1602    background-color: transparent;
1603    background-image: none;
1604    box-shadow: none;
1605}
1606#FileBrowser #ToolBarPanelFileBrowser box:nth-child(7) > box.smallbuttonbox  > button.smallbutton:checked,
1607#EditorLeftPaned #ToolBarPanelFileBrowser box:nth-child(5) > box.smallbuttonbox > button.smallbutton:checked {
1608    background-image: image(rgba(30,30,30,.3));
1609    background-color: @bg-button-active;
1610}
1611
1612/* Arrow toggle combo button */
1613#IopsPanel .image-combo button.Right,
1614#MyExpander .image-combo button.Right {
1615    border-left: none;
1616    margin-left: 0;
1617    padding: 0;
1618    border-top-left-radius: 0;
1619    border-bottom-left-radius: 0;
1620    min-width: 1.333333333333333333em;
1621}
1622#IopsPanel .image-combo button.Right image,
1623#MyExpander .image-combo button.Right image {
1624    margin: 0 -0.083333333333333333em;
1625}
1626#IopsPanel .image-combo button.Left,
1627#MyExpander .image-combo button.Left {
1628    border-top-right-radius: 0;
1629    border-bottom-right-radius: 0;
1630    min-width: 2.5em;
1631    margin-right: 0;
1632}
1633#MyExpander .image-combo button.Left {
1634    min-width: 2.75em;
1635}
1636#MyExpander .image-combo button.Left label {
1637    margin-right: 0;
1638}
1639
1640/* Search & Query buttons */
1641#FileBrowserQueryToolbar entry + button.flat,
1642#FileBrowserIconToolbar entry + button.flat {
1643    min-height: 1.666666666666666666em;/*x*/
1644    min-width: 1.666666666666666666em;/*x*/
1645    margin: 0;
1646    border-radius: 0 0.2em 0.2em 0;
1647    box-shadow: inset 0 0.1em rgba(0, 0, 0, 0.1), inset -0.1em -0.1em rgba(230, 230, 230, 0.07);
1648    border: 0.083333333333333333em solid @bg-entry-border;
1649    background-color: @bg-scale-entry;
1650    padding: 0;
1651}
1652#FileBrowserQueryToolbar entry + button.flat:not(:hover):not(:active),
1653#FileBrowserIconToolbar entry + button.flat:not(:hover):not(:active) {
1654    border-left: none;
1655    padding-left: 0.083333333333333333em;
1656}
1657#FileBrowserIconToolbar box > entry + button.flat {
1658    margin-top: 0.416666666666666666em;
1659    margin-bottom: 0.416666666666666666em;
1660    min-height: 0;
1661}
1662
1663/* Small Lock Button */
1664#BeforeAfterContainer button {
1665    min-height: 2em;
1666    min-width: 2em;
1667    margin: 0.25em 0.25em 0.25em 0;
1668    padding: 0;
1669    border-radius: 0.2em;
1670    border: 0.083333333333333333em solid @bg-button-border;
1671    background-color: transparent;
1672    box-shadow: inset 0 0.083333333333333333em rgba(242, 242, 242, 0.1);
1673    background-image: linear-gradient(to bottom, rgba(100,100,100,.3), rgba(30,30,30,.3));
1674}
1675#BeforeAfterContainer button image{
1676    margin: 0 0 0 0.083333333333333333em;
1677}
1678#BeforeAfterContainer button:checked image{
1679    margin: 0.083333333333333333em -0.166666666666666666em 0.083333333333333333em 0.25em;
1680}
1681
1682/* Snapshot & Places buttons */
1683#Snapshots button,
1684#PlacesPaned > box:nth-child(1) scrolledwindow + grid > button {
1685    margin: 0;
1686    padding: 0;
1687    background-color: transparent;
1688    background-image: none;
1689    border: 0.083333333333333333em solid @bg-dark-grey;
1690    border-radius: 0;
1691    box-shadow: none;
1692    min-height: 1.666666666666666666em;/*x*/
1693}
1694
1695#Snapshots button:hover,
1696#PlacesPaned > box:nth-child(1) scrolledwindow + grid > button:hover {
1697background-color: @bg-list-hover;
1698}
1699#Snapshots button:active,
1700#PlacesPaned > box:nth-child(1) scrolledwindow + grid > button:active {
1701background-color: shade(@bg-list-hover, 1.15);
1702}
1703/**/
1704
1705
1706/* View & Filechooser Buttons */
1707.view button {
1708    background-color: @bg-dark-grey;
1709    background-image: none;
1710    box-shadow: none;
1711    min-height: 2em;
1712    min-width: 1.333333333333333333em;
1713    padding: 0 0.19em;
1714    margin: 0;
1715}
1716#pathbarbox button {
1717    min-width: 2em;
1718    margin: 0;
1719    padding: 0;
1720 }
1721window treeview > header image {
1722    min-width: 1.333333333333333333em;
1723}
1724
1725window .view button {
1726    border: none;
1727    border-bottom: 0.083333333333333333em solid @view-grid-border;
1728}
1729dialog .view button {
1730    border: 0.083333333333333333em solid @border-color;
1731}
1732
1733.view button:checked,
1734.view button:hover:not(:active) {
1735    background-image: none;
1736    background-color: @bg-list-hover;
1737}
1738.view button:checked label,
1739.view button:hover:not(:active) label {
1740    color: @headline-hl;
1741}
1742
1743.view header button:not(:first-child):not(:only-child),
1744.path-bar button:not(:first-child):not(:only-child) {
1745    border-left: none;
1746}
1747.view header button,
1748.path-bar button {
1749    border-radius: 0;
1750}
1751
1752.path-bar button:first-child {
1753    border-top-left-radius: 0.2em;
1754    border-bottom-left-radius: 0.2em;
1755    margin: 0;
1756    padding: 0;
1757}
1758.path-bar button:last-child {
1759    border-top-right-radius: 0.2em;
1760    border-bottom-right-radius: 0.2em;
1761    margin: 0;
1762    padding: 0;
1763}
1764#pathbarbox button:not(:first-child):not(:last-child) label {
1765    margin: 0 0.5em;
1766}
1767
1768#pathbarbox button:not(:first-child):not(:last-child) image {
1769    margin: 0 0 0 0.5em;
1770    min-width: 1.333333333333333333em;
1771}
1772/**/
1773
1774/* Popover Filechooser (Create folder) */
1775popover button.text-button {
1776    background-color: @bg-dark-grey;
1777    background-image: none;
1778    border: 0.083333333333333333em solid @border-color;
1779    box-shadow: none;
1780    background-image: none;
1781    padding: 0 0.666666666666666666em;
1782}
1783popover button.text-button label {
1784    padding: 0;
1785    margin: 0;
1786}
1787
1788popover button.text-button:hover label {
1789    color: @headline-hl;
1790}
1791popover button.text-button:hover {
1792    background-color: @bg-list-hover;
1793
1794}
1795popover button.text-button:active label {
1796    color: @text-color;
1797}
1798popover button.text-button:active {
1799    background-color: @bg-dark-grey;
1800}
1801/**/
1802
1803/*** end ***************************************************************************************/
1804
1805/*** Checkbox & Radio **************************************************************************/
1806checkbutton,
1807radiobutton {
1808    padding: 0.083333333333333333em 0;
1809    margin: 0.125em;
1810    min-height: 1.666666666666666666em;/*x*/
1811}
1812
1813check,
1814radio {
1815    border: 0.105em solid shade(@text-color, 0.95);
1816    background-image: none;
1817    background-color: transparent;
1818    margin: 0;
1819    padding: 0;
1820    min-height: 1.166666666666666666em;
1821    min-width: 1.166666666666666666em;
1822    box-shadow: none;
1823    background-repeat: no-repeat;
1824    color: shade(@text-color, 0.95);
1825}
1826check {
1827    border-radius: 0.166666666666666666em;
1828}
1829
1830radio{
1831    border-radius: 1.166666666666666666em;
1832}
1833check:disabled,
1834radio:disabled {
1835    border-color: @fg-disabled;
1836}
1837
1838radiobutton label,
1839checkbutton label {
1840    margin: 0 0.583333333333333333em 0 0.416666666666666666em;
1841    padding: 0;
1842}
1843
1844frame > checkbutton check{
1845    margin-left: 0.5em;
1846}
1847
1848#PartialPaste checkbutton {
1849    padding: 0;
1850    margin: 0 0 0 0.583333333333333333em;
1851}
1852#PartialPaste checkbutton:not(#PartialPasteHeader) {
1853    margin: 0 0 0 1.125em;
1854}
1855
1856/*** end ***************************************************************************************/
1857
1858/*** Entry & Spinbutton ************************************************************************/
1859#MyExpander entry,
1860entry,
1861spinbutton {
1862    margin: 0.125em;
1863    padding: 0 0.333333333333333333em;
1864    min-height: 1.666666666666666666em;/*x*/
1865    min-width: 0;
1866    border-radius: 0.2em;
1867    box-shadow: inset 0.1em 0.1em rgba(0, 0, 0, 0.1), inset -0.1em -0.1em rgba(230, 230, 230, 0.07);
1868    border: 0.083333333333333333em solid @bg-entry-border;
1869    background-color: @bg-scale-entry;
1870}
1871#FileBrowserQueryToolbar entry,
1872#FileBrowserIconToolbar entry {
1873    margin: 0;
1874    border-right: none;
1875    border-top-right-radius: 0;
1876    border-bottom-right-radius: 0;
1877    box-shadow: inset 0.1em 0.1em rgba(0, 0, 0, 0.1), inset 0 -0.1em rgba(230, 230, 230, 0.07);
1878}
1879
1880#FileBrowserIconToolbar box > entry {
1881    margin-top: 0.416666666666666666em;
1882    margin-bottom: 0.416666666666666666em;
1883    margin-left: 0.19em;
1884    min-height: 0;
1885}
1886#FileBrowserQueryToolbar box + box > label + entry {
1887    margin-left: 0.19em;
1888}
1889spinbutton {
1890    padding: 0;
1891}
1892
1893#MyExpander spinbutton {
1894    margin: 0.125em;
1895    padding: 0;
1896    min-height: 1.333333333333333333em;
1897    min-width: 0;
1898    border-top-left-radius: 1.833333333333333333em;
1899    border-bottom-left-radius: 1.833333333333333333em;
1900    background-color: @bg-tb-spinbutton;
1901    border: 0.083333333333333333em solid @bg-button-border;
1902    color: @text-tbEntry;
1903    box-shadow: inset 0.1em  0.1em rgba(0, 0, 0, .1), inset -0.1em -0.1em rgba(250, 250, 250, .08);
1904}
1905/* Needed for Reset & and Auto button height*/
1906#MyExpander button + label + spinbutton {
1907    margin-top: 0.25em;
1908    margin-bottom: 0.25em;
1909}
1910#MyExpander checkbutton + label + spinbutton {
1911    margin-top: 0.333333333333333333em;
1912    margin-bottom: 0.333333333333333333em;
1913}
1914/**/
1915
1916#MyExpander spinbutton button,
1917spinbutton button {
1918    padding: 0;
1919    margin: 0;
1920    min-height: 1.333333333333333333em;
1921    min-width: 1.666666666666666666em;
1922    background-image: none;
1923    background-color: transparent;
1924    border: none;
1925    border-radius: 0;
1926    box-shadow: none;
1927}
1928#MyExpander spinbutton button {
1929    margin: -1px 0;
1930    min-width: 1.333333333333333333em;
1931}
1932
1933#MyExpander spinbutton entry,
1934spinbutton entry {
1935    padding: 0 0.333333333333333333em;
1936    margin: 0;
1937    min-height: 0;
1938    min-width: 0;
1939    box-shadow: none;
1940    border: none;
1941    background-color: transparent;
1942}
1943#MyExpander spinbutton entry {
1944    padding: 0 0.333333333333333333em 0 0.833333333333333333em;
1945}
1946
1947#MyExpander spinbutton button:hover,
1948spinbutton button:hover {
1949    background-color: rgba(0,0,0,0.3);
1950    background-image: none;
1951    border: none;
1952    box-shadow: none;
1953}
1954#MyExpander spinbutton button:active,
1955spinbutton button:active {
1956    background-color: rgba(0,0,0,0.5);
1957    background-image: none;
1958    border: none;
1959    box-shadow: none;
1960}
1961
1962#MyExpander entry:disabled,
1963entry :disabled {
1964    color: rgb(144,144,144);
1965}
1966
1967#MyExpander spinbutton:disabled,
1968spinbutton:disabled {
1969    background-color: shade(@bg-grey,.9);
1970    color: rgb(144,144,144);
1971    box-shadow: none;
1972    border-color: shade(@bg-entry-border,1.1);
1973}
1974
1975    /* Text selection */
1976text > selection,
1977entry > selection  {
1978    background-color: transparent;
1979    color: @text-color;
1980}
1981text:focus > selection,
1982entry:focus > selection  {
1983    background-color: @bg-highlighted-text-color;
1984    color: @highlighted-text-color;
1985}
1986
1987.view entry {
1988    background-color: @bg-dark-grey;
1989    margin: 0 -2px;
1990    border: 0.083333333333333333em solid @accent-color;
1991    box-shadow: none;
1992}
1993    /* end*/
1994
1995/*** end ***************************************************************************************/
1996
1997/* Curves **************************************************************************************/
1998.curve-mainbox {
1999    margin: 0.19em;
2000    border: 0.083333333333333333em solid @border-color;
2001}
2002.curve-mainbox .curve-curvebox {
2003    margin: 0;
2004    padding: 0.416666666666666666em;
2005    background-color: @bg-dark-grey;
2006}
2007.curve-mainbox .curve-spinbuttonbox {
2008    margin: 0;
2009    padding: 0.25em;
2010    border-top: 0.083333333333333333em solid @border-color;
2011    background-color: @bg-dark-grey;
2012}
2013.curve-mainbox .curve-sliderbox {
2014    margin: 0;
2015    padding: 0.25em;
2016    background-color: @bg-grey;
2017    border-top: 0.083333333333333333em solid @border-color;
2018}
2019.curve-mainbox .curve-buttonbox {
2020    padding: 0.25em;
2021    background-color: @bg-dark-grey;
2022}
2023.curve-mainbox.left .curve-buttonbox {
2024    border-right: 0.083333333333333333em solid @border-color;
2025}
2026.curve-mainbox.right .curve-buttonbox {
2027    border-left: 0.083333333333333333em solid @border-color;
2028}
2029.curve-mainbox.top .curve-buttonbox {
2030    border-bottom: 0.083333333333333333em solid @border-color;
2031}
2032.curve-mainbox.bottom .curve-buttonbox {
2033    border-top: 0.083333333333333333em solid @border-color;
2034}
2035.curve-mainbox .curve-buttonbox button.flat {
2036    margin: 0.095em;
2037}
2038/*** end ***************************************************************************************/
2039
2040/*** Window Layout *****************************************************************************/
2041.csd:not(.popup):not(tooltip) > decoration {
2042    background-color: @winHeaderbar;
2043    background-image: none;
2044    border-radius: 0.416666666666666666em 0.416666666666666666em 0 0;
2045    border: none;
2046    padding: 0;
2047    box-shadow: 0 0.25em 0.75em 0.083333333333333333em rgba(0, 0, 0, 0.5), 0 0 0 0.083333333333333333em @bg-dark-grey;
2048    margin: 0.833333333333333333em;
2049}
2050headerbar {
2051    background-color: shade(@winHeaderbar,1.12);
2052    box-shadow: inset 0 0.083333333333333333em rgba(200,200,200,.13);
2053    background-image: linear-gradient(shade(@winHeaderbar,1.14), shade(@winHeaderbar,.86));
2054    border-bottom: 0.083333333333333333em solid @bg-dark-grey;
2055    border-radius: 0.416666666666666666em 0.416666666666666666em 0 0;
2056    min-height: 2em;
2057    padding: 0.083333333333333333em 0.416666666666666666em 0;
2058    margin: 0;
2059}
2060headerbar .title{
2061    color: @winTitle;
2062}
2063
2064/* Window state */
2065.maximized > headerbar {
2066    border-radius: 0;
2067}
2068/**/
2069
2070/* Window in background */
2071.csd:not(.popup):not(tooltip) > decoration:backdrop {
2072    box-shadow: 0 0.25em 0.75em 0.083333333333333333em rgba(0, 0, 0, 0.3), 0 0 0 0.083333333333333333em @bg-dark-grey;
2073}
2074headerbar:backdrop {
2075    box-shadow: none;
2076    background-image: none;
2077}
2078headerbar .title:backdrop {
2079    color: alpha(@winTitle,.60);
2080}
2081/* Titlebar buttons*/
2082
2083headerbar button.titlebutton image {
2084    padding: 0;
2085    margin: 0;
2086}
2087headerbar button.titlebutton {
2088    margin: 0 0 0 0.333333333333333333em;
2089    background-image: none;
2090    border: 0.083333333333333333em solid transparent;
2091    background-color: transparent;
2092    box-shadow: none;
2093    min-width: 1.5em;
2094    min-height: 1.5em;
2095    padding: 0;
2096}
2097messagedialog headerbar button.titlebutton {
2098    min-width: 1.25em;
2099    min-height: 1.25em;
2100    margin: 0;
2101}
2102headerbar button.titlebutton:hover{
2103    border-color: rgba(0,0,0,.8);
2104    box-shadow: inset 0 0.083333333333333333em rgba(242, 242, 242, 0.11);
2105    background-image: linear-gradient(to bottom, rgba(100,100,100,.3), rgba(30,30,30,.3));
2106    background-color: rgba(128, 128, 128,.20);
2107}
2108headerbar button.titlebutton:active{
2109    border-color: rgba(0,0,0,.8);
2110    box-shadow: inset 0 0.083333333333333333em rgba(242, 242, 242, 0.15);
2111    background-image: linear-gradient(to bottom, rgba(100,100,100,.3), rgba(30,30,30,.3));
2112    background-color: rgba(128, 128, 128,.40);
2113}
2114headerbar button.titlebutton.close:hover{
2115    border-color: rgba(0,0,0,.8);
2116    background-image: linear-gradient(to bottom, rgb(180,0,0), rgb(160,0,0) 40%, rgb(130,0,0));
2117    box-shadow: inset 0 0.083333333333333333em rgba(242, 242, 242, 0.32);
2118}
2119headerbar button.titlebutton.close:active{
2120    border-color: rgba(0,0,0,.8);
2121    background-image: linear-gradient(to bottom, rgb(215,0,0), rgb(185,0,0) 40%, rgb(150,0,0));
2122    box-shadow: inset 0 0.083333333333333333em rgba(242, 242, 242, 0.4);
2123}
2124/*** end ***************************************************************************************/
2125
2126