From 8c7305bf1baf10973ad104fec491a3e1da207b1d Mon Sep 17 00:00:00 2001
From: yflory <yann.flory@xwiki.com>
Date: Wed, 25 Jan 2017 16:21:46 +0100
Subject: [PATCH] Use less to write the drive stylesheet

---
 www/drive/file.css    | 505 +++++++++++++++++++-----------------------
 www/drive/file.less   | 363 ++++++++++++++++++++++++++++++
 www/drive/oldfile.css | 378 +++++++++++++++++++++++++++++++
 3 files changed, 964 insertions(+), 282 deletions(-)
 create mode 100644 www/drive/file.less
 create mode 100644 www/drive/oldfile.css

diff --git a/www/drive/file.css b/www/drive/file.css
index c6ee63658..3fc4967fe 100644
--- a/www/drive/file.css
+++ b/www/drive/file.css
@@ -1,378 +1,319 @@
 /* PAGE */
-
-html, body {
-    width: 100%;
-    height: 100%;
-    box-sizing: border-box;
-    padding: 0;
-    margin: 0;
-    position: relative;
-    font-size: 20px;
-    overflow: auto;
-}
-
+html,
 body {
-    display: flex;
-    flex-flow: column;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+  position: relative;
+  font-size: 20px;
+  overflow: auto;
+}
+body {
+  display: flex;
+  flex-flow: column;
 }
-
 .app-container {
-    flex: 1;
-    overflow: auto;
-    width: 100%;
-    display: flex;
-    flex-flow: row;
+  flex: 1;
+  overflow: auto;
+  width: 100%;
+  display: flex;
+  flex-flow: row;
 }
-
 .fa {
-    /*min-width: 17px;*/
-    margin-right: 3px;
-    font-family: FontAwesome;
+  /*min-width: 17px;*/
+  margin-right: 3px;
+  font-family: FontAwesome;
 }
-
 ul {
-    list-style: none;
-    padding-left: 10px;
+  list-style: none;
+  padding-left: 10px;
 }
-
 li {
-    padding: 0px 5px;
-    cursor: pointer;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-}
-
-.folder, .file {
-    margin-right: 5px;
-}
-
+  padding: 0px 5px;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+.folder,
+.file {
+  margin-right: 5px;
+}
 .contextMenu {
-    display: none;
-    position: absolute;
+  display: none;
+  position: absolute;
 }
-
 .droppable {
-    background-color: #FE9A2E;
-    color: #222;
+  background-color: #FE9A2E;
+  color: #222;
 }
-
 .selected {
-    border: 1px dotted #bbb;
-    background: #666;
-    color: #eee;
-    margin: -1px;
+  border: 1px dotted #bbb;
+  background: #666;
+  color: #eee;
+  margin: -1px;
 }
-
 /* TREE */
-
-
 #tree {
-    border-right: 1px solid #ccc;
-    box-sizing: border-box;
-    background: white;
-    overflow: auto;
-    resize: horizontal;
-    width: 350px;
-    white-space: nowrap;
-    max-width: 500px;
-    min-width: 200px;
-    padding: 10px 0px;
-}
-
-#tree li {
-    cursor: auto;
+  border-right: 1px solid #ccc;
+  box-sizing: border-box;
+  background: #eee;
+  overflow: auto;
+  resize: horizontal;
+  width: 250px;
+  white-space: nowrap;
+  max-width: 500px;
+  min-width: 200px;
+  padding: 10px 0px;
 }
-
-#tree span.element {
-    cursor: pointer;
+#tree li {
+  cursor: auto;
 }
-
 #tree li > span.element:hover {
-    text-decoration: underline;
+  text-decoration: underline;
+}
+#tree li.collapsed ul {
+  display: none;
+}
+#tree li input {
+  width: calc(70%);
+}
+#tree span.element {
+  cursor: pointer;
 }
-
 #tree .active {
-    text-decoration: underline;
+  text-decoration: underline;
 }
-
 #tree .category2 {
-    margin-top: 2em;
+  margin-top: 2em;
 }
-
 #tree .fa.expcol {
