[gnome-shell/wip/snwh/sass-cleanup: 457/475] theme: more search sass reorganization
- From: Sam Hewitt <snwh src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [gnome-shell/wip/snwh/sass-cleanup: 457/475] theme: more search sass reorganization
- Date: Wed, 18 Dec 2019 16:02:46 +0000 (UTC)
commit 11dae58ee48cb2cd1e4e077232be5ec853af6f8c
Author: Sam Hewitt <sam snwh org>
Date: Mon Dec 2 13:53:26 2019 -0500
theme: more search sass reorganization
data/theme/gnome-shell-sass/_colors.scss | 2 +-
.../gnome-shell-sass/widgets/_search-results.scss | 152 ++++++++++++---------
data/theme/gnome-shell.scss | 2 +-
3 files changed, 91 insertions(+), 65 deletions(-)
---
diff --git a/data/theme/gnome-shell-sass/_colors.scss b/data/theme/gnome-shell-sass/_colors.scss
index bf9356c7cb..a93fced7cb 100644
--- a/data/theme/gnome-shell-sass/_colors.scss
+++ b/data/theme/gnome-shell-sass/_colors.scss
@@ -35,7 +35,7 @@ $osd_outer_borders_color: if($variant == 'light', rgba(0,0,0,0.1), lighten($osd_
$shadow_color: if($variant == 'light', rgba(0,0,0,0.1), rgba(0,0,0,0.2));
=======
$osd_borders_color: if($variant == 'light', rgba(255,255,255,0.1), rgba(0,0,0,0.3));
-$osd_outer_borders_color: rgba(255,255,255,0.16);
+$osd_outer_borders_color: if($variant == 'light', rgba(255,255,255,0.4), rgba(255,255,255,0.1));
$shadow_color: rgba(0,0,0,0.9);
de7edaff5... theme: OSD refinements; overview and panel refinements
diff --git a/data/theme/gnome-shell-sass/widgets/_search-results.scss
b/data/theme/gnome-shell-sass/widgets/_search-results.scss
index 3c5731db16..0df312979e 100644
--- a/data/theme/gnome-shell-sass/widgets/_search-results.scss
+++ b/data/theme/gnome-shell-sass/widgets/_search-results.scss
@@ -1,41 +1,57 @@
/* Search */
+%search_result_bubble {
+ background-color: transparentize(lighten($osd_bg_color, 5%), 0.2);
+ border-radius: $modal_radius + 3px;
+ border: 1px solid $osd_outer_borders_color;
+ box-shadow: 0 1px 4px 0 rgba(0,0,0,0.3);
+ text-shadow: 0 1px rgba(0,0,0,0.3);
+ color: $osd_fg_color;
+}
+
+// search overview container
#searchResultsContent {
max-width: 1000px;
padding: $base_padding * 2;
spacing: 0;
+ margin-bottom: $base_margin * 2;
}
+// search results section
.search-section {
- background-color: transparentize(lighten($osd_bg_color, 5%), 0.2);
- border-radius: $base_border_radius * 3;
- border: 1px solid $osd_outer_borders_color;
- box-shadow: 0 1px 4px 0 rgba(0,0,0,0.3);
- color: $osd_fg_color;
- text-shadow: 1px rgba(0,0,0,0.3);
+ @extend %search_result_bubble;
padding: $base_padding * 2;
- margin-bottom: $base_padding;
spacing:0;
-}
+ margin-top: $base_padding * 2;
+ margin-bottom: $base_padding * 2;
+
+ // hide separator
+ &:first-child .search-section-separator,
+ &:last-child .search-section-separator {
+ background-color: transparent;
+ }
+ // separator
+ .search-section-separator {
+ // margin-top: $base_padding * 2;
+ // height: 1px;
+ // background-color: $osd_outer_borders_color;
+ height: 0px;
+ background-color: transparent;
+ }
-.search-section-content {
- spacing: 0;
+ // content
+ .search-section-content {
+ spacing: 0;
+ }
}
+
// "no results" text
.search-statustext {
@extend %status_text;
}
-.search-section-separator {
- // height: 2px; background-color: rgba(255, 255, 255, 0.2);
- height: 0;
- background-color:transparent;
-}
-
-.search-section:last-child .search-section-separator { background-color: transparent; }
-
// Search results with icons
.grid-search-result {
> .overview-icon {
@@ -52,8 +68,7 @@
&:focus,
&:selected {
.overview-icon {
- // background-color: transparentize($osd_bg_color,0.8);
- background-color: red;
+ background-color: transparentize($osd_bg_color,0.8);
color: $osd_fg_color;
}
}
@@ -68,66 +83,77 @@
}
}
-// Search results
-.list-search-results {
- spacing: $base_spacing;
-}
-
-.list-search-result {
+// search result provider
+.search-provider-icon {
@extend %icon_tile;
+
+ padding: 0;
spacing: 0;
- color: $osd_fg_color;
-
+ margin-right: $base_margin * 2;
+
&:focus,
&:selected,
&:hover {
background-color: transparentize($osd_fg_color,.9);
transition-duration: 200ms;
}
+
&:active,
&:checked {
background-color: transparentize(darken($osd_bg_color,10%),.1);
}
-}
-.list-search-result-content {
- spacing: 0;
-}
+ // content
+ .list-search-provider-content {
+ spacing: $base_spacing * 3;
-.list-search-result-title {
- color: darken($osd_fg_color,5%);
- spacing: 12px;
- padding-right: $base_padding;
+ // provider labels
+ .list-search-provider-details {
+ width: 160px;
+ margin-top: 0;
+ color: darken($osd_fg_color, 8%);
+ font-weight: bold;
+ }
+ }
}
-.list-search-result-description {
- color: darken($osd_fg_color, 30%);
-}
+// search results list
+.list-search-results {
+ spacing: $base_spacing;
-.list-search-provider-details {
- width: 150px;
- color: darken($osd_fg_color,5%);
- margin-top: $base_margin;
-}
+ // search result listitem
+ .list-search-result {
+ @extend %icon_tile;
+ spacing: 0;
+ color: $osd_fg_color;
-.list-search-provider-content {
- spacing: 20px;
-}
+ &:focus,
+ &:selected,
+ &:hover {
+ background-color: transparentize($osd_fg_color,.9);
+ transition-duration: 200ms;
+ }
+ &:active,
+ &:checked {
+ background-color: transparentize(darken($osd_bg_color,10%),.1);
+ }
-// icons
-.search-provider-icon {
- @extend %icon_tile;
- padding: 0;
- spacing: 0;
-
- &:focus,
- &:selected,
- &:hover {
- background-color: transparentize($osd_fg_color,.9);
- transition-duration: 200ms;
- }
- &:active,
- &:checked {
- background-color: transparentize(darken($osd_bg_color,10%),.1);
+ // content
+ .list-search-result-content {
+ spacing: 0;
+ }
+
+ // list item title
+ .list-search-result-title {
+ color: $osd_fg_color;
+ spacing: $base_spacing * 2;
+ padding-right: $base_padding;
+ font-weight: bold;
+ }
+
+ // list item description
+ .list-search-result-description {
+ color: darken($osd_fg_color, 30%);
+ }
}
-}
\ No newline at end of file
+}
diff --git a/data/theme/gnome-shell.scss b/data/theme/gnome-shell.scss
index 62237fd5d3..3def5896cf 100644
--- a/data/theme/gnome-shell.scss
+++ b/data/theme/gnome-shell.scss
@@ -1,4 +1,4 @@
-$variant: 'light';
+$variant: 'dark';
@import "gnome-shell-sass/_colors"; //use gtk colors
@import "gnome-shell-sass/_drawing";
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]