[epiphany/wip/exalm/tabs: 6/7] CSS: Style tabs for incognito window
- From: Michael Catanzaro <mcatanzaro src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [epiphany/wip/exalm/tabs: 6/7] CSS: Style tabs for incognito window
- Date: Sun, 10 Feb 2019 22:05:05 +0000 (UTC)
commit 772f2e17331aba9f4cc18d9fa343a8945c022ed2
Author: Alexander Mikhaylenko <exalm7659 gmail com>
Date: Sat Feb 9 20:18:40 2019 +0500
CSS: Style tabs for incognito window
src/resources/themes/_Adwaita-base.scss | 58 +++++++++++++++++++++++++++++++--
src/resources/themes/_definitions.scss | 10 ++++++
2 files changed, 65 insertions(+), 3 deletions(-)
---
diff --git a/src/resources/themes/_Adwaita-base.scss b/src/resources/themes/_Adwaita-base.scss
index 284d2d8a2..52b729d75 100644
--- a/src/resources/themes/_Adwaita-base.scss
+++ b/src/resources/themes/_Adwaita-base.scss
@@ -12,7 +12,7 @@
&:backdrop {
background-image: -gtk-icontheme($incognito_icon), image($incognito_color);
box-shadow: inset 0 1px $incognito_edge_color;
- color: transparentize($backdrop_fg_color, 0.9); // color of the overlayed icon in backdrop
+ color: transparentize($incognito_backdrop_fg_color, 0.9); // color of the overlayed icon in backdrop
}
}
@@ -24,11 +24,63 @@
}
}
- headerbar, actionbar {
+ notebook > header {
+ border-color: $incognito_borders_color;
+ background-color: $incognito_dark_fill;
+
+ &:backdrop {
+ border-color: $incognito_backdrop_borders_color;
+ background-color: $incognito_backdrop_dark_fill;
+ }
+
+ > tabs > tab {
+ color: $incognito_insensitive_fg_color;
+
+ button.flat {
+ &:hover { color: currentColor; }
+ &, &:backdrop { color: gtkalpha(currentColor, 0.3); }
+ }
+
+ &:hover {
+ color: mix($incognito_insensitive_fg_color, $fg_color, 50%);
+ border-color: transparentize($incognito_borders_color, 0.7);
+ background-color: transparentize($incognito_color, 0.8);
+ box-shadow: inset 0 -3px $incognito_borders_color;
+ }
+
+ &:backdrop {
+ color: mix($incognito_backdrop_fg_color, $incognito_backdrop_bg_color, 60%);
+ border-color: transparent;
+ background-color: transparent;
+ box-shadow: none;
+ }
+
+ &:checked {
+ color: $fg_color;
+ border-color: transparentize($incognito_borders_color, 0.5);
+ background-color: transparentize($incognito_color, 0.5);
+ box-shadow: inset 0 -3px $selected_bg_color;
+
+ &:hover { background-color: transparentize($incognito_color, 0.3); }
+ }
+
+ &:backdrop:checked {
+ color: $incognito_backdrop_fg_color;
+ border-color: $incognito_backdrop_borders_color;
+ background-color: $incognito_backdrop_bg_color;
+ }
+ }
+
+ > tabs > arrow:active {
+ @include button(active, $incognito_color);
+ }
+ }
+
+ headerbar, actionbar, notebook > header {
> * {
color: $fg_color;
- &:backdrop { color: $backdrop_fg_color }
+ &:backdrop { color: $incognito_backdrop_fg_color }
}
button { // changing the headerbar background color requires changing widget borders accordingly
diff --git a/src/resources/themes/_definitions.scss b/src/resources/themes/_definitions.scss
index 14cf00022..4885f482c 100644
--- a/src/resources/themes/_definitions.scss
+++ b/src/resources/themes/_definitions.scss
@@ -8,6 +8,12 @@ $incognito_color: lighten($incognito_base_color, 5%);
$incognito_icon: 'user-not-tracked-symbolic';
$incognito_edge_color: if($variant == 'light', transparentize(white, 0.2), transparentize($fg_color, 0.93));
$incognito_borders_color: if($variant == 'light', darken($incognito_color, 11%), darken($incognito_color,
5%));
+$incognito_dark_fill: mix($incognito_borders_color, $incognito_color, 50%);
+$incognito_insensitive_fg_color: mix($fg_color, $incognito_color, 50%);
+$incognito_backdrop_bg_color: $incognito_color;
+$incognito_backdrop_fg_color: mix($fg_color, $incognito_backdrop_bg_color, 50%);
+$incognito_backdrop_borders_color: mix($incognito_borders_color, $incognito_color, 80%);
+$incognito_backdrop_dark_fill: mix($incognito_backdrop_borders_color, $incognito_backdrop_bg_color, 35%);
// automation mode
$automation_color: #ff9600;
@@ -18,3 +24,7 @@ $automation_edge_color: lighten($automation_color, 13%);
@function themecolor($s) {
@return unquote("@" + "#{$s}");
}
+
+@function gtkalpha($c,$a) {
+ @return unquote("alpha(#{$c},#{$a})");
+}
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]