From 3ba156e59d4862b40c1e24a93ca32846ec52cf20 Mon Sep 17 00:00:00 2001 From: gilbN Date: Sun, 28 Jul 2019 12:15:52 +0200 Subject: [PATCH] added filebrowser themes --- CSS/themes/filebrowser/aquamarine.css | 23 ++ CSS/themes/filebrowser/dark.css | 23 ++ CSS/themes/filebrowser/filebrowser-base.css | 304 ++++++++++++++++++++ CSS/themes/filebrowser/hotline.css | 23 ++ CSS/themes/filebrowser/plex.css | 23 ++ 5 files changed, 396 insertions(+) create mode 100644 CSS/themes/filebrowser/aquamarine.css create mode 100644 CSS/themes/filebrowser/dark.css create mode 100644 CSS/themes/filebrowser/filebrowser-base.css create mode 100644 CSS/themes/filebrowser/hotline.css create mode 100644 CSS/themes/filebrowser/plex.css diff --git a/CSS/themes/filebrowser/aquamarine.css b/CSS/themes/filebrowser/aquamarine.css new file mode 100644 index 00000000..45fee4c9 --- /dev/null +++ b/CSS/themes/filebrowser/aquamarine.css @@ -0,0 +1,23 @@ + +/* 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 AQUAMARINE THEME */ +@import url(https://gilbn.github.io/theme.park/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); +} \ No newline at end of file diff --git a/CSS/themes/filebrowser/dark.css b/CSS/themes/filebrowser/dark.css new file mode 100644 index 00000000..852fbc60 --- /dev/null +++ b/CSS/themes/filebrowser/dark.css @@ -0,0 +1,23 @@ + +/* 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 DARK THEME */ +@import url(https://gilbn.github.io/theme.park/CSS/themes/filebrowser/filebrowser-base.css); +:root { + --main-bg-color: #1f1f1f; + --modal-bg-color: radial-gradient(ellipse at top, #1f1f1f 0%, #1f1f1f 100%) center center/cover no-repeat fixed; + --button-color: #cc7b19; + --button-color-hover: #e59029; + --accent-color: #e5a00d; + --accent-color-hover: #ffc107; + } \ No newline at end of file diff --git a/CSS/themes/filebrowser/filebrowser-base.css b/CSS/themes/filebrowser/filebrowser-base.css new file mode 100644 index 00000000..aeb5bef8 --- /dev/null +++ b/CSS/themes/filebrowser/filebrowser-base.css @@ -0,0 +1,304 @@ + +/* 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 DARK THEME */ +/* 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%; + width: 100%; + overflow: hidden; + } + body { + overflow-y: auto; + height: 100%; + background: var(--main-bg-color) + } +} + ::-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; + } +.message { + color: #FFF; +} +#login { + min-height: 100%; + height: auto; + background: var(--main-bg-color); +} +body { + color: #FFFFFF; + font-family: Open Sans Bold,Helvetica Neue,Helvetica,Arial,sans-serif; +} +#login input[type=password], #login input[type=text] { + color: white !important; + background-color: rgba(0,0,0,0.15) !important; + border: none; +} +#loading { +background: var(--main-bg-color); +} + +#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); +} +body{ + background: var(--main-bg-color); +} +nav { + background-color: rgba(0,0,0,.45); + height: 100%; + top: 60px; + width: 240px; +} +nav .action{ + color:rgba(255, 255, 255, 0.737); + font-size: 13px; + font-family: Open Sans Semibold,Helvetica Neue,Helvetica,Arial,sans-serif; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + padding-top: 0px; + padding-bottom: 0px; +} +nav .action:hover{ + background-color:rgba(255, 255, 255, 0.05); +} +nav>div{ + border-top: none; +} +header{ + background: var(--modal-bg-color); + 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); + color: #FFF; +} +.shell__prompt i { + color: var(--accent-color); +} +.action{ + color: #FFF; +} +#listing.list .item{ + background-color: rgba(0,0,0,.15); + color:rgb(238, 238, 238); + border: none; +} +#listing.list .item:hover{ + background-color:rgba(255, 255, 255, 0.08); + color:rgb(238, 238, 238); + border: none; + transition: .4s; +} +#listing.list .item.header{ + background-color: rgba(0,0,0,.45); + color:rgb(238, 238, 238); + border-bottom: none; + right: auto; +} +.material-icons, .prompt .file-list ul li:before{ + color: white; +} +.share__box__info { + background: var(--modal-bg-color); +} +.share__box__download { + background: var(--accent-color); + color: rgb(255, 255, 255); + border-bottom: 1px solid var(--accent-color); +} +svg { + fill: var(--accent-color) !important; +} +#listing.list .item div:first-of-type i { + color: var(--accent-color); +} +#listing .item i { + color: 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; +} +#listing h2{ + color: rgb(238, 238, 238); +} +#listing #multiple-selection { + background: var(--modal-bg-color); +} +#breadcrumbs span a{ + color: rgb(238, 238, 238); +} +#breadcrumbs { + border-bottom: 1px solid var(--accent-color); +} +#listing .item{ + background-color: rgba(0,0,0,.15); + color:rgb(238, 238, 238); + border: none; +} +.input { + background: #FFF; + color: #000; +} +#search #input { + background: #fff; + display: flex; + padding: 10px; +} +#search #result{ + background: var(--modal-bg-color); + color: rgb(238, 238, 238); +} +#search .boxes{ + background-color: rgba(0,0,0,.15); + padding: 15px; +} +#search .boxes h3{ + color: rgb(238, 238, 238); +} +#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); + height: 60px; + color: black; +} +#search.active i, #search.active input{ + color: rgba(255, 255, 255, 0.85); +} +#search #result>div>:first-child{ + margin-top: 10px; +} +.card{ + background-color: rgba(0,0,0,.15); +} +.card h3{ + color: rgb(238, 238, 238); +} +.card#share ul li a { + color: var(--accent-color); +} +select { + color: rgb(238, 238, 238); +} +input, textarea, select, button{ + color: rgb(0, 0, 0); +} +.collapsible>label *{ + color: rgb(238, 238, 238); +} +a{ + color: rgba(255, 255, 255, 0.85); +} +table th{ + color: rgba(255, 255, 255, 0.85); +} +.card.floating{ + background: var(--modal-bg-color); +} +#search #input { + background-color:rgba(255, 255, 255, 0.08); +} + +#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: rgb(255, 255, 255); +} +.dashboard #nav li.active { + border-color: var(--accent-color); +} +.link { + color: var(--accent-color); +} +@media (max-width: 736px){ +nav{ + background-color: black; +} +#dropdown.active{ + background-color: black; +} +} + +@media (min-width: 1024px){ + main{ + margin-left: 270px; + } +} +@media (max-width: 1024px){ + nav{ + width: 175px; + } +} + +/* Buttons */ +.button { + background: var(--button-color); + color: #FFF; +} +.button:hover { + background: var(--button-color-hover); +} +.button--flat.button--grey { + color: #fff; + margin-right: 5px; +} diff --git a/CSS/themes/filebrowser/hotline.css b/CSS/themes/filebrowser/hotline.css new file mode 100644 index 00000000..a207a9b8 --- /dev/null +++ b/CSS/themes/filebrowser/hotline.css @@ -0,0 +1,23 @@ + +/* 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 HOTLINE THEME */ +@import url(https://gilbn.github.io/theme.park/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); +} \ No newline at end of file diff --git a/CSS/themes/filebrowser/plex.css b/CSS/themes/filebrowser/plex.css new file mode 100644 index 00000000..567fd8f6 --- /dev/null +++ b/CSS/themes/filebrowser/plex.css @@ -0,0 +1,23 @@ + +/* 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 PLEX THEME */ +@import url(https://gilbn.github.io/theme.park/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; + } \ No newline at end of file