Add transparency and color inversion to images

- Support for dark-theming images
- Some images have just inverted colors or grayscale
- Other might need to be completely replaced with a version made for the dark theme
- Add slightly rounded borders
- Add transparency to images that supports it
eee2b2

_static/css/ubports.css

@@ -34,6 +34,10 @@ html {
     margin: 0 auto;
 }
 
+.content img {
+    border-radius: .2rem;
+}
+
 table {
     width: 100%;
 }
@@ -238,10 +242,19 @@ a.current, .content h1, .toc-tree li.scroll-current > .reference {
         -webkit-filter: invert(30%); /* safari 6.0 - 9.0 */
         filter: invert(30%);
     }
+
     .footer-links img:hover {
         -webkit-filter: invert(70%); /* safari 6.0 - 9.0 */
         filter: invert(70%);
     }
+
+    .invert-grayscale img, img.invert-grayscale {
+        filter: invert() grayscale();
+    }
+
+    .invert-color img, img.invert-color {
+        filter: invert();
+    }
 }
 
 /* Disable border radius on smaller displays */

appdev/guides/contenthub.rst

@@ -19,6 +19,8 @@ As we can see in the `Content Hub documentation <https://api-docs.ubports.com/sd
 - ``ContentHandler.Destination`` (The selected app will be the destination for the exported file)
 - ``ContentHandler.Share`` (The selected app will be the destination for the exported file, which will then be shared externally)
 
+.. rst-class:: invert-grayscale
+
 .. figure:: /_static/images/appdev/guides/contenthubimages/12.svg
         :align: center
 

appdev/guides/pushnotifications.rst

@@ -3,6 +3,8 @@ Push notifications
 
 Let's assume that you have an app created with Clickable and published on the OpenStore. But now you want to be able to send Push Notifications to your users. First of all, you need to understand how this is working:
 
+.. rst-class:: invert-grayscale
+
 .. image:: ../../_static/images/appdev/guides/pushnotifications/Diagram.png
 
 1. Every app which uses push notifications has got a unique token. This token identifies the user, the device and the app itself. The token is generated by the UBports Push Service.

humanguide/design-concepts/in-app-icons-design.rst

@@ -21,48 +21,62 @@ Font
 
 To provide a consistent look to the UI and to make the Suru icons distinctive, the design is based on the same patterns as the Ubuntu font. The font patterns can applied to the symbol to define its contours.
 
+.. rst-class:: invert-grayscale
+
 .. figure:: /_static/images/humanguide/14.png
 
 Strokes
 ~~~~~~~
 
 Stroke ends are squared but the upper end of vertical strokes is slightly oblique with a +10º angle.
 
+.. rst-class:: invert-color
+
 .. figure:: /_static/images/humanguide/15.png
 
 Rotation
 ~~~~~~~~
 
 When they are not horizontal or vertical, objects are oriented along a +45º axis.
 
+.. rst-class:: invert-color
+
 .. figure:: /_static/images/humanguide/16.png
 
 Corners
 ~~~~~~~
 
 Curved corners are preferred if possible. The following picture shows a zoom on the default outer and inner curvatures, with nodes and Bezier handle. The default curvature can be scaled down when the shape is smaller.
 
+.. rst-class:: invert-color
+
 .. figure:: /_static/images/humanguide/17.png
 
 Arrows
 ~~~~~~
 
 A chevron symbol is used for navigation arrows. The arrowhead is an isosceles triangle where the two equal sides are slightly curved (following the pattern of the Y character).
 
+.. rst-class:: invert-color
+
 .. figure:: /_static/images/humanguide/18.png
 
 Opacity
 ~~~~~~~
 
 50% opacity is used to reflect the status of an indicator. In case of a double space (enabled and disabled, for example), the opacity of the whole icon changes. When the status allows a range of values, the opacity of a single portion of icon can be altered.
 
+.. rst-class:: invert-grayscale
+
 .. figure:: /_static/images/humanguide/19.png
 
 Grid
 ~~~~
 
 Interface icons are designed for 96x96 pixels, with at least 4 pixels of margin on every side.
 
+.. rst-class:: invert-grayscale
+
 .. figure:: /_static/images/humanguide/20.png
 
 .. |stock_message.svg| image:: /_static/images/humanguide/stock_message.png

humanguide/design-concepts/typography.rst

@@ -6,6 +6,8 @@ Fonts
 
 Our default font is `Ubuntu <https://design.ubuntu.com/font/>`__ `[2] <https://en.wikipedia.org/wiki/Ubuntu_(typeface)>`__ installed in the system.
 
+.. rst-class:: invert-grayscale
+
 .. figure:: /_static/images/humanguide/01.png
 
 For the font sizes to be consistent across devices, instead of setting the font size as a number of pixels or points, it is imperative to define the font size in terms of size names:

systemdev/mms-infrastructure.rst

@@ -37,15 +37,19 @@ Outgoing MMS
 
 Incoming MMS diagram
 ********************
+.. rst-class:: invert-grayscale
+
 .. image:: files/incoming-mms.png
    :alt: incoming-MMS.png
 
 Outgoing MMS diagram
 ********************
+.. rst-class:: invert-grayscale
+
 .. image:: files/outgoing-mms.png
    :alt: outgoing-MMS.png
 
 References
 ----------
 
-* initial source: https://wiki.ubuntu.com/Touch/Specs/MMSInfrastructure
+* initial source: https://wiki.ubuntu.com/Touch/Specs/MMSInfrastructure