[epiphany/wip/exalm/dark: 1/3] CSS: Prepare for dark variant

[Alexander Mikhaylenko <alexm src gnome org>]

commit 2027bfc65e9723e608d71ef2ebc7a6e7a713e2bf
Author: Alexander Mikhaylenko <exalm7659 gmail com>
Date:   Sat Feb 2 00:07:22 2019 +0500

    CSS: Prepare for dark variant
    
    Move Adwaita.scss to _Adwaita-base.scss and shared.scss to _shared-base.scss,
    make the actual style files define Adwaita variant and include corresponding
    base file.

 src/resources/themes/Adwaita.scss       | 236 +-------------------------------
 src/resources/themes/_Adwaita-base.scss | 232 +++++++++++++++++++++++++++++++
 src/resources/themes/_definitions.scss  |   6 +-
 src/resources/themes/_shared-base.scss  | 143 +++++++++++++++++++
 src/resources/themes/shared.scss        | 144 +------------------
 5 files changed, 381 insertions(+), 380 deletions(-)
---
diff --git a/src/resources/themes/Adwaita.scss b/src/resources/themes/Adwaita.scss
index d62c11fe2..84d2772fc 100644
--- a/src/resources/themes/Adwaita.scss
+++ b/src/resources/themes/Adwaita.scss
@@ -1,235 +1,3 @@
-@import 'definitions';
+$variant: 'light';
 
