dots


dots / themes / lxqt / catppuccin-frappe
xxwhirlpool  ·  2025-08-05

lxqt-panel.qss

  1/*
  2 * General panel settings
  3 *  
  4 */
  5
  6*{
  7    widget-animation-duration:100;
  8}
  9
 10LXQtPanel #BackgroundWidget {
 11    background-color: rgb(35, 38, 52);
 12    
 13}
 14
 15LXQtPanel[position="Bottom"] #BackgroundWidget {
 16    margin-top: 0%;
 17    margin-bottom: 0%;
 18    margin-left: 0%;
 19    margin-right: 0%;
 20}
 21
 22LXQtPanel[position="Top"] #BackgroundWidget {
 23	margin-top: 0%;
 24	margin-bottom: 0%;
 25	margin-left: 0%;
 26	margin-right: 0%;
 27}
 28
 29LXQtPanel[position="Left"] #BackgroundWidget {
 30    margin-top: 0%;
 31    margin-bottom: 0%;
 32    margin-left: 0%;
 33    margin-right: 0%;
 34}
 35
 36LXQtPanel[position="Right"] #BackgroundWidget {
 37    margin-top: 0%;
 38    margin-bottom: 0%;
 39    margin-left: 0%;
 40    margin-right: 0%;
 41}
 42
 43QToolTip {
 44    border-radius: 10px;
 45    background-color: rgba(30, 30, 46, 75%);
 46    border: 1.2px solid rgba(87, 82, 104 90% ); 
 47    margin: 0px;
 48    color: #D9E0EE;
 49}
 50
 51/*
 52 * General plugins settings
 53 */
 54
 55Plugin,
 56LXQtPanelPlugin {
 57    padding: 0;
 58    spacing: 20px;
 59    qproperty-moveMarkerColor: #eb7140;
 60}
 61
 62Plugin  > QWidget,
 63Plugin  > QWidget > QWidget{
 64    color: #f2f1f0;
 65}
 66
 67
 68Plugin > QToolButton,
 69Plugin > QWidget > QToolButton,
 70Plugin > QWidget > QToolButton > QWidget > QToolButton,
 71LXQtPanelPlugin > QToolButton {
 72    margin: 0px;
 73    border: 1px solid #2b2b29;
 74    border-radius: 4px;
 75    qproperty-iconSize: 24px;
 76    color: #f2f1f0;
 77}
 78
 79Plugin > QToolButton:hover,
 80Plugin > QWidget > QToolButton:hover,
 81LXQtPanelPlugin > QToolButton:hover {
 82    margin: 0px;
 83    background: #363532;
 84    border: 1px solid #2b2b29;
 85}
 86
 87Plugin > QToolButton:pressed,
 88Plugin > QWidget > QToolButton:pressed,
 89LXQtPanelPlugin > QToolButton:pressed {
 90    padding: 4px;
 91}
 92
 93/*
 94 * Calendar (from any of the two clocks)
 95 */
 96QCalendarWidget #qt_calendar_navigationbar{
 97   background-color:qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0  #232634, stop:1 #232634);
 98   border: 1px solid #575268;
 99}
