Qt之QSS（暗橙色）

简述

我觉得一个好看的 UI 可以潜意识地激励我们，不仅可以让我们工作的更高效、更有乐趣，而且可以让应用程序变得更漂亮、更直观。

我比较喜欢风格一致的产品，让所有的东西看起来像是一个大家庭，给人一种专业的视觉享受。当做出很专业的产品时，你甚至可以很自豪地称自己为一个艺术家。

  • 简述
  • 故事情节
  • QSS 样式
  • 更多参考

版权所有：一去丶二三里，转载请注明出处：http://blog.csdn.net/liang19890820

故事情节

首先，感谢 Yasin，为我们提供了一套很经典的 QSS 样式 - Qt dark orange stylesheet 。暗橙色（橙色 + 深灰色）的配色和 Tech-Artists 的风格很像，这个搭配很棒。

在文章开头的时候，作者写道：

When I started with Qt I looked for a good looking stylesheet out there but I couldn’t find a single one, seems like people doesn’t like to share their styles.
当我开始使用 Qt，想要寻找一个好看的样式表，但却找不到，人们似乎不喜欢分享他们的样式风格。

这是一个很有趣的现象，值得思考！

开源，是一种精神。。。分享，是一种态度。。。
共享知识，分享成长！

再次感谢作者。。。

PS：真想对作者说快来参考我的博客，你要的样式统统都有O(∩_∩)O哈哈~

QSS 样式

QToolTip
{
     border: 1px solid black;
     background-color: #ffa02f;
     padding: 1px;
     border-radius: 3px;
     opacity: 100;
}

QWidget
{
    color: #b1b1b1;
    background-color: #323232;
}