-    margin-left: -10px;
-    font-size: 14px;
-    position: absolute;
-    left: -20px;
-    top: 9px;
-    width: auto;
-    height: 11px;
-    padding: 0;
-    margin: 0;
-    background: white;
-    z-index: 10;
-    cursor: default;
+  margin-left: -10px;
+  font-size: 14px;
+  position: absolute;
+  left: -20px;
+  top: 9px;
+  width: auto;
+  height: 11px;
+  padding: 0;
+  margin: 0;
+  background: white;
+  z-index: 10;
+  cursor: default;
 }
 #tree .fa.expcol:before {
-    position:relative;
-    top: -1px;
-}
-
-#tree li.collapsed ul {
-    display: none;
-}
-
-#tree li input {
-    width: calc(100% - 30px);
+  position: relative;
+  top: -1px;
 }
-
-/* Tree lines */
-
 #tree ul {
-    margin: 0px 0px 0px 10px;
-    list-style: none;
+  margin: 0px 0px 0px 10px;
+  list-style: none;
 }
 #tree ul li {
-    position: relative;
+  position: relative;
 }
 #tree ul li:before {
-    position: absolute;
-    left: -15px;
-    top: -0.25em;
-    content: '';
-    display: block;
-    border-left: 1px solid #888;
-    height: 1em;
-    border-bottom: 1px solid #888;
-    width: 17.5px;
+  position: absolute;
+  left: -15px;
+  top: -0.25em;
+  content: '';
+  display: block;
+  border-left: 1px solid #888;
+  height: 1em;
+  border-bottom: 1px solid #888;
+  width: 17.5px;
 }
 #tree ul li:after {
-    position: absolute;
-    left: -15px;
-    bottom: -7px;
-    content: '';
-    display: block;
-    border-left: 1px solid #888;
-    height: 100%;
+  position: absolute;
+  left: -15px;
+  bottom: -7px;
+  content: '';
+  display: block;
+  border-left: 1px solid #888;
+  height: 100%;
 }
 #tree ul li.root {
-    margin: 0px 0px 0px -10px;
+  margin: 0px 0px 0px -10px;
 }
 #tree ul li.root:before {
-    display: none;
+  display: none;
 }
 #tree ul li.root:after {
-    display: none;
+  display: none;
 }
 #tree ul li:last-child:after {
-    display: none;
+  display: none;
 }
-
-
 /* CONTENT */
-
 #content {
-    box-sizing: border-box;
-    background: #eee;
-    overflow: auto;
-    flex: 1;
-    display: flex;
-    flex-flow: column;
-}
-
+  box-sizing: border-box;
+  background: #eee;
+  overflow: auto;
+  flex: 1;
+  display: flex;
+  flex-flow: column;
+}
 #content h1 {
-    padding-left: 10px;
-    margin-top: 10px;
+  padding-left: 10px;
+  margin-top: 10px;
 }
-
 #content .info-box {
-    margin: 0px auto;
-    padding: 5px;
-    background: #ddddff;
-    border: 1px solid #bbb;
-    border-radius: 5px;
-    margin-bottom: 10px;
+  margin: 0px auto;
+  padding: 5px;
+  background: #ddddff;
+  border: 1px solid #bbb;
+  border-radius: 5px;
+  margin-bottom: 10px;
 }
 #content .info-box span {
-    cursor: pointer;
-    margin-left: 10px;
-    float: right;
+  cursor: pointer;
+  margin-left: 10px;
+  float: right;
 }
-
-.parentFolder {
-    cursor: pointer;
-    margin-left: 10px;
+#content li:not(.header) * {
+  pointer-events: none;
 }
-
-.parentFolder:hover {
-    text-decoration: underline;
+#content li:not(.header):hover .name {
+  text-decoration: underline;
 }
-
-#folderContent {
-    padding-right: 10px;
-    flex: 1;
+#content div.grid li {
+  display: inline-block;
+  margin: 10px 10px;
+  width: 140px;
+  text-align: center;
+  vertical-align: top;
 }
