diff --git a/gtk/src/default/gtk-4.0/_colors-public.scss b/gtk/src/default/gtk-4.0/_colors-public.scss deleted file mode 100644 index 61ca0138b2..0000000000 --- a/gtk/src/default/gtk-4.0/_colors-public.scss +++ /dev/null @@ -1,61 +0,0 @@ -//apps rely on some named colors to be exported -/* GTK NAMED COLORS - ---------------- - use responsibly! */ - -// Sass thinks we're using the colors in the variables as strings and may shoot -// warning, it's innocuous and can be defeated by using "" + $var -/* -widget text/foreground color */ -@define-color theme_fg_color #{"" +$fg_color}; - -/* -text color for entries, views and content in general */ -@define-color theme_text_color #{"" +$text_color}; - -/* -widget base background color */ -@define-color theme_bg_color #{"" +$bg_color}; - -/* -text widgets and the like base background color */ -@define-color theme_base_color #{"" +$base_color}; - -/* -base background color of selections */ -@define-color theme_selected_bg_color #{"" +$selected_bg_color}; - -/* -text/foreground color of selections */ -@define-color theme_selected_fg_color #{"" +$selected_fg_color}; - -/* -base background color of insensitive widgets */ -@define-color insensitive_bg_color #{"" +$insensitive_bg_color}; - -/* -text foreground color of insensitive widgets */ -@define-color insensitive_fg_color #{"" +$insensitive_fg_color}; - -/* -insensitive text widgets and the like base background color */ -@define-color insensitive_base_color #{"" +$base_color}; - -/* -widgets main borders color */ -@define-color borders #{"" +$borders_color}; - -/* -these are pretty self explicative */ -@define-color warning_color #{"" +$warning_color}; -@define-color error_color #{"" +$error_color}; -@define-color success_color #{"" +$success_color}; -//@define-color destructive_color #{$destructive_color} - -//FIXME this is really an API - -/* content view background such as thumbnails view in Photos or Boxes */ -@define-color content_view_bg #{"" + $base_color}; - -/* Very contrasty background for text views (@theme_text_color foreground) */ -@define-color text_view_bg #{"" + if($variant == 'light', $base_color, darken($base_color,6%))}; diff --git a/gtk/src/default/gtk-4.0/_colors-public.scss b/gtk/src/default/gtk-4.0/_colors-public.scss new file mode 120000 index 0000000000..5d6b0352d7 --- /dev/null +++ b/gtk/src/default/gtk-4.0/_colors-public.scss @@ -0,0 +1 @@ +../../../upstream/gtk-4.0/Adwaita/_colors-public.scss \ No newline at end of file diff --git a/gtk/src/default/gtk-4.0/_common.scss b/gtk/src/default/gtk-4.0/_common.scss deleted file mode 100644 index 48912e3303..0000000000 --- a/gtk/src/default/gtk-4.0/_common.scss +++ /dev/null @@ -1,88 +0,0 @@ -@function gtkalpha($c,$a) { - @return unquote("alpha(#{$c},#{$a})"); -} - -$ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94); -$backdrop_transition: 200ms ease-out; -$button_transition: all 200ms $ease-out-quad; -$focus_transition: outline-width 200ms $ease-out-quad, outline-offset 200ms $ease-out-quad; -$button_radius: 4px; // Yaru change: we want everything to be less round -$menu_radius: 3px; // Yaru change: we want everything to be less round -$menu_margin: $menu_radius; //margin around menuitems & sidebar items -$menu_padding: 12px; //inner menuitem padding -$window_radius: $button_radius + 3; -$popover_radius: $button_radius + 2; // Yaru change: we want everything to be less round - -$treeview_borders_color: if($variant=='light',mix($borders_color, $base_color,80%),mix($fg_color, $base_color, 20%)); - -.background { - color: $fg_color; - background-color: $bg_color; -} - -dnd { - color: $fg-color; -} - -.normal-icons { - -gtk-icon-size: 16px; -} - -.large-icons { - -gtk-icon-size: 32px; -} - -%osd, -.osd { - color: $osd_fg_color; - border: none; - background-color: $osd_bg_color; - background-clip: padding-box; -} - -/* Text selection */ - -selection { - background-color: transparentize($text_color, 0.9); - color: transparent; - - &:focus-within { - background-color: transparentize($selected_bg_color, 0.7); - } -} - -:not(window):drop(active):focus, -:not(window):drop(active) { // FIXME needs to be done widget by widget, this wildcard should really die - border-color: $drop_target_color; - box-shadow: inset 0 0 0 1px $drop_target_color; - caret-color: $drop_target_color; -} - -.navigation-sidebar, -placessidebar, -stackswitcher, -expander-widget { - :not(window):drop(active):focus, - :not(window):drop(active) { - box-shadow: none; - } -} - -/* Outline for low res icons */ -.lowres-icon { - -gtk-icon-shadow: 0 -1px rgba(0,0,0,0.05), - 1px 0 rgba(0,0,0,0.1), - 0 1px rgba(0,0,0,0.3), - -1px 0 rgba(0,0,0,0.1); -} - -/* Drop shadow for large icons */ -.icon-dropshadow { - -gtk-icon-shadow: 0 1px 12px rgba(0,0,0,0.05), - 0 -1px rgba(0,0,0,0.05), - 1px 0 rgba(0,0,0,0.1), - 0 1px rgba(0,0,0,0.3), - -1px 0 rgba(0,0,0,0.1); -} - -@import 'widgets'; diff --git a/gtk/src/default/gtk-4.0/_common.scss b/gtk/src/default/gtk-4.0/_common.scss new file mode 120000 index 0000000000..2ce4a6a098 --- /dev/null +++ b/gtk/src/default/gtk-4.0/_common.scss @@ -0,0 +1 @@ +../../../upstream/gtk-4.0/Adwaita/_common.scss \ No newline at end of file diff --git a/gtk/src/default/gtk-4.0/_drawing.scss b/gtk/src/default/gtk-4.0/_drawing.scss deleted file mode 100644 index 09786bb881..0000000000 --- a/gtk/src/default/gtk-4.0/_drawing.scss +++ /dev/null @@ -1,145 +0,0 @@ -// Drawing mixins - -// generic drawing of more complex things - -// -// Helper mixin for drawing visible focus rings -// -// If $target is specified, the focus ring is applied to the specified child element. -// If $outer is true, the focus ring extends outward. Otherwise, it extends inward. -// If $within is true, use focus-within instead of focus:focus-visible -// -@mixin focus-ring($target: null, $width: 2px, $offset: -$width, $outer: false, $focus-state: 'focus:focus-visible', $fc: $focus_border_color) { - transition-property: outline, outline-width, outline-offset, outline-color; - transition-duration: 300ms; - animation-timing-function: ease-in-out; - & #{$target} { - outline: 0 solid transparent; - outline-offset: if($outer, $offset + 4px, $offset + $width + 4px); - } - - &:#{$focus-state} #{$target} { - outline-color: $fc; - outline-width: $width; - outline-offset: $offset; - } -} - -@mixin _shadows($list...) { -// -// Helper mixin to stack up to box-shadows; -// - $shadows: null; - - @each $shadow in $list { - @if $shadow!=none { $shadows: $shadows, $shadow; } - } - - box-shadow: $shadows; -} - -// entries - -@mixin entry($t, $fc:$focus_border_color) { -// -// Entries drawing function -// -// $t: entry type -// $fc: focus color -// -// possible $t values: -// normal, insensitive, osd, osd-focus, block_cursor; -// - - @if $t==normal { - color: $text_color; - border-color: mix($borders_color, $base_color, 75%); - background-color: $base_color; - // for the transition to work the number of shadows in different states needs to match, hence the transparent shadow here. - } - @if $t==insensitive { - color: $insensitive_fg_color; - border-color: mix($borders_color, $insensitive_bg_color, 75%); - background-color: $insensitive_bg_color; - } - @if $t==osd { - color: $osd_text_color; - border-color: $osd_borders_color; - background-color: transparentize(opacify($osd_borders_color, 1), 0.5); - background-clip: padding-box; - box-shadow: none; - } - @if $t==osd-focus { - color: $osd_text_color; - border-color: $selected_bg_color; - background-color: transparentize(opacify($osd_borders_color, 1), 0.5); - background-clip: padding-box; - } - @if $t==osd-insensitive { - color: $osd_insensitive_fg_color; - border-color: $osd_borders_color; - background-color: $osd_insensitive_bg_color; - background-clip: padding-box; - } - @if $t==block_cursor { - color: $base_color; - background-color: $text_color; - } -} - -// buttons - -@function _border_color($c, $darker: false) { - @if $darker == true { @return darken($c, 20%); } - @else { @return darken($c, 15%); } -} - -@mixin overshoot($p, $c:$fg_color) { -// -// overshoot -// -// $p: position -// $t: type -// $c: base color -// -// possible $p values: -// top, bottom, right, left -// - - $_small_gradient_length: 3%; - $_big_gradient_length: 50%; - - $_small_gradient_size: 100% $_small_gradient_length; - $_big_gradient_size: 100% $_big_gradient_length; - - @if $p==right or $p==left { - $_small_gradient_size: $_small_gradient_length 100%; - $_big_gradient_size: $_big_gradient_length 100%; - } - - $_small_gradient_color: $c; - $_big_gradient_color: transparentize($c, 0.93); - - @if $c==$fg_color { - $_small_gradient_color: darken($borders_color, 10%); - $_big_gradient_color: transparentize($fg_color, 0.93); - } - - $_small_gradient: radial-gradient(farthest-side at $p, - $_small_gradient_color 85%, - transparentize($_small_gradient_color, 1)); - - $_big_gradient: radial-gradient(farthest-side at $p, - $_big_gradient_color, - transparentize($_big_gradient_color, 1)); - - background-image: $_small_gradient, $_big_gradient; - background-size: $_small_gradient_size, $_big_gradient_size; - - background-repeat: no-repeat; - background-position: $p; - - background-color: transparent; // reset some properties to be sure to not inherit them somehow - border: none; // - box-shadow: none; // -} diff --git a/gtk/src/default/gtk-4.0/_drawing.scss b/gtk/src/default/gtk-4.0/_drawing.scss new file mode 120000 index 0000000000..abe9136155 --- /dev/null +++ b/gtk/src/default/gtk-4.0/_drawing.scss @@ -0,0 +1 @@ +../../../upstream/gtk-4.0/Adwaita/_drawing.scss \ No newline at end of file diff --git a/gtk/src/default/gtk-4.0/_inverted-headerbar.scss b/gtk/src/default/gtk-4.0/_inverted-headerbar.scss index 271d52bffb..1c50574e93 100644 --- a/gtk/src/default/gtk-4.0/_inverted-headerbar.scss +++ b/gtk/src/default/gtk-4.0/_inverted-headerbar.scss @@ -13,6 +13,8 @@ window.background.csd { } headerbar { + color: $fg_color; // reinsert fg_color + @import 'widgets/buttons'; @import 'widgets/switch'; @import 'widgets/scale'; @@ -25,6 +27,19 @@ windowhandle separator.vertical { @import 'widgets/header-bar'; +// Inverted headerbar tweaks +headerbar { + box-shadow: inset 0 1px lighten($headerbar_bg_color, 6%); // Top highlight + + // Reinsert windowcontrols size tweak + windowcontrols { + button { + padding: 2px; + margin: 0 7px; + } + } +} + // Must be imported after _header-bar headerbar { @import 'widgets/view-switcher'; diff --git a/gtk/src/default/gtk-4.0/_tweaks.scss b/gtk/src/default/gtk-4.0/_tweaks.scss index 98a63fad48..5725ea36b0 100644 --- a/gtk/src/default/gtk-4.0/_tweaks.scss +++ b/gtk/src/default/gtk-4.0/_tweaks.scss @@ -1,6 +1,10 @@ -// Orange close button +// Smaller windowcontrols and orange close button windowcontrols { + margin-left: 7px; // Fix windowcontrols misalignement caused by smaller windowcontrols + button { + padding: 2px; + margin: 0 7px; &.close { background: $selected_bg_color; @@ -23,11 +27,6 @@ windowcontrols { } } -// Fix windowcontrols misalignement -windowcontrols { - margin-left: 7px; -} - // Reducing the amount of the palette's background colors to two .sidebar { background-color: $bg_color; } @@ -47,3 +46,16 @@ scale > trough > slider, scale > trough > highlight { transition: $button_transition; } + +// Use our own palette for +levelbar { + > trough { + > block { + &.high, + &:not(.empty) { + background-color: $success_color; + } + } + } +} + \ No newline at end of file diff --git a/gtk/src/default/gtk-4.0/_widgets.scss b/gtk/src/default/gtk-4.0/_widgets.scss deleted file mode 100644 index ae2a020614..0000000000 --- a/gtk/src/default/gtk-4.0/_widgets.scss +++ /dev/null @@ -1,40 +0,0 @@ -@import 'widgets/avatar'; -@import 'widgets/buttons'; -@import 'widgets/calendar'; -@import 'widgets/checks'; -@import 'widgets/color-chooser'; -@import 'widgets/dropdowns'; -@import 'widgets/emoji-chooser'; -@import 'widgets/entries'; -@import 'widgets/expanders'; -@import 'widgets/file-chooser'; -@import 'widgets/header-bar'; -@import 'widgets/labels'; -@import 'widgets/level-bar'; -@import 'widgets/linked'; -@import 'widgets/links'; -@import 'widgets/lists'; -@import 'widgets/menus'; -@import 'widgets/message-dialog'; -@import 'widgets/misc'; -@import 'widgets/notebook'; -@import 'widgets/paned'; -@import 'widgets/popovers'; -@import 'widgets/preferences'; -@import 'widgets/progress-bar'; -@import 'widgets/scale'; -@import 'widgets/scrolling'; -@import 'widgets/shortcuts-window'; -@import 'widgets/sidebars'; -@import 'widgets/spinner'; -@import 'widgets/spin-button'; -@import 'widgets/switch'; -@import 'widgets/tab-view'; -@import 'widgets/text-selection'; -@import 'widgets/toolbars'; -@import 'widgets/tooltip'; -@import 'widgets/transition-shadow'; -@import 'widgets/trees'; -@import 'widgets/views'; -@import 'widgets/view-switcher'; -@import 'widgets/window'; diff --git a/gtk/src/default/gtk-4.0/_widgets.scss b/gtk/src/default/gtk-4.0/_widgets.scss new file mode 120000 index 0000000000..314413429a --- /dev/null +++ b/gtk/src/default/gtk-4.0/_widgets.scss @@ -0,0 +1 @@ +../../../upstream/gtk-4.0/Adwaita/_widgets.scss \ No newline at end of file diff --git a/gtk/src/default/gtk-4.0/widgets b/gtk/src/default/gtk-4.0/widgets new file mode 120000 index 0000000000..7afaad23c2 --- /dev/null +++ b/gtk/src/default/gtk-4.0/widgets @@ -0,0 +1 @@ +../../../upstream/gtk-4.0/Adwaita/widgets/ \ No newline at end of file diff --git a/gtk/src/default/gtk-4.0/widgets/_avatar.scss b/gtk/src/default/gtk-4.0/widgets/_avatar.scss deleted file mode 100644 index 8cbfbd47bb..0000000000 --- a/gtk/src/default/gtk-4.0/widgets/_avatar.scss +++ /dev/null @@ -1,38 +0,0 @@ -avatar { - border-radius: 9999px; - font-weight: bold; - - // The list of colors to generate avatars. - // Each avatar color is represented by a font color, a gradient start color and a gradient stop color. - // There are 8 different colors for avtars in the list if you change the number of them you - // need to update the NUMBER_OF_COLORS in src/adw-avatar.c. - // The 2D list has this form: ((font-color, gradient-top-color, gradient-bottom-color)). - $avatarcolorlist: ( - (#cfe1f5, #83b6ec, #337fdc), // blue - (#caeaf2, #7ad9f1, #0f9ac8), // cyan - (#cef8d8, #8de6b1, #29ae74), // green - (#e6f9d7, #b5e98a, #6ab85b), // lime - (#f9f4e1, #f8e359, #d29d09), // yellow - (#ffead1, #ffcb62, #d68400), // gold - (#ffe5c5, #ffa95a, #ed5b00), // orange - (#f8d2ce, #f78773, #e62d42), // raspberry - (#fac7de, #e973ab, #e33b6a), // magenta - (#e7c2e8, #cb78d4, #9945b5), // purple - (#d5d2f5, #9e91e8, #7a59ca), // violet - (#f2eade, #e3cf9c, #b08952), // beige - (#e5d6ca, #be916d, #785336), // brown - (#d8d7d3, #c0bfbc, #6e6d71), // gray - ); - - @for $i from 1 through length($avatarcolorlist) { - &.color#{$i} { - $avatarcolor: nth($avatarcolorlist, $i); - background-image: linear-gradient(nth($avatarcolor, 2), nth($avatarcolor, 3)); - color: nth($avatarcolor, 1); - } - } - - &.contrasted { color: #fff; } - - &.image { background: none; } -} diff --git a/gtk/src/default/gtk-4.0/widgets/_buttons.scss b/gtk/src/default/gtk-4.0/widgets/_buttons.scss deleted file mode 100644 index 8a6e2268f3..0000000000 --- a/gtk/src/default/gtk-4.0/widgets/_buttons.scss +++ /dev/null @@ -1,343 +0,0 @@ -// stuff for .needs-attention -@keyframes needs_attention { - from { background-image: radial-gradient(farthest-side, $selected_bg_color 0%, transparentize($selected_bg_color, 1) 0%); } - to { background-image: radial-gradient(farthest-side, $selected_bg_color 95%, transparentize($selected_bg_color, 1)); } -} - -%button, -button { - @at-root %button_basic, & { - min-height: 24px; - min-width: 16px; - padding: 5px 10px; - border-radius: $button_radius; - background-color: $button_color; - - @if $contrast == 'high' { - box-shadow: inset 0 0 0 1px $borders_color; - } - - @include focus-ring(); - transition: $button_transition; - - &:hover { - background-color: $button_hover_color; - } - - &.keyboard-activating, - &:active { - background-color: $button_active_color; - } - - &:checked { - background-color: $button_checked_color; - - &:hover { - background-color: $button_checked_hover_color; - } - - &.keyboard-activating, - &:active { - background-color: $button_checked_active_color; - } - } - - &:disabled { - filter: opacity(.5); - - label { - filter: none; - } - } - - &.image-button { - min-width: 24px; - padding-left: 6px; - padding-right: 6px; - } - - &.text-button { - padding-left: 17px; - padding-right: 17px; - } - - &.text-button.image-button { - padding-left: 9px; - padding-right: 9px; - - label { - padding-left: 8px; - padding-right: 8px; - } - } - - @at-root %button_basic_drop_active, - &:drop(active) { - color: $drop_target_color; - box-shadow: inset 0 0 0 2px $drop_target_color; - } - } - - // big standalone buttons like in Documents pager - &.osd { - min-width: 32px; - min-height: 32px; - - @include focus-ring($outer: true, $offset: 1px); - transition: $button_transition; - - color: $osd_fg_color; - background-color: $osd_bg_color; - - @if $contrast == 'high' { - box-shadow: 0 0 0 1px currentColor; - } - - &:hover { - color: white; - background-color: lighten($osd_bg_color, 10%); - } - - &.keyboard-activating, - &:active { - color: white; - background-color: lighten($osd_bg_color, 20%); - } - - &:checked { - background-color: lighten($osd_bg_color, 15%); - - &:hover { - background-color: lighten($osd_bg_color, 25%); - } - - &.keyboard-activating, - &:active { - background-color: lighten($osd_bg_color, 30%); - } - } - - // Specificity bump - &:drop(active) { - @extend %button_basic_drop_active; - } - } - - // Suggested and Destructive Action buttons - @each $b_type, $b_color in (suggested-action, $suggested_color), - (destructive-action, $destructive_color) { - &.#{$b_type} { - color: white; - background-color: $b_color; - - box-shadow: none; - - @include focus-ring($outer: true, $offset: 1px); - transition: $button_transition; - - &:hover { - background-color: shade($b_color, 0.95); - } - - &.keyboard-activating, - &:active { - background-color: shade($b_color, 0.8); - } - - &:checked { - background-color: shade($b_color, 0.85); - - &:hover { - background-color: shade($b_color, 0.8); - } - - &.keyboard-activating, - &:active { - background-color: shade($b_color, 0.7); - } - } - } - } - - @at-root %button_basic_flat, - &.flat { - background-color: transparent; - @include focus-ring(); - transition: $button_transition; - - box-shadow: none; - - @if $contrast == 'high' { - &:hover, - &.keyboard-activating, - &:active, - &:checked { - box-shadow: inset 0 0 0 1px $borders_color; - } - } - - &:hover { - background-color: $view_hover_color; - } - - &.keyboard-activating, - &:active { - background-color: $view_active_color; - } - - &:checked { - background-color: $view_selected_color; - - &:hover { - background-color: $view_selected_hover_color; - } - - &.keyboard-activating, - &:active { - background-color: $view_selected_active_color; - } - } - - @each $b_type, $b_color in (suggested-action, $suggested_color), - (destructive-action, $destructive_color) { - &.#{$b_type} { - color: if($variant == 'light', darken($b_color, 10%), lighten($b_color, 10%)); - } - } - - // Specificity bump - &:drop(active) { - @extend %button_basic_drop_active; - } - } - - stackswitcher > & { - // 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. - - > label { - padding: 0 6px; - margin: 0 -6px; - } - - > image { - padding: 3px 6px; - margin: -3px -6px; - } - - &.needs-attention { - > label, - > image { @extend %needs_attention; } - } - } - - // hide separators - &.font{ - separator { background-color: transparent; } - > box { border-spacing: 6px; } - > box > box > label { font-weight: bold; } - } - - menubutton.circular &, - &.circular { // force circular button shape - min-width: 34px; - min-height: 34px; - padding: 0; - border-radius: 9999px; - - label { padding: 0; } - } -} - -%needs_attention { - // the dot is drawn by using two radial gradient, the first one is the actual dot, the other - // simulates the shadow labels and icons normally have in buttons. - animation: needs_attention 150ms ease-in; - - background-image: radial-gradient(farthest-side, $selected_bg_color 96%, transparentize($selected_bg_color, 1)); - background-size: 6px 6px, 6px 6px; - background-repeat: no-repeat; - - @if $variant == 'light' { background-position: right 3px, right 4px; } - - @else { background-position: right 3px, right 2px; } - - &:dir(rtl) { - @if $variant == 'light' { background-position: left 3px, left 4px; } - - @else { background-position: left 3px, left 2px; } - } -} - -%undecorated_button { - background-color: transparent; - background-image: none; - border-color: transparent; - box-shadow: inset 0 1px transparentize(white, 1), - 0 1px transparentize(white, 1); -} - -button.color { - padding: 5px; - - > colorswatch:only-child { - &, > overlay { border-radius: 0; } - - @if $variant == 'light' { - box-shadow: 0 1px $shadow_color; - } - } - - @if $variant == 'light' { - .osd &, & { - &:active, - &:checked { colorswatch:only-child { box-shadow: none; }} - } - } -} - -/* list buttons */ -/* tone down as per new designs, see issue #1473 */ -%outline_button, -button.outline { - @extend %button_basic_flat; - - @if $contrast == 'high' { - box-shadow: inset 0 0 0 1px $borders_color; - } - @else { - box-shadow: inset 0 0 0 1px #{"alpha(currentColor, .15)"}; - - &:hover, &:active, &:checked { - box-shadow: none; - } - } - - // Specificity bump - &:drop(active) { - @extend %button_basic_drop_active; - } -} - -menubutton { - arrow { - min-height: 16px; - min-width: 16px; - &.none { - -gtk-icon-source: -gtk-icontheme('open-menu-symbolic'); - } - &.down { - -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); - } - &.up { - -gtk-icon-source: -gtk-icontheme('pan-up-symbolic'); - } - &.left { - -gtk-icon-source: -gtk-icontheme('pan-start-symbolic'); - } - &.right { - -gtk-icon-source: -gtk-icontheme('pan-end-symbolic'); - } - } -} diff --git a/gtk/src/default/gtk-4.0/widgets/_calendar.scss b/gtk/src/default/gtk-4.0/widgets/_calendar.scss deleted file mode 100644 index 7fce9169e8..0000000000 --- a/gtk/src/default/gtk-4.0/widgets/_calendar.scss +++ /dev/null @@ -1,44 +0,0 @@ -calendar { - color: $text_color; - border: 1px solid $borders_color; - - > header { - border-bottom: 1px solid $borders_color; - - > button { - @extend %button_basic_flat; - border-radius: 0; - } - } - - > grid { - > label.today { - box-shadow: inset 0px -2px $borders_color; - - &:selected { - box-shadow: none; - } - } - - > label { - @include focus-ring($focus-state: 'focus'); - - &.day-number { - padding: 4px; - - &:selected { - border-radius: 3px; - - background-color: $selected_bg_color; - color: $selected_fg_color; - - &:disabled { color: mix($selected_fg_color, $selected_bg_color, 50%); } - } - } - - &.day-number.other-month { - color: gtkalpha(currentColor, 0.3); - } - } - } -} diff --git a/gtk/src/default/gtk-4.0/widgets/_checks.scss b/gtk/src/default/gtk-4.0/widgets/_checks.scss deleted file mode 100644 index 2139c34558..0000000000 --- a/gtk/src/default/gtk-4.0/widgets/_checks.scss +++ /dev/null @@ -1,82 +0,0 @@ -checkbutton { - border-spacing: 4px; - border-radius: $button_radius; - transition: $focus_transition; - - @include focus-ring(); - - &.text-button { - // this is for a nice focus on check and radios text - padding: 4px; - } -} - -check, -radio { - min-height: 14px; - min-width: 14px; - padding: 1px; - -gtk-icon-size: 14px; - background-color: $trough_color; - - @if $contrast == "high" { - box-shadow: inset 0 0 0 1px $borders_color; - } - - &:hover { - background-color: $trough_hover_color; - - &:active { background-color: $trough_active_color; } - } - - &:checked, - &:indeterminate { - background-color: $fill_color; - color: $fill_text_color; - - @if $contrast == "high" { - box-shadow: none; - } - - &:hover { - background-color: $fill_hover_color; - - &:active { background-color: $fill_active_color; } - } - } - - &:disabled { - filter: opacity(.5); - } -} - -check { - border-radius: 3px; - - &:checked { -gtk-icon-source: -gtk-scaled(-gtk-recolor(url("assets/check-symbolic.symbolic.png")), - -gtk-recolor(url("assets/check@2-symbolic.symbolic.png"))); } - - &:indeterminate { -gtk-icon-source: -gtk-scaled(-gtk-recolor(url("assets/dash-symbolic.symbolic.png")), - -gtk-recolor(url("assets/dash@2-symbolic.symbolic.png"))); } -} - -radio { - border-radius: 100%; - - &:checked { -gtk-icon-source: -gtk-scaled(-gtk-recolor(url("assets/bullet-symbolic.symbolic.png")), - -gtk-recolor(url("assets/bullet@2-symbolic.symbolic.png"))); } - - &:indeterminate { -gtk-icon-source: -gtk-scaled(-gtk-recolor(url("assets/dash-symbolic.symbolic.png")), - -gtk-recolor(url("assets/dash@2-symbolic.symbolic.png"))); } -} - -//selection-mode -.view.content-view.check:not(list), -.content-view .tile check:not(list) { - margin: 4px; - min-width: 32px; - min-height: 32px; - border-radius: 5px; - - &:checked { -gtk-icon-source: -gtk-icontheme('object-select-symbolic'); } -} diff --git a/gtk/src/default/gtk-4.0/widgets/_color-chooser.scss b/gtk/src/default/gtk-4.0/widgets/_color-chooser.scss deleted file mode 100644 index a8935c47eb..0000000000 --- a/gtk/src/default/gtk-4.0/widgets/_color-chooser.scss +++ /dev/null @@ -1,140 +0,0 @@ -colorswatch { - // This widget is made of two boxes one on top of the other, the lower box is colorswatch {} the other one - // is colorswatch overlay {}, colorswatch has the programmatically set background, so most of the style is - // applied to the overlay box. - - transition: $focus_transition; - - @include focus-ring($width: 4px, $offset: -2px); - - &:drop(active), & { border-style: none; } // FIXME: implement a proper drop(active) state - - $_colorswatch_radius: 5px; - - // base color corners rounding - // to avoid the artifacts caused by rounded corner anti-aliasing the base color - // sports a bigger radius. - // nth-child is needed by the custom color strip. - - &.top { - border-top-left-radius: $_colorswatch_radius + 0.5px; - border-top-right-radius: $_colorswatch_radius + 0.5px; - - > overlay { - border-top-left-radius: $_colorswatch_radius; - border-top-right-radius: $_colorswatch_radius; - } - } - - &.bottom { - border-bottom-left-radius: $_colorswatch_radius + 0.5px; - border-bottom-right-radius: $_colorswatch_radius + 0.5px; - - > overlay { - border-bottom-left-radius: $_colorswatch_radius; - border-bottom-right-radius: $_colorswatch_radius; - } - } - - &.left, - &:first-child:not(.top) { - border-top-left-radius: $_colorswatch_radius + 0.5px; - border-bottom-left-radius: $_colorswatch_radius + 0.5px; - - > overlay { - border-top-left-radius: $_colorswatch_radius; - border-bottom-left-radius: $_colorswatch_radius; - } - } - - &.right, - &:last-child:not(.bottom) { - border-top-right-radius: $_colorswatch_radius + 0.5px; - border-bottom-right-radius: $_colorswatch_radius + 0.5px; - - > overlay { - border-top-right-radius: $_colorswatch_radius; - border-bottom-right-radius: $_colorswatch_radius; - } - } - - &.dark { - > overlay { - color: white; - } - - &.activatable:hover > overlay { - border-color: if($variant == 'light', transparentize(black, 0.2), $borders_color); - } - } - - &.light { - > overlay { - color: black; - } - - &.activatable:hover > overlay { - border-color: if($variant == 'light', transparentize(black, 0.5), $borders_color); - } - } - - &:drop(active) { - box-shadow: none; - - &.light > overlay { - border-color: $drop_target_color; - box-shadow: inset 0 0 0 2px if($variant == 'light', darken($drop_target_color, 7%), $borders_color), - inset 0 0 0 1px $drop_target_color; - } - - &.dark > overlay { - border-color: $drop_target_color; - box-shadow: inset 0 0 0 2px if($variant == 'light', transparentize(black, 0.7), $borders_color), - inset 0 0 0 1px $drop_target_color; - } - } - - > overlay { - border: 1px solid if($variant == 'light', transparentize(black, 0.7), $borders_color); - } - - &.activatable:hover > overlay { - box-shadow: inset 0 1px transparentize(white, 0.6), - inset 0 -1px transparentize(black, 0.8); - } - - &#add-color-button { - > overlay { - @extend %button_basic; - - border: none; - border-radius: $_colorswatch_radius 0 0 $_colorswatch_radius; - } - - &:only-child > overlay { border-radius: $_colorswatch_radius; } - } - - &:disabled { - opacity: 0.5; - - > overlay { - border-color: transparentize(black, 0.4); - box-shadow: none; - } - } - - &#editor-color-sample { - border-radius: 4px; - - > overlay { border-radius: 4.5px; } - } -} - -plane { - transition: $focus_transition; - - @include focus-ring($offset: 2px, $outer: true); -} - -// colorscale popup -colorchooser .popover.osd { border-radius: 5px; } diff --git a/gtk/src/default/gtk-4.0/widgets/_dropdowns.scss b/gtk/src/default/gtk-4.0/widgets/_dropdowns.scss deleted file mode 100644 index e4bfb0268d..0000000000 --- a/gtk/src/default/gtk-4.0/widgets/_dropdowns.scss +++ /dev/null @@ -1,50 +0,0 @@ -dropdown > popover.menu.background > contents { padding: 0; } - -dropdown > button > box { - border-spacing: 6px; - - > stack > row.activatable:hover { - background: none; - } -} - -dropdown, -combobox { - arrow { - -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); - min-height: 16px; - min-width: 16px; - } - - // align menu labels with the button label - > popover.menu > contents modelbutton { - padding-left: 9px; - padding-right: 9px; - } - - &:drop(active) { // FIXME: untested - box-shadow: none; - - button.combo { @extend %button_basic_drop_active; } - } - - // newstyle - popover { - margin-top: 6px; - padding: 0; - - listview { - padding: 8px 0; - - & > row { - padding: 8px; - } - } - - // dropdowns with searchboxes on top - .dropdown-searchbar { - padding: 6px; - border-bottom: 1px solid $borders_color; - } - } -} diff --git a/gtk/src/default/gtk-4.0/widgets/_emoji-chooser.scss b/gtk/src/default/gtk-4.0/widgets/_emoji-chooser.scss deleted file mode 100644 index ffc5f02a3e..0000000000 --- a/gtk/src/default/gtk-4.0/widgets/_emoji-chooser.scss +++ /dev/null @@ -1,87 +0,0 @@ -popover.background.emoji-picker > contents { - padding: 0; -} - -.emoji-searchbar { - padding: 6px; - border-bottom: 1px solid $borders_color; -} - -.emoji-toolbar { - // flowbox children already have 3px padding, so we only need 3px more to - // get the regular 6px. We also don't need spacing, for the same reason. - padding: 3px; - border-top: 1px solid $borders_color; -} - -button.emoji-section { - min-width: 32px; - min-height: 32px; - border-radius: 16px; - - padding: 0; - background: none; - transition: none; - - &:hover { - background: $view_hover_color; - } - - &:checked { - background: $view_selected_color; - - &:hover { - background: $view_selected_hover_color; - } - } - - &:hover:active { - background: $view_active_color; - } -} - -popover.emoji-picker emoji { - font-size: x-large; - padding: 6px; - border-radius: 6px; - - &:focus, - &:hover { - background: $view_selected_color; - - &:active { - background: $view_active_color; - } - } -} - -// Emoji completion popover - -popover.background.emoji-completion > contents { - padding: $menu_margin; - padding-bottom: $menu_margin - 2px; -} - -emoji-completion-row { - // emoji extends quite a bit into the padding, so we can't use the same padding on all sides - padding: $menu_padding - 6px; - margin-bottom: 2px; - border-radius: $menu_radius; - - &:dir(ltr) { padding-right: $menu_padding; } - &:dir(rtl) { padding-left: $menu_padding; } - - > box { - border-spacing: $menu_padding - 6px; - } - - &:focus, - &:hover { - background-color: $view_selected_color; - color: $text-color; - - &:active { - background-color: $view_active_color; // matching buttons - } - } -} diff --git a/gtk/src/default/gtk-4.0/widgets/_entries.scss b/gtk/src/default/gtk-4.0/widgets/_entries.scss deleted file mode 100644 index 095de97440..0000000000 --- a/gtk/src/default/gtk-4.0/widgets/_entries.scss +++ /dev/null @@ -1,115 +0,0 @@ -%entry, -entry { - %entry_basic, & { - min-height: 32px; - padding-left: 8px; - padding-right: 8px; - border: 1px solid; - border-radius: $button_radius; - border-spacing: 6px; - transition: all 200ms $ease-out-quad; - - @include entry(normal); - - @include focus-ring($focus-state: 'focus-within'); - - > text { - > placeholder { - @extend .dim-label; - } - - > block-cursor { - @include entry(block_cursor); - } - } - - &.flat { - &:focus-within, &:disabled, & { - min-height: 0; - padding: 2px; - background-color: transparent; - border-color: transparent; - border-radius: 0; - } - } - - &:disabled { @include entry(insensitive); } - - // entry error and warning style - @each $e_type, $e_color in (error, $error_color), - (warning, $warning_color) { - &.#{$e_type} { - color: mix($e_color, $text_color, 70%); - - @include focus-ring($focus-state: 'focus-within', $fc: transparentize($e_color, 0.5)); - - > text { - > selection:focus-within { background-color: transparentize($e_color, .8); } - - > cursor-handle > contents { background-color: $e_color; } - } - } - } - - > image { // icons inside the entry - color: mix($fg_color, $base_color, 80%); - - &:hover { color: $fg_color; } - - &:active { color: $selected_bg_color; } - - &.left { margin-right: 6px; } - &.right { margin-left: 6px; } - } - - &.password image.caps-lock-indicator { - opacity: 0.5; - } - - &:drop(active) { - &:focus-within, & { - border-color: $drop_target_color; - box-shadow: inset 0 0 0 1px $drop_target_color; - } - } - - .osd & { - @include entry(osd); - - &:focus-within { @include entry(osd-focus); } - - &:disabled { @include entry(osd-insensitive); } - } - } - - > progress { - margin-bottom: 2px; - - > trough > progress { - background-color: transparent; - background-image: none; - border-radius: 0; - border-width: 0 0 2px; - border-color: $selected_bg_color; - border-style: solid; - box-shadow: none; - } - } -} - -treeview entry { - &:focus-within { - &:dir(rtl), &:dir(ltr) { // specificity bump hack - background-color: $base_color; - transition-property: color, background; - } - } - - &.flat, & { - border-radius: 0; - background-image: none; - background-color: $base_color; - - &:focus-within { border-color: $selected_bg_color; } - } -} diff --git a/gtk/src/default/gtk-4.0/widgets/_expanders.scss b/gtk/src/default/gtk-4.0/widgets/_expanders.scss deleted file mode 100644 index 9c45ad7cc6..0000000000 --- a/gtk/src/default/gtk-4.0/widgets/_expanders.scss +++ /dev/null @@ -1,23 +0,0 @@ -expander { - min-width: 16px; - min-height: 16px; - -gtk-icon-source: -gtk-icontheme('pan-end-symbolic'); - &:dir(rtl) { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic-rtl'); } - - &:disabled { color: $insensitive_fg_color; } - - &:checked { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); } -} - -expander-widget { - @include focus-ring("> box > title"); - - > box > title { - transition: $focus_transition; - border-radius: $button_radius; - - &:hover > expander { - color: lighten($fg_color,30%); //only lightens the icon - } - } -} diff --git a/gtk/src/default/gtk-4.0/widgets/_file-chooser.scss b/gtk/src/default/gtk-4.0/widgets/_file-chooser.scss deleted file mode 100644 index a7111bb7a2..0000000000 --- a/gtk/src/default/gtk-4.0/widgets/_file-chooser.scss +++ /dev/null @@ -1,52 +0,0 @@ -placesview { - .server-list-button > image { - transition: 200ms $ease-out-quad; - -gtk-icon-transform: rotate(0turn); - } - - .server-list-button:checked > image { - transition: 200ms $ease-out-quad; - -gtk-icon-transform: rotate(-0.5turn); - } - - row.activatable:hover { } - - > actionbar > revealer > box > box{ - border-spacing: 6px; - } -} - -filechooser { - .dialog-action-box { - border-top: 1px solid $borders_color; - } - - #pathbarbox { border-bottom: 1px solid $bg_color; } - - pathbar > button { - &.text-button, &.image-button, & { - padding-left: 5px; - padding-right: 5px; - } - - &.text-button.image-button label { - padding-left: 0; - padding-right: 0; - } - - &.text-button.image-button, & { - label:last-child { padding-right: 8px; } - label:first-child { padding-left: 8px; } - } - - image { - padding-left: 4px; - padding-right: 4px; - } - - &.slider-button { - padding-left: 0; - padding-right: 0; - } - } -} diff --git a/gtk/src/default/gtk-4.0/widgets/_header-bar.scss b/gtk/src/default/gtk-4.0/widgets/_header-bar.scss deleted file mode 100644 index be4784c0ee..0000000000 --- a/gtk/src/default/gtk-4.0/widgets/_header-bar.scss +++ /dev/null @@ -1,167 +0,0 @@ -$_header_bar_color: darken($bg_color, 10%); -$_header_bar_gradient: linear-gradient(to top, darken($_header_bar_color, 0%), lighten($_header_bar_color, 0%)); // Yaru change: no gradients -$_backdrop_header_bar_color: $bg_color; // Yaru change: add backdrop var for inverted headerbar - -@if $variant == 'dark' { - $_header_bar_gradient: linear-gradient(to top, lighten($_header_bar_color, 6%), lighten($_header_bar_color, 6%)); -} - -@if $ambiance { // Yaru change: add ambiance style vars - $_header_bar_color: $bg_color; - $_header_bar_gradient: linear-gradient(to top, $_header_bar_color, $_header_bar_color); - $_backdrop_header_bar_color: lighten($_header_bar_color, 5%); -} - -headerbar { - padding: 0 6px; - min-height: 46px; - border-width: 0 0 1px; - border-style: solid; - border-color: $alt_borders_color; - @if $ambiance { - box-shadow: inset 0 1px lighten($_header_bar_color, 6%); // Yaru change: add top highlight for the ambiance version - background-image: $_header_bar_gradient; // Yaru change - } else { // Yaru change - background-color: $headerbar_bg_color; // Yaru change - } // Yaru change - color: $fg_color; // Yaru change: reinsert color for inverted headerbar - - > windowhandle > box { - &, - > box.start, - > box.end { - border-spacing: 6px; - } - } - - &:backdrop { - background-color: $headerbar_bg_color; - - transition: $backdrop_transition; - - > windowhandle { - // opacity looks weird with GtkSwitch, but filter works fine - filter: opacity(0.5); - - transition: $backdrop_transition; - } - } - - &.default-decoration { - min-height: 28px; - padding: 4px; - - windowcontrols { - button, - menubutton { - min-height: 28px; - min-width: 28px; - margin: 0; - padding: 0; - } - - menubutton button { - min-height: 22px; - min-width: 22px; - margin: 0; - padding: 4px; - } - } - } - - .solid-csd & { - &:backdrop, & { - &:dir(rtl), &:dir(ltr) { // specificity bump - margin-left: -1px; - margin-right: -1px; - margin-top: -1px; - } - } - } - - // add vertical margins to common widget on the headerbar to avoid them spanning the whole height - entry, - spinbutton, - separator:not(.sidebar), - button, - menubutton { - margin-top: 6px; - margin-bottom: 6px; - } - - // Reset margins for buttons inside menubutton - menubutton > button { - margin-top: 0px; - margin-bottom: 0px; - } - - switch { - margin-top: 10px; - margin-bottom: 10px; - } -} - -.titlebar:not(headerbar) { - separator { background-color: $borders_color; } // FIXME: use darker border? -} - -/********************* - * GtkWindowControls * - *********************/ - -windowcontrols { - border-spacing: 6px; - - button { - @extend %button_basic_flat; - - border-radius: 9999px; - padding: 2px; // Yaru change: smaller window controls - margin: 0 7px; // Yaru change: increase vertical margin because of smaller window controls - min-width: 0; - min-height: 0; - } -} - -/****************** - * AdwWindowTitle * - ******************/ - -headerbar, -windowtitle { - .title { - padding-left: 12px; - padding-right: 12px; - font-weight: bold; - } - - .subtitle { - font-size: smaller; - padding-left: 12px; - padding-right: 12px; - @extend .dim-label; - } -} - -// Development versions of apps to use a differently styled headerbar - -window.devel { - headerbar { - $gradient: cross-fade(10% -gtk-icontheme("system-run-symbolic"), image(transparent)) 90% 0/256px 256px no-repeat, - linear-gradient(to right, transparent 65%, transparentize($selected_bg_color, 0.8)); - - @if $variant == 'dark' { - $gradient: cross-fade(10% -gtk-icontheme("system-run-symbolic"), image(transparent)) 90% 0/256px 256px no-repeat, - linear-gradient(to right, transparent 65%, transparentize($selected_bg_color, 0.9)); - } - - background: $headerbar_bg_color $gradient; - - &:backdrop { - $gradient: cross-fade(5% -gtk-icontheme("system-run-symbolic"), image(transparent)) 90% 0/256px 256px no-repeat, - linear-gradient(to right, transparent 65%, transparent); - - background: $headerbar_bg_color $gradient; - } - } -} diff --git a/gtk/src/default/gtk-4.0/widgets/_labels.scss b/gtk/src/default/gtk-4.0/widgets/_labels.scss deleted file mode 100644 index 297eeb9fdc..0000000000 --- a/gtk/src/default/gtk-4.0/widgets/_labels.scss +++ /dev/null @@ -1,80 +0,0 @@ -label { - @include focus-ring(); - - &.separator { - @extend .dim-label; - } - - &:disabled { - filter: opacity(0.5); - } - - &.error { - color: $error_color; - } -} - -.dim-label { - opacity: $dim_label_opacity; -} - -/********************** - * General Typography * - **********************/ - -.large-title { - font-weight: 300; - font-size: 24pt; -} - -.title-1 { - font-weight: 800; - font-size: 20pt; -} - -.title-2 { - font-weight: 800; - font-size: 15pt; -} - -.title-3 { - font-weight: 700; - font-size: 15pt; -} - -.title-4 { - font-weight: 700; - font-size: 13pt; -} - -.heading { - font-weight: 700; - font-size: 11pt; -} - -.body { - font-weight: 400; - font-size: 11pt; -} - -.caption-heading { - font-weight: 700; - font-size: 9pt; -} - -.caption { - font-weight: 400; - font-size: 9pt; -} - -.monospace { - font-family: monospace; -} - -/******************* - * Editable Labels * - *******************/ - -editablelabel > stack > text { - @include entry(normal); -} diff --git a/gtk/src/default/gtk-4.0/widgets/_level-bar.scss b/gtk/src/default/gtk-4.0/widgets/_level-bar.scss deleted file mode 100644 index 02df038ff5..0000000000 --- a/gtk/src/default/gtk-4.0/widgets/_level-bar.scss +++ /dev/null @@ -1,100 +0,0 @@ -$_levelbar_size: 11px; -$_levelbar_border_radius: 6px; - -levelbar { - &:disabled { - filter: opacity(.5); - } - - &.horizontal { - trough > block { - min-height: $_levelbar_size; - border-radius: $_levelbar_border_radius; - - &:dir(rtl) { - border-radius: 0 $_levelbar_border_radius $_levelbar_border_radius 0; - } - - &:dir(ltr) { - border-radius: $_levelbar_border_radius 0 0 $_levelbar_border_radius; - } - - &.empty, - &.full { - border-radius: $_levelbar_border_radius; - } - } - - // segmented level bar - &.discrete > trough > block { - min-height: $_levelbar_size - 7px; - margin: 1px; - min-width: 26px; - border-radius: 0; - - &:first-child { - border-radius: 2px 0 0 2px; - } - - &:last-child { - border-radius: 0 2px 2px 0; - } - } - } - - &.vertical { - trough > block { - min-width: $_levelbar_size; - border-radius: $_levelbar_border_radius $_levelbar_border_radius 0 0; - - &.empty, - &.full { - border-radius: $_levelbar_border_radius; - } - } - - // segmented level bar - &.discrete > trough > block { - min-width: $_levelbar_size - 7px; - margin: 1px; - min-height: 26px; - border-radius: 0; - - &:first-child { - border-radius: 2px 2px 0 0; - } - - &:last-child { - border-radius: 0 0 2px 2px; - } - } - } - - > trough { - padding: 0; - - // level bar colours - > block { - &.low { - background-color: $warning_color; - } - - &.high, - &:not(.empty) { - background-color: $success_color; // Yaru change: use our own palette - } - - &.full { - background-color: $success_color; - } - - &.empty { - background-color: $trough_color; - - @if $contrast == "high" { - box-shadow: inset 0 0 0 1px $borders_color; - } - } - } - } -} diff --git a/gtk/src/default/gtk-4.0/widgets/_linked.scss b/gtk/src/default/gtk-4.0/widgets/_linked.scss deleted file mode 100644 index 68bbf225c1..0000000000 --- a/gtk/src/default/gtk-4.0/widgets/_linked.scss +++ /dev/null @@ -1,47 +0,0 @@ -// .linked > element child -$_linked_widgets: ("%button", ""), - ("button", ""), - ("menubutton", "> button"), - ("dropdown", "> button"), - ("colorbutton", "> button"), - ("fontbutton", "> button"), - ("combobox", "> box > button.combo"), - ("appchooserbutton", "> combobox > box > button.combo"), - ("%entry", ""), - ("entry", ""); - -.linked { - border-spacing: 3px; -} - -@each $widget, $child in $_linked_widgets { - .linked:not(.vertical) > { - #{$widget} { - &:dir(ltr):not(:first-child) #{$child}, - &:dir(rtl):not(:last-child) #{$child} { - border-top-left-radius: 2px; - border-bottom-left-radius: 2px; - } - - &:dir(ltr):not(:last-child) #{$child}, - &:dir(rtl):not(:first-child) #{$child} { - border-top-right-radius: 2px; - border-bottom-right-radius: 2px; - } - } - } - - .linked.vertical { - #{$widget} { - &:not(:first-child) #{$child} { - border-top-left-radius: 2px; - border-top-right-radius: 2px; - } - - &:not(:last-child) #{$child} { - border-bottom-left-radius: 2px; - border-bottom-right-radius: 2px; - } - } - } -} diff --git a/gtk/src/default/gtk-4.0/widgets/_links.scss b/gtk/src/default/gtk-4.0/widgets/_links.scss deleted file mode 100644 index 6b87b5d89d..0000000000 --- a/gtk/src/default/gtk-4.0/widgets/_links.scss +++ /dev/null @@ -1,39 +0,0 @@ -%link, -link { - color: $link_color; - text-decoration: underline; - - &:visited { - color: $link_visited_color; - } - - &:hover { - $_fg: lighten($link_color, 10%); - color: $_fg; - } - - &:active { - color: $link_color; - } - - &:disabled { color: transparentize(desaturate($link_color, 100%), 0.2); } -} - -link { - @include focus-ring(); -} - -button.link { - @extend %link; - - &, - &:hover, - &:active, - &:checked { - @extend %undecorated_button; - } - - > label { - text-decoration: underline; - } -} diff --git a/gtk/src/default/gtk-4.0/widgets/_lists.scss b/gtk/src/default/gtk-4.0/widgets/_lists.scss deleted file mode 100644 index 15dabb6edd..0000000000 --- a/gtk/src/default/gtk-4.0/widgets/_lists.scss +++ /dev/null @@ -1,295 +0,0 @@ -listview, -list { - color: $text_color; - background-color: $base_color; - border-color: $borders_color; - - > row { padding: 2px; } - > row.expander { padding: 0px; } - > row.expander .row-header { padding: 2px; } - - &.horizontal row.separator, - &.separators.horizontal > row:not(.separator) { - border-left: 1px solid $treeview_borders_color; - } - &:not(.horizontal) row.separator, - &.separators:not(.horizontal) > row:not(.separator) { - border-bottom: 1px solid $treeview_borders_color; - } -} - -row { - @include focus-ring($focus-state: 'focus-visible:focus-within'); - - &.activatable { - &.has-open-popup, // this is for indicathing which row generated a popover see https://bugzilla.gnome.org/show_bug.cgi?id=754411 - &:hover { background-color: $view_hover_color; } - - &:active { background-color: $view_active_color; } - - &:selected { - &.has-open-popup, - &:hover { background-color: $view_selected_hover_color; } - - &:active { background-color: $view_selected_active_color; } - } - } - - &:selected { - background-color: $view_selected_color; - } - - &:disabled { color: gtkalpha(currentColor, .55); } -} - -/******************************************************* - * Rich Lists * - * Large list usually containing lots of widgets * - * https://gitlab.gnome.org/GNOME/gtk/-/issues/3073 * - *******************************************************/ - -.rich-list { /* rich lists usually containing other widgets than just labels/text */ - & > row { - padding: 8px 12px; - min-height: 32px; /* should be tall even when only containing a label */ - - & > box { - border-spacing: 12px; - } - } -} - -/**************** - * AdwActionRow * - ****************/ - -row { - label.subtitle { - font-size: smaller; - @extend .dim-label; - } - - > box.header { - margin-left: 12px; - margin-right: 12px; - min-height: 50px; - - > box.title { - margin-top: 8px; - margin-bottom: 8px; - } - } -} - -/*************** - * AdwComboRow * - ***************/ - -popover.background.combo > contents { - padding: 0px; - - list, listview { - border-style: none; - background-color: transparent; - min-width: 200px; - - & > row { - padding: 0px 12px 0px 12px; - min-height: 50px; - border-bottom: 1px solid transparentize($borders_color, 0.5); - - &:first-child { - border-top-left-radius: $popover_radius - 2; - border-top-right-radius: $popover_radius - 2; - } - - &:last-child { - border-bottom-left-radius: $popover_radius - 2; - border-bottom-right-radius: $popover_radius - 2; - border-bottom: none; - } - } - } - - scrollbar.vertical { - padding-top: 2px; - padding-bottom: 2px; - } -} - -listview.inline { - background: none; -} - -/****************** - * AdwExpanderRow * - ******************/ - -@mixin margin-start($margin) { - &:dir(ltr) { - margin-left: $margin; - } - - &:dir(rtl) { - margin-right: $margin; - } -} - -row.expander { - // Drop transparent background on expander rows to let nested rows handle it, - // avoiding double highlights. - background-color: transparent; - padding: 0px; - - list.nested > row { - background-color: transparentize($bg_color, 0.5); - border-color: transparentize($borders_color, 0.3); - border-style: solid; - border-width: 1px 0px 0px 0px; - } - - // AdwExpanderRow arrow rotation - - image.expander-row-arrow { - transition: 200ms $ease-out-quad; - @include margin-start(6px); - } - - &:checked image.expander-row-arrow { - -gtk-icon-transform: rotate(0turn); - } - - &:not(:checked) image.expander-row-arrow { - @extend .dim-label; - - &:dir(ltr) { - -gtk-icon-transform: rotate(-0.25turn); - } - - &:dir(rtl) { - -gtk-icon-transform: rotate(0.25turn); - } - } - - &:checked image.expander-row-arrow:not(:disabled) { - color: $selected_bg_color; - } - - & image.expander-row-arrow:disabled { - color: $insensitive_fg_color; - } -} - -/***************** - * Content Lists * - *****************/ - -// Makes the corners of the given border rounded. -// $border must be top, bottom, left, or right. -@mixin rounded-border($border) { - // The floors (top, bottom) and walls (left, right) of the corners matching - // $border. This is needed to easily form floor-wall pairs regardless of - // whether $border is a floor or a wall. - $corners: ( - 'top': (('top'), ('left', 'right')), - 'bottom': (('bottom'), ('left', 'right')), - 'left': (('top', 'bottom'), ('left')), - 'right': (('top', 'bottom'), ('right')), - ); - - @if not map-get($corners, $border) { - @error "Unknown border type: #{$border}"; - } - - // Loop through the floors and walls of the corners of $border. - @each $floor in nth(map-get($corners, $border), 1) { - @each $wall in nth(map-get($corners, $border), 2) { - border-#{$floor}-#{$wall}-radius: 8px; - } - } -} - -list.content, -listview.content { - &, - list { - background-color: transparent; - } - - // Nested rows background - list.nested > row:not(:active) { - &:not(:hover):not(:selected), - &:hover:not(.activatable):not(:selected) { - background-color: mix($bg_color, $base_color, 50%); - } - - &:hover.activatable:not(:selected) { - background-color: mix($fg_color, $base_color, 5%); - } - } - - > row { - // Regular rows and expander header rows background - &:not(.expander):not(:active):not(:hover):not(:selected), - &:not(.expander):not(:active):hover:not(.activatable):not(:selected), - &.expander row.header:not(:active):not(:hover):not(:selected), - &.expander row.header:not(:active):hover:not(.activatable):not(:selected) { - background-color: $base_color; - } - - &:not(.expander):hover.activatable:not(:selected), - &.expander row.header:hover.activatable:not(:selected) { - background-color: mix($fg_color, $base_color, 5%); - - &:active { - background-color: mix($fg_color, $base_color, 10%); - } - } - - &, - list > row { - border-color: transparentize($borders_color, 0.3); - border-style: solid; - transition: 200ms $ease-out-quad; - } - - // Top border - &:not(:last-child) { - border-width: 1px 1px 0px 1px; - } - - // Rounded top - &:first-child, - &.expander:first-child row.header, - &.expander:checked, - &.expander:checked row.header, - &.expander:checked + row, - &.expander:checked + row.expander row.header { - @include rounded-border(top); - } - - // Bottom border - &:last-child, - &.checked-expander-row-previous-sibling, - &.expander:checked { - border-width: 1px; - } - - // Rounded bottom - &:last-child, - &.checked-expander-row-previous-sibling, - &.expander:checked, - &.expander:not(:checked):last-child row.header, - &.expander:not(:checked).checked-expander-row-previous-sibling row.header, - &.expander.empty:checked row.header, - &.expander list.nested > row:last-child { - @include rounded-border(bottom); - } - - // Add space around expanded rows - &.expander:checked:not(:first-child), - &.expander:checked + row { - margin-top: 6px; - } - } -} diff --git a/gtk/src/default/gtk-4.0/widgets/_menus.scss b/gtk/src/default/gtk-4.0/widgets/_menus.scss deleted file mode 100644 index 0f5eed1474..0000000000 --- a/gtk/src/default/gtk-4.0/widgets/_menus.scss +++ /dev/null @@ -1,168 +0,0 @@ -popover.menu { - padding: 0; - - box.inline-buttons { - padding: 0 $menu_padding; - - button.image-button.model { - @extend %button_basic_flat; - - min-height: 30px; - min-width: 30px; - padding: 0; - border: none; - outline: none; - transition: none; - - &:selected { - background-color: $view_selected_color; - - &:active { - background-color: $view_selected_active_color; - } - } - } - } - - box.circular-buttons { - padding: $menu_padding $menu_padding 6px; - - button.circular.image-button.model { - @extend %outline_button; - - outline: none; - padding: 11px; - &:selected { - background-color: $view_selected_color; - - &:active { - background-color: $view_selected_active_color; - } - } - } - } - - & > arrow, - &.background > contents { - background-color: $menu_color; - padding: $menu-margin; - } - - &.background separator { - margin: 6px 0; - } - - accelerator { - color: gtkalpha(currentColor, 0.55); - - &:dir(ltr) { margin-left: $menu_padding; } - &:dir(rtl) { margin-right: $menu_padding; } - } - - check, - radio { - &, &:hover, &:hover:active, &:checked, &:disabled { - background: none; - color: $text_color; - - transform: scale(0.8); - } - } - - //only menu radios have a border - radio { - padding: 0; - border: 1.2px solid transparentize($text_color, if($contrast == "high", 0, 0.7)); - } - - check, - radio, - arrow { - &.left { - margin-left: -2px; - margin-right: 6px; - } - - &.right { - margin-left: 6px; - margin-right: -2px; - } - } - - modelbutton { - min-height: 30px; - min-width: 40px; - padding: 0 $menu_padding; - border-radius: $menu-margin; - - @extend %undecorated_button; - - &:hover, - &:selected { - color: $text-color; - background-color: $view_selected_color; - - &:active { - background-color: $view_selected_active_color; // matching buttons - } - } - - arrow { - background: none; - min-width: 16px; - min-height: 16px; - @if $contrast != "high" { - opacity: 0.3; // dim icon - } - - &:hover { background: none; } - - &:disabled { - filter: opacity(0.5); - } - - &.left { -gtk-icon-source: -gtk-icontheme("go-previous-symbolic"); } - - &.right { -gtk-icon-source: -gtk-icontheme("go-next-symbolic"); } - } - } - - label.title { - font-weight: bold; - padding: 4px ($menu_padding + 20px); //this will fall apart with font sizing - } -} - -menubar { - padding: 0px; - box-shadow: inset 0 -1px transparentize(black, 0.9); - - > item { - min-height: 16px; - padding: 4px 8px; - border-radius: $button_radius; - - &:selected { //Seems like it :hover even with keyboard focus - background-color: $view_selected_color; - } - - &:disabled { - color: $insensitive_fg_color; - box-shadow: none; - } - - popover.menu.background > contents { - padding: $menu-margin; - } - - //nested submenus - popover.menu popover.menu { - padding: 0 0 4px 0; - } - - popover.menu.background popover.menu.background > contents { - margin: 0; - border-radius: $popover_radius; //including top - } - } -} diff --git a/gtk/src/default/gtk-4.0/widgets/_message-dialog.scss b/gtk/src/default/gtk-4.0/widgets/_message-dialog.scss deleted file mode 100644 index 968b124f82..0000000000 --- a/gtk/src/default/gtk-4.0/widgets/_message-dialog.scss +++ /dev/null @@ -1,48 +0,0 @@ -window.dialog.message { - .titlebar { - min-height: 20px; - background-image: none; - background-color: $bg_color; - border-style: none; - border-top-left-radius: 7px; - border-top-right-radius: 7px; - } - - box.dialog-vbox.vertical { - border-spacing: 10px; - } - - & label.title { - font-weight: 800; - font-size: 15pt; - } - - &.csd { - &.background { - // bigger radius for better antialiasing - border-bottom-left-radius: $window_radius+1; - border-bottom-right-radius: $window_radius+1; - } - - .dialog-action-area { - border-top: 1px solid $borders_color; - - > button { - @extend %button_basic_flat; - padding: 10px 14px; // labels are not vertically centered on message dialog, this is a workaround - border-radius: 0; - border: none; - border-left: 1px solid $borders_color; - - &:first-child { - border-bottom-left-radius: $window_radius+1; - border-left: none; - } - - &:last-child { - border-bottom-right-radius: $window_radius+1; - } - } - } - } -} diff --git a/gtk/src/default/gtk-4.0/widgets/_misc.scss b/gtk/src/default/gtk-4.0/widgets/_misc.scss deleted file mode 100644 index 516c2ff641..0000000000 --- a/gtk/src/default/gtk-4.0/widgets/_misc.scss +++ /dev/null @@ -1,148 +0,0 @@ -/********** - * Frames * - **********/ -frame, -.frame { - border: 1px solid $borders_color; -} - -frame { - border-radius: $window_radius; - - > label { - margin: 4px; - } -} - -/************** - * Separators * - **************/ - -separator { - background: lighten($borders_color, 5%); - min-width: 1px; - min-height: 1px; -} - -/********************* - * App Notifications * - *********************/ - -.app-notification { - @extend %osd; - - padding: 10px; - border-spacing: 10px; - border-radius: 0 0 5px 5px; - background-color: $osd_bg_color; - background-image: linear-gradient(to bottom, transparentize(black, 0.8), - transparent 2px); - background-clip: padding-box; - - border { border: none; } -} - -/************** - * GtkVideo * - **************/ - -video { - & image.osd { - min-width: 64px; - min-height: 64px; - border-radius: 32px; - } - background: black; -} - -/****************** - * GtkScaleButton * - ******************/ - -.scale-popup { - .osd & { @extend %osd; } - - button { // +/- buttons on GtkVolumeButton popup - @extend %button_basic_flat; - } -} - -/**************** - * Print dialog * -*****************/ - -window.dialog.print { - drawing { - color: $fg_color; - background: none; - border: none; - padding: 0; - - paper { - background: white; - color: #2e3436; - border: 1px solid $borders_color; - } - } - - .dialog-action-box { margin: 12px; } -} - -/**************** - * GtkAssistant * - ****************/ - -window.assistant { - .sidebar { - padding: $menu-margin; - border-top: 1px solid $borders_color; - } - - &.csd .sidebar { border-top-style: none; } - - .sidebar > label { padding: 6px 12px; } - - .sidebar > label.highlight { - background-color: $view_selected_color; - border-radius: $menu-margin; - } -} - -/**************** - * GtkAboutDialog * - ****************/ - -window.aboutdialog image.large-icons { - -gtk-icon-size: 128px; -} - -/**************** - * GtkStatusBar * - ****************/ - -statusbar { - padding: 6px 10px 6px 10px; -} - -/***************** - * AdwStatusPage * - *****************/ - -statuspage > scrolledwindow > viewport > box { - margin: 36px 12px; - border-spacing: 36px; - - > clamp > box { - border-spacing: 12px; - - > .icon { - @if $contrast == 'normal' { - color: transparentize($fg_color, 0.5); - } - - &:not(:last-child) { - margin-bottom: 24px; - } - } - } -} diff --git a/gtk/src/default/gtk-4.0/widgets/_notebook.scss b/gtk/src/default/gtk-4.0/widgets/_notebook.scss deleted file mode 100644 index eb262fd5f9..0000000000 --- a/gtk/src/default/gtk-4.0/widgets/_notebook.scss +++ /dev/null @@ -1,233 +0,0 @@ -notebook { - @include focus-ring("> header > tabs > tab:checked", $offset: -2px, $focus-state: 'focus:focus-visible'); - - > header { - padding: 1px; - border-color: $borders_color; - border-width: 1px; - background-color: $dark_fill; - - > tabs { margin: -1px; } - - &.top { - border-bottom-style: solid; - > tabs { - margin-bottom: -2px; - > tab { - &:hover { box-shadow: inset 0 -4px $borders_color; } - - - &:checked { box-shadow: inset 0 -4px $selected_bg_color; } - } - } - } - - &.bottom { - border-top-style: solid; - > tabs { - margin-top: -2px; - > tab { - &:hover { box-shadow: inset 0 4px $borders_color; } - - &:checked { box-shadow: inset 0 4px $selected_bg_color; } - } - } - } - - &.left { - border-right-style: solid; - > tabs { - margin-right: -2px; - > tab { - &:hover { box-shadow: inset -4px 0 $borders_color; } - - &:checked { box-shadow: inset -4px 0 $selected_bg_color; } - } - } - } - - &.right { - border-left-style: solid; - > tabs { - margin-left: -2px; - > tab { - &:hover { box-shadow: inset 4px 0 $borders_color; } - - &:checked { box-shadow: inset 4px 0 $selected_bg_color; } - } - } - } - - &.top > tabs > arrow { - @extend %notebook_vert_arrows; - - border-top-style: none; - } - - &.bottom > tabs > arrow { - @extend %notebook_vert_arrows; - - border-bottom-style: none; - } - - @at-root %notebook_vert_arrows { - margin-left: -5px; - margin-right: -5px; - padding-left: 4px; - padding-right: 4px; - - &.down { -gtk-icon-source: -gtk-icontheme('pan-start-symbolic'); } - - &.up { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic'); } - } - - &.left > tabs > arrow { - @extend %notebook_horz_arrows; - - border-left-style: none; - } - - &.right > tabs > arrow { - @extend %notebook_horz_arrows; - - border-right-style: none; - } - - @at-root %notebook_horz_arrows { - margin-top: -5px; - margin-bottom: -5px; - padding-top: 4px; - padding-bottom: 4px; - - &.down { -gtk-icon-source: -gtk-icontheme('pan-up-symbolic'); } - - &.up { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); } - } - - > tabs > arrow { - @extend %button_basic; - @extend %button_basic_flat; - - min-height: 16px; - min-width: 16px; - border-radius: 0; - - &:hover:not(:active) { - box-shadow: none; - } - } - - > tabs > tab { - transition: $focus_transition; - min-height: 30px; - min-width: 30px; - padding: 3px 12px; - - color: $fg_color; - font-weight: normal; - - border-width: 1px; // for reorderable tabs - border-color: transparent; // - - &:hover { - color: $fg_color; - background-color: darken($dark_fill,4%); - - &.reorderable-page { - border-color: transparentize($borders_color, 0.7); - background-color: transparentize($bg_color, 0.8); - } - } - - &:not(:checked) { - outline-color: transparent; - } - - &:checked { - color: $fg_color; - &.reorderable-page { - border-color: transparentize($borders_color, 0.5); - background-color: transparentize($bg_color, 0.5); - - &:hover { background-color: transparentize($bg_color, 0.3); } - } - } - - // colors the button like the label, overridden otherwise - button.flat { - color: gtkalpha(currentColor, 0.3); - &:hover { color: currentColor; } - - padding: 0; - margin-top: 4px; - margin-bottom: 4px; - // FIXME: generalize .small-button? - min-width: 20px; - min-height: 20px; - - &:last-child { - margin-left: 4px; - margin-right: -4px; - } - - &:first-child { - margin-left: -4px; - margin-right: 4px; - } - } - } - - &.top, - &.bottom { - > tabs { - padding-left: 4px; - padding-right: 4px; - - &:not(:only-child) { - margin-left: 3px; - margin-right: 3px; - - &:first-child { margin-left: -1px; } - &:last-child { margin-right: -1px; } - } - - > tab { - margin-left: 4px; - margin-right: 4px; - - &.reorderable-page { border-style: none solid; } - } - } - } - - &.left, - &.right { - > tabs { - padding-top: 4px; - padding-bottom: 4px; - - &:not(:only-child) { - margin-top: 3px; - margin-bottom: 3px; - - &:first-child { margin-top: -1px; } - &:last-child { margin-bottom: -1px; } - } - - > tab { - margin-top: 4px; - margin-bottom: 4px; - - &.reorderable-page { border-style: solid none; } - } - } - } - - &.top > tabs > tab { padding-bottom: 4px; } - &.bottom > tabs > tab { padding-top: 4px; } - } - - > stack:not(:only-child) { // the :not(:only-child) is for "hidden" notebooks - background-color: $base_color; - } -} diff --git a/gtk/src/default/gtk-4.0/widgets/_paned.scss b/gtk/src/default/gtk-4.0/widgets/_paned.scss deleted file mode 100644 index 09f2681f50..0000000000 --- a/gtk/src/default/gtk-4.0/widgets/_paned.scss +++ /dev/null @@ -1,58 +0,0 @@ -paned { - > separator { - min-width: 1px; - min-height: 1px; - -gtk-icon-source: none; // defeats the ugly default handle decoration - border-style: none; // just to be sure - background-color: transparent; - // workaround, using background instead of a border since the border will get rendered twice (?) - background-image: image($borders_color); - background-size: 1px 1px; - - &:selected { background-image: image($selected_bg_color); } // FIXME is this needed? - - &.wide { - min-width: 5px; - min-height: 5px; - background-color: $bg_color; - background-image: image($borders_color), image($borders_color); - background-size: 1px 1px, 1px 1px; - } - } - - &.horizontal > separator { - background-repeat: repeat-y; - - &:dir(ltr) { - margin: 0 -8px 0 0; - padding: 0 8px 0 0; - background-position: left; - } - &:dir(rtl) { - margin: 0 0 0 -8px; - padding: 0 0 0 8px; - background-position: right; - } - - &.wide { - margin: 0; - padding: 0; - background-repeat: repeat-y, repeat-y; - background-position: left, right; - } - } - - &.vertical > separator { - margin: 0 0 -8px 0; - padding: 0 0 8px 0; - background-repeat: repeat-x; - background-position: top; - - &.wide { - margin: 0; - padding: 0; - background-repeat: repeat-x, repeat-x; - background-position: bottom, top; - } - } -} diff --git a/gtk/src/default/gtk-4.0/widgets/_popovers.scss b/gtk/src/default/gtk-4.0/widgets/_popovers.scss deleted file mode 100644 index 627a779825..0000000000 --- a/gtk/src/default/gtk-4.0/widgets/_popovers.scss +++ /dev/null @@ -1,57 +0,0 @@ -popover.background { - background-color: transparent; - font: initial; // Decouple the font of popovers from their entry/textview - - > arrow, - > contents { - $_popover_border: if($variant=='light', transparentize(black, 0.77), transparentize(black, 0.25)); - - background-color: $menu_color; - background-clip: padding-box; - border: 1px solid $_popover_border; - box-shadow: 0 1px 2px transparentize(black, 0.7); - - @if $variant == 'dark' { - $_popover_outline: if($contrast=='high', transparentize(white, .7), transparentize(white, .9)); - - // Add an outline and move border to box-shadow instead - background-clip: border-box; - border-color: $_popover_outline; - box-shadow: 0 0 0 1px $_popover_border, - 0 1px 2px 1px transparentize(black, 0.7); - } - } - - > contents { - padding: 8px; - border-radius: $popover_radius; - - > list, - > .view, - > toolbar { - border-style: none; - background-color: transparent; - } - - separator { - background-color: mix($bg_color, $borders_color, 30%); - margin: 3px; - } - - list separator { margin: 0; } - } - - .osd &, - &.touch-selection, - &.magnifier { - background-color: transparent; - - > arrow, - > contents { - @extend %osd; - - border: 1px solid transparentize(white, 0.9); - box-shadow: none; - } - } -} diff --git a/gtk/src/default/gtk-4.0/widgets/_preferences.scss b/gtk/src/default/gtk-4.0/widgets/_preferences.scss deleted file mode 100644 index 6af76a53a5..0000000000 --- a/gtk/src/default/gtk-4.0/widgets/_preferences.scss +++ /dev/null @@ -1,30 +0,0 @@ -window.preferences > contents > leaflet > box > stack > stack > scrolledwindow > viewport > clamp > list, -preferencespage > scrolledwindow > viewport > clamp > box { - margin: 0 12px; - - transition: margin-bottom 200ms ease, - margin-top 200ms ease, - border-spacing 200ms ease; - - $sizes: ("small": 18px, "medium": 24px, "large": 30px); - - @each $name, $size in $sizes { - &.#{$name} { - margin-top: $size; - margin-bottom: $size; - border-spacing: $size; - } - } -} - -preferencesgroup > box { - // Add space between the description and the title. - > label:not(:first-child) { - margin-top: 6px; - } - - // Add space between the box and the labels. - > box:not(:first-child) { - margin-top: 12px; - } -} diff --git a/gtk/src/default/gtk-4.0/widgets/_progress-bar.scss b/gtk/src/default/gtk-4.0/widgets/_progress-bar.scss deleted file mode 100644 index 8cfb203e18..0000000000 --- a/gtk/src/default/gtk-4.0/widgets/_progress-bar.scss +++ /dev/null @@ -1,76 +0,0 @@ -progressbar { - // sizing - &.horizontal { - > trough { - min-width: 150px; - &, > progress { min-height: 4px; } - } - } - - &.vertical { - > trough { - min-height: 80px; - &, > progress { min-width: 4px; } - } - } - - // FIXME: insensitive state missing and some other state should be set probably - font-size: smaller; - color: transparentize($fg_color, 0.6); - font-feature-settings: "tnum"; - - &:disabled { - filter: opacity(.5); - } - - > trough { - @extend %scale_trough; - - > progress { - @extend %scale_highlight; /* share most of scales' */ - - border-radius: 1.5px; - - $_progress-radius: 5px; - &.left { - border-top-left-radius: $_progress-radius; - border-bottom-left-radius: $_progress-radius; - } - - &.right { - border-top-right-radius: $_progress-radius; - border-bottom-right-radius: $_progress-radius; - } - - &.top { - border-top-right-radius: $_progress-radius; - border-top-left-radius: $_progress-radius; - } - - &.bottom { - border-bottom-right-radius: $_progress-radius; - border-bottom-left-radius: $_progress-radius; - } - } - } - - &.osd { // progressbar.osd used for epiphany page loading progress - min-width: 3px; - min-height: 3px; - background-color: transparent; - - > trough { - border-style: none; - border-radius: 0; - background-color: transparent; - box-shadow: none; - - > progress { - border-style: none; - border-radius: 0; - } - } - } - - > trough.empty > progress { all: unset; } // makes the progress indicator disappear, when the fraction is 0 -} diff --git a/gtk/src/default/gtk-4.0/widgets/_scale.scss b/gtk/src/default/gtk-4.0/widgets/_scale.scss deleted file mode 100644 index 041428be1d..0000000000 --- a/gtk/src/default/gtk-4.0/widgets/_scale.scss +++ /dev/null @@ -1,304 +0,0 @@ -%scale_trough { - border-radius: 3px; - background-color: $trough_color; - - @if $contrast == "high" { - box-shadow: inset 0 0 0 1px $borders_color; - } -} - -%scale_highlight { - border-radius: 3px; - background-color: $fill_color; -} - -scale { - // sizing - $_marks_length: 6px; - $_marks_distance: 6px; - - min-height: 10px; - min-width: 10px; - padding: 12px; - - @include focus-ring("> trough", $offset: 10px); - - > trough { - transition: $focus_transition; - @extend %scale_trough; - - // the colored part of the backing bit - > highlight { @extend %scale_highlight; } - - // this is another differently styled part of the backing bit, the most relevant use case is for example - // in media player to indicate how much video stream as been cached - > fill { - @extend %scale_trough; - } - - > slider { - background-color: $slider_color; - box-shadow: 0 2px 4px transparentize(black, .8); - outline: 1px solid transparentize(black, .9); - - border-radius: 100%; - transition: $button_transition; - transition-property: background, border, box-shadow; - - // the slider is inside the trough, so to have make it bigger there's a negative margin - min-width: 20px; - min-height: 20px; - margin: -8px; - } - } - - &:hover { - > trough { - background-color: $trough_hover_color; - - > highlight { - background-color: $fill_hover_color; - } - - > slider { - background-color: $slider_hover_color; - } - } - } - - &:disabled { - filter: opacity(.5); - - > trough > slider { - box-shadow: 0 2px 4px transparent; - outline-color: transparentize(black, .8); - } - } - - @if $contrast == "high" { - &, &:hover, &.dragging, &:disabled { - > trough > slider { - outline-color: transparentize(black, .5); - } - } - } - - // click-and-hold the slider to activate - &.fine-tune { - padding: 9px; - - &.horizontal { - min-height: 16px; - } - - &.vertical { - min-width: 16px; - } - - > trough { - // to make the trough grow in fine-tune mode - > slider { margin: -5px; } - - > fill, - > highlight, - & { - border-radius: 5px; - } - } - } - - > value { - color: gtkalpha(currentColor, 0.55); - font-feature-settings: "tnum"; - } - - &.marks-before, &.marks-after { - > trough > slider { - transform: rotate(45deg); - - // Adjust box-shadow for the 45deg rotation, for 0px 2px we ideally want - // 1/√2px 1/√2px, round that to 1px 1px - box-shadow: 1px 1px 4px transparentize(black, .8); - } - } - - &.horizontal { - > marks { - color: gtkalpha(currentColor, 0.55); - &.top { margin-bottom: $_marks_distance; } - &.bottom { margin-top: $_marks_distance; } - - indicator { - background-color: currentColor; - min-height: $_marks_length; - min-width: 1px; - } - } - - > value.left { margin-right: 9px; } - > value.right { margin-left: 9px; } - - &.fine-tune > marks { - &.top { margin-top: 3px; } - &.bottom { margin-bottom: 3px; } - - indicator { min-height: ($_marks_length - 3px); } - } - - &.marks-before > trough > slider { - border-top-left-radius: 0; - } - - &.marks-after > trough > slider { - border-bottom-right-radius: 0; - } - } - - &.vertical { - > marks { - color: gtkalpha(currentColor, 0.55); - &.top { margin-right: $_marks_distance; } - &.bottom { margin-left: $_marks_distance; } - - indicator { - background-color: currentColor; - min-height: 1px; - min-width: $_marks_length; - } - } - - > value.top { margin-bottom: 9px; } - > value.bottom { margin-top: 9px; } - - &.fine-tune > marks { - &.top { margin-left: 3px; } - &.bottom { margin-right: 3px; } - - indicator { min-height: ($_marks_length - 3px); } - } - - &.marks-before > trough > slider { - border-bottom-left-radius: 0; - } - - &.marks-after > trough > slider { - border-top-right-radius: 0; - } - } - - &.color { - min-height: 0; - min-width: 0; - - > trough { - background-image: image($borders_color); - background-repeat: no-repeat; - } - - &.horizontal { - padding: 0 0 15px 0; - - > trough { - padding-bottom: 4px; - background-position: 0 -3px; - border-top-left-radius: 0; - border-top-right-radius: 0; - - > slider { - &:dir(ltr), &:dir(rtl) { // specificity bump - &:hover, &:disabled, & { - margin-bottom: -15px; - margin-top: 6px; - } - } - } - } - } - - &.vertical { - &:dir(ltr) { - padding: 0 0 0 15px; - - > trough { - padding-left: 4px; - background-position: 3px 0; - border-bottom-right-radius: 0; - border-top-right-radius: 0; - - > slider { - &:hover, &:disabled, & { - margin-left: -15px; - margin-right: 6px; - } - } - } - } - - &:dir(rtl) { - padding: 0 15px 0 0; - - > trough { - padding-right: 4px; - background-position: -3px 0; - border-bottom-left-radius: 0; - border-top-left-radius: 0; - - > slider { - &:hover, &:disabled, & { - margin-right: -15px; - margin-left: 6px; - } - } - } - } - } - - &.fine-tune { - &.horizontal { - &:dir(ltr), &:dir(rtl) { // specificity bump - padding: 0 0 12px 0; - - > trough { - padding-bottom: 7px; - background-position: 0 -6px; - - > slider { - margin-bottom: -15px; - margin-top: 6px; - } - } - } - } - - &.vertical { - &:dir(ltr) { - padding: 0 0 0 12px; - - > trough { - padding-left: 7px; - background-position: 6px 0; - - > slider { - margin-left: -15px; - margin-right: 6px; - } - } - } - - &:dir(rtl) { - padding: 0 12px 0 0; - - > trough { - padding-right: 7px; - background-position: -6px 0; - - > slider { - margin-right: -15px; - margin-left: 6px; - } - } - } - } - } - } -} diff --git a/gtk/src/default/gtk-4.0/widgets/_scrolling.scss b/gtk/src/default/gtk-4.0/widgets/_scrolling.scss deleted file mode 100644 index 8d18e64f8e..0000000000 --- a/gtk/src/default/gtk-4.0/widgets/_scrolling.scss +++ /dev/null @@ -1,116 +0,0 @@ -scrollbar { - $_slider_min_length: 40px; - $_slider_width: 8px; - $_scrollbar_transition: all 300ms $ease-out-quad; - $_fine-tune_slider_border: $_slider_width - 3; //#3672 - - background-color: $scrollbar_bg_color; - transition: $_scrollbar_transition; - - // scrollbar border - &.top { border-bottom: 1px solid $borders_color; } - &.bottom { border-top: 1px solid $borders_color; } - &.left { border-right: 1px solid $borders_color; } - &.right { border-left: 1px solid $borders_color; } - - > range > trough > slider { - min-width: $_slider_width; - min-height: $_slider_width; - margin: -1px; - border: 4px solid transparent; - border-radius: 10px; - background-clip: padding-box; - background-color: $scrollbar_slider_color; - transition: $_scrollbar_transition; - - &:hover { background-color: $scrollbar_slider_hover_color; } - - &:hover:active { background-color: $scrollbar_slider_active_color; } - - &:disabled { background-color: transparent; } - } - - > range.fine-tune { - > trough > slider { - transition: none; - min-width: $_fine-tune_slider_border+1; - min-height: $_fine-tune_slider_border+1; - } - - &.horizontal > trough > slider { border-width: $_fine-tune_slider_border 4px; } - &.vertical > trough > slider { border-width: 4px $_fine-tune_slider_border; } - } - - &.overlay-indicator { - &:not(.dragging):not(.hovering) { - border-color: transparent; - opacity: 0.4; - background-color: transparent; - - > range > trough > slider { - margin: 0; - min-width: 3px; - min-height: 3px; - background-color: $fg_color; - border: 1px solid if($variant == 'light', white, black); - } - - &.horizontal { - > range > trough > slider { - margin: 0 2px; - min-width: $_slider_min_length; - } - } - - &.vertical { - > range > trough > slider { - margin: 2px 0; - min-height: $_slider_min_length; - } - } - } - - &.dragging, - &.hovering { opacity: 0.8; } - } - - &.horizontal > range > trough > slider { min-width: $_slider_min_length; } - &.vertical > range > trough > slider { min-height: $_slider_min_length; } -} - -scrolledwindow { - // This is used when content is touch-dragged past boundaries. - // draws a box on top of the content, the size changes programmatically. - > overshoot { - &.top { - @include overshoot(top); - } - - &.bottom { - @include overshoot(bottom); - } - - &.left { - @include overshoot(left); - } - - &.right { - @include overshoot(right); - } - } - - > junction { // the small square between two scrollbars - // Only color the top-left (or top right in RTL) pixel, to visually connect - // the borders of the two scrollbars. - - background: $borders_color, - linear-gradient(to bottom, transparent 1px, $scrollbar_bg_color 1px), - linear-gradient(to right, transparent 1px, $scrollbar_bg_color 1px); - - &:dir(rtl) { - background: $borders_color, - linear-gradient(to bottom, transparent 1px, $scrollbar_bg_color 1px), - linear-gradient(to left, transparent 1px, $scrollbar_bg_color 1px); - } - } -} diff --git a/gtk/src/default/gtk-4.0/widgets/_shortcuts-window.scss b/gtk/src/default/gtk-4.0/widgets/_shortcuts-window.scss deleted file mode 100644 index 06d2ba01a9..0000000000 --- a/gtk/src/default/gtk-4.0/widgets/_shortcuts-window.scss +++ /dev/null @@ -1,44 +0,0 @@ -shortcuts-section { - margin: 20px; -} - -.shortcuts-search-results { - margin: 20px; - border-spacing: 24px; -} - -// shortcut window keys -shortcut { - border-spacing: 6px; - - > .keycap { - min-width: 20px; - min-height: 25px; - margin-top: 2px; - padding-bottom: 3px; - padding-left: 6px; - padding-right: 6px; - - color: $fg_color; - background-color: $base_color; - border: 1px solid; - border-color: if($variant == 'light', mix($borders_color, $bg_color, 50%), $borders_color); - border-radius: 5px; - box-shadow: if($variant == 'light', inset 0 -3px mix($base_color, $bg_color, 20%), inset 0 -3px mix($borders_color, $base_color, 60%)); - font-size: smaller; - } -} - -stackswitcher > button.text-button { min-width: 100px; } // FIXME aggregate with buttons - -stackswitcher.circular { - border-spacing: 12px; - - // FIXME aggregate with buttons - > button.circular, - > button.text-button.circular { - min-width: 32px; - min-height: 32px; - padding: 0; - } -} diff --git a/gtk/src/default/gtk-4.0/widgets/_sidebars.scss b/gtk/src/default/gtk-4.0/widgets/_sidebars.scss deleted file mode 100644 index f0f0b45f03..0000000000 --- a/gtk/src/default/gtk-4.0/widgets/_sidebars.scss +++ /dev/null @@ -1,124 +0,0 @@ -.sidebar { - background-color: mix($bg_color, $base_color, 50%); - - &:not(separator) { - &:dir(ltr), - &.left, - &.left:dir(rtl) { - border-right: 1px solid $borders_color; - border-left-style: none; - } - - &:dir(rtl), - &.right { - border-left: 1px solid $borders_color; - border-right-style: none; - } - } - - listview.view, - list { background-color: transparent; } - - paned & { &.left, &.right, &.left:dir(rtl), &:dir(rtl), &:dir(ltr), & { border-style: none; }} -} - -stacksidebar row { - padding: 10px 4px; - @include focus-ring(); - - > label { - padding-left: 6px; - padding-right: 6px; - } - - &.needs-attention > label { - @extend %needs_attention; - background-size: 6px 6px, 0 0; - } -} - -separator.sidebar { - background-color: $borders_color; -} - -/********************** - * Navigation Sidebar * - **********************/ - -.navigation-sidebar { - padding: $menu-margin 0; //only vertical padding. horizontal row size would clip - - > separator { - margin: $menu-margin; - } - - > row { - min-height: 36px; - padding: 0 8px; - border-radius: $menu_radius; - margin: 0 $menu_margin 2px; - } -} - -/******************** - * GtkPlacesSidebar * - ********************/ - -$_placesidebar_icons_opacity: 0.7; - -row image.sidebar-icon { opacity: $_placesidebar_icons_opacity; } // dim the sidebar icons - // see bug #786613 for details - // on this oddity - -/* this should be more generic, only using .navigation-sidebar - https://gitlab.gnome.org/GNOME/gtk/-/issues/2929 -*/ - -placessidebar { - .navigation-sidebar > row { - // Needs overriding of the `.navigation-sidebar > row` padding - padding: 0; - - // Using margins/padding directly in the SidebarRow - // will make the animation of the new bookmark row jump - > revealer { padding: 0 14px; } - - image.sidebar-icon { - &:dir(ltr) { padding-right: 8px; } - &:dir(rtl) { padding-left: 8px; } - } - - label.sidebar-label { - &:dir(ltr) { padding-right: 2px; } - &:dir(rtl) { padding-left: 2px; } - } - - @at-root button.sidebar-button { - @extend %button_basic_flat; - - min-height: 26px; - min-width: 26px; - margin-top: 3px; - margin-bottom: 3px; - padding: 0; - border-radius: 100%; - } - - // in the sidebar case it makes no sense to click the selected row - &:selected:active { box-shadow: none; } - - &.sidebar-placeholder-row { - padding: 0 8px; - min-height: 2px; - background-image: image($drop_target_color); - background-clip: content-box; - } - - &.sidebar-new-bookmark-row { color: $selected_bg_color; } - - &:drop(active):not(:disabled) { - color: $drop_target_color; - box-shadow: inset 0 0 0 1px $drop_target_color; - } - } -} diff --git a/gtk/src/default/gtk-4.0/widgets/_spin-button.scss b/gtk/src/default/gtk-4.0/widgets/_spin-button.scss deleted file mode 100644 index 4d00e847d0..0000000000 --- a/gtk/src/default/gtk-4.0/widgets/_spin-button.scss +++ /dev/null @@ -1,85 +0,0 @@ -spinbutton { - @extend %entry; - - padding: 0; - border-spacing: 0; - - /* :not here just to bump specificity above that of the list button styling */ - > button.image-button.up:not(.flat), - > button.image-button.down:not(.flat) { - margin: 0; - background: none; - border-style: solid; - border-color: transparentize($borders_color, 0.7); - border-radius: 0; - box-shadow: none; - color: inherit; - - &:hover { - color: $text_color; - background-color: $view_hover_color; - } - - &:active { - background-color: $view_active_color; - } - } - - &:not(.vertical) { - > text { - min-width: 28px; - padding: 6px; - } - - /* :not here just to bump specificity above that of the list button styling */ - > button.image-button.up:not(.flat), - > button.image-button.down:not(.flat) { - min-height: 16px; - min-width: 22px; - padding-bottom: 0; - padding-top: 0; - border-width: 0 0 0 1px; - - &:dir(rtl) { border-width: 0 1px 0 0; } - - &:dir(ltr):last-child { border-radius: 0 $button_radius $button_radius 0; } - - &:dir(rtl):first-child { border-radius: $button_radius 0 0 $button_radius; } - } - } - - &.vertical { - > text { - min-height: 30px; - min-width: 30px; - } - - /* :not here just to bump specificity above that of the list button styling */ - > button.image-button.up:not(.flat), - > button.image-button.down:not(.flat) { - &:last-child { - border-width: 1px 0 0 0; - border-radius: 0 0 $button_radius $button_radius; - } - - &:first-child { - border-width: 0 0 1px 0; - border-radius: $button_radius $button_radius 0 0; - } - } - } - - // Misc - treeview &:not(.vertical) { - min-height: 0; - border-style: none; - border-radius: 0; - - > text { - min-height: 0; - padding: 1px 2px; - } - } - - font-feature-settings: "tnum"; -} diff --git a/gtk/src/default/gtk-4.0/widgets/_spinner.scss b/gtk/src/default/gtk-4.0/widgets/_spinner.scss deleted file mode 100644 index ee38a79918..0000000000 --- a/gtk/src/default/gtk-4.0/widgets/_spinner.scss +++ /dev/null @@ -1,16 +0,0 @@ -@keyframes spin { - to { transform: rotate(1turn); } -} - -spinner { - background: none; - opacity: 0; // non spinning spinner makes no sense - -gtk-icon-source: -gtk-icontheme('process-working-symbolic'); - - &:checked { - opacity: 1; - animation: spin 1s linear infinite; - - &:disabled { opacity: 0.5; } - } -} diff --git a/gtk/src/default/gtk-4.0/widgets/_switch.scss b/gtk/src/default/gtk-4.0/widgets/_switch.scss deleted file mode 100644 index 6579afd9e9..0000000000 --- a/gtk/src/default/gtk-4.0/widgets/_switch.scss +++ /dev/null @@ -1,67 +0,0 @@ -switch { - // similar to GtkScale - border-radius: 14px; - padding: 2px; - - transition: $focus_transition; - - @if $contrast == "high" { - background-color: $borders_color; - color: white; - - &:hover { - background-color: mix($borders_color, $text_color, 90%); - - &:active { background-color: mix($borders_color, black, 80%); } - } - } - @else { - background-color: $trough_color; - color: $fg_color; - - &:hover { - background-color: $trough_hover_color; - - &:active { background-color: $trough_active_color; } - } - - > image { color: transparent; } - } - - @include focus-ring($offset: 1px, $outer: true); - - &:disabled { - filter: opacity(0.5); - } - - > slider { - min-width: 22px; - min-height: 22px; - border-radius: 50%; - background-color: $slider_color; - box-shadow: 0 2px 4px transparentize(black, .8); - - &:disabled { - box-shadow: 0 2px 4px transparent; - } - } - - &:hover > slider { - background: $slider_hover_color; - } - - &:checked { - color: $fill_text_color; - background-color: $fill_color; - - &:hover { - background-color: $fill_hover_color; - - &:active { background-color: $fill_active_color; } - } - - > slider { - background-color: $slider_hover_color; - } - } -} diff --git a/gtk/src/default/gtk-4.0/widgets/_tab-view.scss b/gtk/src/default/gtk-4.0/widgets/_tab-view.scss deleted file mode 100644 index 39bdd21665..0000000000 --- a/gtk/src/default/gtk-4.0/widgets/_tab-view.scss +++ /dev/null @@ -1,165 +0,0 @@ -$tab_bg: darken($headerbar_bg_color, 6%); - -@mixin undershoot-gradient($dir) { - @if $variant == 'dark' { - background: linear-gradient(to #{$dir}, - transparentize(black, .6), - transparentize(black, 1) 20px); - } - @else { - background: linear-gradient(to #{$dir}, - transparentize(black, .93), - transparentize(black, 1) 20px); - } -} - -@mixin need-attention-gradient($dir) { - background: linear-gradient(to #{$dir}, - transparentize($selected_bg_color, .3), - transparentize($selected_bg_color, .5) 1px, - transparentize($selected_bg_color, 1) 20px); -} - -tabbar { - .box { - min-height: 38px; - background: darken($tab_bg, 3%); - border-bottom: 1px solid $alt_borders_color; - } - - scrolledwindow.pinned { - undershoot { - border: 0 solid $alt_borders_color; - } - - &:dir(rtl) undershoot.left { - border-left-width: 1px; - } - - &:dir(ltr) undershoot.right { - border-right-width: 1px; - } - - tabbox { - &:dir(ltr) { - box-shadow: inset -1px 0 $alt_borders_color; - } - - &:dir(rtl) { - box-shadow: inset 1px 0 $alt_borders_color; - } - } - } - - undershoot { - transition: background 150ms ease-in-out; - - &.left { - @include undershoot-gradient("right"); - } - - &.right { - @include undershoot-gradient("left"); - } - } - - .needs-attention-left undershoot.left { - @include need-attention-gradient("right"); - } - - .needs-attention-right undershoot.right { - @include need-attention-gradient("left"); - } - - tab { - border-style: solid; - border-color: $alt_borders_color; - border-width: 0 1px 0 1px; - transition: background 150ms ease-in-out, $focus_transition; - background-color: $tab_bg; - - @include focus-ring(); - - &:checked { - background-color: lighten($tab_bg, 6%); - - &:hover { - background-color: lighten($tab_bg, 9%); - } - } - - &:hover { - background-color: lighten($tab_bg, 3%); - } - } - - .start-action, - .end-action { - background: $tab_bg; - border-color: $alt_borders_color; - border-style: solid; - transition: background 150ms ease-in-out; - - button { - border: none; - border-radius: 0; - } - } - - .start-action:dir(ltr), - .end-action:dir(rtl) { - border-right-width: 1px; - } - - .start-action:dir(rtl), - .end-action:dir(ltr) { - border-left-width: 1px; - } -} - -dnd tab { - min-height: 26px; - background-color: lighten($tab_bg, 9%); - - $_wm_border: if($variant=='light', transparentize(black, 0.77), transparentize(black, 0.25)); - - box-shadow: 0 3px 9px 1px transparentize(black, 0.75), - 0 0 0 1px $_wm_border; - - @if $variant == 'dark' { - $_wm_outline: if($contrast=='high', transparentize(white, .7), transparentize(white, .9)); - - outline: 1px solid $_wm_outline; - outline-offset: -1px; - } - - margin: 25px; -} - -tabbar, -dnd { - tab { - padding: 6px; - - &.needs-attention { - background-image: - radial-gradient(ellipse at bottom, - transparentize(white, .2), - transparentize($selected_bg_color, .8) 15%, - transparentize($selected_bg_color, 1) 15%); - } - - button.image-button { - padding: 0; - margin: 0; - min-width: 24px; - min-height: 24px; - border-radius: 99px; - } - } -} - -tabview:drop(active), -tabbox:drop(active) { - box-shadow: none; -} diff --git a/gtk/src/default/gtk-4.0/widgets/_text-selection.scss b/gtk/src/default/gtk-4.0/widgets/_text-selection.scss deleted file mode 100644 index b760301485..0000000000 --- a/gtk/src/default/gtk-4.0/widgets/_text-selection.scss +++ /dev/null @@ -1,30 +0,0 @@ -cursor-handle { - all: unset; - padding: 24px 20px; - - > contents { - min-width: 20px; - min-height: 20px; - border-radius: 50%; - - background-color: $selected_bg_color; - } - - &.top > contents { - border-top-right-radius: 0; - } - - &.bottom > contents { - border-top-left-radius: 0; - transform: translateX(1px); - } - - &.insertion-cursor > contents { - border-top-left-radius: 0; - transform: translateX(1px) translateY(4px) rotate(45deg); - } -} - -magnifier { - background-color: $base_color; -} diff --git a/gtk/src/default/gtk-4.0/widgets/_toolbars.scss b/gtk/src/default/gtk-4.0/widgets/_toolbars.scss deleted file mode 100644 index b5a2c1cfbc..0000000000 --- a/gtk/src/default/gtk-4.0/widgets/_toolbars.scss +++ /dev/null @@ -1,102 +0,0 @@ -.toolbar { - padding: 5px; - border-spacing: 5px; - background-color: $bg_color; - - // on OSD - .osd & { background-color: transparent; } - - // stand-alone OSD toolbars - &.osd { - padding: 14px; - border: none; - border-radius: 5px; - background-color: $osd_bg_color; - - &.left, - &.right, - &.top, - &.bottom { border-radius: 0; } // positional classes for `attached` osd toolbars - } - - // toolbar separators - &.horizontal > separator { margin: 5px 0; } - &.vertical > separator { margin: 0 5px; } - - button { - @extend %button_basic_flat; - } -} - -/**************** - * GtkSearchBar * - ****************/ - -searchbar > revealer > box { - padding: 6px; - border-spacing: 6px; - - border-width: 0 0 1px; - border-style: solid; - border-color: $borders_color; - - background-color: mix($bg_color, $borders_color, 70%); - - .close { - min-width: 18px; - min-height: 18px; - padding: 4px; - border-radius: 50%; - @extend %button_basic_flat; - } -} - -/**************** - * GtkActionBar * - ****************/ - -actionbar > revealer > box { - padding: 6px; - border-top: 1px solid $borders_color; - - &, > box.start, > box.end { - border-spacing: 6px; - } -} - -/************** - * GtkInfoBar * - **************/ - -infobar { - > revealer > box { - padding: 8px; - border-spacing: 12px; - box-shadow: inset 0 -1px #{"alpha(currentColor, .1)"}; - } - - &.action:hover > revealer > box { - background-image: image(#{"alpha(currentColor, .05)"}); - } - - &.action:hover:active > revealer > box { - background-image: image(#{"alpha(currentColor, .1)"}); - } - - @each $i_type, $i_color in (info, $selected_bg_color), - (question, $selected_bg_color), - (warning, $warning_color), - (error, $error_color) { - &.#{$i_type} > revealer > box { - background-color: mix($i_color, $base_color, if($variant == 'dark', 30%, 15%)); - } - } - - .close { - min-width: 18px; - min-height: 18px; - padding: 4px; - border-radius: 50%; - @extend %button_basic_flat; - } -} diff --git a/gtk/src/default/gtk-4.0/widgets/_tooltip.scss b/gtk/src/default/gtk-4.0/widgets/_tooltip.scss deleted file mode 100644 index b5c339ce6f..0000000000 --- a/gtk/src/default/gtk-4.0/widgets/_tooltip.scss +++ /dev/null @@ -1,25 +0,0 @@ -tooltip { - &.background { - // background-color needs to be set this way otherwise it gets drawn twice - // see https://bugzilla.gnome.org/show_bug.cgi?id=736155 for details. - background-color: transparentize(black, 0.2); - background-clip: padding-box; - border: 1px solid $tooltip_borders_color; // this subtle border is meant to - // not make the tooltip melt with - // very dark backgrounds - color: white; - } - - &.csd { - border-radius: 5px; - box-shadow: none; - } - - padding: 6px 10px; - border-radius: $window_radius; - box-shadow: none; // otherwise it gets inherited by windowframe.csd - - > box { - border-spacing: 6px; - } -} diff --git a/gtk/src/default/gtk-4.0/widgets/_transition-shadow.scss b/gtk/src/default/gtk-4.0/widgets/_transition-shadow.scss deleted file mode 100644 index 43fbab44cd..0000000000 --- a/gtk/src/default/gtk-4.0/widgets/_transition-shadow.scss +++ /dev/null @@ -1,49 +0,0 @@ -$leaflet_dimming: rgba(0, 0, 0, if($variant == 'light', 0.12, 0.24)); -$leaflet_border: rgba(0, 0, 0, if($variant == 'light', 0.05, 0.2)); -$leaflet_outline: rgba(255, 255, 255, if($variant == 'light', 0.2, 0.05)); - -@if $contrast == 'high' { - $leaflet_border: $borders_color; - $leaflet_outline: transparent; -} - -@mixin background-shadow($direction) { - background-image: - linear-gradient($direction, - rgba(0, 0, 0, if($variant == 'light', 0.05, 0.1)), - rgba(0, 0, 0, if($variant == 'light', 0.01, 0.02)) 40px, - rgba(0, 0, 0, 0) 56px), - linear-gradient($direction, - rgba(0, 0, 0, if($variant == 'light', 0.03, 0.06)), - rgba(0, 0, 0, if($variant == 'light', 0.01, 0.02)) 7px, - rgba(0, 0, 0, 0) 24px); -} - -flap, -leaflet { - > dimming { - background: $leaflet_dimming; - } - - > border { - min-width: 1px; - min-height: 1px; - background: $leaflet_border; - } - - > shadow { - min-width: 56px; - min-height: 56px; - - &.left { @include background-shadow(to right); } - &.right { @include background-shadow(to left); } - &.up { @include background-shadow(to bottom); } - &.down { @include background-shadow(to top); } - } - - > outline { - min-width: 1px; - min-height: 1px; - background: $leaflet_outline; - } -} diff --git a/gtk/src/default/gtk-4.0/widgets/_trees.scss b/gtk/src/default/gtk-4.0/widgets/_trees.scss deleted file mode 100644 index c6eafb1ab5..0000000000 --- a/gtk/src/default/gtk-4.0/widgets/_trees.scss +++ /dev/null @@ -1,187 +0,0 @@ -// To be used for opaque elements overlaid atop the selected row -$treeview_selection_default: transparentize($text_color, .9); -$treeview_selection_opaque: mix(opacify($treeview_selection_default, 1), $base_color, 100% * alpha($treeview_selection_default)); - -columnview.view, -treeview.view { - border-left-color: $treeview_borders_color; // this is actually the tree lines color, - border-top-color: $treeview_borders_color; // while this is the grid lines color, better then nothing - - @include focus-ring(); - - &:selected { - &:focus, & { - border-radius: 0; - } - } - - &.separator { - min-height: 2px; - color: $treeview_borders_color; - } - - &:drop(active) { - box-shadow: none; - } - - > dndtarget:drop(active) { - border-style: solid none; - border-width: 1px; - border-color: $drop_target_color; - - &.after { border-top-style: none; } - - &.before { border-bottom-style: none; } - } - - &.expander { - // GtkTreeView uses the larger of the expander’s min-width and min-height - min-width: 16px; - min-height: 16px; - -gtk-icon-source: -gtk-icontheme('pan-end-symbolic'); - - &:dir(rtl) { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic-rtl'); } - - color: transparentize($text_color, .3); - - &:hover { color: $text_color; } - - &:checked { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); } - - &:disabled { color: gtkalpha(currentColor, 0.5); } - } - - &.progressbar { // progress bar in treeviews - @if $variant == light { color: $base_color; } - - &, &:selected { - background-color: $selected_bg_color; - color: $selected_fg_color; - } - - box-shadow: none; - } - - &.trough { // progress bar trough in treeviews - background-color: transparentize($fg_color,0.9); - } - - > header { - > button { - $_column_header_color: mix($fg_color, $base_color, 50%); - - @extend %column_header_button; - - color: $_column_header_color; - background-color: $base_color; - font-weight: bold; - box-shadow: none; - - &:hover { - @extend %column_header_button; - - color: mix($_column_header_color, $fg_color, 50%); - box-shadow: none; - transition: none; //I shouldn't need this - } - - &:active { - @extend %column_header_button; - - color: $fg_color; - transition: none; //I shouldn't need this - } - sort-indicator { - &.ascending { - -gtk-icon-source: -gtk-icontheme('pan-up-symbolic'); - } - &.descending { - -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); - } - - min-height: 16px; - min-width: 16px; - } - } - } - - button.dnd, - header.button.dnd { // for treeview-like derive widgets - &:active, &:selected, &:hover, & { - padding: 0 6px; - color: $base_color; - background-image: none; - background-color: $selected_bg_color; - border-style: none; - border-radius: 0; - box-shadow: inset 0 0 0 1px $base_color; - transition: none; - } - } - - acceleditor > label { - // see tests/testaccel in GTK to test - background-color: $treeview_selection_opaque; - } -} - -%column_header_button { - padding: 0 6px; - background-image: none; - border-style: solid; - border-width: 0 0 1px 1px; - border-color: $treeview_borders_color; - border-radius: 0; - - &:disabled { - border-color: $bg_color; - background-image: none; - } - - &:last-child { border-right-width: 0; } -} - -/******************************************************** - * Data Tables * - * treeview like tables with individual focusable cells * - * https://gitlab.gnome.org/GNOME/gtk/-/issues/2929 * - ********************************************************/ - -columnview { - // move padding to child cells - > listview > row { - padding: 0; - - // align horizontal sizing with header buttons - > cell { - padding: 8px 6px; - - &:not(:first-child) { - border-left: 1px solid transparent; - } - } - } - - // make column separators visible when :show-column-separators is true - &.column-separators > listview > row > cell { - border-left-color: $treeview_borders_color; - } - - // shrink vertically for .data-table - &.data-table > listview > row > cell { - padding-top: 2px; - padding-bottom: 2px; - } -} - -columnview row:not(:selected) cell editablelabel:not(.editing):focus-within { - outline: 2px solid $focus_border_color; -} - -columnview row:not(:selected) cell editablelabel.editing:focus-within { - outline: 2px solid $selected_bg_color; -} - -treeexpander { - border-spacing: 4px; -} diff --git a/gtk/src/default/gtk-4.0/widgets/_view-switcher.scss b/gtk/src/default/gtk-4.0/widgets/_view-switcher.scss deleted file mode 100644 index 08d6cf3368..0000000000 --- a/gtk/src/default/gtk-4.0/widgets/_view-switcher.scss +++ /dev/null @@ -1,79 +0,0 @@ -viewswitcher { - &, & button { - margin: 0; - padding: 0; - } - - button { - border-radius: 0; - border-top: none; - border-bottom: none; - font-size: 1rem; - - > stack > box { - &.narrow { - font-size: 0.75rem; - padding-top: 7px; - padding-bottom: 5px; - - label { - padding-left: 8px; - padding-right: 8px; - } - } - - &.wide { - padding: 8px 12px; - - label { - &:dir(ltr) { - padding-right: 7px; - } - - &:dir(rtl) { - padding-left: 7px; - } - } - } - - label.active { - font-weight: bold; - } - } - } -} - -/********************** - * AdwViewSwitcherBar * - **********************/ - -viewswitcherbar actionbar > revealer > box { - padding: 0; -} - -/************************ - * AdwViewSwitcherTitle * - ************************/ - -viewswitchertitle viewswitcher { - margin-left: 12px; - margin-right: 12px; -} - -/******************* - * AdwIndicatorBin * - *******************/ - -indicatorbin { - > indicator { margin: 1px; } - > mask { padding: 1px; } - - > indicator, > mask { - $_indicator_color: #3584e4; - - background: $_indicator_color; - min-width: 6px; - min-height: 6px; - border-radius: 100%; - } -} diff --git a/gtk/src/default/gtk-4.0/widgets/_views.scss b/gtk/src/default/gtk-4.0/widgets/_views.scss deleted file mode 100644 index d5ceff5b0f..0000000000 --- a/gtk/src/default/gtk-4.0/widgets/_views.scss +++ /dev/null @@ -1,88 +0,0 @@ -.view, -%view { - color: $text_color; - background-color: $base_color; - - &:disabled { - color: $insensitive_fg_color; - background-color: $insensitive_bg_color; - } - - &:selected { - &:focus, & { - background-color: $view_selected_color; - - border-radius: 3px; - } - } -} - -textview { - > text { - @extend %view; - } - - > border { - background-color: mix($bg_color, $base_color, 50%); - } - - &:drop(active) { - caret-color: $drop_target_color; - } -} - -iconview { - @extend %view; - - @include focus-ring(); - - &:drop(active) { - box-shadow: none; - } - - > dndtarget:drop(active) { - border-style: solid; - border-width: 1px; - border-color: $drop_target_color; - } -} - -rubberband { - border: 1px solid $selected_bg_color; - background-color: transparentize($selected_bg_color, 0.8); -} - -flowbox { - > flowboxchild { - padding: 3px; - transition: $focus_transition; - - @include focus-ring(); - - &:selected { - background-color: $view_selected_color; - } - } -} - -gridview { - > child { - padding: 3px; - transition: $focus_transition; - - @include focus-ring(); - - &:selected { - background-color: $view_selected_color; - } - - box { //cells - border-spacing: 8px; //label separation - margin: 12px; - } - } -} - -.content-view { - background-color: darken($bg_color,7%); -} diff --git a/gtk/src/default/gtk-4.0/widgets/_window.scss b/gtk/src/default/gtk-4.0/widgets/_window.scss deleted file mode 100644 index 62f559ebf5..0000000000 --- a/gtk/src/default/gtk-4.0/widgets/_window.scss +++ /dev/null @@ -1,77 +0,0 @@ -window { - // lamefun trick to get rounded borders regardless of CSD use - border-width: 0px; - - // this needs to be transparent - // see bug #722563 - $_wm_border: if($variant=='light', transparentize(black, 0.77), transparentize(black, 0.25)); - $_wm_border_backdrop: if($variant=='light', transparentize(black, 0.82), transparentize(black, 0.25)); - - &.csd { - box-shadow: 0 3px 9px 1px transparentize(black, 0.5), - 0 2px 6px 2px transparent, - 0 0 0 1px $_wm_border; //doing borders with box-shadow - margin: 0px; - border-radius: $window_radius; - - @if $variant == 'dark' { - $_window_outline: if($contrast=='high', transparentize(white, .7), transparentize(white, .9)); - outline: 1px solid $_window_outline; - outline-offset: -1px; - } - - &:backdrop { - // the transparent shadow here is to enforce that the shadow extents don't - // change when we go to backdrop, to prevent jumping windows. - // The biggest shadow should be in the same order then in the active state - // or the jumping will happen during the transition. - box-shadow: 0 3px 9px 1px transparent, - 0 2px 6px 2px transparentize(black, 0.8), - 0 0 0 1px $_wm_border_backdrop; - transition: $backdrop_transition; - } - - &.dialog.message { - box-shadow: 0 1px 2px transparentize(black, 0.8), - 0 0 0 1px transparentize($_wm_border, 0.1); - } - - &.tiled, - &.tiled-top, - &.tiled-left, - &.tiled-right, - &.tiled-bottom { - border-radius: 0; - outline: none; - - box-shadow: 0 0 0 1px $_wm_border, - 0 0 0 20px transparent; //transparent control workaround -- #3670 - - &:backdrop { - box-shadow: 0 0 0 1px $_wm_border_backdrop, - 0 0 0 20px transparent; - } - } - - &.maximized, - &.fullscreen { - border-radius: 0; - outline: none; - box-shadow: none; - transition: none; - } - } - - &.solid-csd { - margin: 0; - padding: 4px; - border: solid 1px $borders_color; - border-radius: 0; - box-shadow: inset 0 0 0 4px $borders_color, inset 0 0 0 3px $headerbar_bg_color; - - &:backdrop { box-shadow: inset 0 0 0 4px $borders_color, inset 0 0 0 3px $bg_color; } - } - - // server-side decorations as used by mutter - &.ssd { box-shadow: 0 0 0 1px $_wm_border; } //just doing borders, wm draws actual shadows -}