/*********** * Buttons * ***********/ /* Contributor notes: Please use two space indentions. Stack all related and child selectors and selector states into a logical hierarchy to a readable degree. Make sure that all changes made here are part of the GtkButton. */ /* Basic buttons */ button { min-height: 14px; min-width: 14px; padding: 2px; border: 1px solid; border-radius: 0px; transition: none; color: @button_text_color; outline-color: @outline_color; border-top-color: @border_bright; border-right-color: @border_dark; border-left-color: @border_bright; border-bottom-color: @border_dark; background-color: @button_bg_color; box-shadow: inset -1px -1px @border_shade, inset 1px 1px @border_light; } button:hover { -gtk-icon-effect: highlight; } button:active, button:checked, button:disabled:active, button:disabled:checked { border-top-color: @border_dark; border-right-color: @border_bright; border-left-color: @border_dark; border-bottom-color: @border_bright; box-shadow: inset 1px 1px @border_shade; } /* Sidebar buttons */ button.sidebar-button { color: @text_color_light; border-top: 1px solid @border_color; border-left: 1px solid @border_color; box-shadow: inset 1px 1px @border_bright, inset -1px -1px @border_shade; transition: none; } button.sidebar-button:hover, button.sidebar-button:checked, button.sidebar-button:active { color: @text_color; } /* Dialogue buttons. */ /* We're using border images here since dialog button borders are 3px on Windows 95 with individual colour properties.*/ .dialog-action-area button { min-height: 16px; min-width: 16px; box-shadow: none; border: 3px solid @border_dark; border-image: url("buttons/dialog_button_normal.png"); border-image-slice: 3 3 3 3; } .dialog-action-area button:focus { border-image: url("buttons/dialog_button_focus.png"); border-image-slice: 3 3 3 3; } .dialog-action-area button:disabled { border-image: url("buttons/dialog_button_normal.png"); border-image-slice: 3 3 3 3; } .dialog-action-area button:active, .dialog-action-area button:checked, .dialog-action-area button:disabled:active, .dialog-action-area button:disabled:checked { border-image: url("buttons/dialog_button_active.png"); border-image-slice: 3 3 3 3; } /* Row buttons */ row:selected button:selected { border-top-color: @border_dark; border-right-color: @border_bright; border-left-color: @border_dark; border-bottom-color: @border_bright; box-shadow: inset 1px 1px @border_shade; } /* Stack switcher buttons */ .stack-switcher > button { outline-offset: -3px; } .stack-switcher > button > label { padding-left: 6px; padding-right: 6px; } .stack-switcher > button > image { padding-left: 6px; padding-right: 6px; padding-top: 3px; padding-bottom: 3px; } .stack-switcher > button.text-button { padding-left: 10px; padding-right: 10px; } .stack-switcher > button.image-button { padding-left: 2px; padding-right: 2px; } .stack-switcher > button.needs-attention:active > label, .stack-switcher > button.needs-attention:active > image, .stack-switcher > button.needs-attention:checked > label, .stack-switcher > button.needs-attention:checked > image { background-image: none; } /* Colour swatch buttons */ button.color { padding: 2px; } button.color colorswatch { padding: 0px;} button.color colorswatch:only-child { border-color: @border_shade; box-shadow: none; } button.color colorswatch:only-child, button.color colorswatch:only-child overlay { border-radius: 0; } button.color colorswatch:only-child:disabled colorswatch:only-child, button.color colorswatch:only-child:backdrop colorswatch:only-child, button.color colorswatch:only-child:active colorswatch:only-child, button.color colorswatch:only-child:checked colorswatch:only-child { box-shadow: none; } /* Toolbar buttons */ .inline-toolbar button, .primary-toolbar button, toolbutton button, toolbutton .toggle, .path-bar button { margin: 0px; border-radius: 0px; border-left: 1px solid @border_bright; border-top: 1px solid @border_bright; border-bottom: 1px solid @border_dark; border-right: 1px solid @border_dark; box-shadow: inset -1px -1px @border_shade; } .inline-toolbar button:active, .primary-toolbar button:active, toolbutton button:active, .path-bar button:active .inline-toolbar button:checked, .primary-toolbar button:checked, toolbutton button:checked, .path-bar button:checked { border-left: 1px solid @border_dark; border-top: 1px solid @border_dark; border-bottom: 1px solid @border_bright; border-right: 1px solid @border_bright; box-shadow: inset 1px 1px @border_shade; } toolbutton .toggle:active, toolbutton .toggle:checked, .path-bar button:active, .path-bar button:checked { border-left: 1px solid @border_dark; border-top: 1px solid @border_dark; border-bottom: 1px solid @border_bright; border-right: 1px solid @border_bright; box-shadow: inset 1px 1px @border_shade; background-color: @bg_bright; background-image: linear-gradient(45deg, @bg_color 25%, transparent 25%, transparent 75%, @bg_color 75%, @bg_color), linear-gradient(45deg, @bg_color 25%, transparent 25%, transparent 75%, @bg_color 75%, @bg_dark); background-size: 2px 2px; background-position: 0 0, 1px 1px; } toolbutton .toggle:active > label, toolbutton .toggle:checked > label, .path-bar button:active, .path-bar button:checked { text-shadow: 1px 1px @bg_color; } /* The text shadow helps with reading text while against a checkered background. */ toolbutton .toggle:checked:disabled { box-shadow: inset 1px 1px @border_shade; background-color: @bg_bright; background-image: linear-gradient(45deg, @bg_color 25%, transparent 25%, transparent 75%, @bg_color 75%, @bg_color), linear-gradient(45deg, @bg_color 25%, transparent 25%, transparent 75%, @bg_color 75%, @bg_dark); background-size: 2px 2px; background-position: 0 0, 1px 1px; } /* spinbuttons */ spinbutton:not(.vertical) { border: 2px solid @border_dark; border-image: url("assets/entry.png"); border-image-slice: 2 2 2 2; border-radius: 0px; box-shadow: none; background-color: @bg_bright; } spinbutton:not(.vertical) entry { min-height: 16px; border: none; background: none; background-color: @bg_bright; border-radius: 0px; box-shadow: none; } spinbutton:not(.vertical) button { min-height: 16px; min-width: 16px; padding: 0px; border: 0px solid @border_dark; background-color: transparent; background-image: url("buttons/dialog_button_normal.png"); background-repeat: no-repeat; background-position: 51% 50%; border-radius: 0px; box-shadow: none; } spinbutton:not(.vertical) button:active { min-height: 16px; min-width: 16px; padding: 0px; border: 0px solid @border_dark; background-color: transparent; background-image: url("buttons/button_pressed.png"); background-repeat: no-repeat; background-position: 51% 50%; border-radius: 0px; box-shadow: none; border-radius: 0px; } spinbutton.vertical entry { min-width: 16px; min-height: 16px; padding: 0px; margin-top: 2px; margin-bottom: 2px; } spinbutton.vertical button { padding: 0px; } /* destructive action buttons */ .destructive-action.button { border-radius: 0px; background-color: @error_color; background-image: none; color: mix(@theme_selected_fg_color, @error_color, 0.1); } /* suggested action buttons */ .suggested-action.button { color: @info_fg_color; background-color: @info_bg_color; } /* toolitem box button */ toolitem button { background-color: @button_bg_color; border-left: 1px solid @border_color; border-right: 1px solid @border_dark; border-bottom: 1px solid @border_dark; border-top: 1px solid @border_color; box-shadow: inset 1px 1px @border_bright, inset -1px -1px @border_shade; } iconview { -GdMainIconView-icon-size: 48; } iconview:hover { box-shadow: inset 1px 1px @border_color, inset -1px -1px @border_color; } /* image buttons */ .image-button { padding: 0px; color: @text_color; } .image-button label { padding-left: 4px; padding-right: 4px; } /* statusbar buttons */ statusbar button { border: 1px solid transparent; box-shadow: none; } statusbar button:active, statusbar button:checked { border: 1px dotted @outline_color; box-shadow: none; }