-
-#content li:not(.header) * {
-    pointer-events: none;
-}
-
-#content li:hover:not(.header) .name {
-    text-decoration: underline;
-}
-
-#content .grid li {
-    display: inline-block;
-    margin: 10px 10px;
-    width: 140px;
-    text-align: center;
-    vertical-align: top;
-}
-
-#content .grid li .name {
-    width: 100%;
-}
-
-#content .grid li input {
-    width: 100%;
-}
-
-#content .grid li .fa {
-    display: block;
-    margin: auto;
-    font-size: 40px;
-    width: auto;
-    text-align: center;
-}
-
-#content .grid li .fa.listonly {
-    display: none;
+#content div.grid li .name {
+  width: 100%;
+}
+#content div.grid li input {
+  width: 100%;
+}
+#content div.grid li .fa {
+  display: block;
+  margin: auto;
+  font-size: 40px;
+  text-align: center;
+}
+#content div.grid li .fa.listonly {
+  display: none;
+}
+#content div.grid .listElement {
+  display: none;
 }
-
 #content .list li {
-    display: flex;
-    flex-flow: row;
-    align-items: center;
-    padding-right: 0px;
+  display: flex;
+  flex-flow: row;
+  align-items: center;
+  padding-right: 0px;
 }
 #content .list li .element {
-    display: inline-flex;
-    flex: 1;
+  display: inline-flex;
+  flex: 1;
 }
-
 #content .list li.header {
-    cursor: default;
-    color: #008;
-    margin-top: 10px;
+  cursor: default;
+  color: #008;
+  margin-top: 10px;
 }
 #content .list li.header .element span:not(.fa) {
-    border-right: 1px solid #CCC;
-    text-align: left;
+  border-right: 1px solid #CCC;
+  text-align: left;
 }
 #content .list li.header .element span.fa {
-    float: right;
+  float: right;
 }
 #content .list li.header span.name {
-    padding-left: 0;
+  padding-left: 0;
 }
-
 #content .list .element span {
-    padding: 0px 10px;
-    display: inline-block;
-    overflow: hidden;
-    white-space: nowrap;
-    box-sizing: border-box;
-    padding-right: 0px;
-    border-right: 10px solid rgba(0, 0, 0, 0);
+  padding: 0px 10px;
+  display: inline-block;
+  overflow: hidden;
+  white-space: nowrap;
+  box-sizing: border-box;
+  padding-right: 0px;
+  border-right: 10px solid rgba(0, 0, 0, 0);
 }
 #content .list .element span.name {
-    width: 478px;
-}
-.iframe #content .list .element span.name {
-    width: 278px;
-}
-#content .list .header span.name {
-    width: 500px;
-}
-.iframe #content .list .header span.name {
-    width: 300px;
+  width: 478px;
 }
-#content .list .element span.type, #content .list .element span.atime, #content .list .element span.ctime {
-    width: 175px;
+#content .list .element span.type,
+#content .list .element span.atime,
+#content .list .element span.ctime {
+  width: 175px;
 }
 #content .list .element span.title {
-    width: 250px;
+  width: 250px;
+  display: inline;
 }
-#content .list .element span.folders {
-    width: 150px;
+@media screen and (max-width: 1200px) {
+  #content .list .element span.title {
+    display: none;
+  }
 }
+#content .list .element span.folders,
 #content .list .element span.files {
-    width: 150px;
+  width: 150px;
 }
-#content div.grid .listElement {
-    display: none;
+#content .list .header span.name {
+  width: 500px;
 }
-@media screen and (max-width: 1200px) {
-    #content .list .element span.title {
-        display: none;
-    }
+.parentFolder {
+  cursor: pointer;
+  margin-left: 10px;
+}
+.parentFolder:hover {
+  text-decoration: underline;
 }
-@media screen and (min-width: 1201px) {
-    #content .list .element span.title {
-        display: inline;
-    }
+#folderContent {
+  padding-right: 10px;
+  flex: 1;
 }
-
 /* Toolbar */
-
 #driveToolbar {
