summaryrefslogtreecommitdiff
path: root/desktop-themes/YaruGreen/gtk-3.0/libhandy
diff options
context:
space:
mode:
authorMate <[email protected]>2021-06-10 14:08:27 +0200
committerraveit65 <[email protected]>2021-08-02 23:56:01 +0200
commit04408a6c3e8494317b7ee6ab144d109e4072d149 (patch)
tree8e2cc859cfa2ec1516b8d17f066834508d5b5158 /desktop-themes/YaruGreen/gtk-3.0/libhandy
parent0a03894ca68a0a3842a5149932ebfce5b067a18f (diff)
downloadmate-themes-04408a6c3e8494317b7ee6ab144d109e4072d149.tar.bz2
mate-themes-04408a6c3e8494317b7ee6ab144d109e4072d149.tar.xz
Add YaruGreen
Diffstat (limited to 'desktop-themes/YaruGreen/gtk-3.0/libhandy')
-rw-r--r--desktop-themes/YaruGreen/gtk-3.0/libhandy/_Adwaita-base.scss337
-rw-r--r--desktop-themes/YaruGreen/gtk-3.0/libhandy/_definitions.scss66
-rw-r--r--desktop-themes/YaruGreen/gtk-3.0/libhandy/_fallback-base.scss170
-rw-r--r--desktop-themes/YaruGreen/gtk-3.0/libhandy/_headerbar.scss6
-rw-r--r--desktop-themes/YaruGreen/gtk-3.0/libhandy/_shared-base.scss21
5 files changed, 600 insertions, 0 deletions
diff --git a/desktop-themes/YaruGreen/gtk-3.0/libhandy/_Adwaita-base.scss b/desktop-themes/YaruGreen/gtk-3.0/libhandy/_Adwaita-base.scss
new file mode 100644
index 00000000..4448d790
--- /dev/null
+++ b/desktop-themes/YaruGreen/gtk-3.0/libhandy/_Adwaita-base.scss
@@ -0,0 +1,337 @@
+// Include base styling.
+@import 'fallback-base';
+@import 'shared-base';
+
+// HdyComboRow
+
+popover.combo {
+ padding: 0px;
+
+ list {
+ border-style: none;
+ background-color: transparent;
+
+ > row {
+ padding: 0px 12px 0px 12px;
+ min-height: 50px;
+
+ &:not(:last-child) {
+ border-bottom: 1px solid hdyalpha($borders_color, 0.5)
+ }
+
+ &:first-child {
+ @include rounded-border(top);
+ }
+
+ &:last-child {
+ @include rounded-border(bottom);
+ }
+ }
+ }
+
+ @each $border in top, bottom {
+ overshoot.#{$border} {
+ @include rounded-border($border);
+ }
+ }
+
+ scrollbar.vertical {
+ padding-top: 2px;
+ padding-bottom: 2px;
+
+ &:dir(ltr) {
+ @include rounded-border(right);
+ }
+
+ &:dir(rtl) {
+ @include rounded-border(left);
+ }
+ }
+}
+
+// HdyExpanderRow
+
+row.expander {
+ padding: 0px;
+
+ image.expander-row-arrow {
+ @include margin-start(6px);
+ }
+}
+
+// HdyKeypad
+
+keypad {
+ .digit {
+ font-size: 200%;
+ font-weight: bold;
+ }
+
+ .letters {
+ font-size: 70%;
+ }
+
+ .symbol {
+ font-size: 160%;
+ }
+}
+
+// HdyViewSwitcher
+
+viewswitcher {
+ &, & button {
+ margin: 0;
+ padding: 0;
+ }
+
+ button {
+ border-radius: 0;
+ border-top: 0;
+ border-bottom: 0;
+ box-shadow: none;
+ font-size: 1rem;
+ border-width: 0; // Yaru: remove headerbar buttons border
+
+ &:not(:checked):not(:hover) {
+ background: transparent;
+ }
+
+ &:not(:only-child):not(:last-child) {
+ border-right-width: 0px;
+ }
+
+ &:not(only-child):first-child:not(:checked):not(:hover),
+ &:not(:checked):not(:hover) + button:not(:checked):not(:hover) {
+ border-left-color: transparent;
+ }
+
+ &:not(only-child):last-child:not(:checked):not(:hover) {
+ border-right-color: transparent;
+ }
+
+ &:not(:checked):hover:not(:backdrop) {
+ background-image: image(lighter($bg_color));
+ }
+
+ &:not(only-child):first-child:not(:checked):hover,
+ &:not(:checked):hover + button:not(:checked):not(:hover),
+ &:not(:checked):not(:hover) + button:not(:checked):hover {
+ border-left-color: shade($borders_color, 1.15);
+ }
+
+ &:not(only-child):last-child:not(:checked):hover {
+ border-right-color: shade($borders_color, 1.15);
+ }
+
+ &:not(:checked):hover:backdrop {
+ background-image: image($bg_color);
+ }
+
+ // View switcher in a header bar
+ headerbar &:not(:checked) {
+ &:hover:not(:backdrop) {
+ // Reimplementation of $button_fill from Adwaita. The colors are made
+ // only 70% visible to avoid the highlight to be too strong.
+ $c: hdyalpha($bg_color, 0.7);
+ $button_fill: if($variant == 'light', linear-gradient(to top, shade($c, 0.96) 2px, $c),
+ linear-gradient(to top, shade($c, 0.99) 2px, $c)) !global;
+ background-image: $button_fill;
+ }
+
+ &:not(only-child):first-child:hover,
+ &:hover + button:not(:checked):not(:hover),
+ &:not(:hover) + button:not(:checked):hover {
+ border-left-color: $borders_color;
+ }
+
+ &:not(only-child):last-child:hover {
+ border-right-color: $borders_color;
+ }
+
+ &:hover:backdrop {
+ background-image: image($bg_color);
+ }
+ }
+
+ // View switcher button
+ > stack > box {
+ &.narrow {
+ font-size: 0.75rem;
+ padding-top: 7px;
+ padding-bottom: 5px;
+
+ image,
+ 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;
+ }
+ }
+
+ &.needs-attention {
+ &:active > stack > box label,
+ &:checked > stack > box label {
+ animation: none;
+ background-image: none;
+ }
+
+ > stack > box label {
+ animation: needs_attention 150ms ease-in;
+ background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to($primary_accent_bg_color), to(transparent)); // Yaru: use our own palette
+ background-size: 6px 6px, 6px 6px;
+ background-repeat: no-repeat;
+ background-position: right 0px, right 1px;
+
+ &:backdrop {
+ background-size: 6px 6px, 0 0;
+ }
+
+ &:dir(rtl) {
+ background-position: left 0px, left 1px;
+ }
+ }
+ }
+ }
+}
+
+// HdyViewSwitcherBar
+
+viewswitcherbar actionbar > revealer > box {
+ padding: 0;
+}
+
+// Content list
+
+list.content {
+ &,
+ list {
+ background-color: transparent;
+ }
+
+ // Nested rows background
+ list.nested > row:not(:active) {
+ &:not(:hover):not(:selected),
+ &:hover:not(.activatable):not(:selected) {
+ background-color: hdymix($bg_color, $base_color, 0.5);
+ }
+
+ &:hover.activatable:not(:selected) {
+ background-color: hdymix($fg_color, $base_color, 0.95);
+ }
+ }
+
+ > 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):not(:active):hover.activatable:not(:selected),
+ &.expander row.header:not(:active):hover.activatable:not(:selected) {
+ background-color: hdymix($fg_color, $base_color, 0.95);
+ }
+
+ &,
+ list > row {
+ border-color: hdyalpha($borders_color, 0.7);
+ border-style: solid;
+ transition: 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
+ }
+
+ // 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;
+ }
+ }
+}
+
+// List button
+
+button.list-button:not(:active):not(:checked):not(:hover) {
+ background: none;
+ border: 1px solid hdyalpha($borders_color, 0.5);
+ box-shadow: none;
+}
+
+// Unified window
+
+window.csd.unified:not(.solid-csd):not(.fullscreen) {
+ // Remove the sheen on headerbar...
+ headerbar {
+ // box-shadow: inset 0 1px rgba(255, 255, 255, if($variant == 'light', 0.7, 0)); Yaru: drop headerbar box-shadow overwrite
+
+ &.selection-mode {
+ box-shadow: none;
+ }
+ }
+
+ // ...and add it on the window itself
+ > decoration-overlay {
+ // Use a white sheen instead of @borders, as it has to be neutral enough
+ // for any content and not just headerbar background
+ // box-shadow: inset 0 1px rgba(255, 255, 255, if($variant == 'light', 0.34, 0.065)); Yaru: drop headerbar box-shadow overwrite
+ }
+
+ &:not(.tiled):not(.tiled-top):not(.tiled-bottom):not(.tiled-left):not(.tiled-right):not(.maximized) {
+ &,
+ > decoration,
+ > decoration-overlay {
+ border-radius: 8px;
+ }
+ }
+}
diff --git a/desktop-themes/YaruGreen/gtk-3.0/libhandy/_definitions.scss b/desktop-themes/YaruGreen/gtk-3.0/libhandy/_definitions.scss
new file mode 100644
index 00000000..9225bffb
--- /dev/null
+++ b/desktop-themes/YaruGreen/gtk-3.0/libhandy/_definitions.scss
@@ -0,0 +1,66 @@
+//@import 'drawing';
+
+@function hdyalpha($c, $a) {
+ @return unquote("alpha(#{$c}, #{$a})");
+}
+
+@function hdymix($c1, $c2, $r) {
+ @return unquote("mix(#{$c1}, #{$c2}, #{$r})");
+}
+
+$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 $high_contrast {
+// $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);
+}
+
+// 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;
+ -gtk-outline-#{$floor}-#{$wall}-radius: 7px;
+ }
+ }
+}
+
+@mixin margin-start($margin) {
+ &:dir(ltr) {
+ margin-left: $margin;
+ }
+
+ &:dir(rtl) {
+ margin-right: $margin;
+ }
+}
diff --git a/desktop-themes/YaruGreen/gtk-3.0/libhandy/_fallback-base.scss b/desktop-themes/YaruGreen/gtk-3.0/libhandy/_fallback-base.scss
new file mode 100644
index 00000000..92c4321f
--- /dev/null
+++ b/desktop-themes/YaruGreen/gtk-3.0/libhandy/_fallback-base.scss
@@ -0,0 +1,170 @@
+@import 'definitions';
+
+// HdyActionRow
+
+row {
+ label.subtitle {
+ font-size: smaller;
+ opacity: 0.55;
+ text-shadow: none;
+ }
+
+ > box.header {
+ margin-left: 12px;
+ margin-right: 12px;
+ min-height: 50px;
+
+ > box.title {
+ margin-top: 8px;
+ margin-bottom: 8px;
+ }
+ }
+}
+
+// HdyExpanderRow
+
+row.expander {
+ // Drop transparent background on expander rows to let nested rows handle it,
+ // avoiding double highlights.
+ background-color: transparent;
+
+ list.nested > row {
+ background-color: hdyalpha($bg_color, 0.5);
+ border-color: hdyalpha($borders_color, 0.7);
+ border-style: solid;
+ border-width: 1px 0px 0px 0px;
+ }
+
+ // HdyExpanderRow arrow rotation
+
+ image.expander-row-arrow {
+ transition: 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
+ }
+
+ &:checked image.expander-row-arrow {
+ -gtk-icon-transform: rotate(0turn);
+ }
+
+ &:not(:checked) image.expander-row-arrow {
+ opacity: 0.55;
+ text-shadow: none;
+
+ &: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;
+ }
+}
+
+// Shadows
+
+flap,
+deck,
+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;
+ }
+}
+
+// Avatar
+
+avatar {
+ border-radius: 9999px;
+ -gtk-outline-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/hdy-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; }
+}
+
+// HdyViewSwitcherTitle
+
+viewswitchertitle viewswitcher {
+ margin-left: 12px;
+ margin-right: 12px;
+}
+
+// HdyStatusPage
+
+statuspage > scrolledwindow > viewport > box {
+ margin: 36px 12px;
+
+ > clamp > box {
+ > .icon {
+ margin-bottom: 36px;
+ opacity: 0.5;
+ }
+
+ > .title {
+ margin-bottom: 12px;
+ }
+
+ > .description {
+ margin-bottom: 36px;
+ }
+ }
+}
diff --git a/desktop-themes/YaruGreen/gtk-3.0/libhandy/_headerbar.scss b/desktop-themes/YaruGreen/gtk-3.0/libhandy/_headerbar.scss
new file mode 100644
index 00000000..a2adde95
--- /dev/null
+++ b/desktop-themes/YaruGreen/gtk-3.0/libhandy/_headerbar.scss
@@ -0,0 +1,6 @@
+// overwriting the headerbar styling from common, for the inverted look in the ambiance theme
+
+
+// Fix for Libhandy headerbar sidebar separator
+
+
diff --git a/desktop-themes/YaruGreen/gtk-3.0/libhandy/_shared-base.scss b/desktop-themes/YaruGreen/gtk-3.0/libhandy/_shared-base.scss
new file mode 100644
index 00000000..6fec1a0a
--- /dev/null
+++ b/desktop-themes/YaruGreen/gtk-3.0/libhandy/_shared-base.scss
@@ -0,0 +1,21 @@
+@import 'definitions';
+
+// HdyComboRow
+
+popover.combo list {
+ min-width: 200px;
+}
+
+window.csd.unified:not(.solid-csd) {
+ // Since corners are masked, there's no need for round corners anymore
+ headerbar {
+ border-radius: 0;
+ }
+}
+
+.windowhandle {
+ &, & * {
+ // This is the most reliable way to enable window dragging
+ -GtkWidget-window-dragging: true;
+ }
+}