mirror of
https://github.com/rozniak/xfce-winxp-tc.git
synced 2026-05-01 19:51:33 +00:00
769 lines
15 KiB
SCSS
769 lines
15 KiB
SCSS
/**
|
|
* button.scss - Theme Base Button Styles
|
|
*
|
|
* This source-code is part of Windows XP stuff for XFCE:
|
|
* <<https://www.oddmatics.uk>>
|
|
*
|
|
* Author(s): Rory Fewell <roryf@oddmatics.uk>
|
|
*/
|
|
|
|
// Stuff for .needs-attention
|
|
//
|
|
$_dot_color: $selected_bg_color;
|
|
|
|
@keyframes needs_attention
|
|
{
|
|
from {
|
|
background-image: -gtk-gradient(
|
|
radial,
|
|
center center, 0,
|
|
center center, 0.01,
|
|
to($_dot_color),
|
|
to(transparent)
|
|
);
|
|
}
|
|
|
|
to
|
|
{
|
|
background-image: -gtk-gradient(
|
|
radial,
|
|
center center, 0,
|
|
center center, 0.5,
|
|
to($selected_bg_color),
|
|
to(transparent)
|
|
);
|
|
}
|
|
}
|
|
|
|
%button,
|
|
button
|
|
{
|
|
@at-root %button_basic, &
|
|
{
|
|
@include __wintc_apply_props_for_category(
|
|
$button_styles,
|
|
box-model
|
|
);
|
|
|
|
@include button(normal);
|
|
|
|
&:focus
|
|
{
|
|
@include button(focus);
|
|
}
|
|
|
|
&:hover
|
|
{
|
|
@include button(hover);
|
|
}
|
|
|
|
&:active,
|
|
&:checked
|
|
{
|
|
@include button(active);
|
|
}
|
|
|
|
&:disabled
|
|
{
|
|
@include button(insensitive);
|
|
|
|
&:active,
|
|
&:checked
|
|
{
|
|
@include button(insensitive-active);
|
|
}
|
|
}
|
|
|
|
// NOTE: This is an addition for the TC, not part of Adwaita
|
|
//
|
|
&.toggle
|
|
{
|
|
@include __wintc_apply_props_for_category(
|
|
$toggle_button_styles,
|
|
box-model
|
|
);
|
|
|
|
@include button(toggle);
|
|
|
|
&:focus
|
|
{
|
|
@include button(toggle-focus);
|
|
}
|
|
|
|
&:hover
|
|
{
|
|
@include button(toggle-hover);
|
|
}
|
|
|
|
&:checked
|
|
{
|
|
@include button(toggle-checked);
|
|
|
|
&:focus
|
|
{
|
|
@include button(toggle-checked-focus);
|
|
}
|
|
|
|
&:hover
|
|
{
|
|
@include button(toggle-checked-hover);
|
|
}
|
|
|
|
&:active
|
|
{
|
|
@include button(toggle-active);
|
|
}
|
|
}
|
|
|
|
&:active
|
|
{
|
|
@include button(toggle-active);
|
|
}
|
|
|
|
&:disabled
|
|
{
|
|
@include button(toggle-insensitive);
|
|
|
|
&:active,
|
|
&:checked
|
|
{
|
|
@include button(toggle-insensitive-checked);
|
|
}
|
|
}
|
|
}
|
|
|
|
@at-root %button_basic_flat,
|
|
*:not(headerbar) &.flat
|
|
{
|
|
@include button(undecorated);
|
|
|
|
&:focus,
|
|
&:hover
|
|
{
|
|
@include button(flat-hover);
|
|
}
|
|
|
|
&:active,
|
|
&:checked
|
|
{
|
|
@include button(flat-active);
|
|
}
|
|
|
|
&:disabled
|
|
{
|
|
@include button(flat-insensitive);
|
|
}
|
|
}
|
|
|
|
&.image-button
|
|
{
|
|
min-width: 24px;
|
|
}
|
|
|
|
// NOTE: WinTC addition
|
|
//
|
|
&:not(.text-button)
|
|
{
|
|
padding-left: 0px;
|
|
padding-right: 0px;
|
|
}
|
|
|
|
@at-root %button_basic_drop_active,
|
|
&:drop(active)
|
|
{
|
|
border-color: $drop_target_color;
|
|
box-shadow: inset 0 0 0 1px $drop_target_color;
|
|
color: $drop_target_color;
|
|
}
|
|
}
|
|
|
|
@at-root %button_selected, &
|
|
{
|
|
row:selected &
|
|
{
|
|
border-color: $selected_borders_color;
|
|
}
|
|
|
|
@at-root %button_selected_flat, &.flat
|
|
{
|
|
row:selected &
|
|
{
|
|
&:not(:active):not(:checked):not(:hover):not(disabled)
|
|
{
|
|
border-color: transparent;
|
|
color: $selected_fg_color;
|
|
|
|
&:backdrop
|
|
{
|
|
color: $backdrop_base_color;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
// Big standalone buttons like in Documents pager
|
|
//
|
|
&.osd
|
|
{
|
|
border-radius: 5px;
|
|
color: $osd_fg_color;
|
|
min-height: 32px;
|
|
min-width: 26px;
|
|
|
|
&.image-button { min-width: 34px; }
|
|
|
|
@include button(osd);
|
|
|
|
// Overrides
|
|
//
|
|
border: none;
|
|
box-shadow: none;
|
|
|
|
&:hover
|
|
{
|
|
@include button(osd-hover);
|
|
|
|
border: none;
|
|
box-shadow: none;
|
|
}
|
|
|
|
&:active,
|
|
&:checked
|
|
{
|
|
@include button(osd-active);
|
|
|
|
border: none;
|
|
box-shadow: none;
|
|
}
|
|
|
|
&:disabled
|
|
{
|
|
&:backdrop,
|
|
&
|
|
{
|
|
@include button(osd-insensitive);
|
|
|
|
border: none;
|
|
}
|
|
}
|
|
|
|
&:backdrop
|
|
{
|
|
@include button(osd-backdrop);
|
|
|
|
border: none;
|
|
}
|
|
}
|
|
|
|
// Overlay / OSD style
|
|
//
|
|
@at-root %osd_button,
|
|
.osd &
|
|
{
|
|
@include button(osd);
|
|
|
|
&:hover
|
|
{
|
|
@include button(osd-hover);
|
|
}
|
|
|
|
&:active,
|
|
&:checked
|
|
{
|
|
&:backdrop, &
|
|
{
|
|
@include button(osd-active);
|
|
}
|
|
}
|
|
|
|
&:disabled
|
|
{
|
|
&:backdrop, &
|
|
{
|
|
@include button(osd-insensitive);
|
|
}
|
|
}
|
|
|
|
&:backdrop
|
|
{
|
|
@include button(osd-backdrop);
|
|
}
|
|
|
|
&.flat
|
|
{
|
|
@include button(undecorated);
|
|
|
|
box-shadow: none; //FIXME: respect no edge on the button mixin
|
|
text-shadow: 0 1px black;
|
|
-gtk-icon-shadow: 0 1px black;
|
|
|
|
&:hover
|
|
{
|
|
@include button(osd-hover);
|
|
}
|
|
|
|
&:disabled
|
|
{
|
|
@include button(osd-insensitive);
|
|
|
|
background-image: none;
|
|
border-color: transparent;
|
|
box-shadow: none;
|
|
}
|
|
|
|
&:backdrop
|
|
{
|
|
@include button(undecorated);
|
|
}
|
|
|
|
&:active,
|
|
&:checked
|
|
{
|
|
@include button(osd-active);
|
|
}
|
|
}
|
|
}
|
|
|
|
.stack-switcher > &
|
|
{
|
|
// To position the needs attention dot, padding is added to the button
|
|
// child, a label needs just lateral padding while an icon needs vertical
|
|
// padding added too.
|
|
//
|
|
outline-offset: -3px; // Needs to be set or it gets overriden by GtkRadioButton outline-offset
|
|
|
|
> label
|
|
{
|
|
padding-left: 6px; // Label padding
|
|
padding-right: 6px; //
|
|
}
|
|
|
|
> image
|
|
{
|
|
padding-left: 6px; // Image padding
|
|
padding-right: 6px; //
|
|
padding-top: 3px; //
|
|
padding-bottom: 3px; //
|
|
}
|
|
|
|
&.text-button
|
|
{
|
|
// Compensate text-button paddings
|
|
//
|
|
padding-left: 10px;
|
|
padding-right: 10px;
|
|
}
|
|
|
|
&.image-button
|
|
{
|
|
// We want image buttons to have a 1:1 aspect ratio, so compensation
|
|
// of the padding added to the GtkImage is needed
|
|
//
|
|
padding-left: 2px;
|
|
padding-right: 2px;
|
|
}
|
|
|
|
&.needs-attention
|
|
{
|
|
> label,
|
|
> image
|
|
{
|
|
@extend %needs_attention;
|
|
}
|
|
|
|
&:active,
|
|
&:checked
|
|
{
|
|
> label,
|
|
> image
|
|
{
|
|
animation: none;
|
|
background-image: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Hide separators
|
|
//
|
|
&.font,
|
|
&.file
|
|
{
|
|
separator
|
|
{
|
|
background-color: transparent;
|
|
}
|
|
}
|
|
|
|
&.font
|
|
{
|
|
> box > box > label
|
|
{
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
|
|
// Inline-toolbar buttons
|
|
//
|
|
.inline-toolbar &
|
|
{
|
|
@extend %linked;
|
|
}
|
|
|
|
.primary-toolbar &
|
|
{
|
|
-gtk-icon-shadow: none; // Tango icons don't need shadows
|
|
}
|
|
|
|
.linked > &
|
|
{
|
|
@extend %linked;
|
|
}
|
|
|
|
.linked.vertical > &
|
|
{
|
|
@extend %linked_vertical;
|
|
}
|
|
|
|
// Circular button
|
|
//
|
|
&.circular
|
|
{
|
|
border-radius: 9999px;
|
|
padding: $_circ_btn_pad;
|
|
-gtk-outline-radius: 9999px;
|
|
|
|
label
|
|
{
|
|
padding: 0;
|
|
}
|
|
|
|
// The following code is needed since we use a darker bottom border on
|
|
// buttons, which looks pretty bad with a 100% border radius
|
|
// (see https://bugzilla.gnome.org/show_bug.cgi?id=771205 for details)
|
|
//
|
|
// On relevant states we an additional background-image with a gradient
|
|
// clipped on the border-box, so setting a transparent border would reveal
|
|
// it
|
|
//
|
|
$_border_bg: linear-gradient(to top, $alt-borders-color 25%, $borders-color 50%);
|
|
|
|
&:not(.flat):not(.osd):not(:checked):not(:active):not(:disabled):not(:backdrop)
|
|
{
|
|
@include button(normal, $backimage: $_border_bg);
|
|
|
|
border-color: transparent;
|
|
}
|
|
|
|
&:hover:not(.osd):not(:checked):not(:active):not(:disabled):not(:backdrop)
|
|
{
|
|
@include button(hover, $backimage: $_border_bg);
|
|
|
|
border-color: transparent;
|
|
}
|
|
|
|
background-origin: padding-box, border-box;
|
|
background-clip: padding-box, border-box;
|
|
}
|
|
}
|
|
|
|
%needs_attention
|
|
{
|
|
animation: needs_attention 150ms ease-in;
|
|
$_dot_shadow: _text_shadow_color();
|
|
$_dot_shadow_r: 0.5;
|
|
background-image: -gtk-gradient(
|
|
radial,
|
|
center center, 0,
|
|
center center, 0.5,
|
|
to($_dot_color),
|
|
to(transparent)
|
|
),
|
|
-gtk-gradient(
|
|
radial,
|
|
center center, 0,
|
|
center center, $_dot_shadow_r,
|
|
to($_dot_shadow),
|
|
to(transparent)
|
|
);
|
|
background-size: 6px 6px, 6px 6px;
|
|
background-repeat: no-repeat;
|
|
background-position: right 3px, right 4px;
|
|
|
|
&:backdrop
|
|
{
|
|
background-size: 6px 6px, 0 0;
|
|
}
|
|
|
|
&:dir(rtl)
|
|
{
|
|
background-position: left 3px, left 4px;
|
|
}
|
|
}
|
|
|
|
|
|
// All the following is for the +|- buttons on inline toolbars, that way
|
|
// should really be deprecated...
|
|
//
|
|
//.inline-toolbar toolbutton > button
|
|
//{
|
|
// Redefining the button look is needed since those are flat...
|
|
//
|
|
// @include button(normal);
|
|
|
|
// &:hover
|
|
// {
|
|
// @include button(hover);
|
|
// }
|
|
|
|
// &:active,
|
|
// &:checked
|
|
// {
|
|
// @include button(active);
|
|
// }
|
|
|
|
// &:disabled
|
|
// {
|
|
// @include button(insensitive);
|
|
|
|
// &:active,
|
|
// &:checked
|
|
// {
|
|
// @include button(insensitive-active);
|
|
// }
|
|
// }
|
|
//}
|
|
|
|
// More inline toolbar buttons
|
|
//
|
|
toolbar.inline-toolbar toolbutton
|
|
{
|
|
> button.flat
|
|
{
|
|
@extend %linked_middle;
|
|
}
|
|
|
|
&:first-child > button.flat
|
|
{
|
|
@extend %linked_left;
|
|
}
|
|
|
|
&:last-child > button.flat
|
|
{
|
|
@extend %linked_right;
|
|
}
|
|
|
|
&:only-child > button.flat
|
|
{
|
|
@extend %linked_only_child;
|
|
}
|
|
}
|
|
|
|
%linked_middle
|
|
{
|
|
margin: inherit 2px;
|
|
}
|
|
|
|
%linked_left
|
|
{
|
|
margin-left: 0px;
|
|
}
|
|
|
|
%linked_right
|
|
{
|
|
margin-right: 0px;
|
|
}
|
|
|
|
%linked_only_child
|
|
{
|
|
margin: inherit 0px;
|
|
}
|
|
|
|
// .linked assumes Box, which reverses nodes in RTL, so 1st child is always left
|
|
//
|
|
%linked
|
|
{
|
|
@extend %linked_middle;
|
|
|
|
&:first-child { @extend %linked_left; }
|
|
&:last-child { @extend %linked_right; }
|
|
&:only-child { @extend %linked_only_child; }
|
|
}
|
|
|
|
// Other widgets use widget child order, so 1st/last child are at text start/end
|
|
//
|
|
%linked_flippable
|
|
{
|
|
@extend %linked_middle;
|
|
|
|
&:dir(ltr)
|
|
{
|
|
&:first-child { @extend %linked_left; }
|
|
&:last-child { @extend %linked_right; }
|
|
}
|
|
|
|
&:dir(rtl)
|
|
{
|
|
&:first-child { @extend %linked_right; }
|
|
&:last-child { @extend %linked_left; }
|
|
}
|
|
|
|
&:only-child
|
|
{
|
|
@extend %linked_only_child;
|
|
}
|
|
}
|
|
|
|
%linked_vertical_middle
|
|
{
|
|
margin: 2px inherit;
|
|
}
|
|
|
|
%linked_vertical_top
|
|
{
|
|
margin-top: 0px;
|
|
}
|
|
|
|
%linked_vertical_bottom
|
|
{
|
|
margin-bottom: 0px;
|
|
}
|
|
|
|
%linked_vertical_only_child
|
|
{
|
|
margin: 0px inherit;
|
|
}
|
|
|
|
%linked_vertical
|
|
{
|
|
@extend %linked_vertical_middle;
|
|
|
|
&:first-child { @extend %linked_vertical_top; }
|
|
&:last-child { @extend %linked_vertical_bottom; }
|
|
&:only-child { @extend %linked_vertical_only_child; }
|
|
}
|
|
|
|
%undecorated_button
|
|
{
|
|
background-color: transparent;
|
|
background-image: none;
|
|
border-color: transparent;
|
|
box-shadow: inset 0 1px transparentize(white, 1),
|
|
0 1px transparentize(white, 1);
|
|
text-shadow: none;
|
|
-gtk-icon-shadow: none;
|
|
}
|
|
|
|
// Menu buttons
|
|
//
|
|
modelbutton.flat,
|
|
.menuitem.button.flat
|
|
{
|
|
min-height: 26px;
|
|
padding-left: 5px;
|
|
padding-right: 5px;
|
|
border-radius: $button_radius;
|
|
outline-offset: -2px;
|
|
|
|
@extend %undecorated_button;
|
|
|
|
&:hover
|
|
{
|
|
background-color: $popover_hover_color;
|
|
}
|
|
|
|
&:selected
|
|
{
|
|
@extend %selected_items;
|
|
}
|
|
|
|
&:backdrop,
|
|
&:backdrop:hover
|
|
{
|
|
@extend %undecorated_button;
|
|
}
|
|
}
|
|
|
|
modelbutton.flat arrow
|
|
{
|
|
background: none;
|
|
|
|
&:hover
|
|
{
|
|
background: none;
|
|
}
|
|
|
|
&.left
|
|
{
|
|
-gtk-icon-source: -gtk-icontheme("pan-start-symbolic");
|
|
}
|
|
|
|
&.right
|
|
{
|
|
-gtk-icon-source: -gtk-icontheme("pan-end-symbolic");
|
|
}
|
|
}
|
|
|
|
button.color
|
|
{
|
|
padding: 4px;
|
|
|
|
colorswatch:only-child
|
|
{
|
|
&, overlay
|
|
{
|
|
border-radius: 0;
|
|
}
|
|
|
|
box-shadow: 0 1px _text_shadow_color();
|
|
|
|
.osd &
|
|
{
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
|
|
.osd &, &
|
|
{
|
|
&:disabled,
|
|
&:backdrop,
|
|
&:active,
|
|
&:checked
|
|
{
|
|
colorswatch:only-child
|
|
{
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// List buttons
|
|
//
|
|
// (tone down as per new designs, see issue #1473, #1478)
|
|
//
|
|
list row button.image-button:not(.flat)
|
|
{
|
|
@extend %undecorated_button;
|
|
|
|
border: 1px solid transparentize($borders_color, 0.5);
|
|
|
|
&:hover
|
|
{
|
|
@include button(hover);
|
|
}
|
|
|
|
&:active,
|
|
&:checked
|
|
{
|
|
@include button(active);
|
|
}
|
|
}
|
|
|
|
buttonbox.dialog-action-area button
|
|
{
|
|
padding: 3px 0px;
|
|
}
|