path: root/gtk/theme/win32/gtk.css

@import url("gtk-win32-base.css");

/* Menus */

menubar {
    background-color: transparent;
    border-width: 0;
    background-image: -gtk-win32-theme-part(menu, 7, 1);
}

menubar > menuitem {
    background-color: transparent;
    border-width: 0;
    background-image: -gtk-win32-theme-part(menu, 8, 1);
}

menubar > menuitem:hover {
    background-image: -gtk-win32-theme-part(menu, 8, 3);
}

menuitem:hover {
    background-image: -gtk-win32-theme-part(menu, 14, 2);
}

menuitem:hover:disabled {
    background-image: -gtk-win32-theme-part(menu, 14, 4);
}

menuitem radio,
menuitem radio:hover,
menuitem radio:disabled {
    background-color: transparent;
    background-image: none;
    border-width: 0;
}

menuitem radio:active, 
menuitem radio:active:hover {
    background-image: -gtk-win32-theme-part(menu, 11, 3);
    border-width: 0;
}

menuitem radio:indeterminate,
menuitem radio:indeterminate:disabled,
menuitem radio:indeterminate:hover,
menuitem radio:indeterminate:active,
menuitem radio:indeterminate:active:hover {
    background-image: none; /* Fall back to default, this state is not in win32 */
    border-width: 0;
}

menuitem radio:disabled:active,
menuitem radio:disabled:active:hover {
    background-image: -gtk-win32-theme-part(menu, 11, 4);
    border-width: 0;
}

menuitem check,
menuitem check:hover,
menuitem check:disabled {
    background-image: none;
    border-width: 0;
}

menuitem check:active, 
menuitem check:active:hover {
    background-image: -gtk-win32-theme-part(menu, 11, 1);
    border-width: 0;
}

menuitem check:indeterminate,
menuitem check:indeterminate:disabled,
menuitem check:indeterminate:hover,
menuitem check:indeterminate:active,
menuitem check:indeterminate:active:hover {
    background-image: none; /* Fall back to default, this state is not in win32 */
    border-width: 0;
}

menuitem check:disabled:active,
menuitem check:disabled:active:hover{
    background-image: -gtk-win32-theme-part(menu, 11, 2);
    border-width: 0;
}

/* Notebook */
notebook {
    /* This prevents a thin half-transparent line between the pane and the tab */
    background-color: -gtk-win32-color(tab, window);

    border-width: 1px 1px 1px 1px;
    border-style: solid;
    background-origin: padding-box;
    background-clip: border-box;

    /* W32 theme draws it with borders and all, cut them away */
    background-image: -gtk-win32-theme-part(tab, 9, 1, margins(-1 -3 -2 -1));

    /* Grab the borders now and duplicate them across the perimeter */
    border-image: -gtk-win32-theme-part(tab, 9, 1, margins(0 -2 -1 0)) 1 1 1 1 repeat;
    /* MSW7 themes draw tab overlaps differently. Net result is:
       * inactive tab text never moves no matter which tabs get to be active
       * active tab text moves only up
       * active tab steals space from its neighbors (overlapping their borders without moving them)
       * inactive tab does not steal any space from its neighbors (prelight makes that obvious - one tab's borders light up, its neighbors' don't change)
       * first(last in RTL?) tab has extra gap that disappears (due to overlapping) when this tab activates
       This can't be emulated in GTK, so we won't even try.
    */
}

notebook tab {
    /* Make sure parts not covered by the background are transparent */
    background-color: transparent;

    /* Use GTK border, since we can control where it's drawn (unlike built-in theme border, which is always left-top-right) */
    border-width: 1px;
    border-style: solid;
    border-color: rgb(137, 140, 149);

    /* Sadly, GTK CSS can't rotate images, which means that we can't use tabs from the theme */
    background-image: none;
    /* Don't use border image either, since it has no bottom border */
    border-image: none;

    /* By default tabs are large enough for their labels, give them more space */
    padding: 2px;
}

/* W32 has no concept ofnotebook header (the rectangle where tabs are - including the area where tabs could be, if you add more of them), make it disappear */
notebook.header {
  background-color: transparent;
  background-image: none;
  border-width: 0px;
  border-color: transparent;
}

/* Draw everything ourselves. Default MSW7 theme for a top tab (the only kind of tab available) is:
 1-px grey border
 extra 1-px inside white borders to the left and the right
 top 8 pixels of the tab are light grey gradient (from 95% to 92% here)
 rest of the tab is dark grey gradient (quick 3-pixel fall from 87% to 85%, then uniform until half the way, then drops to 84%, last 4 pixels fall down to 81%)

 Prelight tab is the same as normal, but with light blue instead of grey.
 Active tabs (prelight ot not) are simple white.
 Disabled tabs are simple dark grey.
 There's also theme part for "focused" tab (simple pale blue), but it is unclear in which circumstances it's used.

 Normal and selected tab borders are grey.
 Prelight tab borders are blue.
 Disabled tab borders are darker grey.
 */
notebook tab.top {
    background-image: -gtk-gradient (linear,
               0 0, 0 1,
               color-stop(0, rgb(242, 242, 242)),
               color-stop(0.2, rgb(235, 235, 235)),
               color-stop(0.21, rgb(221, 221, 221)),
               color-stop(0.22, rgb(216, 216, 216)),
               color-stop(0.6, rgb(214, 214, 214)),
               color-stop(0.9, rgb(214, 214, 214)),
               color-stop(1, rgb(207, 207, 207)));
    box-shadow: inset -1px 0px 0px white, inset 1px 0px 0px white;
    /* Tab border is 1px (see above), override bottom border (for top tabs) to be 0px */
    border-bottom: 0px;
}

notebook tab.top:hover {
    background-image: -gtk-gradient (linear,
               0 0, 0 1,
               color-stop(0, rgb(234, 246, 253)),
               color-stop(0.2, rgb(217, 240, 252)),
               color-stop(0.21, rgb(190, 230, 253)),
               color-stop(0.22, rgb(181, 226, 250)),
               color-stop(0.6, rgb(178, 224, 249)),
               color-stop(0.9, rgb(175, 222, 248)),
               color-stop(1, rgb(167, 217, 245)));
}

notebook tab.left {
    background-image: -gtk-gradient (linear,
               0 0, 1 0,
               color-stop(0, rgb(242, 242, 242)),
               color-stop(0.2, rgb(235, 235, 235)),
               color-stop(0.21, rgb(221, 221, 221)),
               color-stop(0.22, rgb(216, 216, 216)),
               color-stop(0.6, rgb(214, 214, 214)),
               color-stop(0.9, rgb(214, 214, 214)),
               color-stop(1, rgb(207, 207, 207)));

    box-shadow: inset 0px -1px 0px white, inset 0px 1px 0px white;
    /* Tab border is 1px (see above), override right border (for left tabs) to be 0px */
    border-right: 0px;
}

notebook tab.left:hover {
    background-image: -gtk-gradient (linear,
               0 0, 1 0,
               color-stop(0, rgb(234, 246, 253)),
               color-stop(0.2, rgb(217, 240, 252)),
               color-stop(0.21, rgb(190, 230, 253)),
               color-stop(0.22, rgb(181, 226, 250)),
               color-stop(0.6, rgb(178, 224, 249)),
               color-stop(0.9, rgb(175, 222, 248)),
               color-stop(1, rgb(167, 217, 245)));
}

notebook tab.right {
    background-image: -gtk-gradient (linear,
               1 0, 0 0,
               color-stop(0, rgb(242, 242, 242)),
               color-stop(0.2, rgb(235, 235, 235)),
               color-stop(0.21, rgb(221, 221, 221)),
               color-stop(0.22, rgb(216, 216, 216)),
               color-stop(0.6, rgb(214, 214, 214)),
               color-stop(0.9, rgb(214, 214, 214)),
               color-stop(1, rgb(207, 207, 207)));

    box-shadow: inset 0px 1px 0px white, inset 0px -1px 0px white;
    /* Tab border is 1px (see above), override left border (for right tabs) to be 0px */
    border-left: 0px;
}

notebook tab.right:hover {
    background-image: -gtk-gradient (linear,
               1 0, 0 0,
               color-stop(0, rgb(234, 246, 253)),
               color-stop(0.2, rgb(217, 240, 252)),
               color-stop(0.21, rgb(190, 230, 253)),
               color-stop(0.22, rgb(181, 226, 250)),
               color-stop(0.6, rgb(178, 224, 249)),
               color-stop(0.9, rgb(175, 222, 248)),
               color-stop(1, rgb(167, 217, 245)));
}