-    background: #ccc;
-    height: 40px;
-}
-
-.newPadContainer {
-    display: inline-block;
-    height: 100%;
-}
-
-button.newElement {
-    border-radius: 0px;
-    height: 30px;
-    background: #888;
-    color: #eee;
-    font-size: 15px;
-    border: none;
-    font-weight: bold;
-}
-
-button.newElement:hover {
-    box-shadow: 0px 0px 2px #000;
-}
-
-
-/* The container <div> - needed to position the dropdown content */
+  background: #ddd;
+  height: 40px;
+  /* The container <div> - needed to position the dropdown content */
+}
+#driveToolbar .newPadContainer {
+  display: inline-block;
+  height: 100%;
+}
+#driveToolbar button.newElement {
+  border-radius: 2px;
+  height: 30px;
+  background: #888;
+  color: #eee;
+  font-size: 16px;
+  border: none;
+  font-weight: bold;
+}
+#driveToolbar button.newElement:hover {
+  box-shadow: 0px 0px 2px #000;
+}
 #driveToolbar .dropdown-bar {
-    margin: 4px 5px;
-    position: relative;
-    display: inline-block;
+  margin: 4px 5px;
+  position: relative;
+  display: inline-block;
 }
 #driveToolbar .dropdown-bar.right {
-    float: right;
+  float: right;
+  /* Right-side buttons */
 }
-
-/* Right-side buttons */
 #driveToolbar .dropdown-bar.right button {
-    display: inline-block;
+  display: inline-block;
 }
 #driveToolbar .dropdown-bar.right button.active {
-    display: none;
+  display: none;
 }
 #driveToolbar .dropdown-bar.right button .fa {
-    margin-right: 0px;
+  margin-right: 0px;
 }
-.dropdown-bar-content {
-    margin-top: -3px;
-    margin-right: 2px;
+#driveToolbar .dropdown-bar-content {
+  margin-top: -3px;
+  margin-right: 2px;
 }
