[QT] QSS beautification-main window

table of Contents

 

1. QMenu menu

2. QMenuBar menu bar

3. QToolBar toolbar

4. QStatusBar status bar

---

1. QMenu menu

QMenu {
     background-color: white; /* 设置整个菜单区域的背景色*/
     border: 1px solid white;/*整个菜单区域的边框粗细、样式、颜色*/
 }
  
 QMenu::item {
     background-color: transparent;
     padding:5px 32px;/*设置菜单项文字上下和左右的内边距，效果就是菜单中的条目左右上下有了间隔*/
     margin:0px 8px;/*设置菜单项的外边距*/
     border-bottom:1px solid #DBDBDB;/*为菜单项之间添加横线间隔*/
 }
  
 QMenu::item:selected { /* when user selects item using mouse or keyboard */
     background-color: #2dabf9;/*这一句是设置菜单项鼠标经过选中的样式*/
 }

QMenu {
      background-color: white;
      margin: 2px; /* some spacing around the menu */
  }

  QMenu::item {
      padding: 2px 25px 2px 20px;
      border: 1px solid transparent; /* reserve space for selection border */
  }

  QMenu::item:selected {
      border-color: darkblue;
      background: rgba(100, 100, 100, 150);
  }

  QMenu::icon:checked { /* appearance of a 'checked' icon */
      background: gray;
      border: 1px inset gray;
      position: absolute;
      top: 1px;
      right: 1px;
      bottom: 1px;
      left: 1px;
  }

  QMenu::separator {
      height: 2px;
      background: lightblue;
      margin-left: 10px;
      margin-right: 5px;
  }

  QMenu::indicator {
      width: 13px;
      height: 13px;
  }

  /* non-exclusive indicator = check box style indicator (see QActionGroup::setExclusive) */
  QMenu::indicator:non-exclusive:unchecked {
      image: url(:/images/checkbox_unchecked.png);
  }

  QMenu::indicator:non-exclusive:unchecked:selected {
      image: url(:/images/checkbox_unchecked_hover.png);
  }

  QMenu::indicator:non-exclusive:checked {
      image: url(:/images/checkbox_checked.png);
  }

  QMenu::indicator:non-exclusive:checked:selected {
      image: url(:/images/checkbox_checked_hover.png);
  }

  /* exclusive indicator = radio button style indicator (see QActionGroup::setExclusive) */
  QMenu::indicator:exclusive:unchecked {
      image: url(:/images/radiobutton_unchecked.png);
  }

  QMenu::indicator:exclusive:unchecked:selected {
      image: url(:/images/radiobutton_unchecked_hover.png);
  }

  QMenu::indicator:exclusive:checked {
      image: url(:/images/radiobutton_checked.png);
  }

  QMenu::indicator:exclusive:checked:selected {
      image: url(:/images/radiobutton_checked_hover.png);
  }

2. QMenuBar menu bar

QMenuBar {
      background-color: qlineargradient(x1:0, y1:0, x2:0, y2:1,
                                        stop:0 lightgray, stop:1 darkgray);
  }

  QMenuBar::item {
      spacing: 3px; /* spacing between menu bar items */
      padding: 1px 4px;
      background: transparent;
      border-radius: 4px;
  }

  QMenuBar::item:selected { /* when selected using mouse or keyboard */
      background: #a8a8a8;
  }

  QMenuBar::item:pressed {
      background: #888888;
  }

3. QToolBar toolbar

QToolBar {
      background: red;
      spacing: 3px; /* spacing between items in the tool bar */
  }

  QToolBar::handle {
      image: url(handle.png);
  }

4. QStatusBar status bar

  QStatusBar {
      background: brown;
  }

  QStatusBar::item {
      border: 1px solid red;
      border-radius: 3px;
  }

  QStatusBar QLabel {
      border: 3px solid white;
  }

 

To be perfected!