data/stylesheets/DarkMonokai.qss

   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 authoritative 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
  48 Palette {
  49     /* Window colors */
  50     window: #2b2b2b;
  51     background: #212121;
  52     foreground: #ffffff;
  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: #00ff00;
  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 overlaid 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 #ff0000, stop: 0.1 #ff0000, stop: 0.1 transparent);
  86 }
  87
  88 /*
  89 ** Base Object Colors
  90 */
  91
  92 /* Tables */
  93 // QTreeView#settingsTree -> Tree in the Settings popup.
  94
  95 QTreeView, QTableView {
  96     alternate-background-color: rgba(0,0,0, 64);
  97     // background-color: palette(shadow);
  98     border: 0px;
  99 }
 100
 101 QTreeView {
 102   selection-background-color: transparent;
 103 }
 104
 105 QTreeView::item:focus {
 106   border: none;
 107 }
 108
 109 QTreeView::item:selected {
 110   border: none;
 111   border-radius: 3px;
 112   color: palette(button-text);
 113 }
 114
 115 QTreeView::item:hover {
 116   border-radius: 3px;
 117   background: #000000; /* palette(dark); */
 118 }
 119
 120
 121 QTreeView::item:selected:active{
 122   color: palette(button-text);
 123   background: #040404; /* palette(dark); */
 124 }
 125
 126 QTreeView::item:selected:!active {
 127   color: palette(button-text);
 128   background: #080808; /* palette(shadow); */
 129 }
 130
 131 // QTreeView::item { color: #debc85; }
 132 // QTreeView::item:selected { color: #00004b; }
 133 // QTreeView#settingsTree { background: #131313; }
 134
 135
 136 /* Scrollbar */
 137 /* From Quassel Wiki: http://sprunge.us/iZGB */
 138 QScrollBar {
 139     //background: transparent;
 140     background: palette(base);
 141     margin: 0;
 142 }
 143 QScrollBar:hover {
 144     /* Optional: Subtle accent of scrolling area on hover */
 145     background: #161616; /* base +2 */
 146 }
 147 QScrollBar:vertical {
 148     width: 8px;
 149 }
 150 QScrollBar:horizontal {
 151     height: 8px;
 152 }
 153
 154 QScrollBar::handle {
 155     padding: 0;
 156     margin: 2px;
 157     border-radius: 2px;
 158     border: 2px solid palette(midlight);
 159     background: palette(midlight);
 160 }
 161
 162 QScrollBar::handle:vertical {
 163     min-height: 20px;
 164     min-width: 0px;
 165 }
 166
 167 QScrollBar::handle:horizontal {
 168     min-width: 20px;
 169     min-height: 0px;
 170 }
 171 QScrollBar::handle:hover {
 172     border-color: palette(light);
 173     background: palette(light);
 174 }
 175 QScrollBar::handle:pressed {
 176     background: palette(highlight);
 177     border-color: palette(highlight);
 178 }
 179
 180 QScrollBar::add-line , QScrollBar::sub-line {
 181     height: 0px;
 182     border: 0px;
 183 }
 184 QScrollBar::up-arrow, QScrollBar::down-arrow {
 185     border: 0px;
 186     width: 0px;
 187     height: 0px;
 188 }
 189
 190 QScrollBar::add-page, QScrollBar::sub-page {
 191     background: none;
 192 }
 193
 194 /* Input Box */
 195 MultiLineEdit {
 196     //background: palette(base);
 197     //color: palette(foreground);
 198 }
 199
 200 /* Widgets */
 201 /* http://doc.qt.nokia.com/4.7-snapshot/qdockwidget.html */
 202 //QMainWindow,
 203 QMainWindow QAbstractScrollArea {
 204     //border: 0; // Remove borders.
 205     border: 1px solid palette(shadow);
 206 }
 207
 208 QMainWindow {
 209     //background: palette(mid); // Main window trim
 210 }
 211
 212 /* Splitter */
 213 /* The splits between QDockWidgets and QMainWindow is a different element. */
 214 QSplitter::handle,
 215 QMainWindow::separator {
 216         background: palette(dark);
 217 }
 218 QSplitter::handle:horizontal:hover,
 219 QMainWindow::separator:vertical:hover {
 220     background: qlineargradient(x1: 0, y1: 0, x2: 1, y2: 0, stop: 0 palette(window), stop: 0.5 palette(light), stop: 1 palette(window));
 221 }
 222
 223 QSplitter::handle:vertical:hover,
 224 QMainWindow::separator:horizontal:hover {
 225     background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 palette(window), stop: 0.5 palette(light), stop: 1 palette(window));
 226 }
 227
 228 /* Menu Bar / Context Menus */
 229 QMenu {
 230     margin: 5px; // A bit of nice padding around menu items.
 231 }
 232
 233 /* ToolTip */
 234 /* Note: You cannot create transparent sections in the popup box without a mask set. Thus the black edges outside the rounded borders. */
 235 QToolTip {
 236     border: 2px solid #202020; // palette(dark)
 237     border-radius: 2px;
 238     background: #131313; // palette(base)
 239     color: white; // palette(text)
 240 }
 241
 242 /* Tabs */
 243 /*
 244     The palette is designed for the selected one to be darker. So we need to change it. Decided to do a simple line.
 245     tab:bottom and tab:top reverse y1 and y2 on the linear gradients.
 246
 247     Tab Shadow: #444444 (light)
 248     Tab Hover: #666
 249     Tab Selected: palette(highlight)
 250 */
 251
 252 //QTabWidget{}
 253 //QTabWidget::pane {}
 254
 255 QTabWidget::tab-bar {
 256     alignment: center;
 257 }
 258
 259 QTabBar::tab {
 260     min-width: 30px;
 261     height: 20px;
 262 }
 263
 264 QTabBar::tab:bottom:selected {
 265     background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 palette(highlight), stop: 0.2 palette(highlight), stop: 0.2 transparent);
 266 }
 267
 268 QTabBar::tab:top:selected {
 269     background: qlineargradient(x1: 0, y1: 1, x2: 0, y2: 0, stop: 0 palette(highlight), stop: 0.2 palette(highlight), stop: 0.2 transparent);
 270 }
 271
 272 QTabBar::tab:!selected {
 273     color: #888;
 274 }
 275
 276 QTabBar::tab:bottom:!selected {
 277     background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 palette(light), stop: 0.2 palette(light), stop: 0.2 transparent);
 278 }
 279
 280 QTabBar::tab:top:!selected {
 281     background: qlineargradient(x1: 0, y1: 1, x2: 0, y2: 0, stop: 0 palette(light), stop: 0.2 palette(light), stop: 0.2 transparent);
 282 }
 283
 284 QTabBar::tab:!selected:hover {
 285     color: #aaa;
 286 }
 287
 288 QTabBar::tab:bottom:!selected:hover {
 289     background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #666, stop: 0.2 #666, stop: 0.2 transparent);
 290 }
 291
 292 QTabBar::tab:top:!selected:hover {
 293     background: qlineargradient(x1: 0, y1: 1, x2: 0, y2: 0, stop: 0 #666, stop: 0.2 #666, stop: 0.2 transparent);
 294 }
 295
 296 /*
 297 ** Quassel CSS
 298 */
 299
 300 /* Main Chat Background Override */
 301 ChatView {
 302     background: palette(base);
 303 }
 304
 305
 306 /* Font */
 307 // Will not override if selectors are doubled up eg: "ChatLine, MultiLineEdit {}"
 308 // These will override anything set in Quassel's Settings.
 309 /**
 310  * Don't bold or style MultiLineEdit text in any way otherwise you will be
 311  * prone to get weird behaviour in submitting from the Input box.
 312  * It will randomly bold your input if you do.
 313  */
 314 ChatLine {
 315     //font-family: "MingLiU_HKSCS-ExtB", "Courier New", Courier, Monotype;
 316
 317     //font-size: 13pt;
 318     //font-weight: bold;
 319     }
 320 MultiLineEdit {
 321     //font-family: "MingLiU_HKSCS-ExtB", "Courier New", Courier, Monotype;
 322
 323     //font-size: 20px;
 324     //font-weight: normal;
 325     }
 326 ChatLine#plain {
 327     //font-weight: bold;
 328     }
 329
 330 /* Font: UI Global Font */
 331 QWidget {
 332     //font-family: consolas;
 333     }
 334 ChatListItem {
 335     font-family: consolas;
 336     }
 337 NickListItem {
 338     font-family: consolas;
 339     }
 340 StyledLabel#topicLabel {
 341     font-family: consolas;
 342     font-size: 14px;
 343     }
 344
 345
 346 /* Topic Box */
 347 StyledLabel#topicLabel { background: palette(base);  font-family: consolas; }
 348
 349 /* Buffer / Channel List */
 350 /**
 351     state: inactive, channel-event, unread-message, highlighted
 352     type: query, channel, network
 353 **/
 354 ChatListItem { foreground: #888888; }
 355 ChatListItem[state="inactive"] { foreground: #555555; }
 356 ChatListItem[state="channel-event"] { foreground: #888888; }
 357 ChatListItem[state="unread-message"] { foreground: #85A83F; }
 358 ChatListItem[state="highlighted"] { foreground: #FFAA00; }
 359
 360 ChatListItem[type="network", state="unread-message"] {foreground: #999999; }
 361 ChatListItem[type="network", state="highlighted"] {foreground: #999999; }
 362 ChatListItem[type="query", state="unread-message"] { foreground: #FFAA00; }
 363
 364
 365 /* Nick List */
 366 /**
 367     state: away
 368     type: user, category
 369 **/
 370 NickListItem[type="category"] { foreground: #debc85; }
 371 NickListItem[type="user"] { foreground: #cccccc; }
 372 NickListItem[type="user", state="away"] { foreground: #666666; }
 373
 374
 375
 376 /* Chatbox Line Formatting */
 377
 378 ChatLine[label="highlight"] {
 379     foreground: #8db7bd;
 380     background: #192527; // 3a557b
 381 }
 382
 383 /*
 384 ** Option: Bold highlighted text, but not the timestamp.
 385 */
 386 /*
 387 ChatLine[label="highlight"] { font-weight: bold; }
 388 ChatLine::timestamp[label="highlight"]{ font-weight: normal; }
 389 */
 390
 391 /* Slight accent on the first two columns */
 392 ChatLine::sender { background: #101010; }
 393 ChatLine::timestamp { background: #101010; }
 394 /*ChatLine::contents { background: #101010; }*/
 395
 396 ChatLine::sender[label="highlight"] { foreground: #5e7c80; background: #162224; }
 397 ChatLine::timestamp[label="highlight"] { foreground: #5e7c80; background: #162224; }
 398
 399 ChatLine::timestamp {  }
 400
 401 /* ::contents == Message */
 402 ChatLine::contents {
 403   /* Can only set background */
 404 }
 405
 406 ChatLine#plain { foreground: #b8b8bb; }
 407 ChatLine#notice { foreground: #A6E22E; }
 408 ChatLine#action { foreground: #F92672; font-style: italic; }
 409 ChatLine#nick { foreground: #75715E; }
 410 ChatLine#mode { foreground: #75715E; font-weight: bold; }
 411 ChatLine#join { foreground: #75715E; }
 412 ChatLine#part { foreground: #75715E; }
 413 ChatLine#quit { foreground: #75715E; }
 414 ChatLine#kick { foreground: #75715E; }
 415 ChatLine#kill { foreground: #75715E; }
 416 ChatLine#server { foreground: #A6E22E; }
 417 ChatLine#info { foreground: #A6E22E; }
 418 ChatLine#error { foreground: #FD971F; }
 419 ChatLine#daychange { foreground: #A6E22E; }
 420 ChatLine#topic { foreground: #FD971F; }
 421 //ChatLine#netsplit { foreground: #996633; } // Old
 422 ChatLine#netsplit-join { foreground: #996633; }
 423 ChatLine#netsplit-quit { foreground: #996633; }
 424
 425 ChatLine::timestamp {
 426     foreground: #707C70;
 427     // Resets the timestamp font during #action and other possible formatting.
 428     font-style: normal;
 429     font-weight: normal;
 430 }
 431
 432 ChatLine::url {
 433     foreground: palette(link);
 434     //font-style: underline; // Uncomment if you always want an underline on links.
 435 }
 436
 437 /* Sender Colors */
 438 ChatLine::sender#plain[sender="self"] { foreground: #779; }
 439
 440
 441 /* Uncomment this is you want all senders the same color: */
 442 // ChatLine::sender#plain { foreground: #2828B9; }
 443
 444 /**
 445  * The following are the sixteen colours used for the senders.
 446  * The names are calculated by taking the hash of the nickname.
 447  * Then take the modulo (the remainder) when divided by 16.
 448  */
 449 ChatLine::sender#plain[sender="0"] { foreground: #e90d7f; }
 450 ChatLine::sender#plain[sender="1"] { foreground: #8e55e9; }
 451 ChatLine::sender#plain[sender="2"] { foreground: #b30e0e; }
 452 ChatLine::sender#plain[sender="3"] { foreground: #17b339; }
 453 ChatLine::sender#plain[sender="4"] { foreground: #58afb3; }
 454 ChatLine::sender#plain[sender="5"] { foreground: #9d54b3; }
 455 ChatLine::sender#plain[sender="6"] { foreground: #b39775; }
 456 ChatLine::sender#plain[sender="7"] { foreground: #3176b3; }
 457 ChatLine::sender#plain[sender="8"] { foreground: #e90d7f; }
 458 ChatLine::sender#plain[sender="9"] { foreground: #8e55e9; }
 459 ChatLine::sender#plain[sender="a"] { foreground: #b30e0e; }
 460 ChatLine::sender#plain[sender="b"] { foreground: #17b339; }
 461 ChatLine::sender#plain[sender="c"] { foreground: #58afb3; }
 462 ChatLine::sender#plain[sender="d"] { foreground: #9d54b3; }
 463 ChatLine::sender#plain[sender="e"] { foreground: #b39775; }
 464 ChatLine::sender#plain[sender="f"] { foreground: #3176b3; }
 465
 466
 467 /*
 468 ** mIRC formats
 469 */
 470 ChatLine[format="bold"] { font-weight: bold;}
 471 ChatLine[format="italic"] { font-style: italic; }
 472 ChatLine[format="underline"] { font-style: underline; }
 473
 474 /* Make black text appear lighter as our theme has a dark background. */
 475 ChatLine[fg-color="1"] { foreground: #444; }
 476 ChatLine[bg-color="1"] { background: #444; }
 477
 478 /* Blues are hard to read as well. */
 479 ChatLine[fg-color="2"] { foreground: #15a; }
 480 ChatLine[bg-color="2"] { background: #15a; }
 481 ChatLine[fg-color="c"] { foreground: #15f; }
 482 ChatLine[bg-color="c"] { background: #15f; }
 483
 484 /* A list of all the colors for easy convenience */
 485 /*
 486 ChatLine[fg-color="0"] { foreground: white; }
 487 ChatLine[bg-color="0"] { background: white; }
 488 ChatLine[fg-color="1"] { foreground: black; }
 489 ChatLine[bg-color="1"] { background: black; }
 490 ChatLine[fg-color="2"] { foreground: navy; }
 491 ChatLine[bg-color="2"] { background: navy; }
 492 ChatLine[fg-color="3"] { foreground: green; }
 493 ChatLine[bg-color="3"] { background: green; }
 494 ChatLine[fg-color="4"] { foreground: red; }
 495 ChatLine[bg-color="4"] { background: red; }
 496 ChatLine[fg-color="5"] { foreground: darkred; }
 497 ChatLine[bg-color="5"] { background: darkred; }
 498 ChatLine[fg-color="6"] { foreground: purple; }
 499 ChatLine[bg-color="6"] { background: purple; }
 500 ChatLine[fg-color="7"] { foreground: orange; }
 501 ChatLine[bg-color="7"] { background: orange; }
 502 ChatLine[fg-color="8"] { foreground: yellow; }
 503 ChatLine[bg-color="8"] { background: yellow; }
 504 ChatLine[fg-color="9"] { foreground: lightgreen; }
 505 ChatLine[bg-color="9"] { background: lightgreen; }
 506 ChatLine[fg-color="a"] { foreground: teal; }
 507 ChatLine[bg-color="a"] { background: teal; }
 508 ChatLine[fg-color="b"] { foreground: lightcyan; }
 509 ChatLine[bg-color="b"] { background: lightcyan; }
 510 ChatLine[fg-color="c"] { foreground: blue; }
 511 ChatLine[bg-color="c"] { background: blue; }
 512 ChatLine[fg-color="d"] { foreground: pink; }
 513 ChatLine[bg-color="d"] { background: pink; }
 514 ChatLine[fg-color="e"] { foreground: gray; }
 515 ChatLine[bg-color="e"] { background: gray; }
 516 ChatLine[fg-color="f"] { foreground: lightgray; }
 517 ChatLine[bg-color="f"] { background: lightgray; }
 518 */
 519
 520
 521 /*
 522 ** Experimental
 523 */
 524 BufferViewDock[active=true] {
 525     /* The circle is hardcoded into the title. */
 526     /* Color only changes on a refresh (F5) (so it's pointless). */
 527     /* Also colors the border in Breeze. */
 528     //color: palette(highlight);
 529 }
 530
 531 /*
 532 ** OS X: Workaround Palette {} bug
 533 **  - https://stackoverflow.com/questions/19748752/qt-style-qpalettewindowtext-color-reverts-after-application-starts
 534 */
 535
 536 QWidget {
 537     color: white;
 538 }
 539