-// Include base styling.
-@import url("resource:///org/gnome/Epiphany/themes/shared.css");
-
-
-.incognito-mode {
-  headerbar {
-    @include headerbar_fill(darken($incognito_color, 10%), $incognito_edge_color, 
-gtk-icontheme($incognito_icon) 180px 0 / 64px 64px no-repeat);
-
-    border-color: _border_color($incognito_borders_color);
-
-    color: transparentize($fg_color, 0.8); // this is the color of the overlayed icon
-
-    &: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
-    }
-  }
-
-  actionbar {
-    background: $incognito_color;
-
-    > revealer > box {
-      border-color: $incognito_borders_color;
-    }
-  }
-
-  headerbar, actionbar {
-    > * {
-      color: $fg_color;
-
-      &:backdrop { color: $backdrop_fg_color }
-    }
-
-    button { // changing the headerbar background color requires changing widget borders accordingly
-      @include button(normal, $incognito_color);
-
-      &.flat, &.titlebutton { @include button(undecorated); }
-
-      &.titlebutton { @include _button_text_shadow($fg_color, $incognito_color); }
-
-      &:hover { @include button(hover, $incognito_color); }
-
-      &:active, &:checked { @include button(active, $incognito_color); }
-
-      &:disabled { @include button(insensitive, $incognito_color); }
-
-      &:backdrop {
-        @include button(backdrop, $incognito_color);
-        border-color: _border_color($incognito_color);
-
-        &:active {
-          @include button(backdrop-active, $incognito_color);
-          border-color: _border_color($incognito_color);
-        }
-
-        &:disabled {
-          @include button(backdrop-insensitive, $incognito_color);
-          border-color: _border_color($incognito_color);
-        }
-      }
-
-      &:checked {
-        background: image(darken($incognito_color, 17%));
-        border-color: darken($incognito_borders_color, 3%);
-        border-top-color: darken($incognito_borders_color, 8%);
-        &:backdrop {
-          @include button(backdrop-active, $incognito_color);
-        }
-      }
-
-      &.flat:backdrop, &.titlebutton:backdrop { @include button(undecorated); }
-    }
-
-    entry {
-      border-color: _border_color($incognito_borders_color);
-
-      &:focus {
-        border-color: entry_focus_border($selected_bg_color);
-        box-shadow: entry_focus_shadow($selected_bg_color);
-      }
-
-      &:backdrop { box-shadow: none; }
-    }
-  }
-}
-
-.automation-mode {
-  headerbar {
-    @include headerbar_fill($automation_color, $automation_edge_color);
-
-    border-color: _border_color($automation_color);
-
-    color: transparentize($fg_color, 0.8); // this is the color of the overlayed icon
-
-    > * {
-      color: $fg_color;
-
-      &:backdrop { color: $backdrop_fg_color }
-    }
-
-    &:backdrop {
-      box-shadow: inset 0 1px $automation_edge_color;
-      color: transparentize($backdrop_fg_color, 0.9); // color of the overlayed icon in backdrop
-    }
-
-    button { // changing the headerbar background color requires changing widget borders accordingly
-      @include button(normal, $automation_color);
-
-      &.flat, &.titlebutton { @include button(undecorated); }
-
-      &.titlebutton { @include _button_text_shadow($fg_color, $automation_color); }
-
-      &:hover { @include button(hover, $automation_color); }
-
-      &:active, &:checked { @include button(active, $automation_color); }
-
-      &:disabled { @include button(insensitive, $automation_color); }
-
-      &:backdrop {
-        @include button(backdrop, $automation_color);
-        border-color: _border_color($automation_color);
-
-        &:active {
-          @include button(backdrop-active, $automation_color);
-          border-color: _border_color($automation_color);
-        }
-
-        &:disabled {
-          @include button(backdrop-insensitive, $automation_color);
-          border-color: _border_color($automation_color);
-        }
-      }
-
-      &.flat:backdrop, &.titlebutton:backdrop { @include button(undecorated); }
-    }
-
-    entry {
-      border-color: _border_color($automation_color);
-
-      &:focus {
-        border-color: entry_focus_border($selected_bg_color);
-        box-shadow: entry_focus_shadow($selected_bg_color);
-      }
-
-      &:backdrop { box-shadow: none; }
-    }
-  }
-}
-
-$close_button_fg_color: lighten($fg_color, 10%);
-@mixin close_button($bg:$bg_color, $fg:$close_button_fg_color) {
-  background: none;
-  border: none;
-  box-shadow: none;
-
-  &:last-child {
-    image {
-      color: $fg;
-      border: 1px solid transparent;
-      border-radius: 5px;
-    }
-
-    &:hover image {
-      @include button(normal, $bg, $fg);
-      @include button(hover, $bg, $fg);
-    }
-
-    &:active image {
-      @include button(normal, $bg, $fg);
-      @include button(active, $bg, $fg);
-    }
-  }
-}
-
-.url_entry:not(:hover):not(:focus) {
-  background-color: transparentize($base_color, 0.25);
-}
-
-.bookmark-tag-widget {
-  background-color: darken($bg_color, 10%);
-
-  image,
-  label {
-    color: $fg_color;
-  }
-
-  button {
-    @include close_button();
-  }
-}
-
-.bookmark-tag-widget-selected {
-  background-color: themecolor(theme_selected_bg_color);
-
-  image,
-  label {
-    color: themecolor(theme_selected_fg_color);
-  }
-
-  button {
-    @include close_button($selected_bg_color, $selected_fg_color);
-  }
-}
-
-.page-row-close-button {
-  @include close_button();
-
-  row:selected & {
-    @include close_button($selected_bg_color, $selected_fg_color);
-  }
-
-  row.narrow & image {
-    padding: 6px;
-  }
-}
-
-@keyframes needs_attention_keyframes {
-    0% {background-image: linear-gradient(to bottom, #fafafa, #ededed 40%,  #e0e0e0); border-color: 
themecolor(borders); }
-    /* can't do animation-direction, so holding the color on two keyframes */
-    30% {background-image: linear-gradient(to bottom, themecolor(theme_base_color), 
themecolor(theme_base_color), themecolor(theme_base_color)); border-color: themecolor(theme_fg_color); }
-    90% {background-image: linear-gradient(to bottom, themecolor(theme_base_color), 
themecolor(theme_base_color), themecolor(theme_base_color)); border-color: themecolor(theme_fg_color); }
-    100% {background-image: linear-gradient(to bottom, #fafafa, #ededed 40%,  #e0e0e0); border-color: 
themecolor(borders); }
-}
-
-.epiphany-downloads-button-needs-attention {
-  animation: needs_attention_keyframes 2s ease-in-out;
-}
-
-.epiphany-downloads-button-needs-attention-multiple {
-  animation: needs_attention_keyframes 3s ease-in-out;
-  animation-iteration-count: 3;
-}
+@import 'Adwaita-base';
diff --git a/src/resources/themes/_Adwaita-base.scss b/src/resources/themes/_Adwaita-base.scss
new file mode 100644
index 000000000..67f2fe18b
--- /dev/null
+++ b/src/resources/themes/_Adwaita-base.scss
@@ -0,0 +1,232 @@
+// Include base styling.
+@import 'shared-base';
+
+.incognito-mode {
+  headerbar {
+    @include headerbar_fill(darken($incognito_color, 10%), $incognito_edge_color, 
-gtk-icontheme($incognito_icon) 180px 0 / 64px 64px no-repeat);
+
+    border-color: _border_color($incognito_borders_color);
+
+    color: transparentize($fg_color, 0.8); // this is the color of the overlayed icon
+
+    &: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
+    }
+  }
+
+  actionbar {
+    background: $incognito_color;
+
+    > revealer > box {
+      border-color: $incognito_borders_color;
+    }
+  }
+
+  headerbar, actionbar {
+    > * {
+      color: $fg_color;
+
+      &:backdrop { color: $backdrop_fg_color }
+    }
+
+    button { // changing the headerbar background color requires changing widget borders accordingly
+      @include button(normal, $incognito_color);
+
+      &.flat, &.titlebutton { @include button(undecorated); }
+
+      &.titlebutton { @include _button_text_shadow($fg_color, $incognito_color); }
+
+      &:hover { @include button(hover, $incognito_color); }
+
+      &:active, &:checked { @include button(active, $incognito_color); }
+
+      &:disabled { @include button(insensitive, $incognito_color); }
+
+      &:backdrop {
+        @include button(backdrop, $incognito_color);
+        border-color: _border_color($incognito_color);
+
+        &:active {
+          @include button(backdrop-active, $incognito_color);
+          border-color: _border_color($incognito_color);
+        }
+
+        &:disabled {
+          @include button(backdrop-insensitive, $incognito_color);
+          border-color: _border_color($incognito_color);
+        }
+      }
+
+      &:checked {
+        background: image(darken($incognito_color, 17%));
+        border-color: darken($incognito_borders_color, 3%);
+        border-top-color: darken($incognito_borders_color, 8%);
+        &:backdrop {
+          @include button(backdrop-active, $incognito_color);
+        }
+      }
+
+      &.flat:backdrop, &.titlebutton:backdrop { @include button(undecorated); }
+    }
+
+    entry {
+      border-color: _border_color($incognito_borders_color);
+
+      &:focus {
+        border-color: entry_focus_border($selected_bg_color);
+        box-shadow: entry_focus_shadow($selected_bg_color);
+      }
+
+      &:backdrop { box-shadow: none; }
+    }
+  }
+}
+
+.automation-mode {
+  headerbar {
+    @include headerbar_fill($automation_color, $automation_edge_color);
+
+    border-color: _border_color($automation_color);
+
+    color: transparentize($fg_color, 0.8); // this is the color of the overlayed icon
+
+    > * {
+      color: $fg_color;
+
+      &:backdrop { color: $backdrop_fg_color }
+    }
+
+    &:backdrop {
+      box-shadow: inset 0 1px $automation_edge_color;
+      color: transparentize($backdrop_fg_color, 0.9); // color of the overlayed icon in backdrop
+    }
+
+    button { // changing the headerbar background color requires changing widget borders accordingly
+      @include button(normal, $automation_color);
+
+      &.flat, &.titlebutton { @include button(undecorated); }
+
+      &.titlebutton { @include _button_text_shadow($fg_color, $automation_color); }
+
+      &:hover { @include button(hover, $automation_color); }
+
+      &:active, &:checked { @include button(active, $automation_color); }
+
+      &:disabled { @include button(insensitive, $automation_color); }
+
+      &:backdrop {
+        @include button(backdrop, $automation_color);
+        border-color: _border_color($automation_color);
+
+        &:active {
+          @include button(backdrop-active, $automation_color);
+          border-color: _border_color($automation_color);
+        }
+
+        &:disabled {
+          @include button(backdrop-insensitive, $automation_color);
+          border-color: _border_color($automation_color);
+        }
+      }
+
+      &.flat:backdrop, &.titlebutton:backdrop { @include button(undecorated); }
+    }
+
+    entry {
+      border-color: _border_color($automation_color);
+
+      &:focus {
+        border-color: entry_focus_border($selected_bg_color);
+        box-shadow: entry_focus_shadow($selected_bg_color);
+      }
+
+      &:backdrop { box-shadow: none; }
+    }
+  }
+}
+
+$close_button_fg_color: lighten($fg_color, 10%);
+@mixin close_button($bg:$bg_color, $fg:$close_button_fg_color) {
+  background: none;
+  border: none;
+  box-shadow: none;
+
+  &:last-child {
+    image {
+      color: $fg;
+      border: 1px solid transparent;
+      border-radius: 5px;
+    }
+
+    &:hover image {
+      @include button(normal, $bg, $fg);
+      @include button(hover, $bg, $fg);
+    }
+
+    &:active image {
+      @include button(normal, $bg, $fg);
+      @include button(active, $bg, $fg);
+    }
+  }
+}
+
+.url_entry:not(:hover):not(:focus) {
+  background-color: transparentize($base_color, 0.25);
+}
+
+.bookmark-tag-widget {
+  background-color: darken($bg_color, 10%);
+
+  image,
+  label {
+    color: $fg_color;
+  }
+
+  button {
+    @include close_button();
+  }
+}
+
+.bookmark-tag-widget-selected {
+  background-color: themecolor(theme_selected_bg_color);
+
+  image,
+  label {
+    color: themecolor(theme_selected_fg_color);
+  }
+
+  button {
+    @include close_button($selected_bg_color, $selected_fg_color);
+  }
+}
+
+.page-row-close-button {
+  @include close_button();
+
+  row:selected & {
+    @include close_button($selected_bg_color, $selected_fg_color);
+  }
+
+  row.narrow & image {
+    padding: 6px;
+  }
+}
+
+@keyframes needs_attention_keyframes {
+    0% {background-image: linear-gradient(to bottom, #fafafa, #ededed 40%,  #e0e0e0); border-color: 
themecolor(borders); }
+    /* can't do animation-direction, so holding the color on two keyframes */
+    30% {background-image: linear-gradient(to bottom, themecolor(theme_base_color), 
themecolor(theme_base_color), themecolor(theme_base_color)); border-color: themecolor(theme_fg_color); }
+    90% {background-image: linear-gradient(to bottom, themecolor(theme_base_color), 
themecolor(theme_base_color), themecolor(theme_base_color)); border-color: themecolor(theme_fg_color); }
+    100% {background-image: linear-gradient(to bottom, #fafafa, #ededed 40%,  #e0e0e0); border-color: 
themecolor(borders); }
+}
+
+.epiphany-downloads-button-needs-attention {
+  animation: needs_attention_keyframes 2s ease-in-out;
+}
+
+.epiphany-downloads-button-needs-attention-multiple {
+  animation: needs_attention_keyframes 3s ease-in-out;
+  animation-iteration-count: 3;
+}
diff --git a/src/resources/themes/_definitions.scss b/src/resources/themes/_definitions.scss
index 2e10e3e35..d28ba75c0 100644
--- a/src/resources/themes/_definitions.scss
+++ b/src/resources/themes/_definitions.scss
@@ -1,10 +1,8 @@
-// incognito mode
-
-$variant: 'light';
-
 @import 'colors';
 @import 'drawing';
 
+// incognito mode
+
 $incognito_base_color: #d7e3f0;
 $incognito_color: lighten($incognito_base_color, 5%);
 $incognito_icon: 'user-not-tracked-symbolic';
diff --git a/src/resources/themes/_shared-base.scss b/src/resources/themes/_shared-base.scss
new file mode 100644
index 000000000..84f339b9c
--- /dev/null
+++ b/src/resources/themes/_shared-base.scss
@@ -0,0 +1,143 @@
+@import 'definitions';
+
+// floating status bar
+.floating-bar {
+  background-color: themecolor(theme_base_color);
+  border-width: 1px;
+  border-style: solid solid none;
+  border-color: themecolor(borders);
+  border-radius: 3px 3px 0 0;
+
+  &.left {
+    border-left-style: none;
+    border-top-left-radius: 0;
+  }
+
+  &.right {
+    border-right-style: none;
+    border-top-right-radius: 0;
+  }
+
+  &:backdrop {
+    background-color: themecolor(theme_unfocused_base_color);
+    border-color: themecolor(unfocused_borders);
+  }
+}
+
+// incognito mode
+.incognito-mode {
+  headerbar {
+    background-image: -gtk-icontheme($incognito_icon);
+    background-repeat: no-repeat;
+    background-position: 157px 0;
+    background-size: 64px 64px;
+    color: rgba(0, 0, 0, 0.35);
+  }
+}
+
+// automation mode
+.automation-mode {
+  headerbar {
+    background-color: $automation_color;
+    color: rgba(0, 0, 0, 0.35);
+  }
+}
+
+// entry icons colors
+.entry_icon {
+  color: #{"mix(" + themecolor(theme_fg_color) + ", " + themecolor(theme_base_color) + ", 0.2)"};
+
+  &:hover {
+    color: themecolor(theme_fg_color);
+  }
+
+  &:active {
+    color: themecolor(theme_selected_bg_color);
+  }
+
+  &:backdrop {
+    color: #{"mix(" + themecolor(theme_unfocused_fg_color) + ", " + themecolor(theme_unfocused_base_color) + 
", 0.2)"};
+  }
+
+  // Reader mode
+  &.selected {
+    color: themecolor(theme_selected_bg_color);
+  }
+
+  // Bookmarks
+  &.starred {
+    color: orange;
+  }
+}
+
+.bookmarks-row {
+  button {
+    opacity: 0.25;
+  }
+
+  &:hover {
+    button {
+      opacity: 1;
+    }
+  }
+}
+
+.bookmark-tag-widget {
+  padding-left: 8px;
+  background-color: #{"darker(" + themecolor(theme_bg_color) + ")"};
+
+  label {
+    padding-left: 8px;
+    padding-right: 8px;
+  }
+
+  image,
+  label {
+    // FIXME: This should be theme_text_color, but HighContrast doesn't export it
+    color: themecolor(theme_fg_color);
+  }
+
+  button:hover image {
+    color: themecolor(theme_fg_color);
+  }
+}
+
+.bookmark-tag-widget-selected {
+  background-color: themecolor(theme_selected_bg_color);
+
+  image,
+  label {
+    color: themecolor(theme_selected_fg_color);
+  }
+}
+
+// "Press $KEY to exit fullscreen" overlay text
+#fullscreen-popup {
+  padding: 12px;
+  border-radius: 18px;
+  background: rgba(0, 0, 0, 0.65);
+  color: white;
+}
+
+.url_progress {
+  border: none;
+  background-color: transparent;
+  background-image: none;
+  padding-top: 0px;
+  padding-bottom: 0px;
+  margin-top: 0px;
+  margin-bottom: 6px;
+
+  progress {
+    background-color: themecolor(theme_selected_bg_color);
+    background-image: none;
+    border: none;
+    min-height: 2px;
+  }
+
+  trough {
+    border: none;
+    background-color: transparent;
+    background-image: none;
+  }
+}
diff --git a/src/resources/themes/shared.scss b/src/resources/themes/shared.scss
index 84f339b9c..e886e19dd 100644
--- a/src/resources/themes/shared.scss
+++ b/src/resources/themes/shared.scss
@@ -1,143 +1,3 @@
-@import 'definitions';
+$variant: 'light';
 
-// floating status bar
-.floating-bar {
-  background-color: themecolor(theme_base_color);
-  border-width: 1px;
-  border-style: solid solid none;
-  border-color: themecolor(borders);
-  border-radius: 3px 3px 0 0;
-
-  &.left {
-    border-left-style: none;
-    border-top-left-radius: 0;
-  }
-
-  &.right {
-    border-right-style: none;
-    border-top-right-radius: 0;
-  }
-
-  &:backdrop {
-    background-color: themecolor(theme_unfocused_base_color);
-    border-color: themecolor(unfocused_borders);
-  }
-}
-
-// incognito mode
-.incognito-mode {
-  headerbar {
-    background-image: -gtk-icontheme($incognito_icon);
-    background-repeat: no-repeat;
-    background-position: 157px 0;
-    background-size: 64px 64px;
-    color: rgba(0, 0, 0, 0.35);
-  }
-}
-
-// automation mode
-.automation-mode {
-  headerbar {
-    background-color: $automation_color;
-    color: rgba(0, 0, 0, 0.35);
-  }
-}
-
-// entry icons colors
-.entry_icon {
-  color: #{"mix(" + themecolor(theme_fg_color) + ", " + themecolor(theme_base_color) + ", 0.2)"};
-
-  &:hover {
-    color: themecolor(theme_fg_color);
-  }
-
-  &:active {
-    color: themecolor(theme_selected_bg_color);
-  }
-
-  &:backdrop {
-    color: #{"mix(" + themecolor(theme_unfocused_fg_color) + ", " + themecolor(theme_unfocused_base_color) + 
", 0.2)"};
-  }
-
-  // Reader mode
-  &.selected {
-    color: themecolor(theme_selected_bg_color);
-  }
-
-  // Bookmarks
-  &.starred {
-    color: orange;
-  }
-}
-
-.bookmarks-row {
-  button {
-    opacity: 0.25;
-  }
-
-  &:hover {
-    button {
-      opacity: 1;
-    }
-  }
-}
-
-.bookmark-tag-widget {
-  padding-left: 8px;
-  background-color: #{"darker(" + themecolor(theme_bg_color) + ")"};
-
-  label {
-    padding-left: 8px;
-    padding-right: 8px;
-  }
-
-  image,
-  label {
-    // FIXME: This should be theme_text_color, but HighContrast doesn't export it
-    color: themecolor(theme_fg_color);
-  }
-
-  button:hover image {
-    color: themecolor(theme_fg_color);
-  }
-}
-
-.bookmark-tag-widget-selected {
-  background-color: themecolor(theme_selected_bg_color);
-
-  image,
-  label {
-    color: themecolor(theme_selected_fg_color);
-  }
-}
-
-// "Press $KEY to exit fullscreen" overlay text
-#fullscreen-popup {
-  padding: 12px;
-  border-radius: 18px;
-  background: rgba(0, 0, 0, 0.65);
-  color: white;
-}
-
-.url_progress {
-  border: none;
-  background-color: transparent;
-  background-image: none;
-  padding-top: 0px;
-  padding-bottom: 0px;
-  margin-top: 0px;
-  margin-bottom: 6px;
-
-  progress {
-    background-color: themecolor(theme_selected_bg_color);
-    background-image: none;
-    border: none;
-    min-height: 2px;
-  }
-
-  trough {
-    border: none;
-    background-color: transparent;
-    background-image: none;
-  }
-}
+@import 'shared-base';