filebrowser dracula theme

CSS/themes/filebrowser/aquamarine.css

@@ -13,11 +13,4 @@
 
 /* FILEBROWSER AQUAMARINE THEME */
 @import url(https://theme-park.dev/CSS/themes/filebrowser/filebrowser-base.css);
-:root {
+@import url(https://theme-park.dev/CSS/variables/aquamarine.css);
-  --main-bg-color: radial-gradient(ellipse at center, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed;
-  --modal-bg-color: radial-gradient(ellipse at center, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed;
-  --button-color: hsla(0,0%,100%,.15);
-  --button-color-hover: hsla(0,0%,100%,.30);
-  --accent-color:  hsla(0,0%,100%,.85);
-  --accent-color-hover: hsla(0,0%,100%,.95);
-}

CSS/themes/filebrowser/dark.css

@@ -13,11 +13,4 @@
 
 /* FILEBROWSER DARK THEME */
 @import url(https://theme-park.dev/CSS/themes/filebrowser/filebrowser-base.css);
-:root {
+@import url(https://theme-park.dev/CSS/variables/dark.css);
-  --main-bg-color: radial-gradient(circle, #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed;
-  --modal-bg-color: radial-gradient(circle , #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed;
-  --button-color: #cc7b19;
-  --button-color-hover: #e59029;
-  --accent-color:  #e5a00d;
-  --accent-color-hover: #ffc107;
-  }

CSS/themes/filebrowser/dracula.css

@@ -0,0 +1,16 @@
+
+/*    dP   dP                                                                  dP        */
+/*    88   88                                                                  88        */
+/*  d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b.    88d888b. .d8888b. 88d888b. 88  .dP   */
+/*    88   88'  `88 88ooood8 88'`88'`88 88ooood8    88'  `88 88'  `88 88'  `88 88888"    */
+/*    88   88    88 88.  ... 88  88  88 88.  ...    88.  .88 88.  .88 88       88  `8b.  */
+/*    dP   dP    dP `88888P' dP  dP  dP `88888P' 88 88Y888P' `88888P8 dP       dP   `YP  */
+/*                                                  88                                   */
+/*                                                  dP					 */
+
+/*		   		        Made by @gilbN					 */
+/*			      https://github.com/gilbN/theme.park			 */
+
+/* FILEBROWSER DRACULA THEME */
+@import url(https://theme-park.dev/CSS/themes/filebrowser/filebrowser-base.css);
+@import url(https://theme-park.dev/CSS/variables/plex.css);

CSS/themes/filebrowser/filebrowser-base.css

@@ -46,6 +46,39 @@
         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);
+}
+
+/* Firefox < 19 */
+input:-moz-placeholder {
+    color: var(--text);
+}
+input:focus:-moz-placeholder {
+    color: var(--text-hover);
+}
+
+/* Firefox > 19 */
+input::-moz-placeholder {
+    color: var(--text);
+}
+input:focus::-moz-placeholder {
+    color: var(--text-hover);
+}
+
+/* Internet Explorer 10 */
+input:-ms-input-placeholder {
+    color: var(--text);
+}
+input:focus:-ms-input-placeholder {
+    color: var(--text-hover);
+}
+
 .message {
     color: #FFF;
 }
@@ -63,11 +96,14 @@
 }
 body {
     
-    color: #FFFFFF;
+    color: var(--text);
     font-family: Open Sans Bold,Helvetica Neue,Helvetica,Arial,sans-serif;
 }
+h1, h2, h3, h4, h5, h6, th {
+    color: var(--text-hover) !important;
+}
 #login input[type=password], #login input[type=text] {
-    color: white !important;
+    color: var(--text-hover) !important;
     background-color: rgba(0,0,0,0.15) !important;
     border: none;
 }
@@ -84,12 +120,7 @@ background-size: auto, cover;
 #loading .spinner * {
   background-color: #FFF !important;
 }
-button:hover, input[type=submit]:hover{
+
-    color: #FFF;
-}
-.button--flat:hover {
-    background: rgba(255, 255, 255, 0.1);
-}
 html {
     min-height: 100%;
     background: var(--main-bg-color);
@@ -111,14 +142,25 @@ body{
     -moz-background-size: auto, cover;
     -o-background-size: auto, cover;
 }
+@media (max-width: 736px){
+    nav, nav.active {
+        background: var(--modal-bg-color) !important;
+    }
+    #dropdown.active{
+        background: var(--drop-down-menu-bg) !important;
+    }
+    }
 nav {
-    background-color: rgba(0,0,0,.45);
+    background: rgba(0,0,0,.45);
     height: 100%;
-    top: 60px;
+    top: 64px;
     width: 240px;
 }
+.overlay:not(nav) {
+    background-color: transparent;
+}
 nav .action{
-    color:rgba(255, 255, 255, 0.737);
+    color:var(--text);
     font-size: 13px;
     font-family: Open Sans Semibold,Helvetica Neue,Helvetica,Arial,sans-serif;
     -webkit-font-smoothing: antialiased;
@@ -128,12 +170,14 @@ nav .action{
 }
 nav .action:hover{
     background-color:rgba(255, 255, 255, 0.05);
+    color: rgb(var(--accent-color));
 }
+
 nav>div{
     border-top: none;
 }
 header{
-    background: var(--modal-bg-color);
+    background: rgba(0, 0, 0, 0.25);
     background-repeat: repeat, no-repeat;
     background-attachment: fixed, fixed;
     background-position: center center, center center;
@@ -159,34 +203,43 @@ body{
     -webkit-background-size: auto, cover;
     -moz-background-size: auto, cover;
     -o-background-size: auto, cover;
-	color: #FFF;
+	color: rgb(var(--accent-color));
 }
 .shell__prompt i {
-    color: var(--accent-color);
+    color: rgb(var(--accent-color));
 }
 .action{
     color: #FFF;
 }
 #listing.list .item{
     background-color: rgba(0,0,0,.15);
-    color:rgb(238, 238, 238);
+    color:var(--text);
     border: none;
 }
 #listing.list .item:hover{
     background-color:rgba(255, 255, 255, 0.08);
-    color:rgb(238, 238, 238);
+    color:var(--text-hover);
     border: none;
     transition: .4s;
 }
 #listing.list .item.header{
     background-color: rgba(0,0,0,.45);
-    color:rgb(238, 238, 238);
+    color: var(--text-hover);
     border-bottom: none;
     right: auto;
 }
 .material-icons, .prompt .file-list ul li:before{
-    color: white;
+    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);
+    border: 2px solid var(--label-text-color);
 }
+
 .share__box {
     background: transparent;
 }
@@ -194,27 +247,31 @@ body{
     background: rgba(0, 0, 0, 0.25);
 }
 .share__box__download {
-    background: var(--accent-color);
+    background: rgb(var(--accent-color));
-    color: rgb(255, 255, 255);
+    color: var(--text-hover);
-    border-bottom: 1px solid var(--accent-color);
+    border-bottom: 1px solid rgb(var(--accent-color));
+}
+.share__box__element {
+    border-top: 1px solid rgb(255 255 255 / 10%);
 }
 svg {
-    fill: var(--accent-color) !important;
+    fill: rgb(var(--accent-color)) !important;
 }
 #listing.list .item div:first-of-type i {
-    color: var(--accent-color);
+    color: rgb(var(--accent-color));
 }
 #listing .item i {
-    color: var(--accent-color);
+    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: rgb(238, 238, 238);
+    color: var(--text-hover);
 }
 #listing #multiple-selection {
     background: var(--modal-bg-color);
@@ -227,19 +284,22 @@ svg {
     -o-background-size: auto, cover;
 }
 #breadcrumbs span a {
-    color: rgb(238, 238, 238);
+    color: var(--text-hover);
 }
 #breadcrumbs {