QWidget:item:hover
{
    background-color: QLinearGradient( x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #ffa02f, stop: 1 #ca0619);
    color: #000000;
}

QWidget:item:selected
{
    background-color: QLinearGradient( x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #ffa02f, stop: 1 #d7801a);
}

QMenuBar::item
{
    background: transparent;
}

QMenuBar::item:selected
{
    background: transparent;
    border: 1px solid #ffaa00;
}

QMenuBar::item:pressed
{
    background: #444;
    border: 1px solid #000;
    background-color: QLinearGradient(
        x1:0, y1:0,
        x2:0, y2:1,
        stop:1 #212121,
        stop:0.4 #343434/*,
        stop:0.2 #343434,
        stop:0.1 #ffaa00*/
    );
    margin-bottom:-1px;
    padding-bottom:1px;
}

QMenu
{
    border: 1px solid #000;
}

QMenu::item
{
    padding: 2px 20px 2px 20px;
}

QMenu::item:selected
{
    color: #000000;
}

QWidget:disabled
{
    color: #404040;
    background-color: #323232;
}

QAbstractItemView
{
    background-color: QLinearGradient( x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #4d4d4d, stop: 0.1 #646464, stop: 1 #5d5d5d);
}

QWidget:focus
{
    /*border: 2px solid QLinearGradient( x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #ffa02f, stop: 1 #d7801a);*/
}

QLineEdit
{
    background-color: QLinearGradient( x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #4d4d4d, stop: 0 #646464, stop: 1 #5d5d5d);
    padding: 1px;
    border-style: solid;
    border: 1px solid #1e1e1e;
    border-radius: 5;
}

QPushButton
{
    color: #b1b1b1;
    background-color: QLinearGradient( x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #565656, stop: 0.1 #525252, stop: 0.5 #4e4e4e, stop: 0.9 #4a4a4a, stop: 1 #464646);
    border-width: 1px;
    border-color: #1e1e1e;
    border-style: solid;
    border-radius: 6;
    padding: 3px;
    font-size: 12px;
    padding-left: 5px;
    padding-right: 5px;
}

QPushButton:pressed
{
    background-color: QLinearGradient( x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #2d2d2d, stop: 0.1 #2b2b2b, stop: 0.5 #292929, stop: 0.9 #282828, stop: 1 #252525);
}

QComboBox
{
    selection-background-color: #ffaa00;
    background-color: QLinearGradient( x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #565656, stop: 0.1 #525252, stop: 0.5 #4e4e4e, stop: 0.9 #4a4a4a, stop: 1 #464646);
    border-style: solid;
    border: 1px solid #1e1e1e;
    border-radius: 5;
}

QComboBox:hover,QPushButton:hover
{
    border: 2px solid QLinearGradient( x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #ffa02f, stop: 1 #d7801a);
}

QComboBox:on
{
    padding-top: 3px;
    padding-left: 4px;
    background-color: QLinearGradient( x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #2d2d2d, stop: 0.1 #2b2b2b, stop: 0.5 #292929, stop: 0.9 #282828, stop: 1 #252525);
    selection-background-color: #ffaa00;
}

QComboBox QAbstractItemView
{
    border: 2px solid darkgray;
    selection-background-color: QLinearGradient( x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #ffa02f, stop: 1 #d7801a);
}

QComboBox::drop-down
{
     subcontrol-origin: padding;
     subcontrol-position: top right;
     width: 15px;

     border-left-width: 0px;
     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::down-arrow
{
     image: url(:/down_arrow.png);
}

QGroupBox:focus
{
border: 2px solid QLinearGradient( x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #ffa02f, stop: 1 #d7801a);
}

QTextEdit:focus
{
    border: 2px solid QLinearGradient( x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #ffa02f, stop: 1 #d7801a);
}

QScrollBar:horizontal {
     border: 1px solid #222222;
     background: QLinearGradient( x1: 0, y1: 0, x2: 0, y2: 1, stop: 0.0 #121212, stop: 0.2 #282828, stop: 1 #484848);
     height: 7px;
     margin: 0px 16px 0 16px;
}

QScrollBar::handle:horizontal
{
      background: QLinearGradient( x1: 0, y1: 0, x2: 1, y2: 0, stop: 0 #ffa02f, stop: 0.5 #d7801a, stop: 1 #ffa02f);
      min-height: 20px;
      border-radius: 2px;
}

QScrollBar::add-line:horizontal {
      border: 1px solid #1b1b19;
      border-radius: 2px;
      background: QLinearGradient( x1: 0, y1: 0, x2: 1, y2: 0, stop: 0 #ffa02f, stop: 1 #d7801a);
      width: 14px;
      subcontrol-position: right;
      subcontrol-origin: margin;
}

QScrollBar::sub-line:horizontal {
      border: 1px solid #1b1b19;
      border-radius: 2px;
      background: QLinearGradient( x1: 0, y1: 0, x2: 1, y2: 0, stop: 0 #ffa02f, stop: 1 #d7801a);
      width: 14px;
     subcontrol-position: left;
     subcontrol-origin: margin;
}

QScrollBar::right-arrow:horizontal, QScrollBar::left-arrow:horizontal
{
      border: 1px solid black;
      width: 1px;
      height: 1px;
      background: white;
}

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

QScrollBar:vertical
{
      background: QLinearGradient( x1: 0, y1: 0, x2: 1, y2: 0, stop: 0.0 #121212, stop: 0.2 #282828, stop: 1 #484848);
      width: 7px;
      margin: 16px 0 16px 0;
      border: 1px solid #222222;
}

QScrollBar::handle:vertical
{
      background: QLinearGradient( x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #ffa02f, stop: 0.5 #d7801a, stop: 1 #ffa02f);
      min-height: 20px;
      border-radius: 2px;
}

QScrollBar::add-line:vertical
{
      border: 1px solid #1b1b19;
      border-radius: 2px;
      background: QLinearGradient( x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #ffa02f, stop: 1 #d7801a);
      height: 14px;
      subcontrol-position: bottom;
      subcontrol-origin: margin;
}

QScrollBar::sub-line:vertical
{
      border: 1px solid #1b1b19;
      border-radius: 2px;
      background: QLinearGradient( x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #d7801a, stop: 1 #ffa02f);
      height: 14px;
      subcontrol-position: top;
      subcontrol-origin: margin;
}

QScrollBar::up-arrow:vertical, QScrollBar::down-arrow:vertical
{
      border: 1px solid black;
      width: 1px;
      height: 1px;
      background: white;
}

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

QTextEdit
{
    background-color: #242424;
}

QPlainTextEdit
{
    background-color: #242424;
}

QHeaderView::section
{
    background-color: QLinearGradient(x1:0, y1:0, x2:0, y2:1, stop:0 #616161, stop: 0.5 #505050, stop: 0.6 #434343, stop:1 #656565);
    color: white;
    padding-left: 4px;
    border: 1px solid #6c6c6c;
}

QCheckBox:disabled
{
color: #414141;
}

QDockWidget::title
{
    text-align: center;
    spacing: 3px; /* spacing between items in the tool bar */
    background-color: QLinearGradient(x1:0, y1:0, x2:0, y2:1, stop:0 #323232, stop: 0.5 #242424, stop:1 #323232);
}

QDockWidget::close-button, QDockWidget::float-button
{
    text-align: center;
    spacing: 1px; /* spacing between items in the tool bar */
    background-color: QLinearGradient(x1:0, y1:0, x2:0, y2:1, stop:0 #323232, stop: 0.5 #242424, stop:1 #323232);
}

QDockWidget::close-button:hover, QDockWidget::float-button:hover
{
    background: #242424;
}

QDockWidget::close-button:pressed, QDockWidget::float-button:pressed
{
    padding: 1px -1px -1px 1px;
}

QMainWindow::separator
{
    background-color: QLinearGradient(x1:0, y1:0, x2:0, y2:1, stop:0 #161616, stop: 0.5 #151515, stop: 0.6 #212121, stop:1 #343434);
    color: white;
    padding-left: 4px;
    border: 1px solid #4c4c4c;
    spacing: 3px; /* spacing between items in the tool bar */
}

QMainWindow::separator:hover
{

    background-color: QLinearGradient(x1:0, y1:0, x2:0, y2:1, stop:0 #d7801a, stop:0.5 #b56c17 stop:1 #ffa02f);
    color: white;
    padding-left: 4px;
    border: 1px solid #6c6c6c;
    spacing: 3px; /* spacing between items in the tool bar */
}

QToolBar::handle
{
     spacing: 3px; /* spacing between items in the tool bar */
     background: url(:/images/handle.png);
}

QMenu::separator
{
    height: 2px;
    background-color: QLinearGradient(x1:0, y1:0, x2:0, y2:1, stop:0 #161616, stop: 0.5 #151515, stop: 0.6 #212121, stop:1 #343434);
    color: white;
    padding-left: 4px;
    margin-left: 10px;
    margin-right: 5px;
}

QProgressBar
{
    border: 2px solid grey;
    border-radius: 5px;
    text-align: center;
}

QProgressBar::chunk
{
    background-color: #d7801a;
    width: 2.15px;
    margin: 0.5px;
}

QTabBar::tab {
    color: #b1b1b1;
    border: 1px solid #444;
    border-bottom-style: none;
    background-color: #323232;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 3px;
    padding-bottom: 2px;
    margin-right: -1px;
}

QTabWidget::pane {
    border: 1px solid #444;
    top: 1px;
}

QTabBar::tab:last
{
    margin-right: 0; /* the last selected tab has nothing to overlap with on the right */
    border-top-right-radius: 3px;
}

QTabBar::tab:first:!selected
{
 margin-left: 0px; /* the last selected tab has nothing to overlap with on the right */

    border-top-left-radius: 3px;
}

QTabBar::tab:!selected
{
    color: #b1b1b1;
    border-bottom-style: solid;
    margin-top: 3px;
    background-color: QLinearGradient(x1:0, y1:0, x2:0, y2:1, stop:1 #212121, stop:.4 #343434);
}

QTabBar::tab:selected
{
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    margin-bottom: 0px;
}

QTabBar::tab:!selected:hover
{
    /*border-top: 2px solid #ffaa00;
    padding-bottom: 3px;*/
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    background-color: QLinearGradient(x1:0, y1:0, x2:0, y2:1, stop:1 #212121, stop:0.4 #343434, stop:0.2 #343434, stop:0.1 #ffaa00);
}

QRadioButton::indicator:checked, QRadioButton::indicator:unchecked{
    color: #b1b1b1;
    background-color: #323232;
    border: 1px solid #b1b1b1;
    border-radius: 6px;
}

QRadioButton::indicator:checked
{
    background-color: qradialgradient(
        cx: 0.5, cy: 0.5,
        fx: 0.5, fy: 0.5,
        radius: 1.0,
        stop: 0.25 #ffaa00,
        stop: 0.3 #323232
    );
}

QCheckBox::indicator{
    color: #b1b1b1;
    background-color: #323232;
    border: 1px solid #b1b1b1;
    width: 9px;
    height: 9px;
}

QRadioButton::indicator
{
    border-radius: 6px;
}

QRadioButton::indicator:hover, QCheckBox::indicator:hover
{
    border: 1px solid #ffaa00;
}

QCheckBox::indicator:checked
{
    image:url(:/images/checkbox.png);
}

QCheckBox::indicator:disabled, QRadioButton::indicator:disabled
{
    border: 1px solid #444;
}

更多参考

时间： 2024-09-19 20:44:27

Qt之QSS（暗橙色）的相关文章

Qt之QSS（样式表语法）

简述 Qt样式表以下统称QSS的术语和语法规则几乎和CSS相同.如果你熟悉CSS可以快速浏览以下内容. 简述 样式规则 选择器类型 子控件 伪选择器 解决冲突 级联效应 继承性 Namespaces中的部件 设置对象属性 更多参考 样式规则 QSS包含了一个样式规则序列一个样式规则由一个选择器和声明组成选择器指定哪些部件由规则影响声明指定哪些属性应该在部件上进行设置.例如 QPushButton { color: red } 上面的例子中QPushButton是选择器{ color: red }

属性设置-Qt中QSS，对于各个控件的设置，各个属性都代表什么意思？

问题描述 Qt中QSS,对于各个控件的设置,各个属性都代表什么意思? Qt中QSS,对于各个控件的设置,各个属性都代表什么意思? 比如,设置QComboBox:down-arrow{...}.这个语句中,找了好久才找到down-arrow代表什么意思... 有没有系统的对各个控件属性的介绍? 解决方案 查看qt的文档,或者google下.

Qt之QSS（语法高亮）

简述 语法高亮是文本编辑器用来显示文本的,特别是源代码,根据不同的类别来用不同的颜色和字体显示.这个功能有助于编写结构化的语言,例如:编程语言.标记语言,这些语言的语法错误显示是有区别的. 简述 详细描述 配置 高亮 更多参考 详细描述 语法高亮能帮助开发者很快的找到程序中的错误.例如,大部分编辑器会用不同的颜色突出字符串常量.所以,非常容易发现是否遗漏了分隔符,因为相对于其他文本颜色不同. Qt Creator 中默认情况下打开 qss 文件(*.qss)不会高亮显示,需要手动配置,让其更符合

Qt之QSS（Q_PROPERTY-原始属性）

简述 在Qt之QSS(样式表语法)一节讲过关于"设置对象属性"的用法,里面有一条很重要的原则是:任何可被识别的Q_PROPERTY都可以使用qproperty-语法设置. 这里需要对Qt属性系统有一定的了解,详见助手:The Property System. 简述 属性 实例 效果 QSS 源码 更多参考 属性 下面我们以QLabel为例,讲解如何在QSS中使用属性. class Q_WIDGETS_EXPORT QLabel : public QFrame { ... Q_PROPE

Qt之QSS（Q_PROPERTY-自定义属性）

简述 在Qt之QSS(Q_PROPERTY-原始属性)一节我们分享了Q_PROPERTY-原始属性的用法,但通常情况下我们需要很多自定义样式,例如:动态获取QSS样式,这时自定义属性就能很好的发挥其用武之地了. 简述 问题 解决方案 实例 效果 源码 QSS 使用 更多参考 问题 在使用QAbstractItemModel.QAbstractItemDelegate更新表格样式的时候,比如:背景色.前景色等,我们通常的做法是定义一些颜色常量,然后根据不同的条件显示不同的颜色,要么就是通过QSS全

Qt之QSS（QDarkStyleSheet）

简述 关于样式,前面介绍了很多内容,下面分享一个深色样式表,很值得借鉴! 简述 效果 QSS 更多参考 效果 QSS /* * The MIT License (MIT) * * Copyright (c) <2013-2014> <Colin Duquesnoy> * * Permission is hereby granted, free of charge, to any person obtaining a copy * of this software and assoc

Qt之QSS（动态属性）

简述 QSS可以定制应用程序的外观,无需关注Qt样式背后的魔力.从非常轻微到极其复杂的调整,样式表都可以做到.对于一个完全定制和独特的用户体验,QtQuick和QGraphicsView是更好的选择. 简述 自定义属性 限制 示例 效果 源码 QSS 更多参考 自定义属性 为了用户界面外观的动态变化,属性选择器可以与动态属性组合使用.动态属性在Qt4.2中引入,允许为编译时不存在的QObject属性分配属性值.即:如果为QObject设置一个urgent属性为true,该属性将跟随该类,但不会为

Qt之QSS（白色靓丽）

简述 Qt助手中有关于各种部件的QSS详细讲解,资源很丰富,请参考:Qt Style Sheets Examples. 白色靓丽 - 一款漂亮的QSS风格. 你可以直接使用,也可以随意转载,但请务必保留版权声明和许可声明,请参考"声明"部分. 简述 声明 效果 QSS 更多参考 声明 被授权人权利 被授权人有权利使用.复制.修改.合并.出版发行.散布.再授权及贩售软件及软件的副本. 被授权人可根据程序的需要修改授权条款为适当的内容. 被授权人义务 在软件和软件的所有副本中都必须包含版权

Qt之QSS（黑色炫酷）

简述 Qt助手中有关于各种部件的QSS详细讲解,资源很丰富,请参考:Qt Style Sheets Examples. 黑色炫酷 - 一款漂亮的QSS风格. 之前博客中分享了很多关于Qt的样式效果,几乎都是基下面此样式. 你可以直接使用,也可以随意转载,但请务必保留版权声明和许可声明,请参考"声明"部分. 简述 声明 效果 QSS 更多参考 声明 被授权人权利 被授权人有权利使用.复制.修改.合并.出版发行.散布.再授权及贩售软件及软件的副本. 被授权人可根据程序的需要修改授权条款为适