X-Git-Url: https://git.mdrn.pl/edumed.git/blobdiff_plain/e76fdcf2a2488b1787c74fe8dccfa38d7ac04c84..c5f4d6f7fc2c876a56e7fcac2a9965e64f05c191:/catalogue/static/catalogue/css/carousel.css

diff --git a/catalogue/static/catalogue/css/carousel.css b/catalogue/static/catalogue/css/carousel.css
index 7b47a0d..49fe461 100644
--- a/catalogue/static/catalogue/css/carousel.css
+++ b/catalogue/static/catalogue/css/carousel.css
@@ -16,17 +16,36 @@
       position: absolute;
       top: 0;
       left: 0;
-      background: url(/static/test.jpg);
-      /* set real background image */ }
+      height: 100%;
+      background-size: 100% 100%;
+      border-top-left-radius: 0.938em 6.38%;
+      border-bottom-left-radius: 0.938em 6.38%; }
       #catalogue-carousel #catalogue-carousel-links li a {
         display: block;
+        overflow: hidden;
         width: 28.75em;
-        height: 14.688em;
-        background-image: url(/static/catalogue/img/carousel-left.png);
-        background-position: 100% 0;
-        background-repeat: no-repeat;
-        background-size: auto 14.688em;
-        /* left part of mask as background */ }
+        height: 100%;
+        background: url(/static/catalogue/img/carousel-left.png) 100% 0 no-repeat;
+        background-size: 4.375em 100%; }
+        #catalogue-carousel #catalogue-carousel-links li a .catalogue-carousel-note {
+          height: 100%;
+          margin-left: 50%;
+          background-color: black;
+          color: white;
+          opacity: 0.6;
+          background-image: url(/static/catalogue/img/carousel-left.png);
+          background-position: 100% 0;
+          background-repeat: no-repeat;
+          background-size: 4.375em 100%; }
+          #catalogue-carousel #catalogue-carousel-links li a .catalogue-carousel-note p {
+            padding: 6em 2em 0 1.6em;
+            margin: 0; }
+            #catalogue-carousel #catalogue-carousel-links li a .catalogue-carousel-note p em {
+              display: block;
+              font-style: normal;
+              font-size: 1.5em; }
+            #catalogue-carousel #catalogue-carousel-links li a .catalogue-carousel-note p strong {
+              font-size: 2em; }
   #catalogue-carousel #catalogue-carousel-switcher {
     margin: 0;
     padding: 3.125em 0 0 3.625em;
@@ -37,30 +56,37 @@
     top: 0;
     list-style: none;
     border-radius: 0 0.938em 0.938em 0;
-    background-color: #16a487;
+    background-color: #ed7831;
     background-image: url(/static/catalogue/img/carousel-right.png);
     background-position: 0 0;
     background-repeat: no-repeat;
     background-size: auto 14.688em;
     /* right part of mask as background */ }
     #catalogue-carousel #catalogue-carousel-switcher li {
-      margin-bottom: .9em;
-      /* TODO: active sprites */ }
+      margin-bottom: .9em; }
       #catalogue-carousel #catalogue-carousel-switcher li a {
         text-transform: uppercase;
         color: #363a3e;
         font-size: .9em;
         font-weight: bold; }
-      #catalogue-carousel #catalogue-carousel-switcher li a.active {
-        color: white; }
       #catalogue-carousel #catalogue-carousel-switcher li a:before {
         vertical-align: top;
         margin-right: 1.5em; }
       #catalogue-carousel #catalogue-carousel-switcher li .knowledge:before {
-        content: url(/static/img/icons/knowledge.png); }
+        content: url(/static/img/icons/knowledge_dark.png); }
       #catalogue-carousel #catalogue-carousel-switcher li .activity:before {
-        content: url(/static/img/icons/activity.png); }
+        content: url(/static/img/icons/activity_dark.png); }
       #catalogue-carousel #catalogue-carousel-switcher li .lesson-plan:before {
-        content: url(/static/img/icons/lesson-plan.png); }
+        content: url(/static/img/icons/lesson-plan_dark.png); }
       #catalogue-carousel #catalogue-carousel-switcher li .reference:before {
-        content: url(/static/img/icons/reference.png); }
+        content: url(/static/img/icons/reference_dark.png); }
+    #catalogue-carousel #catalogue-carousel-switcher li.activeSlide a {
+      color: white; }
+    #catalogue-carousel #catalogue-carousel-switcher li.activeSlide .knowledge:before {
+      content: url(/static/img/icons/knowledge_white.png); }
+    #catalogue-carousel #catalogue-carousel-switcher li.activeSlide .activity:before {
+      content: url(/static/img/icons/activity_white.png); }
+    #catalogue-carousel #catalogue-carousel-switcher li.activeSlide .lesson-plan:before {
+      content: url(/static/img/icons/lesson-plan_white.png); }
+    #catalogue-carousel #catalogue-carousel-switcher li.activeSlide .reference:before {
+      content: url(/static/img/icons/reference_white.png); }