/gtk-3.0/gtk-widgets.css
CSS | 1417 lines | 1096 code | 221 blank | 100 comment | 0 complexity | f07ce0d7ff303feb216f210f730ed8eb MD5 | raw file
1/* 2 GREYBIRD GTK3 3 MODIFIED BY: ochosi 4 ORIGINAL AUTHOR: lassekongo83 5 WEBSITE: http://lassekongo83.deviantart.com 6 LICENSE: GPL 7 DESCRIPTION: A minimalistic and usable theme made for gtk3 apps. 8 Tip to theme developers: Use 'alpha (#000, 0.00)' to hide something you think look ugly. :-) 9 This theme may use theme_bg_color for the widgets more than the color properties defined in the gtk.css file. 10*/ 11 12* { 13 engine: adwaita; 14 padding: 1; 15 16 /* Style properties */ 17 -GtkToolButton-icon-spacing: 4; 18 19 -GtkTextView-error-underline-color: @error_color; 20 21 -GtkPaned-handle-size: 0; 22 23 -GtkCheckButton-indicator-size: 16; 24 -GtkCheckMenuItem-indicator-size: 12; 25 26 /* The size for scrollbars. The slider is 2px smaller, but we keep it 27 * up so that the whole area is sensitive to button presses for the 28 * slider. The stepper button is larger in both directions, the slider 29 * only in the width 30 */ 31 32 -GtkScrolledWindow-scrollbar-spacing: 0; 33 -GtkScrolledWindow-scrollbars-within-bevel: 1; 34 35 -GtkToolItemGroup-expander-size: 12; 36 -GtkExpander-expander-size: 12; 37 -GtkToolbar-internal-padding: 4; /* ??? */ 38 39 -GtkMenu-horizontal-padding: 0; 40 -GtkMenu-vertical-padding: 0; 41 42 -GtkWidget-link-color: @link_color; 43 -GtkWidget-visited-link-color: @link_color; 44 -GtkIMHtml-hyperlink-color: @link_color; 45 -GtkHTML-link-color: @link_color; 46 47 -GtkWidget-wide-separators: 1; 48 49 -WnckTasklist-fade-overlay-rect: 0; 50 51 -GtkEntry-inner-border: 2; 52 -GtkEntry-progress-border: 0; 53 54 /* Style */ 55 background-color: @theme_bg_color; 56 color: @theme_fg_color; 57 border-radius: 0; 58 59 -GtkWidget-focus-padding: 1; 60 -GtkWidget-focus-line-width: 1; 61 -adwaita-focus-border-color: alpha (@theme_text_color, 0.4); 62 -adwaita-focus-border-radius: 2; 63 -adwaita-focus-fill-color: none; 64 -adwaita-focus-border-gradient: none; 65 -adwaita-focus-border-dashes: 1; 66} 67 68/*************** 69 * Base States * 70 ***************/ 71*:hover { 72 background-color: shade (@theme_bg_color, 1.02); 73 color: @theme_fg_color; 74} 75 76*:selected { 77 background-color: @theme_selected_bg_color; 78 color: @theme_selected_fg_color; 79} 80 81*:selected:focused { 82 background-color: @theme_selected_bg_color; 83 color: @theme_selected_fg_color; 84} 85 86*:insensitive { 87 background-color: @insensitive_bg_color; 88 color: @insensitive_fg_color; 89} 90 91*:active { 92 background-color: shade (@theme_bg_color, 0.915); 93} 94 95.background { 96 border-style: none; 97 border-width: 0; 98 border-radius: 0; 99} 100 101.tooltip { 102 padding: 4 4; 103 border-style: solid; 104 border-width: 1; 105 border-color: shade (@theme_tooltip_bg_color, 0.55); 106 background-color: @theme_tooltip_bg_color; 107 background-image: -gtk-gradient (linear,left top, left bottom,from (shade (@theme_tooltip_bg_color, 1.05)),to (shade (@theme_tooltip_bg_color, 0.96))); 108 color: @theme_tooltip_fg_color; 109 border-radius: 0; 110} 111 112/* That little ugly gripper at the bottom right in some windows. Wish I could remove it with display: none. :( */ 113.grip { 114 background-color: alpha (@inactive_frame_color, 0.00); 115} 116 117.pane-separator { 118 background-color: @theme_bg_color; 119 color: shade (@inactive_frame_color, 0.80); 120} 121 122.pane-separator:prelight, 123.pane-separator:selected { 124 background-color: @theme_bg_color; 125 border-color: shade (@highlighted_border, 0.964); 126} 127 128/**************** 129 * Text Entries * 130 ****************/ 131.entry, 132.toolbar.entry { 133 background-color: @theme_base_color; 134 background-image: -gtk-gradient (linear, 135 left top, left bottom, 136 from (shade (@theme_base_color, 0.95)), 137 to (shade (@theme_base_color, 1.00))); 138 139 border-radius: 2; 140 border-width: 1; 141 border-style: solid; 142 -adwaita-border-gradient: -gtk-gradient (linear, 143 left top, left bottom, 144 from (shade (@button_border_gradient_b, 0.80)), 145 to (shade (@button_border_gradient_a, 0.80))); 146 147 padding: 2; 148} 149 150.entry:focused { 151 border-color: @theme_selected_bg_color; 152 -adwaita-border-gradient: -gtk-gradient (linear, 153 left top, left bottom, 154 from (shade (@theme_selected_bg_color, 0.50)), 155 to (shade (@theme_selected_bg_color, 0.80))); 156} 157 158.entry:insensitive { 159 background-color: @insensitive_bg_color; 160 border-color: shade (@inactive_frame_color, 0.945); 161 -adwaita-border-gradient: none; 162} 163 164.entry.progressbar { 165 /* FIXME: need correct colors/gradient */ 166 background-color: @theme_selected_bg_color; 167 color: @theme_selected_fg_color; 168 169 border-width: 1; 170 border-radius: 1; 171 border-color: @progressbar_border; 172} 173 174/***************** 175 * GtkSpinButton * 176 *****************/ 177.spinbutton.button, 178.spinbutton.button:insensitive, 179.spinbutton.button:prelight, 180.spinbutton.button:active { 181 background-image: none; 182 background-color: @theme_base_color; 183 border-width: 1; 184 border-style: none; 185} 186 187.spinbutton { 188 padding: 3 2; 189} 190 191/**************** 192 * Progress bar * 193 ****************/ 194GtkProgressBar.progressbar { 195 background-image: -gtk-gradient (linear, 196 left top, left bottom, 197 from (@progressbar_background_a), 198 to (@progressbar_background_b)); 199 200 border-radius: 2; 201 border-style: solid; 202 border-color: @progressbar_border; 203} 204 205GtkProgressBar.trough { 206 background-image: -gtk-gradient (linear, 207 left top, left bottom, 208 from (@scrolltrough_gradient_a), 209 to (@scrolltrough_gradient_b)); 210 211 border-width: 1; 212 border-style: solid; 213 border-radius: 2; 214 border-color: shade (@inactive_frame_color, 0.925); 215} 216 217/************ 218 * GtkScale * 219 ************/ 220GtkScale { 221 -GtkScale-slider-length: 16; 222 -GtkRange-slider-width: 22; 223 -GtkRange-trough-border: 0; 224} 225 226GtkScale.slider { 227 border-width: 1; 228 border-radius: 2; 229 230 background-image: -gtk-gradient (linear, 231 left top, left bottom, 232 from (@button_gradient_a), 233 to (@button_gradient_b)); 234 235 -adwaita-border-gradient: -gtk-gradient (linear, 236 left top, left bottom, 237 from (shade (@button_border_gradient_a, 1.00)), 238 to (shade (@button_border_gradient_b, 1.00))); 239} 240 241GtkScale.slider:hover { 242 border-width: 1; 243 border-radius: 2; 244 245 background-image: -gtk-gradient (linear, 246 left top, left bottom, 247 from (shade (@button_gradient_a, 1.10)), 248 to (shade (@button_gradient_b, 1.10))); 249 250 -adwaita-border-gradient: -gtk-gradient (linear, 251 left top, left bottom, 252 from (shade (@button_border_gradient_a, 1.00)), 253 to (shade (@button_border_gradient_b, 1.00))); 254} 255 256GtkScale.slider:insensitive { 257 background-image: none; 258 -adwaita-border-gradient: none; 259} 260 261GtkScale.scale-has-marks-below.slider.horizontal { 262 -adwaita-border-gradient: -gtk-gradient (linear, 263 left top, left bottom, 264 from (shade (@internal_element_color, 0.90)), 265 to (shade (@internal_element_color, 1.35))); 266} 267 268GtkScale.scale-has-marks-below.slider.vertical { 269 -adwaita-border-gradient: -gtk-gradient (linear, 270 left top, right top, 271 from (shade (@internal_element_color, 0.90)), 272 to (shade (@internal_element_color, 1.35))); 273} 274 275GtkScale.scale-has-marks-above.slider.horizontal { 276 -adwaita-border-gradient: -gtk-gradient (linear, 277 left bottom, left top, 278 from (shade (@internal_element_color, 0.90)), 279 to (shade (@internal_element_color, 1.35))); 280} 281 282GtkScale.scale-has-marks-above.slider.vertical { 283 -adwaita-border-gradient: -gtk-gradient (linear, 284 right top, left top, 285 from (shade (@internal_element_color, 0.90)), 286 to (shade (@internal_element_color, 1.35))); 287} 288 289GtkScale.trough { 290 border-width: 1; 291 border-radius: 2; 292 border-style: solid; 293 border-color: @button_border_gradient_a; 294 background-image: -gtk-gradient (linear, 295 left top, left bottom, 296 from (shade (@scrolltrough_gradient_b, 1.00)), 297 to (shade (@scrolltrough_gradient_a, 1.00))); 298} 299 300GtkScale.trough:insensitive { 301 background-color: shade (@theme_bg_color, 1.20); 302 border-color: shade (@inactive_frame_color, 0.845); 303} 304 305GtkScale.trough.horizontal { 306 background-image: -gtk-gradient (linear, 307 left top, left bottom, 308 from (shade (@scrolltrough_gradient_b, 1.00)), 309 to (shade (@scrolltrough_gradient_a, 1.00))); 310} 311 312GtkScale.trough.vertical { 313 background-image: -gtk-gradient (linear, 314 left top, right top, 315 from (shade (@scrolltrough_gradient_b, 1.00)), 316 to (shade (@scrolltrough_gradient_a, 1.00))); 317} 318 319GtkScale.progressbar { 320 background-image: -gtk-gradient (linear, 321 left top, left bottom, 322 from (@scale_fill_a), 323 to (@scale_fill_b)); 324 325 border-color: @progressbar_border; 326 border-width: 1; 327 border-radius: 2; 328 border-style: solid; 329} 330 331GtkScale.mark { 332 background-color: shade (@theme_bg_color, 0.56); 333} 334 335GtkFrame, 336GtkCalendar { 337 padding: 2; 338} 339 340.frame { 341 color: lighter (@theme_fg_color); 342 border-style: none; 343 border-width: 0; 344} 345 346/***************** 347 * Notebooks and * 348 * tabs * 349 *****************/ 350.notebook { 351 padding: 2; 352 353 border-color: @button_border_gradient_a; 354 border-style: solid; 355 border-width: 1; 356 border-radius: 0; 357 358 background-color: @theme_base_color; 359 360 -GtkNotebook-tab-overlap: -2; 361 -GtkNotebook-tab-curvature: 4; 362} 363 364.notebook tab { 365 padding: 3 4 0; 366 /*-adwaita-border-gradient: -gtk-gradient (linear, 367 left top, left bottom, 368 from (shade(@theme_bg_color,0.65)), 369 to (shade(@theme_bg_color,0.65)));*/ 370 background-color: shade(@theme_bg_color,0.85); 371 -adwaita-focus-border-radius: 2; 372} 373 374.notebook tab:active { 375 border-width: 1; 376 377 -adwaita-border-gradient: -gtk-gradient (linear, 378 left top, left bottom, 379 from (@button_border_gradient_a), 380 to (@button_border_gradient_a)); 381 382 -adwaita-selected-tab-color: shade(@theme_bg_color,1.04); 383 background-color: shade(@theme_bg_color,1.04); 384 background-image: none; 385} 386 387.notebook tab .button, 388.notebook tab .button:hover, 389.notebook tab .button:hover:active { 390 border-style: none; 391 background-color: alpha (@theme_bg_color, 0.0); 392 background-image: none; 393} 394 395/************** 396 * ComboBoxes * 397 **************/ 398 399GtkComboBox { 400 padding: 1 2; 401 402 -GtkWidget-focus-padding: 0; 403 -GtkWidget-focus-line-width: 0; 404 405 -GtkComboBox-arrow-scaling: 0.5; 406 -GtkComboBox-shadow-type: 2; 407} 408 409GtkComboBox .button { 410 color: @internal_element_color; 411 padding: 1; 412} 413 414GtkComboBox .button:prelight { 415 color: shade (@internal_element_color, 0.66); 416} 417 418/************** 419 * Scrollbars * 420 **************/ 421 422.scrollbar { 423 background-image: none; 424 border-style: solid; 425 -GtkRange-trough-border: 1; 426 -GtkRange-arrow-scaling: 0.7; 427 -GtkRange-slider-width: 10; 428 -GtkRange-stepper-size: 10; /* Those ugly buttons */ 429 -GtkScrollbar-min-slider-length: 40; /* minimum size for the slider. sadly can't be in '.slider' where it belongs */ 430 431 -GtkRange-stepper-spacing: 0; 432 -GtkRange-trough-under-steppers: 1; 433} 434 435/* Trough */ 436.scrollbar.trough.vertical { 437 background-color: @scrollslider_border; 438 border-width: 0; 439 border-style: none; 440 border-radius: 0; 441} 442 443.scrollbar.trough.horizontal { 444 background-color: @scrollslider_border; 445 border-width: 0; 446 border-style: none; 447 border-radius: 0; 448} 449 450/* Sliders */ 451.scrollbar.slider.vertical { 452 background-color: @scrollslider; 453 border-color: @scrollslider_border; 454 border-radius: 10; 455 border-width: 1; 456 border-style: solid; 457} 458 459.scrollbar.slider.vertical:prelight { 460 background-color: shade (@scrollslider, 0.65); 461 border-color: @scrollslider_border; 462} 463 464.scrollbar.slider.vertical:prelight:active { 465 background-color: shade (@scrollslider, 0.65); 466 border-color: @scrollslider_border; 467} 468 469.scrollbar.slider.horizontal { 470 background-color: @scrollslider; 471 border-color: @scrollslider_border; 472 border-radius: 10; 473 border-width: 1; 474 border-style: solid; 475} 476 477.scrollbar.slider.horizontal:prelight { 478 background-color: shade (@scrollslider, 0.65); 479 border-color: @scrollslider_border; 480} 481 482.scrollbar.slider.horizontal:prelight:active { 483 background-color: shade (@scrollslider, 0.65); 484 border-color: @scrollslider_border; 485} 486 487/* Ugly scrollbar buttons */ 488.scrollbar.button.vertical { 489 background-image: none; 490 background-color: alpha (@scrollslider_border, 0.00); 491 border-color: none; 492 border-radius: 0; 493 border-width: 0; 494 color: @theme_dark_bg_color; 495} 496 497.scrollbar.button.horizontal { 498 background-image: none; 499 background-color: alpha (@scrollslider_border, 0.00); 500 border-color: none; 501 border-radius: 0; 502 border-width: 0; 503 color: @theme_dark_bg_color; 504} 505 506.scrollbar.button.vertical:prelight { 507 background-image: none; 508 background-color: alpha (@scrollslider_border, 0.00); 509 border-color: none; 510 color: @theme_text_color; 511} 512 513.scrollbar.button.vertical:prelight:active { 514 background-image: none; 515 background-color: alpha (@scrollslider_border, 0.00); 516 border-color: none; 517 color: @theme_text_color; 518} 519 520.scrollbar.button.horizontal:prelight { 521 background-image: none; 522 background-color: alpha (@scrollslider_border, 0.00); 523 border-color: none; 524 color: @theme_text_color; 525} 526 527.scrollbar.button.horizontal:prelight:active { 528 background-image: none; 529 background-color: alpha (@scrollslider_border, 0.00); 530 border-color: none; 531 color: @theme_text_color; 532} 533 534.scrollbar.button:insensitive { 535 color: lighter (@internal_element_color); 536 background-image: none; 537 background-color: alpha (@scrollslider_border, 0.00); 538 color: @theme_bg_color; 539} 540 541.scrollbar.slider:insensitive { 542 background-color: @theme_base_color; 543} 544 545.scrollbar.trough:insensitive { 546 background-color: shade (@theme_bg_color, 0.882); 547} 548 549/*********** 550 * Buttons * 551 ***********/ 552.button { 553 padding: 1 4; 554 555 -adwaita-focus-fill-color: alpha (@theme_base_color, 0.35); 556 -adwaita-focus-border-gradient: -gtk-gradient (linear, 557 left top, left bottom, 558 from (alpha (@keyboard_focus_border_a, 0.62)), 559 to (alpha (@keyboard_focus_border_b, 0.62))); 560 -adwaita-focus-border-radius: 1; 561 -adwaita-focus-border-dashes: 0; 562 -GtkWidget-focus-line-width: 1; 563 564 -adwaita-border-gradient: -gtk-gradient (linear, 565 left top, left bottom, 566 from (@button_border_gradient_a), 567 to (@button_border_gradient_b)); 568 569 -GtkButton-child-displacement-x: 1; 570 -GtkButton-child-displacement-y: 1; 571 -GtkButton-image-spacing: 4; 572 -GtkButton-interior-focus: true; 573 -GtkButton-default-border: 0; 574 -GtkButton-inner-border: 0; 575 576 border-radius: 2; 577 border-width: 1; 578 border-color: shade (@button_border_gradient_a, 0.90); 579 border-style: solid; 580 581 /* Adding color stops and border gradients for a tiny 3D effect. I'm still waiting for the box-shadow property. >:( */ 582 background-image: -gtk-gradient (linear, 583 left top, left bottom, 584 from (shade (@button_gradient_a, 1.00)), 585 color-stop (0.04, shade (@button_gradient_a, 1.95)), 586 color-stop (0.05, shade (@button_gradient_a, 1.00)), 587 color-stop (0.89, shade (@button_gradient_b, 1.00)), 588 color-stop (0.90, shade (@button_gradient_b, 0.84)), 589 to (shade (@button_gradient_b, 1.00)); 590} 591 592.button:hover, 593.toolbar.button:hover { 594 border-color: @button_border_gradient_a; 595 background-image: -gtk-gradient (linear, 596 left top, left bottom, 597 from (shade (@button_gradient_a, 1.10)), 598 color-stop (0.04, shade (@button_gradient_a, 1.95)), 599 color-stop (0.05, shade (@button_gradient_a, 1.10)), 600 color-stop (0.89, shade (@button_gradient_b, 1.10)), 601 color-stop (0.90, shade (@button_gradient_b, 0.94)), 602 to (shade (@button_gradient_b, 1.10)); 603} 604 605.button:active, 606.toolbar .button:active, 607.button:hover:active, 608.toolbar.button:hover:active { 609 background-image: -gtk-gradient (linear, 610 left top, left bottom, 611 from (shade (@button_gradient_b, 0.80)), 612 color-stop (0.04, shade (@button_gradient_b, 0.70)), 613 color-stop (0.05, shade (@button_gradient_b, 0.86)), 614 color-stop (0.89, shade (@button_gradient_a, 0.80)), 615 color-stop (0.90, shade (@button_gradient_a, 0.94)), 616 to (shade (@button_gradient_a, 0.80)); 617 border-color: shade (@highlighted_border, 0.70); 618 -adwaita-border-gradient: -gtk-gradient (linear, 619 left top, left bottom, 620 from (shade (@button_border_gradient_b, 1.00)), 621 to (shade (@button_border_gradient_a, 1.00))); 622} 623 624.button:insensitive { 625 background-image: none; 626 background-color: @insensitive_bg_color; 627 color: @insensitive_fg_color; 628} 629 630.button.default { 631 border-width: 2; 632 border-color: shade (@button_border_gradient_a, 1.10); 633} 634 635/********* 636 * Menus * 637 *********/ 638 639/* This controls the general appearance of the menubar. */ 640.menubar { 641 background-image: -gtk-gradient (linear, 642 left top, left bottom, 643 from (@menubar_gradient_a), 644 to (@menubar_gradient_b)); 645 border-width: 0; 646 border-style: none; 647 padding: 2; 648 color: @theme_text_color; 649 650 -GtkWidget-window-dragging: true; 651 -GtkMenuBar-internal-padding: 0; 652} 653 654.menubar.menuitem:prelight { 655 background-image: -gtk-gradient (linear, 656 left top, left bottom, 657 from (shade (@theme_dark_bg_color, 0.70)), 658 to (shade (@theme_dark_bg_color, 0.50))); 659 background-color: shade (@theme_dark_bg_color, 0.7); 660 color: @theme_base_color; 661 border-style: solid; 662 border-radius: 0; 663 border-width: 1; 664 border-color: shade (@theme_dark_bg_color,0.3); 665} 666 667.menubar.menuitem { 668 border-width: 1; 669 border-style: none; 670 padding: 3 3; 671 color: @theme_text_color; 672} 673 674.menu { 675 padding: 0; 676 677 background-color: @theme_dark_bg_color; 678 679 border-style: solid; 680 border-width: 1; 681 border-radius: 0; 682 border-color: shade (@theme_dark_bg_color,0.7); 683 684 -GtkMenuItem-arrow-scaling: 0.5; 685} 686 687.menuitem { 688 -adwaita-menuitem-arrow-color: @menu_controls_color; 689 padding: 1; 690 color: @theme_base_color; 691} 692 693.menuitem.accelerator { 694 color: alpha (@theme_base_color, 0.66); 695} 696 697.menuitem.accelerator:prelight, 698.menuitem.accelerator:active { 699 color: alpha (@theme_base_color, 0.8); 700} 701 702.menuitem:active, 703.menuitem:prelight { 704 background-image: -gtk-gradient (linear, 705 left top, left bottom, 706 from (shade (@theme_dark_bg_color, 0.70)), 707 to (shade (@theme_dark_bg_color, 0.50))); 708 background-color: shade (@theme_dark_bg_color, 0.7); 709 color: @theme_base_color; 710 border-style: solid; 711 border-width: 1; /* Keep at 1. Menu gets bumpy otherwise. */ 712 border-radius: 0; 713 border-color: shade (@theme_dark_bg_color,0.3); 714} 715 716.menu.separator { 717 border-color: alpha (@inactive_frame_color, 0.40); 718 -GtkSeparatorMenuItem-horizontal-padding: 0; 719 -GtkWidget-separator-height: 1; 720} 721 722/* menu radio and check items are drawn differently */ 723.menu.check:active { 724 color: @menu_controls_color; 725} 726 727.menu.radio:active { 728 color: @menu_controls_color; 729} 730 731.menu.check:prelight { 732 color: @theme_selected_fg_color; 733} 734 735.menu.radio:prelight { 736 color: @theme_selected_fg_color; 737} 738 739/************************* 740 * Check and Radio items * 741 *************************/ 742 743/* draw regular check and radio items using our SVG assets */ 744.check, 745.check row:selected, 746.check row:selected:focused { 747 background-image: url ("assets/checkbox-unchecked.svg"); 748} 749 750.check:insensitive, 751.check row:selected:insensitive, 752.check row:selected:focused:insensitive { 753 background-image: url ("assets/checkbox-unchecked-insensitive.svg"); 754} 755 756.check:active, 757.check row:selected:active, 758.check row:selected:focused:active { 759 background-image: url ("assets/checkbox-checked.svg"); 760} 761 762.check:active:insensitive, 763.check row:selected:active:insensitive, 764.check row:selected:focused:active:insensitive { 765 background-image: url ("assets/checkbox-checked-insensitive.svg"); 766} 767 768.check:inconsistent, 769.check row:selected:inconsistent, 770.check row:selected:focused:inconsistent { 771 background-image: url ("assets/checkbox-mixed.svg"); 772} 773 774.radio, 775.radio row:selected, 776.radio row:selected:focused { 777 background-image: url ("assets/radio-unselected.svg"); 778} 779 780.radio:insensitive, 781.radio row:selected:insensitive, 782.radio row:selected:focused:insensitive { 783 background-image: url ("assets/radio-unselected-insensitive.svg"); 784} 785 786.radio:active, 787.radio row:selected:active, 788.radio row:selected:focused:active { 789 background-image: url ("assets/radio-selected.svg"); 790} 791 792.radio:active:insensitive, 793.radio row:selected:active:insensitive, 794.radio row:selected:focused:active:insensitive { 795 background-image: url ("assets/radio-selected-insensitive.svg"); 796} 797 798.radio:inconsistent, 799.radio row:selected:inconsistent, 800.radio row:selected:focused:inconsistent { 801 background-image: url ("assets/radio-mixed.svg"); 802} 803 804/************ 805 * Toolbars * 806 ************/ 807.toolbar { 808 border-style: solid; 809 border-color: darker (@theme_bg_color); 810 border-width: 0; 811 border-radius: 0; 812 padding: 0; 813 background-image: -gtk-gradient (linear, 814 left top, 815 left bottom, 816 from (shade (@theme_bg_color, 1.00)), 817 to (shade (@theme_bg_color, 1.00))); 818} 819 820.toolbar:insensitive { 821 color: alpha (@theme_fg_color, 0.6); 822} 823 824/******************** 825 * Primary Toolbars * 826 ********************/ 827 828/* Color stops can add top and bottom borders if needed */ 829.primary-toolbar.toolbar { 830 background-image: -gtk-gradient (linear, 831 left top, 832 left bottom, 833 from (shade (@toolbar_gradient_a, 1.00)), 834 color-stop (0.97, shade (@toolbar_gradient_b, 1.00)), 835 color-stop (0.98, shade (@toolbar_gradient_b, 0.90)), 836 to (shade (@toolbar_gradient_b, 1.00))); 837 border-width: 0; 838 border-radius: 0; 839 border-style: none; 840 841 padding: -2; 842 843 -GtkWidget-window-dragging: true; 844 -GtkToolbar-button-relief: 0; 845} 846 847.primary-toolbar.toolbar:insensitive { 848 background-image: none; 849 background-color: shade (@theme_bg_color, 0.97); 850 border-style: solid; 851 border-width: 1; 852 border-color: shade (@theme_bg_color, 0.91); 853} 854 855/* primary toolbar buttons */ 856.primary-toolbar.toolbar.button { 857 padding: 0 2; 858 859 border-style: none; 860 border-width: 1; 861 background-image: none; 862 /* This makes that little arrow button in the nautilus toolbar transparent for example */ 863 background-color: alpha (@theme_base_color, 0.0); 864 865 -adwaita-focus-border-radius: 2; 866 -adwaita-focus-fill-color: alpha (@theme_base_color, 0.20); 867 -adwaita-focus-border-gradient: -gtk-gradient (linear, 868 left top, left bottom, 869 from (@button_border_gradient_a), 870 to (shade (@button_border_gradient_b, 1.00))); 871} 872 873.primary-toolbar.toolbar.button:insensitive { 874 border-style: none; 875 background-image: none; 876 background-color: alpha (@theme_base_color, 0.0); 877 -GtkWidget-focus-line-width: 0; 878} 879 880.primary-toolbar.toolbar.button:hover { 881 border-style: none; 882 border-radius: 2; 883 background-image: -gtk-gradient (linear, 884 left top, left bottom, 885 from (alpha (@button_gradient_a, 0.6)), 886 to (alpha (@button_gradient_b, 0.6))); 887} 888 889.primary-toolbar.toolbar.button:active { 890 border-style: solid; 891 border-radius: 2; 892 background-image: -gtk-gradient (linear, 893 left top, left bottom, 894 from (shade (@button_gradient_b, 0.80)), 895 color-stop (0.04, shade (@button_gradient_b, 0.70)), 896 color-stop (0.05, shade (@button_gradient_b, 0.86)), 897 color-stop (0.89, shade (@button_gradient_a, 0.80)), 898 color-stop (0.90, shade (@button_gradient_a, 0.94)), 899 to (shade (@button_gradient_a, 0.80)); 900 -adwaita-border-gradient: -gtk-gradient (linear, 901 left top, left bottom, 902 from (shade (@button_border_gradient_b, 1.00)), 903 to (shade (@button_border_gradient_a, 1.00))); 904 905 color: @theme_fg_color; 906} 907 908.primary-toolbar.toolbar.button:active:prelight { 909 border-style: solid; 910 border-radius: 2; 911 background-image: -gtk-gradient (linear, 912 left top, left bottom, 913 from (shade (@button_gradient_b, 0.90)), 914 color-stop (0.04, shade (@button_gradient_b, 0.80)), 915 color-stop (0.05, shade (@button_gradient_b, 0.90)), 916 color-stop (0.89, shade (@button_gradient_a, 0.90)), 917 color-stop (0.90, shade (@button_gradient_a, 1.10)), 918 to (shade (@button_gradient_a, 0.90)); 919 -adwaita-border-gradient: -gtk-gradient (linear, 920 left top, left bottom, 921 from (shade (@button_border_gradient_b, 1.00)), 922 to (shade (@button_border_gradient_a, 1.00))); 923 924 color: @theme_fg_color; 925} 926 927.primary-toolbar.toolbar.button:active:insensitive { 928 border-style: solid; 929 border-radius: 2; 930 border-color: @inactive_frame_color; 931 -adwaita-border-gradient: none; 932} 933 934/* Set width to 0 to disable toolbar separators */ 935.primary-toolbar.toolbar GtkSeparatorToolItem { 936 -GtkWidget-wide-separators: 1; 937 -GtkWidget-separator-width: 0; 938 939 border-style: solid; 940 border-width: 1; 941 border-color: shade (@theme_bg_color, 0.56); 942} 943 944/* primary toolbar raised buttons */ 945.primary-toolbar.toolbar.raised.button, 946.primary-toolbar.toolbar.raised.button:insensitive { 947 border-radius: 2; 948 border-width: 1; 949 border-color: @button_border_gradient_a; 950 border-style: solid; 951 952 background-image: -gtk-gradient (linear, 953 left top, left bottom, 954 from (@button_gradient_a), 955 to (@button_gradient_b)); 956 957 -adwaita-border-gradient: -gtk-gradient (linear, 958 left top, left bottom, 959 from (shade (@button_border_gradient_a, 1.00)), 960 to (shade (@button_border_gradient_b, 1.00))); 961 962 -GtkWidget-focus-line-width: 1; 963} 964 965.primary-toolbar.toolbar.raised.button:hover { 966 border-color: @button_border_gradient_a; 967 background-image: -gtk-gradient (linear, 968 left top, left bottom, 969 from (shade (@button_gradient_a, 1.10)), 970 to (shade (@button_gradient_a, 1.10)); 971 border-width: 1; 972 border-style: solid; 973} 974 975.primary-toolbar.toolbar.raised.button:hover:active, 976.primary-toolbar.toolbar.raised.button:active { 977 background-image: -gtk-gradient (linear, 978 left top, left bottom, 979 from (@toolbar_gradient_a), 980 to (@toolbar_gradient_b)); 981 background-color: @theme_base_color; 982 983 border-color: @highlighted_border; 984 border-width: 1; 985 border-style: solid; 986} 987 988/* progressbars on primary toolbar entries are special */ 989.primary-toolbar.toolbar.entry.progressbar { 990 /* FIXME: need correct colors/gradient */ 991 background-image: -gtk-gradient (linear, 992 left top, left bottom, 993 from (@scrolltrough_gradient_a), 994 to (@scrolltrough_gradient_b)); 995 996 border-width: 0; 997 border-radius: 2; 998 border-color: shade (@inactive_frame_color, 0.925); 999} 1000 1001/******************* 1002 * Inline toolbars * 1003 *******************/ 1004 1005.inline-toolbar.toolbar { 1006 border-width: 1; 1007 border-radius: 2; 1008 border-style: solid; 1009 1010 background-image: -gtk-gradient (linear, 1011 left top, 1012 left bottom, 1013 from (@toolbar_gradient_a), 1014 color-stop (0.16, @toolbar_gradient_a), 1015 color-stop (0.90, @toolbar_gradient_a), 1016 color-stop (0.98, @toolbar_gradient_b), 1017 color-stop (0.99, shade (@toolbar_gradient_b, 0.83)), 1018 to (shade (@toolbar_gradient_b, 0.83))); 1019} 1020 1021/************* 1022 * GtkSwitch * 1023 *************/ 1024 1025GtkSwitch { 1026 font: bold condensed 10; 1027} 1028 1029GtkSwitch.trough { 1030 color: @internal_element_color; 1031 border-radius: 1; 1032 border-width: 1; 1033 border-style: solid; 1034 border-color: shade (@frame_color, 1.00); 1035 background-image: -gtk-gradient (linear, 1036 left top, left bottom, 1037 from (@scrolltrough_gradient_b), 1038 to (@scrolltrough_gradient_a)); 1039} 1040 1041GtkSwitch.trough:active { 1042 color: @theme_base_color; 1043 -adwaita-border-gradient: -gtk-gradient (linear, 1044 left top, left bottom, 1045 from (shade (@theme_selected_bg_color, 0.70)), 1046 to (shade (@theme_selected_bg_color, 0.94))); 1047 background-image: -gtk-gradient (linear, 1048 left top, left bottom, 1049 from (shade (@theme_selected_bg_color, 0.70)), 1050 to (shade (@theme_selected_bg_color, 0.94))); 1051} 1052 1053GtkSwitch.trough:insensitive { 1054 background-image: none; 1055 background-color: shade (@theme_bg_color, 0.96); 1056 border-color: shade (@inactive_frame_color, 1.00); 1057 -adwaita-border-gradient: none; 1058} 1059 1060GtkSwitch.slider { 1061 border-width: 1; 1062 border-radius: 1; 1063 border-color: shade (@frame_color, 1.0); 1064 border-style: solid; 1065 padding: 2; 1066 background-image: -gtk-gradient (linear, 1067 left top, left bottom, 1068 from (@button_gradient_a), 1069 color-stop (0.02, shade (@button_gradient_a, 1.90)), 1070 color-stop (0.03, @button_gradient_a), 1071 color-stop (0.85, @button_gradient_b), 1072 color-stop (0.86, shade (@button_gradient_b, 0.90)), 1073 to (shade (@button_gradient_b, 1.00))); 1074 1075 -adwaita-switch-grip-color: shade (@button_gradient_b, 0.90); 1076} 1077 1078GtkSwitch.slider:active { 1079 border-color: shade (@theme_selected_bg_color, 0.60); 1080} 1081 1082GtkSwitch.slider:insensitive { 1083 border-style: none; 1084 background-image: none; 1085 background-color: @insensitive_bg_color; 1086} 1087 1088GtkStatusbar { 1089 padding: 5; 1090 color: @theme_fg_color; 1091 -GtkStatusbar-shadow-type: none; 1092} 1093 1094GtkScrolledWindow.frame { 1095 border-style: solid; 1096 border-color: darker (@theme_bg_color); 1097 border-width: 1; 1098 border-radius: 0; 1099} 1100 1101GtkViewport, 1102GtkIconView { 1103 border-radius: 2; 1104 padding: 0; 1105} 1106 1107GtkIconView.view.cell:selected, 1108GtkIconView.view.cell:selected:focused { 1109 background-color: @theme_selected_bg_color; 1110 border-radius: 2; 1111 1112 /* FIXME: this probably needs to be better; 1113 * see https://bugzilla.gnome.org/show_bug.cgi?id=644157 1114 */ 1115 -adwaita-focus-border-color: @progressbar_border; 1116 -adwaita-focus-border-radius: 2; 1117 -adwaita-focus-border-dashes: 0; 1118} 1119 1120.view { 1121 background-color: @theme_base_color; 1122 color: @theme_fg_color; 1123 border-radius: 0; 1124 border-width: 3; 1125} 1126 1127GtkTreeView { 1128 -GtkTreeView-vertical-separator: 0; 1129 -GtkTreeView-expander-size: 6; 1130 1131 -GtkWidget-focus-line-width: 1; 1132 -adwaita-focus-border-radius: 0; 1133 -adwaita-focus-border-dashes: 0; 1134 -adwaita-focus-border-color: @keyboard_focus_border_a; 1135} 1136 1137GtkTreeView.separator { 1138 background-color: darker (@theme_bg_color); 1139} 1140 1141/* Treeview header */ 1142column-header { 1143 padding: 1 2; 1144} 1145 1146column-header .button { 1147 border-width: 0; 1148 border-radius: 0; 1149 background-image: -gtk-gradient (linear, 1150 left top, left bottom, 1151 from (shade (@listview_header_gradient_a,1.00)), 1152 color-stop (0.96, shade (@listview_header_gradient_b, 1.00)), 1153 color-stop (0.97, shade (@listview_header_gradient_b, 0.96)), 1154 to (shade (@listview_header_gradient_b,1.00))); 1155 padding: 1 2; 1156} 1157 1158column-header .button:prelight { 1159 background-image: -gtk-gradient (linear, 1160 left top, left bottom, 1161 from (shade (@listview_header_gradient_a,1.10)), 1162 color-stop (0.96, shade (@listview_header_gradient_b, 1.10)), 1163 color-stop (0.97, shade (@listview_header_gradient_b, 0.96)), 1164 to (shade (@listview_header_gradient_b,1.10))); 1165} 1166 1167row:hover { 1168 border-width: 0; 1169} 1170 1171row:insensitive { 1172 border-width: 0; 1173} 1174 1175row:selected:focused { 1176 border-width: 0; 1177 background-image: -gtk-gradient (linear, 1178 left top, left bottom, 1179 from (shade (@theme_selected_bg_color, 1.00)), 1180 color-stop (0.04, shade (@theme_selected_bg_color, 0.80)), 1181 color-stop (0.05, shade (@theme_selected_bg_color, 1.00)), 1182 to (shade (@theme_selected_bg_color, 0.90))); 1183 background-color: @theme_selected_bg_color; 1184} 1185 1186row:selected { 1187 border-width: 0; 1188 background-image: -gtk-gradient (linear, 1189 left top, left bottom, 1190 from (shade (@theme_selected_bg_color, 1.00)), 1191 color-stop (0.04, shade (@theme_selected_bg_color, 0.80)), 1192 color-stop (0.05, shade (@theme_selected_bg_color, 1.00)), 1193 to (shade (@theme_selected_bg_color, 0.90))); 1194} 1195 1196.cell { 1197 color: @theme_text_color; 1198 padding: 2; 1199 border-width: 0; 1200} 1201 1202.cell:selected { 1203 background-color: @theme_selected_bg_color; 1204} 1205 1206.expander { 1207 color: @internal_element_color; 1208 border-color: @internal_element_color; 1209 1210 background-color: @theme_base_color; 1211} 1212 1213.expander:active { 1214 color: @internal_element_color; 1215 border-color: @internal_element_color; 1216 1217 background-color: @theme_base_color; 1218} 1219 1220.expander:prelight { 1221 color: @internal_element_color; 1222 border-color: @internal_element_color; 1223 1224 background-color: shade (@theme_bg_color, 1.02); 1225} 1226 1227.expander row:selected, 1228.expander row:selected:focused { 1229 border-color: @theme_selected_bg_color; 1230 color: shade (@theme_selected_bg_color, 1.30); 1231 background-color: @theme_selected_bg_color; 1232} 1233 1234/* Calendars */ 1235GtkCalendar.view { 1236 border-radius: 2; 1237 border-style: solid; 1238 border-width: 1; 1239 padding: 2; 1240} 1241 1242GtkCalendar.header { 1243 border-radius: 0; 1244 background-image: -gtk-gradient (linear, 1245 left top, 1246 left bottom, 1247 from (shade (@theme_bg_color, 1.04)), 1248 to (shade (@theme_bg_color, 0.89))); 1249 border-width: 0; 1250} 1251 1252GtkCalendar.button { 1253 background-image: -gtk-gradient (linear, 1254 left top, 1255 left bottom, 1256 from (rgba (0, 0, 0, 0)), 1257 to (rgba (0, 0, 0, 0))); 1258} 1259 1260.highlight, 1261GtkCalendar.highlight { 1262 background-color: @theme_selected_bg_color; 1263 color: @theme_selected_fg_color; 1264 border-radius: 0; 1265 padding: 0; 1266 border-width: 0; 1267} 1268 1269.info { 1270 background-color: @info_bg_color; 1271 color: @info_fg_color; 1272} 1273 1274.warning { 1275 background-color: @warning_bg_color; 1276 color: @warning_fg_color; 1277} 1278 1279.question { 1280 background-color: @question_bg_color; 1281 color: @question_fg_color; 1282} 1283 1284.error { 1285 background-color: @error_bg_color; 1286 color: @error_fg_color; 1287} 1288 1289.dim-label { 1290 color: mix (@theme_fg_color, @theme_bg_color, 0.50); 1291} 1292 1293.sidebar, 1294.sidebar.view { 1295 background-color: shade (@sidebar_color, 0.99); 1296 background-image: -gtk-gradient (linear, 1297 left top, right top, 1298 from (shade (@sidebar_color,1.00)), 1299 color-stop (0.98, shade (@sidebar_color, 1.00)), 1300 color-stop (0.99, shade (@sidebar_color, 1.00)), 1301 color-stop (1.00, shade (@sidebar_color, 0.86)), 1302 to (shade (@sidebar_color,1.00))); 1303} 1304 1305ApDocView, /* Abiword */ 1306EogScrollView, /* Eog */ 1307CheeseThumbView /* Cheese */ 1308{ 1309 background-color: @chrome_bg_color; 1310 -EogScrollView-shadow-type: none; 1311} 1312 1313/* gnome-terminal */ 1314TerminalScreen { 1315 background-color: @theme_base_color; 1316 color: @theme_fg_color; 1317 -TerminalScreen-background-darkness: 0.95; 1318} 1319 1320/********************** 1321 * Fallback Mode Panel 1322 **********************/ 1323 1324PanelWidget, 1325PanelApplet, 1326PanelApplet > GtkMenuBar.menubar, 1327.gnome-panel-menu-bar, 1328/* PanelAppletFrame, */ 1329PanelMenuBar.menubar, 1330Panel, 1331WnckletFactory, 1332PanelToplevel { 1333 /* Warning: Don't add any transparency here. It's really buggy and will make the panel unable to start. */ 1334 /* Warning 2: Don't add any global transition effects in your theme. The panel applets will crash if you combine it with alpha buttons. */ 1335 /* Warning 3: Adding alpha anywhere here may cause random crashes somehow. */ 1336 background-color: @os_chrome_bg_color; 1337 color: @os_chrome_fg_color; 1338 background-image: -gtk-gradient (linear, 1339 left top, left bottom, 1340 from (shade (@theme_bg_color, 0.30)), 1341 to (shade (@theme_bg_color, 0.20)); 1342} 1343 1344/* Removes the ugly handles. Yes, they're that ugly! :P */ 1345PanelAppletFrame { background-color: alpha (@theme_base_color, 0.0); } 1346 1347ClockBox, 1348.gnome-panel-menu-bar { 1349 font: bold; 1350} 1351 1352PanelApplet > GtkMenuBar.menubar.menuitem:prelight, 1353.gnome-panel-menu-bar.menuitem:prelight { 1354 background-color: @os_chrome_selected_bg_color; 1355 color: @os_chrome_selected_fg_color; 1356 border-color: lighter (@os_chrome_selected_bg_color); 1357 background-image: -gtk-gradient (linear, 1358 left top, left bottom, 1359 from (shade (@theme_bg_color, 0.40)), 1360 to (shade (@theme_bg_color, 0.30)); 1361} 1362 1363/* panel buttons (clock, tasklist etc) */ 1364PanelApplet GtkToggleButton { 1365 /* Putting 'none' on these backgrounds may cause the applets to crash in combination with 'Warning 2' above */ 1366 background-color: @os_chrome_bg_color; 1367 background-image: -gtk-gradient (linear, 1368 left top, left bottom, 1369 from (shade (@theme_bg_color, 0.30)), 1370 to (shade (@theme_bg_color, 0.20)); 1371 border-color: @os_chrome_bg_color; 1372 border-width: 0; 1373 border-radius: 0; 1374 color: @os_chrome_fg_color; 1375} 1376 1377/* Adding alpha here is risky and buggy. It may work or not work depending on several combinations. */ 1378PanelApplet GtkToggleButton:active { 1379 background-color: @os_chrome_selected_bg_color; 1380 background-image: -gtk-gradient (linear, 1381 left top, left bottom, 1382 from (alpha (shade (@theme_bg_color, 0.30), 0.20)), 1383 to (alpha (shade (@theme_bg_color, 0.20), 0.80)); 1384 border-color: lighter (@os_chrome_selected_bg_color); 1385 border-width: 0; 1386 color: @os_chrome_selected_fg_color; 1387} 1388 1389PanelApplet GtkToggleButton:prelight:active, 1390PanelApplet GtkToggleButton:prelight { 1391 background-color: @os_chrome_bg_color; 1392 background-image: -gtk-gradient (linear, 1393 left top, left bottom, 1394 from (alpha (shade (@theme_bg_color, 1.20), 0.30)), 1395 to (alpha (shade (@theme_bg_color, 1.20), 0.20)); 1396 border-color: @os_chrome_bg_color; 1397 border-width: 0; 1398 color: @os_chrome_selected_fg_color; 1399} 1400 1401NaTrayApplet { 1402 -NaTrayApplet-icon-padding: 12; 1403 -NaTrayApplet-icon-size: 16; 1404} 1405 1406WnckPager, WnckTasklist { 1407 background-color: @os_chrome_selected_bg_color; 1408 background-image: -gtk-gradient (linear,left top, left bottom,from (shade (@theme_bg_color, 0.40)),to (shade (@theme_bg_color, 0.30)); 1409 color: @os_chrome_fg_color; 1410} 1411 1412GsmFailWhaleDialog, 1413GsmFailWhaleDialog * { 1414 background-color: @os_chrome_bg_color; 1415 background-image: none; 1416 color: @os_chrome_fg_color; 1417}