[pitivi] ui: Tweak borders for clips

[Alexandru Băluț <alexbalut src gnome org>]

commit cbef12ae3d3785ff1cf457a64e577192f8194908
Author: Diego Garcia Gangl <dnicolas gmail com>
Date:   Fri May 17 20:50:05 2019 -0300

    ui: Tweak borders for clips

 pitivi/timeline/elements.py   |  3 ++-
 pitivi/timeline/previewers.py |  9 ++++---
 pitivi/utils/ui.py            | 57 ++++++++++++++++++++++++++-----------------
 3 files changed, 43 insertions(+), 26 deletions(-)
---
diff --git a/pitivi/timeline/elements.py b/pitivi/timeline/elements.py
index 41a379ec..c2abdbd3 100644
--- a/pitivi/timeline/elements.py
+++ b/pitivi/timeline/elements.py
@@ -1012,7 +1012,7 @@ class AudioUriSource(TimelineElement):
 
     def _get_previewer(self):
         previewer = AudioPreviewer(self._ges_elem, self.timeline.app.settings.previewers_max_cpu)
-        previewer.get_style_context().add_class("AudioUriSource")
+        previewer.get_style_context().add_class("AudioPreviewer")
 
         return previewer
 
@@ -1386,6 +1386,7 @@ class UriClip(SourceClip):
 
     def __init__(self, layer, ges_clip):
         SourceClip.__init__(self, layer, ges_clip)
+        self.get_style_context().add_class("UriClip")
         self.props.has_tooltip = True
 
     def do_query_tooltip(self, x, y, keyboard_mode, tooltip):
diff --git a/pitivi/timeline/previewers.py b/pitivi/timeline/previewers.py
index 6af7a3f9..78a33e96 100644
--- a/pitivi/timeline/previewers.py
+++ b/pitivi/timeline/previewers.py
@@ -42,6 +42,7 @@ from pitivi.utils.proxy import get_proxy_target
 from pitivi.utils.proxy import ProxyManager
 from pitivi.utils.system import CPUUsageTracker
 from pitivi.utils.timeline import Zoomable
+from pitivi.utils.ui import CLIP_BORDER_WIDTH
 from pitivi.utils.ui import EXPANDED_SIZE
 
 # Our C module optimizing waveforms rendering
@@ -54,8 +55,9 @@ except ImportError:
 
 SAMPLE_DURATION = Gst.SECOND / 100
 
+# Horizontal space between thumbs.
 THUMB_MARGIN_PX = 3
-THUMB_HEIGHT = EXPANDED_SIZE - 2 * THUMB_MARGIN_PX
+THUMB_HEIGHT = EXPANDED_SIZE - 2 * CLIP_BORDER_WIDTH
 THUMB_PERIOD = int(Gst.SECOND / 2)
 assert Gst.SECOND % THUMB_PERIOD == 0
 # For the waveforms, ensures we always have a little extra surface when
@@ -1246,7 +1248,8 @@ class AudioPreviewer(Gtk.Layout, Previewer, Zoomable, Loggable):
         end_ns = min(max(0, self.pixel_to_ns(rect.x + rect.width) + inpoint), max_duration)
 
         zoom = self.get_current_zoom_level()
-        height = self.get_allocation().height
+        height = self.get_allocation().height - 2 * CLIP_BORDER_WIDTH
+
         if not self.surface or \
                 height != self.surface.get_height() or \
                 zoom != self._surface_zoom_level or \
@@ -1275,7 +1278,7 @@ class AudioPreviewer(Gtk.Layout, Previewer, Zoomable, Loggable):
         # 2. - inpoint, because we're drawing a clip, not the entire asset.
         context.set_operator(cairo.OPERATOR_OVER)
         offset = self.ns_to_pixel(self._surface_start_ns - inpoint)
-        context.set_source_surface(self.surface, offset, 0)
+        context.set_source_surface(self.surface, offset, CLIP_BORDER_WIDTH)
         context.paint()
 
     def _emit_done_on_idle(self):
