一套简约的qt 蓝色qss方案

一套简约的qt 蓝色qss方案

直接使用qss代码

QMenu
{
    background: qlineargradient(x1:0, y1:0, x2:0, y2:1,
    stop:0 rgba(255, 255, 255, 240),
    stop:0.2 rgba(255, 255, 255, 200),
    stop:0.6 rgba(255, 255, 255, 160),
    stop:1 rgba(255, 255, 255, 120));
    qproperty-effect: blur(30px);
    border-radius: 10px;
    padding:4px 2px;
    margin:4px 2px;
}
QMenu::item
{
    background-color: transparent;
    padding:2px 15px;
    margin:2px 2px;
    height: 30px; /* 设置item的高度 */
    border-radius: 4px;
}
QMenu::item:selected
{
    background-color: rgb(55,144,250);
}

/* 普通状态 */
QPushButton {
    background-color: rgb(220,220,220);/* 设置背景颜色 */
    border: 1px solid rgb(200,200,200); /* 设置边框 */
    border-radius: 10px;
    min-height: 25px;
    color: #000000; /* 设置文字颜色 */
    padding:4px 20px;
    margin:4px 4px;
}

/* 鼠标悬停状态 */
QPushButton:hover {
    background-color: rgb(55,144,250); /* 设置悬停时的背景颜色 */
    color: #ffffff; /* 设置悬停时的文字颜色 */
}

/* 按下状态 */
QPushButton:pressed {
    background-color: rgb(44,133,240); /* 设置按下时的背景颜色 */
    color: #ffffff; /* 设置按下时的文字颜色 */
}

/* 复选框选中状态 */
QPushButton:checked {
    background-color: rgb(55,144,250);  /* 设置选中时的背景颜色 */
    color: #ffffff; /* 设置选中时的文字颜色 */
}

/* 按钮被选中状态 */
QPushButton:pressed:checked {
    background-color: rgb(44,133,240); /* 设置按钮被选中时的背景颜色 */
    color: #ffffff; /* 设置按钮被选中时的文字颜色 */
}



QSlider::groove:horizontal {
    border: 1px solid #bbb; /* 设置滑块轨道的边框 */
    background: white; /* 设置滑块轨道的背景颜色 */
    height: 8px; /* 设置滑块轨道的高度 */
    margin: 2px 0; /* 设置滑块轨道与滑块的间距 */
    border-radius: 4px; /* 设置滑块轨道的圆角 */
}

