Qt
Internal/Contributor docs for the Qt SDK. <b>Note:</b> These are NOT official API docs; those are found <a href='https://doc.qt.io/'>here</a>.
Loading...
Searching...
No Matches
doc_src_stylesheet.qdoc
Go to the documentation of this file.
1// Copyright (C) 2016 The Qt Company Ltd.
2// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
3
4//! [0]
5QLineEdit { background: yellow }
6QCheckBox { color: red }
7//! [0]
8
9
10//! [1]
11QPushButton { color: red }
12//! [1]
13
14
15//! [2]
16QPushButton, QLineEdit, QComboBox { color: red }
17//! [2]
18
19
20//! [3]
21QPushButton { color: red }
22QLineEdit { color: red }
23QComboBox { color: red }
24//! [3]
25
26
27//! [4]
28QPushButton { color: red; background-color: white }
29//! [4]
30
31
32//! [5]
33QComboBox::drop-down { image: url(dropdown.png) }
34//! [5]
35
36
37//! [6]
38QComboBox {
39 margin-right: 20px;
40}
41QComboBox::drop-down {
42 subcontrol-origin: margin;
43}
44//! [6]
45
46
47//! [7]
48QComboBox::down-arrow {
49 image: url(down_arrow.png);
50}
51QComboBox::down-arrow:pressed {
52 position: relative;
53 top: 1px; left: 1px;
54}
55//! [7]
56
57
58//! [8]
59QPushButton:hover { color: white }
60//! [8]
61
62
63//! [9]
64QRadioButton:!hover { color: red }
65//! [9]
66
67
68//! [10]
69QCheckBox:hover:checked { color: white }
70//! [10]
71
72
73//! [11]
74QPushButton:hover:!pressed { color: blue; }
75//! [11]
76
77
78//! [12]
79QCheckBox:hover, QCheckBox:checked { color: white }
80//! [12]
81
82
83//! [13]
84QComboBox::drop-down:hover { image: url(dropdown_bright.png) }
85//! [13]
86
87
88//! [14]
89QPushButton#okButton { color: gray }
90QPushButton { color: red }
91//! [14]
92
93
94//! [15]
95QPushButton:hover { color: white }
96QPushButton { color: red }
97//! [15]
98
99
100//! [16]
101QPushButton:hover { color: white }
102QPushButton:enabled { color: red }
103//! [16]
104
105
106//! [17]
107QPushButton:enabled { color: red }
108QPushButton:hover { color: white }
109//! [17]
110
111
112//! [18]
113QPushButton:hover:enabled { color: white }
114QPushButton:enabled { color: red }
115//! [18]
116
117
118//! [19]
119QPushButton { color: red }
120QAbstractButton { color: gray }
121//! [19]
122
123
124//! [20]
125* {} /* a=0 b=0 c=0 -> specificity = 0 */
126LI {} /* a=0 b=0 c=1 -> specificity = 1 */
127UL LI {} /* a=0 b=0 c=2 -> specificity = 2 */
128UL OL+LI {} /* a=0 b=0 c=3 -> specificity = 3 */
129H1 + *[REL=up]{} /* a=0 b=1 c=1 -> specificity = 11 */
130UL OL LI.red {} /* a=0 b=1 c=3 -> specificity = 13 */
131LI.red.level {} /* a=0 b=2 c=1 -> specificity = 21 */
132#x34y {} /* a=1 b=0 c=0 -> specificity = 100 */
133//! [20]
134
135
136//! [28]
137MyLabel { qproperty-pixmap: url(pixmap.png); }
138MyGroupBox { qproperty-titleColor: rgb(100, 200, 100); }
139QPushButton { qproperty-iconSize: 20px 20px; }
140//! [28]
141
142
143//! [30]
144QPushButton { background-color: red; border: none; }
145//! [30]
146
147
148//! [31]
149QToolButton { background-color: red; border: none; }
150//! [31]
151
152
153//! [33]
154QTreeView {
155 alternate-background-color: blue;
156 background: yellow;
157}
158//! [33]
159
160
161//! [34]
162QTextEdit { background: yellow }
163//! [34]
164
165
166//! [35]
167QLabel {
168 background-image: url(dense6pattern.png);
169 background-repeat: repeat-xy;
170}
171//! [35]
172
173
174//! [36]
175QLabel { background-color: yellow }
176QLineEdit { background-color: rgb(255, 0, 0) }
177//! [36]
178
179
180//! [37]
181QFrame { background-image: url(:/images/hydro.png) }
182//! [37]
183
184
185//! [38]
186QFrame {
187 background: white url(:/images/ring.png);
188 background-repeat: repeat-y;
189 background-position: left;
190}
191//! [38]
192
193
194//! [39]
195QFrame {
196 background: url(:/images/footer.png);
197 background-position: bottom left;
198}
199//! [39]
200
201
202//! [40]
203QTextEdit {
204 background-image: url("leaves.png");
205 background-attachment: fixed;
206}
207//! [40]
208
209
210//! [41]
211QFrame {
212 background-image: url(:/images/header.png);
213 background-position: top left;
214 background-origin: content;
215 background-clip: padding;
216}
217//! [41]
218
219
220//! [42]
221QFrame {
222 background-image: url(:/images/header.png);
223 background-position: top left;
224 background-origin: content;
225}
226//! [42]
227
228
229//! [43]
230QLineEdit { border: 1px solid white }
231//! [43]
232
233
234//! [44]
235QLineEdit {
236 border-width: 1px;
237 border-style: solid;
238 border-color: white;
239}
240//! [44]
241
242
243//! [45]
244QLineEdit {
245 border-width: 1px;
246 border-style: solid;
247 border-radius: 4px;
248}
249//! [45]
250
251
252//! [46]
253QLineEdit {
254 border-width: 1px;
255 border-style: solid;
256 border-color: blue;
257}
258//! [46]
259
260
261//! [47]
262QLineEdit {
263 border-width: 2px;
264 border-style: solid;
265 border-color: darkblue;
266}
267//! [47]
268
269
270//! [48]
271QSpinBox::down-button { bottom: 2px }
272//! [48]
273
274
275//! [49]
276* { button-layout: 2 }
277//! [49]
278
279
280//! [50]
281QPushButton { color: red }
282//! [50]
283
284
285//! [51]
286QDialogButtonBox { dialogbuttonbox-buttons-have-icons: 1; }
287//! [51]
288
289
290//! [52]
291* { etch-disabled-text: 1 }
292//! [52]
293
294
295//! [53]
296QCheckBox { font: bold italic large "Times New Roman" }
297//! [53]
298
299
300//! [54]
301QCheckBox { font-family: "New Century Schoolbook" }
302//! [54]
303
304
305//! [55]
306QTextEdit { font-size: 12px }
307//! [55]
308
309
310//! [56]
311QTextEdit { font-style: italic }
312//! [56]
313
314
315//! [57]
316* { gridline-color: gray }
317//! [57]
318
319
320//! [58]
321QSpinBox::down-button { height: 10px }
322//! [58]
323
324
325//! [59]
326// implicitly sets the size of down-button to the
327// size of spindown.png
328QSpinBox::down-button { image: url(:/images/spindown.png) }
329//! [59]
330
331
332//! [60]
333QSpinBox::down-button { left: 2px }
334//! [60]
335
336
337//! [61]
338* { lineedit-password-character: 9679 }
339//! [61]
340
341
342//! [62]
343QLineEdit { margin: 2px }
344//! [62]
345
346
347//! [63]
348QSpinBox { max-height: 24px }
349//! [63]
350
351
352//! [64]
353QComboBox { max-width: 72px }
354//! [64]
355
356
357//! [65]
358QMessageBox { messagebox-text-interaction-flags: 5 }
359//! [65]
360
361
362//! [66]
363QComboBox { min-height: 24px }
364//! [66]
365
366
367//! [67]
368QComboBox { min-width: 72px }
369//! [67]
370
371
372//! [68]
373QToolTip { opacity: 223 }
374//! [68]
375
376
377//! [69]
378QLineEdit { padding: 3px }
379//! [69]
380
381
382//! [70]
383QSpinBox::down-button { right: 2px }
384//! [70]
385
386
387//! [71]
388QTextEdit { selection-background-color: darkblue }
389//! [71]
390
391
392//! [72]
393QTextEdit { selection-color: white }
394//! [72]
395
396
397//! [73]
398* { show-decoration-selected: 1 }
399//! [73]
400
401
402//! [74]
403QMenuBar { spacing: 10 }
404//! [74]
405
406
407//! [75]
408QSpinBox::up-button {
409 image: url(:/images/spinup.png);
410 subcontrol-origin: content;
411 subcontrol-position: right top;
412}
413//! [75]
414
415
416//! [76]
417QSpinBox::down-button {
418 image: url(:/images/spindown.png);
419 subcontrol-origin: padding;
420 subcontrol-position: right bottom;
421}
422//! [76]
423
424
425//! [77]
426QPushButton {
427 text-align: left;
428}
429//! [77]
430
431
432//! [78]
433QSpinBox::up-button { top: 2px }
434//! [78]
435
436
437//! [79]
438QSpinBox::up-button { width: 12px }
439//! [79]
440
441
442//! [80]
443QTextEdit { background-position: bottom center }
444//! [80]
445
446
447//! [81]
448QDialog { etch-disabled-text: 1 }
449//! [81]
450
451
452//! [82]
453/* red red red red */
454QLabel { border-color: red }
455/* red blue red blue */
456QLabel { border-color: red blue }
457/* red blue green blue */
458QLabel { border-color: red blue green }
459/* red blue green yellow */
460QLabel { border-color: red blue green yellow }
461//! [82]
462
463
464//! [83]
465/* 1px 1px 1px 1px */
466QLabel { border-width: 1px }
467/* 1px 2px 1px 2px */
468QLabel { border-width: 1px 2px }
469/* 1px 2px 3px 2px */
470QLabel { border-width: 1px 2px 3px }
471/* 1px 2px 3px 4px */
472QLabel { border-width: 1px 2px 3px 4px }
473//! [83]
474
475
476//! [84]
477/* opaque red */
478QLabel { border-color: red }
479/* opaque red */
480QLabel { border-color: #FF0000 }
481/* 75% opaque red */
482QLabel { border-color: rgba(255, 0, 0, 75%) }
483/* opaque red */
484QLabel { border-color: rgb(255, 0, 0) }
485/* opaque red */
486QLabel { border-color: rgb(100%, 0%, 0%) }
487/* opaque yellow */
488QLabel { border-color: hsv(60, 100%, 100%) }
489/* 75% blue */
490QLabel { border-color: hsva(240, 255, 255, 75%) }
491/* opaque yellow */
492QLabel { border-color: hsl(60, 100%, 50%) }
493/* 75% blue */
494QLabel { border-color: hsla(240, 255, 50%, 75%) }
495//! [84]
496
497
498//! [85]
499/* linear gradient from white to green */
500QTextEdit {
501 background: qlineargradient(x1:0, y1:0, x2:1, y2:1,
502 stop:0 white, stop: 0.4 gray, stop:1 green)
503}
504
505/* linear gradient from white to green */
506QTextEdit {
507 background: qlineargradient(x1:0, y1:0, x2:1, y2:1,
508 stop:0 white, stop: 0.4 rgba(10, 20, 30, 40),
509 stop:1 rgb(0, 200, 230, 200))
510}
511
512
513/* conical gradient from white to green */
514QTextEdit {
515 background: qconicalgradient(cx:0.5, cy:0.5, angle:30,
516 stop:0 white, stop:1 #00FF00)
517}
518
519/* radial gradient from white to green */
520QTextEdit {
521 background: qradialgradient(cx:0, cy:0, radius: 1,
522 fx:0.5, fy:0.5, stop:0 white, stop:1 green)
523}
524//! [85]
525
526
527//! [86]
528* {
529 file-icon: url(file.png),
530 url(file_selected.png) selected;
531 }
532
533QMessageBox {
534 dialogbuttonbox-buttons-have-icons: true;
535 dialog-ok-icon: url(ok.svg);
536 dialog-cancel-icon: url(cancel.png),
537 url(grayed_cancel.png) disabled;
538}
539//! [86]
540
541
542//! [87]
543QPushButton { color: palette(dark); }
544//! [87]
545
546
547//! [94]
548*[mandatoryField="true"] { background-color: yellow }
549//! [94]
550
551
552//! [96]
553QPushButton#evilButton { background-color: red }
554//! [96]
555
556
557//! [97]
558QPushButton#evilButton {
559 background-color: red;
560 border-style: outset;
561 border-width: 2px;
562 border-color: beige;
563}
564//! [97]
565
566
567//! [98]
568QPushButton#evilButton {
569 background-color: red;
570 border-style: outset;
571 border-width: 2px;
572 border-radius: 10px;
573 border-color: beige;
574 font: bold 14px;
575 min-width: 10em;
576 padding: 6px;
577}
578//! [98]
579
580
581//! [99]
582QPushButton#evilButton {
583 background-color: red;
584 border-style: outset;
585 border-width: 2px;
586 border-radius: 10px;
587 border-color: beige;
588 font: bold 14px;
589 min-width: 10em;
590 padding: 6px;
591}
592QPushButton#evilButton:pressed {
593 background-color: rgb(224, 0, 0);
594 border-style: inset;
595}
596//! [99]
597
598
599//! [100]
600QPushButton#evilButton::menu-indicator {
601 image: url(myindicator.png);
602}
603//! [100]
604
605
606//! [101]
607QPushButton::menu-indicator {
608 image: url(myindicator.png);
609 subcontrol-position: right center;
610 subcontrol-origin: padding;
611 left: -2px;
612}
613//! [101]
614
615
616//! [102]
617QLineEdit { color: red }
618//! [102]
619
620
621//! [103]
622QLineEdit { color: red }
623QLineEdit[readOnly="true"] { color: gray }
624//! [103]
625
626
627//! [104]
628QLineEdit { color: red }
629QLineEdit[readOnly="true"] { color: gray }
630#registrationDialog QLineEdit { color: brown }
631//! [104]
632
633
634//! [105]
635QLineEdit { color: red }
636QLineEdit[readOnly="true"] { color: gray }
637QDialog QLineEdit { color: brown }
638//! [105]
639
640
641//! [106]
642QTextEdit, QListView {
643 background-color: white;
644 background-image: url(draft.png);
645 background-attachment: scroll;
646}
647//! [106]
648
649
650//! [107]
651QTextEdit, QListView {
652 background-color: white;
653 background-image: url(draft.png);
654 background-attachment: fixed;
655}
656//! [107]
657
658
659//! [108]
660QCheckBox {
661 spacing: 5px;
662}
663
664QCheckBox::indicator {
665 width: 13px;
666 height: 13px;
667}
668
669QCheckBox::indicator:unchecked {
670 image: url(:/images/checkbox_unchecked.png);
671}
672
673QCheckBox::indicator:unchecked:hover {
674 image: url(:/images/checkbox_unchecked_hover.png);
675}
676
677QCheckBox::indicator:unchecked:pressed {
678 image: url(:/images/checkbox_unchecked_pressed.png);
679}
680
681QCheckBox::indicator:checked {
682 image: url(:/images/checkbox_checked.png);
683}
684
685QCheckBox::indicator:checked:hover {
686 image: url(:/images/checkbox_checked_hover.png);
687}
688
689QCheckBox::indicator:checked:pressed {
690 image: url(:/images/checkbox_checked_pressed.png);
691}
692
693QCheckBox::indicator:indeterminate:hover {
694 image: url(:/images/checkbox_indeterminate_hover.png);
695}
696
697QCheckBox::indicator:indeterminate:pressed {
698 image: url(:/images/checkbox_indeterminate_pressed.png);
699}
700//! [108]
701
702
703//! [109]
704QComboBox {
705 border: 1px solid gray;
706 border-radius: 3px;
707 padding: 1px 18px 1px 3px;
708 min-width: 6em;
709}
710
711QComboBox:editable {
712 background: white;
713}
714
715QComboBox:!editable, QComboBox::drop-down:editable {
716 background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
717 stop: 0 #E1E1E1, stop: 0.4 #DDDDDD,
718 stop: 0.5 #D8D8D8, stop: 1.0 #D3D3D3);
719}
720
721/* QComboBox gets the "on" state when the popup is open */
722QComboBox:!editable:on, QComboBox::drop-down:editable:on {
723 background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
724 stop: 0 #D3D3D3, stop: 0.4 #D8D8D8,
725 stop: 0.5 #DDDDDD, stop: 1.0 #E1E1E1);
726}
727
728QComboBox:on { /* shift the text when the popup opens */
729 padding-top: 3px;
730 padding-left: 4px;
731}
732
733QComboBox::drop-down {
734 subcontrol-origin: padding;
735 subcontrol-position: top right;
736 width: 15px;
737
738 border-left-width: 1px;
739 border-left-color: darkgray;
740 border-left-style: solid; /* just a single line */
741 border-top-right-radius: 3px; /* same radius as the QComboBox */
742 border-bottom-right-radius: 3px;
743}
744
745QComboBox::down-arrow {
746 image: url(/usr/share/icons/crystalsvg/16x16/actions/1downarrow.png);
747}
748
749QComboBox::down-arrow:on { /* shift the arrow when popup is open */
750 top: 1px;
751 left: 1px;
752}
753//! [109]
754
755
756//! [110]
757QComboBox QAbstractItemView {
758 border: 2px solid darkgray;
759 selection-background-color: lightgray;
760}
761//! [110]
762
763
764//! [111]
765QDockWidget {
766 border: 1px solid lightgray;
767 titlebar-close-icon: url(close.png);
768 titlebar-normal-icon: url(undock.png);
769}
770
771QDockWidget::title {
772 text-align: left; /* align the text to the left */
773 background: lightgray;
774 padding-left: 5px;
775}
776
777QDockWidget::close-button, QDockWidget::float-button {
778 border: 1px solid transparent;
779 background: darkgray;
780 padding: 0px;
781}
782
783QDockWidget::close-button:hover, QDockWidget::float-button:hover {
784 background: gray;
785}
786
787QDockWidget::close-button:pressed, QDockWidget::float-button:pressed {
788 padding: 1px -1px -1px 1px;
789}
790//! [111]
791
792
793//! [112]
794QDockWidget {
795 border: 1px solid lightgray;
796 titlebar-close-icon: url(close.png);
797 titlebar-normal-icon: url(float.png);
798}
799
800QDockWidget::title {
801 text-align: left;
802 background: lightgray;
803 padding-left: 35px;
804}
805
806QDockWidget::close-button, QDockWidget::float-button {
807 background: darkgray;
808 padding: 0px;
809 icon-size: 14px; /* maximum icon size */
810}
811
812QDockWidget::close-button:hover, QDockWidget::float-button:hover {
813 background: gray;
814}
815
816QDockWidget::close-button:pressed, QDockWidget::float-button:pressed {
817 padding: 1px -1px -1px 1px;
818}
819
820QDockWidget::close-button {
821 subcontrol-position: top left;
822 subcontrol-origin: margin;
823 position: absolute;
824 top: 0px; left: 0px; bottom: 0px;
825 width: 14px;
826}
827
828QDockWidget::float-button {
829 subcontrol-position: top left;
830 subcontrol-origin: margin;
831 position: absolute;
832 top: 0px; left: 16px; bottom: 0px;
833 width: 14px;
834}
835//! [112]
836
837
838//! [113]
839QFrame, QLabel, QToolTip {
840 border: 2px solid green;
841 border-radius: 4px;
842 padding: 2px;
843 background-image: url(images/welcome.png);
844}
845//! [113]
846
847
848//! [114]
849QGroupBox {
850 background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
851 stop: 0 #E0E0E0, stop: 1 #FFFFFF);
852 border: 2px solid gray;
853 border-radius: 5px;
854 margin-top: 1ex; /* leave space at the top for the title */
855}
856
857QGroupBox::title {
858 subcontrol-origin: margin;
859 subcontrol-position: top center; /* position at the top center */
860 padding: 0 3px;
861 background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
862 stop: 0 #FF0ECE, stop: 1 #FFFFFF);
863}
864//! [114]
865
866
867//! [115]
868QGroupBox::indicator {
869 width: 13px;
870 height: 13px;
871}
872
873QGroupBox::indicator:unchecked {
874 image: url(:/images/checkbox_unchecked.png);
875}
876
877/* proceed with styling just like QCheckBox */
878//! [115]
879
880
881//! [116]
882QHeaderView::section {
883 background-color: qlineargradient(x1:0, y1:0, x2:0, y2:1,
884 stop:0 #616161, stop: 0.5 #505050,
885 stop: 0.6 #434343, stop:1 #656565);
886 color: white;
887 padding-left: 4px;
888 border: 1px solid #6c6c6c;
889}
890
891QHeaderView::section:checked
892{
893 background-color: red;
894}
895
896/* style the sort indicator */
897QHeaderView::down-arrow {
898 image: url(down_arrow.png);
899}
900
901QHeaderView::up-arrow {
902 image: url(up_arrow.png);
903}
904//! [116]
905
906
907//! [117]
908QLineEdit {
909 border: 2px solid gray;
910 border-radius: 10px;
911 padding: 0 8px;
912 background: yellow;
913 selection-background-color: darkgray;
914}
915//! [117]
916
917
918//! [118]
919QLineEdit[echoMode="2"] {
920 lineedit-password-character: 9679;
921}
922//! [118]
923
924
925//! [119]
926QLineEdit:read-only {
927 background: lightblue;
928}
929//! [119]
930
931
932//! [120]
933QListView {
934 alternate-background-color: yellow;
935}
936//! [120]
937
938
939//! [121]
940QListView {
941 show-decoration-selected: 1; /* make the selection span the entire width of the view */
942}
943
944QListView::item:alternate {
945 background: #EEEEEE;
946}
947
948QListView::item:selected {
949 border: 1px solid #6a6ea9;
950}
951
952QListView::item:selected:!active {
953 background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
954 stop: 0 #ABAFE5, stop: 1 #8588B2);
955}
956
957QListView::item:selected:active {
958 background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
959 stop: 0 #6a6ea9, stop: 1 #888dd9);
960}
961
962QListView::item:hover {
963 background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
964 stop: 0 #FAFBFE, stop: 1 #DCDEF1);
965}
966//! [121]
967
968
969//! [122]
970QMainWindow::separator {
971 background: yellow;
972 width: 10px; /* when vertical */
973 height: 10px; /* when horizontal */
974}
975
976QMainWindow::separator:hover {
977 background: red;
978}
979//! [122]
980
981
982//! [123]
983QMenu {
984 background-color: #ABABAB; /* sets background of the menu */
985 border: 1px solid black;
986}
987
988QMenu::item {
989 /* sets background of menu item. set this to something non-transparent
990 if you want menu color and menu item color to be different */
991 background-color: transparent;
992}
993
994QMenu::item:selected { /* when user selects item using mouse or keyboard */
995 background-color: #654321;
996}
997//! [123]
998
999
1000//! [124]
1001QMenu {
1002 background-color: white;
1003 margin: 2px; /* some spacing around the menu */
1004}
1005
1006QMenu::item {
1007 padding: 2px 25px 2px 20px;
1008 border: 1px solid transparent; /* reserve space for selection border */
1009}
1010
1011QMenu::item:selected {
1012 border-color: darkblue;
1013 background: rgba(100, 100, 100, 150);
1014}
1015
1016QMenu::icon:checked { /* appearance of a 'checked' icon */
1017 background: gray;
1018 border: 1px inset gray;
1019 position: absolute;
1020 top: 1px;
1021 right: 1px;
1022 bottom: 1px;
1023 left: 1px;
1024}
1025
1026QMenu::separator {
1027 height: 2px;
1028 background: lightblue;
1029 margin-left: 10px;
1030 margin-right: 5px;
1031}
1032
1033QMenu::indicator {
1034 width: 13px;
1035 height: 13px;
1036}
1037
1038/* non-exclusive indicator = check box style indicator (see QActionGroup::setExclusive) */
1039QMenu::indicator:non-exclusive:unchecked {
1040 image: url(:/images/checkbox_unchecked.png);
1041}
1042
1043QMenu::indicator:non-exclusive:unchecked:selected {
1044 image: url(:/images/checkbox_unchecked_hover.png);
1045}
1046
1047QMenu::indicator:non-exclusive:checked {
1048 image: url(:/images/checkbox_checked.png);
1049}
1050
1051QMenu::indicator:non-exclusive:checked:selected {
1052 image: url(:/images/checkbox_checked_hover.png);
1053}
1054
1055/* exclusive indicator = radio button style indicator (see QActionGroup::setExclusive) */
1056QMenu::indicator:exclusive:unchecked {
1057 image: url(:/images/radiobutton_unchecked.png);
1058}
1059
1060QMenu::indicator:exclusive:unchecked:selected {
1061 image: url(:/images/radiobutton_unchecked_hover.png);
1062}
1063
1064QMenu::indicator:exclusive:checked {
1065 image: url(:/images/radiobutton_checked.png);
1066}
1067
1068QMenu::indicator:exclusive:checked:selected {
1069 image: url(:/images/radiobutton_checked_hover.png);
1070}
1071
1072//! [124]
1073
1074
1075//! [125]
1076QMenuBar {
1077 background-color: qlineargradient(x1:0, y1:0, x2:0, y2:1,
1078 stop:0 lightgray, stop:1 darkgray);
1079 spacing: 3px; /* spacing between menu bar items */
1080}
1081
1082QMenuBar::item {
1083 padding: 1px 4px;
1084 background: transparent;
1085 border-radius: 4px;
1086}
1087
1088QMenuBar::item:selected { /* when selected using mouse or keyboard */
1089 background: #a8a8a8;
1090}
1091
1092QMenuBar::item:pressed {
1093 background: #888888;
1094}
1095//! [125]
1096
1097
1098//! [126]
1099QProgressBar {
1100 border: 2px solid grey;
1101 border-radius: 5px;
1102}
1103
1104QProgressBar::chunk {
1105 background-color: #05B8CC;
1106 width: 20px;
1107}
1108//! [126]
1109
1110
1111//! [127]
1112QProgressBar {
1113 border: 2px solid grey;
1114 border-radius: 5px;
1115 text-align: center;
1116}
1117//! [127]
1118
1119
1120//! [128]
1121QProgressBar::chunk {
1122 background-color: #CD96CD;
1123 width: 10px;
1124 margin: 0.5px;
1125}
1126//! [128]
1127
1128
1129//! [129]
1130QPushButton {
1131 border: 2px solid #8f8f91;
1132 border-radius: 6px;
1133 background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
1134 stop: 0 #f6f7fa, stop: 1 #dadbde);
1135 min-width: 80px;
1136}
1137
1138QPushButton:pressed {
1139 background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
1140 stop: 0 #dadbde, stop: 1 #f6f7fa);
1141}
1142
1143QPushButton:flat {
1144 border: none; /* no border for a flat push button */
1145}
1146
1147QPushButton:default {
1148 border-color: navy; /* make the default button prominent */
1149}
1150//! [129]
1151
1152
1153//! [130]
1154QPushButton:open { /* when the button has its menu open */
1155 background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
1156 stop: 0 #dadbde, stop: 1 #f6f7fa);
1157}
1158
1159QPushButton::menu-indicator {
1160 image: url(menu_indicator.png);
1161 subcontrol-origin: padding;
1162 subcontrol-position: bottom right;
1163}
1164
1165QPushButton::menu-indicator:pressed, QPushButton::menu-indicator:open {
1166 position: relative;
1167 top: 2px; left: 2px; /* shift the arrow by 2 px */
1168}
1169//! [130]
1170
1171
1172//! [131]
1173QRadioButton::indicator {
1174 width: 13px;
1175 height: 13px;
1176}
1177
1178QRadioButton::indicator::unchecked {
1179 image: url(:/images/radiobutton_unchecked.png);
1180}
1181
1182QRadioButton::indicator:unchecked:hover {
1183 image: url(:/images/radiobutton_unchecked_hover.png);
1184}
1185
1186QRadioButton::indicator:unchecked:pressed {
1187 image: url(:/images/radiobutton_unchecked_pressed.png);
1188}
1189
1190QRadioButton::indicator::checked {
1191 image: url(:/images/radiobutton_checked.png);
1192}
1193
1194QRadioButton::indicator:checked:hover {
1195 image: url(:/images/radiobutton_checked_hover.png);
1196}
1197
1198QRadioButton::indicator:checked:pressed {
1199 image: url(:/images/radiobutton_checked_pressed.png);
1200}
1201//! [131]
1202
1203
1204//! [132]
1205QScrollBar:horizontal {
1206 border: 2px solid grey;
1207 background: #32CC99;
1208 height: 15px;
1209 margin: 0px 20px 0 20px;
1210}
1211//! [132]
1212
1213
1214//! [133]
1215QScrollBar::handle:horizontal {
1216 background: white;
1217 min-width: 20px;
1218}
1219//! [133]
1220
1221
1222//! [134]
1223QScrollBar::add-line:horizontal {
1224 border: 2px solid grey;
1225 background: #32CC99;
1226 width: 20px;
1227 subcontrol-position: right;
1228 subcontrol-origin: margin;
1229}
1230
1231QScrollBar::sub-line:horizontal {
1232 border: 2px solid grey;
1233 background: #32CC99;
1234 width: 20px;
1235 subcontrol-position: left;
1236 subcontrol-origin: margin;
1237}
1238//! [134]
1239
1240
1241//! [135]
1242QScrollBar::left-arrow:horizontal, QScrollBar::right-arrow:horizontal {
1243 border: 2px solid grey;
1244 width: 3px;
1245 height: 3px;
1246 background: white;
1247}
1248
1249QScrollBar::add-page:horizontal, QScrollBar::sub-page:horizontal {
1250 background: none;
1251}
1252//! [135]
1253
1254
1255//! [136]
1256QScrollBar:horizontal {
1257 border: 2px solid green;
1258 background: cyan;
1259 height: 15px;
1260 margin: 0px 40px 0 0px;
1261}
1262
1263QScrollBar::handle:horizontal {
1264 background: gray;
1265 min-width: 20px;
1266}
1267
1268QScrollBar::add-line:horizontal {
1269 background: blue;
1270 width: 16px;
1271 subcontrol-position: right;
1272 subcontrol-origin: margin;
1273 border: 2px solid black;
1274}
1275
1276QScrollBar::sub-line:horizontal {
1277 background: magenta;
1278 width: 16px;
1279 subcontrol-position: top right;
1280 subcontrol-origin: margin;
1281 border: 2px solid black;
1282 position: absolute;
1283 right: 20px;
1284}
1285
1286QScrollBar::left-arrow:horizontal, QScrollBar::right-arrow:horizontal {
1287 width: 3px;
1288 height: 3px;
1289 background: pink;
1290}
1291
1292QScrollBar::add-page:horizontal, QScrollBar::sub-page:horizontal {
1293 background: none;
1294}
1295
1296//! [136]
1297
1298
1299//! [137]
1300 QScrollBar:vertical {
1301 border: 2px solid grey;
1302 background: #32CC99;
1303 width: 15px;
1304 margin: 22px 0 22px 0;
1305 }
1306 QScrollBar::handle:vertical {
1307 background: white;
1308 min-height: 20px;
1309 }
1310 QScrollBar::add-line:vertical {
1311 border: 2px solid grey;
1312 background: #32CC99;
1313 height: 20px;
1314 subcontrol-position: bottom;
1315 subcontrol-origin: margin;
1316 }
1317
1318 QScrollBar::sub-line:vertical {
1319 border: 2px solid grey;
1320 background: #32CC99;
1321 height: 20px;
1322 subcontrol-position: top;
1323 subcontrol-origin: margin;
1324 }
1325 QScrollBar::up-arrow:vertical, QScrollBar::down-arrow:vertical {
1326 border: 2px solid grey;
1327 width: 3px;
1328 height: 3px;
1329 background: white;
1330 }
1331
1332 QScrollBar::add-page:vertical, QScrollBar::sub-page:vertical {
1333 background: none;
1334 }
1335//! [137]
1336
1337
1338//! [138]
1339QSizeGrip {
1340 image: url(:/images/sizegrip.png);
1341 width: 16px;
1342 height: 16px;
1343}
1344//! [138]
1345
1346
1347//! [139]
1348QSlider::groove:horizontal {
1349 border: 1px solid #999999;
1350 height: 8px; /* the groove expands to the size of the slider by default. by giving it a height, it has a fixed size */
1351 background: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 #B1B1B1, stop:1 #c4c4c4);
1352 margin: 2px 0;
1353}
1354
1355QSlider::handle:horizontal {
1356 background: qlineargradient(x1:0, y1:0, x2:1, y2:1, stop:0 #b4b4b4, stop:1 #8f8f8f);
1357 border: 1px solid #5c5c5c;
1358 width: 18px;
1359 margin: -2px 0; /* handle is placed by default on the contents rect of the groove. Expand outside the groove */
1360 border-radius: 3px;
1361}
1362//! [139]
1363
1364
1365//! [140]
1366QSlider::groove:vertical {
1367 background: red;
1368 position: absolute; /* absolutely position 4px from the left and right of the widget. setting margins on the widget should work too... */
1369 left: 4px; right: 4px;
1370}
1371
1372QSlider::handle:vertical {
1373 height: 10px;
1374 background: green;
1375 margin: 0 -4px; /* expand outside the groove */
1376}
1377
1378QSlider::add-page:vertical {
1379 background: white;
1380}
1381
1382QSlider::sub-page:vertical {
1383 background: pink;
1384}
1385//! [140]
1386
1387
1388//! [141]
1389QSpinBox {
1390 padding-right: 15px; /* make room for the arrows */
1391 border-image: url(:/images/frame.png) 4;
1392 border-width: 3;
1393}
1394
1395QSpinBox::up-button {
1396 subcontrol-origin: border;
1397 subcontrol-position: top right; /* position at the top right corner */
1398
1399 width: 16px; /* 16 + 2*1px border-width = 15px padding + 3px parent border */
1400 border-image: url(:/images/spinup.png) 1;
1401 border-width: 1px;
1402}
1403
1404QSpinBox::up-button:hover {
1405 border-image: url(:/images/spinup_hover.png) 1;
1406}
1407
1408QSpinBox::up-button:pressed {
1409 border-image: url(:/images/spinup_pressed.png) 1;
1410}
1411
1412QSpinBox::up-arrow {
1413 image: url(:/images/up_arrow.png);
1414 width: 7px;
1415 height: 7px;
1416}
1417
1418QSpinBox::up-arrow:disabled, QSpinBox::up-arrow:off { /* off state when value is max */
1419 image: url(:/images/up_arrow_disabled.png);
1420}
1421
1422QSpinBox::down-button {
1423 subcontrol-origin: border;
1424 subcontrol-position: bottom right; /* position at bottom right corner */
1425
1426 width: 16px;
1427 border-image: url(:/images/spindown.png) 1;
1428 border-width: 1px;
1429 border-top-width: 0;
1430}
1431
1432QSpinBox::down-button:hover {
1433 border-image: url(:/images/spindown_hover.png) 1;
1434}
1435
1436QSpinBox::down-button:pressed {
1437 border-image: url(:/images/spindown_pressed.png) 1;
1438}
1439
1440QSpinBox::down-arrow {
1441 image: url(:/images/down_arrow.png);
1442 width: 7px;
1443 height: 7px;
1444}
1445
1446QSpinBox::down-arrow:disabled,
1447QSpinBox::down-arrow:off { /* off state when value in min */
1448 image: url(:/images/down_arrow_disabled.png);
1449}
1450
1451//! [141]
1452
1453
1454//! [142]
1455QSplitter::handle {
1456 image: url(images/splitter.png);
1457}
1458
1459QSplitter::handle:horizontal {
1460 width: 2px;
1461}
1462
1463QSplitter::handle:vertical {
1464 height: 2px;
1465}
1466
1467QSplitter::handle:pressed {
1468 url(images/splitter_pressed.png);
1469}
1470
1471//! [142]
1472
1473
1474//! [143]
1475QStatusBar {
1476 background: brown;
1477}
1478
1479QStatusBar::item {
1480 border: 1px solid red;
1481 border-radius: 3px;
1482}
1483//! [143]
1484
1485
1486//! [144]
1487QStatusBar QLabel {
1488 border: 3px solid white;
1489}
1490//! [144]
1491
1492
1493//! [145]
1494QTabWidget::pane { /* The tab widget frame */
1495 border-top: 2px solid #C2C7CB;
1496}
1497
1498QTabWidget::tab-bar {
1499 left: 5px; /* move to the right by 5px */
1500}
1501
1502/* Style the tab using the tab sub-control. Note that
1503 it reads QTabBar _not_ QTabWidget */
1504QTabBar::tab {
1505 background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
1506 stop: 0 #E1E1E1, stop: 0.4 #DDDDDD,
1507 stop: 0.5 #D8D8D8, stop: 1.0 #D3D3D3);
1508 border: 2px solid #C4C4C3;
1509 border-bottom-color: #C2C7CB; /* same as the pane color */
1510 border-top-left-radius: 4px;
1511 border-top-right-radius: 4px;
1512 min-width: 8ex;
1513 padding: 2px;
1514}
1515
1516QTabBar::tab:selected, QTabBar::tab:hover {
1517 background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
1518 stop: 0 #fafafa, stop: 0.4 #f4f4f4,
1519 stop: 0.5 #e7e7e7, stop: 1.0 #fafafa);
1520}
1521
1522QTabBar::tab:selected {
1523 border-color: #9B9B9B;
1524 border-bottom-color: #C2C7CB; /* same as pane color */
1525}
1526
1527QTabBar::tab:!selected {
1528 margin-top: 2px; /* make non-selected tabs look smaller */
1529}
1530//! [145]
1531
1532
1533//! [146]
1534QTabWidget::pane { /* The tab widget frame */
1535 border-top: 2px solid #C2C7CB;
1536}
1537
1538QTabWidget::tab-bar {
1539 left: 5px; /* move to the right by 5px */
1540}
1541
1542/* Style the tab using the tab sub-control. Note that
1543 it reads QTabBar _not_ QTabWidget */
1544QTabBar::tab {
1545 background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
1546 stop: 0 #E1E1E1, stop: 0.4 #DDDDDD,
1547 stop: 0.5 #D8D8D8, stop: 1.0 #D3D3D3);
1548 border: 2px solid #C4C4C3;
1549 border-bottom-color: #C2C7CB; /* same as the pane color */
1550 border-top-left-radius: 4px;
1551 border-top-right-radius: 4px;
1552 min-width: 8ex;
1553 padding: 2px;
1554}
1555
1556QTabBar::tab:selected, QTabBar::tab:hover {
1557 background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
1558 stop: 0 #fafafa, stop: 0.4 #f4f4f4,
1559 stop: 0.5 #e7e7e7, stop: 1.0 #fafafa);
1560}
1561
1562QTabBar::tab:selected {
1563 border-color: #9B9B9B;
1564 border-bottom-color: #C2C7CB; /* same as pane color */
1565}
1566
1567QTabBar::tab:!selected {
1568 margin-top: 2px; /* make non-selected tabs look smaller */
1569}
1570
1571/* make use of negative margins for overlapping tabs */
1572QTabBar::tab:selected {
1573 /* expand/overlap to the left and right by 4px */
1574 margin-left: -4px;
1575 margin-right: -4px;
1576}
1577
1578QTabBar::tab:first:selected {
1579 margin-left: 0; /* the first selected tab has nothing to overlap with on the left */
1580}
1581
1582QTabBar::tab:last:selected {
1583 margin-right: 0; /* the last selected tab has nothing to overlap with on the right */
1584}
1585
1586QTabBar::tab:only-one {
1587 margin: 0; /* if there is only one tab, we don't want overlapping margins */
1588}
1589//! [146]
1590
1591
1592//! [147]
1593QTabWidget::pane { /* The tab widget frame */
1594 border-top: 2px solid #C2C7CB;
1595 position: absolute;
1596 top: -0.5em;
1597}
1598
1599QTabWidget::tab-bar {
1600 alignment: center;
1601}
1602
1603/* Style the tab using the tab sub-control. Note that
1604 it reads QTabBar _not_ QTabWidget */
1605QTabBar::tab {
1606 background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
1607 stop: 0 #E1E1E1, stop: 0.4 #DDDDDD,
1608 stop: 0.5 #D8D8D8, stop: 1.0 #D3D3D3);
1609 border: 2px solid #C4C4C3;
1610 border-bottom-color: #C2C7CB; /* same as the pane color */
1611 border-top-left-radius: 4px;
1612 border-top-right-radius: 4px;
1613 min-width: 8ex;
1614 padding: 2px;
1615}
1616
1617QTabBar::tab:selected, QTabBar::tab:hover {
1618 background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
1619 stop: 0 #fafafa, stop: 0.4 #f4f4f4,
1620 stop: 0.5 #e7e7e7, stop: 1.0 #fafafa);
1621}
1622
1623QTabBar::tab:selected {
1624 border-color: #9B9B9B;
1625 border-bottom-color: #C2C7CB; /* same as pane color */
1626}
1627//! [147]
1628
1629
1630//! [148]
1631QTabBar::tear {
1632 image: url(tear_indicator.png);
1633}
1634
1635QTabBar::scroller { /* the width of the scroll buttons */
1636 width: 20px;
1637}
1638
1639QTabBar QToolButton { /* the scroll buttons are tool buttons */
1640 border-image: url(scrollbutton.png) 2;
1641 border-width: 2px;
1642}
1643
1644QTabBar QToolButton::right-arrow { /* the arrow mark in the tool buttons */
1645 image: url(rightarrow.png);
1646}
1647
1648QTabBar QToolButton::left-arrow {
1649 image: url(leftarrow.png);
1650}
1651//! [148]
1652
1653
1654//! [149]
1655QTableView {
1656 selection-background-color: qlineargradient(x1: 0, y1: 0, x2: 0.5, y2: 0.5,
1657 stop: 0 #FF92BB, stop: 1 white);
1658}
1659//! [149]
1660
1661
1662//! [150]
1663QTableView QTableCornerButton::section {
1664 background: red;
1665 border: 2px outset red;
1666}
1667//! [150]
1668
1669
1670//! [151]
1671QToolBar {
1672 background: red;
1673 spacing: 3px; /* spacing between items in the tool bar */
1674}
1675
1676QToolBar::handle {
1677 image: url(handle.png);
1678}
1679//! [151]
1680
1681
1682//! [152]
1683QToolBox::tab {
1684 background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
1685 stop: 0 #E1E1E1, stop: 0.4 #DDDDDD,
1686 stop: 0.5 #D8D8D8, stop: 1.0 #D3D3D3);
1687 border-radius: 5px;
1688 color: darkgray;
1689}
1690
1691QToolBox::tab:selected { /* italicize selected tabs */
1692 font: italic;
1693 color: white;
1694}
1695//! [152]
1696
1697
1698//! [153]
1699QToolButton { /* all types of tool button */
1700 border: 2px solid #8f8f91;
1701 border-radius: 6px;
1702 background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
1703 stop: 0 #f6f7fa, stop: 1 #dadbde);
1704}
1705
1706QToolButton[popupMode="1"] { /* only for MenuButtonPopup */
1707 padding-right: 20px; /* make way for the popup button */
1708}
1709
1710QToolButton:pressed {
1711 background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
1712 stop: 0 #dadbde, stop: 1 #f6f7fa);
1713}
1714
1715/* the subcontrols below are used only in the MenuButtonPopup mode */
1716QToolButton::menu-button {
1717 border: 2px solid gray;
1718 border-top-right-radius: 6px;
1719 border-bottom-right-radius: 6px;
1720 /* 16px width + 4px for border = 20px allocated above */
1721 width: 16px;
1722}
1723
1724QToolButton::menu-arrow {
1725 image: url(downarrow.png);
1726}
1727
1728QToolButton::menu-arrow:open {
1729 top: 1px; left: 1px; /* shift it a bit */
1730}
1731//! [153]
1732
1733
1734//! [154]
1735QToolTip {
1736 border: 2px solid darkkhaki;
1737 padding: 5px;
1738 border-radius: 3px;
1739 opacity: 200;
1740}
1741//! [154]
1742
1743
1744//! [155]
1745QTreeView {
1746 alternate-background-color: yellow;
1747}
1748//! [155]
1749
1750
1751//! [156]
1752QTreeView {
1753 show-decoration-selected: 1;
1754}
1755
1756QTreeView::item {
1757 border: 1px solid #d9d9d9;
1758 border-top-color: transparent;
1759 border-bottom-color: transparent;
1760}
1761
1762QTreeView::item:hover {
1763 background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #e7effd, stop: 1 #cbdaf1);
1764 border: 1px solid #bfcde4;
1765}
1766
1767QTreeView::item:selected {
1768 border: 1px solid #567dbc;
1769}
1770
1771QTreeView::item:selected:active{
1772 background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #6ea1f1, stop: 1 #567dbc);
1773}
1774
1775QTreeView::item:selected:!active {
1776 background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #6b9be8, stop: 1 #577fbf);
1777}
1778//! [156]
1779
1780
1781//! [157]
1782QTreeView::branch {
1783 background: palette(base);
1784}
1785
1786QTreeView::branch:has-siblings:!adjoins-item {
1787 background: cyan;
1788}
1789
1790QTreeView::branch:has-siblings:adjoins-item {
1791 background: red;
1792}
1793
1794QTreeView::branch:!has-children:!has-siblings:adjoins-item {
1795 background: blue;
1796}
1797
1798QTreeView::branch:closed:has-children:has-siblings {
1799 background: pink;
1800}
1801
1802QTreeView::branch:has-children:!has-siblings:closed {
1803 background: gray;
1804}
1805
1806QTreeView::branch:open:has-children:has-siblings {
1807 background: magenta;
1808}
1809
1810QTreeView::branch:open:has-children:!has-siblings {
1811 background: green;
1812}
1813
1814//! [157]
1815
1816
1817//! [158]
1818QTreeView::branch:has-siblings:!adjoins-item {
1819 border-image: url(vline.png) 0;
1820}
1821
1822QTreeView::branch:has-siblings:adjoins-item {
1823 border-image: url(branch-more.png) 0;
1824}
1825
1826QTreeView::branch:!has-children:!has-siblings:adjoins-item {
1827 border-image: url(branch-end.png) 0;
1828}
1829
1830QTreeView::branch:has-children:!has-siblings:closed,
1831QTreeView::branch:closed:has-children:has-siblings {
1832 border-image: none;
1833 image: url(branch-closed.png);
1834}
1835
1836QTreeView::branch:open:has-children:!has-siblings,
1837QTreeView::branch:open:has-children:has-siblings {
1838 border-image: none;
1839 image: url(branch-open.png);
1840}
1841//! [158]
1842
1843//! [159]
1844QTabBar::close-button {
1845 image: url(close.png)
1846 subcontrol-position: left;
1847}
1848QTabBar::close-button:hover {
1849 image: url(close-hover.png)
1850}
1851
1852//! [159]
1853
1854//! [160]
1855* { lineedit-password-mask-delay: 1000 }
1856//! [160]
1857
1858//! [161]
1859QTableView::indicator:unchecked {
1860 background-color: #d7d6d5
1861}
1862//! [161]
1863
1864//! [162]
1865* { widget-animation-duration: 100 }
1866//! [162]
1867
1868//! [163]
1869QLineEdit { placeholder-text-color: #800000ff } /* semi-transparent blue */
1870//! [163]