-    border-bottom: 1px solid var(--accent-color);
+    border-bottom: 1px solid rgb(var(--accent-color));
 }
 #listing .item{
     background-color: rgba(0,0,0,.15);
-    color:rgb(238, 238, 238);
+    color:var(--text);
     border: none;
 }
 .input {
-    background: #FFF;
+    background: rgba(0, 0, 0, 0.25);
-    color: #000;
+    color: var(--text-hover);
+}
+select>option {
+    background: #1f1f1f;
 }
 #search #input {
     background: #fff;
@@ -255,14 +315,14 @@ svg {
     -webkit-background-size: auto, cover;
     -moz-background-size: auto, cover;
     -o-background-size: auto, cover;
-    color: rgb(238, 238, 238);
+    color: var(--text-hover);
 }
 #search .boxes{
     background-color: rgba(0,0,0,.15);
     padding: 15px;
 }
 #search .boxes h3{
-    color: rgb(238, 238, 238);
+    color: var(--text-hover);
 }
 #search .boxes>div>div{
     background-color: rgba(0,0,0,.10);
@@ -283,7 +343,7 @@ svg {
     color: black;
 }
 #search.active i, #search.active input{
-    color: rgba(255, 255, 255, 0.85);
+    color: var(--text-hover);
 }
 #search #result>div>:first-child{
     margin-top: 10px;
