New UI design

* Moved style definitions to its own file (themes/default)
* Updated the desktop.kv to the new UI design
* Removed planes
* Adjusted port config

4 files changed, 206 insertions, 446 deletions

diff --git a/tagit/assets/icons/scalable/planes/browsing.svg b/tagit/assets/icons/scalable/planes/browsing.svg
deleted file mode 100644
index f502c36..0000000
--- a/tagit/assets/icons/scalable/planes/browsing.svg
+++ /dev/null
@@ -1,157 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   width="100mm"
-   height="100mm"
-   id="svg2"
-   version="1.1"
-   inkscape:version="0.92.3 (2405546, 2018-03-11)"
-   sodipodi:docname="browsing.svg"
-   inkscape:export-filename="../../kivy/misc/browsing.png"
-   inkscape:export-xdpi="7.6199999"
-   inkscape:export-ydpi="7.6199999">
-  <defs
-     id="defs4">
-    <marker
-       inkscape:stockid="Arrow2Mend"
-       orient="auto"
-       refY="0"
-       refX="0"
-       id="Arrow2Mend"
-       style="overflow:visible"
-       inkscape:isstock="true">
-      <path
-         id="path847"
-         style="fill:#c8c8c8;fill-opacity:1;fill-rule:evenodd;stroke:#c8c8c8;stroke-width:0.625;stroke-linejoin:round;stroke-opacity:1"
-         d="M 8.7185878,4.0337352 -2.2072895,0.01601326 8.7185884,-4.0017078 c -1.7454984,2.3720609 -1.7354408,5.6174519 -6e-7,8.035443 z"
-         transform="scale(-0.6)"
-         inkscape:connector-curvature="0" />
-    </marker>
-  </defs>
-  <sodipodi:namedview
-     id="base"
-     pagecolor="#ffffff"
-     bordercolor="#666666"
-     borderopacity="1.0"
-     inkscape:pageopacity="0.0"
-     inkscape:pageshadow="2"
-     inkscape:zoom="1.4"
-     inkscape:cx="79.928267"
-     inkscape:cy="249.27915"
-     inkscape:document-units="mm"
-     inkscape:current-layer="layer1"
-     showgrid="false"
-     showguides="true"
-     inkscape:guide-bbox="true"
-     inkscape:snap-global="true"
-     inkscape:snap-bbox="true"
-     fit-margin-top="0"
-     fit-margin-left="0"
-     fit-margin-right="0"
-     fit-margin-bottom="0"
-     inkscape:window-width="1920"
-     inkscape:window-height="1031"
-     inkscape:window-x="0"
-     inkscape:window-y="25"
-     inkscape:window-maximized="1"
-     inkscape:pagecheckerboard="true"
-     units="mm"
-     inkscape:bbox-paths="true"
-     inkscape:bbox-nodes="true"
-     inkscape:snap-bbox-edge-midpoints="true"
-     inkscape:snap-bbox-midpoints="true"
-     inkscape:object-paths="true"
-     inkscape:snap-intersection-paths="true"
-     inkscape:snap-smooth-nodes="true"
-     inkscape:snap-midpoints="true"
-     inkscape:snap-object-midpoints="true"
-     inkscape:snap-center="true"
-     inkscape:snap-text-baseline="true"
-     inkscape:snap-page="true"
-     inkscape:lockguides="false">
-    <sodipodi:guide
-       orientation="0,1"
-       position="13.637059,643.40404"
-       id="guide3788"
-       inkscape:locked="false" />
-    <sodipodi:guide
-       position="188.97638,188.97638"
-       orientation="0,1"
-       id="guide1099"
-       inkscape:locked="false"
-       inkscape:label=""
-       inkscape:color="rgb(0,0,255)" />
-    <sodipodi:guide
-       position="188.97638,188.97638"
-       orientation="1,0"
-       id="guide1101"
-       inkscape:locked="false"
-       inkscape:label=""
-       inkscape:color="rgb(0,0,255)" />
-    <sodipodi:guide
-       position="233.588,370"
-       orientation="1,0"
-       id="guide1107"
-       inkscape:locked="false"
-       inkscape:label=""
-       inkscape:color="rgb(0,0,255)" />
-    <sodipodi:guide
-       position="144.36496,311.42857"
-       orientation="1,0"
-       id="guide1109"
-       inkscape:locked="false"
-       inkscape:label=""
-       inkscape:color="rgb(0,0,255)" />
-    <sodipodi:guide
-       position="-77.142857,144.36496"
-       orientation="0,1"
-       id="guide1111"
-       inkscape:locked="false"
-       inkscape:label=""
-       inkscape:color="rgb(0,0,255)" />
-    <sodipodi:guide
-       position="5.000315,233.58779"
-       orientation="0,1"
-       id="guide1113"
-       inkscape:locked="false"
-       inkscape:label=""
-       inkscape:color="rgb(0,0,255)" />
-  </sodipodi:namedview>
-  <metadata
-     id="metadata7">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
-      </cc:Work>
-    </rdf:RDF>
-  </metadata>
-  <g
-     inkscape:label="Layer 1"
-     inkscape:groupmode="layer"
-     id="layer1"
-     transform="translate(-167.28122,-322.85977)">
-    <circle
-       style="fill:none;fill-opacity:1;stroke:#c8c8c8;stroke-width:21.39488792;stroke-linecap:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
-       id="path4522"
-       cx="356.2576"
-       cy="511.83612"
-       r="178.27893" />
-    <path
-       style="fill:#c8c8c8;stroke:#c8c8c8;stroke-width:25.67386436;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-end:url(#Arrow2Mend);fill-opacity:1"
-       d="M 294.33569,574.10683 413.77539,454.66718"
-       id="path818"
-       inkscape:connector-curvature="0" />
-  </g>
-</svg>
diff --git a/tagit/assets/icons/scalable/planes/codash.svg b/tagit/assets/icons/scalable/planes/codash.svg
deleted file mode 100644
index b25c2b0..0000000
--- a/tagit/assets/icons/scalable/planes/codash.svg
+++ /dev/null
@@ -1,147 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   width="100mm"
-   height="100mm"
-   id="svg2"
-   version="1.1"
-   inkscape:version="0.92.3 (2405546, 2018-03-11)"
-   sodipodi:docname="codash.svg"
-   inkscape:export-filename="../../kivy/misc/dashboard.png"
-   inkscape:export-xdpi="7.6199999"
-   inkscape:export-ydpi="7.6199999">
-  <defs
-     id="defs4" />
-  <sodipodi:namedview
-     id="base"
-     pagecolor="#ffffff"
-     bordercolor="#666666"
-     borderopacity="1.0"
-     inkscape:pageopacity="0.0"
-     inkscape:pageshadow="2"
-     inkscape:zoom="0.98994949"
-     inkscape:cx="63.505754"
-     inkscape:cy="116.58788"
-     inkscape:document-units="mm"
-     inkscape:current-layer="layer1"
-     showgrid="false"
-     showguides="true"
-     inkscape:guide-bbox="true"
-     inkscape:snap-global="true"
-     inkscape:snap-bbox="true"
-     fit-margin-top="0"
-     fit-margin-left="0"
-     fit-margin-right="0"
-     fit-margin-bottom="0"
-     inkscape:window-width="1920"
-     inkscape:window-height="1056"
-     inkscape:window-x="0"
-     inkscape:window-y="1200"
-     inkscape:window-maximized="1"
-     inkscape:pagecheckerboard="true"
-     units="mm"
-     inkscape:bbox-paths="true"
-     inkscape:bbox-nodes="true"
-     inkscape:snap-bbox-edge-midpoints="true"
-     inkscape:snap-bbox-midpoints="true"
-     inkscape:object-paths="true"
-     inkscape:snap-intersection-paths="true"
-     inkscape:snap-smooth-nodes="true"
-     inkscape:snap-midpoints="true"
-     inkscape:snap-object-midpoints="true"
-     inkscape:snap-center="true"
-     inkscape:snap-text-baseline="true"
-     inkscape:snap-page="true"
-     inkscape:lockguides="false">
-    <sodipodi:guide
-       orientation="0,1"
-       position="13.637059,643.40404"
-       id="guide3788"
-       inkscape:locked="false" />
-    <sodipodi:guide
-       position="188.97638,188.97638"
-       orientation="0,1"
-       id="guide1099"
-       inkscape:locked="false"
-       inkscape:label=""
-       inkscape:color="rgb(0,0,255)" />
-    <sodipodi:guide
-       position="188.97638,188.97638"
-       orientation="1,0"
-       id="guide1101"
-       inkscape:locked="false"
-       inkscape:label=""
-       inkscape:color="rgb(0,0,255)" />
-    <sodipodi:guide
-       position="233.588,370"
-       orientation="1,0"
-       id="guide1107"
-       inkscape:locked="false"
-       inkscape:label=""
-       inkscape:color="rgb(0,0,255)" />
-    <sodipodi:guide
-       position="144.36496,311.42857"
-       orientation="1,0"
-       id="guide1109"
-       inkscape:locked="false"
-       inkscape:label=""
-       inkscape:color="rgb(0,0,255)" />
-    <sodipodi:guide
-       position="-77.142857,144.36496"
-       orientation="0,1"
-       id="guide1111"
-       inkscape:locked="false"
-       inkscape:label=""
-       inkscape:color="rgb(0,0,255)" />
-    <sodipodi:guide
-       position="5.000315,233.58779"
-       orientation="0,1"
-       id="guide1113"
-       inkscape:locked="false"
-       inkscape:label=""
-       inkscape:color="rgb(0,0,255)" />
-  </sodipodi:namedview>
-  <metadata
-     id="metadata7">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title />
-      </cc:Work>
-    </rdf:RDF>
-  </metadata>
-  <g
-     inkscape:label="Layer 1"
-     inkscape:groupmode="layer"
-     id="layer1"
-     transform="translate(-167.28122,-322.85977)">
-    <circle
-       style="fill:none;fill-opacity:1;stroke:#c8c8c8;stroke-width:21.39488792;stroke-linecap:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
-       id="path4522"
-       cx="356.2576"
-       cy="511.83615"
-       r="178.27893" />
-    <text
-       xml:space="preserve"
-       style="font-style:normal;font-weight:normal;font-size:103.40699768px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#c8c8c8;fill-opacity:1;stroke:none;stroke-width:2.5851748"
-       x="209.33694"
-       y="611.10687"
-       id="text823"><tspan
-         sodipodi:role="line"
-         id="tspan821"
-         x="209.33694"
-         y="611.10687"
-         style="font-style:italic;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:496.35357666px;font-family:'Berenis ADF Pro';-inkscape-font-specification:'Berenis ADF Pro Bold Italic';fill:#c8c8c8;fill-opacity:1;stroke-width:2.5851748">c</tspan></text>
-  </g>
-</svg>
diff --git a/tagit/assets/icons/scalable/planes/dashboard.svg b/tagit/assets/icons/scalable/planes/dashboard.svg
deleted file mode 100644
index 6f7e4a3..0000000
--- a/tagit/assets/icons/scalable/planes/dashboard.svg
+++ /dev/null
@@ -1,142 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   width="100mm"
-   height="100mm"
-   id="svg2"
-   version="1.1"
-   inkscape:version="0.92.3 (2405546, 2018-03-11)"
-   sodipodi:docname="dashboard.svg"
-   inkscape:export-filename="../../kivy/misc/dashboard.png"
-   inkscape:export-xdpi="7.6199999"
-   inkscape:export-ydpi="7.6199999">
-  <defs
-     id="defs4" />
-  <sodipodi:namedview
-     id="base"
-     pagecolor="#ffffff"
-     bordercolor="#666666"
-     borderopacity="1.0"
-     inkscape:pageopacity="0.0"
-     inkscape:pageshadow="2"
-     inkscape:zoom="0.98994949"
-     inkscape:cx="218.56417"
-     inkscape:cy="120.62849"
-     inkscape:document-units="mm"
-     inkscape:current-layer="layer1"
-     showgrid="false"
-     showguides="true"
-     inkscape:guide-bbox="true"
-     inkscape:snap-global="true"
-     inkscape:snap-bbox="true"
-     fit-margin-top="0"
-     fit-margin-left="0"
-     fit-margin-right="0"
-     fit-margin-bottom="0"
-     inkscape:window-width="1920"
-     inkscape:window-height="1031"
-     inkscape:window-x="0"
-     inkscape:window-y="25"
-     inkscape:window-maximized="1"
-     inkscape:pagecheckerboard="true"
-     units="mm"
-     inkscape:bbox-paths="true"
-     inkscape:bbox-nodes="true"
-     inkscape:snap-bbox-edge-midpoints="true"
-     inkscape:snap-bbox-midpoints="true"
-     inkscape:object-paths="true"
-     inkscape:snap-intersection-paths="true"
-     inkscape:snap-smooth-nodes="true"
-     inkscape:snap-midpoints="true"
-     inkscape:snap-object-midpoints="true"
-     inkscape:snap-center="true"
-     inkscape:snap-text-baseline="true"
-     inkscape:snap-page="true"
-     inkscape:lockguides="false">
-    <sodipodi:guide
-       orientation="0,1"
-       position="13.637059,643.40404"
-       id="guide3788"
-       inkscape:locked="false" />
-    <sodipodi:guide
-       position="188.97638,188.97638"
-       orientation="0,1"
-       id="guide1099"
-       inkscape:locked="false"
-       inkscape:label=""
-       inkscape:color="rgb(0,0,255)" />
-    <sodipodi:guide
-       position="188.97638,188.97638"
-       orientation="1,0"
-       id="guide1101"
-       inkscape:locked="false"
-       inkscape:label=""
-       inkscape:color="rgb(0,0,255)" />
-    <sodipodi:guide
-       position="233.588,370"
-       orientation="1,0"
-       id="guide1107"
-       inkscape:locked="false"
-       inkscape:label=""
-       inkscape:color="rgb(0,0,255)" />
-    <sodipodi:guide
-       position="144.36496,311.42857"
-       orientation="1,0"
-       id="guide1109"
-       inkscape:locked="false"
-       inkscape:label=""
-       inkscape:color="rgb(0,0,255)" />
-    <sodipodi:guide
-       position="-77.142857,144.36496"
-       orientation="0,1"
-       id="guide1111"
-       inkscape:locked="false"
-       inkscape:label=""
-       inkscape:color="rgb(0,0,255)" />
-    <sodipodi:guide
-       position="5.000315,233.58779"
-       orientation="0,1"
-       id="guide1113"
-       inkscape:locked="false"
-       inkscape:label=""
-       inkscape:color="rgb(0,0,255)" />
-  </sodipodi:namedview>
-  <metadata
-     id="metadata7">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
-      </cc:Work>
-    </rdf:RDF>
-  </metadata>
-  <g
-     inkscape:label="Layer 1"
-     inkscape:groupmode="layer"
-     id="layer1"
-     transform="translate(-167.28122,-322.85977)">
-    <path
-       d="m 356.64939,617.51072 c 0,0 -8.76851,5.82936 -14.76239,5.80268 -0.53358,0.24456 -0.84928,0.38685 -0.84928,0.38685 l 0.0133,-0.38685 c -1.25835,-0.0578 -2.52562,-0.23566 -3.80175,-0.55581 l -1.89422,-0.46688 c -10.46706,-2.59676 -16.0074,-12.9749 -13.40175,-23.43752 l 14.57119,-58.74275 6.57637,-26.53229 c 6.11838,-24.63362 -19.40009,5.23798 -24.63363,-6.10949 -3.45493,-7.50125 19.84919,-23.24187 36.87485,-35.10959 0,0 8.75961,-5.82047 14.75794,-5.79824 0.53803,-0.249 0.85373,-0.38684 0.85373,-0.38684 l -0.0222,0.38684 c 1.26725,0.0578 2.5345,0.23567 3.81065,0.55137 l 1.89421,0.47133 c 10.46707,2.59675 16.84335,13.18388 14.2466,23.6465 l -14.56675,58.7472 -6.58972,26.53228 c -6.10949,24.63363 18.98657,-5.35359 24.21566,6.00723 3.45493,7.49235 -20.27161,23.12626 -37.29282,34.99398 z m 36.93264,-183.6139 c -3.63724,14.65123 -18.46187,23.58425 -33.10866,19.94701 -14.65566,-3.63724 -23.5887,-18.45743 -19.95146,-33.11311 3.63725,-14.65567 18.46189,-23.58425 33.10866,-19.94701 14.65569,3.63279 23.58426,18.45744 19.95146,33.11311 z"
-       id="path2"
-       inkscape:connector-curvature="0"
-       style="fill:#c8c8c8;fill-opacity:1;stroke-width:4.44650316"
-       sodipodi:nodetypes="ccccccccccccccccccccccccscc" />
-    <circle
-       style="fill:none;fill-opacity:1;stroke:#c8c8c8;stroke-width:21.39488792;stroke-linecap:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
-       id="path4522"
-       cx="356.2576"
-       cy="511.83615"
-       r="178.27893" />
-  </g>
-</svg>
diff --git a/tagit/assets/themes/default/style.kv b/tagit/assets/themes/default/style.kv
new file mode 100644
index 0000000..a3f9cd1
--- /dev/null
+++ b/tagit/assets/themes/default/style.kv
@@ -0,0 +1,206 @@
+
+# DEBUG: Draw borders around all widgets
+#<Widget>:
+#    canvas.after:
+#        Line:
+#            rectangle: self.x+1,self.y+1,self.width-1,self.height-1
+#            dash_offset: 5
+#            dash_length: 3
+
+# color definitions
+#:set colors_background [0x1c/256, 0x1b/256, 0x22/256] # dark grey
+#:set colors_text [0xc5/256, 0xc9/256, 0xc7/256] # silver
+#:set colors_highlight [0xb5/256, 0x94/256, 0x10/256] # darkgold
+
+# generic styles
+
+<Label>:
+    # default text color
+    color: colors_text
+
+
+# main window elements
+
+<MainWindow>:
+    # background color
+    canvas.before:
+        Color:
+            rgb: colors_background
+        Rectangle:
+            pos: self.pos
+            size: self.size
+
+<HGuide>: # Horizontal guide
+    canvas:
+        Color:
+            rgb: colors_text
+        Line:
+            points: self.x, self.center_y, self.x + self.width, self.center_y
+            width: 2
+
+
+# browser elements
+
+<BrowserItem>:
+    canvas.after:
+        # selection highlighting
+        Color:
+            rgba: colors_highlight + [1 if self.is_selected else 0]
+
+        # checkmarks
+        #Ellipse:
+        #    pos: self.x + 5, self.y + self.height - 30
+        #    size: 25, 25
+        #Color:
+        #    rgba: [1,1,1] + [1 if self.is_selected else 0]
+        #Line:
+        #    width: 3
+        #    points:
+        #        self.x + 12, self.y + self.height - 20, \
+        #        self.x + 17, self.y + self.height - 23, \
+        #        self.x + 22, self.y + self.height - 12
+           
+        # border highlight
+        Line:
+            width: 2
+            points:
+                self.x, self.y + self.height - 60, \
+                self.x, self.y + self.height, \
+                self.x + 60, self.y + self.height
+        Triangle:
+            points:
+                self.x, self.y + self.height - 40, \
+                self.x, self.y + self.height, \
+                self.x + 40, self.y + self.height
+        Line:
+            width: 2
+            points:
+                self.x + self.width - 40, \
+                self.y, self.x + self.width, \
+                self.y, self.x + self.width, self.y + 40
+
+        # cursor highlighting
+        Color:
+            rgba: colors_text + [1 if self.is_cursor else 0]
+        Line:
+            width: 2
+            rectangle: self.x, self.y, self.width, self.height
+
+
+# filter elements
+
+<Addressbar>:
+    background_color: (0.2,0.2,0.2,1) if self.focus else (0.15,0.15,0.15,1)
+    foreground_color: (1,1,1,1)
+
+<Shingle>:
+    canvas.before:
+        Color:
+            rgba: colors_highlight + [0.25 if root.active else 0]
+        RoundedRectangle:
+            pos: root.pos
+            size: root.size
+
+    canvas.after:
+        Color:
+            rgb: colors_text
+        Line:
+            rounded_rectangle: self.x+1, self.y+1, self.width-1, self.height-1, self.height/2
+
+<Avatar>:
+    canvas.before:
+        Color:
+            rgb: colors_background
+        Ellipse:
+            pos: self.pos
+            size: self.size
+
+    canvas.after:
+        Color:
+            rgb: colors_text
+        Line:
+            width: 2
+            circle: self.center_x, self.center_y, self.height/2.0
+
+            
+
+<ShingleText>:
+    canvas.after:
+        Color:
+            rgba: colors_background + [0.5 if not self.active else 0]
+        Rectangle:
+            pos: self.pos
+            size: self.size
+
+<ShingleRemove>:
+    background_color: colors_background
+    background_normal: ''
+    opacity: 0.5
+
+
+# other elements
+
+<Action>:
+    # decoration
+    canvas.before:
+        Color:
+            rgba: 17 / 255, 32 / 255, 148 / 255, self.selected_alpha
+        Rectangle:
+            pos: self.x, self.y + 1
+            size: self.size
+   
+    canvas.after:
+        Color: 
+            rgba: 17 / 255, 32 / 255, 148 / 255, self.selected_alpha
+        Line:
+            width: 2
+            rectangle: self.x, self.y, self.width, self.height
+
+
+<DialogueContentBase>:
+    canvas:
+        # mask main window
+        Color:
+            rgba: 0,0,0, 0.7 * self.parent._anim_alpha
+        Rectangle:
+            size: self.parent._window.size if self.parent._window else (0, 0)
+        
+        # solid background color
+        Color:
+            rgb: 1, 1, 1
+        BorderImage:
+            source: self.parent.background
+            border: self.parent.border
+            pos: self.pos
+            size: self.size
+
+<DialogueTitle>:
+    font_size: '16sp'
+    bold: True
+    halign: 'center'
+    valing: 'middle'
+    canvas.before:
+        # Background
+        Color:
+            rgb: 0.2, 0.2, 0.2
+        Rectangle:
+            size: self.size
+            pos: self.pos
+
+        # top border
+        #Color:
+        #    rgb: 0.5, 0.5, 0.5
+        #Line:
+        #    points: self.x, self.y + self.height, self.x + self.width, self.y + self.height
+        #    width: 2
+
+        # bottom border
+        #Color:
+        #    rgb: 0.5, 0.5, 0.5
+        #Line:
+        #    points: self.x, self.y, self.x + self.width, self.y
+        #    width: 2
+
+
+
+## EOF ##