1/** 2** ______ _ _____ _ _ _ 3** | _ \ | | / ___| | | (_) | | 4** | | | |__ _ _ __| | __ \ `--. ___ | | __ _ _ __ _ _______ __| | 5** | | | / _` | '__| |/ / `--. \/ _ \| |/ _` | '__| |_ / _ \/ _` | 6** | |/ / (_| | | | < /\__/ / (_) | | (_| | | | |/ / __/ (_| | 7** |___/ \__,_|_| |_|\_\ \____/ \___/|_|\__,_|_| |_/___\___|\__,_| 8** 9** Quassel Theme 10** 11** Author: Chris Holland (Zren on Freenode/GitHub) 12*/ 13 14/** 15** Theme Notes: 16** - This theme is designed to work on top of the Fusion or the Plastique client style. 17** It will look weird on almost all the others (including the system default). 18** (Settings > Configure Quassel (F7) > Interface > Client Style) 19*/ 20 21/** 22** Helpful Links: 23** - QT: 24** http://qt-project.org/doc/qt-4.8/stylesheet-syntax.html 25** http://doc.qt.nokia.com/4.7-snapshot/stylesheet-reference.html 26** http://doc.qt.nokia.com/4.7-snapshot/stylesheet-examples.html 27** - Plastique Client Style: 28** https://qt.gitorious.org/qt/qt/source/src/gui/styles/qplastiquestyle.cpp 29** https://github.com/mirror/qt/blob/4.8/src/gui/styles/qplastiquestyle.cpp 30** - Quassel Stylesheet Gallery: 31** http://bugs.quassel-irc.org/projects/1/wiki/Stylesheet_Gallery 32** http://bugs.quassel-irc.org/projects/1/wiki/Stylesheet_Gallery#DarkMonokaiqss 33*/ 34 35/** 36** - QSS Notes: 37** Quassel stylesheets also support Palette { role: color; } for setting the system 38** palette. See the QPalette docs for available roles, and convert them into qss-style 39** attributes, so ButtonText would become button-text or see qssparser.cpp In fact, 40** qssparser.cpp is the authorative source for Quassel's qss syntax that contains all 41** the extensions over standard Qt qss syntax. 42** See: 43** http://qt-project.org/doc/qt-4.8/qpalette.html#ColorRole-enum 44** https://github.com/quassel/quassel/blob/master/src/uisupport/qssparser.cpp 45** 46*/ 47 48Palette { 49 /* Window colors */ 50 window: #2b2b2b; 51 background: #212121; 52 foreground: #dddddd; 53 54 base: #131313; 55 alternate-base: #42403B; 56 57 /* Just setting palette(tooltip-base) doesn't work as intended so we set it in 58 ** a QTooltip{} rule as well. 59 */ 60 tooltip-base: #131313; // palette(base) 61 tooltip-text: white; // palette(text) 62 63 /* The following attributes should be done in a scale */ 64 light: #444444; // Tab Borders, Scrollbar handle grips, Titled Panel border (Settings) 65 midlight: #333333; // ? 66 button: #292929; // Menu BG, Scrollbar and Button base. 67 mid: #252525; // Titled Panel border (Settings) 68 dark: #202020; // TreeView [-] and ... color (Also various borders in Windows Client Style) 69 shadow: #1d1d1d; // ? 70 71 72 /* Text colors */ 73 text: white; 74 button-text: #B6B3AB; 75 76 highlight: #268bd2; 77 //highlight-text: #000000; 78 79 /* Link colors */ 80 link: #539FA3; 81 link-visited: #845B90; 82 83 /* Color of the marker line in the chat view. BG Node that is overlayed on the first new ChatLine. */ 84 // 0 -> 0.1 (sharp line) 85 marker-line: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #586e75, stop: 0.1 #586e75, stop: 0.1 transparent); 86} 87 88/* 89** Base Object Colors 90*/ 91 92/* Tables */ 93// QTreeView#settingsTree -> Tree in the Settings popup. 94 95QTreeView, QTableView { 96 alternate-background-color: rgba(0,0,0, 64); 97 // background-color: palette(shadow); 98 border: 0px; 99} 100 101QTreeView { 102 selection-background-color: transparent; 103} 104 105QTreeView::item { 106 border-left: 2px solid palette(base); 107} 108 109QTreeView::item:focus { 110 border-width: 0 0 0 2px; 111 outline: none; 112} 113 114QTreeView::item:selected { 115 border-width: 0 0 0 2px; 116 color: palette(button-text); 117} 118 119QTreeView::item:hover { 120 background: palette(dark); 121} 122 123 124QTreeView::item:selected:active{ 125 color: palette(button-text); 126 background: palette(dark); 127 border-color: palette(highlight); 128} 129 130QTreeView::item:selected:!active { 131 color: palette(button-text); 132 background: palette(dark); 133 border-color: palette(highlight); 134} 135 136// QTreeView::item { color: #debc85; } 137// QTreeView::item:selected { color: #00004b; } 138// QTreeView#settingsTree { background: #131313; } 139 140 141/* Scrollbar */ 142/* From Quassel Wiki: http://sprunge.us/iZGB */ 143QScrollBar { 144 //background: transparent; 145 background: palette(base); 146 margin: 0; 147} 148QScrollBar:hover { 149 /* Optional: Subtle accent of scrolling area on hover */ 150 background: #161616; /* base +2 */ 151} 152QScrollBar:vertical { 153 width: 8px; 154} 155QScrollBar:horizontal { 156 height: 8px; 157} 158 159QScrollBar::handle { 160 padding: 0; 161 margin: 2px; 162 border-radius: 2px; 163 border: 2px solid palette(midlight); 164 background: palette(midlight); 165} 166 167QScrollBar::handle:vertical { 168 min-height: 20px; 169 min-width: 0px; 170} 171 172QScrollBar::handle:horizontal { 173 min-width: 20px; 174 min-height: 0px; 175} 176QScrollBar::handle:hover { 177 border-color: palette(light); 178 background: palette(light); 179} 180QScrollBar::handle:pressed { 181 background: palette(highlight); 182 border-color: palette(highlight); 183} 184 185QScrollBar::add-line , QScrollBar::sub-line { 186 height: 0px; 187 border: 0px; 188} 189QScrollBar::up-arrow, QScrollBar::down-arrow { 190 border: 0px; 191 width: 0px; 192 height: 0px; 193} 194 195QScrollBar::add-page, QScrollBar::sub-page { 196 background: none; 197} 198 199/* Input Box */ 200MultiLineEdit { 201 //background: palette(base); 202 //color: palette(foreground); 203} 204 205/* Widgets */ 206/* http://doc.qt.nokia.com/4.7-snapshot/qdockwidget.html */ 207//QMainWindow, 208QMainWindow QAbstractScrollArea { 209 //border: 0; // Remove borders. 210 border: 1px solid palette(shadow); 211} 212 213QMainWindow { 214 //background: palette(mid); // Main window trim 215} 216 217/* Splitter */ 218/* The splits between QDockWidgets and QMainWindow is a different element. */ 219QSplitter::handle, 220QMainWindow::separator { 221 background: palette(dark); 222} 223QSplitter::handle:horizontal:hover, 224QMainWindow::separator:vertical:hover { 225 background: qlineargradient(x1: 0, y1: 0, x2: 1, y2: 0, stop: 0 palette(window), stop: 0.5 palette(light), stop: 1 palette(window)); 226} 227 228QSplitter::handle:vertical:hover, 229QMainWindow::separator:horizontal:hover { 230 background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 palette(window), stop: 0.5 palette(light), stop: 1 palette(window)); 231} 232 233/* Menu Bar / Context Menues */ 234QMenu { 235 margin: 5px; // A bit of nice padding around menu items. 236} 237 238/* ToolTip */ 239/* Note: You cannot create transparent sections in the popup box without a mask set. Thus the black edges outside the rounded borders. */ 240QToolTip { 241 border: 2px solid #202020; // palette(dark) 242 border-radius: 2px; 243 background: #131313; // palette(base) 244 color: white; // palette(text) 245} 246 247/* Tabs */ 248/* 249 The palette is designed for the selected one to be darker. So we need to change it. Decided to do a simple line. 250 tab:bottom and tab:top reverse y1 and y2 on the linear gradients. 251 252 Tab Shadow: #444444 (light) 253 Tab Hover: #666 254 Tab Selected: palette(highlight) 255*/ 256 257//QTabWidget{} 258//QTabWidget::pane {} 259 260QTabWidget::tab-bar { 261 alignment: center; 262} 263 264QTabBar::tab { 265 min-width: 30px; 266 height: 20px; 267} 268 269QTabBar::tab:bottom:selected { 270 background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 palette(highlight), stop: 0.2 palette(highlight), stop: 0.2 transparent); 271} 272 273QTabBar::tab:top:selected { 274 background: qlineargradient(x1: 0, y1: 1, x2: 0, y2: 0, stop: 0 palette(highlight), stop: 0.2 palette(highlight), stop: 0.2 transparent); 275} 276 277QTabBar::tab:!selected { 278 color: #888; 279} 280 281QTabBar::tab:bottom:!selected { 282 background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 palette(light), stop: 0.2 palette(light), stop: 0.2 transparent); 283} 284 285QTabBar::tab:top:!selected { 286 background: qlineargradient(x1: 0, y1: 1, x2: 0, y2: 0, stop: 0 palette(light), stop: 0.2 palette(light), stop: 0.2 transparent); 287} 288 289QTabBar::tab:!selected:hover { 290 color: #aaa; 291} 292 293QTabBar::tab:bottom:!selected:hover { 294 background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #666, stop: 0.2 #666, stop: 0.2 transparent); 295} 296 297QTabBar::tab:top:!selected:hover { 298 background: qlineargradient(x1: 0, y1: 1, x2: 0, y2: 0, stop: 0 #666, stop: 0.2 #666, stop: 0.2 transparent); 299} 300 301/* 302** Quassel CSS 303*/ 304 305/* Main Chat Background Override */ 306ChatView { 307 background: #00212A; 308} 309ChatView QScrollBar { 310 background: #00212A; 311} 312ChatView QScrollBar:hover { 313 background: #00212A; 314} 315 316ChatView QScrollBar::handle { 317 border-color: #073642; 318 background: #073642; 319} 320 321ChatView QScrollBar::handle:hover { 322 border-color: #073642; 323 background: #073642; 324} 325 326/**/ 327QStatusBar {} 328QStatusBar::item { 329 border: none; 330} 331QStatusBar QLabel { 332 color: #888; 333} 334 335/* https://github.com/quassel/quassel/blob/master/src/qtui/ui/msgprocessorstatuswidget.ui */ 336QStatusBar MsgProcessorStatusWidget {} 337QStatusBar MsgProcessorStatusWidget QLabel#label {} 338QStatusBar MsgProcessorStatusWidget QProgressBar#progressBar {} 339 340/* https://github.com/quassel/quassel/blob/master/src/qtui/ui/coreconnectionstatuswidget.ui */ 341QStatusBar CoreConnectionStatusWidget {} 342QStatusBar CoreConnectionStatusWidget QLabel#messageLabel {} 343QStatusBar CoreConnectionStatusWidget QProgressBar#progressBar {} 344QStatusBar CoreConnectionStatusWidget QLabel#lagLabel {} 345QStatusBar CoreConnectionStatusWidget QLabel#sslLabel { 346 qproperty-pixmap: none; /* Hide the SSL status icon */ 347} 348 349 350/* Font */ 351// Will not override if selectors are doubled up eg: "ChatLine, MultiLineEdit {}" 352// These will override anything set in Quassel's Settings. 353/** 354 * Don't bold or style MultiLineEdit text in any way otherwise you will be 355 * prone to get weird behaviour in submitting from the Input box. 356 * It will randomly bold your input if you do. 357 */ 358ChatLine { 359 //font-family: "MingLiU_HKSCS-ExtB", "Courier New", Courier, Monotype; 360 361 //font-size: 13pt; 362 //font-weight: bold; 363 } 364MultiLineEdit { 365 //font-family: "MingLiU_HKSCS-ExtB", "Courier New", Courier, Monotype; 366 367 //font-size: 20px; 368 //font-weight: normal; 369 } 370ChatLine#plain { 371 //font-weight: bold; 372 } 373 374/* Font: UI Global Font */ 375QWidget { 376 //font-family: consolas; 377 } 378ChatListItem { 379 font-family: consolas; 380 } 381NickListItem { 382 font-family: consolas; 383 } 384StyledLabel#topicLabel { 385 font-family: consolas; 386 font-size: 14px; 387 } 388 389 390/* Topic Box */ 391StyledLabel#topicLabel { background: palette(base); font-family: consolas; } 392 393/* Buffer / Channel List */ 394/** 395 state: inactive, channel-event, unread-message, highlighted 396 type: query, channel, network 397**/ 398ChatListItem { foreground: #888888; } 399ChatListItem[state="inactive"] { foreground: #555555; } 400ChatListItem[state="channel-event"] { foreground: #888888; } /* palette(button-text) */ 401ChatListItem[state="unread-message"] { foreground: #268bd2; } 402ChatListItem[state="highlighted"] { foreground: #FFAA00; } 403 404ChatListItem[type="network", state="unread-message"] { foreground: #999999; } 405ChatListItem[type="network", state="highlighted"] { foreground: #999999; } 406ChatListItem[type="query", state="unread-message"] { foreground: #FFAA00; } 407 408 409/* Nick List */ 410/** 411 state: away 412 type: user, category 413**/ 414NickListItem[type="category"] { foreground: #debc85; } 415NickListItem[type="user"] { foreground: #cccccc; } 416NickListItem[type="user", state="away"] { foreground: #666666; } 417 418 419 420/* Chatbox Line Formatting */ 421ChatLine[label="highlight"] { 422 foreground: #93a1a1; 423 background: #073642; 424} 425 426/* 427** Option: Bold highlighted text, but not the timestamp. 428*/ 429/* 430ChatLine[label="highlight"] { font-weight: bold; } 431ChatLine::timestamp[label="highlight"]{ font-weight: normal; } 432*/ 433 434/* Slight accent on the first two columns */ 435/*ChatLine::sender { background: #101010; }*/ 436/*ChatLine::timestamp { background: #101010; }*/ 437/*ChatLine::contents { background: #101010; }*/ 438 439/*ChatLine::sender[label="highlight"] { foreground: #839496; background: #00212A; }*/ 440/*ChatLine::timestamp[label="highlight"] { foreground: #586e75; }*/ 441ChatLine::timestamp[label="highlight"] { foreground: #93a1a1; } 442 443ChatLine::timestamp { } 444 445/* ::contents == Message */ 446ChatLine::contents { 447 /* Can only set background */ 448} 449 450ChatLine#plain { foreground: #839496; } 451ChatLine#notice { foreground: #93a1a1; } 452ChatLine#action { foreground: #93a1a1; font-style: italic; font-weight: bold; } 453ChatLine#nick { foreground: #586e75; } 454ChatLine#mode { foreground: #586e75; } 455ChatLine#join { foreground: #586e75; } 456ChatLine#part { foreground: #586e75; } 457ChatLine#quit { foreground: #586e75; } 458ChatLine#kick { foreground: #586e75; } 459ChatLine#kill { foreground: #586e75; } 460ChatLine#server { foreground: #93a1a1; } 461ChatLine#info { foreground: #93a1a1; } 462ChatLine#error { foreground: #dc322f; } 463ChatLine#daychange { foreground: #93a1a1; } 464ChatLine#topic { foreground: #b58900; } 465//ChatLine#netsplit { foreground: #586e75; } // Old 466ChatLine#netsplit-join { foreground: #586e75; } 467ChatLine#netsplit-quit { foreground: #586e75; } 468 469ChatLine::timestamp { 470 foreground: #586e75; 471 // Resets the timestemp font during #action and other possible formatting. 472 font-style: normal; 473 font-weight: normal; 474} 475 476ChatLine::url { 477 foreground: palette(link); 478 //font-style: underline; // Uncomment if you always want an underline on links. 479} 480 481/* Sender Colors */ 482ChatLine::sender#plain[sender="self"] { foreground: #586e75; } 483 484 485/* Uncomment this is you want all senders the same color: */ 486// ChatLine::sender#plain { foreground: #2828B9; } 487 488/** 489 * The following are the sixteen colours used for the senders. 490 * The names are calculated by taking the hash of the nickname. 491 * Then take the modulo (the remainder) when divided by 16. 492 * Preview: http://i.imgur.com/xeRKI4H.png 493 */ 494ChatLine::sender#plain[sender="0"] { foreground: #B58900; } 495ChatLine::sender#plain[sender="1"] { foreground: #CB4B16; } 496ChatLine::sender#plain[sender="2"] { foreground: #DC322f; } 497ChatLine::sender#plain[sender="3"] { foreground: #D33682; } 498ChatLine::sender#plain[sender="4"] { foreground: #6C71C4; } 499ChatLine::sender#plain[sender="5"] { foreground: #268BD2; } 500ChatLine::sender#plain[sender="6"] { foreground: #2AA198; } 501ChatLine::sender#plain[sender="7"] { foreground: #859900; } 502 503/* -32 */ 504/*ChatLine::sender#plain[sender="8"] { foreground: #956900; }*/ 505/*ChatLine::sender#plain[sender="9"] { foreground: #AB2B06; }*/ 506/*ChatLine::sender#plain[sender="a"] { foreground: #BC120f; }*/ 507/*ChatLine::sender#plain[sender="b"] { foreground: #B31662; }*/ 508/*ChatLine::sender#plain[sender="c"] { foreground: #4C51A4; }*/ 509/*ChatLine::sender#plain[sender="d"] { foreground: #066BB2; }*/ 510/*ChatLine::sender#plain[sender="e"] { foreground: #0A8178; }*/ 511/*ChatLine::sender#plain[sender="f"] { foreground: #657900; }*/ 512 513/* +32 */ 514ChatLine::sender#plain[sender="8"] { foreground: #D5A920; } 515ChatLine::sender#plain[sender="9"] { foreground: #EB6B36; } 516ChatLine::sender#plain[sender="a"] { foreground: #FC524f; } 517ChatLine::sender#plain[sender="b"] { foreground: #F356A2; } 518ChatLine::sender#plain[sender="c"] { foreground: #8C91E4; } 519ChatLine::sender#plain[sender="d"] { foreground: #46ABF2; } 520ChatLine::sender#plain[sender="e"] { foreground: #4AC1B8; } 521ChatLine::sender#plain[sender="f"] { foreground: #A5B920; } 522 523 524 525 526 527/* 528** mIRC formats 529*/ 530ChatLine[format="bold"] { font-weight: bold;} 531ChatLine[format="italic"] { font-style: italic; } 532ChatLine[format="underline"] { font-style: underline; } 533 534/* Blues are hard to read. */ 535ChatLine[fg-color="2"] { foreground: #15a; } 536ChatLine[bg-color="2"] { background: #15a; } 537ChatLine[fg-color="c"] { foreground: #15f; } 538ChatLine[bg-color="c"] { background: #15f; } 539 540/* A list of all the colors for easy convienience */ 541/* 542ChatLine[fg-color="0"] { foreground: white; } 543ChatLine[bg-color="0"] { background: white; } 544ChatLine[fg-color="1"] { foreground: black; } 545ChatLine[bg-color="1"] { background: black; } 546ChatLine[fg-color="2"] { foreground: navy; } 547ChatLine[bg-color="2"] { background: navy; } 548ChatLine[fg-color="3"] { foreground: green; } 549ChatLine[bg-color="3"] { background: green; } 550ChatLine[fg-color="4"] { foreground: red; } 551ChatLine[bg-color="4"] { background: red; } 552ChatLine[fg-color="5"] { foreground: darkred; } 553ChatLine[bg-color="5"] { background: darkred; } 554ChatLine[fg-color="6"] { foreground: purple; } 555ChatLine[bg-color="6"] { background: purple; } 556ChatLine[fg-color="7"] { foreground: orange; } 557ChatLine[bg-color="7"] { background: orange; } 558ChatLine[fg-color="8"] { foreground: yellow; } 559ChatLine[bg-color="8"] { background: yellow; } 560ChatLine[fg-color="9"] { foreground: lightgreen; } 561ChatLine[bg-color="9"] { background: lightgreen; } 562ChatLine[fg-color="a"] { foreground: teal; } 563ChatLine[bg-color="a"] { background: teal; } 564ChatLine[fg-color="b"] { foreground: lightcyan; } 565ChatLine[bg-color="b"] { background: lightcyan; } 566ChatLine[fg-color="c"] { foreground: blue; } 567ChatLine[bg-color="c"] { background: blue; } 568ChatLine[fg-color="d"] { foreground: pink; } 569ChatLine[bg-color="d"] { background: pink; } 570ChatLine[fg-color="e"] { foreground: gray; } 571ChatLine[bg-color="e"] { background: gray; } 572ChatLine[fg-color="f"] { foreground: lightgray; } 573ChatLine[bg-color="f"] { background: lightgray; } 574*/ 575 576 577/* 578** Experimental 579*/ 580BufferViewDock[active=true] { 581 /* The circle is hardcoded into the title. */ 582 /* Color only changes on a refresh (F5) (so it's pointless). */ 583 /* Also colors the border in Breeze. */ 584 //color: palette(highlight); 585} 586 587/* 588** OS X: Workaround Pallete {} bug 589** - https://stackoverflow.com/questions/19748752/qt-style-qpalettewindowtext-color-reverts-after-application-starts 590*/ 591 592QWidget { 593 color: #dddddd; 594} 595 596