蛋皮のhome

从此唯行乐,闲愁奈我何。

QSS——淡蓝天空

最近学习QSS,顺便做了一套QSS的皮肤。因为界面风格为蓝色,便取名为淡蓝天空。

放两个图来对比一下:

QSS淡蓝天空
QSS淡蓝天空
QSS原生皮肤
QSS原生皮肤

上面两个图便是QSS淡蓝天空和win10下的原生皮肤样式。对比一下还是可以看到很多细节的改变的。同时也增加了一个控件的样式——ToggleButton,这个控件是基于QCheckBox修改而来,功能和QCheckBox是一致的。从原生皮肤的对比中也可以看到。

稍微注意下还可以看到,我的QSS的标题栏多了两个按钮。这是因为标题栏是我自定义的标题栏。而修改QSS并不能够修改原生的标题栏,原生标题栏还会是原生皮肤的样式,如下图所示:

所以,为了风格的统一,以及为了能够在标题栏上添加更多的控件,参考了一下网上其他人写的一些自定义标题栏,完成了一个标题栏的自定义。同时,我的界面都是在UI中写的,而自定义的标题栏并没有在UI中写入,通过两个自定义类的调用便可以直接实现标题栏的效果。具体我会再开一篇文章详细写一下。

关于本QSS的内容和图片我已经打包在下面,欢迎下载并给我提供反馈!

同时也可以在下方快速浏览QSS代码,如果想下载查看代码的,欢迎点击这里:

https://www.lijianxun.cn/qss/bluewhite.qss

/*
 * The MIT License (MIT)
 * Name         淡蓝天空 / Light blue sky
 * Copyright    https://lijianxun.cn/?p=296
 * Author       Danpe
 * Email        danpe@lijianxun.cn
 * Vec          1.0
 * Date         2020/05/18
 * Description
 * 如果你发现了bug或者有其他建议,欢迎邮箱联系我。
 * If you find bugs or have other suggestion, please contact my email.
 */
/********** 提示栏 **********/
QToolTip
{
    color: #292929;
    border: 1px solid #60DAFF;
    border-radius: 3px;
    padding: 1px;
    background-color: #C4FAFF;
    background-repeat: no-repeat;
    background-position: left center;
}
/********** 窗口 **********/
QWidget {
    color: #292929;
    background-color: #E5FDFF;
}
QWidget:!enabled {
    color: #787878;
}
/********** 窗口聚焦样式 **********/
QWidget:focus {
    outline: none;
}
/********** 设置界面外边框 **********/
QFrame#TitleWidget
{
    border: 1px solid #A3A4A5;
}
/********** 设置界面标题栏 **********/
QWidget#TitleBar
{
    color: #292929;
    background-color: #C4FAFF;
}
/********** 列表项样式 **********/
QWidget:item {
    background-color: #E5FDFF;
}
/********** 列表项禁用的状态 **********/
QWidget:item::!enabled {
    color: #8C8C8C;
}
/********** 鼠标滑过未禁用列表项时的状态 **********/
QWidget:item::enabled:hover {
    background-color: QLinearGradient( x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #CBF8FF, stop: 1 #A7F6FF);
    color: #000000;
}
/********** 鼠标选择未禁用列表项时的状态 **********/
QWidget:item::enabled:selected {
    background-color: QLinearGradient( x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #A7F6FF, stop: 1 #66F4FF);
    color: #000000;
}
QMainWindow::separator
{
    background-color: #C4FAFF;
    color: white;
    padding: 0px;
    margin: 0px;
    border: none;
}
QMainWindow::separator:hover
{
    background-color: #88F9FF;
}
/********** QDockWidget样式 **********/
QDockWidget {
    border: none;
    background-color: #C4FAFF;
    titlebar-close-icon: none;      /*禁用原先的按钮,也可以在这里直接设置按钮图样,但是效果不理想*/
    titlebar-normal-icon: none;
}
QDockWidget::title {
    text-align: left;
    background: #C4FAFF;
}
/********** QDockWidget的关闭和显示按钮 **********/
QDockWidget::float-button {
    subcontrol-position: right;
    subcontrol-origin: margin;
    position: absolute;
    border: none;
    background: transparent;
    image: url(:/image/normalwindowEnabled.png);
    right: 20px;
    width: 20px;
    height: 16px;
}
QDockWidget::close-button {
    subcontrol-position: right;
    subcontrol-origin: margin;
    position: absolute;
    border: none;
    background: transparent;
    image: url(:/image/closewindowEnabled.png);
    right: 0px;
    width: 20px;
    height: 16px;
}
/********** QDockWidget的关闭和显示按钮 **********/
QDockWidget::float-button:hover {
    image: url(:/image/normalwindowHover.png);
    background: #88F9FF;
}
QDockWidget::float-button:pressed {
    background: #6BE7FF;
}
QDockWidget::close-button:hover {
    image: url(:/image/closewindowHover.png);
    background-color: #E81123;
}
QDockWidget::close-button:pressed {
    background: #F1707A;
}
/********** 菜单栏 **********/
QMenuBar {
    background: #C4FAFF;
}
/********** 未禁用的菜单栏的项 **********/
QMenuBar::item::enabled {
    background: transparent;
    color: #292929;
    alternate-background-color: #C4FAFF;
    padding: 5px 10px;
}
/********** 已禁用的菜单栏的项 **********/
QMenuBar::item::!enabled {
    background: transparent;
    color: #8C8C8C;
    alternate-background-color: #C4FAFF;
    padding: 5px 10px;
}
/********** 选择未禁用的菜单栏的项 **********/
QMenuBar::item::enabled:selected {
    background-color: QLinearGradient(
    x1:0, y1:0,
    x2:0, y2:1,
    stop:0 #C0FCFF,
    stop:1 #84F6FF);
}
QMenuBar::item::enabled:pressed {
    background-color: QLinearGradient(
    x1:0, y1:0,
    x2:0, y2:1,
    stop:0 #C0FCFF,
    stop:1 #84F6FF);
}
/********** 选择已禁用的菜单栏的项 **********/
QMenuBar::item::!enabled:selected {
    background: transparent;
    border: none;
}
QMenuBar::item::!enabled:pressed {
    background: transparent;
    border: none;
}
/********** 横表头样式 **********/
QHeaderView::section:horizontal {
    background-color: transparent;
    color: black;
    border: 1px solid #C2D7D8;
}
QHeaderView::section:horizontal:!enabled {
    color: #787878;
}
/********** 纵表头样式 **********/
QHeaderView::section:vertical {
    background-color: transparent;
    color: black;
    border: 1px solid #C2D7D8;
}
QHeaderView::section:vertical:!enabled {
    color: #787878;
}
/********** 表格内容和表头夹角样式 **********/
QTableView QTableCornerButton::section{
    background-color: transparent;
}
/********** 单行文本框样式 **********/
QLineEdit {
    background-color: QLinearGradient( x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #EDFDFD, stop: 1 #EDFDFD);
    color: black;
    padding: 1px;
    border-style: solid;
    border: 1px solid #7A7A7A;
}
QLineEdit:!enabled {
    background-color: transparent;
    color: #787878;
    border: 1px solid #CCCCCC;
}
/********** 单行文本框鼠标滑过样式 **********/
QLineEdit:hover {
    border: 1px solid #60DAFF;
}
/********** 单行文本框焦点选中样式 **********/
QLineEdit:focus {
    border: 2px solid #60DAFF;
}
/********** 多行文本框样式 **********/
QTextEdit {
    background-color: QLinearGradient( x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #EDFDFD, stop: 1 #EDFDFD);
    color: black;
    padding: 1px;
    border-style: solid;
    border: 1px solid #7A7A7A;
}
QTextEdit:!enabled {
    background-color: transparent;
    color: #787878;
    border: 1px solid #CCCCCC;
}
/********** 多行文本框鼠标滑过样式 **********/
QTextEdit:hover {
    border: 1px solid #00EEFF;
}
/********** 多行文本框焦点选中样式 **********/
QTextEdit:focus {
    border: 2px solid #00EEFF;
}
QPlainTextEdit {
    background-color: QLinearGradient( x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #EDFDFD, stop: 1 #EDFDFD);
    color: black;
    padding: 1px;
    border-style: solid;
    border: 1px solid #7A7A7A;
}
QPlainTextEdit:!enabled {
    background-color: transparent;
    color: #787878;
    border: 1px solid #CCCCCC;
}
QPlainTextEdit:hover {
    border: 1px solid #00EEFF;
}
QPlainTextEdit:focus {
    border: 2px solid #00EEFF;
}
/********** 数值控件样式 **********/
QTimeEdit, QDoubleSpinBox, QSpinBox {
    color: black;
    border: none;
    border-top: 1px solid #66f4ff;
    border-bottom: 1px solid #66f4ff;
    background-color: QLinearGradient( x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #EDFDFD, stop: 1 #EDFDFD);
}
QTimeEdit:!enabled, QDoubleSpinBox:!enabled, QSpinBox:!enabled {
    border-top: 1px solid #CBF8FF;
    border-bottom: 1px solid #CBF8FF;
    background-color: transparent;
}
QTimeEdit:hover, QDoubleSpinBox:hover, QSpinBox:hover {
    border-top: 1px solid #00eeff;
    border-bottom: 1px solid #00eeff;
}
QTimeEdit:hover, QDoubleSpinBox:focus, QSpinBox:focus {
    border-top: 2px solid #00eeff;
    border-bottom: 2px solid #00eeff;
}
/********** 数值显示向上按钮样式 **********/
QTimeEdit::up-button, QDoubleSpinBox::up-button, QSpinBox::up-button {
    subcontrol-position: right;
    image: url(:/image/PageTurningRightmaxEnabled.png);
    width: 14px;
    height: 18px;
    background-color: QLinearGradient( x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #C4FAFF, stop: 0.9 #88F9FF, stop: 1 #73F0FF);
}
/********** 数值显示向下按钮样式 **********/
QTimeEdit::down-button, QDoubleSpinBox::down-button, QSpinBox::down-button {
    subcontrol-position: left;
    image: url(:/image/PageTurningLeftmaxEnabled.png);
    width: 14px;
    height: 18px;
    background-color: QLinearGradient( x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #C4FAFF, stop: 0.9 #88F9FF, stop: 1 #73F0FF);
}
/********** 数值显示禁用向上按钮样式 **********/
QTimeEdit::up-button:!enabled, QDoubleSpinBox::up-button:!enabled, QSpinBox::up-button:!enabled {
    subcontrol-origin:border;
    subcontrol-position:right;
    image: url(:/image/PageTurningRightmax.png);
    background-color: #CBF8FF;
}
/********** 数值显示禁用向下按钮样式 **********/
QTimeEdit::down-button:!enabled, QDoubleSpinBox::down-button:!enabled, QSpinBox::down-button:!enabled {
    subcontrol-origin:border;
    subcontrol-position:left;
    image: url(:/image/PageTurningLeftmax.png);
    background-color: #CBF8FF;
}
/********** 数值显示滑过向上按钮样式 **********/
QTimeEdit::up-button:hover, QDoubleSpinBox::up-button:hover, QSpinBox::up-button:hover {
    subcontrol-origin:border;
    subcontrol-position:right;
    image: url(:/image/PageTurningRightmaxHover.png);
    background-color: QLinearGradient( x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #88F9FF, stop: 0.9 #6BE7FF, stop: 1 #60DAFF);
}
/********** 数值显示滑过向下按钮样式 **********/
QTimeEdit::down-button:hover, QDoubleSpinBox::down-button:hover, QSpinBox::down-button:hover {
    subcontrol-origin:border;
    subcontrol-position:left;
    image: url(:/image/PageTurningLeftmaxHover.png);
    background-color: QLinearGradient( x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #88F9FF, stop: 0.9 #6BE7FF, stop: 1 #60DAFF);
}
/********** 数值显示点击向上按钮样式 **********/
QTimeEdit::up-button:pressed, QDoubleSpinBox::up-button:pressed, QSpinBox::up-button:pressed {
    background-color: QLinearGradient( x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #73F0FF, stop: 0.9 #58BDFF, stop: 1 #40B7FF);
}
/********** 数值显示点击向下按钮样式 **********/
QTimeEdit::down-button:pressed, QDoubleSpinBox::down-button:pressed, QSpinBox::down-button:pressed {
    background-color: QLinearGradient( x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #73F0FF, stop: 0.9 #58BDFF, stop: 1 #40B7FF);
}
/********** 水平滚动条样式 **********/
QScrollBar:horizontal {
    height: 10px;
    background: #C4FAFF;
    margin:0px 10px 0px 10px;
    border-radius: 5px;
    min-width: 20px;
}
/********** 竖直滚动条样式 **********/
QScrollBar:vertical {
    width: 10px;
    background: #C4FAFF;
    margin:10px 0px 10px 0px;
    border-radius: 5px;
    min-height: 20px;
}
/********** 滚动条禁用样式 **********/
QScrollBar:horizontal:!enabled, QScrollBar:vertical:!enabled {
    background: transparent;
}
QScrollBar::left-arrow:horizontal, QScrollBar::right-arrow:horizontal {
    border: none;
    width: 3px;
    height: 3px;
}
QScrollBar::left-arrow:vertical, QScrollBar::right-arrow:vertical {
    border: none;
    width: 3px;
    height: 3px;
}
/********** 滚动条拉条样式 **********/
QScrollBar::handle:horizontal {
    background: #66F4FF;
    border-radius: 5px;
    min-width: 15px;
}
QScrollBar::handle:vertical {
    background: #66F4FF;
    border-radius: 5px;
    min-height: 15px;
}
/********** 滚动条拉条禁用样式 **********/
QScrollBar::handle:vertical:!enabled,
QScrollBar::handle:horizontal:!enabled {
    background: transparent;
}
/********** 滚动条拉条滑过样式 **********/
QScrollBar::handle:vertical:hover,
QScrollBar::handle:horizontal:hover {
    background: #47D1FF;
}
/********** 滚动条拉条按下样式 **********/
QScrollBar::handle:vertical:pressed,
QScrollBar::handle:horizontal:pressed {
    background: #58E1FF;
}
/********** 水平滚动条右侧控制块样式 **********/
QScrollBar::add-line:horizontal {
    border: none;
    background: transparent;
    width: 10px;
    subcontrol-position: right;
    subcontrol-origin: margin;
    image: url(:/image/PageTurningRightmaxEnabled.png);
}
/********** 水平滚动条左侧控制块样式 **********/
QScrollBar::sub-line:horizontal {
    border: none;
    background: transparent;
    width: 10px;
    subcontrol-position: left;
    subcontrol-origin: margin;
    image: url(:/image/PageTurningLeftmaxEnabled.png);
}
/********** 水平滚动条右侧控制块禁用样式 **********/
QScrollBar::add-line:horizontal:!enabled {
    image: url(:/image/PageTurningRightmax.png);
}
/********** 水平滚动条左侧控制块禁用样式 **********/
QScrollBar::sub-line:horizontal:!enabled {
    image: url(:/image/PageTurningLeftmax.png);
}
/********** 水平滚动条右侧控制块滑过样式 **********/
QScrollBar::add-line:horizontal:hover {
    image: url(:/image/PageTurningRightmaxHover.png);
}
/********** 水平滚动条左侧控制块滑过样式 **********/
QScrollBar::sub-line:horizontal:hover {
    image: url(:/image/PageTurningLeftmaxHover.png);
}
/********** 水平滚动条两侧控制块点击样式 **********/
QScrollBar::add-line:horizontal:pressed, QScrollBar::sub-line:horizontal:pressed {
    background: #C4FAFF;
}
/********** 垂直滚动条右侧控制块样式 **********/
QScrollBar::add-line:vertical {
    border: none;
    background: transparent;
    height: 10px;
    subcontrol-position: bottom;
    subcontrol-origin: margin;
    image: url(:/image/ShowMoremaxEnabled.png);
}
/********** 垂直滚动条左侧控制块样式 **********/
QScrollBar::sub-line:vertical {
    border: none;
    background: transparent;
    height: 10px;
    subcontrol-position: top;
    subcontrol-origin: margin;
    image: url(:/image/ShowLessmaxEnabled.png);
}
/********** 垂直滚动条右侧控制块滑过样式 **********/
QScrollBar::add-line:vertical:hover {
    image: url(:/image/ShowMoremaxHover.png);
}
/********** 垂直滚动条左侧控制块滑过样式 **********/
QScrollBar::sub-line:vertical:hover {
    image: url(:/image/ShowLessmaxHover.png);
}
/********** 垂直滚动条两侧控制块点击样式 **********/
QScrollBar::add-line:vertical:pressed, QScrollBar::sub-line:vertical:pressed {
    background: #C4FAFF;
}
/********** 水平滑块左右侧(上下侧)样式 **********/
QScrollBar::sub-page, QScrollBar::add-page {
    background: #C4FAFF;
    border-radius: 5px;
}
/********** 进度条样式 **********/
QProgressBar {
    border: 2px solid #47D1FF;
    border-radius: 5px;
    text-align: center;
    font-family: "Microsoft YaHei";
    font-size: 12px;
}
/********** 进度条进度样式 **********/
QProgressBar::chunk {
    background-color: #66F4FF;
}
/********** 进度条禁用样式 **********/
QProgressBar:!enabled {
    border: 2px solid #66F4FF;
}
/********** 进度条进度禁用样式 **********/
QProgressBar::chunk:!enabled {
    background-color: #99FAFF;
}
/********** 水平滑动条样式 **********/
QSlider::add-page:Horizontal {
    background-color: #DDDDDD;
}
QSlider::sub-page:Horizontal {
    background-color: #66F4FF;
}
QSlider::add-page:Horizontal:!enabled {
    background-color: #EEEEEE;
}
QSlider::sub-page:Horizontal:!enabled {
    background-color: #CAFAFF;
}
QSlider::groove:Horizontal {
    background: transparent;
    height: 6px;
}
QSlider::handle:Horizontal {
    height: 16px;
    width: 16px;
    image: url(:/qss/mywhite/image/filledcirclePressed.png);
    margin: -6 -0px;
}
QSlider::handle:Horizontal:!enabled {
    image: url(:/qss/mywhite/image/filledcircleHover.png);
}
QSlider::handle:Horizontal:hover {
    height: 20px;
    width: 20px;
    margin: -8 -0px;
}
/********** 垂直滑动条样式 **********/
QSlider::add-page:vertical {
    background-color: #DDDDDD;
}
QSlider::sub-page:vertical {
    background-color: #66F4FF;
}
QSlider::add-page:vertical:!enabled {
    background-color: #EEEEEE;
}
QSlider::sub-page:vertical:!enabled {
    background-color: #CAFAFF;
}
QSlider::groove:vertical {
    background: transparent;
    width: 6px;
}
QSlider::handle:vertical {
    height: 16px;
    width: 16px;
    image: url(:/qss/mywhite/image/filledcirclePressed.png);
    margin: -0 -6px;
}
QSlider::handle:vertical:!enabled {
    image: url(:/qss/mywhite/image/filledcircleHover.png);
}
QSlider::handle:vertical:hover {
    height: 20px;
    width: 20px;
    margin: -0 -8px;
}
/********** 分裂器样式 **********/
QSplitter::handle {
    background: #C4FAFF;
    border: none;
    margin: 2px;
}
QSplitter::handle:horizontal {
    width: 1px;
}
QSplitter::handle:vertical {
    height: 1px;
}
QSplitter::handle:hover {
    background: #88F9FF;
}
QSplitter::handle:pressed {
    background: #47D1FF;
}
/********** 状态栏样式 **********/
QStatusBar {
    background: #C4FAFF;
}
QStatusBar::item {
    border: none;
}
/********** 拉伸顶级窗口的图标样式 **********/
QSizeGrip {
    image: url(:/qss/mywhite/image/tag-subscriptEnabled.png);
    background-color: transparent;
    width: 16px;
    height: 16px;
}
QSizeGrip:!enabled {
    image: url(:/qss/mywhite/image/tag-subscript.png);
}
QSizeGrip:hover {
    image: url(:/qss/mywhite/image/tag-subscriptHover.png);
}
/********** QGroupBox控件样式 **********/
QGroupBox {
    background-color: #E5FDFF;
    border: 2px solid #66F4FF;
    border-radius: 5px;
    margin-top: 2ex;
    padding: 0px;
    margin: 0px;
}
QGroupBox:!enabled {
    border: 2px solid #C4FAFF;
}
QGroupBox::title {
    subcontrol-origin: margin;
    subcontrol-position: top center;
    background-color: #E5FDFF;
}
/********** QScrollArea控件样式 **********/
QScrollArea {
    border: 2px solid #66F4FF;
}
/********** 页标签样式 **********/
QTabBar::tab {
    color: black;
    border: 1px solid #66F4FF;
    background-color: #C4FAFF;
    border-bottom-style: none;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 3px;
    padding-bottom: 2px;
    margin-right: -1px;
}
/********** 页标签禁用样式 **********/
QTabBar::tab:!enabled {
    color: #787878;
}
/********** 多页显示区域样式 **********/
QTabWidget::pane {
    border: 1px solid #66F4FF;
}
/********** 最前页标签未被选择样式 **********/
QTabBar::tab:first:!selected {
    margin-left: 0px;
    border-top-left-radius: 5px;
}
/********** 最后页标签样式 **********/
QTabBar::tab:last {
    margin-right: 0; /* the last selected tab has nothing to overlap with on the right */
    border-top-right-radius: 5px;
}
QTabBar::tab:only-one {
    margin-left: 0px;
    margin-right: 0px;
}
/********** 页标签未选择的样式 **********/
QTabBar::tab:!selected {
    color: #292929;
    border-bottom-style: solid;
    margin-top: 3px;
    background-color: QLinearGradient(x1:0, y1:0, x2:0, y2:1, stop:1 #66F4FF, stop:.4 #C4FAFF);
}
QTabBar::tab:!selected:!enabled {
    color: #787878;
}
/********** 页标签已选择的样式 **********/
QTabBar::tab:selected {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    margin-bottom: 0px;
}
/********** 页标签滑过样式 **********/
QTabBar::tab:!selected:hover {
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    background-color: QLinearGradient(x1:0, y1:0, x2:0, y2:1, stop:1 #C4FAFF, stop:.4 #66F4FF);
}
/********** 最前页标签未被选择样式 **********/
QTabBar::tab:first:!selected:hover {
    border-top-left-radius: 5px;
}
QTabBar::tab:last:!selected:hover {
    border-top-right-radius: 5px;
}
/********** QToolBox样式 **********/
QToolBox {
    background-color: transparent;
    border:1px solid #66F4FF;
    border-radius: 5px;
}
QToolBox:!enabled {
    border:1px solid #C4FAFF;
}
QToolBox:hover {
    border:1px solid #60DAFF;
}
/********** QToolBox页标签样式 **********/
QToolBox::tab {
    background-color: QLinearGradient( x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #C4FAFF, stop: 0.9 #88F9FF, stop: 1 #73F0FF);
    border-radius: 5px;
    color: black;
}
QToolBox::tab:!enabled {
    background-color: QLinearGradient( x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #C4FAFF, stop: 1 #CBF8FF);
    color: #787878;
    border-color: #66F4FF;
}
/********** QToolBox标签划过样式 **********/
QToolBox::tab:hover {
    background-color: QLinearGradient(x1:0, y1:0, x2:0, y2:1, stop:1 #66F4FF, stop:.4 #88F9FF);
}
/********** QToolBox标签被选中样式 **********/
QToolBox::tab:selected {
    background-color: QLinearGradient( x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #88F9FF, stop: 0.9 #6BE7FF, stop: 1 #60DAFF);
}
QToolBox::tab:selected:!enabled {
    background-color: QLinearGradient( x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #C4FAFF, stop: 1 #88F9FF);
    color: #787878;
    border-color: #66F4FF;
}
QToolBox > QScrollArea {
    border: none;
}
/********** 按钮样式 **********/
QPushButton {
    color: black;
    background-color: QLinearGradient( x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #C4FAFF, stop: 0.9 #88F9FF, stop: 1 #73F0FF);
    border-width: 1px;
    border-color: #60DAFF;
    border-style: solid;
    border-radius: 5;
    padding: 3px;
    font-size: 12px;
    padding-left: 5px;
    padding-right: 5px;
    min-width: 40px;
    min-height: 14px;
    height: 16px;
}
/********** 按钮禁用样式 **********/
QPushButton:!enabled {
    color: #787878;
    border-color: #66F4FF;
    background-color: QLinearGradient( x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #C4FAFF, stop: 1 #CBF8FF);
}
/********** 按钮滑过样式 **********/
QPushButton:hover {
    background-color: QLinearGradient( x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #88F9FF, stop: 0.9 #6BE7FF, stop: 1 #60DAFF);
}
/********** 按钮按下样式 **********/
QPushButton:pressed {
    background-color: QLinearGradient( x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #73F0FF, stop: 0.9 #58BDFF, stop: 1 #40B7FF);
}
/********** 快捷按钮样式 **********/
QToolButton {
    color: black;
    background-color: QLinearGradient( x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #C4FAFF, stop: 0.9 #88F9FF, stop: 1 #73F0FF);
    border-width: 1px;
    border-color: #60DAFF;
    border-style: solid;
    font-size: 12px;
    padding: 1px;
}
QToolButton:!enabled {
    color: #787878;
    border-color: #66F4FF;
    background-color: QLinearGradient( x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #C4FAFF, stop: 1 #CBF8FF);
}
/********** 快捷按钮滑过样式 **********/
QToolButton:hover {
    background-color: QLinearGradient( x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #88F9FF, stop: 0.9 #6BE7FF, stop: 1 #60DAFF);
}
/********** 快捷按钮按下样式 **********/
QToolButton:pressed {
    background-color: QLinearGradient( x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #73F0FF, stop: 0.9 #58BDFF, stop: 1 #40B7FF);
}
/********** 工具栏中的快捷按钮样式 **********/
QToolBar > QToolButton {
    color: black;
    background-color: transparent;
    border: none;
    border-radius: 14px;
    font-size: 12px;
    padding: 2px;
    margin: 2px;
}
QToolBar > QToolButton:hover {
    background-color: #88F9FF;
}
QToolBar > QToolButton:pressed {
    background-color: #6BE7FF;
}
QListView{
    outline: none;
    background: #E5FDFF;
}
/*
 * 注:以下四个样式,需要在程序中对相关的控件调用以下代码方可显示。
 * 如:ui->comboBox->setView(new QListView());
 */
QListView::item{
    color: black;
    border-bottom: 1px solid darkgray;
}
QListView::item:hover{
    background-color: QLinearGradient( x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #CBF8FF, stop: 1 #A7F6FF);
}
QListView::item:selected{
    background-color: QLinearGradient( x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #A7F6FF, stop: 1 #66F4FF);
}
QComboBox QAbstractItemView::item {
    min-height: 25px;
}
/********** 下拉组合框样式 **********/
QComboBox {
    border: 1px solid gray;
    border-radius: 3px;
    padding: 1px 2px 1px 2px;
}
QComboBox:!enabled {
    border: 1px solid #cdcdcd;
}
QComboBox:hover {
    border: 1px solid #1296db;
}
/********** 下拉组合框向下按钮 **********/
QComboBox::drop-down {
    subcontrol-origin: padding;
    subcontrol-position: top right;    /*位置在右上角*/
    width: 20px;
    border-left-width: 1px;
    border-left-color: darkgray;
    border-left-style: solid; /* just a single line */
    border-top-right-radius: 3px; /* same radius as the QComboBox */
    border-bottom-right-radius: 3px;
}
QComboBox::drop-down:!enabled {
    border-left-color: #cdcdcd;
}
QComboBox::drop-down:hover {
    border-left-color: #1296db;
}
/********** 下拉组合框向下箭头 **********/
QComboBox::down-arrow {
    image: url(:/image/arrowdownEnabled.png);
    width: 22px;
    height: 22px;
}
QComboBox::down-arrow:!enabled {
    image: url(:/image/arrowdown.png);
    width: 22px;
    height: 22px;
}
QComboBox::down-arrow:hover {
    image: url(:/image/arrowdownHover.png);
    width: 22px;
    height: 22px;
}
/********** 单选框按钮样式 **********/
QRadioButton::indicator {
    border: 1px solid #333333;
    border-radius: 5px;
    background-color: white;
    width: 10px;
    height: 10px;
    image: none;
}
/********** 复选框按钮样式 **********/
QCheckBox::indicator {
    width: 12px;
    height: 12px;
    border: 1px solid #333333;
    border-radius: 3px;
    background-color: white;
    image: none;
}
/********** 单选框按钮已选择样式 **********/
QRadioButton::indicator:checked {
    width: 8px;
    height: 8px;
    padding: 1px;
    image: url(:/qss/mywhite/image/filledcircleEnabled.png);
    border: 1px solid #00eeff;
}
/********** 复选框按钮半选择样式 **********/
QCheckBox::indicator:indeterminate {
    width: 10px;
    height: 10px;
    padding: 1px;
    border: 1px solid #00eeff;
    image: url(:/qss/mywhite/image/indeterminateEnabled.png);
}
/********** 复选框按钮已选择样式 **********/
QCheckBox::indicator:checked {
    image: url(:/qss/mywhite/image/checkmarkwhite.png);
    border: 1px solid #00eeff;
    background-color: #00eeff;
}
/********** 单复选框按钮禁用样式 **********/
QRadioButton::indicator:!enabled {
    border: 1px solid #cdcdcd;
}
QCheckBox::indicator:!enabled {
    border: 1px solid #cdcdcd;
}
/********** 单选框按钮已选择禁用样式 **********/
QRadioButton::indicator:checked:!enabled {
    border: 1px solid #cdcdcd;
    image: url(:/qss/mywhite/image/filledcircle.png);
}
/********** 复选框按钮已选择禁用样式 **********/
QCheckBox::indicator:indeterminate:!enabled {
    border: 1px solid #cdcdcd;
    image: url(:/qss/mywhite/image/indeterminate.png);
}
QCheckBox::indicator:checked:!enabled {
    border: 1px solid #cdcdcd;
    background-color: #cdcdcd;
    image: url(:/qss/mywhite/image/checkmarkwhite.png);
}
/********** 单复选框按钮滑过样式 **********/
QRadioButton::indicator:hover, QCheckBox::indicator:hover {
    border: 1px solid #00eeff;
}
QRadioButton::indicator:checked:hover {
    image: url(:/qss/mywhite/image/filledcircleHover.png);
}
QCheckBox::indicator:indeterminate:hover {
    image: url(:/qss/mywhite/image/indeterminateHover.png);
}
QCheckBox::indicator:checked:hover {
    background-color: #66F4FF;
    image: url(:/qss/mywhite/image/checkmarkPressed.png);
}
/********** 单复选框按钮按下样式 **********/
QRadioButton::indicator:pressed, QCheckBox::indicator:pressed {
    border: 1px solid #1296db;
    background-color: #66F4FF;
}
QRadioButton::indicator:checked:pressed {
    background-color: white;
    image: url(:/qss/mywhite/image/filledcirclePressed.png);
}
QCheckBox::indicator:indeterminate:pressed {
    background-color: #66F4FF;
    image: url(:/qss/mywhite/image/indeterminatePressed.png);
}
QCheckBox::indicator:checked:pressed {
    border: 1px solid #1296db;
    background-color: #1296db;
    image: url(:/qss/mywhite/image/checkmarkwhite.png);
}
/*
 * 切换按钮样式
 * 原型为QCheckBox,只需要将目标控件添加下面一句代码即可使用该样式
 * ui->checkbox->setProperty("class", "ToggleButton");
 */
.ToggleButton::indicator {
    width: 26px;
    height: 26px;
    border: none;
    padding: 0px;
    margin: 0px;
    background-color: transparent;
    image: url(:/qss/mywhite/image/toggle_offEnabled.png);
}
.ToggleButton::indicator:unchecked:!enabled {
    width: 26px;
    height: 26px;
    border: none;
    padding: 0px;
    margin: 0px;
    background-color: transparent;
    image: url(:/qss/mywhite/image/toggle_off.png);
}
.ToggleButton::indicator:indeterminate:!enabled {
    width: 26px;
    height: 26px;
    border: none;
    padding: 0px;
    margin: 0px;
    background-color: transparent;
    image: url(:/qss/mywhite/image/toggle_indeterminate.png);
}
.ToggleButton::indicator:checked:!enabled {
    width: 26px;
    height: 26px;
    border: none;
    padding: 0px;
    margin: 0px;
    background-color: transparent;
    image: url(:/qss/mywhite/image/toggle_on.png);
}
.ToggleButton::indicator:unchecked {
    width: 26px;
    height: 26px;
    border: none;
    padding: 0px;
    margin: 0px;
    background-color: transparent;
    image: url(:/qss/mywhite/image/toggle_offEnabled.png);
}
.ToggleButton::indicator:indeterminate {
    width: 26px;
    height: 26px;
    border: none;
    padding: 0px;
    margin: 0px;
    background-color: transparent;
    image: url(:/qss/mywhite/image/toggle_indeterminateEnabled.png);
}
.ToggleButton::indicator:checked {
    width: 26px;
    height: 26px;
    border: none;
    padding: 0px;
    margin: 0px;
    background-color: transparent;
    image: url(:/qss/mywhite/image/toggle_onEnabled.png);
}
.ToggleButton::indicator:unchecked:hover {
    width: 26px;
    height: 26px;
    border: none;
    padding: 0px;
    margin: 0px;
    background-color: transparent;
    image: url(:/qss/mywhite/image/toggle_offHover.png);
}
.ToggleButton::indicator:indeterminate:hover {
    width: 26px;
    height: 26px;
    border: none;
    padding: 0px;
    margin: 0px;
    background-color: transparent;
    image: url(:/qss/mywhite/image/toggle_indeterminateHover.png);
}
.ToggleButton::indicator:checked:hover {
    width: 26px;
    height: 26px;
    border: none;
    padding: 0px;
    margin: 0px;
    background-color: transparent;
    image: url(:/qss/mywhite/image/toggle_onHover.png);
}
.ToggleButton::indicator:unchecked:pressed {
    width: 26px;
    height: 26px;
    border: none;
    padding: 0px;
    margin: 0px;
    background-color: transparent;
    image: url(:/qss/mywhite/image/toggle_offPressed.png);
}
.ToggleButton::indicator:indeterminate:pressed {
    width: 26px;
    height: 26px;
    border: none;
    padding: 0px;
    margin: 0px;
    background-color: transparent;
    image: url(:/qss/mywhite/image/toggle_indeterminatePressed.png);
}
.ToggleButton::indicator:checked:pressed {
    width: 26px;
    height: 26px;
    border: none;
    padding: 0px;
    margin: 0px;
    background-color: transparent;
    image: url(:/qss/mywhite/image/toggle_onPressed.png);
}
/********** 换装按钮 **********/
QPushButton#TiBar_skinButton[TiBar_maximizeProperty="maximize"] {
    border: none;
    border-radius: 0;
    image: url(:/image/skinEnabled.png);
    background-color: transparent;
    padding-bottom: 5px;
    padding-top: 5px;
}
QPushButton#TiBar_skinButton[TiBar_maximizeProperty="restore"] {
    border: none;
    border-radius: 0;
    image: url(:/image/skinEnabled.png);
    background-color: transparent;
    padding-bottom: 1px;
    padding-top: 1px;
}
QPushButton#TiBar_skinButton:!enabled {
    image: url(:/image/skin.png);
    background-color: transparent;
}
QPushButton#TiBar_skinButton:hover {
    image: url(:/image/skinHover.png);
    background: #88F9FF;
}
QPushButton#TiBar_skinButton:pressed {
    background: #6BE7FF;
}
/********** 设置按钮 **********/
QPushButton#TiBar_settingsButton[TiBar_maximizeProperty="maximize"] {
    border: none;
    border-radius: 0;
    image: url(:/image/settingEnabled.png);
    background-color: transparent;
    padding-bottom: 6px;
    padding-top: 6px;
}
QPushButton#TiBar_settingsButton[TiBar_maximizeProperty="restore"] {
    border: none;
    border-radius: 0;
    image: url(:/image/settingEnabled.png);
    background-color: transparent;
    padding-bottom: 2px;
    padding-top: 2px;
}
QPushButton#TiBar_settingsButton:!enabled {
    image: url(:/image/setting.png);
    background-color: transparent;
}
QPushButton#TiBar_settingsButton:hover {
    image: url(:/image/settingHover.png);
    background: #88F9FF;
}
QPushButton#TiBar_settingsButton:pressed {
    background: #6BE7FF;
}
/********** 最小化按钮 **********/
QPushButton#TiBar_minimizeButton[TiBar_maximizeProperty="maximize"] {
    border: none;
    border-radius: 0;
    image: url(:/image/minwindowEnabled.png);
    background-color: transparent;
    padding-bottom: 6px;
    padding-top: 6px;
}
QPushButton#TiBar_minimizeButton[TiBar_maximizeProperty="restore"] {
    border: none;
    border-radius: 0;
    image: url(:/image/minwindowEnabled.png);
    background-color: transparent;
    padding-bottom: 2px;
    padding-top: 2px;
}
QPushButton#TiBar_minimizeButton:!enabled {
    image: url(:/image/minwindow.png);
    background-color: transparent;
}
QPushButton#TiBar_minimizeButton:hover {
    image: url(:/image/minwindowHover.png);
    background: #88F9FF;
}
QPushButton#TiBar_minimizeButton:pressed {
    background: #6BE7FF;
}
/********** 最大化按钮 **********/
QPushButton#TiBar_maximizeButton[TiBar_maximizeProperty="maximize"] {
    border: none;
    border-radius: 0;
    image: url(:/image/maxwindowEnabled.png);
    background-color: transparent;
    padding-bottom: 6px;
    padding-top: 6px;
}
QPushButton#TiBar_maximizeButton[TiBar_maximizeProperty="maximize"]:!enabled {
    image: url(:/image/maxwindow.png);
    background-color: transparent;
}
QPushButton#TiBar_maximizeButton[TiBar_maximizeProperty="maximize"]:hover {
    image: url(:/image/maxwindowHover.png);
    background: #88F9FF;
}
QPushButton#TiBar_maximizeButton[TiBar_maximizeProperty="maximize"]:pressed {
    background: #6BE7FF;
}
/********** 向下还原按钮 **********/
QPushButton#TiBar_maximizeButton[TiBar_maximizeProperty="restore"] {
    border: none;
    border-radius: 0;
    image: url(:/image/normalwindowEnabled.png);
    background-color: transparent;
    padding-bottom: 2px;
    padding-top: 2px;
}
QPushButton#TiBar_maximizeButton[TiBar_maximizeProperty="restore"]:!enabled {
    image: url(:/image/normalwindow.png);
    background-color: transparent;
}
QPushButton#TiBar_maximizeButton[TiBar_maximizeProperty="restore"]:hover {
    image: url(:/image/normalwindowHover.png);
    background: #88F9FF;
}
QPushButton#TiBar_maximizeButton[TiBar_maximizeProperty="restore"]:pressed {
    background: #6BE7FF;
}
/********** 关闭按钮 **********/
QPushButton#TiBar_closeButton[TiBar_maximizeProperty="maximize"] {
    border: none;
    border-radius: 0;
    image: url(:/image/closewindowEnabled.png);
    background-color: transparent;
    padding-bottom: 6px;
    padding-top: 6px;
}
QPushButton#TiBar_closeButton[TiBar_maximizeProperty="restore"] {
    border: none;
    border-radius: 0;
    image: url(:/image/closewindowEnabled.png);
    background-color: transparent;
    padding-bottom: 2px;
    padding-top: 2px;
}
QPushButton#TiBar_closeButton:!enabled {
    image: url(:/image/closewindow.png);
    background-color: transparent;
}
QPushButton#TiBar_closeButton:hover {
    image: url(:/image/closewindowHover.png);
    background-color: #E81123;
}
QPushButton#TiBar_closeButton:pressed {
    background: #F1707A;
}
/********** 程序标题 **********/
QLabel#TiBar_titleLabel{
    background-color: transparent;
    font-family: "Microsoft YaHei";
    font-size: 12px;
}
/********** 图标左侧空白 **********/
QLabel#TiBar_leftspacingLabel{
    background-color: transparent;
}

发表评论

Your email address will not be published. Required fields are marked *.

*
*
You may use these <abbr title="HyperText Markup Language">HTML</abbr> tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>