100
101QCalendarWidget #qt_calendar_navigationbar,
102#WorldClock QCalendarWidget #qt_calendar_navigationbar * {
103    
104    color: white;
105    font-style: bold;
106}
107
108QCalendarWidget #qt_calendar_nextmonth {
109    max-height:20px;
110    min-height:20px;
111    qproperty-icon: url(/ic_next.png);
112    margin-right: 1px;
113}
114
115QCalendarWidget #qt_calendar_nextmonth:hover {
116    border: 1px solid #575268;
117	 background: #575268;
118     border-radius: 10px;
119}
120
121QCalendarWidget #qt_calendar_prevmonth {
122    max-height:20px;
123    min-height:20px;
124    qproperty-icon: url(/ic_back.png);
125    margin-left: 1px;
126}
127
128QCalendarWidget #qt_calendar_prevmonth:hover {
129    border: 1px solid #272423;
130	 background: rgba(159,155,154,60%);
131     border-radius: 4px;
132}
133
134QCalendarWidget #qt_calendar_monthbutton::menu-indicator {
135   image: none;
136}
137
138QCalendarWidget #qt_calendar_monthbutton {
139    margin: 2px;
140}
141QCalendarWidget #qt_calendar_monthbutton:hover {
142    border: 1px solid #272423;
143	background: rgba(159,155,154,60%);
144    border-radius: 4px;
145}
146
147QCalendarWidget #qt_calendar_yearbutton:hover {
148    border: 1px solid #272423;
149	background: rgba(159,155,154,60%);
150    border-radius: 4px;
151}
152
153QCalendarWidget QMenu {
154    margin: 4px;
155    color: 1E1E2E;
156    background-color:qlineargradient(x1:0, y1:0, x2:0, y2:0.5, stop:0.1  #232634, stop:0.8   #232634);
157}
158
159
160QCalendarWidget QMenu::item:selected {
161    color: 1E1E2E;
162    background-color: inherit;
163}
164
165QCalendarWidget QSpinBox {
166    color: #f2f1f0;
167    background: inherit;
168    selection-background-color: #c1beb2;
169    selection-color: #504f4e;
170    border-radius: 8px;
171    border: 1px solid black;
172}
173
174QCalendarWidget QAbstractItemView:enabled {
175    color: white;
176    background-color: #1E1E2E;
177    selection-background-color: #DDB6F2;
178    selection-color: black;
179    
180}
181
182QCalendarWidget QAbstractItemView:disabled {
183    color: #808080;
184}
185
186QCalendarWidget QWidget {
187    alternate-background-color: #1E1E2E;
188    alternate-color: #1E1E2E;
189}
190
191/*
192 * TaskBar
193 */
194#TaskBar QToolButton{
195  margin: 2px;
196  padding: 2pt;
197  border-radius: 5%;
198  border: 0px solid white;
199  color: #ececec;
200  background-color: rgba(30, 30, 30, 25%);
201}
202
203#TaskBar QToolButton:on{
204	border: none;
205    background-color: rgba(128, 128, 128, 25%);
206}
207
208#TaskBar QToolButton:hover{
209    background: rgba(159,155,154,35%);
210    color: white;
211    border: none;
212}
213
214#TaskBar QToolButton:pressed {
215    padding: 4px;
216    background-color:inherit;
217}
218
219#TaskBar QToolButton[urgent="true"] {
220    color: palette(highlighted-text);
221    background: palette(highlight);
222}
223
224#TaskBar LXQtGroupPopup {
225    background-color: rgba(32, 32, 32, 75%);
226    border: 1px solid #2c2c2c;
227    border-radius: 4px;
228}
229
230#TaskBar QToolButton LXQtGroupPopup {
231    background-color: rgba(32, 32, 32, 75%);
232    border: 1px solid #2c2c2c;
233    margin: 0.5px;
234    border-radius: 4px;
235}
236
237
238#TaskBar LXQtGroupPopup :hover {
239   background-color:qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0  rgba( 176, 174, 174, 30% ), stop:1 rgba( 176, 174, 174, 30% ));
240    border: 1px solid #2c2c2c;
241    border-radius: 4px;
242}
243/*
244 * Main menu
245 */
246
247#MainMenu {
248    margin-top: 2px;
249	margin-bottom: 2px;
250    padding: 1px;
251    border: 1px;
252    qproperty-icon: url(penguin.png);
253    color: #f2f1f0;
254}
255
256#MainMenu:pressed {
257    padding: 4px;
258    background: rgba(87, 82, 104,60%);
259    font-style: bold;
260}
261
262#MainMenu:hover {
263   background: rgba(87, 82, 104,60%);
264   border: 1px solid #4a4a4a;
265}
266
267
268
269#MainMenu  QMenu{
270    background-color: rgb(35, 38, 52);
271    color: red;
272    border: 1px solid #575268; 
273    border-radius: 10%;
274}
275
276#MainMenu  QMenu::icon {
277    background-color: transparent;
278    border: 10px solid transparent;
279    border-top-width: 0px;
280    border-bottom-width: 0px;
281    border-right-width: 0px;
282}
283
284#MainMenu QMenu::right-arrow {
285    image: url(arrow-right.svg);
286    border: 5px solid transparent;
287    border-top-width: 0px;
288    border-bottom-width: 0px;
289    border-left-width: 0px;
290}
291
292#MainMenu QMenu::item {
293    color: #e1e1e1;
294	font-style: default;
295    padding: 7px 40px 7px 24px;
296    
297}
298
299#MainMenu QMenu::item:selected {
300    color: white;
301	font-style: bold;
302    background: rgba(87, 82, 104,60%);
303    border-radius: 4px;
304    margin: 1px;
305}
306
307#MainMenu ActionView {
308    background-color:qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0  rgba(30, 30, 46 30% ), stop:1 rgba(30, 30, 46, 30% ));
309    border-radius: 6%;
310    padding: 4px;
311    margin:4px;
312    color: white;
313}
314
315#MainMenu ActionView::item {
316    padding: 3px 0;
317}
318
319#MainMenu ActionView::item:selected {
320    background-color:qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0  rgba(30, 30, 46), stop:1 rgba(30, 30, 46));
321    border: 1.2px solid #323232;
322    color: #ffffff;
323    font-style: bold;
324    border-radius: 4px;
325    margin: 1px;
326}
327
328#MainMenu QLineEdit {
329    background:qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0  #1E1E2E , stop:1 #1E1E2E);
330    border: 2px solid #575268;
331    color: white;
332    margin-bottom: 1px;
333    border-radius: 6%;
334   margin: 1px;
335}
336
337#MainMenu QScrollBar::handle {
338    background-color: #1E1E2E;
339    color: #1E1E2E;
340}
341
342/*
343 * QuickLaunch
344 */
345
346
347#QuickLaunch QToolButton {
348    margin-top: 2px;
349	margin-bottom: 2px;
350    padding: 1px;
351    border: none;
352    width: 24px;
353}
354
355#QuickLaunch QToolButton:hover {
356    background: rgba(30, 30, 46, 35%);
357}
358
359#QuickLaunch QToolButton:pressed {
360    padding: 4px;
361}
362
363#QuickLaunchPlaceHolder {
364    color: #1E1E2E;
365}
366
367/*
368 * Clock
369 */
370
371#Clock {
372    background: transparent;
373    margin: 2px;
374    border-radius: 4px;
375}
376
377#Clock:hover {
378    background-color:qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0  #c6d0f5, stop:1 #c6d0f5);
379    border: 1px solid #afafa6;
380}
381
382#Clock #TimeLabel{
383    color: #eebebe;
384    margin-right: 2px;
385    margin-left: 2px;
386}
387#Clock #DateLabel{
388    color: #f2f1f0;
389    margin-right: 2px;
390    margin-left: 2px;
391}
392
393/*
394 * Desktopswitch
395 */
396#DesktopSwitch QToolButton {
397    border: none;
398    margin-top: 5px;
399    margin-bottom: 5px;
400    margin-left: 1px;
401    padding: 5px;
402    color: white;
403}
404
405#DesktopSwitch QToolButton:on {
406    background-color:qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0  rgba( 176, 174, 174, 30% ), stop:1 rgba( 176, 174, 174, 30% ));
407}
408
409#DesktopSwitch QToolButton:hover {
410    background-color:qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0  rgba( 176, 174, 174, 30% ), stop:1 rgba( 176, 174, 174, 30% ));
411    border:  1.2px solid rgba( 62, 62, 67, 70% ); 
412}
413
414#DesktopSwitch QToolButton:pressed {
415	background-color: rgba(32, 32, 32, 75%);
416    padding: 4px;
417}
418
419#DesktopSwitch QToolButton[urgent="true"] {
420    color: palette(highlighted-text);
421    background: palette(highlight);
422}
423
424/*
425 * Tray
426 */
427#Tray {
428    padding: 2px;
429    min-width: 6px;
430}
431
432TrayIcon {
433    padding: 1px 1px 1px 1px;
434    margin-top: 3px;
435    margin-bottom: 3px;
436    margin-left: 1px;
437    border-radius: 4%;
438    background: rgba(67,67,67,55%);
439}
440
441TrayIcon:hover {
442    background: rgba(159,155,154,35%);
443}
444TrayIcon:pressed {
445    padding: 1px;
446    background-color:qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0  rgba( 176, 174, 174, 30% ), stop:1 #000000);
447}
448
449/*
450 * Mount plugin
451 *     
452 */
453
454#LXQtMountPlugin QToolButton {
455    border:none;
456    margin-top: 5px;
457    margin-bottom: 5px;
458    margin-left: 1px;
459    padding: 1px;
460    background: rgba(67,67,67,55%);
461}
462
463#LXQtMountPlugin QToolButton:pressed {
464    padding: 1px;
465    background-color:qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0  rgba( 176, 174, 174, 30% ), stop:1 #000000);
466}
467
468#LXQtMountPlugin QToolButton:hover {
469    padding: 1px;
470    background-color:qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0  rgba( 176, 174, 174, 30% ), stop:1 rgba( 176, 174, 174, 30% ));
471}
472
473#LXQtMountPopup {
474    background: rgba(67,67,67,55%);
475    color: #bababa;
476    border-radius: 4px;
477}
478
479#LXQtMountPopup > MenuDiskItem {
480    margin: 2px;
481    padding: 1px;
482    border-radius: 4px;
483    color: #bababa;
484     background-color:qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0  rgba( 176, 174, 174, 30% ), stop:1 #1f1f1f);
485}
486
487#LXQtMountPopup > MenuDiskItem:hover {
488    
489}
490
491#LXQtMountPopup #EjectButton,
492#LXQtMountPopup #DiskButton {
493    qproperty-iconSize: 22px;
494}
495
496#LXQtMountPopup #NoDiskLabel {
497    margin: 6px;
498    color: #adadad;
499    border-radius: 4px;
500}
501
502
503/*
504 * ShowDesktop
505 */
506
507#ShowDesktop {
508    border:none;
509    margin-top: 5px;
510    margin-bottom: 5px;
511    margin-left: 1px;
512}
513
514#ShowDesktop:pressed {
515    padding: 4px;
516}
517
518
519/*
520 * KbIndicator
521 */
522#KbIndicator > QLabel {
523    padding: 3px;
524    border: 0px;
525}
526
527#KbIndicator > QLabel:enabled {
528    margin: 1px;
529    background: rgba(67,67,67,55%);
530    color: #f2f1f0;
531    border: 1px solid #848282;
532    border-radius: 4px;
533    margin-top: 5px;
534    margin-bottom: 5px;
535    margin-left: 1px;
536}
537
538#KbIndicator:disabled {
539    background: transparent;
540    color: #f2f1f0;
541}
542
543
544/*
545 * #SysStat
546 */
547#SysStat {
548    margin-top: 5px;
549    margin-bottom: 5px;
550    margin-left: 1px;
551    padding: 5px;
552}
553
554#SysStat > QLabel {
555    font-size: 6pt;
556}
557
558#SysStat_Graph {
559    
560    margin-top: 5px;
561    margin-bottom: 5px;
562    margin-left: 1px;
563
564    qproperty-gridColor: rgba(255, 255, 255, 25%);
565    qproperty-titleColor: rgba(255, 255, 255, 75%);
566    qproperty-cpuSystemColor: rgb(150, 40, 69);
567    qproperty-cpuUserColor: rgb(21, 139, 150);
568    qproperty-cpuNiceColor: rgb(0, 128, 0);
569    qproperty-cpuOtherColor: rgb(128, 128, 0);
570    qproperty-frequencyColor: rgb(96, 96, 96);
571    qproperty-memAppsColor: rgb(0, 0, 128);
572    qproperty-memBuffersColor: rgb(0, 128, 0);
573    qproperty-memCachedColor: rgb(128, 128, 0);
574    qproperty-swapUsedColor: rgb(128, 0, 0);
575    qproperty-netReceivedColor: rgb(0, 0, 128);
576    qproperty-netTransmittedColor: rgb(128, 128, 0);
577}
578
579
580/*
581 * WorldClock
582 */
583
584#WorldClock {
585    margin-top: 5px;
586    margin-bottom: 5px;
587    margin-left: 1px;
588    border: none;
589    border-radius: 4px;
590    font-style: bold;
591    color: #f2f1f0;
592    padding: 1px;
593}
594
595#WorldClock:hover {
596    background: rgba(159,155,154,35%);
597    
598}
599
600#WorldClockContent {
601    color: #cdd0e1;
602    padding: 2px;
603}
604
605#WorldClockPopup > QLabel {
606    color: #cdd0e1;
607}
608
609/*
610 * CPU monitor
611 */
612#LXQtCpuLoad {
613    qproperty-fontColor: #f2f1f0;
614}
615
616/*
617 * Volume plugin
618 */
619
620#VolumePlugin QToolButton {
621    margin-top: 5px;
622    margin-bottom: 5px;
623    margin-left: 1px;
624    padding: 1%;
625    background: rgba(67,67,67,55%);
626    border: none;
627}
628
629#VolumePlugin QToolButton:pressed {
630    background-color:qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0  rgba( 176, 174, 174, 30% ), stop:1 #000000);
631    border-color: gray;
632    border-radius: 4px;
633    margin: 2px;
634    padding: 3px;
635    color: darkslategray;
636}
637
638#VolumePlugin QToolButton:hover {
639    background: rgba(159,155,154,35%);
640    color: white;
641    border-bottom: 2px;
642    border-color: white;
643}
644
645VolumePopup {
646    background: rgba(67,67,67,55%);
647    border: 1px solid #2c2c2c;
648    border-radius: 8%;
649}
650
651VolumePopup:hover {
652    padding: 0px;
653}
654
655/* colors of volume buttons (mixer) */
656VolumePopup  > QPushButton {
657    padding: 1px;
658    margin: 2px;
659    width: 40%;
660    height: 20px;
661}
662
663VolumePopup  > QPushButton:hover {
664    background-color:qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0  rgba( 176, 174, 174, 30% ), stop:1 rgba( 176, 174, 174, 30% ));
665    border: 1.2px solid #323232;
666    color: #ffffff;
667}
668
669VolumePopup  > QPushButton:pressed {
670    padding: 4px;
671    background-color:qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0  rgba( 176, 174, 174, 30% ), stop:1 #000000);
672}
673
674VolumePopup  > QSlider {
675      width:30px;
676      border: transparent;
677      border-radius: 5%;
678      padding: 2px;
679}
680
681VolumePopup  > QSlider:hover {
682}
683
684VolumePopup  > QSlider::groove:vertical {
685     background-color: red;
686     width:19px;
687     
688}
689/*Punto de slider */
690VolumePopup  > QSlider::handle:vertical {
691     background-color: palette(window);
692     border-radius: 12%;
693     border: 2px solid rgba(214, 214, 214, 55%);
694     height:10px;
695     width: 10px;
696    
697 }
698
699/*down area volume slider*/
700VolumePopup  > QSlider::add-page:vertical {
701     background-color:qlineargradient(x1:1, y1:0, x2:0, y2:1, stop:0 #6fd18d, stop:0.995 #888888);
702    border : 1px solid #595959;
703    width: 10px;
704 }
705
706/* up area volume slider*/
707VolumePopup  > QSlider::sub-page:vertical {
708     background-color:qlineargradient(x1:1, y1:0, x2:0, y2:1, stop:0 #b0375f, stop:0.995 #A6A6A6);
709     border : 1px solid #515151;
710    width: 10px; 
711 }
712/*
713 * Spacer
714 */
715
716#Spacer {
717    background-position: center center;
718}
719
720#Spacer[type="lined"] {
721    background-image: url(/spacer-plugin/spacer-line.png);
722}
723
724#Spacer[type="dotted"] {
725    background-image: url(/spacer-plugin/spacer-dots.png);
726 }
727
728#Spacer[orientation="horizontal"] {
729    background-repeat: repeat-y;
730    margin-top: 2px;
731    margin-bottom: 2px;
732}
733
734#Spacer[orientation="vertical"] {
735    background-repeat: repeat-x;
736    margin-right: 2px;
737    margin-left: 2px;
738}
739
740#Dom {
741    margin: 2px;
742    padding: 0px;
743    border-radius: 0px;
744    border: 0px solid #1E1E1E;;
745}
746
747#Dom:hover {
748    background: none;
749}
750#Dom:pressed {
751    background-color: transparent;
752    border-top: 2px solid #111111;
753    border-bottom: 2px solid #111111;
754    border-left: 1px solid #111111;
755    border-right: 1px solid #111111;
756    margin: 2px;
757    padding: 3px;
758    color: darkslategray;
759    border-radius: 0px;
760}
761
762#ColorPickerPlugin QToolButton {
763    margin-top: 5px;
764    margin-bottom: 5px;
765    margin-left: 1px;
766    color: #a1a1a1;
767   background: rgba(67,67,67,55%);
768}
769
770#ColorPickerPlugin QToolButton:hover {
771   background: rgba(159,155,154,35%);
772    border: 1.2px solid #323232;
773    color: #ffffff;
774    font-style: bold;
775}
776
777#ColorPickerPlugin QToolButton:pressed {
778    padding: 1px;
779    margin: 2px;
780    color: #a1a1a1;
781     background-color:qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0  rgba( 176, 174, 174, 30% ), stop:1 #000000);
782}
783
784#ColorPickerPlugin  QLineEdit {
785     background-color:qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 #a6a09e, stop:0.995 #a5a796);
786     border: 1px solid #616356;
787     margin: 2px;
788    padding: 1px;
789     border-radius: 5%;
790     color:black;
791}
792
793#DirectoryMenu {
794    padding: 1px;
795    margin-top: 5px;
796    margin-bottom: 5px;
797    margin-left: 1px;
798    color: #a1a1a1;
799     background: rgba(67,67,67,55%);
800}
801
802#DirectoryMenu:hover {
803   background: rgba(159,155,154,35%);
804    border: 1.2px solid #323232;
805    color: #ffffff;
806    font-style: bold;
807}
808
809#DirectoryMenu:pressed {
810    padding: 1px;
811    margin: 2px;
812    color: #a1a1a1;
813     background-color:qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0  rgba( 176, 174, 174, 30% ), stop:1 #000000);
814}
815
816#StatusNotifier StatusNotifierButton {
817    margin-top: 5px;
818    margin-bottom: 5px;
819    margin-left: 1px;
820    padding: 1px;
821    border-radius: 4px;
822    background: rgba(67,67,67,55%);
823    border: 0px solid #1E1E1E;;
824}
825
826#StatusNotifier StatusNotifierButton:hover {
827    background: none;
828}
829
830#StatusNotifier StatusNotifierButton:pressed {
831    background-color: transparent;
832    border-top: 2px solid #111111;
833    border-bottom: 2px solid #111111;
834    border-left: 1px solid #111111;
835    border-right: 1px solid #111111;
836    margin: 2px;
837    padding: 3px;
838    color: darkslategray;
839    border-radius: 0px;
840}
841