6、Qt QSS界面美化_image/silvery.css-程序员宅基地
一、功能介绍
1、根据刘典武大佬和网上查询的资料，进行更改
https://gitee.com/feiyangqingyun/QWidgetDemo#https://gitee.com/feiyangqingyun/qtkaifajingyan
2、使用QSS对界面进行美化
3、点击按钮，进行界面样式切换（银色和黑色）
二、项目创建
1、新建Qt Widgets应用，名称为MyQSS，基类选择QMainWindow；
在界面上添加要进行美化的控件
3、下载图标
iconfont-阿里巴巴矢量图标库
下载好的图标放在工程目录下的icon文件夹中
4、新建silvery.css和psblack.css文件，放在工程目录下的qss文件夹中
5、向项目中添加一个Qt资源文件，名称为file；
右击“MyQSS”->“Add New”
Qt->Qt Resource File
名称file->下一步 ->完成
添加->添加前缀->把“ /new/prefix1”删掉
添加->添加文件，把.qss文件和下载的图标都添加进来，添加好之后Ctrl+S保存；
添加好的工程如下
三、代码展示
1、MainWindow.h
#ifndef MAINWINDOW_H
#define MAINWINDOW_H
#include <QMainWindow>
#include <QFile>
namespace Ui {
class MainWindow;
}
class MainWindow : public QMainWindow
{
Q_OBJECT
public:
explicit MainWindow(QWidget *parent = nullptr);
~MainWindow();
private slots:
void systemInit();
void on_pushButton_clicked();
void on_pushButton_2_clicked();
void on_pushButton_3_clicked();
private:
Ui::MainWindow *ui;
QFile *qssFile;
};
#endif // MAINWINDOW_H
2、MainWindow.cpp
#include "MainWindow.h"
#include "ui_MainWindow.h"
#include <QDir>
#include <QStringListModel>
#include <QFileSystemModel>
#include <QStandardItemModel>
#include <QMessageBox>
MainWindow::MainWindow(QWidget *parent) :
QMainWindow(parent),
ui(new Ui::MainWindow)
{
ui->setupUi(this);
systemInit();
}
MainWindow::~MainWindow()
{
delete ui;
}
void MainWindow::systemInit()
{
//加载样式表
//QFile file(":/qss/silvery.css");
qssFile = new QFile(":/qss/psblack.css", this);
qssFile->open(QFile::ReadOnly); //只读方式打开文件
QString styleSheet = tr(qssFile->readAll()); //转为QString类型
this->setStyleSheet(styleSheet); //设置样式表
qssFile->close();
//控件禁用
ui->pushButton->setEnabled(false);
ui->radioButton->setEnabled(false);
ui->checkBox->setEnabled(false);
ui->commandLinkButton->setEnabled(false);
ui->buttonBox->setEnabled(false);
//QTableWidget
ui->tableWidget->setRowCount(10); //设置行数为10
ui->tableWidget->setColumnCount(5); //设置列数为5
ui->tableWidget->setWindowTitle("QTableWidget & Item");
QStringList header;
header<<"Month"<<"Description";
ui->tableWidget->setHorizontalHeaderLabels(header);
ui->tableWidget->setItem(0,0,new QTableWidgetItem("Jan"));
ui->tableWidget->setItem(1,0,new QTableWidgetItem("Feb"));
ui->tableWidget->setItem(2,0,new QTableWidgetItem("Mar"));
ui->tableWidget->setItem(0,1,new QTableWidgetItem("Jan's month"));
ui->tableWidget->setItem(1,1,new QTableWidgetItem("Feb's month"));
ui->tableWidget->setItem(2,1,new QTableWidgetItem("Mar's month"));
//QListWidget
ui->listWidget->addItem(new QListWidgetItem(QIcon(":/icon/checkBox_indeterminate_00BB9E.png"), tr("1")));
ui->listWidget->addItem(new QListWidgetItem(QIcon(":/icon/checkBox_indeterminate_262829.png"), tr("2")));
ui->listWidget->addItem(new QListWidgetItem(QIcon(":/icon/checkBox_indeterminate_404244.png"), tr("3")));
ui->listWidget->addItem(new QListWidgetItem(QIcon(":/icon/checkBox_indeterminate_969696.png"), tr("4")));
//QTreeWidget
QStringList headers;
headers << "Name" << "Number";
ui->treeWidget->setHeaderLabels(headers);
QStringList rootTextList;
rootTextList << "Root" << "0";
QTreeWidgetItem *root = new QTreeWidgetItem(ui->treeWidget, rootTextList);
new QTreeWidgetItem(root, QStringList() << QString("Leaf 1") << "1");
QTreeWidgetItem *leaf2 = new QTreeWidgetItem(root, QStringList() << QString("Leaf 2") << "2");
leaf2->setCheckState(0, Qt::Checked);
QList<QTreeWidgetItem *> rootList;
rootList << root;
ui->treeWidget->insertTopLevelItems(0, rootList);
//QListView
QStringList strlist;
strlist<<"A"<<"B"<<"C"<<"D";
QStringListModel *listModel = new QStringListModel(strlist);
ui->listView->setModel(listModel);
ui->listView->setModel(listModel);
//QTreeView
QFileSystemModel *fileSystemModel = new QFileSystemModel;
fileSystemModel->setRootPath(QDir::currentPath());
ui->treeView->setModel(fileSystemModel);
//QTableView
QStandardItemModel* model = new QStandardItemModel(this);
model->setItem(0, 0, new QStandardItem("张三"));
model->setItem(0, 1, new QStandardItem("3"));
model->setItem(0, 2, new QStandardItem("男"));
ui->tableView->setModel(model);
}
void MainWindow::on_pushButton_clicked()
{
}
void MainWindow::on_pushButton_2_clicked()
{
QMessageBox::warning(this, tr("My Application"),
tr("The document has been modified.\n"
"Do you want to save your changes?"),
QMessageBox::Save | QMessageBox::Discard
| QMessageBox::Cancel,
QMessageBox::Save);
}
void MainWindow::on_pushButton_3_clicked()
{
if(qssFile->fileName() == ":/qss/psblack.css")
{
qssFile->setFileName(":/qss/silvery.css");
}
else
{
qssFile->setFileName(":/qss/psblack.css");
}
qssFile->open(QFile::ReadOnly); //只读方式打开文件
QString styleSheet = tr(qssFile->readAll()); //转为QString类型
this->setStyleSheet(styleSheet); //设置样式表
qssFile->close();
}
3、psblack.css
/* -----------------------------黑色-------------------------------
背景颜色：#4F4F4F
字体颜色：#FFFFFF
选中字体颜色：#00BB9E
禁用时字体颜色：#DCE1E6
控件颜色：#262829 #969696
禁用控件颜色： #404244
摁键颜色：#646464 #525252
边框颜色：#969696
选中边框颜色：#00BB9E
禁用边框颜色：#4F4F4F
------------------------------------------------------------ */
/* 图标下载网址 ------------------------------------------------------------
https://www.iconfont.cn/search/index?q=%E4%B8%89%E8%A7%92&page=1&tag=&searchType=icon&fromCollection=-1&fills=
-------------------------------------------------------------------*/
/* 官网教程 ------------------------------------------------------------
https://doc.qt.io/qt-5/stylesheet-examples.html
-------------------------------------------------------------------*/
QWidget {
background-color: #4F4F4F;
padding: 0px;
color: #FFFFFF;
}
/* QMainWindow 主界面------------------------------------------------
QMenBar 菜单栏
QMenu 菜单
QToolBar 工具栏
Central Widget 中心部件
QDockWidget 停靠窗口
QStatusBar 状态栏
QSizeGrip 提示窗口拉伸标志
QMessageBox 无法用QSS设置
---------------------------------------------------------------------*/
/* QMenuBar ---------------------------------------------------------
菜单栏
---------------------------------------------------------------------*/
QMenuBar{
background-color: #4F4F4F;
color: #FFFFFF;
margin: 0px;
padding: 3px 10px;
min-height: 20px;
min-width: 20px;
}
QMenuBar::item{
background-color: #4F4F4F;
color: #FFFFFF;
margin: 0px;
padding: 3px 10px;
}
QMenuBar::item:selected{
background-color: #262829;
border: 1px solid #00BB9E;
}
QMenuBar::item:pressed{
background-color: #969696;
border: 1px solid #00BB9E;
}
QMenuBar,QMenuBar:disabled{
color: #DCE1E6;
background-color: #4F4F4F;
border: 1px solid #4F4F4F;
margin: 0px;
}
/* QMenu ------------------------------------------------------------
菜单
--------------------------------------------------------------------------- */
QMenu::item{
padding: 3px 20px;
}
QMenu::indicator{
width: 13px;
height: 13px;
}
QMenu,QMenu:disabled{
color: #DCE1E6;
background-color: #4F4F4F;
border: 1px solid #4F4F4F;
margin: 0px;
}
QMenu::item:selected{
background-color: #262829;
border: 1px solid #00BB9E;
}
QMenu::item:pressed{
background-color: #969696;
border: 1px solid #00BB9E;
}
QMenu::separator{ /*分隔符*/
height: 1px;
background-color: #969696;
}
/* QToolBar ------------------------------------------------------------
工具栏
--------------------------------------------------------------------------- */
QToolBar, QToolBar:disabled{
color: #DCE1E6;
background-color: #4F4F4F;
border: 0px solid #4F4F4F;
border-width: 0px 0px 1px 0px;
min-height: 30px;
}
QToolBar::separator{
width: 1px;
background-color: #969696;
}
QToolBar QToolButton{
min-height: 30px;
background-color: #4F4F4F;
border: 0px solid #969696;
border-width: 0px 0px 1px 0px;
color: #FFFFFF;
border-radius: 0px;
}
QToolBar QToolButton:hover{
background-color: #262829;
border: 1px solid #00BB9E;
}
QToolBar QToolButton:pressed{
background-color: #969696;
border: 1px solid #00BB9E;
}
/* QStatusBar ------------------------------------------------------------
状态栏
--------------------------------------------------------------------------- */
QStatusBar{
color: red;
background-color:#4F4F4F;
}
/* QSizeGrip ------------------------------------------------------------
提示窗口拉伸标志
--------------------------------------------------------------------------- */
QSizeGrip{
min-height: 20px;
min-width: 20px;
border-image: url(:/icon/zoom_969696.png);
}
/* QDockWidget ------------------------------------------------------------
停靠窗口：在下面
--------------------------------------------------------------------------- */
/* Buttons 按钮------------------------------------------------------------
QPushButton 推动按钮
QToolButton 工具按钮
QRadioButton 单选按钮
QCheckBox 复选键
QCommandLinkButton 命令链接按钮
QDialogButtonBox 按钮盒
--------------------------------------------------------------------------*/
/* QPushButton ------------------------------------------------------------
摁键
https://doc.qt.io/qt-5/stylesheet-examples.html#customizing-qpushbutton
--------------------------------------------------------------------------- */
QPushButton {
background: qlineargradient(spread:pad,x1:0,y1:0,x2:0,y2:1,stop:0 #646464 , stop:1 #525252);
border: 1px solid #969696;
color: #FFFFFF;
border-radius: 4px;
padding: 1px;
min-height: 25px;
min-width: 35px;
}
QPushButton:hover {
background-color: #00BB9E;
border: 1px solid #00BB9E;
color: #FFFFFF;
}
QPushButton:pressed {
background-color: #969696;
border: 1px solid #00BB9E;
color: #FFFFFF;
}
QPushButton:focus {
border: 1px solid #00BB9E;
}
QPushButton:!enabled {
background-color: #4F4F4F;
border: 1px solid #404244;
border-style: inset;
}
/* QToolButton ------------------------------------------------------------
--------------------------------------------------------------------------- */
QToolButton {
background: qlineargradient(spread:pad,x1:0,y1:0,x2:0,y2:1,stop:0 #646464 , stop:1 #525252);
border: 1px solid #969696;
color: #FFFFFF;
border-radius: 4px;
padding: 3px;
min-height: 20px;
min-width: 30px;
}
QToolButton:hover {
background-color: #00BB9E;
border: 1px solid #00BB9E;
color: #FFFFFF;
}
QToolButton:pressed {
background-color: #969696;
border: 1px solid #00BB9E;
color: #FFFFFF;
}
QToolButton:focus {
border: 1px solid #00BB9E;
}
QToolButton[popupMode="0"] {
padding-right: 2px;
}
QToolButton[popupMode="1"] {
padding-right: 2px;
}
QToolButton[popupMode="2"] {
padding-right: 2px;
}
QToolButton::menu-button {
padding: 2px;
border-radius: 4px;
border: 1px solid #969696;
width: 12px;
outline: none;
}
QToolButton:menu-button:hover {
background-color: #00BB9E;
border: 1px solid #969696;
color: #FFFFFF;
}
QToolButton:menu-button:pressed {
background-color: #969696;
border: 1px solid #00BB9E;
color: #FFFFFF;
}
QToolButton::menu-arrow {
image: url(":/icon/down_triangle_4F4F4F.png");
height: 8px;
width: 8px;
}
QToolButton::menu-arrow:hover {
image: url(":/icon/down_triangle_262829.png");
}
QToolButton::menu-arrow:pressed {
image: url(":/icon/down_triangle_4F4F4F.png");
}
QToolButton:disabled {
color: #DCE1E6;
background-color: #4F4F4F;
border: 1px solid #404244;
}
/* QRadioButton -----------------------------------------------------------
https://doc.qt.io/qt-5/stylesheet-examples.html#customizing-qradiobutton
--------------------------------------------------------------------------- */
QRadioButton {
background-color: transparent;
color: #FFFFFF;
spacing: 4px;
padding: 0px;
border: none;
outline: none;
min-height: 20px;
min-width: 30px;
}
QRadioButton:focus {
border: none;
}
QRadioButton::indicator {
border: none;
outline: none;
margin-left: 4px;
height: 16px;
width: 16px;
}
QRadioButton::indicator:unchecked {
image: url(:/icon/radioButton_unselect_969696.png);
}
QRadioButton::indicator:unchecked:hover{
border: none;
outline: none;
image: url(:/icon/radioButton_unselect_262829.png);
}
QRadioButton::indicator:unchecked:focus{
border: none;
outline: none;
image: url(:/icon/radioButton_unselect_00BB9E.png);
}
QRadioButton::indicator:unchecked:pressed {
border: none;
outline: none;
image: url(:/icon/radioButton_unselect_969696.png);
}
QRadioButton::indicator:checked {
border: none;
outline: none;
image: url(:/icon/radioButton_select_969696.png);
}
QRadioButton::indicator:checked:hover{
border: none;
outline: none;
image: url(:/icon/radioButton_select_262829.png);
}
QRadioButton::indicator:checked:focus{
border: none;
outline: none;
image: url(:/icon/radioButton_select_00BB9E.png);
}
QRadioButton::indicator:checked:pressed {
border: none;
outline: none;
image: url(:/icon/radioButton_select_969696.png);
}
QRadioButton:disabled{
background-color: #4F4F4F;
color: #DCE1E6;
}
QRadioButton::indicator:unchecked:disabled {
image: url(:/icon/radioButton_unselect_404244.png);
}
QRadioButton::indicator:checked:disabled {
image: url(:/icon/radioButton_select_404244.png);
}
/* QCheckBox --------------------------------------------------------------
QT网址
https://doc.qt.io/qt-5/stylesheet-examples.html#customizing-qcheckbox
图标网址
https://www.iconfont.cn/search/index?searchType=icon&q=%E5%8D%8A%E9%80%89&page=3&fromCollection=-1&fills=&tag=
--------------------------------------------------------------------------- */
QCheckBox {
background-color: #4F4F4F;
color: #FFFFFF;
spacing: 4px;
outline: none;
padding-top: 4px;
padding-bottom: 4px;
min-height: 20px;
min-width: 30px;
}
QCheckBox:disabled {
background-color: #4F4F4F;
color: #DCE1E6;
}
QCheckBox::indicator {
margin-left: 4px;
height: 16px;
width: 16px;
}
QCheckBox::indicator:unchecked {
image: url(:/icon/checkBox_unselect_969696.png);
}
QCheckBox::indicator:unchecked:focus {
image: url(:/icon/checkBox_unselect_00BB9E.png);
}
QCheckBox::indicator:unchecked:hover {
image: url(:/icon/checkBox_unselect_00BB9E.png);
}
QCheckBox::indicator:unchecked:pressed {
image: url(:/icon/checkBox_unselect_262829.png);
}
QCheckBox::indicator:unchecked:disabled {
image: url(:/icon/checkBox_unselect_404244.png);
}
QCheckBox::indicator:checked {
image: url(:/icon/checkBox_select_969696.png);
}
QCheckBox::indicator:checked:focus {
image: url(:/icon/checkBox_select_00BB9E.png);
}
QCheckBox::indicator:checked:hover {
image: url(:/icon/checkBox_select_00BB9E.png);
}
QCheckBox::indicator:checked:pressed {
image: url(:/icon/checkBox_select_262829.png);
}
QCheckBox::indicator:checked:disabled {
image: url(:/icon/checkBox_unselect_404244.png);
}
QCheckBox::indicator:indeterminate {
image: url(":/icon/checkBox_indeterminate_969696.png");
}
QCheckBox::indicator:indeterminate:focus {
image: url(":/icon/checkBox_indeterminate_00BB9E.png");
}
QCheckBox::indicator:indeterminate:hover {
image: url(":/icon/checkBox_indeterminate_00BB9E.png");
}
QCheckBox::indicator:indeterminate:pressed {
image: url(":/icon/checkBox_indeterminate_262829.png");
}
QCheckBox::indicator:indeterminate:disabled {
image: url(":/icon/checkBox_indeterminate_404244.png");
}
/* QCommandLinkButton ------------------------------------------------------------
命令链接按钮
继承自QPushButton，用于在互斥选项中选择一项，
CommandLinkButton除带有正常的按钮上的文字描述文本外，
默认情况下，它也将携带一个箭头图标，表明按下按钮将打开另一个窗口或页面
}
--------------------------------------------------------------------------- */
QCommandLinkButton {
background: qlineargradient(spread:pad,x1:0,y1:0,x2:0,y2:1,stop:0 #646464 , stop:1 #525252);
border: 1px solid #969696;
color: #FFFFFF;
border-radius: 4px;
padding: 3px;
min-height: 20px;
min-width: 30px;
}
QCommandLinkButton:hover {
background-color: #00BB9E;
border: 1px solid #00BB9E;
color: #FFFFFF;
}
QCommandLinkButton:pressed {
background-color: #969696;
border: 1px solid #00BB9E;
color: #FFFFFF;
}
QCommandLinkButton:focus {
border: 1px solid #00BB9E;
}
QCommandLinkButton:!enabled {
background-color: #4F4F4F;
border: 1px solid #404244;
border-style: inset;
}
/* QDialogButtonBox ------------------------------------------------------------
按钮盒子
可以用系统自带的默认按钮，也可以自己定制按钮使用
--------------------------------------------------------------------------- */
QDialogButtonBox {
background: qlineargradient(spread:pad,x1:0,y1:0,x2:0,y2:1,stop:0 #646464 , stop:1 #525252);
border: 1px solid #969696;
color: #FFFFFF;
border-radius: 4px;
padding: 3px;
}
QDialogButtonBox:hover {
background-color: #00BB9E;
border: 1px solid #00BB9E;
color: #FFFFFF;
}
QDialogButtonBox:pressed {
background-color: #969696;
border: 1px solid #00BB9E;
color: #FFFFFF;
}
QDialogButtonBox:focus {
border: 1px solid #00BB9E;
}
QDialogButtonBox:!enabled {
background-color: #4F4F4F;
border: 1px solid #404244;
border-style: inset;
}
/* Item Views 单元视图------------------------------------------------------------
QListView 列表视图
QTreeView 树形视图
QTableView 表格视图
QColumnView 列状视图
QUndoView 撤销命令视图
--------------------------------------------------------------------------- */
/* QListView ------------------------------------------------------------
--------------------------------------------------------------------------- */
QListView{
border:1px solid #969696;
color: #FFFFFF;
background-color: #4F4F4F;
}
QListView::item:hover{
border:1px solid #00BB9E;
}
QListView::item:selected{
background-color:#00BB9E;
}
/* QTreeView ------------------------------------------------------------
--------------------------------------------------------------------------- */
QTreeView{
border:1px solid #969696;
color: #FFFFFF;
background-color: #4F4F4F;
}
QTreeView QHeaderView::section{
background-color: #4F4F4F;
border:1px solid #969696;
}
QTreeView::item:hover{
border:1px solid #00BB9E;
}
QTreeView::item:selected{
background-color:#00BB9E;
}
/* QTableView ------------------------------------------------------------
--------------------------------------------------------------------------- */
QTableView{
color: #FFFFFF;
background-color: #4F4F4F;
border:1px solid #969696;
}
/*设置表头属性*/
QTableView QHeaderView::section{
background-color:#4F4F4F;
border:1px solid #969696;
}
/*左上角*/
QTableView QTableCornerButton::section{
background: #4F4F4F;
}
QTableView::item:hover{
border:1px solid #00BB9E;
}
QTableView::item:selected{
background-color:#00BB9E;
}
/* Item Widgets 单元控件------------------------------------------------------------
QListWidget 列表单元控件
QTreeWidget 树形单元控件
QTableWidget 表格单元控件
--------------------------------------------------------------------------- */
/* QListWidget ------------------------------------------------------------
--------------------------------------------------------------------------- */
QListWidget{
border:1px solid #969696;
color: #FFFFFF;
background-color: #4F4F4F;
}
QListWidget::item:hover{
border:1px solid #00BB9E;
}
QListWidget::item:selected{
background-color:#00BB9E;
}
/* QTreeWidget ------------------------------------------------------------
--------------------------------------------------------------------------- */
QTreeWidget{
border:1px solid #969696;
color: #FFFFFF;
background-color: #4F4F4F;
}
QTreeWidget QHeaderView::section{
background-color:#4F4F4F;
border:1px solid #969696;
}
QTreeWidget::item:hover{
border:1px solid #00BB9E;
}
QTreeWidget::item:selected{
background-color:#00BB9E;
}
/* QTableWidget ------------------------------------------------------------
--------------------------------------------------------------------------- */
QTableWidget{
color: #FFFFFF;
background-color: #4F4F4F;
border:1px solid #969696;
}
/*设置表头属性*/
QTableWidget QHeaderView::section{
background-color:#4F4F4F;
border:1px solid #969696;
}
/*左上角*/
QTableWidget QTableCornerButton::section{
background: #4F4F4F;
}
QTableWidget::item:hover{
border:1px solid #00BB9E;
}
QTableWidget::item:selected{
background-color:#00BB9E;
}
/* Containers 容器------------------------------------------------------------
QGroupBox 组合框
QScrollArea 滚动区
QToolBox 工具箱
QTabWidget 切换卡
QStackedWidget 控件栈
QFrame 框架
QWidget 组件
QMdiArea 多文档界面
QDockWidget 停靠窗口
QAxWidget
--------------------------------------------------------------------------- */
/* QGroupBox ------------------------------------------------------------
--------------------------------------------------------------------------- */
QGroupBox{
background-color: #4F4F4F;
border: 1px solid #969696;
color: #FFFFFF;
border-radius: 5px;
margin-top: 2ex;
}
QGroupBox::title{
subcontrol-origin: margin;
subcontrol-position: top center;
padding:0 3px;
}
/* QScrollArea ------------------------------------------------------------
滚动条样式见QScrollBar
--------------------------------------------------------------------------- */
QScrollArea{
background-color: #4F4F4F;
border: 1px solid #969696;
color: #FFFFFF;
border-radius: 3px;
}
/* QToolBox ------------------------------------------------------------
--------------------------------------------------------------------------- */
QToolBox{
background-color: #4F4F4F;
border: 1px solid #969696;
color: #FFFFFF;
border-radius: 3px;
margin-top: 2ex;
}
QToolBox QWidget{
border: 1px solid transparent;
}
QToolBox>QAbstractButton{/*标题栏*/
min-height:20px;
}
QToolBox::tab{
color:#FFFFFF;
border-radius: 3px;
border: 0px solid #969696;
border-width: 0px 0px 1px 0px;
background:qlineargradient(spread:pad,x1:0,y1:0,x2:0,y2:1,stop:0 #646464 ,stop:1 #525252);
}
QToolBox::tab:hover{
background-color: #262829;
}
QToolBox::tab:selected{
color: #00BB9E;
}
QToolBox::tab:selected, QToolBox::tab:!selected{
border-width: 1px 0px 1px 0px;
}
QToolBox::tab:first{
border-width: 0px 0px 1px 0px;
}
QToolBox::tab:last:selected{
border-width: 1px 0px 1px 0px;
}
QToolBox::tab:last:!selected{
border-width: 1px 0px 0px 0px;
}
/* QTabWidget ------------------------------------------------------------
--------------------------------------------------------------------------- */
QTabWidget::pane{
color: #FFFFFF;
border: 1px solid #969696;
selection-background-color: #4F4F4F;
selection-color: #262829;
alternate-background-color: #969696;
gridline-color: #969696;
}
QTabWidget::pane:top{
top:-1px;
}
QTabWidget::pane:bottom{
bottom:-1px;
}
QTabWidget::pane:left{
right:-1px;
}
QTabWidget::pane:right{
left:-1px;
}
QTabBar::tab{
color: #FFFFFF;
border: 1px solid #969696;
min-width: 30px;
min-height: 20px;
margin: 0px;
background:qlineargradient(spread:pad,x1:0,y1:0,x2:0,y2:1,stop:0 #646464 ,stop:1 #525252);
}
QTabBar::tab:hover{
border-style: solid;
border-color: #00BB9E;
}
QTabBar::tab:selected{
border-style: solid;
border-color: #00BB9E;
background: #00BB9E;
}
QTabBar::tab:top,QTabBar::tab:bottom{
padding:3px 8px 3px 8px;
}
QTabBar::tab:left,QTabBar::tab:right{
padding:8px 3px 8px 3px;
}
QTabBar::tab:top:selected,QTabBar::tab:top:hover{
border-width:2px 0px 0px 0px;
}
QTabBar::tab:right:selected,QTabBar::tab:right:hover{
border-width:0px 0px 0px 2px;
}
QTabBar::tab:bottom:selected,QTabBar::tab:bottom:hover{
border-width:0px 0px 2px 0px;
}
QTabBar::tab:left:selected,QTabBar::tab:left:hover{
border-width:0px 2px 0px 0px;
}
QTabBar::tab:first:top:selected,QTabBar::tab:first:top:hover,QTabBar::tab:first:bottom:selected,QTabBar::tab:first:bottom:hover{
border-left-width:1px;
border-left-color:#969696;
}
QTabBar::tab:first:left:selected,QTabBar::tab:first:left:hover,QTabBar::tab:first:right:selected,QTabBar::tab:first:right:hover{
border-top-width:1px;
border-top-color:#969696;
}
QTabBar::tab:last:top:selected,QTabBar::tab:last:top:hover,QTabBar::tab:last:bottom:selected,QTabBar::tab:last:bottom:hover{
border-right-width:1px;
border-right-color:#969696;
}
QTabBar::tab:last:left:selected,QTabBar::tab:last:left:hover,QTabBar::tab:last:right:selected,QTabBar::tab:last:right:hover{
border-bottom-width:1px;
border-bottom-color:#969696;
}
/* QStackedWidget ------------------------------------------------------------
不用设置
--------------------------------------------------------------------------- */
/* QFrame ------------------------------------------------------------
QWidget：一个容器
QFrame：有边框的容器
这两个设置之后其他容器也会改变
--------------------------------------------------------------------------- */
/* QMdiArea ------------------------------------------------------------
见ui界面
--------------------------------------------------------------------------- */
/* QDockWidget ------------------------------------------------------------
设置标题栏 中心部分设置见QMainWindow
--------------------------------------------------------------------------- */
QDockWidget{
background-color: #4F4F4F;
border: 1px solid #696969;
color: #FFFFFF;
border-radius: 3px;
}
QDockWidget {
background-color: #4F4F4F;
border: 1px solid #FFFFFF;
color: #FFFFFF;
border-radius: 3px;
}
/* QAxWidget ------------------------------------------------------------
不用设置
--------------------------------------------------------------------------- */
/* Input Widgets 输入控件------------------------------------------------------------
QComboBox 不可编辑组合框
QFontComboBox 可编辑组合框
QLineEdit 行编辑
QTextEdit 文本编辑
QPlainTextEdit 无格式的文本编辑
QSpinBox 整数旋转框
QDoubleSpinBox 小数旋转框
QTimeEdit 时间编辑框
QDateEdit 日期编辑框
QDateTimeEdit 日期时间编辑框
QDial 表盘
Horizontal ScrollBar 水平滚动条
Vertical ScrollBar 垂直滚动条
Horizontal Slider 水平滑动条
Vertical Slider 垂直滑动条
Key Sequence Edit 键序列编辑器
--------------------------------------------------------------------------- */
/* QComboBox ------------------------------------------------------------
--------------------------------------------------------------------------- */
QComboBox {
border: 1px solid #969696;
background: qlineargradient(spread:pad,x1:0,y1:0,x2:0,y2:1,stop:0 #646464 , stop:1 #525252);
border-radius: 3px;
padding: 1px 18px 1px 3px;
min-height: 20px;
}
QComboBox:item{
background-color: qlineargradient(spread:pad,x1:0,y1:0,x2:0,y2:1,stop:0 #646464 , stop:1 #525252);
}
QComboBox:hover{
border: 1px solid #00BB9E;
}
QComboBox:selected{
border: 1px solid #00BB9E;
}
QComboBox:editable{
background-color: qlineargradient(spread:pad,x1:0,y1:0,x2:0,y2:1,stop:0 #646464 , stop:1 #525252);
}
QComboBox:editable:disabled{
color: #DCE1E6;
background-color: #4F4F4F;
border: 1px solid #404244;
}
/* 下拉后，整个下拉窗体样式 */
QComboBox QAbstractItemView {
border: 1px solid #969696;
background: qlineargradient(spread:pad,x1:0,y1:0,x2:0,y2:1,stop:0 #646464 , stop:1 #525252);
selection-background-color: #00BB9E; /* 整个下拉窗体被选中项的背景色 */
}
QComboBox QAbstractItemView::item {
height: 20px;
}
QComboBox::drop-down {
width: 20px;
height: 20px;
subcontrol-position: center right;
right: 2px;
border: 0;
background-color: transparent;
}
QComboBox::down-arrow {/*替换三角小图标*/
width: 20px;
height: 20px;
border-image: url(:/icon/triangle_down_969696.png);
}
QComboBox::down-arrow:hover {
border-image: url(:/icon/triangle_down_00BB9E.png);
}
QComboBox::disabled{
color: #DCE1E6;
background-color: #4F4F4F;
border: 1px solid #404244;
}
QComboBox::down-arrow:disabled {
border-image: url(:/icon/triangle_down_404244.png);
}
/* QFontComboBox ------------------------------------------------------------
见QComboBox
--------------------------------------------------------------------------- */
/* QLineEdit ------------------------------------------------------------
--------------------------------------------------------------------------- */
QLineEdit{
border-radius: 3px;
padding: 0 5px;
color: #FFFFFF;
border: 1px solid #969696;
background-color: #4F4F4F ;
}
QLineEdit:hover{
border: 1px solid #00BB9E;
}
QLineEdit:focus{
border: 1px solid #00BB9E;
}
QLineEdit[readOnly=true],QLineEdit:disabled{
color: #969696;
background-color: #4F4F4F;
border: 1px solid #404244;
}
/* QTextEdit ------------------------------------------------------------
--------------------------------------------------------------------------- */
QTextEdit{
border-radius: 3px;
padding: 0 5px;
color: #FFFFFF;
border: 1px solid #969696;
background-color: #4F4F4F ;
}
QTextEdit:hover{
border: 1px solid #00BB9E;
}
QTextEdit:focus{
border: 1px solid #00BB9E;
}
QTextEdit[readOnly=true],QLineEdit:disabled{
color: #969696;
background-color: #4F4F4F;
border: 1px solid #404244;
}
/* QPlainTextEdit ------------------------------------------------------------
--------------------------------------------------------------------------- */
QPlainTextEdit{
border-radius: 3px;
padding: 0 5px;
color: #FFFFFF;
border: 1px solid #969696;
background-color: #4F4F4F ;
}
QPlainTextEdit:hover{
border: 1px solid #00BB9E;
}
QPlainTextEdit:focus{
border: 1px solid #00BB9E;
}
QPlainTextEdit[readOnly=true],QLineEdit:disabled{
color: #DCE1E6;
background-color: #4F4F4F;
border: 1px solid #404244;
}
/* QSpinBox ------------------------------------------------------------
--------------------------------------------------------------------------- */
QSpinBox{
border-radius: 3px;
padding: 0 5px;
color: #FFFFFF;
border: 1px solid #969696;
background-color: #4F4F4F ;
min-height: 25px;
}
QSpinBox:hover{
border: 1px solid #00BB9E;
}
QSpinBox:selected{
border: 1px solid #00BB9E;
}
QSpinBox[buttonSymbols="0"]::up-button{/*显示按钮=0*/
width: 20px;
height: 14px;
subcontrol-origin: border;
subcontrol-position: top right;
right: 2px;
top: 2px;
bottom: 1px;
border-image: url(:/icon/triangle_up_969696.png);
}
QSpinBox::up-button:hover{
border-image: url(:/icon/triangle_up_00BB9E.png);
}
QSpinBox::up-button:pressed{
border-image: url(:/icon/triangle_up_262829.png);
}
QSpinBox[buttonSymbols="0"]::down-button{
width: 20px;
height: 14px;
subcontrol-origin: border;
subcontrol-position: bottom right;
right: 2px;
bottom: 2px;
border-image: url(:/icon/triangle_down_969696.png);
}
QSpinBox::down-button:hover{
border-image: url(:/icon/triangle_down_00BB9E.png);
}
QSpinBox::down-button:pressed{
border-image: url(:/icon/triangle_down_262829.png);
}
QSpinBox:disabled{
color: #DCE1E6;
background-color:#4F4F4F;
border: 1px solid #404244;
}
QSpinBox::up-button:disabled{
border-image: url(:/icon/triangle_up_404244.png);
}
QSpinBox::down-button:disabled{
border-image: url(:/icon/triangle_down_404244.png);
}
/* QDoubleSpinBox ------------------------------------------------------------
--------------------------------------------------------------------------- */
QDoubleSpinBox{
border-radius: 3px;
padding: 0 5px;
color: #FFFFFF;
border: 1px solid #969696;
background-color: #4F4F4F ;
min-height: 25px;
}
QDoubleSpinBox:hover{
border: 1px solid #00BB9E;
}
QDoubleSpinBox:focus{
border: 1px solid #00BB9E;
}
QDoubleSpinBox[buttonSymbols="0"]::up-button{/*显示按钮=0*/
width: 20px;
height: 14px;
subcontrol-origin: border;
subcontrol-position: top right;
right: 2px;
top: 2px;
bottom: 1px;
border-image: url(:/icon/triangle_up_969696.png);
}
QDoubleSpinBox::up-button:hover{
border-image: url(:/icon/triangle_up_00BB9E.png);
}
QDoubleSpinBox::up-button:pressed{
border-image: url(:/icon/triangle_up_262829.png);
}
QDoubleSpinBox[buttonSymbols="0"]::down-button{
width: 20px;
height: 14px;
subcontrol-origin: border;
subcontrol-position: bottom right;
right: 2px;
bottom: 2px;
border-image: url(:/icon/triangle_down_969696.png);
}
QDoubleSpinBox::down-button:hover{
border-image: url(:/icon/triangle_down_00BB9E.png);
}
QDoubleSpinBox::down-button:pressed{
border-image: url(:/icon/triangle_down_262829.png);
}
QDoubleSpinBox:disabled{
color: #DCE1E6;
background-color: #4F4F4F;
border: 1px solid #404244;
}
QDoubleSpinBox::up-button:disabled{
border-image: url(:/icon/triangle_up_404244.png);
}
QDoubleSpinBox::down-button:disabled{
border-image: url(:/icon/triangle_down_404244.png);
}
/* QTimeEdit ------------------------------------------------------------
跟随QDateTimeEdit
--------------------------------------------------------------------------- */
/* QDateTimeEdit ------------------------------------------------------------
跟随QDateTimeEdit
--------------------------------------------------------------------------- */
/* QDateEdit ------------------------------------------------------------
设置setCalendarPopup(true)之后可以弹出日历控件，样式见QCalendarWidget
--------------------------------------------------------------------------- */
QDateTimeEdit{
border-radius: 3px;
padding: 0 5px;
color: #FFFFFF;
border: 1px solid #969696;
background-color: #4F4F4F ;
min-height: 25px;
}
QDateTimeEdit:hover{
border: 1px solid #00BB9E;
}
QDateTimeEdit:focus{
border: 1px solid #00BB9E;
}
QDateTimeEdit[buttonSymbols="0"]::up-button{/*显示按钮=0*/
width: 20px;
height: 14px;
subcontrol-origin: border;
subcontrol-position: top right;
right: 2px;
top: 2px;
bottom: 1px;
border-image: url(:/icon/triangle_up_969696.png);
}
QDateTimeEdit::up-button:hover{
border-image: url(:/icon/triangle_up_00BB9E.png);
}
QDateTimeEdit::up-button:pressed{
border-image: url(:/icon/triangle_up_262829.png);
}
QDateTimeEdit[buttonSymbols="0"]::down-button{
width: 20px;
height: 14px;
subcontrol-origin: border;
subcontrol-position: bottom right;
right: 2px;
bottom: 2px;
border-image: url(:/icon/triangle_down_969696.png);
}
QDateTimeEdit::down-button:hover{
border-image: url(:/icon/triangle_down_00BB9E.png);
}
QDateTimeEdit::down-button:pressed{
border-image: url(:/icon/triangle_down_262829.png);
}
QDateTimeEdit:disabled{
color: #DCE1E6;
background-color: #4F4F4F;
border: 1px solid #404244;
}
QDateTimeEdit::up-button:disabled{
border-image: url(:/icon/triangle_up_404244.png);
}
QDateTimeEdit::down-button:disabled{
border-image: url(:/icon/triangle_down_404244.png);
}
QDateTimeEdit[calendarPopup="true"]:drop-down{
border: 0px solid #969696;
min-width: 20px;
right: 3px;
}
QDateTimeEdit[calendarPopup="true"]::down-arrow{
border-image: url(:/icon/triangle_down_262829.png);
}
QDateTimeEdit[calendarPopup="true"]::down-arrow:pressed{
border-image: url(:/icon/triangle_down_262829.png);
}
/* QDial ------------------------------------------------------------
--------------------------------------------------------------------------- */
QDial {
background: #262829;
border: 1px solid #969696;
color: #FFFFFF;
border-radius: 4px;
padding: 3px;
min-height: 30px;
min-width: 90px;
}
/* Vertical ScrollBar ------------------------------------------------------------
--------------------------------------------------------------------------- */
QScrollBar:vertical{
width: 15px;
border-radius: 5px;
margin: 0;
background-color: #969696;
}
QScrollBar::add-page:vertical,QScrollBar::sub-page:vertical{
background-color: transparent;
}
QScrollBar::handle:vertical{
width:20px;
min-height:20px;
margin:15px 0;
border-radius: 3px;
background-color:#404244;
}
QScrollBar::handle:vertical:hover{
border: 1px solid #00BB9E;
}
QScrollBar::handle:vertical:pressed{
background-color: #00BB9E;
}
QScrollBar::add-line:vertical{
height:16px;
width:16px;
subcontrol-position:bottom;
background-color:#4F4F4F;
border-image: url(:/icon/triangle_down_969696.png);
}
QScrollBar::sub-line:vertical{
height:16px;
width:16px;
subcontrol-position:top;
background-color:#4F4F4F;
border-image: url(:/icon/triangle_up_969696.png);
}
QScrollBar::add-line:vertical:hover{
background-color:#4F4F4F;
border-image: url(:/icon/triangle_down_00BB9E.png);
}
QScrollBar::sub-line:vertical:hover{
background-color:#4F4F4F;
border-image: url(:/icon/triangle_up_00BB9E.png);
}
QScrollBar::add-line:vertical:pressed{
background-color:#4F4F4F;
border-image: url(:/icon/triangle_down_262829.png);
}
QScrollBar::sub-line:vertical:pressed{
background-color:#4F4F4F;
border-image: url(:/icon/triangle_up_262829.png);
}
/* Horizontal ScrollBar ------------------------------------------------------------
--------------------------------------------------------------------------- */
QScrollBar:horizontal{
height: 15px;
border-radius: 5px;
margin: 0;
background-color: #969696;
}
QScrollBar::add-page:horizontal,QScrollBar::sub-page:horizontal{
background-color: transparent;
}
QScrollBar::handle:horizontal{
height:20px;
min-width:20px;
margin: 0 15px;
border-radius: 3px;
background-color: #404244;
}
QScrollBar::handle:horizontal:hover{
border: 1px solid #00BB9E;
}
QScrollBar::handle:horizontal:pressed{
background-color: #00BB9E;
}
QScrollBar::add-line:horizontal{
height:16px;
width:16px;
subcontrol-position:right;
background-color:#4F4F4F;
border-image: url(:/icon/triangle_right_969696.png);
}
QScrollBar::sub-line:horizontal{
height:16px;
width:16px;
subcontrol-position:left;
background-color:#4F4F4F;
border-image: url(:/icon/triangle_left_969696.png);
}
QScrollBar::add-line:horizontal:hover{
background-color:#4F4F4F;
border-image: url(:/icon/triangle_right_00BB9E.png);
}
QScrollBar::sub-line:horizontal:hover{
background-color:#4F4F4F;
border-image: url(:/icon/triangle_left_00BB9E.png);
}
QScrollBar::add-line:horizontal:pressed{
background-color:#4F4F4F;
border-image: url(:/icon/triangle_right_262829.png);
}
QScrollBar::sub-line:horizontal:pressed{
background-color:#4F4F4F;
border-image: url(:/icon/triangle_left_262829.png);
}
/* Horizontal Slider ------------------------------------------------------------
--------------------------------------------------------------------------- */
QSlider::groove:horizontal {
border: 1px solid #969696;
height: 10px;
background-color: #262829;
margin-right: -3px;
margin-left: -3px;
}
QSlider::sub-page:horizontal {
background-color: #00BB9E;
}
QSlider::add-page:horizontal {
background-color: #262829;
}
QSlider::handle:horizontal {
background: qradialgradient(spread:pad, cx:0.5, cy:0.5, radius:0.5, fx:0.5, fy:0.5,
stop:0.6 #969696, stop:0.778409 rgba(255, 255, 255, 255));
width: 11px;
margin-top: -3px;
margin-bottom: -3px;
border-radius: 5px;
}
QSlider::handle:horizontal:hover {
background: qradialgradient(spread:pad, cx:0.5, cy:0.5, radius:0.5, fx:0.5, fy:0.5,
stop:0.6 #969696, stop:0.778409 rgba(255, 255, 255, 255));
width: 11px;
border-radius: 5px;
border: 1px solid #00BB9E;
}
QSlider::handle:horizontal:pressed {
background: qradialgradient(spread:pad, cx:0.5, cy:0.5, radius:0.5, fx:0.5, fy:0.5, stop:0.6 #00BB9E,
stop:0.778409 rgba(255, 255, 255, 255));
width: 11px;
border-radius: 5px;
}
/* Vertical Slider ------------------------------------------------------------
--------------------------------------------------------------------------- */
QSlider::groove:vertical {
border: 1px solid #969696;
width: 10px;
background-color: #262829;
margin-top: -3px;
margin-bottom: -3px;
}
QSlider::sub-page:vertical {
background-color: #00BB9E;
}
QSlider::add-page:vertical {
background-color: #262829;
}
QSlider::handle:vertical{
background: qradialgradient(spread:pad, cx:0.5, cy:0.5, radius:0.5, fx:0.5, fy:0.5,
stop:0.6 #969696, stop:0.778409 rgba(255, 255, 255, 255));
height: 11px;
margin-left: -3px;
margin-right: -3px;
border-radius: 5px;
}
QSlider::handle:vertical:hover {
background: qradialgradient(spread:pad, cx:0.5, cy:0.5, radius:0.5, fx:0.5, fy:0.5,
stop:0.6 #969696, stop:0.778409 rgba(255, 255, 255, 255));
width: 11px;
border-radius: 5px;
border: 1px solid #00BB9E;
}
QSlider::handle:vertical:pressed {
background: qradialgradient(spread:pad, cx:0.5, cy:0.5, radius:0.5, fx:0.5, fy:0.5, stop:0.6 #00BB9E,
stop:0.778409 rgba(255, 255, 255, 255));
width: 11px;
border-radius: 5px;
}
/* QKeySequenceEdit ------------------------------------------------------------
见QLineEdit
--------------------------------------------------------------------------- */
/* DisplayWidgets 显示控件------------------------------------------------------------
QLabel 标签
QTextBrowser 文本浏览器
QGraphicsView 绘图视图
QCalendarWidget 日历控件
QLCDNumber LCD数字显示框
QProgressBar 进度条
HorizontalLine 横线条
VerticalLine 竖线条
OpenGL Widget 渲染OpenGL图形
QQuickWidget 加载QML界面
--------------------------------------------------------------------------- */
/* QLabel ------------------------------------------------------------
--------------------------------------------------------------------------- */
QLabel {
background: transparent;
color: #FFFFFF;
border-radius: 4px;
padding: 3px;
}
/* QTextBrowser ------------------------------------------------------------
跟随QTextEdit
--------------------------------------------------------------------------- */
/* QGraphicsView ------------------------------------------------------------
--------------------------------------------------------------------------- */
QGraphicsView {
background:transparent;
border: 1px solid #969696;
color: #FFFFFF;
border-radius: 4px;
padding: 3px;
}
/* QCalendarWidget ------------------------------------------------------------
--------------------------------------------------------------------------- */
QCalendarWidget QToolButton {
min-width: 50px;
}
QCalendarWidget QMenu {
/*月份选择 见QMenu*/
min-width: 50px;
}
QCalendarWidget QSpinBox {
/*年份选择 见QSpinBox*/
min-width: 50px;
}
QCalendarWidget QWidget {
alternate-background-color: #4F4F4F;
}
QCalendarWidget QAbstractItemView:enabled{
border: 1px solid #404244;
color: #FFFFFF;
background-color: #262829;
selection-background-color: #4F4F4F;
selection-color: #00BB9E;
}
QCalendarWidget QAbstractItemView:disabled {
color: #DCE1E6;
}
/* QLCDNumber ------------------------------------------------------------
ui界面设置setSegmentStyle(QLCDNumber::Flat);
--------------------------------------------------------------------------- */
QLCDNumber {
background-color: #4F4F4F;
border: 1px solid #969696;
color: #FFFFFF;
border-radius: 4px;
min-height: 50px;
min-width: 90px;
}
/* QProgressBar ------------------------------------------------------------
--------------------------------------------------------------------------- */
QProgressBar{
min-height: 20;
text-align: center;
border: 1px solid #969696;
background-color: #262829;
color: #FFFFFF;
border-radius: 3px;
}
QProgressBar::chunk{
border-radius: 3px;
background: qlineargradient(spread:pad,x1:0,y1:0,x2:1,y2:0,stop:0 green,stop:1 #00BB9E);
}
/* HorizontalLine ------------------------------------------------------------
样式见QFrame
QFrame#line设置对象名为line的样式
--------------------------------------------------------------------------- */
/* VerticalLine ------------------------------------------------------------
样式见QFrame
QFrame#line设置对象名为line的样式
--------------------------------------------------------------------------- */
/* QOpenGLWidget ------------------------------------------------------------
--------------------------------------------------------------------------- */
/* QQuickWidget ------------------------------------------------------------
加载QML界面
--------------------------------------------------------------------------- */
4、silvery.css
/* -----------------------------银色-------------------------------
背景颜色：#F5F5F5
字体颜色：#000000
选中字体颜色：#00BB9E
禁用时字体颜色：#DCE1E6
控件颜色：#CCD3D9 #969696
禁用控件颜色： #F5F5F5
摁键颜色：#F2F3F4 #E7E9EB
边框颜色：#969696
选中边框颜色：#00BB9E
禁用边框颜色：#969696
------------------------------------------------------------ */
/* 图标下载网址 ------------------------------------------------------------
https://www.iconfont.cn/search/index?q=%E4%B8%89%E8%A7%92&page=1&tag=&searchType=icon&fromCollection=-1&fills=
-------------------------------------------------------------------*/
/* 官网教程 ------------------------------------------------------------
https://doc.qt.io/qt-5/stylesheet-examples.html
-------------------------------------------------------------------*/
QWidget {
background-color: #F5F5F5;
padding: 0px;
color: #000000;
}
/* QMainWindow 主界面------------------------------------------------
QMenBar 菜单栏
QMenu 菜单
QToolBar 工具栏
Central Widget 中心部件
QDockWidget 停靠窗口
QStatusBar 状态栏
QSizeGrip 提示窗口拉伸标志
QMessageBox 无法用QSS设置
---------------------------------------------------------------------*/
/* QMenuBar ---------------------------------------------------------
菜单栏
---------------------------------------------------------------------*/
QMenuBar{
background-color: #F5F5F5;
color: #000000;
margin: 0px;
padding: 3px 10px;
min-height: 20px;
min-width: 20px;
}
QMenuBar::item{
background-color: #F5F5F5;
color: #000000;
margin: 0px;
padding: 3px 10px;
}
QMenuBar::item:selected{
background-color: #CCD3D9;
border: 1px solid #00BB9E;
}
QMenuBar::item:pressed{
background-color: #969696;
border: 1px solid #00BB9E;
}
QMenuBar,QMenuBar:disabled{
color: #DCE1E6;
background-color: #F5F5F5;
border: 1px solid #969696;
margin: 0px;
}
/* QMenu ------------------------------------------------------------
菜单
--------------------------------------------------------------------------- */
QMenu::item{
padding: 3px 20px;
}
QMenu::indicator{
width: 13px;
height: 13px;
}
QMenu,QMenu:disabled{
color: #DCE1E6;
background-color: #F5F5F5;
border: 1px solid #969696;
margin: 0px;
}
QMenu::item:selected{
background-color: #CCD3D9;
border: 1px solid #00BB9E;
}
QMenu::item:pressed{
background-color: #969696;
border: 1px solid #00BB9E;
}
QMenu::separator{ /*分隔符*/
height: 1px;
background-color: #969696;
}
/* QToolBar ------------------------------------------------------------
工具栏
--------------------------------------------------------------------------- */
QToolBar, QToolBar:disabled{
color: #DCE1E6;
background-color: #F5F5F5;
border: 0px solid #969696;
border-width: 0px 0px 1px 0px;
min-height: 30px;
}
QToolBar::separator{
width: 1px;
background-color: #969696;
}
QToolBar QToolButton{
min-height: 30px;
background-color: #F5F5F5;
border: 0px solid #969696;
border-width: 0px 0px 1px 0px;
color: #000000;
border-radius: 0px;
}
QToolBar QToolButton:hover{
background-color: #CCD3D9;
border: 1px solid #00BB9E;
}
QToolBar QToolButton:pressed{
background-color: #969696;
border: 1px solid #00BB9E;
}
/* QStatusBar ------------------------------------------------------------
状态栏
--------------------------------------------------------------------------- */
QStatusBar{
color: red;
background-color:#F5F5F5;
}
/* QSizeGrip ------------------------------------------------------------
提示窗口拉伸标志
--------------------------------------------------------------------------- */
QSizeGrip{
min-height: 20px;
min-width: 20px;
border-image: url(:/icon/zoom_969696.png);
}
/* QDockWidget ------------------------------------------------------------
停靠窗口：在下面
--------------------------------------------------------------------------- */
/* Buttons 按钮------------------------------------------------------------
QPushButton 推动按钮
QToolButton 工具按钮
QRadioButton 单选按钮
QCheckBox 复选键
QCommandLinkButton 命令链接按钮
QDialogButtonBox 按钮盒
--------------------------------------------------------------------------*/
/* QPushButton ------------------------------------------------------------
摁键
https://doc.qt.io/qt-5/stylesheet-examples.html#customizing-qpushbutton
--------------------------------------------------------------------------- */
QPushButton {
background: qlineargradient(spread:pad,x1:0,y1:0,x2:0,y2:1,stop:0 #F2F3F4 , stop:1 #E7E9EB);
border: 1px solid #969696;
color: #000000;
border-radius: 4px;
padding: 1px;
min-height: 25px;
min-width: 35px;
}
QPushButton:hover {
background-color: #00BB9E;
border: 1px solid #00BB9E;
color: #000000;
}
QPushButton:pressed {
background-color: #969696;
border: 1px solid #00BB9E;
color: #000000;
}
QPushButton:focus {
border: 1px solid #00BB9E;
}
QPushButton:!enabled {
background-color: #F5F5F5;
border: 1px solid #969696;
border-style: inset;
}
/* QToolButton ------------------------------------------------------------
https://doc.qt.io/qt-5/stylesheet-examples.html#customizing-qtoolbutton
--------------------------------------------------------------------------- */
QToolButton {
background: qlineargradient(spread:pad,x1:0,y1:0,x2:0,y2:1,stop:0 #F2F3F4 , stop:1 #E7E9EB);
border: 1px solid #969696;
color: #000000;
border-radius: 4px;
padding: 3px;
min-height: 20px;
min-width: 30px;
}
QToolButton:hover {
background-color: #00BB9E;
border: 1px solid #00BB9E;
color: #000000;
}
QToolButton:pressed {
background-color: #969696;
border: 1px solid #00BB9E;
color: #000000;
}
QToolButton:focus {
border: 1px solid #00BB9E;
}
QToolButton[popupMode="0"] {
padding-right: 2px;
}
QToolButton[popupMode="1"] {
padding-right: 2px;
}
QToolButton[popupMode="2"] {
padding-right: 2px;
}
QToolButton::menu-button {
padding: 2px;
border-radius: 4px;
border: 1px solid #969696;
width: 12px;
outline: none;
}
QToolButton:menu-button:hover {
background-color: #00BB9E;
border: 1px solid #969696;
color: #000000;
}
QToolButton:menu-button:pressed {
background-color: #969696;
border: 1px solid #00BB9E;
color: #000000;
}
QToolButton::menu-arrow {
image: url(":/icon/down_triangle_4F4F4F.png");
height: 8px;
width: 8px;
}
QToolButton::menu-arrow:hover {
image: url(":/icon/down_triangle_262829.png");
}
QToolButton::menu-arrow:pressed {
image: url(":/icon/down_triangle_4F4F4F.png");
}
QToolButton:disabled {
color: #DCE1E6;
background-color: #F5F5F5;
border: 1px solid #969696;
}
/* QRadioButton -----------------------------------------------------------
https://doc.qt.io/qt-5/stylesheet-examples.html#customizing-qradiobutton
--------------------------------------------------------------------------- */
QRadioButton {
background-color: transparent;
color: #000000;
spacing: 4px;
padding: 0px;
border: none;
outline: none;
min-height: 20px;
min-width: 30px;
}
QRadioButton:focus {
border: none;
}
QRadioButton::indicator {
border: none;
outline: none;
margin-left: 4px;
height: 16px;
width: 16px;
}
QRadioButton::indicator:unchecked {
image: url(:/icon/radioButton_unselect_969696.png);
}
QRadioButton::indicator:unchecked:hover{
border: none;
outline: none;
image: url(:/icon/radioButton_unselect_262829.png);
}
QRadioButton::indicator:unchecked:focus{
border: none;
outline: none;
image: url(:/icon/radioButton_unselect_00BB9E.png);
}
QRadioButton::indicator:unchecked:pressed {
border: none;
outline: none;
image: url(:/icon/radioButton_unselect_969696.png);
}
QRadioButton::indicator:checked {
border: none;
outline: none;
image: url(:/icon/radioButton_select_969696.png);
}
QRadioButton::indicator:checked:hover{
border: none;
outline: none;
image: url(:/icon/radioButton_select_262829.png);
}
QRadioButton::indicator:checked:focus{
border: none;
outline: none;
image: url(:/icon/radioButton_select_00BB9E.png);
}
QRadioButton::indicator:checked:pressed {
border: none;
outline: none;
image: url(:/icon/radioButton_select_969696.png);
}
QRadioButton:disabled{
background-color: #F5F5F5;
color: #DCE1E6;
}
QRadioButton::indicator:unchecked:disabled {
image: url(:/icon/radioButton_unselect_404244.png);
}
QRadioButton::indicator:checked:disabled {
image: url(:/icon/radioButton_select_404244.png);
}
/* QCheckBox --------------------------------------------------------------
QT网址
https://doc.qt.io/qt-5/stylesheet-examples.html#customizing-qcheckbox
图标网址
https://www.iconfont.cn/search/index?searchType=icon&q=%E5%8D%8A%E9%80%89&page=3&fromCollection=-1&fills=&tag=
--------------------------------------------------------------------------- */
QCheckBox {
background-color: #F5F5F5;
color: #000000;
spacing: 4px;
outline: none;
padding-top: 4px;
padding-bottom: 4px;
min-height: 20px;
min-width: 30px;
}
QCheckBox:disabled {
background-color: #F5F5F5;
color: #DCE1E6;
}
QCheckBox::indicator {
margin-left: 4px;
height: 16px;
width: 16px;
}
QCheckBox::indicator:unchecked {
image: url(:/icon/checkBox_unselect_969696.png);
}
QCheckBox::indicator:unchecked:focus {
image: url(:/icon/checkBox_unselect_00BB9E.png);
}
QCheckBox::indicator:unchecked:hover {
image: url(:/icon/checkBox_unselect_00BB9E.png);
}
QCheckBox::indicator:unchecked:pressed {
image: url(:/icon/checkBox_unselect_262829.png);
}
QCheckBox::indicator:unchecked:disabled {
image: url(:/icon/checkBox_unselect_404244.png);
}
QCheckBox::indicator:checked {
image: url(:/icon/checkBox_select_969696.png);
}
QCheckBox::indicator:checked:focus {
image: url(:/icon/checkBox_select_00BB9E.png);
}
QCheckBox::indicator:checked:hover {
image: url(:/icon/checkBox_select_00BB9E.png);
}
QCheckBox::indicator:checked:pressed {
image: url(:/icon/checkBox_select_262829.png);
}
QCheckBox::indicator:checked:disabled {
image: url(:/icon/checkBox_unselect_404244.png);
}
QCheckBox::indicator:indeterminate {
image: url(:/icon/checkBox_indeterminate_969696.png);
}
QCheckBox::indicator:indeterminate:focus {
image: url(:/icon/checkBox_indeterminate_00BB9E.png);
}
QCheckBox::indicator:indeterminate:hover {
image: url(:/icon/checkBox_indeterminate_00BB9E.png);
}
QCheckBox::indicator:indeterminate:pressed {
image: url(:/icon/checkBox_indeterminate_262829.png);
}
QCheckBox::indicator:indeterminate:disabled {
image: url(:/icon/checkBox_indeterminate_404244.png);
}
/* QCommandLinkButton ------------------------------------------------------------
命令链接按钮
继承自QPushButton，用于在互斥选项中选择一项，
CommandLinkButton除带有正常的按钮上的文字描述文本外，
默认情况下，它也将携带一个箭头图标，表明按下按钮将打开另一个窗口或页面
}
--------------------------------------------------------------------------- */
QCommandLinkButton {
background: qlineargradient(spread:pad,x1:0,y1:0,x2:0,y2:1,stop:0 #F2F3F4 , stop:1 #E7E9EB);
border: 1px solid #969696;
color: #000000;
border-radius: 4px;
padding: 3px;
min-height: 20px;
min-width: 30px;
}
QCommandLinkButton:hover {
background-color: #00BB9E;
border: 1px solid #00BB9E;
color: #000000;
}
QCommandLinkButton:pressed {
background-color: #969696;
border: 1px solid #00BB9E;
color: #000000;
}
QCommandLinkButton:focus {
border: 1px solid #00BB9E;
}
QCommandLinkButton:!enabled {
background-color: #F5F5F5;
border: 1px solid #969696;
border-style: inset;
}
/* QDialogButtonBox ------------------------------------------------------------
按钮盒子
可以用系统自带的默认按钮，也可以自己定制按钮使用
--------------------------------------------------------------------------- */
QDialogButtonBox {
background: qlineargradient(spread:pad,x1:0,y1:0,x2:0,y2:1,stop:0 #F2F3F4 , stop:1 #E7E9EB);
border: 1px solid #969696;
color: #000000;
border-radius: 4px;
padding: 3px;
}
QDialogButtonBox:hover {
background-color: #00BB9E;
border: 1px solid #00BB9E;
color: #000000;
}
QDialogButtonBox:pressed {
background-color: #969696;
border: 1px solid #00BB9E;
color: #000000;
}
QDialogButtonBox:focus {
border: 1px solid #00BB9E;
}
QDialogButtonBox:!enabled {
background-color: #F5F5F5;
border: 1px solid #969696;
border-style: inset;
}
/* Item Views 单元视图------------------------------------------------------------
QListView 列表视图
QTreeView 树形视图
QTableView 表格视图
QColumnView 列状视图
QUndoView 撤销命令视图
--------------------------------------------------------------------------- */
/* QListView ------------------------------------------------------------
--------------------------------------------------------------------------- */
QListView{
border:1px solid #969696;
color: #000000;
background-color: #F5F5F5;
}
QListView::item:hover{
border:1px solid #00BB9E;
}
QListView::item:selected{
background-color:#00BB9E;
}
/* QTreeView ------------------------------------------------------------
--------------------------------------------------------------------------- */
QTreeView{
border:1px solid #969696;
color: #000000;
background-color: #F5F5F5;
}
QTreeView QHeaderView::section{
background-color: #F5F5F5;
border:1px solid #969696;
}
QTreeView::item:hover{
border:1px solid #00BB9E;
}
QTreeView::item:selected{
background-color:#00BB9E;
}
/* QTableView ------------------------------------------------------------
--------------------------------------------------------------------------- */
QTableView{
color: #000000;
background-color: #F5F5F5;
border:1px solid #969696;
}
/*设置表头属性*/
QTableView QHeaderView::section{
background-color:#F5F5F5;
border:1px solid #969696;
}
/*左上角*/
QTableView QTableCornerButton::section{
background: #F5F5F5;
}
QTableView::item:hover{
border:1px solid #00BB9E;
}
QTableView::item:selected{
background-color:#00BB9E;
}
/* Item Widgets 单元控件------------------------------------------------------------
QListWidget 列表单元控件
QTreeWidget 树形单元控件
QTableWidget 表格单元控件
--------------------------------------------------------------------------- */
/* QListWidget ------------------------------------------------------------
--------------------------------------------------------------------------- */
QListWidget{
border:1px solid #969696;
color: #000000;
background-color: #F5F5F5;
}
QListWidget::item:hover{
border:1px solid #00BB9E;
}
QListWidget::item:selected{
background-color:#00BB9E;
}
/* QTreeWidget ------------------------------------------------------------
--------------------------------------------------------------------------- */
QTreeWidget{
border:1px solid #969696;
color: #000000;
background-color: #F5F5F5;
}
QTreeWidget QHeaderView::section{
background-color:#F5F5F5;
border:1px solid #969696;
}
QTreeWidget::item:hover{
border:1px solid #00BB9E;
}
QTreeWidget::item:selected{
background-color:#00BB9E;
}
/* QTableWidget ------------------------------------------------------------
--------------------------------------------------------------------------- */
QTableWidget{
color: #000000;
background-color: #F5F5F5;
border:1px solid #969696;
}
/*设置表头属性*/
QTableWidget QHeaderView::section{
background-color:#F5F5F5;
border:1px solid #969696;
}
/*左上角*/
QTableWidget QTableCornerButton::section{
background: #F5F5F5;
}
QTableWidget::item:hover{
border:1px solid #00BB9E;
}
QTableWidget::item:selected{
background-color:#00BB9E;
}
/* Containers 容器------------------------------------------------------------
QGroupBox 组合框
QScrollArea 滚动区
QToolBox 工具箱
QTabWidget 切换卡
QStackedWidget 控件栈
QFrame 框架
QWidget 组件
QMdiArea 多文档界面
QDockWidget 停靠窗口
QAxWidget
--------------------------------------------------------------------------- */
/* QGroupBox ------------------------------------------------------------
--------------------------------------------------------------------------- */
QGroupBox{
background-color: #F5F5F5;
border: 1px solid #969696;
color: #000000;
border-radius: 5px;
margin-top: 2ex;
}
QGroupBox::title{
subcontrol-origin: margin;
subcontrol-position: top center;
padding:0 3px;
}
/* QScrollArea ------------------------------------------------------------
滚动条样式见QScrollBar
--------------------------------------------------------------------------- */
QScrollArea{
background-color: #F5F5F5;
border: 1px solid #969696;
color: #000000;
border-radius: 3px;
}
/* QToolBox ------------------------------------------------------------
--------------------------------------------------------------------------- */
QToolBox{
background-color: #F5F5F5;
border: 1px solid #969696;
color: #000000;
border-radius: 3px;
margin-top: 2ex;
}
QToolBox QWidget{
border: 1px solid transparent;
}
QToolBox>QAbstractButton{/*标题栏*/
min-height:20px;
}
QToolBox::tab{
color:#000000;
border-radius: 3px;
border: 0px solid #969696;
border-width: 0px 0px 1px 0px;
background:qlineargradient(spread:pad,x1:0,y1:0,x2:0,y2:1,stop:0 #F2F3F4 ,stop:1 #E7E9EB);
}
QToolBox::tab:hover{
background-color: #CCD3D9;
}
QToolBox::tab:selected{
color: #00BB9E;
}
QToolBox::tab:selected, QToolBox::tab:!selected{
border-width: 1px 0px 1px 0px;
}
QToolBox::tab:first{
border-width: 0px 0px 1px 0px;
}
QToolBox::tab:last:selected{
border-width: 1px 0px 1px 0px;
}
QToolBox::tab:last:!selected{
border-width: 1px 0px 0px 0px;
}
/* QTabWidget ------------------------------------------------------------
--------------------------------------------------------------------------- */
QTabWidget::pane{
color: #000000;
border: 1px solid #969696;
selection-background-color: #F5F5F5;
selection-color: #CCD3D9;
alternate-background-color: #969696;
gridline-color: #969696;
}
QTabWidget::pane:top{
top:-1px;
}
QTabWidget::pane:bottom{
bottom:-1px;
}
QTabWidget::pane:left{
right:-1px;
}
QTabWidget::pane:right{
left:-1px;
}
QTabBar::tab{
color: #000000;
border: 1px solid #969696;
min-width: 30px;
min-height: 20px;
margin: 0px;
background:qlineargradient(spread:pad,x1:0,y1:0,x2:0,y2:1,stop:0 #F2F3F4 ,stop:1 #E7E9EB);
}
QTabBar::tab:hover{
border-style: solid;
border-color: #00BB9E;
}
QTabBar::tab:selected{
border-style: solid;
border-color: #00BB9E;
background: #00BB9E;
}
QTabBar::tab:top,QTabBar::tab:bottom{
padding:3px 8px 3px 8px;
}
QTabBar::tab:left,QTabBar::tab:right{
padding:8px 3px 8px 3px;
}
QTabBar::tab:top:selected,QTabBar::tab:top:hover{
border-width:2px 0px 0px 0px;
}
QTabBar::tab:right:selected,QTabBar::tab:right:hover{
border-width:0px 0px 0px 2px;
}
QTabBar::tab:bottom:selected,QTabBar::tab:bottom:hover{
border-width:0px 0px 2px 0px;
}
QTabBar::tab:left:selected,QTabBar::tab:left:hover{
border-width:0px 2px 0px 0px;
}
QTabBar::tab:first:top:selected,QTabBar::tab:first:top:hover,QTabBar::tab:first:bottom:selected,QTabBar::tab:first:bottom:hover{
border-left-width:1px;
border-left-color:#969696;
}
QTabBar::tab:first:left:selected,QTabBar::tab:first:left:hover,QTabBar::tab:first:right:selected,QTabBar::tab:first:right:hover{
border-top-width:1px;
border-top-color:#969696;
}
QTabBar::tab:last:top:selected,QTabBar::tab:last:top:hover,QTabBar::tab:last:bottom:selected,QTabBar::tab:last:bottom:hover{
border-right-width:1px;
border-right-color:#969696;
}
QTabBar::tab:last:left:selected,QTabBar::tab:last:left:hover,QTabBar::tab:last:right:selected,QTabBar::tab:last:right:hover{
border-bottom-width:1px;
border-bottom-color:#969696;
}
/* QStackedWidget ------------------------------------------------------------
不用设置
--------------------------------------------------------------------------- */
/* QFrame ------------------------------------------------------------
QWidget：一个容器
QFrame：有边框的容器
这两个设置之后其他容器也会改变
--------------------------------------------------------------------------- */
/* QMdiArea ------------------------------------------------------------
见ui界面
--------------------------------------------------------------------------- */
/* QDockWidget ------------------------------------------------------------
设置标题栏 中心部分设置见QMainWindow
--------------------------------------------------------------------------- */
QDockWidget{
background-color: #F5F5F5;
border: 1px solid #696969;
color: #000000;
border-radius: 3px;
}
QDockWidget {
background-color: #F5F5F5;
border: 1px solid #000000;
color: #000000;
border-radius: 3px;
}
/* QAxWidget ------------------------------------------------------------
不用设置
--------------------------------------------------------------------------- */
/* Input Widgets 输入控件------------------------------------------------------------
QComboBox 不可编辑组合框
QFontComboBox 可编辑组合框
QLineEdit 行编辑
QTextEdit 文本编辑
QPlainTextEdit 无格式的文本编辑
QSpinBox 整数旋转框
QDoubleSpinBox 小数旋转框
QTimeEdit 时间编辑框
QDateEdit 日期编辑框
QDateTimeEdit 日期时间编辑框
QDial 表盘
Horizontal ScrollBar 水平滚动条
Vertical ScrollBar 垂直滚动条
Horizontal Slider 水平滑动条
Vertical Slider 垂直滑动条
Key Sequence Edit 键序列编辑器
--------------------------------------------------------------------------- */
/* QComboBox ------------------------------------------------------------
--------------------------------------------------------------------------- */
QComboBox {
border: 1px solid #969696;
background: qlineargradient(spread:pad,x1:0,y1:0,x2:0,y2:1,stop:0 #F2F3F4 , stop:1 #E7E9EB);
border-radius: 3px;
padding: 1px 18px 1px 3px;
min-height: 20px;
}
QComboBox:item{
background-color: qlineargradient(spread:pad,x1:0,y1:0,x2:0,y2:1,stop:0 #F2F3F4 , stop:1 #E7E9EB);
}
QComboBox:hover{
border: 1px solid #00BB9E;
}
QComboBox:selected{
border: 1px solid #00BB9E;
}
QComboBox:editable{
background-color: qlineargradient(spread:pad,x1:0,y1:0,x2:0,y2:1,stop:0 #F2F3F4 , stop:1 #E7E9EB);
}
QComboBox:editable:disabled{
color: #DCE1E6;
background-color: #F5F5F5;
border: 1px solid #969696;
}
/* 下拉后，整个下拉窗体样式 */
QComboBox QAbstractItemView {
border: 1px solid #969696;
background: qlineargradient(spread:pad,x1:0,y1:0,x2:0,y2:1,stop:0 #F2F3F4 , stop:1 #E7E9EB);
selection-background-color: #00BB9E; /* 整个下拉窗体被选中项的背景色 */
}
QComboBox QAbstractItemView::item {
height: 20px;
}
QComboBox::drop-down {
width: 20px;
height: 20px;
subcontrol-position: center right;
right: 2px;
border: 0;
background-color: transparent;
}
QComboBox::down-arrow {/*替换三角小图标*/
width: 20px;
height: 20px;
border-image: url(:/icon/triangle_down_969696.png);
}
QComboBox::down-arrow:hover {
border-image: url(:/icon/triangle_down_00BB9E.png);
}
QComboBox::disabled{
color: #DCE1E6;
background-color: #F5F5F5;
border: 1px solid #969696;
}
QComboBox::down-arrow:disabled {
border-image: url(:/icon/triangle_down_404244.png);
}
/* QFontComboBox ------------------------------------------------------------
见QComboBox
--------------------------------------------------------------------------- */
/* QLineEdit ------------------------------------------------------------
--------------------------------------------------------------------------- */
QLineEdit{
border-radius: 3px;
padding: 0 5px;
color: #000000;
border: 1px solid #969696;
background-color: #F5F5F5 ;
}
QLineEdit:hover{
border: 1px solid #00BB9E;
}
QLineEdit:focus{
border: 1px solid #00BB9E;
}
QLineEdit[readOnly=true],QLineEdit:disabled{
color: #969696;
background-color: #F5F5F5;
border: 1px solid #969696;
}
/* QTextEdit ------------------------------------------------------------
--------------------------------------------------------------------------- */
QTextEdit{
border-radius: 3px;
padding: 0 5px;
color: #000000;
border: 1px solid #969696;
background-color: #F5F5F5 ;
}
QTextEdit:hover{
border: 1px solid #00BB9E;
}
QTextEdit:focus{
border: 1px solid #00BB9E;
}
QTextEdit[readOnly=true],QLineEdit:disabled{
color: #969696;
background-color: #F5F5F5;
border: 1px solid #969696;
}
/* QPlainTextEdit ------------------------------------------------------------
--------------------------------------------------------------------------- */
QPlainTextEdit{
border-radius: 3px;
padding: 0 5px;
color: #000000;
border: 1px solid #969696;
background-color: #F5F5F5 ;
}
QPlainTextEdit:hover{
border: 1px solid #00BB9E;
}
QPlainTextEdit:focus{
border: 1px solid #00BB9E;
}
QPlainTextEdit[readOnly=true],QLineEdit:disabled{
color: #DCE1E6;
background-color: #F5F5F5;
border: 1px solid #969696;
}
/* QSpinBox ------------------------------------------------------------
--------------------------------------------------------------------------- */
QSpinBox{
border-radius: 3px;
padding: 0 5px;
color: #000000;
border: 1px solid #969696;
background-color: #F5F5F5 ;
min-height: 25px;
}
QSpinBox:hover{
border: 1px solid #00BB9E;
}
QSpinBox:selected{
border: 1px solid #00BB9E;
}
QSpinBox[buttonSymbols="0"]::up-button{/*显示按钮=0*/
width: 20px;
height: 14px;
subcontrol-origin: border;
subcontrol-position: top right;
right: 2px;
top: 2px;
bottom: 1px;
border-image: url(:/icon/triangle_up_969696.png);
}
QSpinBox::up-button:hover{
border-image: url(:/icon/triangle_up_00BB9E.png);
}
QSpinBox::up-button:pressed{
border-image: url(:/icon/triangle_up_262829.png);
}
QSpinBox[buttonSymbols="0"]::down-button{
width: 20px;
height: 14px;
subcontrol-origin: border;
subcontrol-position: bottom right;
right: 2px;
bottom: 2px;
border-image: url(:/icon/triangle_down_969696.png);
}
QSpinBox::down-button:hover{
border-image: url(:/icon/triangle_down_00BB9E.png);
}
QSpinBox::down-button:pressed{
border-image: url(:/icon/triangle_down_262829.png);
}
QSpinBox:disabled{
color: #DCE1E6;
background-color:#F5F5F5;
border: 1px solid #969696;
}
QSpinBox::up-button:disabled{
border-image: url(:/icon/triangle_up_404244.png);
}
QSpinBox::down-button:disabled{
border-image: url(:/icon/triangle_down_404244.png);
}
/* QDoubleSpinBox ------------------------------------------------------------
--------------------------------------------------------------------------- */
QDoubleSpinBox{
border-radius: 3px;
padding: 0 5px;
color: #000000;
border: 1px solid #969696;
background-color: #F5F5F5 ;
min-height: 25px;
}
QDoubleSpinBox:hover{
border: 1px solid #00BB9E;
}
QDoubleSpinBox:focus{
border: 1px solid #00BB9E;
}
QDoubleSpinBox[buttonSymbols="0"]::up-button{/*显示按钮=0*/
width: 20px;
height: 14px;
subcontrol-origin: border;
subcontrol-position: top right;
right: 2px;
top: 2px;
bottom: 1px;
border-image: url(:/icon/triangle_up_969696.png);
}
QDoubleSpinBox::up-button:hover{
border-image: url(:/icon/triangle_up_00BB9E.png);
}
QDoubleSpinBox::up-button:pressed{
border-image: url(:/icon/triangle_up_262829.png);
}
QDoubleSpinBox[buttonSymbols="0"]::down-button{
width: 20px;
height: 14px;
subcontrol-origin: border;
subcontrol-position: bottom right;
right: 2px;
bottom: 2px;
border-image: url(:/icon/triangle_down_969696.png);
}
QDoubleSpinBox::down-button:hover{
border-image: url(:/icon/triangle_down_00BB9E.png);
}
QDoubleSpinBox::down-button:pressed{
border-image: url(:/icon/triangle_down_262829.png);
}
QDoubleSpinBox:disabled{
color: #DCE1E6;
background-color: #F5F5F5;
border: 1px solid #969696;
}
QDoubleSpinBox::up-button:disabled{
border-image: url(:/icon/triangle_up_404244.png);
}
QDoubleSpinBox::down-button:disabled{
border-image: url(:/icon/triangle_down_404244.png);
}
/* QTimeEdit ------------------------------------------------------------
跟随QDateTimeEdit
--------------------------------------------------------------------------- */
/* QDateTimeEdit ------------------------------------------------------------
跟随QDateTimeEdit
--------------------------------------------------------------------------- */
/* QDateEdit ------------------------------------------------------------
设置setCalendarPopup(true)之后可以弹出日历控件，样式见QCalendarWidget
--------------------------------------------------------------------------- */
QDateTimeEdit{
border-radius: 3px;
padding: 0 5px;
color: #000000;
border: 1px solid #969696;
background-color: #F5F5F5 ;
min-height: 25px;
}
QDateTimeEdit:hover{
border: 1px solid #00BB9E;
}
QDateTimeEdit:focus{
border: 1px solid #00BB9E;
}
QDateTimeEdit[buttonSymbols="0"]::up-button{/*显示按钮=0*/
width: 20px;
height: 14px;
subcontrol-origin: border;
subcontrol-position: top right;
right: 2px;
top: 2px;
bottom: 1px;
border-image: url(:/icon/triangle_up_969696.png);
}
QDateTimeEdit::up-button:hover{
border-image: url(:/icon/triangle_up_00BB9E.png);
}
QDateTimeEdit::up-button:pressed{
border-image: url(:/icon/triangle_up_262829.png);
}
QDateTimeEdit[buttonSymbols="0"]::down-button{
width: 20px;
height: 14px;
subcontrol-origin: border;
subcontrol-position: bottom right;
right: 2px;
bottom: 2px;
border-image: url(:/icon/triangle_down_969696.png);
}
QDateTimeEdit::down-button:hover{
border-image: url(:/icon/triangle_down_00BB9E.png);
}
QDateTimeEdit::down-button:pressed{
border-image: url(:/icon/triangle_down_262829.png);
}
QDateTimeEdit:disabled{
color: #DCE1E6;
background-color: #F5F5F5;
border: 1px solid #969696;
}
QDateTimeEdit::up-button:disabled{
border-image: url(:/icon/triangle_up_404244.png);
}
QDateTimeEdit::down-button:disabled{
border-image: url(:/icon/triangle_down_404244.png);
}
QDateTimeEdit[calendarPopup="true"]:drop-down{
border: 0px solid #969696;
min-width: 20px;
right: 3px;
}
QDateTimeEdit[calendarPopup="true"]::down-arrow{
border-image: url(:/icon/triangle_down_262829.png);
}
QDateTimeEdit[calendarPopup="true"]::down-arrow:pressed{
border-image: url(:/icon/triangle_down_262829.png);
}
/* QDial ------------------------------------------------------------
--------------------------------------------------------------------------- */
QDial {
background: #CCD3D9;
border: 1px solid #969696;
color: #000000;
border-radius: 4px;
padding: 3px;
min-height: 30px;
min-width: 90px;
}
/* Vertical ScrollBar ------------------------------------------------------------
--------------------------------------------------------------------------- */
QScrollBar:vertical{
width: 15px;
border-radius: 5px;
margin: 0;
background-color: #969696;
}
QScrollBar::add-page:vertical,QScrollBar::sub-page:vertical{
background-color: transparent;
}
QScrollBar::handle:vertical{
width:20px;
min-height:20px;
margin:15px 0;
border-radius: 3px;
background-color: #404244;
}
QScrollBar::handle:vertical:hover{
border: 1px solid #00BB9E;
}
QScrollBar::handle:vertical:pressed{
background-color: #00BB9E;
}
QScrollBar::add-line:vertical{
height:16px;
width:16px;
subcontrol-position:bottom;
background-color:#F5F5F5;
border-image: url(:/icon/triangle_down_969696.png);
}
QScrollBar::sub-line:vertical{
height:16px;
width:16px;
subcontrol-position:top;
background-color:#F5F5F5;
border-image: url(:/icon/triangle_up_969696.png);
}
QScrollBar::add-line:vertical:hover{
background-color:#F5F5F5;
border-image: url(:/icon/triangle_down_00BB9E.png);
}
QScrollBar::sub-line:vertical:hover{
background-color:#F5F5F5;
border-image: url(:/icon/triangle_up_00BB9E.png);
}
QScrollBar::add-line:vertical:pressed{
background-color:#F5F5F5;
border-image: url(:/icon/triangle_down_262829.png);
}
QScrollBar::sub-line:vertical:pressed{
background-color:#F5F5F5;
border-image: url(:/icon/triangle_up_262829.png);
}
/* Horizontal ScrollBar ------------------------------------------------------------
--------------------------------------------------------------------------- */
QScrollBar:horizontal{
height: 15px;
border-radius: 5px;
margin: 0;
background-color: #969696;
}
QScrollBar::add-page:horizontal,QScrollBar::sub-page:horizontal{
background-color: transparent;
}
QScrollBar::handle:horizontal{
height:20px;
min-width:20px;
margin: 0 15px;
border-radius: 3px;
background-color: #404244;
}
QScrollBar::handle:horizontal:hover{
border: 1px solid #00BB9E;
}
QScrollBar::handle:horizontal:pressed{
background-color: #00BB9E;
}
QScrollBar::add-line:horizontal{
height:16px;
width:16px;
subcontrol-position:right;
background-color:#F5F5F5;
border-image: url(:/icon/triangle_right_969696.png);
}
QScrollBar::sub-line:horizontal{
height:16px;
width:16px;
subcontrol-position:left;
background-color:#F5F5F5;
border-image: url(:/icon/triangle_left_969696.png);
}
QScrollBar::add-line:horizontal:hover{
background-color:#F5F5F5;
border-image: url(:/icon/triangle_right_00BB9E.png);
}
QScrollBar::sub-line:horizontal:hover{
background-color:#F5F5F5;
border-image: url(:/icon/triangle_left_00BB9E.png);
}
QScrollBar::add-line:horizontal:pressed{
background-color:#F5F5F5;
border-image: url(:/icon/triangle_right_262829.png);
}
QScrollBar::sub-line:horizontal:pressed{
background-color:#F5F5F5;
border-image: url(:/icon/triangle_left_262829.png);
}
/* Horizontal Slider ------------------------------------------------------------
--------------------------------------------------------------------------- */
QSlider::groove:horizontal {
border: 1px solid #969696;
height: 10px;
background-color: #CCD3D9;
margin-right: -3px;
margin-left: -3px;
}
QSlider::sub-page:horizontal {
background-color: #00BB9E;
}
QSlider::add-page:horizontal {
background-color: #CCD3D9;
}
QSlider::handle:horizontal {
background: qradialgradient(spread:pad, cx:0.5, cy:0.5, radius:0.5, fx:0.5, fy:0.5,
stop:0.6 #969696, stop:0.778409 rgba(255, 255, 255, 255));
width: 11px;
margin-top: -3px;
margin-bottom: -3px;
border-radius: 5px;
}
QSlider::handle:horizontal:hover {
background: qradialgradient(spread:pad, cx:0.5, cy:0.5, radius:0.5, fx:0.5, fy:0.5,
stop:0.6 #969696, stop:0.778409 rgba(255, 255, 255, 255));
width: 11px;
border-radius: 5px;
border: 1px solid #00BB9E;
}
QSlider::handle:horizontal:pressed {
background: qradialgradient(spread:pad, cx:0.5, cy:0.5, radius:0.5, fx:0.5, fy:0.5, stop:0.6 #00BB9E,
stop:0.778409 rgba(255, 255, 255, 255));
width: 11px;
border-radius: 5px;
}
/* Vertical Slider ------------------------------------------------------------
--------------------------------------------------------------------------- */
QSlider::groove:vertical {
border: 1px solid #969696;
width: 10px;
background-color: #CCD3D9;
margin-top: -3px;
margin-bottom: -3px;
}
QSlider::sub-page:vertical {
background-color: #00BB9E;
}
QSlider::add-page:vertical {
background-color: #CCD3D9;
}
QSlider::handle:vertical{
background: qradialgradient(spread:pad, cx:0.5, cy:0.5, radius:0.5, fx:0.5, fy:0.5,
stop:0.6 #969696, stop:0.778409 rgba(255, 255, 255, 255));
height: 11px;
margin-left: -3px;
margin-right: -3px;
border-radius: 5px;
}
QSlider::handle:vertical:hover {
background: qradialgradient(spread:pad, cx:0.5, cy:0.5, radius:0.5, fx:0.5, fy:0.5,
stop:0.6 #969696, stop:0.778409 rgba(255, 255, 255, 255));
width: 11px;
border-radius: 5px;
border: 1px solid #00BB9E;
}
QSlider::handle:vertical:pressed {
background: qradialgradient(spread:pad, cx:0.5, cy:0.5, radius:0.5, fx:0.5, fy:0.5, stop:0.6 #00BB9E,
stop:0.778409 rgba(255, 255, 255, 255));
width: 11px;
border-radius: 5px;
}
/* QKeySequenceEdit ------------------------------------------------------------
见QLineEdit
--------------------------------------------------------------------------- */
/* DisplayWidgets 显示控件------------------------------------------------------------
QLabel 标签
QTextBrowser 文本浏览器
QGraphicsView 绘图视图
QCalendarWidget 日历控件
QLCDNumber LCD数字显示框
QProgressBar 进度条
HorizontalLine 横线条
VerticalLine 竖线条
OpenGL Widget 渲染OpenGL图形
QQuickWidget 加载QML界面
--------------------------------------------------------------------------- */
/* QLabel ------------------------------------------------------------
--------------------------------------------------------------------------- */
QLabel {
background: transparent;
color: #000000;
border-radius: 4px;
padding: 3px;
}
/* QTextBrowser ------------------------------------------------------------
跟随QTextEdit
--------------------------------------------------------------------------- */
/* QGraphicsView ------------------------------------------------------------
--------------------------------------------------------------------------- */
QGraphicsView {
background:transparent;
border: 1px solid #969696;
color: #000000;
border-radius: 4px;
padding: 3px;
}
/* QCalendarWidget ------------------------------------------------------------
--------------------------------------------------------------------------- */
QCalendarWidget QToolButton {
min-width: 50px;
}
QCalendarWidget QMenu {
/*月份选择 见QMenu*/
min-width: 50px;
}
QCalendarWidget QSpinBox {
/*年份选择 见QSpinBox*/
min-width: 50px;
}
QCalendarWidget QWidget {
alternate-background-color: #F5F5F5;
}
QCalendarWidget QAbstractItemView:enabled{
border: 1px solid #969696;
color: #000000;
background-color: #CCD3D9;
selection-background-color: #F5F5F5;
selection-color: #00BB9E;
}
QCalendarWidget QAbstractItemView:disabled {
color: #DCE1E6;
}
/* QLCDNumber ------------------------------------------------------------
ui界面设置setSegmentStyle(QLCDNumber::Flat);
--------------------------------------------------------------------------- */
QLCDNumber {
background-color: #F5F5F5;
border: 1px solid #969696;
color: #000000;
border-radius: 4px;
min-height: 50px;
min-width: 90px;
}
/* QProgressBar ------------------------------------------------------------
--------------------------------------------------------------------------- */
QProgressBar{
min-height: 20;
text-align: center;
border: 1px solid #969696;
background-color: #CCD3D9;
color: #000000;
border-radius: 3px;
}
QProgressBar::chunk{
border-radius: 3px;
background: qlineargradient(spread:pad,x1:0,y1:0,x2:1,y2:0,stop:0 green,stop:1 #00BB9E);
}
/* HorizontalLine ------------------------------------------------------------
样式见QFrame
QFrame#line设置对象名为line的样式
--------------------------------------------------------------------------- */
/* VerticalLine ------------------------------------------------------------
样式见QFrame
QFrame#line设置对象名为line的样式
--------------------------------------------------------------------------- */
/* QOpenGLWidget ------------------------------------------------------------
--------------------------------------------------------------------------- */
/* QQuickWidget ------------------------------------------------------------
加载QML界面
--------------------------------------------------------------------------- */
四、运行测试
1、Ctrl+R 运行
2、点击“换肤”按钮，进行样式切换
五、源码下载
Qt用QSS对界面进行美化-C++文档类资源-CSDN下载
六、错误提示
1、error: No rule to make target '../MyQSS/qss/grey.css', needed by 'debug/qrc_file.cpp'. Stop.
当删除.qss文件时，提示以上错误
解决办法：
关闭Qt软件，
删除工程目录下的MyQSS.pro.user，
删除build-MyQSS-Desktop_Qt_5_12_1_MinGW_64_bit-Debug文件夹
重新运行程序
2、点击控件时提示“libpng warning: iCCP: known incorrect sRGB profile”
原因：因为libpng-1.6以上版本增强了ICC profiles检查，所以发出警告；此警告可以忽略。
解决办法：下载好的png格式图标别用PS进行编辑
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
智能推荐
我们应如何度过自己的大学生活？_如何度过大学生活1000字-程序员宅基地
文章浏览阅读3.1k次。我们应如何度过自己的大学生活？ 踏着九月的烈日，我们成功地来到了河南理工大学，开始了我们的大学生活，那么你可曾想过，我们到底应该如何度过我们的大学生活才算有意义呢？ 可曾记得高中老师说的最多的一句话：“好好学吧！上了大学就轻松了！”每当听到这句话时都会给我们莫大的鼓励，也让我们对大学充满了憧憬。那么大学生活真如高中老师说的那样轻松吗？其实不然！高中老师所谓的轻松只是在一定程度上正课的时..._如何度过大学生活1000字
python snownlp情感分析简易demo(分享)，没有我Python干不成的事！_snowlp情感分析代码-程序员宅基地
文章浏览阅读745次。SnowNLP是国人开发的python类库，可以方便的处理中文文本内容，是受到了TextBlob的启发而写的，由于现在大部分的自然语言处理库基本都是针对英文的，于是写了一个方便处理中文的类库，并且和TextBlob不同的是，这里没有用NLTK，所有的算法都是自己实现的，并且自带了一些训练好的字典。注意本程序都是处理的unicode编码，所以使用时请自行decode成unicode。MIT许可下发行。其github主页可能有些不准确，我也是随便提取的数据，不过snownlp还是号称情感分析准确很高的！_snowlp情感分析代码
命令行安装todesk_todesk命令行csdn-程序员宅基地
文章浏览阅读653次，点赞10次，收藏7次。要想通过命令行安装todesk，也是比较简单的。_todesk命令行csdn
如何开发一个个人微信小程序，微信小程序开发入门教程_微信小程序怎么开发自己的小程序-程序员宅基地
文章浏览阅读10w+次，点赞183次，收藏1.1k次。做任何程序开发要首先找到其官方文档，我们先来看看其有哪些官方文档。微信小程序开发文档链接为：https://mp.weixin.qq.com/debug/wxadoc/dev/index.html，如下图：这里就是做微信小程序开发的全部官方文档。知道了文档的位置，下面我们来介绍下如何做一个微信小程序开发：第一步：下载微信小程序开发者工具并安装，下载路径：https://mp.weix..._微信小程序怎么开发自己的小程序
前端解决浏览器直接打开图片URL，下载问题_前端想要通过url下载但是打开了网页-程序员宅基地
文章浏览阅读1w次，点赞3次，收藏7次。本周做的项目中有一个下载图片的功能，拿到后台返回的url,像文件一样，直接window.open,发现图片没有像文件一样被下载，而是重新打开了一个页面展示图片。然后我尝试了转成base64等方法也还是有跨域的问题。后来就想着自己把这个url,发送给Node，node转成数据流返回给我，我再下载。话不多说，上代码：vue前端代码： downZip (urls) { ..._前端想要通过url下载但是打开了网页
什么是内部类？成员内部类、静态内部类、局部内部类和匿名内部类的区别及作用？_成员内部类和局部内部类的区别-程序员宅基地
文章浏览阅读3.4k次，点赞8次，收藏42次。一、什么是内部类？or 内部类的概念内部类是定义在另一个类中的类；下面类TestB是类TestA的内部类。即内部类对象引用了实例化该内部对象的外围类对象。public class TestA{ class TestB {}}二、 为什么需要内部类？or 内部类有什么作用？1、 内部类方法可以访问该类定义所在的作用域中的数据，包括私有数据。2、内部类可以对同一个包中的其他类隐藏起来。3、 当想要定义一个回调函数且不想编写大量代码时，使用匿名内部类比较便捷。三、 内部类的分类成员内部_成员内部类和局部内部类的区别
随便推点
语义分割入门的总结-程序员宅基地
文章浏览阅读740次。点击上方“小白学视觉”，选择加"星标"或“置顶”重磅干货，第一时间送达作者：Yanpeng Sunhttps://zhuanlan.zhihu.com/p/74318967声明：仅做学术分..._语义分割两个目标重合怎么
SpringBoot实践（三十五）：JVM信息分析_怎样查看springboot项目的jvm状态-程序员宅基地
文章浏览阅读902次。JVM分析可以也可以使用，那么什么时候用到jvm信息分析呢，一般生产测试环境，能够最大化将问题暴露，但是总有些问题只有生产运行很长时间后才会被发现，jvm分析经常用于运行了很久的系统有异常情况时的调优，比如堆内存本身分配不合理，新生代中eden比例太低等。_怎样查看springboot项目的jvm状态
基于springboot＋vue的戒毒所人员管理系统 毕业设计-附源码251514_戒毒所管理系统-程序员宅基地
文章浏览阅读288次。戒毒所人员管理系统的开发是采用java语言，基于MVVM模式进行开发，采取MySQL作为后台数据的主要存储单元，采用Springboot框架实现了本系统的全部功能。戒毒所人员管理系统，具有戒毒人员管理、尿检管理、戒毒管理、治疗分类、社会跟踪等功能，本系统代码的复用率高，系统维护代价小，具有方便、灵活、高效等特征。_戒毒所管理系统
【LeetCode】面试题57 - II. 和为s的连续正数序列_leet code 和为s的正数序列 java-程序员宅基地
文章浏览阅读174次。来源：力扣（LeetCode）链接：https://leetcode-cn.com/problems/he-wei-sde-lian-xu-zheng-shu-xu-lie-lcof题目描述：输入一个正整数 target ，输出所有和为 target 的连续正整数序列（至少含有两个数）。序列内的数字由小到大排列，不同序列按照首个数字从小到大排列。示例 1：输入：target = 9..._leet code 和为s的正数序列 java
java spark的使用和配置_使用java调用spark注册进去的程序-程序员宅基地
文章浏览阅读3.3k次。前言spark在java使用比较少，多是scala的用法，我这里介绍一下我在项目中使用的代码配置详细算法的使用请点击我主页列表查看版本jar版本说明spark3.0.1scala2.12这个版本注意和spark版本对应，只是为了引jar包springboot版本2.3.2.RELEASEmaven<!-- spark --> <dependency> <gro_使用java调用spark注册进去的程序
汽车零部件开发工具巨头V公司全套bootloader中UDS协议栈源代码，自己完成底层外设驱动开发后，集成即可使用_uds协议栈 源代码-程序员宅基地
文章浏览阅读4.8k次。汽车零部件开发工具巨头V公司全套bootloader中UDS协议栈源代码，自己完成底层外设驱动开发后，集成即可使用，代码精简高效，大厂出品有量产保证。:139800617636213023darcy169_uds协议栈 源代码