Browse Source

filebrowser dracula theme

pull/235/head
Marius 4 years ago
parent
commit
aec095e592
  1. 9
      CSS/themes/filebrowser/aquamarine.css
  2. 9
      CSS/themes/filebrowser/dark.css
  3. 16
      CSS/themes/filebrowser/dracula.css
  4. 373
      CSS/themes/filebrowser/filebrowser-base.css
  5. 9
      CSS/themes/filebrowser/hotline.css
  6. 9
      CSS/themes/filebrowser/organizr-dark.css
  7. 9
      CSS/themes/filebrowser/plex.css
  8. 9
      CSS/themes/filebrowser/space-gray.css

9
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 {
--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);
}
@import url(https://theme-park.dev/CSS/variables/aquamarine.css);

9
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 {
--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;
}
@import url(https://theme-park.dev/CSS/variables/dark.css);

16
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);

373
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);
color: rgb(255, 255, 255);
border-bottom: 1px solid var(--accent-color);
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: 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);
@ -226,20 +283,23 @@ svg {
-moz-background-size: auto, cover;
-o-background-size: auto, cover;
}
#breadcrumbs span a{
color: rgb(238, 238, 238);
#breadcrumbs span a {
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;
color: #000;
background: rgba(0, 0, 0, 0.25);
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);
input, textarea, select, button {
color: var(--text-hover);
}
.collapsible>label *{
color: rgb(238, 238, 238);
color: var(--text-hover);
}
a,
.link,
.breadcrumbs span a,
.breadcrumbs, .breadcrumbs span {
color: var(--link-color);
}
a{
color: rgba(255, 255, 255, 0.85);
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);
.dashboard #nav ul li.active {
border-color: rgb(var(--accent-color));
color: rgb(var(--accent-color));
}
.link:hover {
color: var(--accent-color-hover);
}
@media (max-width: 736px){
nav{
background-color: black;
.dashboard #nav ul li.active:before {
background: rgb(var(--accent-color));
opacity: .08;
}
#dropdown.active{
background-color: black;
.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);
}
@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--flat, .button--grey {
color: #fff;
margin-right: 5px;
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
}
.ace-chrome .ace_cursor {
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);
}

9
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 {
--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);
}
@import url(https://theme-park.dev/CSS/variables/hotline.css);

9
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 {
--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;
}
@import url(https://theme-park.dev/CSS/variables/organizr-dark.css);

9
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 {
--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;
}
@import url(https://theme-park.dev/CSS/variables/plex.css);

9
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 {
--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;
}
@import url(https://theme-park.dev/CSS/variables/space-gray.css);
Loading…
Cancel
Save