Limiting custom lesson styles to a specific div

Author: mikicz

naucse/models.py

@@ -1,6 +1,7 @@
 from collections import OrderedDict
 import datetime
 
+import cssutils
 import dateutil.tz
 import jinja2
 
@@ -71,7 +72,28 @@ def latex(self):
 
     @reify
     def css(self):
-        return self.info.get('css')
+        """ Returns lesson-specific extra CSS.
+
+        If the lesson defines extra css, the scope of the styles is limited to ``.lesson-content``,
+        a div which contains the actual lesson content.
+
+        This doesn't protect against malicious input.
+        """
+        css = self.info.get("css")
+
+        if css is None:
+            return None
+
+        parser = cssutils.CSSParser(raiseExceptions=True)
+        parsed = parser.parseString(css)
+
+        for rule in parsed.cssRules:
+            for selector in rule.selectorList:
+                # the space is important - there's a difference between for example
+                # ``.lesson-content:hover`` and ``.lesson-content :hover``
+                selector.selectorText = ".lesson-content " + selector.selectorText
+
+        return parsed.cssText.decode("utf-8")
 
     @reify
     def edit_path(self):

naucse/static/css/nausce.css

@@ -91,6 +91,11 @@ a:hover {
     text-decoration: none;
 }
 
+.lesson-content {
+    /* So elements inside with `position: absolute` are positioned absolutely just inside this div. */
+    position: relative;
+}
+
 
 .lesson-header {
     line-height: 1.5rem;

naucse/templates/lesson.html

@@ -29,9 +29,11 @@
             </header>
         {% endif %}
 
-        {% block lesson_content %}
-            {{ content }}
-        {% endblock %}
+        <div class="lesson-content">
+            {% block lesson_content %}
+                {{ content }}
+            {% endblock %}
+        </div>
 
         {% if (prv is defined and prv != None) or (nxt is defined and nxt != None) %}
         <hr class="lesson-end">

requirements.txt

@@ -13,3 +13,4 @@ pygments
 python-dateutil
 traitlets
 werkzeug
+cssutils