mirror of
https://github.com/gilbN/theme.park.git
synced 2024-07-15 00:57:32 +02:00
Added dark filebrowser theme
This commit is contained in:
gilbN
parent
2e83845650
commit
5eaa37dad2
225
CSS/themes/filebrowser_dark.css
Normal file
225
CSS/themes/filebrowser_dark.css
Normal file
@ -0,0 +1,225 @@
|
||||
|
||||
/* 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 */
|
||||
|
||||
/* scroller */
|
||||
::-webkit-scrollbar-corner {
|
||||
background-color: hsla(0,0%,100%,.08);
|
||||
}
|
||||
::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background: rgba(0, 0, 0, .25);
|
||||
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
-webkit-border-radius: 2px;
|
||||
border-radius: 2px;
|
||||
background-color: hsla(0,0%,100%,.08);
|
||||
}
|
||||
.message {
|
||||
color: #FFF;
|
||||
}
|
||||
#login {
|
||||
min-height: 100%;
|
||||
height: auto;
|
||||
background-color: #1f1f1f;
|
||||
}
|
||||
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-color: #1f1f1f;
|
||||
}
|
||||
|
||||
#loading .spinner * {
|
||||
background-color: #f4dbb0f2 !important;
|
||||
}
|
||||
button:hover, input[type=submit]:hover{
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
color: #FFF;
|
||||
}
|
||||
.button--flat:hover {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
html {
|
||||
min-height: 100%;
|
||||
height: auto;
|
||||
background-color: #1f1f1f;
|
||||
}
|
||||
body{
|
||||
background-color: #1f1f1f;
|
||||
}
|
||||
nav {
|
||||
background-color: rgba(0,0,0,.15);
|
||||
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-color: #1b1a1a;
|
||||
height: 60px;
|
||||
}
|
||||
header>div:first-child{
|
||||
height: 60px;
|
||||
}
|
||||
body{
|
||||
padding-top: 60px;
|
||||
}
|
||||
#search #input {
|
||||
background-color: #f5f5f5;
|
||||
display: flex;
|
||||
padding: 10px;
|
||||
}
|
||||
.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: #1b1a1a;
|
||||
color:rgb(238, 238, 238);
|
||||
border-bottom: none;
|
||||
right: auto;
|
||||
}
|
||||
.material-icons, .prompt .file-list ul li:before{
|
||||
color: #f4dbb0f2;
|
||||
}
|
||||
#listing .item[aria-selected=true]{
|
||||
background-color: rgba(255, 255, 255, 0.2) !important;
|
||||
}
|
||||
#listing h2{
|
||||
color: rgb(238, 238, 238);
|
||||
}
|
||||
#breadcrumbs span a{
|
||||
color: rgb(238, 238, 238);
|
||||
}
|
||||
#listing .item{
|
||||
background-color: rgba(0,0,0,.15);
|
||||
color:rgb(238, 238, 238);
|
||||
border: none;
|
||||
}
|
||||
#search #result{
|
||||
background-color: #1f1f1f;
|
||||
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.active #input{
|
||||
background-color: #2d2d2d;
|
||||
height: 60px;
|
||||
color: white;
|
||||
}
|
||||
#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);
|
||||
}
|
||||
select {
|
||||
color: rgb(238, 238, 238);
|
||||
}
|
||||
input, textarea, select, button{
|
||||
color: rgb(238, 238, 238);
|
||||
}
|
||||
.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-color: #1b1a1a;
|
||||
}
|
||||
#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);
|
||||
}
|
||||
@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;
|
||||
}
|
||||
}
|
||||
27
README.md
27
README.md
@ -182,7 +182,7 @@ Custom [Grafana](https://github.com/grafana/grafana) CSS for [Organizr](https://
|
||||
|
||||
#### The `graforg.css` theme is a dark theme that matches the Organizr dark theme.
|
||||
#### `grafplex.css`: If you want a regular Plex theme for your Grafana setup, use the **`grafplex.css`** theme instead.
|
||||
#### For panel integration on the Organizr homepage you can use `graforg-dashboard.css` if you use the Plex theme in Organizr.
|
||||
#### For panel integration on the Organizr homepage you can use `graforg-dashboard.css` if you use the Plex theme in Organizr.
|
||||
### Check out https://technicalramblings.com/blog/spice-up-your-homepage-part-ii/
|
||||
|
||||
### **TIP:**
|
||||
@ -350,9 +350,9 @@ Custom [Monitorr](https://github.com/Monitorr/Monitorr) CSS for [Organizr](https
|
||||
|
||||
|
||||
|
||||
#### The `monitorg.css` theme will mess with your Monitorr base theme. And it will hide the settings button. Go to /monitorr/settings.php for settings. It is created purely for use with "minimum" version of the index.php `https://domain.com/monitorr/index.min.php` for Organizr homepage integration.
|
||||
#### The `monitorg.css` theme will mess with your Monitorr base theme. And it will hide the settings button. Go to /monitorr/settings.php for settings. It is created purely for use with "minimum" version of the index.php `https://domain.com/monitorr/index.min.php` for Organizr homepage integration.
|
||||
**NOTE:**
|
||||
When viewing monitorr in Organizr iframe using `monitorg.css` it will follow the Organizr theme. When viewing it outside of Organizr iframe the background will be white ect. If you don't want this you can create two reverse proxies. One for monitorr organizr homepage integration and one for the monitorr dark/plex theme. And use subfilter on both instead of adding `@import "https://gilbn.github.io/theme.park/CSS/themes/monitorg.css";` in the monitorr custom css.
|
||||
When viewing monitorr in Organizr iframe using `monitorg.css` it will follow the Organizr theme. When viewing it outside of Organizr iframe the background will be white ect. If you don't want this you can create two reverse proxies. One for monitorr organizr homepage integration and one for the monitorr dark/plex theme. And use subfilter on both instead of adding `@import "https://gilbn.github.io/theme.park/CSS/themes/monitorg.css";` in the monitorr custom css.
|
||||
|
||||
#### For the dark theme use `monitorg-dark.css`
|
||||
#### For the Plex theme use `monitorg-plex.css`
|
||||
@ -378,6 +378,27 @@ And add this in custom HTML in Organizr:
|
||||
</div>
|
||||
```
|
||||
|
||||
***
|
||||
|
||||
# Filebrowser - Dark Theme
|
||||
|
||||
Custom [Filebrowser](https://github.com/filebrowser/filebrowser) CSS for consistent UI in [Organizr](https://github.com/causefx/Organizr).
|
||||
|
||||
|
||||
|
||||
Based on https://github.com/Archmonger/Blackberry-Themes/blob/master/Themes/Blackberry-Flat/bbf_filebrowser.css
|
||||
**https://github.com/Archmonger/Blackberry-Themes**
|
||||
|
||||
#### The css is named `filebrowser_dark.css`
|
||||
|
||||
|
||||
### Screenshots
|
||||
<details><summary>Expand</summary>
|
||||
<p>
|
||||
<img src="https://raw.githubusercontent.com/gilbN/theme.park/master/Screenshots/filebrowser/filebrowser2.png"></img>
|
||||
</p>
|
||||
</details>
|
||||
|
||||
***
|
||||
### Honourable mentions:
|
||||
|
||||
|
||||
BIN
Screenshots/filebrowser/filebrowser.png
Normal file
BIN
Screenshots/filebrowser/filebrowser.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 62 KiB |
BIN
Screenshots/filebrowser/filebrowser2.png
Normal file
BIN
Screenshots/filebrowser/filebrowser2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 69 KiB |
Loading…
Reference in New Issue
Block a user