@@ -292,25 +352,39 @@ svg {
     background-color: rgba(0,0,0,.15);
 }
 .card h3{
-    color: rgb(238, 238, 238);
+    color: var(--text-hover);
 }
 .card#share ul li a {
-    color: var(--accent-color);
+    color: rgb(var(--accent-color));
 }
 select {
-    color: rgb(238, 238, 238);
+    color: var(--text-hover);
 }
+.card#share .input-group * {
+    border: none;
+    background: transparent;
+}
+
 input, textarea, select, button {
-    color: rgb(0, 0, 0);
+    color: var(--text-hover);
 }
 .collapsible>label *{
-    color: rgb(238, 238, 238);
+    color: var(--text-hover);
 }
-a{
+
-    color: rgba(255, 255, 255, 0.85);
+a,
+.link,
+.breadcrumbs span a,
+.breadcrumbs, .breadcrumbs span {
+    color: var(--link-color);
+}
+a:hover,
+.link:hover,
+.breadcrumbs span a:hover {
+  color: var(--link-color-hover);  
 }
 table th{
-    color: rgba(255, 255, 255, 0.85);
+    color: var(--text-hover);
 }
 .card.floating{
     background: var(--modal-bg-color);
@@ -334,26 +408,28 @@ table th{
     background-color: rgba(255,255,255,0.08);
 }
 .dashboard p label {
-    color: rgb(255, 255, 255);
+    color: var(--text-hover);
 }
 .dashboard #nav li.active {
-    border-color: var(--accent-color);
+    border-color: rgb(var(--accent-color));
-}
-.link {
-    color: var(--accent-color);
 }
-.link:hover {
+.dashboard #nav ul li.active {
-    color: var(--accent-color-hover);
+    border-color: rgb(var(--accent-color));
+    color: rgb(var(--accent-color));
 }
-@media (max-width: 736px){
+.dashboard #nav ul li.active:before {
-nav{
+    background: rgb(var(--accent-color));
-    background-color: black;
+    opacity: .08;
 }
-#dropdown.active{
+.dashboard #nav ul li:hover {
-    background-color: black;
+    background: rgb(var(--accent-color),.15);
+    color: rgb(var(--accent-color));
 }
+.dashboard #nav .wrapper {
+    border-bottom: 2px solid var(--accent-color-hover);
 }
 