QSlider::handle:horizontal {
    background: qlineargradient(x1:0, y1:0, x2:1, y2:1, stop:0 #eee, stop:1 #ccc); /* 设置滑块的背景渐变色 */
    border: 1px solid #777; /* 设置滑块的边框 */
    width: 14px; /* 设置滑块的宽度 */
    margin: -2px 0; /* 设置滑块的边距 */
    border-radius: 7px; /* 设置滑块的圆角 */
}

QSlider::handle:horizontal:hover {
    background: qlineargradient(x1:0, y1:0, x2:1, y2:1, stop:0 #fff, stop:1 #ddd); /* 设置鼠标悬停时滑块的背景渐变色 */
    border: 1px solid #888; /* 设置鼠标悬停时滑块的边框 */
}

QSlider::sub-page:horizontal {
    background: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 #b9d6ff, stop:1 #add6ff); /* 设置已选择的部分的背景渐变色 */
    border: 1px solid #999; /* 设置已选择的部分的边框 */
    height: 8px; /* 设置已选择的部分的高度 */
    border-radius: 4px; /* 设置已选择的部分的圆角 */
}

QSlider::add-page:horizontal {
    background: #f0f0f0; /* 设置未选择的部分的背景颜色 */
    border: 1px solid #999; /* 设置未选择的部分的边框 */
    height: 8px; /* 设置未选择的部分的高度 */
    border-radius: 4px; /* 设置未选择的部分的圆角 */
}

QComboBox {
    border-radius: 5px; /* 设置圆角 */
    border: 1px solid #c0c0c0; /* 设置边框 */
    padding: 5px; /* 设置内边距 */
    background-color: #f0f0f0; /* 设置背景颜色 */
}

QComboBox::drop-down {
    border-top-right-radius: 5px; /* 设置下拉箭头右上角的圆角 */
    border-bottom-right-radius: 5px; /* 设置下拉箭头右下角的圆角 */
    border-left: 1px solid #c0c0c0; /* 设置下拉箭头左边的边框 */
    background-color: #f0f0f0; /* 设置下拉箭头背景色 */
}

QComboBox::down-arrow:on {
    top: 1px; /* 设置下拉箭头悬停时的位置 */
    left: 1px; /* 设置下拉箭头悬停时的位置 */
}

QComboBox::down-arrow:on {
    top: 1px;
    left: 1px;
}

QComboBox::item:selected {
    background-color: rgb(55,144,250); /* 设置选中项的背景色为蓝色 */
    color: white; /* 设置选中项的文本颜色为白色 */
    padding-left:0px; /* 设置选项的左边距 */
    text-align: center; /* 将选项居中显示 */
    border-radius: 5px; /* 设置圆角 */
}
QComboBox QAbstractItemView {
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
}

QLineEdit {
    border: 1px solid #c0c0c0; /* 设置边框 */
    border-radius: 5px; /* 设置边框的圆角半径 */
    padding: 3px; /* 设置内边距 */
    background-color: #f0f0f0; /* 设置背景颜色 */
    selection-color: white; /* 设置选中文本的颜色 */
    selection-background-color: blue; /* 设置选中文本的背景色 */
}

QLineEdit:focus {
    border: 2px solid #0078d7; /* 设置获取焦点时的边框颜色 */
}


QCheckBox::indicator {
    width: 15px; /* 设置复选框的宽度 */
    height: 15px; /* 设置复选框的高度 */
}

QCheckBox {
    spacing: 5px; /* 设置复选框和文本之间的间距 */
}

QCheckBox::indicator::unchecked {
    border: 2px solid #c0c0c0; /* 设置未选中时的边框样式 */
    border-radius: 5px; /* 设置未选中时的边框圆角 */
}

QCheckBox::indicator::checked {
    border: 2px solid #0078d7; /* 设置选中时的边框样式 */
    background-color: #0078d7; /* 设置选中时的背景颜色 */
    border-radius: 5px; /* 设置未选中时的边框圆角 */
}

/* 设置 QTableWidget 的整体样式 */
QTableWidget {
    background-color: white;
    gridline-color: #e0e0e0;
    border: 1px solid #ccc;
}

/* 设置 QTableWidget 单元格的样式 */
QTableWidget::item {
    padding: 5px;
    background-color: #f9f9f9;
}

/* 设置 QTableWidget 表头（QHeaderView）的样式 */
QHeaderView::section {
    background-color: #e0f2fe;
    color: #333333;
    border: 1px solid #c0d6e4;
    padding: 5px;
    text-align: center;
}

QHeaderView::section:horizontal {
    border-left: none;
}

QHeaderView::section:vertical {
    border-top: none;
}

/* 垂直滚动条样式 */
 QScrollBar:vertical {
    width: 32px; /* 垂直滚动条宽度增加一倍 */
    background-color: #f0f0f0;
    margin: 0px 0px 0px 0px;
}

 QScrollBar::handle:vertical {
    background-color: #c0c0c0;
    min-height: 20px;
    border-radius: 16px; /* 适当调整圆角以匹配宽度 */
}

 QScrollBar::add-line:vertical,
 QScrollBar::sub-line:vertical {
    height: 0px;
    width: 0px;
    background-color: none;
}

 QScrollBar::up-arrow:vertical,
 QScrollBar::down-arrow:vertical {
    width: 0px;
    height: 0px;
    background-color: none;
}

 QScrollBar::add-page:vertical,
 QScrollBar::sub-page:vertical {
    background-color: none;
}

/* 水平滚动条样式 */
 QScrollBar:horizontal {
    height: 32px; /* 水平滚动条高度增加一倍 */
    background-color: #f0f0f0;
    margin: 0px 0px 0px 0px;
}

 QScrollBar::handle:horizontal {
    background-color: #c0c0c0;
    min-width: 20px;
    border-radius: 16px; /* 适当调整圆角以匹配高度 */
}

 QScrollBar::add-line:horizontal,
 QScrollBar::sub-line:horizontal {
    width: 0px;
    height: 0px;
    background-color: none;
}

 QScrollBar::left-arrow:horizontal,
 QScrollBar::right-arrow:horizontal {
    width: 0px;
    height: 0px;
    background-color: none;
}

 QScrollBar::add-page:horizontal,
 QScrollBar::sub-page:horizontal {
    background-color: none;
}


/* 整体 QTabWidget 的样式 */
QTabWidget {
    background-color: #f5f5f5;
    border: 1px solid #ccc;
    border-radius: 10px;
}

/* 选项卡栏的样式 */
QTabBar {
    margin: 0; /* 去除选项卡栏的外边距 */
}

/* 选项卡的样式 */
QTabBar::tab {
    background-color: #e0e0e0;
    color: #333;
    padding: 6px 15px; /* 减少内边距以降低高度 */
    margin: 0; /* 去除外边距，避免边角对不齐 */
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border: 1px solid #ccc;
    border-bottom: none;
}

/* 鼠标悬停在选项卡上的样式 */
QTabBar::tab:hover {
    background-color: #d0d0d0;
}

/* 选中的选项卡的样式 */
QTabBar::tab:selected {
    background-color: #fff;
    color: #007bff;
    border-bottom: 1px solid #fff;
    z-index: 1; /* 确保选中的选项卡显示在最上层，避免边框覆盖问题 */
}

/* 选项卡页面（内容区域）的样式 */
QTabWidget::pane {
    background-color: #fff;
    border: 1px solid #ccc;
    border-top: none;
    border-radius: 0 0 5px 5px;
    padding: 10px;
    margin-top: -1px; /* 向上偏移 1px 以对齐边框 */
}