add lesson life cycle stage indicator

[rnaseq-cwl-training.git] / assets / css / lesson.scss

diff --git a/assets/css/lesson.scss b/assets/css/lesson.scss
index d5662e065bfaf5580423c89ad5955d469d2d42ed..f83365e6ac11c43eb67345a127da181243ac0ef6 100644 (file)
--- a/assets/css/lesson.scss
+++ b/assets/css/lesson.scss
@@ -193,6 +193,37 @@ span.fold-unfold {
 }
 
 
+//----------------------------------------
+// Life cycle box
+//----------------------------------------
+
+div.life-cycle {
+    position: -webkit-sticky; /* Safari */
+    position: sticky;
+    top: 0;
+    z-index: 100;
+    font-size: 1.2em;
+    text-align: center;
+    margin-bottom: -1px;
+    border-radius: 0;
+}
+
+.pre-alpha {
+    color: #a94442;
+    background: #f2dede;
+}
+
+.alpha {
+    color: #8a6d3b;
+    background: #fcf8e3;
+}
+
+.beta {
+    color: #31708f;
+    background: #d9edf7;
+}
+
+
 //----------------------------------------
 // keyboard key style, from StackExchange.
 //----------------------------------------