From 8cd0e92f7c7378fc990ba9bfa4397d6e138af5ec Mon Sep 17 00:00:00 2001 From: Vincent Ambo Date: Sat, 18 Sep 2021 13:28:27 +0300 Subject: feat(tazjin/gruber-darker): Check in first version of Quassel theme Change-Id: I5a79f4d6ccd8ddae4a6e24c356d4b7498ffb3c49 Reviewed-on: https://cl.tvl.fyi/c/depot/+/3569 Tested-by: BuildkiteCI Reviewed-by: tazjin --- users/tazjin/gruber-darker.qss | 508 +++++++++++++++++++++++++++++++++++++++++ 1 file changed, 508 insertions(+) create mode 100644 users/tazjin/gruber-darker.qss (limited to 'users/tazjin/gruber-darker.qss') diff --git a/users/tazjin/gruber-darker.qss b/users/tazjin/gruber-darker.qss new file mode 100644 index 000000000000..16f4c2f32991 --- /dev/null +++ b/users/tazjin/gruber-darker.qss @@ -0,0 +1,508 @@ +/** +** Gruber Darker theme for Quassel. +** +** This theme derives from multiple different things: +** +** - Quassel DarkSolarized (https://gist.github.com/Zren/e91ad5197f9d6b6d410f) +** - Quassel Dracula (https://github.com/dracula/quassel) +** - gruber-darker for Emacs (https://github.com/rexim/gruber-darker-theme) +** - Original Gruber theme for BBEdit (https://daringfireball.net/projects/bbcolors/schemes/) +** +** This is a work-in-progress as I haven't figured out the point of +** all of the colours yet, and what I want them to be instead. +** +**/ + +/** +** Helpful Links: +** - QT: +** http://qt-project.org/doc/qt-4.8/stylesheet-syntax.html +** http://doc.qt.nokia.com/4.7-snapshot/stylesheet-reference.html +** http://doc.qt.nokia.com/4.7-snapshot/stylesheet-examples.html +** - Plastique Client Style: +** https://qt.gitorious.org/qt/qt/source/src/gui/styles/qplastiquestyle.cpp +** https://github.com/mirror/qt/blob/4.8/src/gui/styles/qplastiquestyle.cpp +** - Quassel Stylesheet Gallery: +** http://bugs.quassel-irc.org/projects/1/wiki/Stylesheet_Gallery +** http://bugs.quassel-irc.org/projects/1/wiki/Stylesheet_Gallery#DarkMonokaiqss +*/ + +/** +** - QSS Notes: +** Quassel stylesheets also support Palette { role: color; } for setting the system +** palette. See the QPalette docs for available roles, and convert them into qss-style +** attributes, so ButtonText would become button-text or see qssparser.cpp In fact, +** qssparser.cpp is the authorative source for Quassel's qss syntax that contains all +** the extensions over standard Qt qss syntax. +** See: +** http://qt-project.org/doc/qt-4.8/qpalette.html#ColorRole-enum +** https://github.com/quassel/quassel/blob/master/src/uisupport/qssparser.cpp +** +*/ + +Palette { + /* Window colors */ + window: #282828; + background: #181818; + foreground: #f4f4f4; + + base: #181818; + alternate-base: #282828; + + /* Just setting palette(tooltip-base) doesn't work as intended so we set it in + ** a QTooltip{} rule as well. + */ + tooltip-base: #282a36; // palette(base) TODO + tooltip-text: white; // palette(text) TODO + + /* The following attributes should be done in a scale */ + light: #444444; // Tab Borders, Scrollbar handle grips, Titled Panel border (Settings) + midlight: #333333; // ? + button: #292929; // Menu BG, Scrollbar and Button base. + mid: #252525; // Titled Panel border (Settings) + dark: #202020; // TreeView [-] and ... color (Also various borders in Windows Client Style) + shadow: #1d1d1d; // ? + + + /* Text colors */ + text: white; + button-text: #f8f8f2; + + highlight: #44475a; + + /* Link colors */ + link: #ff79c6; + link-visited: #bd93f9; + + /* Color of the marker line in the chat view. BG Node that is overlayed on the first new ChatLine. */ + // 0 -> 0.1 (sharp line) + marker-line: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #586e75, stop: 0.1 #586e75, stop: 0.1 transparent); +} + +/* +** Base Object Colors +*/ + +/* Tables */ +// QTreeView#settingsTree -> Tree in the Settings popup. + +QTreeView, QTableView { + alternate-background-color: #282a36; + // background-color: palette(shadow); + border: 0px; +} + +QTreeView { + selection-background-color: transparent; +} + +QTreeView::item { + border-left: 2px solid palette(base); +} + +QTreeView::item:focus { + border-width: 0 0 0 2px; + outline: none; +} + +QTreeView::item:selected { + border-width: 0 0 0 2px; + color: palette(button-text); +} + +QTreeView::item:hover { + background: palette(dark); +} + + +QTreeView::item:selected:active{ + color: palette(button-text); + background: palette(dark); + border-color: palette(highlight); +} + +QTreeView::item:selected:!active { + color: palette(button-text); + background: palette(dark); + border-color: palette(highlight); +} + +/* Scrollbar */ +/* From Quassel Wiki: http://sprunge.us/iZGB */ +QScrollBar { + //background: transparent; + background: palette(base); + margin: 0; +} +QScrollBar:hover { + /* Optional: Subtle accent of scrolling area on hover */ + background: #161616; /* base +2 */ +} +QScrollBar:vertical { + width: 8px; +} +QScrollBar:horizontal { + height: 8px; +} + +QScrollBar::handle { + padding: 0; + margin: 2px; + border-radius: 2px; + border: 2px solid palette(midlight); + background: palette(midlight); +} + +QScrollBar::handle:vertical { + min-height: 20px; + min-width: 0px; +} + +QScrollBar::handle:horizontal { + min-width: 20px; + min-height: 0px; +} +QScrollBar::handle:hover { + border-color: palette(light); + background: palette(light); +} +QScrollBar::handle:pressed { + background: palette(highlight); + border-color: palette(highlight); +} + +QScrollBar::add-line , QScrollBar::sub-line { + height: 0px; + border: 0px; +} +QScrollBar::up-arrow, QScrollBar::down-arrow { + border: 0px; + width: 0px; + height: 0px; +} + +QScrollBar::add-page, QScrollBar::sub-page { + background: none; +} + +/* Input Box */ +MultiLineEdit { + //background: palette(base); + //color: palette(foreground); +} + +/* Widgets */ +/* http://doc.qt.nokia.com/4.7-snapshot/qdockwidget.html */ +//QMainWindow, +QMainWindow QAbstractScrollArea { + //border: 0; // Remove borders. + border: 1px solid palette(shadow); +} + +QMainWindow { + //background: palette(mid); // Main window trim +} + +/* Splitter */ +/* The splits between QDockWidgets and QMainWindow is a different element. */ +QSplitter::handle, +QMainWindow::separator { + background: palette(dark); +} +QSplitter::handle:horizontal:hover, +QMainWindow::separator:vertical:hover { + background: qlineargradient(x1: 0, y1: 0, x2: 1, y2: 0, stop: 0 palette(window), stop: 0.5 palette(light), stop: 1 palette(window)); +} + +QSplitter::handle:vertical:hover, +QMainWindow::separator:horizontal:hover { + background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 palette(window), stop: 0.5 palette(light), stop: 1 palette(window)); +} + +/* Menu Bar / Context Menues */ +QMenu { + margin: 5px; // A bit of nice padding around menu items. +} + +/* ToolTip */ +/* Note: You cannot create transparent sections in the popup box without a mask set. Thus the black edges outside the rounded borders. */ +QToolTip { + border: 2px solid #202020; // palette(dark) + border-radius: 2px; + background: #282a36; // palette(base) + color: white; // palette(text) +} + +/* Tabs */ +/* + The palette is designed for the selected one to be darker. So we need to change it. Decided to do a simple line. + tab:bottom and tab:top reverse y1 and y2 on the linear gradients. + + Tab Shadow: #444444 (light) + Tab Hover: #666 + Tab Selected: palette(highlight) +*/ + +QTabWidget::tab-bar { + alignment: center; +} + +QTabBar::tab { + min-width: 30px; + height: 20px; +} + +QTabBar::tab:bottom:selected { + background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 palette(highlight), stop: 0.2 palette(highlight), stop: 0.2 transparent); +} + +QTabBar::tab:top:selected { + background: qlineargradient(x1: 0, y1: 1, x2: 0, y2: 0, stop: 0 palette(highlight), stop: 0.2 palette(highlight), stop: 0.2 transparent); +} + +QTabBar::tab:!selected { + color: #888; +} + +QTabBar::tab:bottom:!selected { + background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 palette(light), stop: 0.2 palette(light), stop: 0.2 transparent); +} + +QTabBar::tab:top:!selected { + background: qlineargradient(x1: 0, y1: 1, x2: 0, y2: 0, stop: 0 palette(light), stop: 0.2 palette(light), stop: 0.2 transparent); +} + +QTabBar::tab:!selected:hover { + color: #aaa; +} + +QTabBar::tab:bottom:!selected:hover { + background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #666, stop: 0.2 #666, stop: 0.2 transparent); +} + +QTabBar::tab:top:!selected:hover { + background: qlineargradient(x1: 0, y1: 1, x2: 0, y2: 0, stop: 0 #666, stop: 0.2 #666, stop: 0.2 transparent); +} + +/* +** Quassel CSS +*/ + +/* Main Chat Background Override */ +ChatView { + background: #181818; +} +ChatView QScrollBar { + background: #282a36; +} +ChatView QScrollBar:hover { + background: #282a36; +} + +ChatView QScrollBar::handle { + border-color: #44475a; + background: #44475a; +} + +ChatView QScrollBar::handle:hover { + border-color: #44475a; + background: #44475a; +} + +/**/ +QStatusBar {} +QStatusBar::item { + border: none; +} +QStatusBar QLabel { + color: #888; +} + +/* https://github.com/quassel/quassel/blob/master/src/qtui/ui/msgprocessorstatuswidget.ui */ +QStatusBar MsgProcessorStatusWidget {} +QStatusBar MsgProcessorStatusWidget QLabel#label {} +QStatusBar MsgProcessorStatusWidget QProgressBar#progressBar {} + +/* https://github.com/quassel/quassel/blob/master/src/qtui/ui/coreconnectionstatuswidget.ui */ +QStatusBar CoreConnectionStatusWidget {} +QStatusBar CoreConnectionStatusWidget QLabel#messageLabel {} +QStatusBar CoreConnectionStatusWidget QProgressBar#progressBar {} +QStatusBar CoreConnectionStatusWidget QLabel#lagLabel {} +QStatusBar CoreConnectionStatusWidget QLabel#sslLabel { + qproperty-pixmap: none; /* Hide the SSL status icon */ +} + + +/* Font */ +// Will not override if selectors are doubled up eg: "ChatLine, MultiLineEdit {}" +// These will override anything set in Quassel's Settings. +/** + * Don't bold or style MultiLineEdit text in any way otherwise you will be + * prone to get weird behaviour in submitting from the Input box. + * It will randomly bold your input if you do. + */ +ChatLine { + //font-family: "MingLiU_HKSCS-ExtB", "Courier New", Courier, Monotype; + + //font-size: 13pt; + //font-weight: bold; + } +MultiLineEdit { + //font-family: "MingLiU_HKSCS-ExtB", "Courier New", Courier, Monotype; + + //font-size: 20px; + //font-weight: normal; + } +ChatLine#plain { + //font-weight: bold; + } + +/* Font: UI Global Font */ +QWidget { + //font-family: consolas; + } +ChatListItem { + font-family: consolas; + } +NickListItem { + font-family: consolas; + } +StyledLabel#topicLabel { + font-family: consolas; + font-size: 14px; + } + + +/* Topic Box */ +StyledLabel#topicLabel { background: palette(base); font-family: consolas; } + +/* Buffer / Channel List */ +/** + state: inactive, channel-event, unread-message, highlighted + type: query, channel, network +**/ +ChatListItem { foreground: #f8f8f2; } +ChatListItem[state="inactive"] { foreground: #44475a; } +ChatListItem[state="channel-event"] { foreground: #6272a4; } /* palette(button-text) */ +ChatListItem[state="unread-message"] { foreground: #f8f8f2; } +ChatListItem[state="highlighted"] { foreground: #44475a; } + +ChatListItem[type="network", state="unread-message"] { foreground: #44475a; } +ChatListItem[type="network", state="highlighted"] { foreground: #44475a; } +ChatListItem[type="query", state="unread-message"] { foreground: #44475a; } + + +/* Nick List */ +/** + state: away + type: user, category +**/ +NickListItem[type="category"] { foreground: #6272a4; } +NickListItem[type="user"] { foreground: #f8f8f2 } +NickListItem[type="user", state="away"] { foreground: #44475a; } + + + +/* Chatbox Line Formatting */ +ChatLine[label="highlight"] { + foreground: #f5f5f5; + background: #282828; +} + +/* +** Option: Bold highlighted text, but not the timestamp. +*/ +/* +ChatLine[label="highlight"] { font-weight: bold; } +ChatLine::timestamp[label="highlight"]{ font-weight: normal; } +*/ + +ChatLine::timestamp[label="highlight"] { foreground: #44475a; } + +ChatLine::timestamp { } + +/* ::contents == Message */ +ChatLine::contents { + /* Can only set background */ +} + +ChatLine#plain { foreground: #f8f8f2; } +ChatLine#notice { foreground: #44475a; } +ChatLine#action { foreground: #565f73; font-style: italic; font-weight: bold; } +ChatLine#nick { foreground: #6272a4; } +ChatLine#mode { foreground: #6272a4; } +ChatLine#join { foreground: #6272a4; } +ChatLine#part { foreground: #6272a4; } +ChatLine#quit { foreground: #6272a4; } +ChatLine#kick { foreground: #6272a4; } +ChatLine#kill { foreground: #6272a4; } +ChatLine#server { foreground: #44475a; } +ChatLine#info { foreground: #44475a; } +ChatLine#error { foreground: #ff5555; } +ChatLine#daychange { foreground: #44475a; } +ChatLine#topic { foreground: #f1fa8c; } +ChatLine#netsplit-join { foreground: #44475a; } +ChatLine#netsplit-quit { foreground: #44475a; } + +ChatLine::timestamp { + foreground: #586e75; + // Resets the timestemp font during #action and other possible formatting. + font-style: normal; + font-weight: normal; +} + +ChatLine::url { + foreground: palette(link); + //font-style: underline; // Uncomment if you always want an underline on links. +} + +/* Sender Colors */ +ChatLine::sender#plain[sender="self"] { foreground: #586e75; } + +/** + * The following are the sixteen colours used for the senders. + * The names are calculated by taking the hash of the nickname. + * Then take the modulo (the remainder) when divided by 16. + * Preview: http://i.imgur.com/xeRKI4H.png + */ +ChatLine::sender#plain[sender="0"] { foreground: #96a6c8; } +ChatLine::sender#plain[sender="1"] { foreground: #73c936; } +ChatLine::sender#plain[sender="2"] { foreground: #ffdd33; } +ChatLine::sender#plain[sender="3"] { foreground: #cc8c3c; } +ChatLine::sender#plain[sender="4"] { foreground: #ff4f58; } +ChatLine::sender#plain[sender="5"] { foreground: #9e95c7; } +ChatLine::sender#plain[sender="6"] { foreground: #95a99f; } +ChatLine::sender#plain[sender="7"] { foreground: #8be9fd; } + +/* +32 */ +ChatLine::sender#plain[sender="8"] { foreground: #96a6c8; } +ChatLine::sender#plain[sender="9"] { foreground: #73c936; } +ChatLine::sender#plain[sender="a"] { foreground: #ffdd33; } +ChatLine::sender#plain[sender="b"] { foreground: #cc8c3c; } +ChatLine::sender#plain[sender="c"] { foreground: #ff4f58; } +ChatLine::sender#plain[sender="d"] { foreground: #9e95c7; } +ChatLine::sender#plain[sender="e"] { foreground: #95a99f; } +ChatLine::sender#plain[sender="f"] { foreground: #8be9fd; } + +/* +** mIRC formats +*/ +ChatLine[format="bold"] { font-weight: bold;} +ChatLine[format="italic"] { font-style: italic; } +ChatLine[format="underline"] { font-style: underline; } + +/* Blues are hard to read. */ +ChatLine[fg-color="2"] { foreground: #15a; } +ChatLine[bg-color="2"] { background: #15a; } +ChatLine[fg-color="c"] { foreground: #15f; } +ChatLine[bg-color="c"] { background: #15f; } + +/* +** Experimental +*/ +BufferViewDock[active=true] { + /* The circle is hardcoded into the title. */ + /* Color only changes on a refresh (F5) (so it's pointless). */ + /* Also colors the border in Breeze. */ + //color: palette(highlight); +} -- cgit 1.4.1