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