diff --git a/www/drive/file.less b/www/drive/file.less
new file mode 100644
index 000000000..b1c2ca558
--- /dev/null
+++ b/www/drive/file.less
@@ -0,0 +1,363 @@
+/* PAGE */
+
+html, body {
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    padding: 0;
+    margin: 0;
+    position: relative;
+    font-size: 20px;
+    overflow: auto;
+}
+
+body {
+    display: flex;
+    flex-flow: column;
+}
+
+.app-container {
+    flex: 1;
+    overflow: auto;
+    width: 100%;
+    display: flex;
+    flex-flow: row;
+}
+
+.fa {
+    /*min-width: 17px;*/
+    margin-right: 3px;
+    font-family: FontAwesome;
+}
+
+ul {
+    list-style: none;
+    padding-left: 10px;
+}
+
+li {
+    padding: 0px 5px;
+    cursor: pointer;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+
+.folder, .file {
+    margin-right: 5px;
+}
+
+.contextMenu {
+    display: none;
+    position: absolute;
+}
+
+.droppable {
+    background-color: #FE9A2E;
+    color: #222;
+}
+
+.selected {
+    border: 1px dotted #bbb;
+    background: #666;
+    color: #eee;
+    margin: -1px;
+}
+
+/* TREE */
+
+
+#tree {
+    border-right: 1px solid #ccc;
+    box-sizing: border-box;
+    background: #eee;
+    overflow: auto;
+    resize: horizontal;
+    width: 250px;
+    white-space: nowrap;
+    max-width: 500px;
+    min-width: 200px;
+    padding: 10px 0px;
+    li {
+        cursor: auto;
+        &> span.element:hover {
+            text-decoration: underline;
+        }
+        &.collapsed ul {
+            display: none;
+        }
+        input {
+            width: calc(100% - 30px);
+        }
+    }
+    span.element {
+        cursor: pointer;
+    }
+    .active {
+        text-decoration: underline;
+    }
+    .category2 {
+        margin-top: 2em;
+    }
+    .fa.expcol {
+        margin-left: -10px;
+        font-size: 14px;
+        position: absolute;
+        left: -20px;
+        top: 9px;
+        width: auto;
+        height: 11px;
+        padding: 0;
+        margin: 0;
+        background: white;
+        z-index: 10;
+        cursor: default;
+        &:before {
+            position:relative;
+            top: -1px;
+        }
+    }
+
+    // Expand/collapse lines
+    ul {
+        margin: 0px 0px 0px 10px;
+        list-style: none;
+        li {
+            position: relative;
+            &:before {
+                position: absolute;
+                left: -15px;
+                top: -0.25em;
+                content: '';
+                display: block;
+                border-left: 1px solid #888;
+                height: 1em;
+                border-bottom: 1px solid #888;
+                width: 17.5px;
+            }
+            &:after {
+                position: absolute;
+                left: -15px;
+                bottom: -7px;
+                content: '';
+                display: block;
+                border-left: 1px solid #888;
+                height: 100%;
+            }
+            &.root {
+                margin: 0px 0px 0px -10px;
+                &:before {
+                    display: none;
+                }
+                &:after {
+                    display: none;
+                }
+            }
+            &:last-child:after {
+                display: none;
+            }
+        }
+    }
+
+}
+
+/* CONTENT */
+
+#content {
+    box-sizing: border-box;
+    background: #eee;
+    overflow: auto;
+    flex: 1;
+    display: flex;
+    flex-flow: column;
+    h1 {
+        padding-left: 10px;
+        margin-top: 10px;
+    }
+    .info-box {
+        margin: 0px auto;
+        padding: 5px;
+        background: #ddddff;
+        border: 1px solid #bbb;
+        border-radius: 5px;
+        margin-bottom: 10px;
+        span {
+            cursor: pointer;
+            margin-left: 10px;
+            float: right;
+        }
+    }
+    li {
+        &:not(.header) {
+            * {
+                pointer-events: none;
+            }
+            &:hover {
+                .name {
+                    text-decoration: underline;
+                }
+            }
+        }
+    }
+    div.grid {
+        li {
+            display: inline-block;
+            margin: 10px 10px;
+            width: 140px;
+            text-align: center;
+            vertical-align: top;
+
+            .name {
+                width: 100%;
+            }
+            input {
+                width: 100%;
+            }
+            .fa {
+                display: block;
+                margin: auto;
+                font-size: 40px;
+                text-align: center;
+                &.listonly {
+                    display: none;
+                }
+            }
+        }
+        .listElement {
+            display: none;
+        }
+    }
+
+    .list {
+        li {
+            display: flex;
+            flex-flow: row;
+            align-items: center;
+            padding-right: 0px;
+            .element {
+                display: inline-flex;
+                flex: 1;
+            }
+            &.header {
+                cursor: default;
+                color: #008;
+                margin-top: 10px;
+                .element {
+                    span {
+                        &:not(.fa) {
+                            border-right: 1px solid #CCC;
+                            text-align: left;
+                        }
+                        &.fa {
+                            float: right;
+                        }
+                    }
+                }
+                span {
+                    &.name {
+                        padding-left: 0;
+                    }
+                }
+            }
+        }
+        .element {
+            span {
+                padding: 0px 10px;
+                display: inline-block;
+                overflow: hidden;
+                white-space: nowrap;
+                box-sizing: border-box;
+                padding-right: 0px;
+                border-right: 10px solid rgba(0, 0, 0, 0);
+                &.name {
+                    width: 478px;
+                }
+                &.type, &.atime, &.ctime {
+                    width: 175px;
+                }
+                &.title {
+                    width: 250px;
+                    display: inline;
+                    @media screen and (max-width: 1200px) {
+                        display: none;
+                    }
+                }
+                &.folders, &.files {
+                    width: 150px;
+                }
+            }
+        }
+        .header {
+            span {
+                &.name {
+                    width: 500px;
+                }
+            }
+        }
+    }
+}
+
+.parentFolder {
+    cursor: pointer;
+    margin-left: 10px;
+    &:hover {
+        text-decoration: underline;
+    }
+}
+
+#folderContent {
+    padding-right: 10px;
+    flex: 1;
+}
+
+
+/* Toolbar */
+
+#driveToolbar {
+    background: #ddd;
+    height: 40px;
+    .newPadContainer {
+        display: inline-block;
+        height: 100%;
+    }
+
+    button.newElement {
+        border-radius: 2px;
+        height: 30px;
+        background: #888;
+        color: #eee;
+        font-size: 16px;
+        border: none;
+        font-weight: bold;
+        &:hover {
+            box-shadow: 0px 0px 2px #000;
+        }
+    }
+    /* The container <div> - needed to position the dropdown content */
+    .dropdown-bar {
+        margin: 4px 5px;
+        position: relative;
+        display: inline-block;
+        &.right {
+            float: right;
+            /* Right-side buttons */
+            button {
+                display: inline-block;
+                &.active {
+                    display: none;
+                }
+                .fa {
+                    margin-right: 0px;
+                }
+            }
+        }
+    }
+    .dropdown-bar-content {
+        margin-top: -3px;
+        margin-right: 2px;
+    }
+}
+
+
+
diff --git a/www/drive/oldfile.css b/www/drive/oldfile.css
new file mode 100644
index 000000000..8364886b8
--- /dev/null
+++ b/www/drive/oldfile.css
@@ -0,0 +1,378 @@
+/* PAGE */
+
+html, body {
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    padding: 0;
+    margin: 0;
+    position: relative;
+    font-size: 20px;
+    overflow: auto;
+}
+
+body {
+    display: flex;
+    flex-flow: column;
+}
+
+.app-container {
+    flex: 1;
+    overflow: auto;
+    width: 100%;
+    display: flex;
+    flex-flow: row;
+}
+
+.fa {
+    /*min-width: 17px;*/
+    margin-right: 3px;
+    font-family: FontAwesome;
+}
+
+ul {
+    list-style: none;
+    padding-left: 10px;
+}
+
+li {
+    padding: 0px 5px;
+    cursor: pointer;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+
+.folder, .file {
+    margin-right: 5px;
+}
+
+.contextMenu {
+    display: none;
+    position: absolute;
+}
+
+.droppable {
+    background-color: #FE9A2E;
+    color: #222;
+}
+
+.selected {
+    border: 1px dotted #bbb;
+    background: #666;
+    color: #eee;
+    margin: -1px;
+}
+
+/* TREE */
+
+
+#tree {
+    border-right: 1px solid #ccc;
+    box-sizing: border-box;
+    background: #eee;
+    overflow: auto;
+    resize: horizontal;
+    width: 350px;
+    white-space: nowrap;
+    max-width: 500px;
+    min-width: 200px;
+    padding: 10px 0px;
+}
+
+#tree li {
+    cursor: auto;
+}
+
+#tree span.element {
+    cursor: pointer;
+}
+
+#tree li > span.element:hover {
+    text-decoration: underline;
+}
+
+#tree .active {
+    text-decoration: underline;
+}
+
+#tree .category2 {
+    margin-top: 2em;
+}
+
+#tree .fa.expcol {
+    margin-left: -10px;
+    font-size: 14px;
+    position: absolute;
+    left: -20px;
+    top: 9px;
+    width: auto;
+    height: 11px;
+    padding: 0;
+    margin: 0;
+    background: white;
+    z-index: 10;
+    cursor: default;
+}
+#tree .fa.expcol:before {
+    position:relative;
+    top: -1px;
+}
+
+#tree li.collapsed ul {
+    display: none;
+}
+
+#tree li input {
+    width: calc(100% - 30px);
+}
+
+/* Tree lines */
+
+#tree ul {
+    margin: 0px 0px 0px 10px;
+    list-style: none;
+}
+#tree ul li {
+    position: relative;
+}
+#tree ul li:before {
+    position: absolute;
+    left: -15px;
+    top: -0.25em;
+    content: '';
+    display: block;
+    border-left: 1px solid #888;
+    height: 1em;
+    border-bottom: 1px solid #888;
+    width: 17.5px;
+}
+#tree ul li:after {
+    position: absolute;
+    left: -15px;
+    bottom: -7px;
+    content: '';
+    display: block;
+    border-left: 1px solid #888;
+    height: 100%;
+}
+#tree ul li.root {
+    margin: 0px 0px 0px -10px;
+}
+#tree ul li.root:before {
+    display: none;
+}
+#tree ul li.root:after {
+    display: none;
+}
+#tree ul li:last-child:after {
+    display: none;
+}
+
+
+/* CONTENT */
+
+#content {
+    box-sizing: border-box;
+    background: #eee;
+    overflow: auto;
+    flex: 1;
+    display: flex;
+    flex-flow: column;
+}
+
+#content h1 {
+    padding-left: 10px;
+    margin-top: 10px;
+}
+
+#content .info-box {
+    margin: 0px auto;
+    padding: 5px;
+    background: #ddddff;
+    border: 1px solid #bbb;
+    border-radius: 5px;
+    margin-bottom: 10px;
+}
+#content .info-box span {
+    cursor: pointer;
+    margin-left: 10px;
+    float: right;
+}
+
+.parentFolder {
+    cursor: pointer;
+    margin-left: 10px;
+}
+
+.parentFolder:hover {
+    text-decoration: underline;
+}
+
+#folderContent {
+    padding-right: 10px;
+    flex: 1;
+}
+
+#content li:not(.header) * {
+    pointer-events: none;
+}
+
+#content li:hover:not(.header) .name {
+    text-decoration: underline;
+}
+
+#content .grid li {
+    display: inline-block;
+    margin: 10px 10px;
+    width: 140px;
+    text-align: center;
+    vertical-align: top;
+}
+
+#content .grid li .name {
+    width: 100%;
+}
+
+#content .grid li input {
+    width: 100%;
+}
+
+#content .grid li .fa {
+    display: block;
+    margin: auto;
+    font-size: 40px;
+    text-align: center;
+}
+
+#content .grid li .fa.listonly {
+    display: none;
+}
+
+#content .list li {
+    display: flex;
+    flex-flow: row;
+    align-items: center;
+    padding-right: 0px;
+}
+
+#content .list li .element {
+    display: inline-flex;
+    flex: 1;
+}
+
+#content .list li.header {
+    cursor: default;
+    color: #008;
+    margin-top: 10px;
+}
+#content .list li.header .element span:not(.fa) {
+    border-right: 1px solid #CCC;
+    text-align: left;
+}
+#content .list li.header .element span.fa {
+    float: right;
+}
+#content .list li.header span.name {
+    padding-left: 0;
+}
+
+#content .list .element span {
+    padding: 0px 10px;
+    display: inline-block;
+    overflow: hidden;
+    white-space: nowrap;
+    box-sizing: border-box;
+    padding-right: 0px;
+    border-right: 10px solid rgba(0, 0, 0, 0);
+}
+#content .list .element span.name {
+    width: 478px;
+}
+.iframe #content .list .element span.name {
+    width: 278px;
+}
+#content .list .header span.name {
+    width: 500px;
+}
+.iframe #content .list .header span.name {
+    width: 300px;
+}
+#content .list .element span.type, #content .list .element span.atime, #content .list .element span.ctime {
+    width: 175px;
+}
+#content .list .element span.title {
+    width: 250px;
+}
+#content .list .element span.folders {
+    width: 150px;
+}
+#content .list .element span.files {
+    width: 150px;
+}
+#content div.grid .listElement {
+    display: none;
+}
+@media screen and (max-width: 1200px) {
+    #content .list .element span.title {
+        display: none;
+    }
+}
+@media screen and (min-width: 1201px) {
+    #content .list .element span.title {
+        display: inline;
+    }
+}
+
+/* Toolbar */
+
+#driveToolbar {
+    background: #ddd;
+    height: 40px;
+}
+
+.newPadContainer {
+    display: inline-block;
+    height: 100%;
+}
+
+button.newElement {
+    border-radius: 2px;
+    height: 30px;
+    background: #888;
+    color: #eee;
+    font-size: 16px;
+    border: none;
+    font-weight: bold;
+}
+
+button.newElement:hover {
+    box-shadow: 0px 0px 2px #000;
+}
+
+
+/* The container <div> - needed to position the dropdown content */
+#driveToolbar .dropdown-bar {
+    margin: 4px 5px;
+    position: relative;
+    display: inline-block;
+}
+#driveToolbar .dropdown-bar.right {
+    float: right;
+}
+
+/* Right-side buttons */
+#driveToolbar .dropdown-bar.right button {
+    display: inline-block;
+}
+#driveToolbar .dropdown-bar.right button.active {
+    display: none;
+}
+#driveToolbar .dropdown-bar.right button .fa {
+    margin-right: 0px;
+}
+.dropdown-bar-content {
+    margin-top: -3px;
+    margin-right: 2px;
+}