Add libhandy sources for GTK3 themes
This commit is contained in:
Daniel Ruiz de Alegría
@@ -5,10 +5,12 @@
|
||||
// - if you need to inverse a color function use the @if directive to match for dark $variant
|
||||
|
||||
$variant: 'dark';
|
||||
$high-contrast:'false';
|
||||
|
||||
@import 'gtk-sass/_colors';
|
||||
@import 'gtk-sass/upstream/_drawing';
|
||||
@import 'gtk-sass/upstream/_common';
|
||||
@import 'gtk-sass/libhandy/Adwaita-base';
|
||||
@import 'gtk-sass/_common-tweaks';
|
||||
@import 'gtk-sass/_applications';
|
||||
@import 'gtk-sass/upstream/_colors-public';
|
||||
|
||||
@@ -0,0 +1,336 @@
|
||||
// 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;
|
||||
|
||||
&: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(#3584e4), to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5, to(rgba(255, 255, 255, 0.769231)), to(transparent));
|
||||
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));
|
||||
|
||||
&.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));
|
||||
}
|
||||
|
||||
&:not(.tiled):not(.tiled-top):not(.tiled-bottom):not(.tiled-left):not(.tiled-right):not(.maximized) {
|
||||
&,
|
||||
> decoration,
|
||||
> decoration-overlay {
|
||||
border-radius: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
../upstream/_drawing.scss
|
||||
@@ -0,0 +1,146 @@
|
||||
@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
|
||||
|
||||
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; }
|
||||
}
|
||||
|
||||
// HdyViewSwitcherTitle
|
||||
|
||||
viewswitchertitle viewswitcher {
|
||||
margin-left: 12px;
|
||||
margin-right: 12px;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
+20
@@ -0,0 +1,20 @@
|
||||
#!/bin/sh
|
||||
|
||||
GREEN='\033[0;32m'
|
||||
YELLOW='\033[0;33m'
|
||||
RESET='\033[0m'
|
||||
|
||||
while read file;
|
||||
do
|
||||
echo
|
||||
echo -e " $GREEN[ * ]$RESET Downloading file $file"
|
||||
wget https://gitlab.gnome.org/GNOME/libhandy/-/raw/master/src/themes/$file --timestamping --quiet
|
||||
done <<- EOF
|
||||
_definitions.scss
|
||||
_shared-base.scss
|
||||
_Adwaita-base.scss
|
||||
_fallback-base.scss
|
||||
EOF
|
||||
echo
|
||||
|
||||
ln -rsfv ../upstream/_drawing.scss
|
||||
@@ -5,10 +5,12 @@
|
||||
// - if you need to inverse a color function use the @if directive to match for dark $variant
|
||||
|
||||
$variant: 'light';
|
||||
$high-contrast:'false';
|
||||
|
||||
@import 'gtk-sass/_colors';
|
||||
@import 'gtk-sass/upstream/_drawing';
|
||||
@import 'gtk-sass/upstream/_common';
|
||||
@import 'gtk-sass/libhandy/Adwaita-base';
|
||||
@import 'gtk-sass/_common-tweaks';
|
||||
@import 'gtk-sass/_applications';
|
||||
@import 'gtk-sass/upstream/_colors-public';
|
||||
|
||||
Reference in New Issue
Block a user