最近学习QSS,顺便做了一套QSS的皮肤。因为界面风格为蓝色,便取名为淡蓝天空。
放两个图来对比一下:


上面两个图便是QSS淡蓝天空和win10下的原生皮肤样式。对比一下还是可以看到很多细节的改变的。同时也增加了一个控件的样式——ToggleButton,这个控件是基于QCheckBox修改而来,功能和QCheckBox是一致的。从原生皮肤的对比中也可以看到。
稍微注意下还可以看到,我的QSS的标题栏多了两个按钮。这是因为标题栏是我自定义的标题栏。而修改QSS并不能够修改原生的标题栏,原生标题栏还会是原生皮肤的样式,如下图所示:
.png)
所以,为了风格的统一,以及为了能够在标题栏上添加更多的控件,参考了一下网上其他人写的一些自定义标题栏,完成了一个标题栏的自定义。同时,我的界面都是在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;
}