notebook tab.bottom {
    background-image: -gtk-gradient (linear,
               0 1, 0 0,
               color-stop(0, rgb(242, 242, 242)),
               color-stop(0.2, rgb(235, 235, 235)),
               color-stop(0.21, rgb(221, 221, 221)),
               color-stop(0.22, rgb(216, 216, 216)),
               color-stop(0.6, rgb(214, 214, 214)),
               color-stop(0.9, rgb(214, 214, 214)),
               color-stop(1, rgb(207, 207, 207)));
    box-shadow: inset -1px 0px 0px white, inset 1px 0px 0px white;
    /* Tab border is 1px (see above), override top border (for bottom tabs) to be 0px */
    border-top: 0px;
}

notebook tab.bottom:hover {
    background-image: -gtk-gradient (linear,
               0 1, 0 0,
               color-stop(0, rgb(234, 246, 253)),
               color-stop(0.2, rgb(217, 240, 252)),
               color-stop(0.21, rgb(190, 230, 253)),
               color-stop(0.22, rgb(181, 226, 250)),
               color-stop(0.6, rgb(178, 224, 249)),
               color-stop(0.9, rgb(175, 222, 248)),
               color-stop(1, rgb(167, 217, 245)));
}

notebook tab:active,
notebook tab:active:hover,
notebook tab.right:active,
notebook tab.right:active:hover,
notebook tab.bottom:active,
notebook tab.bottom:active:hover,
notebook tab.left:active,
notebook tab.left:active:hover
{
    /* active tabs are pure white with grey borders, and prelight changes nothing */
    background-image: none;
    background-color: white;
    border-color: rgb(137, 140, 149);
}

notebook tab:disabled,
notebook tab:disabled,
notebook tab.right:disabled,
notebook tab.bottom:disabled,
notebook tab.left:disabled
{
    /* insensitive tabs are dark grey white with even darker grey borders */
    background-image: none;
    background-color: rgb(201, 202, 203);
    border-color: rgb(128, 128, 128);
}

notebook tab:hover,
notebook tab.right:hover,
notebook tab.bottom:hover,
notebook tab.left:hover
{
    /* prelight tabs have blue borders */
    border-color: rgb(60, 127, 177);
}


notebook tab.top:active {
    /* Make active tab "stick out" up by padding it more at the bottom */
    padding-bottom: 4px;
}

notebook tab.right:active {
    /* Make active tab "stick out" right by padding it more at the left */
    padding-left: 4px;
}

notebook tab.bottom:active {
    /* Make active tab "stick out" down by padding it more at the top */
    padding-top: 4px;
}

notebook tab.left:active {
    /* Make active tab "stick out" left by padding it more at the right */
    padding-right: 4px;
}


/* Listbox */

/* We're cheating here, using part 6 (listview header group),
   because part 1 (listview item) is empty for some reason */
row:hover {
  background-image: -gtk-win32-theme-part(listview, 6, 10);
}

row:selected {
  background-color: transparent;
  /* Override *:selected {} blanket style, keeping the background - bright
     and the text - dark */
  color: @text_color;
  background-image: -gtk-win32-theme-part(listview, 6, 13);
}

row:selected:focus {
  background-image: -gtk-win32-theme-part(listview, 6, 11);
}

row:selected:hover {
  background-image: -gtk-win32-theme-part(listview, 6, 12);
}

/* Titlebar */

decoration {
  padding: calc(-gtk-win32-size(window, cyframe) + -gtk-win32-size(window, cxpaddedborder))
           calc(-gtk-win32-size(window, cxframe) + -gtk-win32-size(window, cxpaddedborder));
  background-image: -gtk-win32-theme-part(window, 1, 1),
                    -gtk-win32-theme-part(window, 9, 1),
                    -gtk-win32-theme-part(window, 7, 1),
                    -gtk-win32-theme-part(window, 8, 1);
  background-size: 100% -gtk-win32-size(window, cycaption),
                   100% calc(-gtk-win32-size(window, cyframe) + -gtk-win32-size(window, cxpaddedborder)),
                   calc(-gtk-win32-size(window, cxframe) + -gtk-win32-size(window, cxpaddedborder)) calc(100% - 2 * (-gtk-win32-size(window, cyframe) + -gtk-win32-size(window, cxpaddedborder))),
                   calc(-gtk-win32-size(window, cxframe) + -gtk-win32-size(window, cxpaddedborder)) calc(100% - 2 * (-gtk-win32-size(window, cyframe) + -gtk-win32-size(window, cxpaddedborder)));
  background-position: top, bottom, left, right;
  background-repeat: no-repeat;
}
.titlebar { 
  margin: calc(0px - -gtk-win32-size(window, cyframe) - -gtk-win32-size(window, cxpaddedborder))
          calc(0px - -gtk-win32-size(window, cxframe) - -gtk-win32-size(window, cxpaddedborder));
  margin-bottom: 0px;
  padding: calc(-gtk-win32-size(window, cyframe) + -gtk-win32-size(window, cxpaddedborder))
           calc(-gtk-win32-size(window, cxframe) + -gtk-win32-size(window, cxpaddedborder));
  padding-bottom: 0px;
  background: -gtk-win32-theme-part(window, 1, 1);
  min-height: calc(-gtk-win32-size(window, cycaption) - -gtk-win32-size(window, cyframe) - -gtk-win32-size(window, cxpaddedborder));
}

decoration:backdrop {
  background-image: -gtk-win32-theme-part(window, 1, 2),
                    -gtk-win32-theme-part(window, 9, 2),
                    -gtk-win32-theme-part(window, 7, 2),
                    -gtk-win32-theme-part(window, 8, 2);
}
.titlebar:backdrop {
    background: -gtk-win32-theme-part(window, 1, 2);
}

decoration:disabled {
  background-image: -gtk-win32-theme-part(window, 1, 3),
                    -gtk-win32-theme-part(window, 9, 3),
                    -gtk-win32-theme-part(window, 7, 3),
                    -gtk-win32-theme-part(window, 8, 3);
}
.titlebar:disabled {
    background: -gtk-win32-theme-part(window, 1, 3);
}

.titlebar button.titlebutton {
    margin-top: -gtk-win32-size(button, cyedge);
    margin-bottom: -gtk-win32-size(button, cyedge);
    margin-right: -gtk-win32-size(button, cxedge);
    min-width: calc(-gtk-win32-size(button, cxsize) - 2 * -gtk-win32-size(button, cxedge));
    min-height: calc(-gtk-win32-size(button, cysize) - 2 * -gtk-win32-size(button, cyedge));
    background-repeat: no-repeat;
    background-size: 100% calc(-gtk-win32-size(button, cysize) - 2 * -gtk-win32-size(button, cyedge));
    background-position: 50% calc(100% - -gtk-win32-size(window, cycaption) + -gtk-win32-size(window, cysize) - -gtk-win32-size(window, cyedge));
}

/* XXX: headerbar insists on 6px spacing between buttons. Windows doesn't
 * think so. */
.titlebar .titlebutton + .titlebutton {
  margin-left: -6px;
}

/* XXX: We don't draw icons here, but the GtkImage still sizes itself to 16x16,
 * so shrink it enough: */
.titlebar button.titlebutton image {
  margin: -3px;
}

.titlebar button.close {
    background-image: -gtk-win32-theme-part(window, 18, 1);
    color: transparent;
}

.titlebar button.close:hover {
    background-image: -gtk-win32-theme-part(window, 18, 2);
}

.titlebar button.close:active {
    background-image: -gtk-win32-theme-part(window, 18, 3);
}

.titlebar button.close:disabled {
    background-image: -gtk-win32-theme-part(window, 18, 4);
}

.titlebar button.minimize {
    background-image: -gtk-win32-theme-part(window, 15, 1);
    color: transparent;
}

.titlebar button.minimize:hover {
    background-image: -gtk-win32-theme-part(window, 15, 2);
}

.titlebar button.minimize:active {
    background-image: -gtk-win32-theme-part(window, 15, 3);
}

.titlebar button.minimize:disabled {
    background-image: -gtk-win32-theme-part(window, 15, 4);
}

.titlebar button.maximize {
    background-image: -gtk-win32-theme-part(window, 17, 1);
    color: transparent;
}

.titlebar button.maximize:hover {
    background-image: -gtk-win32-theme-part(window, 17, 2);
}

.titlebar button.maximize:active {
    background-image: -gtk-win32-theme-part(window, 17, 3);
}

.titlebar button.maximize:disabled {
    background-image: -gtk-win32-theme-part(window, 17, 4);
}

.maximized .titlebar button.maximize {
    background-image: -gtk-win32-theme-part(window, 21, 1);
}

.maximized .titlebar button.maximize:hover {
    background-image: -gtk-win32-theme-part(window, 21, 2);
}

.maximized .titlebar button.maximize:active {
    background-image: -gtk-win32-theme-part(window, 21, 3);
}

.maximized .titlebar button.maximize:disabled {
    background-image: -gtk-win32-theme-part(window, 21, 4);
}