+
 @media (min-width: 1024px){
     main{
         margin-left: 270px;
@@ -366,14 +442,189 @@ nav{
 }
 
 /* Buttons */
-.button {
+.button:not(.button--flat.button--red) {
     background: var(--button-color);
-	color: #FFF;
+	color: var(--button-text);
 }
-.button:hover {
+.button:hover:not(.button--flat.button--red),
+.button:active:not(.button--flat.button--red),
+.button:focus:not(.button--flat.button--red) {
     background: var(--button-color-hover);
+    color: var(--button-text-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;
+    margin-left: 5px;
+}
+
+
+#editor-container {
+    background: var(--modal-bg-color);
+}
+/* ACE EDITOR */
+
+.ace-chrome .ace_gutter {
+    background: #282a36 !important;
+    color: rgb(144,145,148) !important;
+}
+
+.ace-chrome .ace_print-margin {
+    width: 1px;
+    background: #44475a
+}
+
+.ace-chrome {
+    background-color: #282a36;
+    color: #f8f8f2
 }
-.button--flat, .button--grey {
+
-    color: #fff;
+.ace-chrome .ace_cursor {
-	margin-right: 5px;
+    color: #f8f8f0
+}
+
+.ace-chrome .ace_marker-layer .ace_selection {
+    background: #44475a
+}
+
+.ace-chrome.ace_multiselect .ace_selection.ace_start {
+    box-shadow: 0 0 3px 0px #282a36;
+    border-radius: 2px
+}
+
+.ace-chrome .ace_marker-layer .ace_step {
+    background: rgb(198, 219, 174)
+}
+
+.ace-chrome .ace_marker-layer .ace_bracket {
+    margin: -1px 0 0 -1px;
+    border: 1px solid #a29709
+}
+
+.ace-chrome .ace_marker-layer .ace_active-line {
+    background: #44475a
+}
+
+.ace-chrome .ace_gutter-active-line {
+    background-color: #44475a
+}
+
+.ace-chrome .ace_marker-layer .ace_selected-word {
+    box-shadow: 0px 0px 0px 1px #a29709;
+    border-radius: 3px;
+}
+
+.ace-chrome .ace_fold {
+    background-color: #50fa7b;
+    border-color: #f8f8f2
+}
+
+.ace-chrome .ace_keyword {
+    color: #ff79c6
+}
+
+.ace-chrome .ace_constant.ace_language {
+    color: #bd93f9
+}
+
+.ace-chrome .ace_constant.ace_numeric {
+    color: #bd93f9
+}
+
+.ace-chrome .ace_constant.ace_character {
+    color: #bd93f9
+}
+
+.ace-chrome .ace_constant.ace_character.ace_escape {
+    color: #ff79c6
+}
+
+.ace-chrome .ace_constant.ace_other {
+    color: #bd93f9
+}
+
+.ace-chrome .ace_support.ace_function {
+    color: #8be9fd
+}
+
+.ace-chrome .ace_support.ace_constant {
+    color: #6be5fd
+}
+
+.ace-chrome .ace_support.ace_class {
+    font-style: italic;
+    color: #66d9ef
+}
+
+.ace-chrome .ace_support.ace_type {
+    font-style: italic;
+    color: #66d9ef
+}
+
+.ace-chrome .ace_storage {
+    color: #ff79c6
+}
+
+.ace-chrome .ace_storage.ace_type {
+    font-style: italic;
+    color: #8be9fd
+}
+
+.ace-chrome .ace_invalid {
+    color: #F8F8F0;
+    background-color: #ff79c6
+}
+
+.ace-chrome .ace_invalid.ace_deprecated {
+    color: #F8F8F0;
+    background-color: #bd93f9
+}
+
+.ace-chrome .ace_string {
+    color: #f1fa8c
+}
+
+.ace-chrome .ace_comment {
+    color: #6272a4
+}
+
+.ace-chrome .ace_variable {
+    color: #50fa7b
+}
+
+.ace-chrome .ace_variable.ace_parameter {
+    font-style: italic;
+    color: #ffb86c
+}
+
+.ace-chrome .ace_entity.ace_other.ace_attribute-name {
+    color: #50fa7b
+}
+
+.ace-chrome .ace_entity.ace_name.ace_function {
+    color: #50fa7b
+}
+
+.ace-chrome .ace_entity.ace_name.ace_tag {
+    color: #ff79c6
+}
+
+.ace-chrome .ace_invisible {
+    color: #626680;
+}
+
+.ace-chrome .ace_indent-guide {
+    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAACCAYAAACZgbYnAAAAEklEQVQImWNgYGBgYHB3d/8PAAOIAdULw8qMAAAAAElFTkSuQmCC) right repeat-y
+}
+
+.credits {
+
+    color: var(--text-muted);
 }

CSS/themes/filebrowser/hotline.css

@@ -13,11 +13,4 @@
 
 /* FILEBROWSER HOTLINE THEME */
 @import url(https://theme-park.dev/CSS/themes/filebrowser/filebrowser-base.css);
-:root {
+@import url(https://theme-park.dev/CSS/variables/hotline.css);
-  --main-bg-color: radial-gradient(ellipse at center, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed;
-  --modal-bg-color: radial-gradient(ellipse at center, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed;
-  --button-color: hsla(0,0%,100%,.15);
-  --button-color-hover: hsla(0,0%,100%,.30);
-  --accent-color:  hsla(0,0%,100%,.85);
-  --accent-color-hover: hsla(0,0%,100%,.95);
-}

CSS/themes/filebrowser/organizr-dark.css

@@ -13,11 +13,4 @@
 
 /* FILEBROWSER ORGANIZR-DARK THEME */
 @import url(https://theme-park.dev/CSS/themes/filebrowser/filebrowser-base.css);
-:root {
+@import url(https://theme-park.dev/CSS/variables/organizr-dark.css);
-  --main-bg-color: #1f1f1f;
-  --modal-bg-color: #1b1b1b;
-  --button-color: #2cabe3;
-  --button-color-hover: rgb(44 171 227 / .8);
-  --accent-color:  #2cabe3;
-  --accent-color-hover: white;
-  }

CSS/themes/filebrowser/plex.css

@@ -13,11 +13,4 @@
 
 /* FILEBROWSER PLEX THEME */
 @import url(https://theme-park.dev/CSS/themes/filebrowser/filebrowser-base.css);
-:root {
+@import url(https://theme-park.dev/CSS/variables/plex.css);
-  --main-bg-color: url("https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/blur-noise.png"), url("https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/preset-light2.png") center center/cover no-repeat fixed;
-  --modal-bg-color: url("https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/blur-noise.png"), url("https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/preset-dark2.png") center center/cover no-repeat fixed;
-  --button-color: #cc7b19;
-  --button-color-hover: #e59029;
-  --accent-color:  #e5a00d;
-  --accent-color-hover: #ffc107;
-  }

CSS/themes/filebrowser/space-gray.css

@@ -13,11 +13,4 @@
 
 /* FILEBROWSER SPACE GRAY THEME */
 @import url(https://theme-park.dev/CSS/themes/filebrowser/filebrowser-base.css);
-:root {
+@import url(https://theme-park.dev/CSS/variables/space-gray.css);
-  --main-bg-color:  radial-gradient( ellipse at center,  rgba(87,108,117,1) 0%, rgba(37,50,55,1) 100.2% ) center center/cover no-repeat fixed;
-  --modal-bg-color: radial-gradient( ellipse at top,  rgba(87,108,117,1) 0%, rgba(37,50,55,1) 100.2% ) center center/cover no-repeat fixed; 
-  --button-color: #607D8B;
-  --button-color-hover: #81a6b7;
-  --accent-color: #607D8B;
-  --accent-color-hover: #81a6b7;
-}