1/* Zukitwo-Colors Cinnamon theme by http://karashata.deviantart.com */
2
3/* ###################################################################
4 * Section common with Gnome Shell
5 * ... contains a few cinnamon specific styles (rare occurences)
6 * ###################################################################*/
7stage {
8	font-family: Ubuntu, Droid Sans, Trebuchet MS, Liberation Sans, sans-serif;
9}
10
11* {
12	font-size: 9pt; /* The default font size. */
13	color: white;
14}
15
16/* small fonts */
17.run-dialog-label, .run-dialog-error-label {
18	font-size: 8pt;
19}
20
21/* small 7.5 pt */
22.calendar-month-label, .calendar-day-base {
23	font-size: 7.5pt;
24}
25
26/* small bold fonts */
27.window-caption, .switcher-list, .expo-workspaces-name-entry, #Tooltip {
28	font-size: 8pt;
29	font-weight: bold;
30	background-gradient-direction: vertical;
31	background-gradient-start: rgba(219,255,243,0.9);
32	background-gradient-end: rgba(219,255,251,0.9);
33	color: #000000;
34}
35
36.cinnamon-link {
37	color: #00FF00;
38	text-decoration: underline;
39}
40
41.cinnamon-link:hover {
42	color: #0000e0;
43}
44
45StScrollBar {
46	padding: 0px;
47}
48
49StScrollView.vfade {
50	-st-vfade-offset: 68px;
51}
52
53StScrollView.hfade {
54	-st-hfade-offset: 68px;
55}
56
57StScrollView StScrollBar {
58	min-width: 8px;
59	min-height: 20px;
60}
61
62
63StScrollBar StBin#trough {
64	background-gradient-direction: vertical;
65	background-gradient-start: rgba(255,255,255,0.2);
66	background-gradient-end: rgba(255,255,255,0.0);
67	box-shadow: inset 2px 2px 2px 0px rgba(0,0,0,0.1) ;
68	border: 1px solid rgba(0,0,0,0.2);
69	border-radius: 8px;
70}
71
72StScrollBar StButton#vhandle {
73	background-gradient-direction: horizontal;
74	background-gradient-start: rgba(255,255,255,0.4);
75	background-gradient-end: rgba(255,255,255,0.3);
76	border: 1px solid rgba(0,0,0,0.25);
77	border-radius: 8px;
78}
79
80StScrollBar StButton#hhandle {
81	background-gradient-direction: horizontal;
82	background-gradient-start: rgba(255,255,255,0.5);
83	background-gradient-end: rgba(255,255,255,0.6);
84	border: 1px solid rgba(0,0,0,0.25);
85	border-radius: 8px;
86}
87
88StScrollBar StButton#hhandle:hover,
89StScrollBar StButton#vhandle:hover {
90	background-gradient-direction: horizontal;
91	background-gradient-start: rgba(255,255,255,0.8);
92	background-gradient-end: rgba(255,255,255,0.9);
93}
94
95#Tooltip {
96	border-radius: 2px;
97	padding: 4px 12px;
98	text-align: center;
99}
100
101/* ===================================================================
102 * Shared button properties
103 * ===================================================================*/
104.notification-button,
105.notification-icon-button,
106.hotplug-notification-item,
107.hotplug-resident-eject-button,
108.modal-dialog-button,
109.sound-button {
110	border-radius: 2px;
111	border-width: 1px;
112	border-color: rgba(78,78,78,0.9);
113	background-gradient-direction: vertical;
114	background-gradient-start: rgba(58,58,58,1.0);
115	background-gradient-end: rgba(32,32,32,1.0);
116	box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.5);
117}
118
119.notification-button:hover,
120.notification-icon-button:hover,
121.hotplug-notification-item:hover,
122.hotplug-resident-eject-button:hover,
123.modal-dialog-button:hover,
124.sound-button:hover {
125	border-color: rgba(98,98,98,0.9);
126	background-gradient-direction: vertical;
127	background-gradient-start: rgba(68,68,68,1.0);
128	background-gradient-end: rgba(58,58,58,1.0);
129}
130
131.notification-button:focus,
132.notification-icon-button:focus,
133.hotplug-notification-item:focus,
134.modal-dialog-button:focus,
135.sound-button:focus {
136	box-shadow: 0px 0px 2px 1px rgba(153,125,97,0.9);
137}
138
139.notification-button:active,
140.notification-icon-button:active,
141.hotplug-notification-item:active,
142.hotplug-resident-eject-button:active,
143.modal-dialog-button:active,
144.modal-dialog-button:pressed,
145.sound-button:active {
146	border-color: rgba(98,98,98,0.4);
147	background-gradient-direction: vertical;
148	background-gradient-start: rgba(28,28,28,1.0);
149	background-gradient-end: rgba(32,32,32,1.0);
150	box-shadow: inset 0px 1px 5px rgba(0,0,0,0.35);
151}
152
153/* ===================================================================
154 * PopupMenu (popupMenu.js)
155 * ===================================================================*/
156/* .popup-menu-boxpointer and .popup-menu are kept for compatibility
157    with cinnamon version under 3.2. Use .menu in version 3.2 and above */
158.popup-menu-boxpointer {
159	/* Keeping arrow style for extra effect and less "warning junk" in .xsession-errors */
160	/* Border seems to behave strange with single background-color. Background-gradient fixes it. */
161	-arrow-border-radius: 0px;
162	-arrow-background-color: rgba(48,48,48,0.0);
163	-arrow-border-width: 0px;
164	-arrow-border-color: rgba(255,255,255,0.0);
165	-arrow-base: 4px;
166	-arrow-rise: 2px;
167	border: 2px solid rgba(255,255,255,0.6);
168	background-gradient-direction: vertical;
169	background-gradient-start: rgba(32,32,32,1.0);
170	background-gradient-end: rgba(32,32,32,1.0);
171	box-shadow: 0px 0px 2px 1px rgba(0,0,0,0.5);
172	border-radius: 0px;
173}
174
175.popup-menu {
176	color: #fff;
177	min-width: 85px;
178}
179
180.menu {
181	border-radius: 0px;
182	background-color: rgba(48,48,48,0.0);
183	border-color: rgba(255,255,255,0.0);
184	border: 2px solid rgba(255,255,255,0.6);
185	background-gradient-direction: vertical;
186	background-gradient-start: rgba(32,32,32,1.0);
187	background-gradient-end: rgba(32,32,32,1.0);
188	box-shadow: 0px 0px 2px 1px rgba(0,0,0,0.5);
189    color: #fff;
190    min-width: 85px;
191}
192
193.popup-submenu-menu-item:open {
194	background-color: #4c4c4c;
195}
196
197.popup-sub-menu { /* Don't use border-radius or box-shadow here. It causes the shell to crash. */
198	background-gradient-direction: vertical;
199	background-gradient-start: rgba(0,0,0,0.0);
200	background-gradient-end: rgba(0,0,0,0.0);
201}
202
203.popup-sub-menu .popup-menu-item:ltr {
204	padding-right: 0em;
205}
206
207.popup-sub-menu .popup-menu-item:rtl {
208	padding-left: 0em;
209}
210
211.popup-sub-menu StScrollBar {
212	padding: 2px;
213}
214
215.popup-sub-menu StScrollBar StBin#trough {
216	border-width: 0px;
217}
218
219.popup-sub-menu StScrollBar StBin#vhandle {
220	background-color: #4c4c4c;
221	border-width: 0px;
222}
223
224.popup-combo-menu {
225	background-color: rgba(0,0,0,0.9);
226	padding: 1em 0em;
227	color: #ffffff;
228	border: 1px solid #5f5f5f;
229	border-radius: 4px;
230}
231
232/* The remaining popup-menu sizing is all done in ems, so that if you
233 * override .popup-menu.font-size, everything else will scale with it.
234 */
235.popup-menu-content {
236	padding: 0.5em 0em;
237}
238
239.popup-menu-item {
240	font-weight: normal;
241	padding: .4em 1.75em;
242	spacing: 1em;
243	color: #fff;
244	border: 1px solid rgba(180,147,114,0.0);
245	border-left-width: 0;
246	border-right-width: 0;
247}
248
249.popup-menu-item:active {
250	background-gradient-direction: vertical;
251	background-gradient-start: rgba(114,180,147,0.9);
252	background-gradient-end: rgba(114,180,165,0.9);
253	color: #fff;
254	border: 1px solid rgba(255,255,255,0.35);
255	border-left-width: 0;
256	border-right-width: 0;
257}
258
259.popup-menu-item:insensitive {
260	color: #9f9f9f;
261}
262
263.popup-image-menu-item {
264}
265
266.popup-combobox-item {
267	spacing: 1em;
268}
269
270.popup-separator-menu-item {
271	background-color: rgba(255,255,255,0.1);
272	border: 1px solid rgba(0,0,0,0.5);
273	border-bottom: 0px;
274	border-left: 0px;
275	border-right: 0px;
276	height: 0.1em;
277}
278
279.popup-alternating-menu-item:alternate {
280	font-weight: bold;
281}
282
283.popup-slider-menu-item {
284	height: 1em;
285	min-width: 15em;
286	-slider-height: 2px;
287	-slider-background-color: #333333;
288	-slider-border-color: #5f5f5f;
289	-slider-active-background-color: rgba(180,147,114,0.9);
290	-slider-active-border-color: rgba(153,125,97,0.9);
291	-slider-border-width: 1px;
292	-slider-handle-radius: 0.5em;
293}
294
295.popup-device-menu-item {
296	spacing: .5em;
297}
298
299.popup-inactive-menu-item {
300	font-weight: normal;
301	color: #999;
302}
303
304.popup-subtitle-menu-item {
305	font-weight: bold;
306}
307
308.popup-menu-icon {
309	icon-size: 1.09em;
310}
311
312/* Switches (to be used in menus) */
313.toggle-switch {
314	width: 32px;
315	height: 16px;
316	background-color: rgba(0,0,0,0.5);
317}
318
319.toggle-switch-us {
320	background-image: url("switch-off.png");
321	background-size: contain;
322}
323
324.toggle-switch-us:checked {
325	background-image: url("switch-on.png");
326	background-size: contain;
327}
328
329.toggle-switch-intl {
330	background-image: url("switch-off.png");
331	background-size: contain;
332}
333
334.toggle-switch-intl:checked {
335	background-image: url("switch-on.png");
336	background-size: contain;
337}
338
339.nm-menu-item-icons {
340	spacing: .5em;
341}
342
343/* ===================================================================
344 * Panel (panel.js)
345 * ===================================================================*/
346#panel {
347	border: 1px solid rgba(255,255,255,0.2);
348	border-left: 0px;
349	border-right: 0px;
350	border-radius: 0px;
351	color: white;
352	background-gradient-direction: vertical;
353	background-gradient-start: rgba(0,0,0,0.1);
354	background-gradient-end: rgba(0,0,0,0.4);
355	height: 24px;
356	font-weight: normal;
357}
358
359#panelLeft, #panelCenter, #panelRight {
360	spacing: 2px;
361}
362
363#panelLeft:dnd {
364	background-gradient-direction: vertical;
365	background-gradient-start: rgba(255,0,0,0.05);
366	background-gradient-end: rgba(255,0,0,0.2);
367}
368
369#panelCenter:dnd {
370	background-gradient-direction: vertical;
371	background-gradient-start: rgba(0,255,0,0.05);
372	background-gradient-end: rgba(0,255,0,0.2);
373}
374
375#panelRight:dnd {
376	background-gradient-direction: vertical;
377	background-gradient-start: rgba(0,0,255,0.05);
378	background-gradient-end: rgba(0,0,255,0.2);
379}
380
381#panelLeft:ltr {
382	padding-right: 4px;
383}
384
385#panelLeft:rtl {
386	padding-left: 4px;
387}
388
389#panelRight:ltr {
390	padding-left: 4px;
391}
392
393#panelRight:rtl {
394	padding-right: 4px;
395}
396
397.panel-button {
398	-natural-hpadding: 10px;
399	-minimum-hpadding: 6px;
400	font-weight: bold;
401	color: #fff;
402	border: 1px solid rgba(255,255,255,0);
403	border-top: 0px;
404	border-bottom: 0px;
405	transition-duration: 200;
406}
407
408.panel-button:hover {
409	border: 1px solid rgba(255,255,255,0.4);
410	border-top: 0px;
411	border-bottom: 0px;
412	color: white;
413	background-gradient-direction: vertical;
414	background-gradient-start: rgba(255,255,255,0.3);
415	background-gradient-end: rgba(255,255,255,0.2);
416}
417
418.panel-button:active,
419.panel-button:overview,
420.panel-button:focus {
421	border: 1px solid rgba(255,255,255,0.1);
422	border-top: 0px;
423	border-bottom: 0px;
424	background-gradient-direction: vertical;
425	background-gradient-start: rgba(0,0,0,0.1);
426	background-gradient-end: rgba(0,0,0,0.25);
427	color: white;
428	box-shadow: inset 0px 1px 5px rgba(0,0,0,0.251);
429}
430
431.panel-status-button:active,
432.panel-status-button:checked,
433.panel-status-button:focus {
434	border: 1px solid rgba(255,255,255,0.1);
435	border-top: 0px;
436	border-bottom: 0px;
437	background-gradient-direction: vertical;
438	background-gradient-start: rgba(0,0,0,0.1);
439	background-gradient-end: rgba(0,0,0,0.25);
440	color: white;
441}
442
443.panel-button:active > .system-status-icon,
444.panel-button:checked > .system-status-icon,
445.panel-button:focus > .system-status-icon {
446	icon-shadow: black 0px 0px 3px;
447}
448
449.panel-menu {
450	-boxpointer-gap: 3px /* Distance between the menu and panel */
451}
452
453.system-status-icon {
454	icon-size: 1.09em;
455}
456
457/* ===================================================================
458 * Overview
459 * ===================================================================*/
460#overview {
461	spacing: 12px;
462	background-color: rgba(100,100,100,0.3);
463}
464
465.window-caption {
466	color: white;
467	spacing: 25px;
468}
469
470.workspace-controls {
471	visible-width: 32px; /* Amount visible before hovering */
472}
473
474.workspace-thumbnails-background {
475	background-color: rgba(0,0,0,0.0);
476	border: 0px solid rgba(0,0,0,0.0);
477	border-right: 0px;
478	border-radius: 0px;
479	padding: 8px;
480}
481
482.workspace-thumbnails-background:rtl {
483	border-right: 1px;
484	border-left: 0px;
485	border-radius: 0px;
486}
487
488.workspace-thumbnails {
489	spacing: 7px;
490}
491
492.workspace-thumbnail-indicator {
493	outline: 1px solid rgba(255,255,255,0.2);
494	border: 1px solid rgba(255,255,255,0.5);
495}
496
497.workspace-add-button {
498	background-image: url("add-workspace.png");
499	height: 200px;
500	width: 35px;
501}
502
503.workspace-add-button:hover {
504
505}
506
507.workspace-close-button {
508	background-image: url("close-window.svg");
509	background-size: 22px;
510	height: 22px;
511	width: 22px;
512	-cinnamon-close-overlap: 8px;
513}
514
515.window-caption {
516	background-color: rgba(0,0,0,0.5);
517	border: 1px solid rgba(255,255,255,0.25);
518	border-radius: 6px;
519	color: #fff;
520	padding: 6px 8px;
521	-cinnamon-caption-spacing: 1px;
522}
523
524.window-close {
525	background-image: url("close-window.svg");
526	background-size: 22px;
527	height: 22px;
528	width: 22px;
529	-cinnamon-close-overlap: 8px;
530}
531
532.window-close:hover {
533	-st-background-image-shadow: 0px 0px 4px rgba(255,255,255,0.9);
534}
535
536.window-close:rtl {
537	-st-background-image-shadow: 2px 2px 6px rgba(0,0,0,0.5);
538}
539
540/* ===================================================================
541 * Looking Glass
542 * ===================================================================*/
543#LookingGlassDialog {
544	border: 0;
545	background-gradient-direction: vertical;
546	background-gradient-start: rgba(32,32,32,1.0);
547	background-gradient-end: rgba(32,32,32,1.0);
548	spacing: 8px;
549	padding: 4px;
550}
551
552#LookingGlassDialog > #Toolbar {
553	border: 1px solid grey;
554	border-radius: 2px;
555}
556
557#LookingGlassDialog .labels {
558	spacing: 4px;
559}
560
561#LookingGlassDialog .notebook-tab {
562	-natural-hpadding: 12px;
563	-minimum-hpadding: 6px;
564	font-weight: bold;
565	color: #ccc;
566	padding-left: .3em;
567	padding-right: .3em;
568}
569
570#LookingGlassDialog .notebook-tab:hover {
571	color: white;
572	text-shadow: black 0px 2px 2px;
573}
574
575#LookingGlassDialog .notebook-tab:selected {
576	border-image: url("panel-button-border.svg") 10 10 0 2;
577	background-image: url("panel-button-highlight-wide.svg");
578	color: white;
579	text-shadow: black 0px 2px 2px;
580}
581
582#LookingGlassDialog .lg-inspector-title {
583	font-weight: bold;
584	padding-bottom: 8px;
585}
586
587.lg-dialog StEntry {
588	selection-background-color: #bbbbbb;
589	selected-color: #333333;
590}
591
592.lg-completions-text {
593	font-size: .9em;
594	font-style: italic;
595}
596
597.lg-obj-inspector-title {
598	spacing: 4px;
599}
600
601.lg-obj-inspector-button {
602	border: 1px solid gray;
603	padding: 4px;
604	border-radius: 4px;
605}
606
607.lg-obj-inspector-button:hover {
608	border: 1px solid #ffffff;
609}
610
611.lg-dialog .cinnamon-link {
612	color: #999999;
613}
614
615.lg-dialog .cinnamon-link:hover {
616	color: #dddddd;
617}
618
619#LookingGlassDialog StBoxLayout#EvalBox {
620	padding: 4px;
621	spacing: 4px;
622}
623
624#LookingGlassDialog StBoxLayout#ResultsArea {
625	spacing: 4px;
626}
627
628#lookingGlassExtensions {
629	padding: 4px;
630}
631
632.lg-extension-list {
633	padding: 4px;
634	spacing: 6px;
635}
636
637.lg-extension {
638	border: 1px solid #6f6f6f;
639	border-radius: 4px;
640	padding: 4px;
641}
642
643.lg-extension-name {
644	font-weight: bold;
645}
646
647.lg-extension-meta {
648	spacing: 6px;
649}
650
651#LookingGlassPropertyInspector {
652	background: rgba(0, 0, 0, 0.8);
653	border: 2px solid grey;
654	border-radius: 4px;
655	padding: 6px;
656}
657
658/* ===================================================================
659 * Date applet
660 * ===================================================================*/
661.calendar-vertical-separator {
662	-stipple-width: 1px;
663	-stipple-color: rgba(255,255,255,0.2);
664	width: 0.3em;
665}
666
667#calendarPopup {
668	border: 2px solid rgba(255,255,255,0.6);
669	background-gradient-direction: vertical;
670	background-gradient-start: rgba(32,32,32,1.0);
671	background-gradient-end: rgba(32,32,32,1.0);
672	box-shadow: 0px 0px 2px 1px rgba(0,0,0,0.5);
673	border-radius: 0px;
674	color: white;
675}
676
677#calendarPopup .calendar {
678	padding: 10px;
679}
680
681.calendar {
682	padding: .4em 1.75em;
683	spacing-rows: 0px;
684	spacing-columns: 0px;
685}
686
687.calendar-month-label {
688	color: #e2e2e2;
689	padding-bottom: 8px;
690	padding-top: 8px;
691	font-weight: bold;
692}
693
694.calendar-change-month-back {
695	width: 18px;
696	height: 12px;
697	background-image: url("calendar-arrow-left.svg");
698	border-radius: 4px;
699}
700
701.calendar-change-month-back:rtl {
702	background-image: url("calendar-arrow-right.svg");
703}
704
705.calendar-change-month-back:hover {
706	background-color: rgba(255,255,255,0.1);
707}
708.calendar-change-month-back:active {
709	background-color: rgba(255,255,255,0.1);
710}
711
712.calendar-change-month-forward {
713	width: 18px;
714	height: 12px;
715	background-image: url("calendar-arrow-right.svg");
716	border-radius: 4px;
717}
718
719.calendar-change-month-forward:rtl {
720	background-image: url("calendar-arrow-left.svg");
721}
722
723.calendar-change-month-forward:hover {
724	background-color: rgba(255,255,255,0.1);
725}
726.calendar-change-month-forward:active {
727	background-color: rgba(255,255,255,0.1);
728}
729
730.datemenu-date-label {
731	padding: .4em 1.75em;
732	color: #e2e2e2;
733	font-weight: bold;
734}
735
736.calendar-day-base {
737	text-align: center;
738	width: 2.4em;
739	height: 2.4em;
740}
741
742.calendar-day-base:hover {
743	background-color: rgba(255,255,255,0.2);
744	color: #fff;
745}
746
747.calendar-day-base:active {
748	background-gradient-direction: vertical;
749	background-gradient-start: rgba(255,255,255,0.2);
750	background-gradient-end: rgba(255,255,255,0.2);
751	box-shadow:inset 0px 0px 0px 1px rgba(255,255,255,0.1);
752}
753
754.calendar-today.calendar-day-base:active {
755	background-gradient-direction: vertical;
756	background-gradient-start: rgba(255,255,255,0.4);
757	background-gradient-end: rgba(255,255,255,0.4);
758	box-shadow:inset 0px 0px 0px 1px rgba(255,255,255,0.2);
759}
760
761.calendar-day-heading {
762	color: #e2e2e2;
763	padding-top: 1em;
764}
765
766.calendar-week-number {
767	color: #e2e2e2;
768	font-weight: bold;
769}
770
771/* Hack used in lieu of border-collapse - see calendar.js */
772.calendar-day {
773	border: 1px solid #333;
774	color: #e2e2e2;
775	border-top-width: 0;
776	border-left-width: 0;
777	border-radius: 0px;
778	width: 32px;
779}
780.calendar-day-top {
781	border-top-width: 1px;
782}
783.calendar-day-left {
784	border-left-width: 1px;
785}
786
787.calendar-work-day {
788	border-color: #444;
789}
790
791.calendar-nonwork-day {
792	background-color: rgba(128,128,128,.1);
793	border-color: #555;
794}
795
796.calendar-today {
797	background-gradient-direction: vertical;
798	background-gradient-start: rgba(255,255,255,0.4);
799	background-gradient-end: rgba(255,255,255,0.4);
800	box-shadow:inset 0px 0px 0px 1px rgba(255,255,255,0.2);
801	color: #ffffff;
802	font-weight: bold;
803}
804
805.calendar-other-month-day {
806	color: #e2e2e2;
807}
808
809.calendar-day-with-events {
810	font-weight: bold;
811	color: #fff;
812}
813
814/* ===================================================================
815 * Notifications
816 * ===================================================================*/
817#notification {
818	border: 2px solid rgba(255,255,255,0.5);
819	background-gradient-direction: vertical;
820	background-gradient-start: rgba(32,32,32,1.0);
821	background-gradient-end: rgba(32,32,32,1.0);
822	border-radius: 0;
823	padding: 8px;
824	spacing-rows: 10px;
825	spacing-columns: 10px;
826	width: 34em;
827	margin-from-right-edge-of-screen: 8px;
828	margin-from-top-edge-of-screen: 8px;
829}
830
831/* We use row-span = 2 for the image cell, which prevents its height preferences to be
832   taken into account during allocation, so its height ends up being limited by the height
833   of the content in the other rows. To avoid showing a stretched image, we set the minimum
834   height of the table to be ICON_SIZE + IMAGE_SIZE + spacing-rows = 24 + 125 + 10 = 159 */
835.notification-with-image {
836	min-height: 159px;
837}
838
839#notification-scrollview {
840	max-height: 10em;
841	-st-vfade-offset: 24px;
842}
843
844#notification-scrollview > .top-shadow, #notification-scrollview > .bottom-shadow {
845	height: 1em;
846}
847
848#notification-scrollview:ltr > StScrollBar {
849	padding-left: 6px;
850}
851
852#notification-scrollview:rtl > StScrollBar {
853	padding-right: 6px;
854}
855
856#notification-body {
857	spacing: 5px;
858}
859
860#notification-actions {
861	spacing: 10px;
862}
863
864.notification-button {
865	padding: 4px 42px 5px;
866}
867
868.notification-icon-button {
869	border-radius: 2px;
870	padding: 5px;
871}
872
873.notification-icon-button > StIcon {
874	icon-size: 16px;
875	padding: 8px;
876}
877
878.hotplug-transient-box {
879	spacing: 6px;
880	padding: 2px 46px 2px 12px;
881}
882
883.hotplug-notification-item {
884	padding: 2px 10px;
885}
886
887.hotplug-notification-item-icon {
888	icon-size: 24px;
889	padding: 2px 5px;
890}
891
892.hotplug-resident-box {
893	spacing: 8px;
894}
895
896.hotplug-resident-mount {
897	color: white;
898	border: 1px solid rgba(0,0,0,0.0);
899}
900
901.hotplug-resident-mount:hover {
902	color: white;
903	background-gradient-direction: vertical;
904	background-gradient-start: rgba(255,255,255,0.12);
905	background-gradient-end: rgba(255,255,255,0.05);
906	box-shadow: inset 0px 0px 1px 1px rgba(255,255,255,0.15);
907	border: 1px solid rgba(0,0,0,0.15);
908	border-radius: 3px;
909}
910
911.hotplug-resident-mount-label {
912	color: inherit;
913	padding-left: 6px;
914}
915
916.hotplug-resident-mount-icon {
917	icon-size: 24px;
918	padding-left: 6px;
919}
920
921.hotplug-resident-eject-icon {
922	icon-size: 20px;
923}
924
925.hotplug-resident-eject-button {
926	padding: 7px;
927}
928
929.chat-log-message {
930	color: #888888;
931}
932
933.chat-group-sent, .chat-group-meta {
934	padding: 8px 0;
935}
936
937.chat-received {
938	padding-left: 4px;
939}
940
941.chat-received:rtl {
942	padding-left: 0px;
943	padding-right: 4px;
944}
945
946.chat-sent {
947	padding-left: 18pt;
948	color: #959595;
949}
950
951.chat-sent:rtl {
952	padding-left: 0px;
953	padding-right: 18pt;
954}
955
956.chat-meta-message {
957	padding-left: 4px;
958	color: #bbbbbb;
959}
960
961.chat-meta-message:rtl {
962	padding-left: 0px;
963	padding-right: 4px;
964}
965
966.subscription-message {
967	font-style: italic;
968}
969
970#notification StEntry {
971	padding: 4px;
972	selected-color: white;
973	color: #c0c0c0;
974	border: 1px solid rgba(200,200,200,0.12);
975	background-color: rgba(0,0,0,0.3);
976	box-shadow: inset 0px 1px 2px 0px rgba(0,0,0,0.5);
977	border-radius: 2px;
978	caret-color: white;
979	caret-size: 1px;
980}
981
982#notification StEntry:focus {
983	color: white;
984	border: 1px solid rgba(200,200,200,0.3);
985
986	caret-color: white;
987	selection-background-color: #72B493;
988}
989
990/* ===================================================================
991 * Alt Tab
992 * ===================================================================*/
993#altTabPopup {
994	padding: 8px;
995	spacing: 16px;
996}
997
998.switcher-list {
999	border: 2px solid rgba(255,255,255,0.6);
1000	background-gradient-direction: vertical;
1001	background-gradient-start: rgba(32,32,32,1.0);
1002	background-gradient-end: rgba(32,32,32,1.0);
1003	box-shadow: 0px 0px 2px 1px rgba(0,0,0,0.5);
1004	border-radius: 0;
1005	padding: 20px;
1006	color: white;
1007}
1008
1009.switcher-list-item-container {
1010	spacing: 8px;
1011}
1012
1013.thumbnail-scroll-gradient-left {
1014	background-gradient-direction: horizontal;
1015	background-gradient-start: rgba(51,51,51,1.0);
1016	background-gradient-end: rgba(51,51,51,0);
1017	border-radius: 24px;
1018	border-radius-topright: 0px;
1019	border-radius-bottomright: 0px;
1020	width: 60px;
1021}
1022
1023.thumbnail-scroll-gradient-right {
1024	background-gradient-direction: horizontal;
1025	background-gradient-start: rgba(51,51,51,0);
1026	background-gradient-end: rgba(51,51,51,1.0);
1027	border-radius: 24px;
1028	border-radius-topleft: 0px;
1029	border-radius-bottomleft: 0px;
1030	width: 60px;
1031}
1032
1033.switcher-list .item-box {
1034	padding: 8px;
1035	border-radius: 8px;
1036}
1037
1038.switcher-list .item-box:outlined {
1039	background-gradient-direction: vertical;
1040	background-gradient-start: rgba(180,147,114,0.9);
1041	background-gradient-end: rgba(153,125,97,0.9);
1042	box-shadow: inset 0px 0px 1px 1px rgba(255,255,255,0.3);
1043	border-radius: 3px;
1044	color: rgba(255,255,255,1.0);
1045	padding: 6px;
1046}
1047
1048.switcher-list .item-box:selected {
1049	background-gradient-direction: vertical;
1050	background-gradient-start: rgba(180,147,114,0.9);
1051	background-gradient-end: rgba(153,125,97,0.9);
1052	box-shadow: inset 0px 0px 1px 1px rgba(255,255,255,0.3);
1053	border-radius: 3px;
1054	color: rgba(255,255,255,1.0);
1055}
1056
1057.switcher-list .thumbnail-box {
1058	padding: 2px;
1059	spacing: 4px;
1060}
1061
1062.switcher-list .thumbnail {
1063	width:  256px;
1064}
1065
1066.switcher-list .separator {
1067	width: 1px;
1068	background: rgba(255,255,255,0.33);
1069}
1070
1071.ripple-box {
1072	width: 52px;
1073	height: 52px;
1074	background-image: url("corner-ripple-ltr.png");
1075	background-size: contain;
1076}
1077
1078.ripple-box:rtl {
1079	background-image: url("corner-ripple-rtl.png");
1080}
1081
1082.switcher-arrow {
1083	border-color: rgba(0,0,0,0);
1084	color: #808080;
1085}
1086
1087.switcher-arrow:highlighted {
1088	border-color: rgba(0,0,0,0);
1089	color: white;
1090}
1091
1092/* ===================================================================
1093 * Modal dialogs
1094 * ===================================================================*/
1095.show-processes-dialog-subject,
1096.mount-question-dialog-subject,
1097.end-session-dialog-subject {
1098	font-weight: bold;
1099	color: #fff;
1100}
1101
1102.modal-dialog {
1103	border: 2px solid rgba(255,255,255,0.6);
1104	background-gradient-direction: vertical;
1105	background-gradient-start: rgba(32,32,32,1.0);
1106	background-gradient-end: rgba(32,32,32,1.0);
1107	box-shadow: 0px 0px 2px 1px rgba(0,0,0,0.5);
1108	border-radius: 0;
1109	color: #fff;
1110
1111	padding-right: 42px;
1112	padding-left: 42px;
1113	padding-bottom: 30px;
1114	padding-top: 30px;
1115}
1116
1117.modal-dialog-button-box {
1118	spacing: 21px;
1119}
1120
1121.modal-dialog-button {
1122	margin-left: 10px;
1123	margin-right: 10px;
1124	padding: 4px 32px 5px;
1125}
1126
1127.modal-dialog-button:disabled {
1128	color: rgb(60,60,60);
1129}
1130
1131/* ===================================================================
1132 * Run dialog
1133 * ===================================================================*/
1134.run-dialog-error-box {
1135	padding-top: 15px;
1136	spacing: 5px;
1137}
1138
1139.run-dialog-entry {
1140	font-weight: normal;
1141	width: 23em;
1142	selection-background-color: #72B493;
1143	selected-color: white;
1144	border-radius: 2px;
1145	padding: 4px;
1146	color: white;
1147	border: 1px solid rgba(200,200,200,0.12);
1148	background-gradient-direction: vertical;
1149	background-gradient-start: rgba(0,0,0,0.3);
1150	background-gradient-end: rgba(0,0,0,0.3);
1151	box-shadow: inset 0px 1px 2px 0px rgba(0,0,0,0.5);
1152	caret-size: 1px;
1153}
1154
1155.run-dialog {
1156	border: 2px solid rgba(255,255,255,0.5);
1157	background-gradient-direction: vertical;
1158	background-gradient-start: rgba(32,32,32,1.0);
1159	background-gradient-end: rgba(32,32,32,1.0);
1160	box-shadow: 0px 0px 1px 1px rgba(0,0,0,0.3);
1161	border-radius: 0;
1162
1163	padding-right: 21px;
1164	padding-left: 21px;
1165	padding-bottom: 15px;
1166	padding-top: 15px;
1167}
1168
1169.lightbox {
1170	background-color: rgba(160,160,160,0.0);
1171}
1172
1173.flashspot {
1174	background-color: white;
1175}
1176
1177/* ===================================================================
1178 * End session dialog
1179 * ===================================================================*/
1180.end-session-dialog {
1181	spacing: 42px;
1182}
1183
1184.end-session-dialog-subject {
1185	font-weight: bold;
1186	color: #fff;
1187	padding-top: 10px;
1188	padding-left: 17px;
1189	padding-bottom: 30px;
1190}
1191
1192.end-session-dialog-subject:rtl {
1193	padding-left: 0px;
1194	padding-right: 17px;
1195}
1196
1197.end-session-dialog-description {
1198	padding-left: 17px;
1199	width: 28em;
1200}
1201
1202.end-session-dialog-description:rtl {
1203	padding-right: 17px;
1204}
1205
1206.end-session-dialog-logout-icon {
1207	border: 1px solid rgba(255,255,255,0.3);
1208	border-radius: 0;
1209	width: 32px;
1210	height: 32px;
1211}
1212
1213.end-session-dialog-shutdown-icon {
1214	color: #bebebe;
1215	width: 32px;
1216	height: 32px;
1217}
1218
1219.end-session-dialog-app-list {
1220	max-height: 200px;
1221	padding-top: 42px;
1222	padding-left: 49px;
1223	padding-right: 32px;
1224}
1225
1226.end-session-dialog-app-list:rtl {
1227	padding-right: 49px;
1228	padding-left: 32px;
1229}
1230
1231.end-session-dialog-app-list-item {
1232	color: #ccc;
1233}
1234
1235.end-session-dialog-app-list-item:hover {
1236	color: white;
1237}
1238
1239.end-session-dialog-app-list-item:ltr {
1240	padding-right: 1em;
1241}
1242
1243.end-session-dialog-app-list-item:rtl {
1244	padding-left: 1em;
1245}
1246
1247.end-session-dialog-app-list-item-icon:ltr {
1248	padding-right: 17px;
1249}
1250
1251.end-session-dialog-app-list-item-icon:rtl {
1252	padding-left: 17px;
1253}
1254
1255.end-session-dialog-app-list-item-name {
1256}
1257
1258.end-session-dialog-app-list-item-description {
1259	color: #444444;
1260}
1261
1262/* CinnamonMountOperation Dialogs */
1263.cinnamon-mount-operation-icon {
1264	icon-size: 48px;
1265}
1266
1267.mount-password-reask {
1268	color: red;
1269}
1270
1271.show-processes-dialog,
1272.mount-question-dialog {
1273	spacing: 24px;
1274}
1275
1276.show-processes-dialog-subject,
1277.mount-question-dialog-subject {
1278	padding-top: 10px;
1279	padding-left: 17px;
1280	padding-bottom: 6px;
1281}
1282
1283.mount-question-dialog-subject {
1284	max-width: 500px;
1285}
1286
1287.show-processes-dialog-subject:rtl,
1288.mount-question-dialog-subject:rtl {
1289	padding-left: 0px;
1290	padding-right: 17px;
1291}
1292
1293.show-processes-dialog-description,
1294.mount-question-dialog-description {
1295	padding-left: 17px;
1296	width: 28em;
1297}
1298
1299.show-processes-dialog-description:rtl,
1300.mount-question-dialog-description:rtl {
1301	padding-right: 17px;
1302}
1303
1304.show-processes-dialog-app-list {
1305	max-height: 200px;
1306	padding-top: 24px;
1307	padding-left: 49px;
1308	padding-right: 32px;
1309}
1310
1311.show-processes-dialog-app-list:rtl {
1312	padding-right: 49px;
1313	padding-left: 32px;
1314}
1315
1316.show-processes-dialog-app-list-item {
1317	color: #ccc;
1318}
1319
1320.show-processes-dialog-app-list-item:hover {
1321	color: white;
1322}
1323
1324.show-processes-dialog-app-list-item:ltr {
1325	padding-right: 1em;
1326}
1327
1328.show-processes-dialog-app-list-item:rtl {
1329	padding-left: 1em;
1330}
1331
1332.show-processes-dialog-app-list-item-icon:ltr {
1333	padding-right: 17px;
1334}
1335
1336.show-processes-dialog-app-list-item-icon:rtl {
1337	padding-left: 17px;
1338}
1339
1340.show-processes-dialog-app-list-item-name {
1341}
1342
1343/* ===================================================================
1344 * Policykit authentication dialog
1345 * ===================================================================*/
1346.polkit-dialog-user-layout {
1347	padding-left: 10px;
1348	spacing: 10px;
1349}
1350
1351.polkit-dialog-user-layout:rtl {
1352	padding-left: 0px;
1353	padding-right: 10px;
1354}
1355
1356.polkit-dialog-user-root-label {
1357	color: #CBD9D4;
1358}
1359
1360/* ===================================================================
1361 * Magnifier
1362 * ===================================================================*/
1363
1364.magnifier-zoom-region {
1365	border: 2px solid rgba(128, 0, 0, 255);
1366}
1367
1368.magnifier-zoom-region.full-screen {
1369	border-width: 0px;
1370}
1371
1372/* ===================================================================
1373 * On screen keyboard
1374 * ===================================================================*/
1375
1376#keyboard {
1377	background: rgba(0,0,0,0.8);
1378}
1379
1380.keyboard-layout {
1381	spacing: 10px;
1382	padding: 10px;
1383}
1384
1385.keyboard-row {
1386	spacing: 15px;
1387}
1388
1389.keyboard-key {
1390	min-height: 30px;
1391	min-width: 30px;
1392	background-gradient-direction: vertical;
1393	background-gradient-start: rgba(78,78,78,0.5);
1394	background-gradient-end: rgba(78,78,78,0.5);
1395	font-size: 14pt;
1396	font-weight: bold;
1397	border-radius: 2px;
1398	border: 1px solid rgba(78,78,78,0.9);
1399	color: white;
1400}
1401
1402.keyboard-key:grayed {
1403	color: #808080;
1404	border-color: #808080;
1405}
1406
1407.keyboard-key:checked,
1408.keyboard-key:hover {
1409	background: #303030;
1410	border: 3px solid white;
1411}
1412
1413.keyboard-key:active {
1414	background: #808080;
1415}
1416
1417.keyboard-subkeys {
1418	color: white;
1419	padding: 5px;
1420	-arrow-border-radius: 10px;
1421	-arrow-background-color: #090909;
1422	-arrow-border-width: 2px;
1423	-arrow-border-color: white;
1424	-arrow-base: 20px;
1425	-arrow-rise: 10px;
1426	-boxpointer-gap: 5px;
1427}
1428
1429/* ###################################################################
1430 * Cinnamon Specific Section
1431 * ###################################################################*/
1432/* ===================================================================
1433 * Menu (menu.js)
1434 * ===================================================================*/
1435/* Main menu title */
1436
1437.menu-favorites-box {
1438	width: 70%;
1439	margin: auto;
1440	padding: 10px;
1441	background-gradient-direction: vertical;
1442	background-gradient-start: rgba(180,147,114,0.1);
1443	background-gradient-end: rgba(180,147,114,0.1);
1444	border: 1px solid rgba(255,255,255,0.2);
1445	border-radius: 0px;
1446	transition-duration: 300;
1447}
1448
1449.menu-favorites-button {
1450	padding-top: 10px;
1451	padding-left: 10px;
1452	padding-right: 10px;
1453	padding-bottom: 10px;
1454	border: 1px solid rgba(0,0,0,0);
1455}
1456
1457.menu-favorites-button:hover {
1458	color: white;
1459	background-gradient-direction: vertical;
1460	background-gradient-start: rgba(255,255,255,0.12);
1461	background-gradient-end: rgba(255,255,255,0.05);
1462	box-shadow: inset 0px 0px 1px 1px rgba(255,255,255,0.15);
1463	border: 1px solid rgba(0,0,0,0.15);
1464	border-radius: 3px;
1465}
1466
1467.menu-places-box {
1468	width: 70%;
1469	margin: auto;
1470	padding: 10px;
1471	border: 0px solid #666;
1472}
1473
1474.menu-places-button {
1475	padding-top: 10px;
1476	padding-left: 10px;
1477	padding-right: 10px;
1478	padding-bottom: 10px;
1479}
1480
1481.menu-categories-box {
1482	padding-top: 10px;
1483	padding-left: 30px;
1484	padding-right: 30px;
1485	padding-bottom: 10px;
1486}
1487
1488.menu-applications-box {
1489	padding-top: 10px;
1490	padding-left: 10px;
1491	padding-right: 10px;
1492	padding-bottom: 0px;
1493}
1494
1495.menu-application-button {
1496	width: 20em;
1497	height: 2.85em;
1498	border: 1px solid rgba(0,0,0,0);
1499}
1500
1501.menu-application-button:hover {
1502	width: 20em;
1503	height: 2.85em;
1504	color: white;
1505	background-gradient-direction: vertical;
1506	background-gradient-start: rgba(255,255,255,0.12);
1507	background-gradient-end: rgba(255,255,255,0.05);
1508	box-shadow: inset 0px 0px 1px 1px rgba(255,255,255,0.15);
1509	border: 1px solid rgba(0,0,0,0.15);
1510	border-radius: 3px;
1511}
1512
1513.menu-application-button-selected {
1514	width: 20em;
1515	height: 2.85em;
1516	color: #ffffff;
1517	background-gradient-direction: vertical;
1518	background-gradient-start: rgba(114,180,147,0.9);
1519	background-gradient-end: rgba(114,180,165,0.9);
1520	box-shadow: inset 0px 0px 1px 1px rgba(255,255,255,0.3);
1521	border: 1px solid rgba(0,0,0,0.15);
1522	border-radius: 3px;
1523}
1524
1525.menu-application-button-label:ltr {
1526	padding-left: 5px
1527}
1528
1529.menu-application-button-label:rtl {
1530	padding-right: 5px
1531}
1532
1533.menu-category-button {
1534	width: 12em;
1535	height: 2.85em;
1536	border: 1px solid rgba(0,0,0,0);
1537}
1538
1539.menu-category-button-greyed {
1540	width: 12em;
1541	height: 2.85em;
1542	color: #9C9C9C;
1543	font-style: italic;
1544	border: 1px solid rgba(0,0,0,0);
1545}
1546
1547.menu-category-button-selected {
1548	width: 12em;
1549	height: 2.85em;
1550	color: #ffffff;
1551	background-gradient-direction: vertical;
1552	background-gradient-start: rgba(114,180,147,0.9);
1553	background-gradient-end: rgba(114,180,165,0.9);
1554	box-shadow: inset 0px 0px 1px 1px rgba(255,255,255,0.3);
1555	border: 1px solid rgba(0,0,0,0.15);
1556	border-radius: 3px;
1557}
1558
1559.menu-category-button-label:ltr {
1560	padding-left: 5px
1561}
1562
1563.menu-category-button-label:rtl {
1564	padding-right: 5px
1565}
1566
1567.menu-category-button-button:hover {
1568	background-color: #969696;
1569	border-radius: 8px;
1570}
1571
1572.menu-application-button:ltr,
1573.menu-application-button:hover:ltr,
1574.menu-application-button-selected:ltr,
1575.menu-category-button:ltr,
1576.menu-category-button-greyed:ltr,
1577.menu-category-button-selected:ltr {
1578	padding-left: 7px;
1579}
1580
1581.menu-application-button:rtl,
1582.menu-application-button:hover:rtl,
1583.menu-application-button-selected:rtl,
1584.menu-category-button:rtl,
1585.menu-category-button-greyed:rtl,
1586.menu-category-button-selected:rtl {
1587	padding-right: 7px;
1588}
1589
1590/* Name and description of the currently hovered item in the menu
1591 * This appears on the bottom right hand corner of the menu*/
1592.menu-selected-app-box {
1593	padding-right: 30px;
1594	padding-left: 28px;
1595	text-align: right;
1596}
1597
1598.menu-selected-app-box:rtl {
1599	padding-top: 10px;
1600	height: 30px;
1601}
1602
1603.menu-selected-app-title {
1604	font-weight: bold;
1605}
1606
1607.menu-selected-app-description {
1608	max-width: 150px;
1609}
1610
1611.menu-search-box:ltr {
1612	padding-left: 30px;
1613}
1614
1615.menu-search-box:rtl {
1616	padding-right: 30px;
1617}
1618
1619#menu-search-entry {
1620	font-weight: normal;
1621	width: 23em;
1622	selection-background-color: #72B493;
1623	selected-color: white;
1624	border-radius: 2px;
1625	padding: 4px;
1626	color: white;
1627	border: 1px solid rgba(200,200,200,0.12);
1628	background-gradient-direction: vertical;
1629	background-gradient-start: rgba(0,0,0,0.3);
1630	background-gradient-end: rgba(0,0,0,0.3);
1631	box-shadow: inset 0px 1px 2px 0px rgba(0,0,0,0.5);
1632	caret-size: 1px;
1633}
1634
1635.menu-search-entry-icon {
1636	icon-size: 1em;
1637	color: #c0c0c0;
1638}
1639
1640/* Context menu (at the moment only for favorites) */
1641.menu-context-menu {
1642}
1643
1644/* ===================================================================
1645 * Window list (windowList.js)
1646 * ===================================================================*/
1647.window-list-box {
1648	spacing: 2px;
1649}
1650
1651.window-list-item-label {
1652	font-weight: bold;
1653	width: 15em;
1654	min-width: 5px;
1655}
1656
1657.window-list-item-box {
1658	padding-left: 6px;
1659	padding-right: 6px;
1660	font-weight: bold;
1661	color: #fff;
1662	border: 1px solid rgba(255,255,255,0);
1663	border-top: 0px;
1664	border-bottom: 0px;
1665	transition-duration: 200;
1666}
1667
1668.window-list-item-box:active,
1669.window-list-item-box:checked,
1670.window-list-item-box:focus {
1671	border: 1px solid rgba(255,255,255,0.1);
1672	border-top: 0px;
1673	border-bottom: 0px;
1674	background-gradient-direction: vertical;
1675	background-gradient-start: rgba(0,0,0,0.1);
1676	background-gradient-end: rgba(0,0,0,0.25);
1677	color: white;
1678	box-shadow: inset 0px 1px 5px rgba(0,0,0,0.251);
1679}
1680
1681.window-list-item-box:hover {
1682	border: 1px solid rgba(255,255,255,0.4);
1683	border-top: 0px;
1684	border-bottom: 0px;
1685	color: white;
1686	background-gradient-direction: vertical;
1687	background-gradient-start: rgba(255,255,255,0.3);
1688	background-gradient-end: rgba(255,255,255,0.2);
1689}
1690
1691.window-list-item-demands-attention {
1692	border: 1px solid rgba(255,52,52,0.4);
1693	border-top: 0px;
1694	border-bottom: 0px;
1695	color: white;
1696	background-gradient-direction: vertical;
1697	background-gradient-start: rgba(255,52,52,0.3);
1698	background-gradient-end: rgba(255,52,52,0.2);
1699}
1700
1701/* ===================================================================
1702 * Sound Applet (status/volume.js)
1703 * ===================================================================*/
1704.sound-button-container {
1705	padding-right: 3px;
1706	padding-left: 3px;
1707}
1708
1709.sound-button {
1710	padding: 4px 7px 5px;
1711}
1712
1713.sound-button StIcon {
1714	icon-size: 1.4em;
1715}
1716
1717.sound-track-infos {
1718	padding-left: 5px;
1719	padding-right: 5px;
1720	padding-top: 5px;
1721	padding-bottom: 5px;
1722}
1723
1724.sound-track-info {
1725	padding-top: 2px;
1726	padding-bottom: 2px;
1727}
1728
1729.sound-track-info StIcon {
1730	icon-size: 1em;
1731}
1732
1733.sound-track-info StLabel {
1734	padding-left: 5px;
1735	padding-right: 5px;
1736}
1737
1738.sound-track-box {
1739	padding-left: 15px;
1740	padding-right: 15px;
1741	max-width: 220px;
1742}
1743
1744.sound-volume-menu-item {
1745	padding: .4em 1.75em;
1746}
1747
1748.sound-volume-menu-item StIcon {
1749	icon-size: 1.14em;
1750	padding-left: 8px;
1751	padding-right: 8px;
1752}
1753
1754.sound-playback-control {
1755	padding-top: 5px;
1756	padding-bottom: 10px;
1757	padding-left: 10px;
1758	padding-right: 10px;
1759}
1760
1761/* ===================================================================
1762 * Workspace Switcher applet (workspaceSwitcher.js)
1763 * ===================================================================*/
1764#workspaceSwitcher {
1765	spacing: 0px;
1766	padding: 3px;
1767
1768}
1769
1770.workspace-button {
1771	width: 20px;
1772	height: 10px;
1773	color: #cccccc;
1774	border: 1px;
1775	border-color: #a6a6a6;
1776	padding: 2px;
1777	transition-duration: 300;
1778}
1779
1780.workspace-button:outlined {
1781	padding: 1px;
1782	background: #cccccc;
1783	color: #555555;
1784	box-shadow: inset 0px 0px 8px 1px rgba(255,255,255, 0.7);
1785}
1786
1787/* ===================================================================
1788 * Workspace OSD
1789 * ===================================================================*/
1790
1791.workspace-osd {
1792	border: 2px solid rgba(255,255,255,0.6);
1793	background-gradient-direction: vertical;
1794	background-gradient-start: rgba(32,32,32,1.0);
1795	background-gradient-end: rgba(32,32,32,1.0);
1796	box-shadow: 0px 0px 2px 1px rgba(0,0,0,0.5);
1797	border-radius: 0;
1798	font-size: 16pt;
1799	font-weight: bold;
1800	color: #fff;
1801
1802	padding-right: 42px;
1803	padding-left: 42px;
1804	padding-bottom: 30px;
1805	padding-top: 30px;
1806}
1807
1808.expo-workspaces-name-entry {
1809	background-color: rgba(0,0,0,0.5);
1810	border: 1px solid rgba(255,255,255,0.25);
1811	border-radius: 6px;
1812	color: #fff;
1813	padding: 6px 8px;
1814	spacing: 25px;
1815	-cinnamon-caption-spacing: 1px;
1816}
1817
1818/* ===================================================================
1819 * Notification Applet
1820 * ===================================================================*/
1821
1822.notification-applet-padding {
1823	padding: .5em 1em;
1824}
1825
1826.notification-applet-container {
1827	max-height: 100px;
1828}
1829
1830/* ===================================================================
1831 * Panel Launchers Applet (panelLaunchers.js)
1832 * ===================================================================*/
1833
1834.panel-launchers {
1835	spacing: 2px;
1836}
1837
1838.launcher,
1839.panel-launcher {
1840	border: 1px solid rgba(255,255,255,0);
1841	border-top: 0px;
1842	border-bottom: 0px;
1843	padding-left: 1px;
1844	padding-right: 1px;
1845	transition-duration: 200;
1846}
1847
1848.launcher:hover,
1849.panel-launcher:hover {
1850	border: 1px solid rgba(255,255,255,0.4);
1851	border-top: 0px;
1852	border-bottom: 0px;
1853	background-gradient-direction: vertical;
1854	background-gradient-start: rgba(255,255,255,0.3);
1855	background-gradient-end: rgba(255,255,255,0.2);
1856}
1857
1858.panel-launcher-add-dialog-content-box {
1859	padding: 6px;
1860	spacing: 20px;
1861}
1862
1863.panel-launcher-add-dialog-content-box-left {
1864	padding: 6px;
1865	spacing: 20px;
1866}
1867
1868.panel-launcher-add-dialog-content-box-right {
1869	padding: 6px;
1870	spacing: 10px;
1871}
1872
1873.panel-launcher-add-dialog-entry {
1874	font-weight: normal;
1875	width: 23em;
1876	selection-background-color: #72B493;
1877	selected-color: white;
1878	border-radius: 2px;
1879	padding: 4px;
1880	color: white;
1881	border: 1px solid rgba(200,200,200,0.12);
1882	background-gradient-direction: vertical;
1883	background-gradient-start: rgba(0,0,0,0.3);
1884	background-gradient-end: rgba(0,0,0,0.3);
1885	box-shadow: inset 0px 1px 2px 0px rgba(0,0,0,0.5);
1886	caret-size: 1px;
1887}
1888
1889/* ===================================================================
1890 * Overview corner
1891 * ===================================================================*/
1892#overview-corner {
1893	background-image: url("overview1.png");
1894}
1895
1896#overview-corner:hover {
1897	background-image: url("overview2.png");
1898}
1899
1900/* ===================================================================
1901 * Applets (applet.js)
1902 * ===================================================================*/
1903.applet-box {
1904	padding-left: 6px;
1905	padding-right: 6px;
1906	font-weight: bold;
1907	color: #fff;
1908	border: 1px solid rgba(255,255,255,0);
1909	border-top: 0px;
1910	border-bottom: 0px;
1911	transition-duration: 200;
1912}
1913
1914.applet-box:hover {
1915	border: 1px solid rgba(255,255,255,0.4);
1916	border-top: 0px;
1917	border-bottom: 0px;
1918	color: white;
1919	background-gradient-direction: vertical;
1920	background-gradient-start: rgba(255,255,255,0.3);
1921	background-gradient-end: rgba(255,255,255,0.2);
1922}
1923
1924.applet-box:active {
1925	border: 1px solid rgba(255,255,255,0.1);
1926	border-top: 0px;
1927	border-bottom: 0px;
1928	background-gradient-direction: vertical;
1929	background-gradient-start: rgba(0,0,0,0.1);
1930	background-gradient-end: rgba(0,0,0,0.25);
1931	color: white;
1932	box-shadow: inset 0px 1px 5px rgba(0,0,0,0.251);
1933}
1934