diff --git a/pitivi/utils/ui.py b/pitivi/utils/ui.py
index be4315ae..0afb07cc 100644
--- a/pitivi/utils/ui.py
+++ b/pitivi/utils/ui.py
@@ -58,6 +58,8 @@ LAYER_HEIGHT = 130
 # The space between two layers.
 SEPARATOR_HEIGHT = 1
 
+CLIP_BORDER_WIDTH = 1
+
 SMALL_THUMB_WIDTH = 64
 # 128 is the normal size for thumbnails, but for *icons* it looks insane.
 LARGE_THUMB_WIDTH = 96
@@ -169,52 +171,62 @@ EDITOR_PERSPECTIVE_CSS = """
         background: transparent;
     }
 
+
     .AudioBackground,
     .VideoBackground {
-        transition: background-color 200ms ease-out;
+        transition: background-color 200ms ease-out, border-color 200ms ease-out;
     }
 
-    .AudioBackground {
+    .UriClip .AudioBackground {
         background-color: rgb(60, 97, 43);
+        border: %(clip_border_width)spx solid shade(rgb(60, 97, 43), 1.2);
     }
 
-    .VideoBackground {
+    .UriClip .VideoBackground {
         background-color: rgb(25, 25, 25);
+        border: %(clip_border_width)spx solid shade(rgb(25, 25, 25), 2.5);
     }
 
-    .VideoUriSource image {
-        transition: opacity 200ms linear;
-        opacity: 1;
-     }
+    .TitleClip .VideoBackground {
+        background-color: rgb(94, 78, 102);
+        border: %(clip_border_width)spx solid shade(rgb(25, 25, 25), 2.5);
+    }
 
-    .VideoUriSource:selected image,
-    .AudioUriSource:selected .AudioUriSource {
-        opacity: 0.15;
+    .AudioBackground:selected,
+    .VideoBackground:selected {
+        border-color: rgb(132, 131, 79)
     }
 
-    .AudioBackground:selected {
+    .UriClip .AudioBackground:selected {
         background-color: shade(rgb(60, 97, 43), 0.4);
     }
 
-    .VideoBackground:selected {
+    .UriClip .VideoBackground:selected {
         background-color: shade(rgb(25, 25, 25), 0.4);
     }
 
-    .TitleClip .VideoBackground {
-        background-color: rgb(94, 78, 102);
-    }
-
     .TitleClip .VideoBackground:selected  {
         background-color: shade(rgb(94, 78, 102), 0.4);
     }
 
+
+    .VideoUriSource image {
+        transition: opacity 200ms linear;
+        opacity: 1;
+     }
+
+    .VideoUriSource:selected image,
+    .AudioUriSource:selected .AudioPreviewer {
+        opacity: 0.15;
+    }
+
     .KeyframeCurve {
         background-color: rgba(0, 0, 0, 0);
     }
 
     .Trimbar {
         background-image: url('%(trimbar_normal)s');
-        opacity:0.5;
+        opacity: 0.5;
     }
 
     .Trimbar.left {
@@ -279,10 +291,12 @@ EDITOR_PERSPECTIVE_CSS = """
         background-image: url('%(marker_hovered)s');
     }
 
-""" % ({'trimbar_normal': os.path.join(get_pixmap_dir(), "trimbar-normal.png"),
-        'trimbar_focused': os.path.join(get_pixmap_dir(), "trimbar-focused.png"),
-        'marker_unselected': os.path.join(get_pixmap_dir(), "marker-unselect.png"),
-        'marker_hovered': os.path.join(get_pixmap_dir(), "marker-hover.png")})
+""" % ({
+    'clip_border_width': CLIP_BORDER_WIDTH,
+    'marker_hovered': os.path.join(get_pixmap_dir(), "marker-hover.png"),
+    'marker_unselected': os.path.join(get_pixmap_dir(), "marker-unselect.png"),
+    'trimbar_focused': os.path.join(get_pixmap_dir(), "trimbar-focused.png"),
+    'trimbar_normal': os.path.join(get_pixmap_dir(), "trimbar-normal.png")})
 
 
 PREFERENCES_CSS = """
@@ -310,7 +324,6 @@ PREFERENCES_CSS = """
     .prefs_list .last {
         border-bottom: 1px solid rgb(32, 32, 32);
     }
-
 """