PageRenderTime 145ms CodeModel.GetById 2ms app.highlight 135ms RepoModel.GetById 2ms app.codeStats 0ms

/gtk-3.0/gtk-widgets.css

http://github.com/daz4126/Blackbird
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}