Improved libadwaita support: new tabview
This commit is contained in:
parent
4c44a0aae6
commit
d52d9695dd
|
|
@ -751,7 +751,11 @@ popover.background separator { margin: 3px; }
|
|||
popover.background list separator { margin: 0px; }
|
||||
|
||||
/************* Notebooks * */
|
||||
notebook { padding: 1px; }
|
||||
notebook > header tabs > tab.reorderable-page { background-image: url("assets/draggable-white.svg"); background-position: center; background-repeat: no-repeat; background-size: 0.7rem; }
|
||||
|
||||
notebook > header tabs > tab.reorderable-page { background-position: left; padding-left: 1rem; }
|
||||
|
||||
notebook > header tabs > tab.reorderable-page:dir(rtl) { background-position: right; padding-right: 1rem; }
|
||||
|
||||
notebook > header.left, notebook > header.right { border-radius: 1.5em; }
|
||||
|
||||
|
|
@ -785,12 +789,6 @@ notebook > header > tabs > arrow:disabled { color: #7b7b7b; border-color: transp
|
|||
|
||||
notebook > header tabs > tab { border-radius: 9999px; outline-color: transparent; margin: 3px; }
|
||||
|
||||
notebook > header tabs > tab.reorderable-page { background-image: url("assets/draggable-white.svg"); background-position: center; background-repeat: no-repeat; background-size: 0.7rem; }
|
||||
|
||||
notebook > header tabs > tab.reorderable-page, notebook > header tabs > tab.reorderable-page:dir(ltr) { background-position: left; padding-left: 1rem; }
|
||||
|
||||
notebook > header tabs > tab.reorderable-page:dir(rtl) { background-position: right; padding-right: 1rem; }
|
||||
|
||||
notebook > header tabs > tab button.flat { border-radius: 9999px; padding: 1px; margin: 2px; }
|
||||
|
||||
notebook > header tabs > tab button.flat:last-child { margin-left: 4px; margin-right: -4px; }
|
||||
|
|
|
|||
242
gtk-4.0/gtk.css
242
gtk-4.0/gtk.css
File diff suppressed because one or more lines are too long
|
|
@ -79,3 +79,23 @@ $focus_border_color: $selected_bg_color;// if($variant == 'light', transparentiz
|
|||
|
||||
$_dot_color: $warning_color;//if($variant=='light', $selected_bg_color, lighten($selected_bg_color,15%));
|
||||
|
||||
|
||||
// in window decoration
|
||||
$_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));
|
||||
|
||||
|
||||
|
||||
//these are for libadwaite code included in some sass (such as tab-views)
|
||||
|
||||
$headerbar_bg_color: $titlebar_active_bg;
|
||||
$headerbar_fg_color: $titlebar_active_fg;
|
||||
$headerbar_border_color: $alt_borders_color;
|
||||
$headerbar_backdrop_color: $titlebar_backdrop_bg;
|
||||
$accent_color: $selected_bg_color;
|
||||
$selected_color: $selected_bg_color;
|
||||
$headerbar_shade_color: if($variant == 'light', transparentize(black, .88), transparentize(black, .64));
|
||||
$selected_active_color: gtkalpha(currentColor, .19);
|
||||
$window_outline_color: $_wm_border;
|
||||
$thumbnail_bg_color: if($variant == 'light', #ffffff, #383838); //might need better integration with colors...
|
||||
$thumbnail_fg_color: if($variant == 'light', transparentize(black, .2), white); //might need better integration with colors...
|
||||
|
|
|
|||
|
|
@ -2,6 +2,19 @@
|
|||
@return unquote("alpha(#{$c},#{$a})");
|
||||
}
|
||||
|
||||
@function gtkmix($c1,$c2,$r) {
|
||||
$ratio: 1 - $r / 100%; // match SCSS mix()
|
||||
@return unquote("mix(#{$c1},#{$c2},#{$ratio})");
|
||||
}
|
||||
|
||||
@function gtkshade($c,$s) {
|
||||
@return unquote("shade(#{$c},#{$s})");
|
||||
}
|
||||
|
||||
@function gtkcolor($c) {
|
||||
@return unquote("@#{$c}");
|
||||
}
|
||||
|
||||
// Optional compact sizes for buttons, headerbar and headerbar widgets
|
||||
$_sizevariant: 'compact'; //either 'default', or compact otherwise
|
||||
$_headerbar_height: if($_sizevariant=='default', 46px, 40px);
|
||||
|
|
@ -24,7 +37,8 @@ $button_radius: 3px;
|
|||
$window_radius: $button_radius + 3;
|
||||
$popover_radius: $button_radius + 4;
|
||||
|
||||
$tab_radius: $button_radius;
|
||||
$tab_radius: 9999px;
|
||||
$card_radius: $button_radius + 4; //for libadwaita
|
||||
|
||||
//added by me:
|
||||
$button_min_height: 24px;
|
||||
|
|
@ -142,4 +156,4 @@ $button_shadow_pressed: inset 0 1px 2px transparentize($shadow_hard_color, 0.6);
|
|||
@if $ov != none { background: $c $ov, $gradient; }
|
||||
@else { background: $c $gradient; }
|
||||
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,17 @@
|
|||
|
||||
%reorderable-page {
|
||||
@include draggable_bg_image($button_bg);
|
||||
&, &:dir(ltr) {
|
||||
background-position: left;
|
||||
padding-left: 1rem;
|
||||
}
|
||||
&:dir(rtl) {
|
||||
background-position: right;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
notebook {
|
||||
padding: 1px;
|
||||
//padding: 1px;
|
||||
> header {
|
||||
@extend %stackswitcher;
|
||||
//background-color: $dark_fill;
|
||||
|
|
@ -92,29 +102,21 @@ notebook {
|
|||
&:disabled { @include button(insensitive); }
|
||||
}
|
||||
|
||||
tabs > tab {
|
||||
tabs > tab, %tab {
|
||||
@extend %button;
|
||||
border-radius: 9999px;
|
||||
border-radius: $tab_radius;
|
||||
outline-color: transparent;
|
||||
margin: 3px;
|
||||
|
||||
&.reorderable-page {
|
||||
@include draggable_bg_image($button_bg);
|
||||
&, &:dir(ltr) {
|
||||
background-position: left;
|
||||
padding-left: 1rem;
|
||||
}
|
||||
&:dir(rtl) {
|
||||
background-position: right;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
@extend %reorderable-page;
|
||||
}
|
||||
|
||||
button.flat {
|
||||
//&:hover { color: currentColor; }
|
||||
|
||||
//&, &:backdrop { color: gtkalpha(currentColor, 0.3); }
|
||||
border-radius: 9999px;
|
||||
border-radius: $tab_radius;
|
||||
padding: 1px;
|
||||
margin: 2px;
|
||||
//margin-top: 4px;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,289 @@
|
|||
// copied and modified from libadwaita source:
|
||||
// https://github.com/GNOME/libadwaita/blob/main/src/stylesheet/widgets/_tab-view.scss
|
||||
// original color definitions at https://github.com/GNOME/libadwaita/blob/main/src/stylesheet/_defaults.scss and corresponding variables at https://github.com/GNOME/libadwaita/blob/main/src/stylesheet/_colors.scss
|
||||
|
||||
// Still a WIP
|
||||
|
||||
tabbar {
|
||||
.box {
|
||||
background-color: $headerbar_bg_color;
|
||||
color: $headerbar_fg_color;
|
||||
box-shadow: inset 0 -1px if($contrast == 'high', $headerbar_border_color, $headerbar_shade_color);
|
||||
padding: 1px;
|
||||
padding-top: 0;
|
||||
|
||||
&:backdrop {
|
||||
background-color: $headerbar_backdrop_color;
|
||||
transition: background-color $backdrop_transition;
|
||||
|
||||
> scrolledwindow,
|
||||
> .start-action,
|
||||
> .end-action {
|
||||
//filter: opacity(0.5);
|
||||
transition: filter $backdrop_transition;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
tabbox {
|
||||
@extend %stackswitcher;
|
||||
padding: 2px;
|
||||
//min-height: 34px;
|
||||
|
||||
> tabboxchild {
|
||||
@extend %tab;
|
||||
@include focus-ring();
|
||||
//border-radius: $tab_radius;
|
||||
}
|
||||
|
||||
> separator {
|
||||
margin-top: 3px;
|
||||
margin-bottom: 3px;
|
||||
transition: opacity 150ms ease-in-out;
|
||||
|
||||
&.hidden {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
> revealer > indicator {
|
||||
min-width: 2px;
|
||||
border-radius: 2px;
|
||||
margin: 3px 6px;
|
||||
background: if($contrast == 'high', $accent_color, gtkalpha($accent_color, 0.5));
|
||||
}
|
||||
|
||||
> background { background-color: unset;}
|
||||
}
|
||||
|
||||
tab {
|
||||
@extend %tab;
|
||||
@extend %reorderable-page;
|
||||
@extend %button;
|
||||
border-radius: $tab_radius;
|
||||
outline-color: transparent;
|
||||
margin: 3px;
|
||||
transition: background 150ms ease-in-out;
|
||||
|
||||
@if $contrast == 'high' {
|
||||
&:hover,
|
||||
&:active,
|
||||
&:selected {
|
||||
box-shadow: inset 0 0 0 1px $border_color;
|
||||
}
|
||||
}
|
||||
|
||||
&:selected {
|
||||
background-color: $selected_color;
|
||||
|
||||
//&:hover { background-color: $selected_hover_color; } //should be inherited by button
|
||||
//&:active { background-color: $selected_active_color; } //should be inherited by button
|
||||
}
|
||||
|
||||
//&:hover { background-color: $hover_color; } //should be inherited by button
|
||||
//&:active { background-color: $active_color; } //should be inherited by button
|
||||
}
|
||||
|
||||
tabbox.single-tab tab { // might need to disable button effects, TODO
|
||||
&, &:hover, &:active {
|
||||
background: none;
|
||||
|
||||
@if $contrast == 'high' {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.start-action,
|
||||
.end-action {
|
||||
padding: 6px 5px;
|
||||
}
|
||||
|
||||
.start-action:dir(ltr),
|
||||
.end-action:dir(rtl) {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.start-action:dir(rtl),
|
||||
.end-action:dir(ltr) {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
&.inline {
|
||||
@extend %tabbar-inline;
|
||||
}
|
||||
}
|
||||
|
||||
%tabbar-inline .box {
|
||||
background-color: transparent;
|
||||
color: inherit;
|
||||
box-shadow: none;
|
||||
padding-bottom: 0;
|
||||
|
||||
&:backdrop {
|
||||
background-color: transparent;
|
||||
transition: none;
|
||||
|
||||
> scrolledwindow,
|
||||
> .start-action,
|
||||
> .end-action {
|
||||
filter: none;
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
%tabbar-shrunk {
|
||||
tabbox,
|
||||
.start-action,
|
||||
.end-action {
|
||||
padding-top: 3px;
|
||||
padding-bottom: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
dnd tab {
|
||||
@extend %tab;
|
||||
@extend %button;
|
||||
border-radius: $tab_radius;
|
||||
outline-color: transparent;
|
||||
margin: 3px;
|
||||
@extend %reorderable-page;
|
||||
//background-color: $headerbar_bg_color;
|
||||
//background-image: image($selected_active_color);
|
||||
//color: $headerbar_fg_color;
|
||||
|
||||
//box-shadow: 0 0 0 1px transparentize(black, 0.97),
|
||||
// 0 1px 3px 1px transparentize(black, .93),
|
||||
// 0 2px 6px 2px transparentize(black, .97);
|
||||
|
||||
@if $contrast == 'high' {
|
||||
outline: 1px solid $border_color;
|
||||
outline-offset: -1px;
|
||||
}
|
||||
|
||||
margin: 25px;
|
||||
}
|
||||
|
||||
tabbar,
|
||||
dnd {
|
||||
tab {
|
||||
min-height: 26px;
|
||||
padding: 4px;
|
||||
//border-radius: $button_radius;
|
||||
|
||||
button.image-button {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
min-width: 24px;
|
||||
min-height: 24px;
|
||||
border-radius: 99px;
|
||||
}
|
||||
|
||||
indicator {
|
||||
min-height: 2px;
|
||||
border-radius: 2px;
|
||||
background: if($contrast == 'high', $accent_color, gtkalpha($accent_color, 0.5));
|
||||
transform: translateY(4px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
tabgrid > tabgridchild {
|
||||
@include focus-ring(".card", $offset: 0, $outer: true);
|
||||
}
|
||||
|
||||
tabthumbnail {
|
||||
border-radius: $card_radius + 4px;
|
||||
|
||||
> box {
|
||||
margin: 6px;
|
||||
}
|
||||
|
||||
&:drop(active) {
|
||||
box-shadow: inset 0 0 0 2px gtkalpha($drop_target_color, .4);
|
||||
background-color: gtkalpha($drop_target_color, .1);
|
||||
}
|
||||
|
||||
transition: box-shadow 200ms $ease-out-quad, background-color $ease-out-quad;
|
||||
|
||||
.needs-attention {
|
||||
&:dir(ltr) { transform: translate(8px, -8px); }
|
||||
&:dir(rtl) { transform: translate(-8px, -8px); }
|
||||
|
||||
> widget {
|
||||
background: $accent_color;
|
||||
min-width: 12px;
|
||||
min-height: 12px;
|
||||
border-radius: 8px;
|
||||
margin: 3px;
|
||||
box-shadow: 0 1px 2px gtkalpha($accent_color, .4);
|
||||
}
|
||||
}
|
||||
|
||||
.card {
|
||||
picture {
|
||||
outline: 1px solid $window_outline_color;
|
||||
outline-offset: -1px;
|
||||
border-radius: $card_radius;
|
||||
}
|
||||
|
||||
background: none;
|
||||
color: inherit;
|
||||
|
||||
@if $contrast == 'high' {
|
||||
box-shadow: 0 0 0 1px transparentize(black, 0.5),
|
||||
0 1px 3px 1px transparentize(black, .93),
|
||||
0 2px 6px 2px transparentize(black, .97);
|
||||
}
|
||||
}
|
||||
|
||||
&.pinned .card {
|
||||
background-color: $thumbnail_bg_color;
|
||||
color: $thumbnail_fg_color;
|
||||
|
||||
@if $contrast == 'high' {
|
||||
outline: 1px solid $window_outline_color;
|
||||
outline-offset: -1px;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-title-box {
|
||||
border-spacing: 6px;
|
||||
}
|
||||
|
||||
.tab-unpin-icon {
|
||||
margin: 6px;
|
||||
min-width: 24px;
|
||||
min-height: 24px;
|
||||
}
|
||||
|
||||
button.circular {
|
||||
margin: 6px;
|
||||
background-color: gtkalpha($thumbnail_bg_color, .75);
|
||||
min-width: 24px;
|
||||
min-height: 24px;
|
||||
|
||||
@if $contrast == 'high' {
|
||||
box-shadow: 0 0 0 1px currentColor;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: gtkalpha(gtkmix($thumbnail_bg_color, currentColor, 90%), .75);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: gtkalpha(gtkmix($thumbnail_bg_color, currentColor, 80%), .75);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
taboverview > .overview .new-tab-button {
|
||||
margin: 18px;
|
||||
}
|
||||
|
||||
tabview:drop(active),
|
||||
tabbox:drop(active),
|
||||
tabgrid:drop(active) {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
|
@ -751,7 +751,11 @@ popover.background separator { margin: 3px; }
|
|||
popover.background list separator { margin: 0px; }
|
||||
|
||||
/************* Notebooks * */
|
||||
notebook { padding: 1px; }
|
||||
notebook > header tabs > tab.reorderable-page { background-image: url("assets/draggable-white.svg"); background-position: center; background-repeat: no-repeat; background-size: 0.7rem; }
|
||||
|
||||
notebook > header tabs > tab.reorderable-page { background-position: left; padding-left: 1rem; }
|
||||
|
||||
notebook > header tabs > tab.reorderable-page:dir(rtl) { background-position: right; padding-right: 1rem; }
|
||||
|
||||
notebook > header.left, notebook > header.right { border-radius: 1.5em; }
|
||||
|
||||
|
|
@ -785,12 +789,6 @@ notebook > header > tabs > arrow:disabled { color: #7b7b7b; border-color: transp
|
|||
|
||||
notebook > header tabs > tab { border-radius: 9999px; outline-color: transparent; margin: 3px; }
|
||||
|
||||
notebook > header tabs > tab.reorderable-page { background-image: url("assets/draggable-white.svg"); background-position: center; background-repeat: no-repeat; background-size: 0.7rem; }
|
||||
|
||||
notebook > header tabs > tab.reorderable-page, notebook > header tabs > tab.reorderable-page:dir(ltr) { background-position: left; padding-left: 1rem; }
|
||||
|
||||
notebook > header tabs > tab.reorderable-page:dir(rtl) { background-position: right; padding-right: 1rem; }
|
||||
|
||||
notebook > header tabs > tab button.flat { border-radius: 9999px; padding: 1px; margin: 2px; }
|
||||
|
||||
notebook > header tabs > tab button.flat:last-child { margin-left: 4px; margin-right: -4px; }
|
||||
|
|
|
|||
|
|
@ -2113,7 +2113,9 @@ menubar {
|
|||
// for libadwaita: taboverview
|
||||
// tabbar, tabbox, tabboxchild, tabview,
|
||||
// tabgrid, tabgridchild, tabthumbnail
|
||||
// (to find out: GTK_DEBUG=interactive adwaita-1-demo)
|
||||
// (to find out: GTK_DEBUG=interactive adwaita-1-demo) (from libadwaita-1-examples package on Debian and derivatives)
|
||||
|
||||
@import '../common/tab-view.scss';
|
||||
|
||||
|
||||
|
||||
|
|
@ -3664,8 +3666,7 @@ window {
|
|||
|
||||
// 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),
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue