fb formatting

CSS/themes/filebrowser/filebrowser-base.css

@@ -1,4 +1,3 @@
-
 /*    dP   dP                                                                  dP        */
 /*    88   88                                                                  88        */
 /*  d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b.    88d888b. .d8888b. 88d888b. 88  .dP   */
@@ -11,46 +10,11 @@
 /*		   		        Made by @gilbN					 */
 /*			      https://github.com/gilbN/theme.park			 */
 
-/* Based on https://github.com/Archmonger/Blackberry-Themes/blob/master/Themes/Blackberry-Flat/bbf_filebrowser.css */
-
- /* Scrollbar */  
-/*  @media only screen and (min-width: 768px) {  
-    html {
-        height: 100% !important;
-        width: 100% !important;
-        overflow: hidden !important;
-    }
-    body {
-        overflow-y: auto !important;
-        height: 100% !important;
-        background: var(--main-bg-color) !important;
-    }
-}
-    ::-webkit-scrollbar {
-        width: 14px;
-    }
-    ::-webkit-scrollbar-thumb {
-        min-height: 50px;
-        border: 3px solid transparent;
-        border-radius: 8px;
-        background-color: hsla(0,0%,100%,.2);
-        background-clip: padding-box;
-    }
-    ::-webkit-scrollbar-track {
-        background-color: transparent;
-    }
-    ::-webkit-scrollbar-thumb:hover {
-        min-height: 50px;
-        border: 3px solid transparent;
-        border-radius: 8px;
-        background-color: hsla(0,0%,100%,.5);
-        background-clip: padding-box;
-    }  */  
-
 /* PLACEHOLDERS */
 input::-webkit-input-placeholder {
     color: var(--text);
 }
+
 input:focus::-webkit-input-placeholder {
     color: var(--text-hover);
 }
@@ -59,6 +23,7 @@ input:focus::-webkit-input-placeholder {
 input:-moz-placeholder {
     color: var(--text);
 }
+
 input:focus:-moz-placeholder {
     color: var(--text-hover);
 }
@@ -67,6 +32,7 @@ input:focus:-moz-placeholder {
 input::-moz-placeholder {
     color: var(--text);
 }
+
 input:focus::-moz-placeholder {
     color: var(--text-hover);
 }
@@ -75,6 +41,7 @@ input:focus::-moz-placeholder {
 input:-ms-input-placeholder {
     color: var(--text);
 }
+
 input:focus:-ms-input-placeholder {
     color: var(--text-hover);
 }
@@ -82,6 +49,7 @@ input:focus:-ms-input-placeholder {
 .message {
     color: #FFF;
 }
+
 #login {
     min-height: 100%;
     height: auto;
@@ -94,21 +62,33 @@ input:focus:-ms-input-placeholder {
     -moz-background-size: auto, cover;
     -o-background-size: auto, cover;
 }
+
 body {
 
     color: var(--text);
     font-family: Open Sans Bold, Helvetica Neue, Helvetica, Arial, sans-serif;
 }
-h1, h2, h3, h4, h5, h6, th {
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+th {
     color: var(--text-hover) !important;
 }
-#login input[type=password], #login input[type=text] {
+
+#login input[type=password],
+#login input[type=text] {
     color: var(--text-hover) !important;
     background-color: rgba(0, 0, 0, 0.15) !important;
     border: none;
 }
+
 #loading {
-background: var(--main-bg-color);background-repeat: repeat, no-repeat;
+    background: var(--main-bg-color);
+    background-repeat: repeat, no-repeat;
     background-attachment: fixed, fixed;
     background-position: center center, center center;
     background-size: auto, cover;
@@ -132,6 +112,7 @@ html {
     -moz-background-size: auto, cover;
     -o-background-size: auto, cover;
 }
+
 body {
     background: var(--main-bg-color);
     background-repeat: repeat, no-repeat;
@@ -142,23 +123,30 @@ body{
     -moz-background-size: auto, cover;
     -o-background-size: auto, cover;
 }
+
 @media (max-width: 736px) {
-    nav, nav.active {
+
+    nav,
+    nav.active {
         background: var(--modal-bg-color) !important;
     }
+
     #dropdown.active {
         background: var(--drop-down-menu-bg) !important;
     }
 }
+
 nav {
     background: rgba(0, 0, 0, .45);
     height: 100%;
     top: 64px;
     width: 240px;
 }
+
 .overlay:not(nav) {
     background-color: transparent;
 }
+
 nav .action {
     color: var(--text);
     font-size: 13px;
@@ -168,6 +156,7 @@ nav .action{
     padding-top: 0px;
     padding-bottom: 0px;
 }
+
 nav .action:hover {
     background-color: rgba(255, 255, 255, 0.05);
     color: rgb(var(--accent-color));
@@ -176,6 +165,7 @@ nav .action:hover{
 nav>div {
     border-top: none;
 }
+
 header {
     background: rgba(0, 0, 0, 0.25);
     background-repeat: repeat, no-repeat;
@@ -188,12 +178,15 @@ header{
     border-bottom: transparent;
     box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .15);
 }
+
 header>div:first-child {
     height: 60px;
 }
+
 body {
     padding-top: 60px;
 }
+
 .shell {
     background: var(--modal-bg-color);
     background-repeat: repeat, no-repeat;
@@ -205,35 +198,44 @@ body{
     -o-background-size: auto, cover;
     color: rgb(var(--accent-color));
 }
+
 .shell__prompt i {
     color: rgb(var(--accent-color));
 }
+
 .action {
     color: #FFF;
 }
+
 #listing.list .item {
     background-color: rgba(0, 0, 0, .15);
     color: var(--text);
     border: none;
 }
+
 #listing.list .item:hover {
     background-color: rgba(255, 255, 255, 0.08);
     color: var(--text-hover);
     border: none;
     transition: .4s;
 }
+
 #listing.list .item.header {
     background-color: rgba(0, 0, 0, .45);
     color: var(--text-hover);
     border-bottom: none;
     right: auto;
 }
-.material-icons, .prompt .file-list ul li:before{
+
+.material-icons,
+.prompt .file-list ul li:before {
     color: rgb(var(--accent-color));
 }
+
 .action:hover {
     background-color: rgba(var(--accent-color), .1);
 }
+
 .action .counter {
     background: rgb(var(--accent-color));
     color: var(--label-text-color);
@@ -243,36 +245,46 @@ body{
 .share__box {
     background: transparent;
 }
+
 .share__box__info {
     background: rgba(0, 0, 0, 0.25);
 }
+
 .share__box__download {
     background: rgb(var(--accent-color));
     color: var(--text-hover);
     border-bottom: 1px solid rgb(var(--accent-color));
 }
+
 .share__box__element {
     border-top: 1px solid rgb(255 255 255 / 10%);
 }
+
 svg {
     fill: rgb(var(--accent-color)) !important;
 }
+
 #listing.list .item div:first-of-type i {
     color: rgb(var(--accent-color));
 }
+
 #listing .item i {
     color: rgb(var(--accent-color));
 }
+
 #listing.mosaic:hover .item:hover i:hover {
     color: var(--accent-color-hover);
 }
+
 #listing .item[aria-selected=true] {
     background-color: rgba(255, 255, 255, 0.2) !important;
     color: var(--text-hover) !important;
 }
+
 #listing h2 {
     color: var(--text-hover);
 }
+
 #listing #multiple-selection {
     background: var(--modal-bg-color);
     background-repeat: repeat, no-repeat;
@@ -283,29 +295,36 @@ svg {
     -moz-background-size: auto, cover;
     -o-background-size: auto, cover;
 }
+
 #breadcrumbs span a {
     color: var(--text-hover);
 }
+
 #breadcrumbs {
     border-bottom: 1px solid rgb(var(--accent-color));
 }
+
 #listing .item {
     background-color: rgba(0, 0, 0, .15);
     color: var(--text);
     border: none;
 }
+
 .input {
     background: rgba(0, 0, 0, 0.25);
     color: var(--text-hover);
 }
+
 select>option {
     background: #1f1f1f;
 }
+
 #search #input {
     background: #fff;
     display: flex;
     padding: 10px;
 }
+
 #search #result {
     background: var(--modal-bg-color);
     background-repeat: repeat, no-repeat;
@@ -317,19 +336,24 @@ select>option {
     -o-background-size: auto, cover;
     color: var(--text-hover);
 }
+
 #search .boxes {
     background-color: rgba(0, 0, 0, .15);
     padding: 15px;
 }
+
 #search .boxes h3 {
     color: var(--text-hover);
 }
+
 #search .boxes>div>div {
     background-color: rgba(0, 0, 0, .10);
 }
+
 #search .boxes>div>div:hover {
     background-color: rgba(255, 255, 255, .08);
 }
+
 #search.active #input {
     background: var(--main-bg-color);
     background-repeat: repeat, no-repeat;
@@ -342,32 +366,44 @@ select>option {
     height: 60px;
     color: black;
 }
-#search.active i, #search.active input{
+
+#search.active i,
+#search.active input {
     color: var(--text-hover);
 }
+
 #search #result>div>:first-child {
     margin-top: 10px;
 }
+
 .card {
     background-color: rgba(0, 0, 0, .15);
 }
+
 .card h3 {
     color: var(--text-hover);
 }
+
 .card#share ul li a {
     color: rgb(var(--accent-color));
 }
+
 select {
     color: var(--text-hover);
 }
+
 .card#share .input-group * {
     border: none;
     background: transparent;
 }
 
-input, textarea, select, button {
+input,
+textarea,
+select,
+button {
     color: var(--text-hover);
 }
+
 .collapsible>label * {
     color: var(--text-hover);
 }
@@ -375,17 +411,21 @@ input, textarea, select, button {
 a,
 .link,
 .breadcrumbs span a,
-.breadcrumbs, .breadcrumbs span {
+.breadcrumbs,
+.breadcrumbs span {
     color: var(--link-color);
 }
+
 a:hover,
 .link:hover,
 .breadcrumbs span a:hover {
     color: var(--link-color-hover);
 }
+
 table th {
     color: var(--text-hover);
 }
+
 .card.floating {
     background: var(--modal-bg-color);
     background-repeat: repeat, no-repeat;
@@ -396,6 +436,7 @@ table th{
     -moz-background-size: auto, cover;
     -o-background-size: auto, cover;
 }
+
 #search #input {
     background-color: rgba(255, 255, 255, 0.08);
 }
@@ -403,28 +444,35 @@ table th{
 #listing.mosaic .item {
     box-shadow: none !important;
 }
+
 #listing.mosaic .item:hover {
     box-shadow: none !important;
     background-color: rgba(255, 255, 255, 0.08);
 }
+
 .dashboard p label {
     color: var(--text-hover);
 }
+
 .dashboard #nav li.active {
     border-color: rgb(var(--accent-color));
 }
+
 .dashboard #nav ul li.active {
     border-color: rgb(var(--accent-color));
     color: rgb(var(--accent-color));
 }
+
 .dashboard #nav ul li.active:before {
     background: rgb(var(--accent-color));
     opacity: .08;
 }
+
 .dashboard #nav ul li:hover {
     background: rgb(var(--accent-color), .15);
     color: rgb(var(--accent-color));
 }
+
 .dashboard #nav .wrapper {
     border-bottom: 2px solid var(--accent-color-hover);
 }
@@ -435,6 +483,7 @@ table th{
         margin-left: 270px;
     }
 }
+
 @media (max-width: 1024px) {
     nav {
         width: 175px;
@@ -446,6 +495,7 @@ table th{
     background: var(--button-color);
     color: var(--button-text);
 }
+
 .button:hover:not(.button--flat.button--red),
 .button:active:not(.button--flat.button--red),
 .button:focus:not(.button--flat.button--red) {
@@ -453,12 +503,15 @@ table th{
     color: var(--button-text-hover);
 }
 
-button:hover:not(.action), input[type=submit]:hover{
+button:hover:not(.action),
+input[type=submit]:hover {
     color: var(--button-text-hover);
 }
+
 .button--flat {
     margin-left: 5px;
 }
+
 .button--flat:hover {
     background: var(--dark-red);
     color: #FFF;
@@ -469,6 +522,7 @@ button:hover:not(.action), input[type=submit]:hover{
 #editor-container {
     background: var(--modal-bg-color);
 }
+
 /* ACE EDITOR */
 
 .ace-chrome .ace_gutter {