Implement Apros theme.

drag_and_drop_v2/public/css/drag_and_drop.css

@@ -39,7 +39,8 @@
     background: #ebf0f2;
 }
 
-/** Draggable Items **/
+/*** DRAGGABLE ITEMS ***/
+
 .xblock--drag-and-drop .item-bank {
     display: -ms-flexbox;
     display: flex;
@@ -178,7 +179,8 @@
     opacity: 0.5;
 }
 
-/*** Drop Target ***/
+/*** DROP TARGET ***/
+
 .xblock--drag-and-drop .target {
     display: table;
     /* 'display: table' makes this have the smallest size that fits the .target-img
@@ -261,6 +263,7 @@
 }
 
 /*** FEEDBACK ***/
+
 .xblock--drag-and-drop .feedback {
     border-top: solid 1px #bdbdbd;
 }
@@ -299,6 +302,8 @@
     font-size: 18pt;
 }
 
+/*** KEYBOARD HELP ***/
+
 .xblock--drag-and-drop .keyboard-help {
     margin-top: 3px;
     margin-bottom: 6px;
@@ -344,7 +349,7 @@
 
 .xblock--drag-and-drop .modal-content {
     border-radius: 5px;
-    background: white;
+    background: #ffffff;
     margin-bottom: 5px;
     padding: 5px;
 }

drag_and_drop_v2/public/themes/apros.css

+.themed-xblock.xblock--drag-and-drop {
+    background: #fff;
+}
+
+/* Shared styles used in header and footer */
+
+.themed-xblock.xblock--drag-and-drop .title1 {
+    color: #555555;
+    text-transform: uppercase;
+    font-weight: bold;
+    font-style: normal;
+}
+
+/* drag-container holds the .item-bank and the .target */
+
+.themed-xblock.xblock--drag-and-drop .drag-container {
+    background: #ebf0f2;
+}
+
+.themed-xblock.xblock--drag-and-drop .item-bank {
+    border-radius: 0px;
+}
+
+/*** DRAGGABLE ITEMS ***/
+
+.themed-xblock.xblock--drag-and-drop .drag-container .option {
+    border-radius: 0px;
+    font-size: 14px;
+    background-color: #2e83cd;
+    color: #fff;
+    opacity: 1;
+}
+
+.themed-xblock.xblock--drag-and-drop .drag-container .option .numerical-input.correct .input {
+    background: #ceffce;
+    color: #087108;
+}
+
+.themed-xblock.xblock--drag-and-drop .drag-container .option .numerical-input.incorrect .input {
+    background: #ffcece;
+    color: #ad0d0d;
+}
+
+.themed-xblock.xblock--drag-and-drop .drag-container .option.fade {
+    opacity: 0.5;
+}
+
+/*** DROP TARGET ***/
+
+.themed-xblock.xblock--drag-and-drop .target {
+    background: #fff;
+}
+
+.themed-xblock.xblock--drag-and-drop .zone p {
+    font-family: Arial;
+    font-size: 16px;
+    font-weight: bold;
+    text-align: center;
+    text-transform: uppercase;
+}
+
+/*** FEEDBACK ***/
+
+.themed-xblock.xblock--drag-and-drop .feedback {
+    border-top: solid 1px #bdbdbd;
+}
+
+.themed-xblock.xblock--drag-and-drop .popup {
+    background: none repeat scroll 0 0 #66a5b5;
+}
+
+.themed-xblock.xblock--drag-and-drop .popup .popup-content {
+    color: #ffffff;
+    font-size: 14px;
+}
+
+.themed-xblock.xblock--drag-and-drop .popup .close {
+    cursor: pointer;
+    color: #ffffff;
+    font-family: "fontawesome";
+    font-size: 18pt;
+}
+
+.themed-xblock.xblock--drag-and-drop .keyboard-help-button,
+.themed-xblock.xblock--drag-and-drop .reset-button {
+    cursor: pointer;
+    color: #3384ca;
+}