SAAS-999 - Change Advanced Search Options to dropdown

airtime_mvc/public/css/_showbuilder.css

@@ -43,15 +43,19 @@ div.ColVis_collectionBackground {
 
 ::-webkit-scrollbar-track {
     -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
-    border-radius: 10px;
+    /*border-radius: 10px;*/
 }
 
 ::-webkit-scrollbar-thumb {
     background-color: #ff5d1a;
-    border-radius: 10px;
+    /*border-radius: 10px;*/
     -webkit-box-shadow: inset 0 0 4px rgba(0,0,0,0.75);
 }
 
+::-webkit-scrollbar-corner {
+    -webkit-box-shadow: inset 0 0 0 rgba(0,0,0,0.75);
+}
+
 /* Show Builder*/
 
 .content-pane {
@@ -91,15 +95,6 @@ div.ColVis_collectionBackground {
     flex: 1;
 }
 
-@media screen and (max-height: 650px) {
-    #master-panel {
-        display: none;
-    }
-    .wrapper {
-        top: 40px !important;
-    }
-}
-
 @media screen and (max-width: 1475px) {
     .wrapper {
         -webkit-flex-flow: column !important;
@@ -168,10 +163,13 @@ div.ColVis_collectionBackground {
 }
 
 #library_content .dataTables_filter input[type="text"], #library_content .dataTables_filter select {
-    margin-top: 6px;
-    width: 20%;
-    float: right;
     height: 26px;
+    margin: 0;
+
+    border: 0;
+    float: left;
+    position: absolute;
+    width: 100%;
 }
 
 #library_content label {
@@ -194,7 +192,7 @@ div.ColVis_collectionBackground {
     font-size: 14px;
 }
 
-#library_content legend, #library_content span, #library_content label {
+#library_content legend, #library_content span {
     font-weight: normal;
     color: #efefef;
 }
@@ -206,9 +204,13 @@ div.ColVis_collectionBackground {
     bottom: 0;
 }
 
+#library_display_processing {
+    z-index: 1;
+}
+
 #library_display_wrapper, #show_builder_table_wrapper {
     position: absolute;
-    top: 4px;
+    top: 34px;
     bottom: 4px;
     right: 4px;
     left: 4px;
@@ -216,12 +218,18 @@ div.ColVis_collectionBackground {
 
 .dataTables_scrolling {
     position: absolute;
-    bottom: 38px; /* 38 px is the size of the header/footer */
-    top: 38px;
+    bottom: 39px; /* 38 px is the size of the header/footer + 1px because there's no internal border */
+    top: 39px;
     left: 1px; /* Border */
     right: 0;
 }
 
+#library_display {
+    border: none;
+}
+
+/* Library Search */
+
 #filter_options {
     text-align: center;
     padding: 15px 0 15px 15px;
@@ -230,12 +238,60 @@ div.ColVis_collectionBackground {
 }
 
 #advanced_search {
-    margin-top: 15px;
+    position: absolute;
+    left: -500px;
+    padding: 5px;
+    margin-top: -2px;
+}
+
+#advanced_search label, #advanced_search span {
+    font-weight: normal;
+    font-size: 14px;
+    line-height: 24px;
+    color: #242424;
+}
+
+#advanced_search .controls {
+    text-align: right;
+}
+
+#advanced_search .control-group {
+    padding: 5px;
+    margin-bottom: 0;
+}
+
+#advanced_search .sp-checked-icon {
+    position: absolute;
+    margin-top: 4px;
+}
+
+#advanced-options {
+    float: right;
+    z-index: 1;
+}
+
+#advanced-options > button {
+    background: transparent none;
+    color: transparent;
+    border: none;
+    padding: 4px 8px 4px 4px;
+    box-shadow: none;
+}
+
+#advanced-options > button:focus {
+    outline-width: 0;
+}
+
+#advanced-options > button > span {
+    border-top: 4px solid #242424;
 }
 
 .panel-header {
-    position: relative;
+    position: absolute;
     top: 4px;
+    right: 4px;
+    left: 4px;
+    z-index: 1; /* Display above the content wrapper */
 }
 
 /* Timeline */
@@ -281,7 +337,7 @@ div.ColVis_collectionBackground {
     font-family: Arial, Helvetica, sans-serif;
     font-size: 12px;
     padding: 0;
-    margin: 0 4px 0;
+    margin: 0;
 }
 
 .nav-tabs a {
@@ -313,6 +369,7 @@ div.ColVis_collectionBackground {
 /* Media editors */
 
 #side_playlist {
+    margin-top: 34px;
     width: 100%; /* Override because we're using flexbox */
 
     overflow-x: hidden;