Updated styling

out/css/style.css

@@ -36,8 +36,89 @@ footer{
 }
 
 
+.dragDrop {
+    position: fixed;
+    top: 0;
+    left: 0;
+    height: 100vh;
+	width: 100%;
 
+	background-color: var(--color-loader);
+	color: var(--color-loader-text);
 
+	--transition: all 0.25s ease-in-out 0s;
+	transition: var(--transition);
+	visibility: hidden;
+    opacity: 0;
+
+    z-index: 1000;
+
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	flex-direction: column;
+}
+.dragDrop.hover, .dragDrop.loading {
+	visibility: visible;
+	opacity: 1;
+}
+.dragDrop.loading {
+	background-color: var(--color-loader-hover);
+}
+/*.dragDrop.loading p:first-child::before {
+	content: "⋮";
+	
+	display: inline-flex;
+	width: 1em;
+	height: 1em;
+
+    justify-content: center;
+    align-items: center;
+    align-content: center;
+    transform: rotate(0);
+}*/
+
+.pc .examples-list {
+	border: 1px solid var(--color-controls-button-border);
+	margin: 0;
+	border-radius: 0 4px 4px 4px;
+}
+
+.pc .examples-list table td:first-child {
+	padding: 12px 8px 12px 15px;
+}
+
+.pc .example-scroller-label {
+	display: inline-block;
+	margin: 0;
+	border: 1px solid var(--color-controls-button-border);
+	border-bottom-style: none;
+	color: var(--color-controls-button-text);
+	border-radius: 4px 4px 0 0;
+	padding: 2px 15px;
+}
+
+button, .button {
+    /* background-color: whitesmoke; */
+    color: var(--color-controls-button-text);
+    border-color: var(--color-controls-button-border);
+}
+button:hover, .button:hover{
+    color: var(--color-controls-button-text-hover);
+}
+
+.button-group {
+	margin-bottom: 2em;
+}
+.button-group > * {
+	border-radius: 0;
+}
+.button-group :first-child {
+	border-radius: 4px 0 0 4px;
+}
+.button-group :last-child {
+	border-radius: 0 4px 4px 0;
+}
 
 /* HELPERS  */
 .text-center {