Reorganize scss source files
This commit is contained in:
Daniel Ruiz de Alegría
@@ -0,0 +1,228 @@
|
||||
$panel_bg : transparentize($bg_color, if($variant=='light', .1, .2));
|
||||
|
||||
/* Nautilus */
|
||||
@define-color disk_space_unknown #383c4a;
|
||||
@define-color disk_space_used #{"" +$selected_bg_color};
|
||||
@define-color disk_space_free white;
|
||||
|
||||
|
||||
$_glow_shadow: 0 1px 4px transparentize($selected_bg_color, .5);
|
||||
filechooser,
|
||||
.nautilus-window {
|
||||
placessidebar.sidebar {
|
||||
|
||||
&:dir(ltr) {
|
||||
background-image: linear-gradient(to right, darken($bg_color, 4%) 41px, $bg_color 0);
|
||||
}
|
||||
&:dir(rtl) {
|
||||
background-image: linear-gradient(to left, darken($bg_color, 4%) 41px, $bg_color 0);
|
||||
}
|
||||
|
||||
&:backdrop { box-shadow: none; }
|
||||
|
||||
row.sidebar-row {
|
||||
&:selected {
|
||||
@extend %selected_items;
|
||||
|
||||
margin-left: 6px;
|
||||
margin-right: 6px;
|
||||
border-radius: $button_radius;
|
||||
box-shadow: $_glow_shadow;
|
||||
transition: box-shadow $backdrop_transition;
|
||||
|
||||
&:backdrop { box-shadow: none; }
|
||||
|
||||
&:dir(ltr) {
|
||||
background-image: linear-gradient(to right, darken($selected_bg_color, 10%) 35px, transparent 0);
|
||||
}
|
||||
&:dir(rtl) {
|
||||
background-image: linear-gradient(to left, darken($selected_bg_color, 10%) 35px, transparent 0);
|
||||
}
|
||||
|
||||
revealer {
|
||||
padding-left: 8px;
|
||||
padding-right: 8px;
|
||||
|
||||
.sidebar-icon, .sidebar-label { color: $selected_fg_color; }
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-icon { padding-right: 20px; }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nautilus-window .floating-bar {
|
||||
color: $selected_fg_color;
|
||||
background-color: $selected_bg_color;
|
||||
border-color: $selected_borders_color;
|
||||
margin: 10px;
|
||||
box-shadow: $_glow_shadow;
|
||||
transition: background-color $backdrop_transition;
|
||||
|
||||
&:backdrop {
|
||||
color: inherit;
|
||||
box-shadow: none;
|
||||
border-color: $borders_color;
|
||||
}
|
||||
|
||||
&.bottom {
|
||||
&.left, &.right{
|
||||
border-radius: $button_radius;
|
||||
border-style: solid;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.path-bar-box:backdrop { border-color: $backdrop_borders_color}
|
||||
|
||||
/* XFCE4 PANEL */
|
||||
.xfce4-panel {
|
||||
&.background { background: $panel_bg; }
|
||||
|
||||
button {
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
text-shadow: none;
|
||||
background: transparent;
|
||||
color: if($variant=='light', darken($fg_color, 10%), $fg_color);
|
||||
|
||||
$_highlight_bg_color: if($variant=='light', $bg_color, rgba(black, .2));
|
||||
|
||||
&:hover {
|
||||
background: $_highlight_bg_color;
|
||||
}
|
||||
|
||||
&:not(#whiskermenu-button) {
|
||||
&:checked, &:active {
|
||||
box-shadow: inset 0 4px 0 $selected_bg_color;
|
||||
background: $_highlight_bg_color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.vertical button:not(#whiskermenu-button) {
|
||||
&:checked, &:active { box-shadow: inset 4px 0 0 $selected_bg_color; }
|
||||
}
|
||||
}
|
||||
|
||||
/* XFCE4 NOTIFICATIONS */
|
||||
#XfceNotifyWindow { background-color: darken($osd_bg_color, 4%); }
|
||||
|
||||
/* Whisker menu */
|
||||
#whiskermenu-window {
|
||||
$_dark_bg: if($variant == 'light', $bg_color, darken($bg_color, 3%));
|
||||
entry {
|
||||
border-radius: 100px;
|
||||
border: 2px solid $selected_bg_color;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
button {
|
||||
transition-duration: 0s;
|
||||
@if $variant == 'dark' {
|
||||
&:hover {
|
||||
@include button(osd);
|
||||
border-color: transparent;
|
||||
border-bottom-color: $_dark_bg;
|
||||
}
|
||||
}
|
||||
&:checked { border-color: transparent; }
|
||||
}
|
||||
|
||||
scrolledwindow.frame {
|
||||
border: 0;
|
||||
border-radius: 8px;
|
||||
box-shadow: inset 0 0 10px $shadow_color;
|
||||
background: $_dark_bg;
|
||||
padding: 7px 10px;
|
||||
margin: 0 5px;
|
||||
|
||||
treeview {
|
||||
background: transparent;
|
||||
border-radius: $button_radius;
|
||||
|
||||
&:hover, &:active, &:selected {
|
||||
background-color: transparentize($shadow_color, 0.03);
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* XFCE4 panel action & battery buttons */
|
||||
#XfcePanelWindowWrapper > widget > box > #xfce-panel-button > image,
|
||||
#xfce4-power-manager-plugin > box > image {
|
||||
-gtk-icon-style: symbolic;
|
||||
-gtk-icon-transform: scale(.7);
|
||||
}
|
||||
|
||||
/* XFCE4 workspace switcher */
|
||||
wnck-pager {
|
||||
background-color: lighten($base_color, 10%);
|
||||
&:selected { background-color: darken($bg_color, 20%); }
|
||||
&:hover { background-color: darken($bg_color, 20%); }
|
||||
}
|
||||
|
||||
/* LightDM */
|
||||
|
||||
.lightdm-gtk-greeter {
|
||||
#panel_window {
|
||||
background: $panel_bg;
|
||||
color: $fg_color;
|
||||
text-shadow: none;
|
||||
-gtk-icon-shadow: none;
|
||||
}
|
||||
|
||||
#login_window {
|
||||
border: 0;
|
||||
background-color: $panel_bg;
|
||||
border-radius: $button_radius;
|
||||
box-shadow: inset 0 1px transparentize(white, .85);
|
||||
|
||||
entry {
|
||||
background: transparentize($bg_color, .6);
|
||||
border-color: transparentize($bg_color, .7);
|
||||
min-height: 32px;
|
||||
box-shadow: inset 0 1px transparentize(white, .95),
|
||||
0 1px 2px opacify($shadow_color, 0.1);
|
||||
|
||||
image { margin: 0; }
|
||||
}
|
||||
|
||||
#buttonbox_frame {
|
||||
padding-top: 20px;
|
||||
background: $bg_color;
|
||||
border-top: 1px solid transparentize(black, .9);
|
||||
border-radius: 0 0 $button_radius $button_radius;
|
||||
box-shadow: inset 0 -4px transparentize(black, .8),
|
||||
inset 0 1px 2px transparentize($shadow_color, 0.03);
|
||||
|
||||
button {
|
||||
border: 0;
|
||||
color: white;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
#cancel_button {
|
||||
background: transparentize($shadow_color, 0.03);
|
||||
box-shadow: none;
|
||||
color: $fg_color;
|
||||
}
|
||||
|
||||
#login_button {
|
||||
background: $selected_bg_color;
|
||||
box-shadow: inset 0 -2px transparentize(black, 0.8);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Thunar */
|
||||
// Hide root user warning
|
||||
.thunar .warning {
|
||||
opacity: 0;
|
||||
font-size: 0;
|
||||
margin: -10px 0;
|
||||
}
|
||||
@@ -0,0 +1,517 @@
|
||||
$_menu_shadow: 0 1px 6px transparentize(black, if($variant == 'light', .85, .5));
|
||||
$_widget_inset_shadow: inset 0 3px 5px -4px $shadow_color, 0 1px rgba(255, 255, 255, .05);
|
||||
$_wm_border: if($variant=='light', transparentize(black, 0.9), transparentize($borders_color, 0.25));
|
||||
|
||||
* {
|
||||
outline-style: solid;
|
||||
outline-offset: -4px;
|
||||
outline-width: 2px;
|
||||
-gtk-outline-radius: 3px;
|
||||
outline-color: gtkalpha(currentColor, 0.07);
|
||||
|
||||
button {
|
||||
&, &:hover, &:active, &:checked, &:focus {
|
||||
outline-color: gtkalpha(currentColor, if($variant == 'light', 0.15, 0.07));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**********
|
||||
* Button *
|
||||
**********/
|
||||
button {
|
||||
@at-root %button_active,
|
||||
&:active,
|
||||
&:checked, {
|
||||
background: $dark_fill;
|
||||
box-shadow: $_widget_inset_shadow;
|
||||
|
||||
&:backdrop { box-shadow: none; }
|
||||
}
|
||||
|
||||
&.flat {
|
||||
border-color: transparent;
|
||||
transition: $button_transition;
|
||||
|
||||
&:hover {
|
||||
@extend %button_active;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
&:link,
|
||||
&:backdrop { @include button(undecorated); }
|
||||
}
|
||||
}
|
||||
|
||||
/**********
|
||||
* Entry *
|
||||
**********/
|
||||
%entry,
|
||||
entry {
|
||||
box-shadow: $_widget_inset_shadow;
|
||||
@if ($variant == 'dark') {
|
||||
background-color: $dark_fill;
|
||||
}
|
||||
}
|
||||
|
||||
headerbar %entry,
|
||||
headerbar entry {
|
||||
background: $base_color;
|
||||
}
|
||||
|
||||
/**********
|
||||
* Switch *
|
||||
**********/
|
||||
switch {
|
||||
box-shadow: $_widget_inset_shadow;
|
||||
|
||||
&:checked {
|
||||
border-color: transparentize(black, .8);
|
||||
border-right-width: 0; // Hack to prevent dirty right border-radius
|
||||
margin-right: 1px; // Compensate missing right border
|
||||
box-shadow: inset 0 1px 2px -1px transparentize(black, .4);
|
||||
}
|
||||
|
||||
&:backdrop, &:disabled {
|
||||
box-shadow: none;
|
||||
border-color: $backdrop_borders_color;
|
||||
}
|
||||
|
||||
slider {
|
||||
@extend %slider;
|
||||
|
||||
&:checked {
|
||||
border-color: if($variant=='light', $suggested_border_color, $borders_color);
|
||||
&:backdrop:not(:disabled) {
|
||||
border-color: if($variant=='light', $suggested_bg_color, $backdrop_borders_color);
|
||||
}
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
border-color: $backdrop_borders_color;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover slider { @extend %slider_active; }
|
||||
}
|
||||
|
||||
/*************************
|
||||
* Check and Radio items *
|
||||
*************************/
|
||||
check,
|
||||
radio {
|
||||
$_c: if($variant=='light', $bg_color, darken($bg_color, 2%));
|
||||
$_shadow: 0 1px 2px transparentize($shadow_color, 0.03);
|
||||
|
||||
&, menu menuitem &, menu menuitem:hover & {
|
||||
background-image: linear-gradient(to bottom, $_c 20%, darken($_c, 2%) 90%);
|
||||
border-color: $alt_borders_color;
|
||||
box-shadow: $_widget_inset_shadow;
|
||||
|
||||
&:disabled, &:disabled:backdrop {
|
||||
&, &:checked, &:indeterminate {
|
||||
border-color: $borders_color;
|
||||
background-image: image($bg_color);
|
||||
color: $fg_color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&, menu menuitem & {
|
||||
&:checked, &:indeterminate {
|
||||
background-image: linear-gradient(to bottom, $selected_bg_color 20%, darken($selected_bg_color, 2%) 90%);
|
||||
border-color: $selected_borders_color;
|
||||
box-shadow: inset 0 1px transparentize(white, .9), $_shadow;
|
||||
color: $selected_fg_color;
|
||||
|
||||
&:active { box-shadow: none; }
|
||||
&:backdrop { background-image: image($checkradio_bg_color); }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
%slider,
|
||||
scale slider {
|
||||
@include button(normal, $edge: $shadow_color);
|
||||
|
||||
border-color: darken($alt_borders_color, 3%);
|
||||
@at-root %slider_active,
|
||||
&:active {
|
||||
background-image: if($variant == 'light', image(lighten($bg_color, 14%)), image(darken($bg_color, 9%)));
|
||||
border-color: $suggested_bg_color;
|
||||
}
|
||||
|
||||
&:disabled { border-color: $backdrop_borders_color; }
|
||||
}
|
||||
|
||||
/***************
|
||||
* Header bars *
|
||||
***************/
|
||||
|
||||
.titlebar,
|
||||
headerbar {
|
||||
$_border_color: darken($bg_color, 20%);
|
||||
border-color: $_border_color;
|
||||
|
||||
$_scale_asset: 'assets/kali-headerbar-logo#{$asset_suffix}';
|
||||
@include headerbar_fill(darken($bg_color, if($variant == 'light', 5%, 10%)),
|
||||
$ov: -gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png')));
|
||||
box-shadow: 0 1px 4px transparentize($_border_color, .25);
|
||||
background-repeat: no-repeat;
|
||||
background-position: left;
|
||||
|
||||
&:backdrop {
|
||||
background-image: -gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png'));
|
||||
background-repeat: no-repeat;
|
||||
background-position: left;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
stackswitcher button:checked,
|
||||
button.toggle {
|
||||
&:active, &:checked { @extend %button_active; }
|
||||
}
|
||||
|
||||
viewswitcher button > stack > box,
|
||||
hdyviewswitcher > button box {
|
||||
&.narrow { margin: -7px 0 -5px; }
|
||||
&.wide { margin: -8px 0; }
|
||||
}
|
||||
|
||||
&.default-decoration {
|
||||
min-height: 0;
|
||||
padding: 6px;
|
||||
|
||||
button.titlebutton {
|
||||
min-height: 0;
|
||||
min-width: 0;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
dialog &,
|
||||
dialog &:backdrop {
|
||||
background: $bg_color;
|
||||
border: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
paned, hdyleaflet, headerbar.titlebar {
|
||||
& headerbar:first-child {
|
||||
border-color: $backdrop_borders_color;
|
||||
background: $base_color;
|
||||
box-shadow: none;
|
||||
|
||||
&:backdrop { background: $backdrop_base_color; }
|
||||
}
|
||||
}
|
||||
|
||||
/**************
|
||||
* Tree Views *
|
||||
**************/
|
||||
treeview.view {
|
||||
border-top-color: $borders-color;
|
||||
|
||||
&:backdrop { border-top-color: $backdrop_borders_color; }
|
||||
|
||||
header button {
|
||||
@include button(normal);
|
||||
|
||||
&:hover,
|
||||
&:active { border-color: $borders_color; }
|
||||
|
||||
&:backdrop { box-shadow: none; }
|
||||
}
|
||||
}
|
||||
|
||||
/***************
|
||||
* Popovers *
|
||||
***************/
|
||||
popover.background {
|
||||
box-shadow: $_menu_shadow;
|
||||
.csd &, & { border-color: if($variant=='light', transparentize(black, 0.9), transparentize($borders_color, 0.25)); }
|
||||
}
|
||||
|
||||
/*************
|
||||
* Notebooks *
|
||||
*************/
|
||||
notebook {
|
||||
> header {
|
||||
border: 0;
|
||||
padding: 0;
|
||||
background-color: $dark_fill;
|
||||
|
||||
&.top,
|
||||
&.bottom,
|
||||
&.left,
|
||||
&.right {
|
||||
> tabs {
|
||||
margin: 0;
|
||||
|
||||
> tab,
|
||||
> tab.reorderable-page {
|
||||
border: 1px solid transparent;
|
||||
margin: 3px;
|
||||
|
||||
&:hover:not(:backdrop) { @include button(hover); }
|
||||
|
||||
&:checked {
|
||||
@include button(normal);
|
||||
background: $base_color;
|
||||
|
||||
&:backdrop { @include button(backdrop); }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
$gradient:
|
||||
rgba(black, 0),
|
||||
rgba(black, 0) calc(100% - 2px),
|
||||
rgba(black, 0.05) calc(100% - 1px),
|
||||
rgba(black, 0.15);
|
||||
|
||||
&.top {
|
||||
background-image: linear-gradient(to bottom, $gradient);
|
||||
}
|
||||
|
||||
&.bottom {
|
||||
background-image: linear-gradient(to top, $gradient);
|
||||
}
|
||||
|
||||
&.right {
|
||||
background-image: linear-gradient(to left, $gradient);
|
||||
}
|
||||
|
||||
&.left {
|
||||
background-image: linear-gradient(to right, $gradient);
|
||||
}
|
||||
|
||||
tab {
|
||||
border-radius: $button_radius;
|
||||
transition: $button_transition;
|
||||
min-height: 28px;
|
||||
|
||||
button.flat {
|
||||
margin-top: 1px;
|
||||
margin-bottom: 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**************
|
||||
* Scrollbars *
|
||||
**************/
|
||||
scrollbar slider {
|
||||
min-width: 6px;
|
||||
min-height: 6px;
|
||||
}
|
||||
|
||||
/**************
|
||||
* GtkInfoBar *
|
||||
**************/
|
||||
infobar {
|
||||
@mixin _infobar_button($bg) {
|
||||
button,
|
||||
button.flat {
|
||||
@include button(normal, $bg, $selected_fg_color, none);
|
||||
|
||||
&:hover { @include button(hover, $bg, $selected_fg_color, none); }
|
||||
|
||||
&:active,
|
||||
&:checked { @include button(active, $bg, $selected_fg_color, none); }
|
||||
|
||||
&:disabled { @include button(insensitive, $bg, $selected_fg_color, none); }
|
||||
|
||||
&:backdrop {
|
||||
@include button(backdrop, $bg, $selected_fg_color, none);
|
||||
border-color: _border_color($bg);
|
||||
|
||||
&:disabled {
|
||||
@include button(backdrop-insensitive, $bg,
|
||||
$selected_fg_color, none);
|
||||
border-color: _border_color($bg);
|
||||
}
|
||||
}
|
||||
&:backdrop, & {
|
||||
label, & { color: $selected_fg_color; }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&,
|
||||
&.info,
|
||||
&.question,
|
||||
&.warning,
|
||||
&.error {
|
||||
|
||||
border-style: none;
|
||||
text-shadow: none;
|
||||
|
||||
&:backdrop > revealer > box, & > revealer > box {
|
||||
label, & { color: $selected_fg_color; }
|
||||
}
|
||||
|
||||
&:backdrop { text-shadow: none; }
|
||||
|
||||
selection { background-color: darken($bg_color, 10%); }
|
||||
|
||||
*:link { color: $link_color; }
|
||||
}
|
||||
|
||||
&.info, &.info.action:hover {
|
||||
&:backdrop > revealer > box, & > revealer > box {
|
||||
background-color: $selected_bg_color;
|
||||
}
|
||||
|
||||
@include _infobar_button($selected_bg_color);
|
||||
}
|
||||
|
||||
&.question, &.warning, &.question.action:hover, &.warning.action:hover {
|
||||
&:backdrop > revealer > box, & > revealer > box {
|
||||
background-color: $warning_color;
|
||||
}
|
||||
|
||||
@include _infobar_button($warning_color);
|
||||
}
|
||||
|
||||
&.error, &.error.action:hover {
|
||||
&:backdrop > revealer > box, & > revealer > box {
|
||||
background-color: $error_color;
|
||||
|
||||
@include _infobar_button($error_color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*********************
|
||||
* App Notifications *
|
||||
*********************/
|
||||
.app-notification,
|
||||
.app-notification.frame {
|
||||
padding: 5px 10px;
|
||||
margin: 20px;
|
||||
border-radius: $button_radius+1;
|
||||
border: 1px solid transparentize($_wm_border, 0.1);
|
||||
box-shadow: $_menu_shadow;
|
||||
background-image: none;
|
||||
|
||||
&:backdrop { box-shadow: none; }
|
||||
}
|
||||
|
||||
/************
|
||||
* Calendar *
|
||||
***********/
|
||||
calendar {
|
||||
border-radius: 6px;
|
||||
border:0;
|
||||
padding: 1px;
|
||||
|
||||
&:selected { border-radius: 999px; }
|
||||
}
|
||||
|
||||
/***********
|
||||
* Dialogs *
|
||||
***********/
|
||||
messagedialog .titlebar:backdrop { background-image: none; }
|
||||
|
||||
|
||||
/***********
|
||||
* Sidebar *
|
||||
***********/
|
||||
.sidebar {
|
||||
background-color: $bg_color;
|
||||
}
|
||||
|
||||
/****************
|
||||
* File chooser *
|
||||
****************/
|
||||
placessidebar {
|
||||
row {
|
||||
min-height: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
/**********************
|
||||
* Window Decorations *
|
||||
*********************/
|
||||
decoration {
|
||||
$_border_width: 1px;
|
||||
border-radius: $window_radius+$_border_width $window_radius+$_border_width $button_radius+$_border_width $button_radius+$_border_width;
|
||||
border: $_border_width solid $base_color;
|
||||
|
||||
box-shadow: 0 2px 8px 0 transparentize(black, 0.6),
|
||||
0 0 0 1px $_wm_border;
|
||||
|
||||
&:backdrop {
|
||||
box-shadow: 0 2px 8px 0 transparent,
|
||||
0 0 0 3px transparentize(black, if($variant == 'light', .85, .75));
|
||||
}
|
||||
|
||||
.maximized &,
|
||||
.fullscreen &,
|
||||
.tiled &,
|
||||
.tiled-top &,
|
||||
.tiled-right &,
|
||||
.tiled-bottom &,
|
||||
.tiled-left & { border-width: 0; }
|
||||
|
||||
.popup & { border-width: 0; }
|
||||
|
||||
.ssd & {
|
||||
box-shadow: 0 0 0 1px $_wm_border;
|
||||
border-width: 0;
|
||||
}
|
||||
|
||||
.csd.popup & {
|
||||
box-shadow: $_menu_shadow,
|
||||
0 0 0 1px transparentize($_wm_border, 0.1);
|
||||
border-width: 0;
|
||||
}
|
||||
|
||||
tooltip.csd & { border: 0; }
|
||||
|
||||
messagedialog.csd & {
|
||||
border-width: 0;
|
||||
box-shadow: 0 1px 4px transparentize(black, 0.8);
|
||||
}
|
||||
}
|
||||
|
||||
// Window Close button
|
||||
button.titlebutton:not(.appmenu) {
|
||||
margin: 0;
|
||||
margin-left: 6px;
|
||||
padding: 0;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
border: 0;
|
||||
-gtk-icon-shadow: none;
|
||||
|
||||
& + & { margin-left: 0; }
|
||||
&:last-child { margin-right: 6px; }
|
||||
|
||||
&:hover:not(:backdrop) {
|
||||
transition: 0;
|
||||
background: transparentize(white, .8);
|
||||
box-shadow: inset 0 0 0 1px $borders_color;
|
||||
}
|
||||
|
||||
@at-root
|
||||
.maximized &,
|
||||
.fullscreen &,
|
||||
.tiled &,
|
||||
.tiled-top &,
|
||||
.tiled-right &,
|
||||
.tiled-bottom &,
|
||||
.tiled-left & {
|
||||
&:last-child { margin-right: 0; }
|
||||
&:first-child { margin-left: 0; }
|
||||
}
|
||||
|
||||
&:backdrop {
|
||||
background: transparent;
|
||||
&:not(:hover) { border-color: transparent; }
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,119 @@
|
||||
//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};
|
||||
|
||||
/*
|
||||
widget text/foreground color on backdrop windows */
|
||||
@define-color theme_unfocused_fg_color #{"" +$backdrop_fg_color};
|
||||
|
||||
/*
|
||||
text color for entries, views and content in general on backdrop windows */
|
||||
@define-color theme_unfocused_text_color #{"" +$text_color};
|
||||
|
||||
/*
|
||||
widget base background color on backdrop windows */
|
||||
@define-color theme_unfocused_bg_color #{"" +$backdrop_bg_color};
|
||||
|
||||
/*
|
||||
text widgets and the like base background color on backdrop windows */
|
||||
@define-color theme_unfocused_base_color #{"" +$backdrop_base_color};
|
||||
|
||||
/*
|
||||
base background color of selections on backdrop windows */
|
||||
@define-color theme_unfocused_selected_bg_color #{"" +$selected_bg_color};
|
||||
|
||||
/*
|
||||
text/foreground color of selections on backdrop windows */
|
||||
@define-color theme_unfocused_selected_fg_color #{"" + $selected_fg_color};
|
||||
|
||||
/*
|
||||
insensitive color on backdrop windows*/
|
||||
@define-color unfocused_insensitive_color #{"" + $backdrop_insensitive_color};
|
||||
|
||||
/*
|
||||
widgets main borders color */
|
||||
@define-color borders #{"" +$borders_color};
|
||||
|
||||
/*
|
||||
widgets main borders color on backdrop windows */
|
||||
@define-color unfocused_borders #{"" +$backdrop_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}
|
||||
|
||||
//WM
|
||||
|
||||
$_wm_highlight: if($variant=='light', $top_hilight, // Sass gets mad if this is
|
||||
transparentize(black,1)); // done directly in the
|
||||
// color definition
|
||||
|
||||
/*
|
||||
these colors are exported for the window manager and shouldn't be used in applications,
|
||||
read if you used those and something break with a version upgrade you're on your own... */
|
||||
@define-color wm_title shade(#{$fg_color}, 1.8);
|
||||
@define-color wm_unfocused_title #{$backdrop_fg_color};
|
||||
@define-color wm_highlight #{"" + $_wm_highlight};
|
||||
@define-color wm_borders_edge #{"" + $borders_edge};
|
||||
|
||||
@define-color wm_bg_a shade(#{$bg_color}, 1.2);
|
||||
@define-color wm_bg_b #{$bg_color};
|
||||
|
||||
@define-color wm_shadow alpha(black, 0.35);
|
||||
@define-color wm_border alpha(black, 0.18);
|
||||
|
||||
@define-color wm_button_hover_color_a shade(#{$bg_color}, 1.3);
|
||||
@define-color wm_button_hover_color_b #{$bg_color};
|
||||
@define-color wm_button_active_color_a shade(#{$bg_color}, 0.85);
|
||||
@define-color wm_button_active_color_b shade(#{$bg_color}, 0.89);
|
||||
@define-color wm_button_active_color_c shade(#{$bg_color}, 0.9);
|
||||
|
||||
//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%))};
|
||||
@@ -0,0 +1,77 @@
|
||||
// When color definition differs for dark and light variant
|
||||
// it gets @if ed depending on $variant
|
||||
|
||||
$base_color: if($variant == 'light', #ffffff, lighten(desaturate(#241f31, 100%), 2%));
|
||||
$text_color: if($variant == 'light', black, white);
|
||||
$bg_color: if($variant == 'light', #f6f5f4, darken(desaturate(#3d3846, 100%), 4%));
|
||||
$fg_color: if($variant == 'light', #2e3436, #eeeeec);
|
||||
|
||||
$selected_fg_color: #ffffff;
|
||||
$selected_bg_color: if($variant == 'light', #3584e4, darken(#3584e4, 20%));
|
||||
$selected_borders_color: if($variant== 'light', darken($selected_bg_color, 15%), darken($selected_bg_color, 30%));
|
||||
$borders_color: if($variant == 'light', darken($bg_color, 18%), darken($bg_color, 10%));
|
||||
$alt_borders_color: if($variant == 'light', darken($bg_color, 24%), darken($bg_color, 18%));
|
||||
$borders_edge: if($variant == 'light', transparentize(white, 0.2), transparentize($fg_color, 0.93));
|
||||
$link_color: if($variant == 'light', darken($selected_bg_color, 10%), lighten($selected_bg_color, 20%));
|
||||
$link_visited_color: if($variant == 'light', darken($selected_bg_color, 20%), lighten($selected_bg_color, 10%));
|
||||
$top_hilight: $borders_edge;
|
||||
$dark_fill: mix($borders_color, $bg_color, 50%);
|
||||
$headerbar_color: if($variant == 'light', lighten($bg_color, 5%), darken($bg_color, 3%));
|
||||
$menu_color: if($variant == 'light', $base_color, mix($bg_color, $base_color, 20%));
|
||||
$popover_bg_color: $bg_color;
|
||||
$popover_hover_color: lighten($bg_color, 5%);
|
||||
|
||||
$scrollbar_bg_color: if($variant == 'light', mix($bg_color, $fg_color, 80%), mix($base_color, $bg_color, 50%));
|
||||
$scrollbar_slider_color: mix($fg_color, $bg_color, 60%);
|
||||
$scrollbar_slider_hover_color: mix($fg_color, $bg_color, 80%);
|
||||
$scrollbar_slider_active_color: if($variant=='light', darken($selected_bg_color, 10%), lighten($selected_bg_color, 10%));
|
||||
|
||||
$warning_color: #f57900;
|
||||
$error_color: #cc0000;
|
||||
$success_color: if($variant == 'light', #33d17a, darken(#33d17a, 10%));
|
||||
$destructive_color: if($variant == 'light', #e01b24, darken(#e01b24, 10%));
|
||||
|
||||
$osd_fg_color: #eeeeec;
|
||||
$osd_text_color: white;
|
||||
$osd_bg_color: if($variant == 'light', transparentize(darken(desaturate(#3d3846, 100%), 4%),0.1), transparentize(darken(desaturate(#3d3846, 100%), 10%),0.1));
|
||||
$osd_insensitive_bg_color: transparentize(mix($osd_fg_color, opacify($osd_bg_color, 1), 10%), 0.5);
|
||||
$osd_insensitive_fg_color: mix($osd_fg_color, opacify($osd_bg_color, 1), 50%);
|
||||
$osd_borders_color: transparentize(black, 0.3);
|
||||
|
||||
$sidebar_bg_color: mix($bg_color, $base_color, 50%);
|
||||
$base_hover_color: transparentize($fg_color, 0.95);
|
||||
|
||||
$tooltip_borders_color: transparentize(white, 0.9);
|
||||
$shadow_color: transparentize(black, 0.9);
|
||||
|
||||
$drop_target_color: #4e9a06;
|
||||
|
||||
//insensitive state derived colors
|
||||
$insensitive_fg_color: mix($fg_color, $bg_color, 50%);
|
||||
$insensitive_bg_color: mix($bg_color, $base_color, 60%);
|
||||
$insensitive_borders_color: $borders_color;
|
||||
|
||||
//colors for the backdrop state, derived from the main colors.
|
||||
$backdrop_base_color: if($variant == 'light', darken($base_color, 1%), lighten($base_color, 1%));
|
||||
$backdrop_text_color: mix($text_color, $backdrop_base_color, 80%);
|
||||
$backdrop_bg_color: $bg_color;
|
||||
$backdrop_fg_color: mix($fg_color, $backdrop_bg_color, 50%);
|
||||
$backdrop_insensitive_color: if($variant == 'light', darken($backdrop_bg_color, 15%), lighten($backdrop_bg_color, 15%));
|
||||
$backdrop_selected_fg_color: if($variant == 'light', $backdrop_base_color, $backdrop_text_color);
|
||||
$backdrop_borders_color: mix($borders_color, $bg_color, 80%);
|
||||
$backdrop_dark_fill: mix($backdrop_borders_color, $backdrop_bg_color, 35%);
|
||||
$backdrop_sidebar_bg_color: mix($backdrop_bg_color, $backdrop_base_color, 50%);
|
||||
|
||||
$backdrop_scrollbar_bg_color: darken($backdrop_bg_color, 3%);
|
||||
$backdrop_scrollbar_slider_color: mix($backdrop_fg_color, $backdrop_bg_color, 40%);
|
||||
|
||||
$backdrop_menu_color: if($variant == 'light', $backdrop_base_color, mix($backdrop_bg_color, $backdrop_base_color, 20%));
|
||||
|
||||
//special cased widget colors
|
||||
$suggested_bg_color: $selected_bg_color;
|
||||
$suggested_border_color: $selected_borders_color;
|
||||
$progress_bg_color: $selected_bg_color;
|
||||
$progress_border_color: $selected_borders_color;
|
||||
$checkradio_bg_color: if($variant == 'light', $selected_bg_color, lighten($selected_bg_color,10%));
|
||||
$checkradio_fg_color: $selected_fg_color;
|
||||
$checkradio_borders_color: if($variant == 'light', darken($checkradio_bg_color,20%), darken($checkradio_bg_color,40%));
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,4 @@
|
||||
9c9
|
||||
< $button_radius: 5px;
|
||||
---
|
||||
> $button_radius: 6px;
|
||||
@@ -0,0 +1,615 @@
|
||||
// Drawing mixins
|
||||
|
||||
// generic drawing of more complex things
|
||||
|
||||
@function _widget_edge($c:$borders_edge) {
|
||||
// outer highlight "used" on most widgets
|
||||
@if $c == none { @return none; }
|
||||
@else { @return 0 1px $c; }
|
||||
}
|
||||
|
||||
@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
|
||||
@function entry_focus_border($fc:$selected_bg_color) {
|
||||
@if $variant == 'light' { @return $fc; }
|
||||
@else { @return if($fc==$selected_bg_color, $selected_borders_color, darken($fc, 35%)); }
|
||||
}
|
||||
|
||||
@function entry_focus_shadow($fc:$selected_bg_color) { @return inset 0 0 0 1px $fc; }
|
||||
|
||||
@mixin entry($t, $fc:$selected_bg_color, $edge: none) {
|
||||
//
|
||||
// Entries drawing function
|
||||
//
|
||||
// $t: entry type
|
||||
// $fc: focus color
|
||||
// $edge: set to none to not draw the bottom edge or specify a color to not
|
||||
// use the default one
|
||||
//
|
||||
// possible $t values:
|
||||
// normal, focus, insensitive, backdrop, backdrop-insensitive, osd, osd-focus, osd-backdrop;
|
||||
//
|
||||
|
||||
$_blank_edge: if($edge == none, none, 0 1px transparentize($edge, 1));
|
||||
$_entry_edge: if($edge == none, none, _widget_edge($edge));
|
||||
|
||||
@if $t==normal {
|
||||
color: $text_color;
|
||||
border-color: $borders_color;
|
||||
background-color: $base_color;
|
||||
@include _shadows(entry_focus_shadow(transparentize($fc, 1)), $_entry_edge);
|
||||
// for the transition to work the number of shadows in different states needs to match, hence the transparent shadow here.
|
||||
}
|
||||
@if $t==focus {
|
||||
@include _shadows(entry_focus_shadow($fc), $_entry_edge);
|
||||
border-color: entry_focus_border($fc);
|
||||
}
|
||||
@if $t==insensitive {
|
||||
color: $insensitive_fg_color;
|
||||
border-color: $borders_color;
|
||||
background-color: $insensitive_bg_color;
|
||||
box-shadow: $_entry_edge;
|
||||
}
|
||||
@if $t==backdrop {
|
||||
color: $backdrop_text_color;
|
||||
border-color: $backdrop_borders_color;
|
||||
background-color: $backdrop_base_color;
|
||||
box-shadow: $_blank_edge;
|
||||
}
|
||||
@if $t==backdrop-insensitive {
|
||||
color: $backdrop_insensitive_color;
|
||||
border-color: $backdrop_borders_color;
|
||||
background-color: $insensitive_bg_color;
|
||||
box-shadow: $_blank_edge;
|
||||
}
|
||||
@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;
|
||||
text-shadow: 0 1px black;
|
||||
-gtk-icon-shadow: 0 1px black;
|
||||
}
|
||||
@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;
|
||||
box-shadow: entry_focus_shadow($fc);
|
||||
text-shadow: 0 1px black;
|
||||
-gtk-icon-shadow: 0 1px black;
|
||||
}
|
||||
@if $t==osd-insensitive {
|
||||
color: $osd_insensitive_fg_color;
|
||||
border-color: $osd_borders_color;
|
||||
background-color: $osd_insensitive_bg_color;
|
||||
background-clip: padding-box;
|
||||
box-shadow: none;
|
||||
text-shadow: none;
|
||||
-gtk-icon-shadow: none;
|
||||
}
|
||||
@if $t==osd-backdrop {
|
||||
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;
|
||||
text-shadow: none;
|
||||
-gtk-icon-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
// buttons
|
||||
|
||||
@function _border_color($c, $darker: false) {
|
||||
@if $darker == true { @return darken($c, 20%); }
|
||||
@else { @return darken($c, 10%); }
|
||||
}
|
||||
|
||||
@function _text_shadow_color ($tc: $fg_color, $bg: $bg_color) {
|
||||
//
|
||||
// calculate the color of text shadows
|
||||
//
|
||||
// $tc is the text color
|
||||
// $bg is the background color
|
||||
//
|
||||
$_lbg: lightness($bg)/100%;
|
||||
@if lightness($tc)<50% { @return transparentize(white, 1-$_lbg/($_lbg*1.3)); }
|
||||
@else { @return transparentize(black, $_lbg*0.8); }
|
||||
}
|
||||
|
||||
@function _button_hilight_color($c) {
|
||||
//
|
||||
// calculate the right top hilight color for buttons
|
||||
//
|
||||
// $c: base color;
|
||||
//
|
||||
@if lightness($c)>95% { @return white; }
|
||||
@else if lightness($c)>90% { @return transparentize(white, 0.2); }
|
||||
@else if lightness($c)>80% { @return transparentize(white, 0.5); }
|
||||
@else if lightness($c)>50% { @return transparentize(white, 0.8); }
|
||||
@else if lightness($c)>40% { @return transparentize(white, 0.9); }
|
||||
@else { @return transparentize(white, 0.95); }
|
||||
}
|
||||
|
||||
@mixin _button_text_shadow ($tc:$fg_color, $bg:$bg_color) {
|
||||
//
|
||||
// helper function for the text emboss effect
|
||||
//
|
||||
// $tc is the optional text color, not the shadow color
|
||||
//
|
||||
// TODO: this functions needs a way to deal with special cases
|
||||
//
|
||||
|
||||
$_shadow: _text_shadow_color($tc, $bg);
|
||||
|
||||
@if lightness($tc)<50% {
|
||||
text-shadow: 0 1px $_shadow;
|
||||
-gtk-icon-shadow: 0 1px $_shadow;
|
||||
}
|
||||
@else {
|
||||
text-shadow: 0 -1px $_shadow;
|
||||
-gtk-icon-shadow: 0 -1px $_shadow;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin button($t, $c:$bg_color, $tc:$fg_color, $edge: none, $backimage: null) {
|
||||
//
|
||||
// Button drawing function
|
||||
//
|
||||
// $t: button type,
|
||||
// $c: base button color for colored* types
|
||||
// $tc: optional text color for colored* types
|
||||
// $edge: set to none to not draw the bottom edge or specify a color to not
|
||||
// use the default one
|
||||
// $backimage: additional background-image behind the default one
|
||||
// (for the button.circular hack)
|
||||
//
|
||||
// possible $t values:
|
||||
// normal, hover, active, insensitive, insensitive-active,
|
||||
// backdrop, backdrop-active, backdrop-insensitive, backdrop-insensitive-active,
|
||||
// osd, osd-hover, osd-active, osd-insensitive, osd-backdrop, undecorated
|
||||
//
|
||||
$_hilight_color: _button_hilight_color($c);
|
||||
$_button_edge: if($edge == none, none, _widget_edge($edge));
|
||||
$_blank_edge: if($edge == none, none, _widget_edge(transparentize($edge,1)));
|
||||
$_button_shadow: inset 0 -1px 0px transparentize(if($c != $bg_color, _border_color($c), $borders_color), .25),
|
||||
0 1px 2px transparentize($shadow_color, 0.03);
|
||||
|
||||
@if $t==normal {
|
||||
//
|
||||
// normal button
|
||||
//
|
||||
color: $tc;
|
||||
outline-color: transparentize($tc, 0.7);
|
||||
border-color: if($c != $bg_color, _border_color($c), $borders_color);
|
||||
border-bottom-color: if($c != $bg_color, _border_color($c, true), $alt_borders_color);
|
||||
background-image: image(lighten($c, 7%)),
|
||||
$backimage;
|
||||
//@include _button_text_shadow($tc, $c);
|
||||
@include _shadows(inset 0 1px $_hilight_color, $_button_edge, $_button_shadow);
|
||||
}
|
||||
|
||||
@else if $t==hover {
|
||||
//
|
||||
// hovered button
|
||||
//
|
||||
color: $tc;
|
||||
outline-color: transparentize($tc, 0.7);
|
||||
border-color: if($c != $bg_color, _border_color($c), $borders_color);
|
||||
border-bottom-color: if($c != $bg_color, _border_color($c, true), $alt_borders_color);
|
||||
@if $variant == 'light' {
|
||||
background-image: image(darken($c, 4%)),
|
||||
$backimage;
|
||||
//@include _button_text_shadow($tc, lighten($c, 6%));
|
||||
@include _shadows(inset 0 1px _button_hilight_color(lighten($c, 6%)), $_button_edge, $_button_shadow);
|
||||
}
|
||||
@else {
|
||||
background-image: linear-gradient(to top, darken($c,1%), lighten($c, 1%) 1px),
|
||||
$backimage;
|
||||
//@include _button_text_shadow($tc,lighten($c, 6%));
|
||||
@include _shadows(inset 0 1px _button_hilight_color(darken($c, 2%)), $_button_edge, $_button_shadow);
|
||||
}
|
||||
}
|
||||
|
||||
@if $t==normal-alt {
|
||||
//
|
||||
// normal button alternative look
|
||||
//
|
||||
color: $tc;
|
||||
outline-color: transparentize($tc, 0.7);
|
||||
border-color: if($c != $bg_color, _border_color($c, true), $alt_borders_color);
|
||||
//@include _button_text_shadow($tc, $c);
|
||||
@if $variant == 'light' {
|
||||
background-image: linear-gradient(to bottom, lighten($c, 5%) 20%, $c 90%);
|
||||
@include _shadows(inset 0 1px _button_hilight_color(lighten($c, 6%)),
|
||||
$_button_edge, $_button_shadow);
|
||||
}
|
||||
@else {
|
||||
background-image: linear-gradient(to bottom, darken($c, 3%) 20%, darken($c, 6%) 90%);
|
||||
@include _shadows(inset 0 1px $_hilight_color,
|
||||
$_button_edge, $_button_shadow);
|
||||
}
|
||||
}
|
||||
|
||||
@else if $t==hover-alt {
|
||||
//
|
||||
// hovered button alternative look
|
||||
//
|
||||
color: $tc;
|
||||
outline-color: transparentize($tc, 0.7);
|
||||
border-color: if($c != $bg_color, _border_color($c, true), $alt_borders_color);
|
||||
@if $variant == 'light' {
|
||||
background-image: linear-gradient(to bottom, lighten($c, 9%) 10%, lighten($c, 4%) 90%);
|
||||
@include _shadows(inset 0 1px _button_hilight_color(lighten($c, 6%)),
|
||||
$_button_edge, $_button_shadow);
|
||||
}
|
||||
@else {
|
||||
background-image: linear-gradient(to bottom, $c 20%, darken($c, 4%) 90%);
|
||||
@include _shadows(inset 0 1px $_hilight_color,
|
||||
$_button_edge, $_button_shadow);
|
||||
}
|
||||
}
|
||||
|
||||
@else if $t==active {
|
||||
//
|
||||
// pushed button
|
||||
//
|
||||
color: $tc;
|
||||
outline-color: transparentize($tc, 0.7);
|
||||
border-color: if($c != $bg_color, _border_color($c), $borders_color);
|
||||
background-image: if($variant == 'light', image(darken($c, 14%)), image(darken($c, 9%)));
|
||||
@include _shadows(inset 0 1px transparentize($_hilight_color, 1), $_button_edge);
|
||||
|
||||
text-shadow: none;
|
||||
-gtk-icon-shadow: none;
|
||||
}
|
||||
|
||||
@else if $t==insensitive {
|
||||
//
|
||||
// insensitive button
|
||||
//
|
||||
$_bg: if($c != $bg_color, mix($c, $base_color, 85%), $insensitive_bg_color);
|
||||
|
||||
color: if($tc != $fg_color, mix($tc, $_bg, 50%), $insensitive_fg_color);
|
||||
border-color: if($c != $bg_color, _border_color($c), $insensitive_borders_color);
|
||||
background-image: image($_bg);
|
||||
text-shadow: none;
|
||||
-gtk-icon-shadow: none;
|
||||
// white with 0 alpha to avoid an ugly transition, since no color means
|
||||
// black with 0 alpha
|
||||
@include _shadows(inset 0 1px transparentize(white, 1), $_button_edge);
|
||||
}
|
||||
|
||||
@else if $t==insensitive-active {
|
||||
//
|
||||
// insensitive pushed button
|
||||
//
|
||||
$_bg: if($variant == 'light', darken(mix($c, $base_color, 85%), 8%), darken(mix($c, $base_color, 85%), 6%));
|
||||
$_bc: if($c != $bg_color, _border_color($c), $insensitive_borders_color);
|
||||
|
||||
color: if($c != $bg_color, mix($tc, $_bg, 60%), $insensitive_fg_color);
|
||||
border-color: $_bc;
|
||||
background-image: image($_bg);
|
||||
// white with 0 alpha to avoid an ugly transition, since no color means
|
||||
// black with 0 alpha
|
||||
@include _shadows(inset 0 1px transparentize(white, 1), $_button_edge);
|
||||
}
|
||||
|
||||
@else if $t==backdrop {
|
||||
//
|
||||
// backdrop button
|
||||
//
|
||||
$_bg: if($c != $bg_color, $c, $backdrop_bg_color);
|
||||
$_bc: if($variant == 'light', $c, _border_color($c));
|
||||
|
||||
color: if($tc != $fg_color, mix($tc, $_bg, 80%), $backdrop_fg_color);
|
||||
border-color: if($c != $bg_color, $_bc, $backdrop_borders_color);
|
||||
background-image: image($_bg);
|
||||
text-shadow: none;
|
||||
-gtk-icon-shadow: none;
|
||||
@include _shadows(inset 0 1px transparentize(white, 1), $_blank_edge);
|
||||
}
|
||||
|
||||
@else if $t==backdrop-active {
|
||||
//
|
||||
// backdrop pushed button
|
||||
//
|
||||
$_bg: if($variant == 'light', darken(mix($c, $base_color, 85%), 8%), darken(mix($c, $base_color, 85%), 4%));
|
||||
$_bc: if($variant == 'light', $_bg ,_border_color($c));
|
||||
|
||||
color: if($tc != $fg_color, mix($tc, $_bg, 80%), $backdrop_fg_color);
|
||||
border-color: if($c != $bg_color, $_bc, $backdrop_borders_color);
|
||||
background-image: image($_bg);
|
||||
@include _shadows(inset 0 1px transparentize(white, 1), $_blank_edge);
|
||||
}
|
||||
|
||||
@else if $t==backdrop-insensitive {
|
||||
//
|
||||
// backdrop insensitive button
|
||||
//
|
||||
|
||||
$_bg: if($c != $bg_color, mix($c, $base_color, 85%), $insensitive_bg_color);
|
||||
$_bc: if($variant == 'light', $_bg,_border_color($c));
|
||||
|
||||
color: if($c != $bg_color, mix($tc, $_bg, 35%), $backdrop_insensitive_color);
|
||||
border-color: if($c != $bg_color, $_bc, $backdrop_borders_color);
|
||||
background-image: image($_bg);
|
||||
text-shadow: none;
|
||||
-gtk-icon-shadow: none;
|
||||
// white with 0 alpha to avoid an ugly transition, since no color means
|
||||
// black with 0 alpha
|
||||
@include _shadows(inset 0 1px transparentize(white, 1), $_blank_edge);
|
||||
}
|
||||
|
||||
@else if $t==backdrop-insensitive-active {
|
||||
//
|
||||
// backdrop insensitive pushed button
|
||||
//
|
||||
|
||||
$_bg: if($variant == 'light', darken(mix($c, $base_color, 85%), 8%), darken(mix($c, $base_color, 85%), 4%));
|
||||
$_bc: if($variant == 'light', $_bg, _border_color($c));
|
||||
|
||||
color: if($c != $bg_color, mix($tc, $_bg, 35%), $backdrop_insensitive_color);
|
||||
border-color: if($c != $bg_color, $_bc, $backdrop_borders_color);
|
||||
background-image: image($_bg);
|
||||
@include _shadows(inset 0 1px transparentize(white, 1), $_blank_edge);
|
||||
}
|
||||
|
||||
@else if $t==osd {
|
||||
//
|
||||
// normal osd button
|
||||
//
|
||||
$_bg: if($c != $bg_color, transparentize($c, 0.5), $osd_bg_color);
|
||||
|
||||
color: $osd_fg_color;
|
||||
border-color: $osd_borders_color;
|
||||
background-color: transparent;
|
||||
background-image: image($_bg);
|
||||
background-clip: padding-box;
|
||||
box-shadow: inset 0 1px transparentize(white, 0.9);
|
||||
text-shadow: 0 1px black;
|
||||
-gtk-icon-shadow: 0 1px black;
|
||||
outline-color: transparentize($osd_fg_color, 0.7);
|
||||
}
|
||||
|
||||
@else if $t==osd-hover {
|
||||
//
|
||||
// active osd button
|
||||
//
|
||||
$_bg: if($c != $bg_color, transparentize($c, 0.3), lighten($osd_bg_color, 12%));
|
||||
|
||||
color: white;
|
||||
border-color: $osd_borders_color;
|
||||
background-color: transparent;
|
||||
background-image: image($_bg);
|
||||
background-clip: padding-box;
|
||||
box-shadow: inset 0 1px transparentize(white, 0.9);
|
||||
text-shadow: 0 1px black;
|
||||
-gtk-icon-shadow: 0 1px black;
|
||||
outline-color: transparentize($osd_fg_color, 0.7);
|
||||
}
|
||||
|
||||
@else if $t==osd-active {
|
||||
//
|
||||
// active osd button
|
||||
//
|
||||
$_bg: if($c != $bg_color, $c, $osd_borders_color);
|
||||
|
||||
color: white;
|
||||
border-color: $osd_borders_color;
|
||||
background-color: transparent;
|
||||
background-image: image($_bg);
|
||||
background-clip: padding-box;
|
||||
box-shadow: none;
|
||||
text-shadow: none;
|
||||
-gtk-icon-shadow: none;
|
||||
outline-color: transparentize($osd_fg_color, 0.7);
|
||||
}
|
||||
|
||||
@else if $t==osd-insensitive {
|
||||
//
|
||||
// insensitive osd button
|
||||
//
|
||||
color: $osd_insensitive_fg_color;
|
||||
border-color: $osd_borders_color;
|
||||
background-color: transparent;
|
||||
background-image: image($osd_insensitive_bg_color);
|
||||
background-clip: padding-box;
|
||||
box-shadow: none;
|
||||
text-shadow: none;
|
||||
-gtk-icon-shadow: none;
|
||||
}
|
||||
|
||||
@else if $t==osd-backdrop {
|
||||
//
|
||||
// backdrop osd button
|
||||
//
|
||||
$_bg: if($c != $bg_color, transparentize($c, 0.5), $osd_bg_color);
|
||||
|
||||
color: $osd_fg_color;
|
||||
border-color: $osd_borders_color;
|
||||
background-color: transparent;
|
||||
background-image: image($_bg);
|
||||
background-clip: padding-box;
|
||||
box-shadow: none;
|
||||
text-shadow: none;
|
||||
-gtk-icon-shadow: none;
|
||||
}
|
||||
|
||||
@else if $t==undecorated {
|
||||
//
|
||||
// reset
|
||||
//
|
||||
border-color: transparent;
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
|
||||
@include _shadows(inset 0 1px transparentize(white, 1), $_blank_edge);
|
||||
|
||||
text-shadow: none;
|
||||
-gtk-icon-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin headerbar_fill($c:$headerbar_color, $hc:$top_hilight, $ov: none) {
|
||||
//
|
||||
// headerbar fill
|
||||
//
|
||||
// $c: base color
|
||||
// $hc: top highlight color
|
||||
// $ov: a background layer for background shorthand (hence no commas!)
|
||||
//
|
||||
$gradient: linear-gradient(to top, darken($c, 2%), lighten($c, 1%));
|
||||
|
||||
@if $variant == 'dark' { $gradient: linear-gradient(to top, lighten($c, 4%), lighten($c, 6%)); }
|
||||
|
||||
@if $ov != none { background: $c $ov, $gradient; }
|
||||
@else { background: $c $gradient; }
|
||||
|
||||
box-shadow: inset 0 1px $hc; // top highlight
|
||||
}
|
||||
|
||||
@mixin overshoot($p, $t:normal, $c:$fg_color) {
|
||||
//
|
||||
// overshoot
|
||||
//
|
||||
// $p: position
|
||||
// $t: type
|
||||
// $c: base color
|
||||
//
|
||||
// possible $p values:
|
||||
// top, bottom, right, left
|
||||
//
|
||||
// possible $t values:
|
||||
// normal, backdrop
|
||||
//
|
||||
|
||||
$_small_gradient_length: 5%;
|
||||
$_big_gradient_length: 100%;
|
||||
|
||||
$_position: center top;
|
||||
$_small_gradient_size: 100% $_small_gradient_length;
|
||||
$_big_gradient_size: 100% $_big_gradient_length;
|
||||
|
||||
@if $p==bottom {
|
||||
$_position: center bottom;
|
||||
$_linear_gradient_direction: to top;
|
||||
}
|
||||
|
||||
@else if $p==right {
|
||||
$_position: right center;
|
||||
$_small_gradient_size: $_small_gradient_length 100%;
|
||||
$_big_gradient_size: $_big_gradient_length 100%;
|
||||
}
|
||||
|
||||
@else if $p==left {
|
||||
$_position: left center;
|
||||
$_small_gradient_size: $_small_gradient_length 100%;
|
||||
$_big_gradient_size: $_big_gradient_length 100%;
|
||||
}
|
||||
|
||||
$_small_gradient_color: $c;
|
||||
$_big_gradient_color: $c;
|
||||
|
||||
@if $c==$fg_color {
|
||||
$_small_gradient_color: darken($borders_color, 10%);
|
||||
$_big_gradient_color: $fg_color;
|
||||
|
||||
@if $t==backdrop { $_small_gradient_color: $backdrop_borders_color; }
|
||||
}
|
||||
|
||||
$_small_gradient: -gtk-gradient(radial,
|
||||
$_position, 0,
|
||||
$_position, 0.5,
|
||||
to($_small_gradient_color),
|
||||
to(transparentize($_small_gradient_color, 1)));
|
||||
|
||||
$_big_gradient: -gtk-gradient(radial,
|
||||
$_position, 0,
|
||||
$_position, 0.6,
|
||||
from(transparentize($_big_gradient_color, 0.93)),
|
||||
to(transparentize($_big_gradient_color, 1)));
|
||||
|
||||
@if $t==normal {
|
||||
background-image: $_small_gradient, $_big_gradient;
|
||||
background-size: $_small_gradient_size, $_big_gradient_size;
|
||||
}
|
||||
|
||||
@else if $t==backdrop {
|
||||
background-image: $_small_gradient;
|
||||
background-size: $_small_gradient_size;
|
||||
}
|
||||
|
||||
background-repeat: no-repeat;
|
||||
background-position: $_position;
|
||||
|
||||
background-color: transparent; // reset some properties to be sure to not inherit them somehow
|
||||
border: none; //
|
||||
box-shadow: none; //
|
||||
}
|
||||
|
||||
/***************************
|
||||
* Check and Radio buttons *
|
||||
***************************/
|
||||
|
||||
@mixin check($t, $c:$bg_color, $tc:$fg_color, $checked: false) {
|
||||
// Check/Radio drawing function
|
||||
//
|
||||
// $t: check/radio type,
|
||||
// $c: base button color for colored* types
|
||||
// $tc: optional text color for colored* types
|
||||
// $checked: bool to chose between checked/unchecked
|
||||
//
|
||||
// possible $t values:
|
||||
// normal, hover, active, insensitive, backdrop, backdrop-insensitive
|
||||
|
||||
$_border_color: if($c==$checkradio_bg_color, $c, $alt_borders_color);
|
||||
$_dim_border_color: transparentize($_border_color, if($variant == 'light', 0.3, 0.7));
|
||||
|
||||
@if $t==normal {
|
||||
background-clip: if($checked, border-box, padding-box);
|
||||
background-image: linear-gradient(to bottom, lighten($c, 5%) 20%, $c 90%);
|
||||
border-color: $_border_color;
|
||||
box-shadow: 0 1px transparentize(black, 0.95);
|
||||
color: $tc;
|
||||
}
|
||||
|
||||
@if $t==hover {
|
||||
background-image: if($c == white, image(darken($c, 5%)), linear-gradient(to bottom, lighten($c, 9%) 10%, lighten($c, 4%) 90%));
|
||||
}
|
||||
|
||||
@if $t==active {
|
||||
box-shadow: inset 0 1px 1px 0px if($variant == 'light', rgba(0, 0, 0, 0.2), black);
|
||||
}
|
||||
|
||||
@if $t==insensitive {
|
||||
box-shadow: none;
|
||||
color: transparentize($tc, 0.3);
|
||||
}
|
||||
|
||||
@if $t==backdrop {
|
||||
background-image: image($c);
|
||||
box-shadow: none;
|
||||
color: $tc;
|
||||
}
|
||||
|
||||
@if $t==backdrop-insensitive {
|
||||
box-shadow: none;
|
||||
color: transparentize($tc, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,34 @@
|
||||
145c145
|
||||
< @else { @return transparentize(white, 0.98); }
|
||||
---
|
||||
> @else { @return transparentize(white, 0.95); }
|
||||
189c189,190
|
||||
< $_button_shadow: 0 1px 2px transparentize($shadow_color, 0.03);
|
||||
---
|
||||
> $_button_shadow: inset 0 -1px 0px transparentize(if($c != $bg_color, _border_color($c), $borders_color), .25),
|
||||
> 0 1px 2px transparentize($shadow_color, 0.03);
|
||||
199,200c200
|
||||
< background-image: if($variant == 'light', linear-gradient(to top, darken($c, 4%) 2px, $c),
|
||||
< linear-gradient(to top, darken($c,1%) 2px, $c)),
|
||||
---
|
||||
> background-image: image(lighten($c, 7%)),
|
||||
202c202
|
||||
< @include _button_text_shadow($tc, $c);
|
||||
---
|
||||
> //@include _button_text_shadow($tc, $c);
|
||||
215c215
|
||||
< background-image: linear-gradient(to top, $c, lighten($c, 1%) 1px),
|
||||
---
|
||||
> background-image: image(darken($c, 4%)),
|
||||
217c217
|
||||
< @include _button_text_shadow($tc, lighten($c, 6%));
|
||||
---
|
||||
> //@include _button_text_shadow($tc, lighten($c, 6%));
|
||||
223c223
|
||||
< @include _button_text_shadow($tc,lighten($c, 6%));
|
||||
---
|
||||
> //@include _button_text_shadow($tc,lighten($c, 6%));
|
||||
235c235
|
||||
< @include _button_text_shadow($tc, $c);
|
||||
---
|
||||
> //@include _button_text_shadow($tc, $c);
|
||||
@@ -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 @@
|
||||
../_drawing.scss
|
||||
@@ -0,0 +1,148 @@
|
||||
@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; }
|
||||
|
||||
&.image { background: none; }
|
||||
}
|
||||
|
||||
// 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;
|
||||
}
|
||||
}
|
||||
+26
@@ -0,0 +1,26 @@
|
||||
#!/bin/sh
|
||||
|
||||
GREEN='\033[0;32m'
|
||||
YELLOW='\033[0;33m'
|
||||
RESET='\033[0m'
|
||||
|
||||
VERSION=1.0.3
|
||||
|
||||
echo
|
||||
printf " $YELLOW[ i ]$RESET Upstream version $VERSION\n"
|
||||
echo
|
||||
|
||||
while read file;
|
||||
do
|
||||
echo
|
||||
printf " $GREEN[ * ]$RESET Downloading file $file\n"
|
||||
wget https://gitlab.gnome.org/GNOME/libhandy/raw/$VERSION/src/themes/$file --timestamping --quiet
|
||||
done <<- EOF
|
||||
_definitions.scss
|
||||
_shared-base.scss
|
||||
_Adwaita-base.scss
|
||||
_fallback-base.scss
|
||||
EOF
|
||||
echo
|
||||
|
||||
ln -rsfv ../_drawing.scss
|
||||
Executable
+30
@@ -0,0 +1,30 @@
|
||||
#!/bin/sh
|
||||
|
||||
GREEN='\033[0;32m'
|
||||
YELLOW='\033[0;33m'
|
||||
RESET='\033[0m'
|
||||
|
||||
VERSION=3.24.28
|
||||
|
||||
echo
|
||||
printf " $YELLOW[ i ]$RESET Upstream version $VERSION\n"
|
||||
echo
|
||||
|
||||
while read file;
|
||||
do
|
||||
echo
|
||||
printf " $GREEN[ * ]$RESET Downloading file $file\n"
|
||||
wget https://gitlab.gnome.org/GNOME/gtk/raw/$VERSION/gtk/theme/Adwaita/$file --timestamping --quiet
|
||||
|
||||
if [ -f $file.patch ]
|
||||
then
|
||||
printf " $YELLOW[ ~ ]$RESET Apply patch\n"
|
||||
patch $file $file.patch --quiet
|
||||
fi
|
||||
done <<- EOF
|
||||
_colors.scss
|
||||
_common.scss
|
||||
_drawing.scss
|
||||
_colors-public.scss
|
||||
EOF
|
||||
|
||||
Reference in New Issue
Block a user