diff --git a/gtk/gtkpopover.c b/gtk/gtkpopover.c index 43d41a6a91..b1ca46afe2 100644 --- a/gtk/gtkpopover.c +++ b/gtk/gtkpopover.c @@ -73,15 +73,33 @@ * * # CSS nodes * - * GtkPopover has a single css node called popover. It always gets the - * .background style class and it gets the .menu style class if it is - * menu-like (e.g. #GtkPopoverMenu or created using gtk_popover_new_from_model(). + * |[ + * popover + * ├── arrow + * ╰── contents.background[.menu] + * ╰── + * ]| + * + * The contents child node always gets the .background style class and it + * gets the .menu style class if the popover is menu-like (e.g. #GtkPopoverMenu + * or created using gtk_popover_new_from_model(). * * Particular uses of GtkPopover, such as touch selection popups * or magnifiers in #GtkEntry or #GtkTextView get style classes * like .touch-selection or .magnifier to differentiate from * plain popovers. * + * When styling a popover directly, the popover node should usually not have any + * background. + * + * Note that, in order to accomplish appropriate arrow visuals, #GtkPopover uses + * custom drawing for the arrow node. This makes it possible for the arrow to change + * its shape dynamically, but it also limits the possibilities of styling it using CSS. + * In particular, the arrow gets drawn over the content node's border so they look + * like one shape, which means that the border-width of the content node and the arrow + * node should be the same. The arrow also does not support any border shape other than + * solid, no border-radius, only one border width (border-bottom-width is used) and no box-shadow. + * * Since: 3.12 */ @@ -113,6 +131,8 @@ #include "gtkstylecontextprivate.h" #include "gtkprogresstrackerprivate.h" #include "gtksettingsprivate.h" +#include "gtkgizmoprivate.h" +#include "gtkcssnodeprivate.h" #include "gsk/gskroundedrectprivate.h" @@ -151,6 +171,8 @@ enum { struct _GtkPopoverPrivate { GtkWidget *widget; + GtkWidget *contents_widget; + GtkCssNode *arrow_node; GtkWindow *window; GtkWidget *prev_focus_widget; GtkWidget *default_widget; @@ -193,7 +215,6 @@ static void gtk_popover_update_relative_to (GtkPopover *popover, GtkWidget *relative_to); static void gtk_popover_set_state (GtkPopover *popover, guint state); -static void gtk_popover_invalidate_borders (GtkPopover *popover); static void gtk_popover_apply_modality (GtkPopover *popover, gboolean modal); @@ -202,6 +223,49 @@ static void gtk_popover_set_scrollable_full (GtkPopover *popover, G_DEFINE_TYPE_WITH_PRIVATE (GtkPopover, gtk_popover, GTK_TYPE_BIN) + +static void +measure_contents (GtkGizmo *gizmo, + GtkOrientation orientation, + int for_size, + int *minimum, + int *natural, + int *minimum_baseline, + int *natural_baseline) +{ + GtkPopover *popover = GTK_POPOVER (gtk_widget_get_parent (GTK_WIDGET (gizmo))); + GtkWidget *child = gtk_bin_get_child (GTK_BIN (popover)); + + if (child) + gtk_widget_measure (child, orientation, for_size, + minimum, natural, + minimum_baseline, natural_baseline); +} + +static void +allocate_contents (GtkGizmo *gizmo, + const GtkAllocation *allocation, + int baseline, + GtkAllocation *out_clip) +{ + GtkPopover *popover = GTK_POPOVER (gtk_widget_get_parent (GTK_WIDGET (gizmo))); + GtkWidget *child = gtk_bin_get_child (GTK_BIN (popover)); + + if (child) + gtk_widget_size_allocate (child, (GtkAllocation*)allocation); +} + +static void +node_style_changed_cb (GtkCssNode *node, + GtkCssStyleChange *change, + GtkWidget *widget) +{ + if (gtk_css_style_change_affects (change, GTK_CSS_AFFECTS_SIZE | GTK_CSS_AFFECTS_CLIP)) + gtk_widget_queue_resize (widget); + else + gtk_widget_queue_draw (widget); +} + static void gtk_popover_init (GtkPopover *popover) { @@ -218,7 +282,23 @@ gtk_popover_init (GtkPopover *popover) popover->priv->preferred_position = GTK_POS_TOP; popover->priv->constraint = GTK_POPOVER_CONSTRAINT_WINDOW; - context = gtk_widget_get_style_context (GTK_WIDGET (popover)); + popover->priv->arrow_node = gtk_css_node_new (); + gtk_css_node_set_name (popover->priv->arrow_node, I_("arrow")); + gtk_css_node_set_parent (popover->priv->arrow_node, gtk_widget_get_css_node (widget)); + gtk_css_node_set_state (popover->priv->arrow_node, + gtk_css_node_get_state (gtk_widget_get_css_node (widget))); + g_signal_connect_object (popover->priv->arrow_node, "style-changed", + G_CALLBACK (node_style_changed_cb), popover, 0); + g_object_unref (popover->priv->arrow_node); + + popover->priv->contents_widget = gtk_gizmo_new ("contents", + measure_contents, + allocate_contents, + NULL); + + gtk_widget_set_parent (popover->priv->contents_widget, widget); + + context = gtk_widget_get_style_context (popover->priv->contents_widget); gtk_style_context_add_class (context, GTK_STYLE_CLASS_BACKGROUND); } @@ -309,7 +389,7 @@ gtk_popover_hide_internal (GtkPopover *popover) if (gtk_widget_get_realized (widget)) { cairo_region_t *region = cairo_region_create (); - gdk_window_input_shape_combine_region (gtk_widget_get_parent_window (widget), + gdk_window_input_shape_combine_region (gtk_widget_get_window (widget), region, 0, 0); cairo_region_destroy (region); } @@ -369,6 +449,21 @@ gtk_popover_dispose (GObject *object) g_clear_object (&priv->default_widget); + if (priv->contents_widget) + { + GtkWidget *child = gtk_bin_get_child (GTK_BIN (popover)); + + if (child) + { + /* Parent is content_widget! */ + gtk_widget_unparent (child); + _gtk_bin_set_child (GTK_BIN (popover), NULL); + } + + gtk_widget_unparent (priv->contents_widget); + priv->contents_widget = NULL; + } + G_OBJECT_CLASS (gtk_popover_parent_class)->dispose (object); } @@ -768,19 +863,19 @@ gtk_popover_get_gap_coords (GtkPopover *popover, if (pos == GTK_POS_BOTTOM || pos == GTK_POS_RIGHT) { tip = ((pos == GTK_POS_BOTTOM) ? border.top + widget_margin.top : border.left + widget_margin.left); - base = tip + TAIL_HEIGHT; + base = tip; gap_side = (priv->final_position == GTK_POS_BOTTOM) ? GTK_POS_TOP : GTK_POS_LEFT; } else if (pos == GTK_POS_TOP) { - base = allocation.height - TAIL_HEIGHT - border.bottom - widget_margin.bottom; - tip = base + TAIL_HEIGHT; + base = allocation.height -border.bottom - widget_margin.bottom; + tip = base; gap_side = GTK_POS_BOTTOM; } else if (pos == GTK_POS_LEFT) { - base = allocation.width - TAIL_HEIGHT - border.right - widget_margin.right; - tip = base + TAIL_HEIGHT; + base = allocation.width - border.right - widget_margin.right; + tip = base; gap_side = GTK_POS_RIGHT; } else @@ -790,16 +885,16 @@ gtk_popover_get_gap_coords (GtkPopover *popover, { tip_pos = rect.x + (rect.width / 2) + widget_margin.left; initial_x = CLAMP (tip_pos - TAIL_GAP_WIDTH / 2, - border_radius + margin.left + TAIL_HEIGHT, - allocation.width - TAIL_GAP_WIDTH - margin.right - border_radius - TAIL_HEIGHT); + border_radius + margin.left, + allocation.width - TAIL_GAP_WIDTH - margin.right - border_radius); initial_y = base; tip_x = CLAMP (tip_pos, 0, allocation.width); tip_y = tip; final_x = CLAMP (tip_pos + TAIL_GAP_WIDTH / 2, - border_radius + margin.left + TAIL_GAP_WIDTH + TAIL_HEIGHT, - allocation.width - margin.right - border_radius - TAIL_HEIGHT); + border_radius + margin.left + TAIL_GAP_WIDTH, + allocation.width - margin.right - border_radius); final_y = base; } else @@ -808,16 +903,16 @@ gtk_popover_get_gap_coords (GtkPopover *popover, initial_x = base; initial_y = CLAMP (tip_pos - TAIL_GAP_WIDTH / 2, - border_radius + margin.top + TAIL_HEIGHT, - allocation.height - TAIL_GAP_WIDTH - margin.bottom - border_radius - TAIL_HEIGHT); + border_radius + margin.top, + allocation.height - TAIL_GAP_WIDTH - margin.bottom - border_radius); tip_x = tip; tip_y = CLAMP (tip_pos, 0, allocation.height); final_x = base; final_y = CLAMP (tip_pos + TAIL_GAP_WIDTH / 2, - border_radius + margin.top + TAIL_GAP_WIDTH + TAIL_HEIGHT, - allocation.height - margin.right - border_radius - TAIL_HEIGHT); + border_radius + margin.top + TAIL_GAP_WIDTH, + allocation.height - margin.right - border_radius); } if (initial_x_out) @@ -891,13 +986,19 @@ static void gtk_popover_apply_tail_path (GtkPopover *popover, cairo_t *cr) { + GtkPopoverPrivate *priv = gtk_popover_get_instance_private (popover); gint initial_x, initial_y; gint tip_x, tip_y; gint final_x, final_y; + GtkStyleContext *context; + GtkBorder border; if (!popover->priv->widget) return; + context = gtk_widget_get_style_context (popover->priv->contents_widget); + gtk_style_context_get_border (context, &border); + cairo_set_line_width (cr, 1); gtk_popover_get_gap_coords (popover, &initial_x, &initial_y, @@ -905,9 +1006,30 @@ gtk_popover_apply_tail_path (GtkPopover *popover, &final_x, &final_y, NULL); - cairo_move_to (cr, initial_x, initial_y - TAIL_HEIGHT); - cairo_line_to (cr, tip_x, tip_y - TAIL_HEIGHT); - cairo_line_to (cr, final_x, final_y - TAIL_HEIGHT); + + switch (priv->current_position) + { + case GTK_POS_BOTTOM: + initial_y += TAIL_HEIGHT + border.top; + final_y += TAIL_HEIGHT + border.top; + break; + case GTK_POS_LEFT: + initial_x -= TAIL_HEIGHT + border.left; + final_x -= TAIL_HEIGHT + border.left; + break; + case GTK_POS_RIGHT: + initial_x += TAIL_HEIGHT + border.left; + final_x += TAIL_HEIGHT + border.left; + break; + case GTK_POS_TOP: + initial_y -= TAIL_HEIGHT + border.top; + final_y -= TAIL_HEIGHT + border.top; + break; + } + + cairo_move_to (cr, initial_x, initial_y); + cairo_line_to (cr, tip_x, tip_y); + cairo_line_to (cr, final_x, final_y); } static void @@ -1104,92 +1226,59 @@ gtk_popover_update_position (GtkPopover *popover) gtk_popover_update_shape (popover); priv->current_position = priv->final_position; - gtk_popover_invalidate_borders (popover); } _gtk_popover_update_child_visible (popover); } +GtkWidget * +gtk_popover_get_contents_widget (GtkPopover *popover) +{ + GtkPopoverPrivate *priv = gtk_popover_get_instance_private (popover); + + return priv->contents_widget; +} + static void gtk_popover_snapshot (GtkWidget *widget, GtkSnapshot *snapshot) { GtkPopover *popover = GTK_POPOVER (widget); + GtkPopoverPrivate *priv = gtk_popover_get_instance_private (popover); GtkStyleContext *context; - GtkAllocation clip; - GtkWidget *child; GtkBorder border; GdkRGBA border_color; - int rect_x, rect_y, rect_w, rect_h; - gint initial_x, initial_y, final_x, final_y; - gint gap_start, gap_end; - GtkPositionType gap_side; graphene_rect_t bounds; cairo_t *cr; int width, height; - context = gtk_widget_get_style_context (widget); - - gtk_widget_get_clip (widget, &clip); - - gtk_style_context_get_border (context, &border); - gtk_popover_get_rect_coords (popover, - &rect_x, &rect_y, - &rect_w, &rect_h); + /* Draw the child first so we can draw the arrow (partially) over it */ + gtk_widget_snapshot_child (widget, priv->contents_widget, snapshot); gtk_widget_get_content_size (widget, &width, &height); graphene_rect_init (&bounds, - - TAIL_HEIGHT, -TAIL_HEIGHT, - clip.width, clip.height); + 0, 0, + width, height); cr = gtk_snapshot_append_cairo (snapshot, &bounds, "Popover"); - /* Render the rect background */ - gtk_render_background (context, cr, - 0, 0, width, height); - - if (popover->priv->widget) - { - gtk_popover_get_gap_coords (popover, - &initial_x, &initial_y, - NULL, NULL, - &final_x, &final_y, - &gap_side); - - if (POS_IS_VERTICAL (gap_side)) - { - gap_start = initial_x - rect_x; - gap_end = final_x - rect_x; - } - else - { - gap_start = initial_y - rect_y; - gap_end = final_y - rect_y; - } - - /* Now render the frame, without the gap for the arrow tip */ - gtk_render_frame_gap (context, cr, - 0, 0, width, height, - gap_side, - gap_start, gap_end); - } - else - { - gtk_render_frame (context, cr, - 0, 0, width, height); - } /* Clip to the arrow shape */ cairo_save (cr); gtk_popover_apply_tail_path (popover, cr); + cairo_clip (cr); + context = gtk_widget_get_style_context (widget); + gtk_style_context_save_to_node (context, priv->arrow_node); + gtk_style_context_get_border (context, &border); + /* Render the arrow background */ gtk_render_background (context, cr, - - TAIL_HEIGHT, - TAIL_HEIGHT, - width + (TAIL_HEIGHT * 2), height + (TAIL_HEIGHT * 2)); + 0, 0, + width, height); /* Render the border of the arrow tip */ if (border.bottom > 0) @@ -1205,30 +1294,11 @@ G_GNUC_END_IGNORE_DEPRECATIONS cairo_stroke (cr); } + cairo_restore (cr); /* We're done */ cairo_destroy (cr); - child = gtk_bin_get_child (GTK_BIN (widget)); - - if (child) - gtk_widget_snapshot_child (widget, child, snapshot); -} - -static void -get_padding_and_border (GtkWidget *widget, - GtkBorder *border) -{ - GtkStyleContext *context; - GtkBorder tmp; - - context = gtk_widget_get_style_context (widget); - - gtk_style_context_get_padding (context, border); - gtk_style_context_get_border (context, &tmp); - border->top += tmp.top; - border->right += tmp.right; - border->bottom += tmp.bottom; - border->left += tmp.left; + gtk_style_context_restore (context); } static gint @@ -1272,6 +1342,7 @@ gtk_popover_measure (GtkWidget *widget, int *natural_baseline) { GtkPopover *popover = GTK_POPOVER (widget); + GtkPopoverPrivate *priv = gtk_popover_get_instance_private (popover); GtkWidget *child = gtk_bin_get_child (GTK_BIN (widget)); int minimal_size; @@ -1283,51 +1354,15 @@ gtk_popover_measure (GtkWidget *widget, if (for_size >= 0) for_size -= TAIL_HEIGHT; - gtk_widget_measure (child, orientation, for_size, minimum, natural, NULL, NULL); + gtk_widget_measure (priv->contents_widget, orientation, for_size, minimum, natural, NULL, NULL); } minimal_size = get_minimal_size (popover, orientation); *minimum = MAX (*minimum, minimal_size); *natural = MAX (*natural, minimal_size); -} -static void -gtk_popover_invalidate_borders (GtkPopover *popover) -{ - GtkAllocation allocation; - GtkBorder border; - - gtk_widget_get_allocation (GTK_WIDGET (popover), &allocation); - get_padding_and_border (GTK_WIDGET (popover), &border); - - gtk_widget_queue_draw_area (GTK_WIDGET (popover), 0, 0, border.left + TAIL_HEIGHT, allocation.height); - gtk_widget_queue_draw_area (GTK_WIDGET (popover), 0, 0, allocation.width, border.top + TAIL_HEIGHT); - gtk_widget_queue_draw_area (GTK_WIDGET (popover), 0, allocation.height - border.bottom - TAIL_HEIGHT, - allocation.width, border.bottom + TAIL_HEIGHT); - gtk_widget_queue_draw_area (GTK_WIDGET (popover), allocation.width - border.right - TAIL_HEIGHT, - 0, border.right + TAIL_HEIGHT, allocation.height); -} - -static void -gtk_popover_check_invalidate_borders (GtkPopover *popover) -{ - GtkPopoverPrivate *priv = popover->priv; - GtkPositionType gap_side; - gint tip_x, tip_y; - - if (!priv->widget) - return; - - gtk_popover_get_gap_coords (popover, NULL, NULL, - &tip_x, &tip_y, NULL, NULL, - &gap_side); - - if (tip_x != priv->tip_x || tip_y != priv->tip_y) - { - priv->tip_x = tip_x; - priv->tip_y = tip_y; - gtk_popover_invalidate_borders (popover); - } + *minimum += TAIL_HEIGHT; + *natural += TAIL_HEIGHT; } static void @@ -1335,18 +1370,41 @@ gtk_popover_size_allocate (GtkWidget *widget, GtkAllocation *allocation) { GtkPopover *popover = GTK_POPOVER (widget); - GtkWidget *child; + GtkPopoverPrivate *priv = gtk_popover_get_instance_private (popover); GtkAllocation child_clip; GtkAllocation clip = *allocation; + GtkAllocation child_alloc = *allocation; - child = gtk_bin_get_child (GTK_BIN (widget)); - if (child) + /* Note that we in measure() we add TAIL_HEIGHT in both directions, regardless + * of the popovers position. This is to ensure that we get enough space + * even priv->current_position changes between measure and size-allocate. + */ + switch (priv->current_position) { - gtk_widget_size_allocate (child, allocation); - gtk_widget_get_clip (child, &child_clip); - gdk_rectangle_union (&clip, &child_clip, &clip); + case GTK_POS_TOP: + child_alloc.height -= TAIL_HEIGHT; + child_alloc.x += TAIL_HEIGHT / 2; + break; + case GTK_POS_LEFT: + child_alloc.width -= TAIL_HEIGHT; + child_alloc.y += TAIL_HEIGHT / 2; + break; + case GTK_POS_BOTTOM: + child_alloc.y += TAIL_HEIGHT; + child_alloc.height -= TAIL_HEIGHT; + child_alloc.x += TAIL_HEIGHT / 2; + break; + case GTK_POS_RIGHT: + child_alloc.x += TAIL_HEIGHT; + child_alloc.width -= TAIL_HEIGHT; + child_alloc.y += TAIL_HEIGHT / 2; + break; } + gtk_widget_size_allocate (priv->contents_widget, &child_alloc); + gtk_widget_get_clip (priv->contents_widget, &child_clip); + gdk_rectangle_union (&clip, &child_clip, &clip); + if (gtk_widget_get_realized (widget)) { GtkAllocation a; @@ -1356,9 +1414,6 @@ gtk_popover_size_allocate (GtkWidget *widget, gtk_popover_update_shape (popover); } - if (gtk_widget_is_drawable (widget)) - gtk_popover_check_invalidate_borders (popover); - gtk_widget_set_clip (widget, &clip); } @@ -1495,7 +1550,7 @@ gtk_popover_show (GtkWidget *widget) priv->state = STATE_SHOWN; if (gtk_widget_get_realized (widget)) - gdk_window_input_shape_combine_region (gtk_widget_get_parent_window (widget), + gdk_window_input_shape_combine_region (gtk_widget_get_window (widget), NULL, 0, 0); } @@ -1516,11 +1571,48 @@ gtk_popover_hide (GtkWidget *widget) GTK_WIDGET_CLASS (gtk_popover_parent_class)->hide (widget); } +static void +gtk_popover_add (GtkContainer *container, + GtkWidget *child) +{ + GtkPopover *popover = GTK_POPOVER (container); + GtkPopoverPrivate *priv = gtk_popover_get_instance_private (popover); + + _gtk_bin_set_child (GTK_BIN (popover), child); + + gtk_widget_set_parent (child, priv->contents_widget); +} + +static void +gtk_popover_remove (GtkContainer *container, + GtkWidget *child) +{ + GtkPopover *popover = GTK_POPOVER (container); + + _gtk_bin_set_child (GTK_BIN (popover), NULL); + gtk_widget_unparent (child); +} + +static void +gtk_popover_state_flags_changed (GtkWidget *widget, + GtkStateFlags previous_state) +{ + GtkPopover *popover = GTK_POPOVER (widget); + GtkPopoverPrivate *priv = gtk_popover_get_instance_private (popover); + GtkStateFlags state; + + state = gtk_widget_get_state_flags (widget); + gtk_css_node_set_state (priv->arrow_node, state); + + GTK_WIDGET_CLASS (gtk_popover_parent_class)->state_flags_changed (widget, previous_state); +} + static void gtk_popover_class_init (GtkPopoverClass *klass) { - GtkWidgetClass *widget_class = GTK_WIDGET_CLASS (klass); GObjectClass *object_class = G_OBJECT_CLASS (klass); + GtkWidgetClass *widget_class = GTK_WIDGET_CLASS (klass); + GtkContainerClass *container_class = GTK_CONTAINER_CLASS (klass); object_class->set_property = gtk_popover_set_property; object_class->get_property = gtk_popover_get_property; @@ -1540,6 +1632,10 @@ gtk_popover_class_init (GtkPopoverClass *klass) widget_class->focus = gtk_popover_focus; widget_class->show = gtk_popover_show; widget_class->hide = gtk_popover_hide; + widget_class->state_flags_changed = gtk_popover_state_flags_changed; + + container_class->add = gtk_popover_add; + container_class->remove = gtk_popover_remove; /** * GtkPopover:relative-to: @@ -2101,7 +2197,7 @@ gtk_popover_get_pointing_to (GtkPopover *popover, *rect = priv->pointing_to; else if (priv->widget) { - gtk_widget_get_allocation (priv->widget, rect); + gtk_widget_get_own_allocation (priv->widget, rect); rect->x = rect->y = 0; } @@ -2260,7 +2356,7 @@ gtk_popover_bind_model (GtkPopover *popover, if (child) gtk_widget_destroy (child); - style_context = gtk_widget_get_style_context (GTK_WIDGET (popover)); + style_context = gtk_widget_get_style_context (popover->priv->contents_widget); if (model) { diff --git a/gtk/gtkpopovermenu.c b/gtk/gtkpopovermenu.c index e803a616b1..1df141fceb 100644 --- a/gtk/gtkpopovermenu.c +++ b/gtk/gtkpopovermenu.c @@ -20,6 +20,7 @@ #include "gtkstack.h" #include "gtkstylecontext.h" #include "gtkintl.h" +#include "gtkpopoverprivate.h" /** @@ -96,9 +97,12 @@ * * ]| * - * Just like normal popovers created using gtk_popover_new_from_model, - * #GtkPopoverMenu instances have a single css node called "popover" - * and get the .menu style class. + * # CSS Nodes + * + * #GtkPopoverMenu is just a subclass of #GtkPopover that adds + * custom content to it, therefore it has the same CSS nodes. + * It is one of the cases that add a .menu style class to the + * popover's contents node. */ struct _GtkPopoverMenu @@ -140,7 +144,7 @@ gtk_popover_menu_init (GtkPopoverMenu *popover) g_signal_connect (stack, "notify::visible-child-name", G_CALLBACK (visible_submenu_changed), popover); - style_context = gtk_widget_get_style_context (GTK_WIDGET (popover)); + style_context = gtk_widget_get_style_context (gtk_popover_get_contents_widget (GTK_POPOVER (popover))); gtk_style_context_add_class (style_context, GTK_STYLE_CLASS_MENU); } diff --git a/gtk/gtkpopoverprivate.h b/gtk/gtkpopoverprivate.h index ab61eb993e..fe24a5d775 100644 --- a/gtk/gtkpopoverprivate.h +++ b/gtk/gtkpopoverprivate.h @@ -24,6 +24,8 @@ G_BEGIN_DECLS void gtk_popover_update_position (GtkPopover *popover); +GtkWidget *gtk_popover_get_contents_widget (GtkPopover *popover); + G_END_DECLS #endif /* __GTK_POPOVER_PRIVATE_H__ */ diff --git a/gtk/theme/Adwaita/_common.scss b/gtk/theme/Adwaita/_common.scss index 56ad0e6a69..b604c146da 100644 --- a/gtk/theme/Adwaita/_common.scss +++ b/gtk/theme/Adwaita/_common.scss @@ -2021,14 +2021,27 @@ menuitem { * Popovers * ***************/ -popover.background { +popover>arrow { + background-color: $popover_bg_color; + border: 1px solid $borders_color; +} + +popover>contents.menu { + padding: 8px; + background-color: white; + margin: 0px; +} + +popover>contents { padding: 2px; + margin: 0px; +} + +popover>contents.background { border-radius: 5px; background-color: $popover_bg_color; - - .csd &, & { border: 1px solid $borders_color; } - box-shadow: 0 1px 2px transparentize(black, 0.7); + .csd &, & { border: 1px solid $borders_color; } &:backdrop { background-color: $backdrop_bg_color; @@ -2060,7 +2073,6 @@ popover.background { list separator { margin: 0px; } } -popover.menu { padding: 8px; } /************* * Notebooks * diff --git a/gtk/theme/Adwaita/gtk-contained-dark.css b/gtk/theme/Adwaita/gtk-contained-dark.css index 5fa218c262..826937db40 100644 --- a/gtk/theme/Adwaita/gtk-contained-dark.css +++ b/gtk/theme/Adwaita/gtk-contained-dark.css @@ -70,9 +70,9 @@ assistant .sidebar label { padding: 6px 12px; } assistant .sidebar label.highlight { background-color: #585d5e; } -.csd popover.background.touch-selection, .csd popover.background.magnifier, popover.background.touch-selection, popover.background.magnifier, .csd popover.background.osd, popover.background.osd, .app-notification, .app-notification.frame, .osd .scale-popup, .osd { color: #eeeeec; border: none; background-color: rgba(28, 31, 32, 0.7); background-clip: padding-box; text-shadow: 0 1px black; -gtk-icon-shadow: 0 1px black; } +.csd popover > contents.background.touch-selection, .csd popover > contents.background.magnifier, popover > contents.background.touch-selection, popover > contents.background.magnifier, .csd popover > contents.background.osd, popover > contents.background.osd, .app-notification, .app-notification.frame, .osd .scale-popup, .osd { color: #eeeeec; border: none; background-color: rgba(28, 31, 32, 0.7); background-clip: padding-box; text-shadow: 0 1px black; -gtk-icon-shadow: 0 1px black; } -popover.background.touch-selection:backdrop, popover.background.magnifier:backdrop, popover.background.osd:backdrop, .app-notification:backdrop, .osd .scale-popup:backdrop, .osd:backdrop { text-shadow: none; -gtk-icon-shadow: none; } +.csd popover > contents.background.touch-selection:backdrop, .csd popover > contents.background.magnifier:backdrop, popover > contents.background.touch-selection:backdrop, popover > contents.background.magnifier:backdrop, .csd popover > contents.background.osd:backdrop, popover > contents.background.osd:backdrop, .app-notification:backdrop, .osd .scale-popup:backdrop, .osd:backdrop { text-shadow: none; -gtk-icon-shadow: none; } /********************* Spinner Animation * */ @keyframes spin { to { -gtk-icon-transform: rotate(1turn); } } @@ -248,25 +248,25 @@ button.osd:disabled:backdrop, button.osd:disabled { color: #858786; border-color button.osd:backdrop { color: #eeeeec; border-color: rgba(0, 0, 0, 0.7); background-color: transparent; background-image: image(rgba(28, 31, 32, 0.7)); background-clip: padding-box; box-shadow: none; text-shadow: none; -gtk-icon-shadow: none; border: none; } -.csd popover.background.touch-selection button, .csd popover.background.magnifier button, popover.background.touch-selection button, popover.background.magnifier button, .app-notification button, .app-notification.frame button, .osd button { color: #eeeeec; border-color: rgba(0, 0, 0, 0.7); background-color: transparent; background-image: image(rgba(28, 31, 32, 0.7)); background-clip: padding-box; box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); text-shadow: 0 1px black; -gtk-icon-shadow: 0 1px black; outline-color: rgba(238, 238, 236, 0.3); } +.csd popover > contents.background.touch-selection button, .csd popover > contents.background.magnifier button, popover > contents.background.touch-selection button, popover > contents.background.magnifier button, .app-notification button, .app-notification.frame button, .osd button { color: #eeeeec; border-color: rgba(0, 0, 0, 0.7); background-color: transparent; background-image: image(rgba(28, 31, 32, 0.7)); background-clip: padding-box; box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); text-shadow: 0 1px black; -gtk-icon-shadow: 0 1px black; outline-color: rgba(238, 238, 236, 0.3); } -popover.background.touch-selection button:hover, popover.background.magnifier button:hover, .app-notification button:hover, .osd button:hover { color: white; border-color: rgba(0, 0, 0, 0.7); background-color: transparent; background-image: image(rgba(57, 63, 65, 0.7)); background-clip: padding-box; box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); text-shadow: 0 1px black; -gtk-icon-shadow: 0 1px black; outline-color: rgba(238, 238, 236, 0.3); } +.csd popover > contents.background.touch-selection button:hover, .csd popover > contents.background.magnifier button:hover, popover > contents.background.touch-selection button:hover, popover > contents.background.magnifier button:hover, .app-notification button:hover, .osd button:hover { color: white; border-color: rgba(0, 0, 0, 0.7); background-color: transparent; background-image: image(rgba(57, 63, 65, 0.7)); background-clip: padding-box; box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); text-shadow: 0 1px black; -gtk-icon-shadow: 0 1px black; outline-color: rgba(238, 238, 236, 0.3); } -popover.background.touch-selection button:active:backdrop, popover.background.magnifier button:active:backdrop, .app-notification button:active:backdrop, popover.background.touch-selection button:active, popover.background.magnifier button:active, .app-notification button:active, popover.background.touch-selection button:checked:backdrop, popover.background.magnifier button:checked:backdrop, .app-notification button:checked:backdrop, popover.background.touch-selection button:checked, popover.background.magnifier button:checked, .app-notification button:checked, .osd button:active:backdrop, .osd button:active, .osd button:checked:backdrop, .osd button:checked { color: white; border-color: rgba(0, 0, 0, 0.7); background-color: transparent; background-image: image(rgba(0, 0, 0, 0.7)); background-clip: padding-box; box-shadow: none; text-shadow: none; -gtk-icon-shadow: none; outline-color: rgba(238, 238, 236, 0.3); } +.csd popover > contents.background.touch-selection button:active:backdrop, .csd popover > contents.background.magnifier button:active:backdrop, popover > contents.background.touch-selection button:active:backdrop, popover > contents.background.magnifier button:active:backdrop, .app-notification button:active:backdrop, .csd popover > contents.background.touch-selection button:active, .csd popover > contents.background.magnifier button:active, popover > contents.background.touch-selection button:active, popover > contents.background.magnifier button:active, .app-notification button:active, .csd popover > contents.background.touch-selection button:checked:backdrop, .csd popover > contents.background.magnifier button:checked:backdrop, popover > contents.background.touch-selection button:checked:backdrop, popover > contents.background.magnifier button:checked:backdrop, .app-notification button:checked:backdrop, .csd popover > contents.background.touch-selection button:checked, .csd popover > contents.background.magnifier button:checked, popover > contents.background.touch-selection button:checked, popover > contents.background.magnifier button:checked, .app-notification button:checked, .osd button:active:backdrop, .osd button:active, .osd button:checked:backdrop, .osd button:checked { color: white; border-color: rgba(0, 0, 0, 0.7); background-color: transparent; background-image: image(rgba(0, 0, 0, 0.7)); background-clip: padding-box; box-shadow: none; text-shadow: none; -gtk-icon-shadow: none; outline-color: rgba(238, 238, 236, 0.3); } -popover.background.touch-selection button:disabled:backdrop, popover.background.magnifier button:disabled:backdrop, .app-notification button:disabled:backdrop, popover.background.touch-selection button:disabled, popover.background.magnifier button:disabled, .app-notification button:disabled, .osd button:disabled:backdrop, .osd button:disabled { color: #858786; border-color: rgba(0, 0, 0, 0.7); background-color: transparent; background-image: image(rgba(49, 52, 52, 0.5)); background-clip: padding-box; box-shadow: none; text-shadow: none; -gtk-icon-shadow: none; } +.csd popover > contents.background.touch-selection button:disabled:backdrop, .csd popover > contents.background.magnifier button:disabled:backdrop, popover > contents.background.touch-selection button:disabled:backdrop, popover > contents.background.magnifier button:disabled:backdrop, .app-notification button:disabled:backdrop, .csd popover > contents.background.touch-selection button:disabled, .csd popover > contents.background.magnifier button:disabled, popover > contents.background.touch-selection button:disabled, popover > contents.background.magnifier button:disabled, .app-notification button:disabled, .osd button:disabled:backdrop, .osd button:disabled { color: #858786; border-color: rgba(0, 0, 0, 0.7); background-color: transparent; background-image: image(rgba(49, 52, 52, 0.5)); background-clip: padding-box; box-shadow: none; text-shadow: none; -gtk-icon-shadow: none; } -popover.background.touch-selection button:backdrop, popover.background.magnifier button:backdrop, .app-notification button:backdrop, .osd button:backdrop { color: #eeeeec; border-color: rgba(0, 0, 0, 0.7); background-color: transparent; background-image: image(rgba(28, 31, 32, 0.7)); background-clip: padding-box; box-shadow: none; text-shadow: none; -gtk-icon-shadow: none; } +.csd popover > contents.background.touch-selection button:backdrop, .csd popover > contents.background.magnifier button:backdrop, popover > contents.background.touch-selection button:backdrop, popover > contents.background.magnifier button:backdrop, .app-notification button:backdrop, .osd button:backdrop { color: #eeeeec; border-color: rgba(0, 0, 0, 0.7); background-color: transparent; background-image: image(rgba(28, 31, 32, 0.7)); background-clip: padding-box; box-shadow: none; text-shadow: none; -gtk-icon-shadow: none; } -popover.background.touch-selection button.flat, popover.background.magnifier button.flat, .app-notification button.flat, .osd button.flat { border-color: transparent; background-color: transparent; background-image: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; box-shadow: none; text-shadow: 0 1px black; -gtk-icon-shadow: 0 1px black; } +.csd popover > contents.background.touch-selection button.flat, .csd popover > contents.background.magnifier button.flat, popover > contents.background.touch-selection button.flat, popover > contents.background.magnifier button.flat, .app-notification button.flat, .osd button.flat { border-color: transparent; background-color: transparent; background-image: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; box-shadow: none; text-shadow: 0 1px black; -gtk-icon-shadow: 0 1px black; } -popover.background.touch-selection button.flat:hover, popover.background.magnifier button.flat:hover, .app-notification button.flat:hover, .osd button.flat:hover { color: white; border-color: rgba(0, 0, 0, 0.7); background-color: transparent; background-image: image(rgba(57, 63, 65, 0.7)); background-clip: padding-box; box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); text-shadow: 0 1px black; -gtk-icon-shadow: 0 1px black; outline-color: rgba(238, 238, 236, 0.3); } +.csd popover > contents.background.touch-selection button.flat:hover, .csd popover > contents.background.magnifier button.flat:hover, popover > contents.background.touch-selection button.flat:hover, popover > contents.background.magnifier button.flat:hover, .app-notification button.flat:hover, .osd button.flat:hover { color: white; border-color: rgba(0, 0, 0, 0.7); background-color: transparent; background-image: image(rgba(57, 63, 65, 0.7)); background-clip: padding-box; box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); text-shadow: 0 1px black; -gtk-icon-shadow: 0 1px black; outline-color: rgba(238, 238, 236, 0.3); } -popover.background.touch-selection button.flat:disabled, popover.background.magnifier button.flat:disabled, .app-notification button.flat:disabled, .osd button.flat:disabled { color: #858786; border-color: rgba(0, 0, 0, 0.7); background-color: transparent; background-image: image(rgba(49, 52, 52, 0.5)); background-clip: padding-box; box-shadow: none; text-shadow: none; -gtk-icon-shadow: none; background-image: none; border-color: transparent; box-shadow: none; } +.csd popover > contents.background.touch-selection button.flat:disabled, .csd popover > contents.background.magnifier button.flat:disabled, popover > contents.background.touch-selection button.flat:disabled, popover > contents.background.magnifier button.flat:disabled, .app-notification button.flat:disabled, .osd button.flat:disabled { color: #858786; border-color: rgba(0, 0, 0, 0.7); background-color: transparent; background-image: image(rgba(49, 52, 52, 0.5)); background-clip: padding-box; box-shadow: none; text-shadow: none; -gtk-icon-shadow: none; background-image: none; border-color: transparent; box-shadow: none; } -popover.background.touch-selection button.flat:backdrop, popover.background.magnifier button.flat:backdrop, .app-notification button.flat:backdrop, .osd button.flat:backdrop { border-color: transparent; background-color: transparent; background-image: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; } +.csd popover > contents.background.touch-selection button.flat:backdrop, .csd popover > contents.background.magnifier button.flat:backdrop, popover > contents.background.touch-selection button.flat:backdrop, popover > contents.background.magnifier button.flat:backdrop, .app-notification button.flat:backdrop, .osd button.flat:backdrop { border-color: transparent; background-color: transparent; background-image: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; } -popover.background.touch-selection button.flat:active, popover.background.magnifier button.flat:active, .app-notification button.flat:active, popover.background.touch-selection button.flat:checked, popover.background.magnifier button.flat:checked, .app-notification button.flat:checked, .osd button.flat:active, .osd button.flat:checked { color: white; border-color: rgba(0, 0, 0, 0.7); background-color: transparent; background-image: image(rgba(0, 0, 0, 0.7)); background-clip: padding-box; box-shadow: none; text-shadow: none; -gtk-icon-shadow: none; outline-color: rgba(238, 238, 236, 0.3); } +.csd popover > contents.background.touch-selection button.flat:active, .csd popover > contents.background.magnifier button.flat:active, popover > contents.background.touch-selection button.flat:active, popover > contents.background.magnifier button.flat:active, .app-notification button.flat:active, .csd popover > contents.background.touch-selection button.flat:checked, .csd popover > contents.background.magnifier button.flat:checked, popover > contents.background.touch-selection button.flat:checked, popover > contents.background.magnifier button.flat:checked, .app-notification button.flat:checked, .osd button.flat:active, .osd button.flat:checked { color: white; border-color: rgba(0, 0, 0, 0.7); background-color: transparent; background-image: image(rgba(0, 0, 0, 0.7)); background-clip: padding-box; box-shadow: none; text-shadow: none; -gtk-icon-shadow: none; outline-color: rgba(238, 238, 236, 0.3); } button.suggested-action { color: white; outline-color: rgba(255, 255, 255, 0.3); border-color: #0f2b48; border-bottom-color: #06121e; background-image: linear-gradient(to bottom, #1f5894, #1d538b 60%, #1b4e83); text-shadow: 0 -1px rgba(0, 0, 0, 0.703529); -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.703529); box-shadow: inset 0 1px rgba(255, 255, 255, 0.05); } @@ -816,21 +816,25 @@ menuitem check:dir(ltr), menuitem radio:dir(ltr) { margin-right: 7px; } menuitem check:dir(rtl), menuitem radio:dir(rtl) { margin-left: 7px; } /*************** Popovers * */ -popover.background { padding: 2px; border-radius: 5px; background-color: #33393b; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); } +popover > arrow { background-color: #33393b; border: 1px solid #1b1f20; } -.csd popover.background, popover.background { border: 1px solid #1b1f20; } +popover > contents.menu { padding: 8px; background-color: white; margin: 0px; } -popover.background:backdrop { background-color: #33393b; box-shadow: none; } +popover > contents { padding: 2px; margin: 0px; } -popover.background > list, popover.background > .view, popover.background > iconview, popover.background > toolbar { border-style: none; background-color: transparent; } +popover > contents.background { border-radius: 5px; background-color: #33393b; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); } -.csd popover.background.touch-selection, .csd popover.background.magnifier, popover.background.touch-selection, popover.background.magnifier { border: 1px solid rgba(255, 255, 255, 0.1); } +.csd popover > contents.background, popover > contents.background { border: 1px solid #1b1f20; } -popover.background separator { margin: 3px; } +popover > contents.background:backdrop { background-color: #33393b; box-shadow: none; } -popover.background list separator { margin: 0px; } +popover > contents.background > list, popover > contents.background > .view, popover > contents.background > iconview, popover > contents.background > toolbar { border-style: none; background-color: transparent; } -popover.menu { padding: 8px; } +.csd popover > contents.background.touch-selection, .csd popover > contents.background.magnifier, popover > contents.background.touch-selection, popover > contents.background.magnifier { border: 1px solid rgba(255, 255, 255, 0.1); } + +popover > contents.background separator { margin: 3px; } + +popover > contents.background list separator { margin: 0px; } /************* Notebooks * */ notebook box > header { padding: 1px; border-color: #1b1f20; border-width: 1px; background-color: #272c2d; } diff --git a/gtk/theme/Adwaita/gtk-contained.css b/gtk/theme/Adwaita/gtk-contained.css index 79220c923e..d94b3db653 100644 --- a/gtk/theme/Adwaita/gtk-contained.css +++ b/gtk/theme/Adwaita/gtk-contained.css @@ -70,9 +70,9 @@ assistant .sidebar label { padding: 6px 12px; } assistant .sidebar label.highlight { background-color: #c3c4c4; } -.csd popover.background.touch-selection, .csd popover.background.magnifier, popover.background.touch-selection, popover.background.magnifier, .csd popover.background.osd, popover.background.osd, .app-notification, .app-notification.frame, .osd .scale-popup, .osd { color: #eeeeec; border: none; background-color: rgba(28, 31, 32, 0.7); background-clip: padding-box; text-shadow: 0 1px black; -gtk-icon-shadow: 0 1px black; } +.csd popover > contents.background.touch-selection, .csd popover > contents.background.magnifier, popover > contents.background.touch-selection, popover > contents.background.magnifier, .csd popover > contents.background.osd, popover > contents.background.osd, .app-notification, .app-notification.frame, .osd .scale-popup, .osd { color: #eeeeec; border: none; background-color: rgba(28, 31, 32, 0.7); background-clip: padding-box; text-shadow: 0 1px black; -gtk-icon-shadow: 0 1px black; } -popover.background.touch-selection:backdrop, popover.background.magnifier:backdrop, popover.background.osd:backdrop, .app-notification:backdrop, .osd .scale-popup:backdrop, .osd:backdrop { text-shadow: none; -gtk-icon-shadow: none; } +.csd popover > contents.background.touch-selection:backdrop, .csd popover > contents.background.magnifier:backdrop, popover > contents.background.touch-selection:backdrop, popover > contents.background.magnifier:backdrop, .csd popover > contents.background.osd:backdrop, popover > contents.background.osd:backdrop, .app-notification:backdrop, .osd .scale-popup:backdrop, .osd:backdrop { text-shadow: none; -gtk-icon-shadow: none; } /********************* Spinner Animation * */ @keyframes spin { to { -gtk-icon-transform: rotate(1turn); } } @@ -250,25 +250,25 @@ button.osd:disabled:backdrop, button.osd:disabled { color: #858786; border-color button.osd:backdrop { color: #eeeeec; border-color: rgba(0, 0, 0, 0.7); background-color: transparent; background-image: image(rgba(28, 31, 32, 0.7)); background-clip: padding-box; box-shadow: none; text-shadow: none; -gtk-icon-shadow: none; border: none; } -.csd popover.background.touch-selection button, .csd popover.background.magnifier button, popover.background.touch-selection button, popover.background.magnifier button, .app-notification button, .app-notification.frame button, .osd button { color: #eeeeec; border-color: rgba(0, 0, 0, 0.7); background-color: transparent; background-image: image(rgba(28, 31, 32, 0.7)); background-clip: padding-box; box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); text-shadow: 0 1px black; -gtk-icon-shadow: 0 1px black; outline-color: rgba(238, 238, 236, 0.3); } +.csd popover > contents.background.touch-selection button, .csd popover > contents.background.magnifier button, popover > contents.background.touch-selection button, popover > contents.background.magnifier button, .app-notification button, .app-notification.frame button, .osd button { color: #eeeeec; border-color: rgba(0, 0, 0, 0.7); background-color: transparent; background-image: image(rgba(28, 31, 32, 0.7)); background-clip: padding-box; box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); text-shadow: 0 1px black; -gtk-icon-shadow: 0 1px black; outline-color: rgba(238, 238, 236, 0.3); } -popover.background.touch-selection button:hover, popover.background.magnifier button:hover, .app-notification button:hover, .osd button:hover { color: white; border-color: rgba(0, 0, 0, 0.7); background-color: transparent; background-image: image(rgba(57, 63, 65, 0.7)); background-clip: padding-box; box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); text-shadow: 0 1px black; -gtk-icon-shadow: 0 1px black; outline-color: rgba(238, 238, 236, 0.3); } +.csd popover > contents.background.touch-selection button:hover, .csd popover > contents.background.magnifier button:hover, popover > contents.background.touch-selection button:hover, popover > contents.background.magnifier button:hover, .app-notification button:hover, .osd button:hover { color: white; border-color: rgba(0, 0, 0, 0.7); background-color: transparent; background-image: image(rgba(57, 63, 65, 0.7)); background-clip: padding-box; box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); text-shadow: 0 1px black; -gtk-icon-shadow: 0 1px black; outline-color: rgba(238, 238, 236, 0.3); } -popover.background.touch-selection button:active:backdrop, popover.background.magnifier button:active:backdrop, .app-notification button:active:backdrop, popover.background.touch-selection button:active, popover.background.magnifier button:active, .app-notification button:active, popover.background.touch-selection button:checked:backdrop, popover.background.magnifier button:checked:backdrop, .app-notification button:checked:backdrop, popover.background.touch-selection button:checked, popover.background.magnifier button:checked, .app-notification button:checked, .osd button:active:backdrop, .osd button:active, .osd button:checked:backdrop, .osd button:checked { color: white; border-color: rgba(0, 0, 0, 0.7); background-color: transparent; background-image: image(rgba(0, 0, 0, 0.7)); background-clip: padding-box; box-shadow: none; text-shadow: none; -gtk-icon-shadow: none; outline-color: rgba(238, 238, 236, 0.3); } +.csd popover > contents.background.touch-selection button:active:backdrop, .csd popover > contents.background.magnifier button:active:backdrop, popover > contents.background.touch-selection button:active:backdrop, popover > contents.background.magnifier button:active:backdrop, .app-notification button:active:backdrop, .csd popover > contents.background.touch-selection button:active, .csd popover > contents.background.magnifier button:active, popover > contents.background.touch-selection button:active, popover > contents.background.magnifier button:active, .app-notification button:active, .csd popover > contents.background.touch-selection button:checked:backdrop, .csd popover > contents.background.magnifier button:checked:backdrop, popover > contents.background.touch-selection button:checked:backdrop, popover > contents.background.magnifier button:checked:backdrop, .app-notification button:checked:backdrop, .csd popover > contents.background.touch-selection button:checked, .csd popover > contents.background.magnifier button:checked, popover > contents.background.touch-selection button:checked, popover > contents.background.magnifier button:checked, .app-notification button:checked, .osd button:active:backdrop, .osd button:active, .osd button:checked:backdrop, .osd button:checked { color: white; border-color: rgba(0, 0, 0, 0.7); background-color: transparent; background-image: image(rgba(0, 0, 0, 0.7)); background-clip: padding-box; box-shadow: none; text-shadow: none; -gtk-icon-shadow: none; outline-color: rgba(238, 238, 236, 0.3); } -popover.background.touch-selection button:disabled:backdrop, popover.background.magnifier button:disabled:backdrop, .app-notification button:disabled:backdrop, popover.background.touch-selection button:disabled, popover.background.magnifier button:disabled, .app-notification button:disabled, .osd button:disabled:backdrop, .osd button:disabled { color: #858786; border-color: rgba(0, 0, 0, 0.7); background-color: transparent; background-image: image(rgba(49, 52, 52, 0.5)); background-clip: padding-box; box-shadow: none; text-shadow: none; -gtk-icon-shadow: none; } +.csd popover > contents.background.touch-selection button:disabled:backdrop, .csd popover > contents.background.magnifier button:disabled:backdrop, popover > contents.background.touch-selection button:disabled:backdrop, popover > contents.background.magnifier button:disabled:backdrop, .app-notification button:disabled:backdrop, .csd popover > contents.background.touch-selection button:disabled, .csd popover > contents.background.magnifier button:disabled, popover > contents.background.touch-selection button:disabled, popover > contents.background.magnifier button:disabled, .app-notification button:disabled, .osd button:disabled:backdrop, .osd button:disabled { color: #858786; border-color: rgba(0, 0, 0, 0.7); background-color: transparent; background-image: image(rgba(49, 52, 52, 0.5)); background-clip: padding-box; box-shadow: none; text-shadow: none; -gtk-icon-shadow: none; } -popover.background.touch-selection button:backdrop, popover.background.magnifier button:backdrop, .app-notification button:backdrop, .osd button:backdrop { color: #eeeeec; border-color: rgba(0, 0, 0, 0.7); background-color: transparent; background-image: image(rgba(28, 31, 32, 0.7)); background-clip: padding-box; box-shadow: none; text-shadow: none; -gtk-icon-shadow: none; } +.csd popover > contents.background.touch-selection button:backdrop, .csd popover > contents.background.magnifier button:backdrop, popover > contents.background.touch-selection button:backdrop, popover > contents.background.magnifier button:backdrop, .app-notification button:backdrop, .osd button:backdrop { color: #eeeeec; border-color: rgba(0, 0, 0, 0.7); background-color: transparent; background-image: image(rgba(28, 31, 32, 0.7)); background-clip: padding-box; box-shadow: none; text-shadow: none; -gtk-icon-shadow: none; } -popover.background.touch-selection button.flat, popover.background.magnifier button.flat, .app-notification button.flat, .osd button.flat { border-color: transparent; background-color: transparent; background-image: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; box-shadow: none; text-shadow: 0 1px black; -gtk-icon-shadow: 0 1px black; } +.csd popover > contents.background.touch-selection button.flat, .csd popover > contents.background.magnifier button.flat, popover > contents.background.touch-selection button.flat, popover > contents.background.magnifier button.flat, .app-notification button.flat, .osd button.flat { border-color: transparent; background-color: transparent; background-image: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; box-shadow: none; text-shadow: 0 1px black; -gtk-icon-shadow: 0 1px black; } -popover.background.touch-selection button.flat:hover, popover.background.magnifier button.flat:hover, .app-notification button.flat:hover, .osd button.flat:hover { color: white; border-color: rgba(0, 0, 0, 0.7); background-color: transparent; background-image: image(rgba(57, 63, 65, 0.7)); background-clip: padding-box; box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); text-shadow: 0 1px black; -gtk-icon-shadow: 0 1px black; outline-color: rgba(238, 238, 236, 0.3); } +.csd popover > contents.background.touch-selection button.flat:hover, .csd popover > contents.background.magnifier button.flat:hover, popover > contents.background.touch-selection button.flat:hover, popover > contents.background.magnifier button.flat:hover, .app-notification button.flat:hover, .osd button.flat:hover { color: white; border-color: rgba(0, 0, 0, 0.7); background-color: transparent; background-image: image(rgba(57, 63, 65, 0.7)); background-clip: padding-box; box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); text-shadow: 0 1px black; -gtk-icon-shadow: 0 1px black; outline-color: rgba(238, 238, 236, 0.3); } -popover.background.touch-selection button.flat:disabled, popover.background.magnifier button.flat:disabled, .app-notification button.flat:disabled, .osd button.flat:disabled { color: #858786; border-color: rgba(0, 0, 0, 0.7); background-color: transparent; background-image: image(rgba(49, 52, 52, 0.5)); background-clip: padding-box; box-shadow: none; text-shadow: none; -gtk-icon-shadow: none; background-image: none; border-color: transparent; box-shadow: none; } +.csd popover > contents.background.touch-selection button.flat:disabled, .csd popover > contents.background.magnifier button.flat:disabled, popover > contents.background.touch-selection button.flat:disabled, popover > contents.background.magnifier button.flat:disabled, .app-notification button.flat:disabled, .osd button.flat:disabled { color: #858786; border-color: rgba(0, 0, 0, 0.7); background-color: transparent; background-image: image(rgba(49, 52, 52, 0.5)); background-clip: padding-box; box-shadow: none; text-shadow: none; -gtk-icon-shadow: none; background-image: none; border-color: transparent; box-shadow: none; } -popover.background.touch-selection button.flat:backdrop, popover.background.magnifier button.flat:backdrop, .app-notification button.flat:backdrop, .osd button.flat:backdrop { border-color: transparent; background-color: transparent; background-image: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; } +.csd popover > contents.background.touch-selection button.flat:backdrop, .csd popover > contents.background.magnifier button.flat:backdrop, popover > contents.background.touch-selection button.flat:backdrop, popover > contents.background.magnifier button.flat:backdrop, .app-notification button.flat:backdrop, .osd button.flat:backdrop { border-color: transparent; background-color: transparent; background-image: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; } -popover.background.touch-selection button.flat:active, popover.background.magnifier button.flat:active, .app-notification button.flat:active, popover.background.touch-selection button.flat:checked, popover.background.magnifier button.flat:checked, .app-notification button.flat:checked, .osd button.flat:active, .osd button.flat:checked { color: white; border-color: rgba(0, 0, 0, 0.7); background-color: transparent; background-image: image(rgba(0, 0, 0, 0.7)); background-clip: padding-box; box-shadow: none; text-shadow: none; -gtk-icon-shadow: none; outline-color: rgba(238, 238, 236, 0.3); } +.csd popover > contents.background.touch-selection button.flat:active, .csd popover > contents.background.magnifier button.flat:active, popover > contents.background.touch-selection button.flat:active, popover > contents.background.magnifier button.flat:active, .app-notification button.flat:active, .csd popover > contents.background.touch-selection button.flat:checked, .csd popover > contents.background.magnifier button.flat:checked, popover > contents.background.touch-selection button.flat:checked, popover > contents.background.magnifier button.flat:checked, .app-notification button.flat:checked, .osd button.flat:active, .osd button.flat:checked { color: white; border-color: rgba(0, 0, 0, 0.7); background-color: transparent; background-image: image(rgba(0, 0, 0, 0.7)); background-clip: padding-box; box-shadow: none; text-shadow: none; -gtk-icon-shadow: none; outline-color: rgba(238, 238, 236, 0.3); } button.suggested-action { color: white; outline-color: rgba(255, 255, 255, 0.3); border-color: #215d9c; border-bottom-color: #184472; background-image: linear-gradient(to bottom, #4a90d9, #3986d5 60%, #2a76c6); text-shadow: 0 -1px rgba(0, 0, 0, 0.543529); -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.543529); box-shadow: inset 0 1px rgba(255, 255, 255, 0.4); } @@ -824,21 +824,25 @@ menuitem check:dir(ltr), menuitem radio:dir(ltr) { margin-right: 7px; } menuitem check:dir(rtl), menuitem radio:dir(rtl) { margin-left: 7px; } /*************** Popovers * */ -popover.background { padding: 2px; border-radius: 5px; background-color: #e8e8e7; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); } +popover > arrow { background-color: #e8e8e7; border: 1px solid #b6b6b3; } -.csd popover.background, popover.background { border: 1px solid #b6b6b3; } +popover > contents.menu { padding: 8px; background-color: white; margin: 0px; } -popover.background:backdrop { background-color: #e8e8e7; box-shadow: none; } +popover > contents { padding: 2px; margin: 0px; } -popover.background > list, popover.background > .view, popover.background > iconview, popover.background > toolbar { border-style: none; background-color: transparent; } +popover > contents.background { border-radius: 5px; background-color: #e8e8e7; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); } -.csd popover.background.touch-selection, .csd popover.background.magnifier, popover.background.touch-selection, popover.background.magnifier { border: 1px solid rgba(255, 255, 255, 0.1); } +.csd popover > contents.background, popover > contents.background { border: 1px solid #b6b6b3; } -popover.background separator { margin: 3px; } +popover > contents.background:backdrop { background-color: #e8e8e7; box-shadow: none; } -popover.background list separator { margin: 0px; } +popover > contents.background > list, popover > contents.background > .view, popover > contents.background > iconview, popover > contents.background > toolbar { border-style: none; background-color: transparent; } -popover.menu { padding: 8px; } +.csd popover > contents.background.touch-selection, .csd popover > contents.background.magnifier, popover > contents.background.touch-selection, popover > contents.background.magnifier { border: 1px solid rgba(255, 255, 255, 0.1); } + +popover > contents.background separator { margin: 3px; } + +popover > contents.background list separator { margin: 0px; } /************* Notebooks * */ notebook box > header { padding: 1px; border-color: #b6b6b3; border-width: 1px; background-color: #cfcfcd; }