backups: Split CSS styling into a separate file

Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Veiko Aasa <veiko17@disroot.org>

plinth/modules/backups/static/backups.css

@@ -0,0 +1,25 @@
+/*
+# SPDX-License-Identifier: AGPL-3.0-or-later
+*/
+
+.mount-error,
+.mount-success,
+.encrypted {
+    padding: 0 0.3125rem;
+}
+
+.mount-error {
+    color: orange;
+}
+
+.mount-success {
+    color: black;
+}
+
+.encrypted {
+    color: green;
+}
+
+.inline-block {
+    display: inline-block;
+}

plinth/modules/backups/templates/backups.html

@@ -4,25 +4,11 @@
 {% endcomment %}
 
 {% load i18n %}
+{% load static %}
 
 {% block page_head %}
-  <style type="text/css">
+  <link type="text/css" rel="stylesheet"
-    .mount-error, .mount-success, .encrypted {
+        href="{% static 'backups/backups.css' %}"/>
-      padding: 0 0.3125rem;
-    }
-    .mount-error {
-      color: orange;
-    }
-    .mount-success {
-      color: black;
-    }
-    .encrypted {
-      color: green;
-    }
-    .inline-block {
-      display: inline-block;
-    }
-  </style>
 {% endblock %}
 
 {% block configuration %}