1
0
mirror of https://github.com/gilbN/theme.park.git synced 2024-11-20 18:12:31 +01:00
This commit is contained in:
GilbN 2022-04-09 14:45:24 +00:00
commit 3e3908e668
2079 changed files with 73304 additions and 0 deletions

30
.github/CONTRIBUTING.md vendored Normal file
View File

@ -0,0 +1,30 @@
# Contributing to theme.park
- If you want to discuss changes, you can also bring it up in our Discord server
- PR's are done against the develop branch.
## New theme option
- The current variables in use can be found in any of the CSS files in `/css/theme-options/` and `/css/community-theme-options/`
- New community contributed theme options will be placed in the `Community Themes` category on our docs page.
- Community themes are not officially supported but as long as they follow the same variable structure as the other theme options it should look fine on all applications.
- When contributing a new option, you must have example screeenshots of the theme being used. Preferrably at least 10 with the same image size. See examples on our [docs page](https://docs.theme-park.dev/community-themes/).
### Specials
Remember to also to change the variables in the the `Specials` section even if you dont use the application the variable refers to.
- `--arr-queue-color` Please refrain from using an orange/yellowish color on the variable as its confusing from a UX standpoint as the "arrs" use that color range when something is wrong in the queue.
## New application theme
- When creating a new theme for an application please test multiple theme options to make sure it looks good on all options not just your favorite.
- The PR must contain a screenshot of all the different theme options. Optionally you can also include screenshots with the community theme options.
## Bug fixes
- When submitting bugfixes please show a before and after screenshot of the fix, and a description of what the fix does.

3
.github/FUNDING.yml vendored Normal file
View File

@ -0,0 +1,3 @@
# These are supported funding model platforms
github: GilbN

49
.github/ISSUE_TEMPLATE/bug_report.md vendored Normal file
View File

@ -0,0 +1,49 @@
---
name: Bug report
about: Create a report to help us improve
title: ''
labels: 'bug'
assignees: ''
---
**Describe the bug**
A clear and concise description of what the bug is.
**Theme Install Method** (Don't skip)
- Docker run / Compose Config
- Webserver subfilter Config
- Stylus Config
**Application Info** (Don't skip)
- Version
- Branch
- Container
**To Reproduce**
Steps to reproduce the behavior:
1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error
**Expected behavior**
A clear and concise description of what you expected to happen.
**Screenshots**
If applicable, add screenshots to help explain your problem.
**Desktop (If applicable) (please complete the following information):**
- OS: [e.g. iOS]
- Browser [e.g. chrome, safari]
- Version [e.g. 22]
**Smartphone (If applicable) (please complete the following information):**
- Device: [e.g. iPhone6]
- OS: [e.g. iOS8.1]
- Browser [e.g. stock browser, safari]
- Version [e.g. 22]
**Additional context**
Add any other context about the problem here.

35
.github/pull_request_template.md vendored Normal file
View File

@ -0,0 +1,35 @@
<!--- Provide a general summary of your changes in the Title above -->
[themeparkurl]: https://theme-park.dev
[![theme-park.dev](https://raw.githubusercontent.com/GilbN/theme.park/master/banners/tp_banner.png)][themeparkurl]
<!--- Before submitting a pull request please check the following -->
<!--- If this is a fix for a typo (in code, documentation, or the README) please file an issue and let us sort it out. We do not need a PR -->
<!--- Ask yourself if this modification is something the whole userbase will benefit from, if this is a specific change for corner case functionality/styling please look at making an addon instead. https://docs.theme-park.dev/themes/addons/sonarr/ -->
<!--- That if the PR is addressing an existing issue include, closes #<issue number> , in the body of the PR commit message -->
<!--- You have included links to any files / patches etc your PR may be using in the body of the PR commit message -->
------------------------------
- [ ] I have read the [contributing](https://github.com/GilbN/theme.park/blob/master/.github/CONTRIBUTING.md) guideline and understand that I have made the correct modifications
------------------------------
<!--- We welcome all PRs though this doesnt guarantee it will be accepted. -->
## Description:
<!--- Describe your changes in detail -->
<!--- Add before and after screenshots of your changes -->
## Benefits of this PR and context:
<!--- Please explain why we should accept this PR. If this fixes an outstanding bug, please reference the issue # -->
## How Has This Been Tested?
<!--- Please describe in detail how you tested your changes. -->
<!--- Include details of your testing environment, and the tests you ran to -->
<!--- see how your change affects other areas of the code, etc. -->
## Source / References:
<!--- Please include any forum posts/github links relevant to the PR -->

25
.github/release.yml vendored Normal file
View File

@ -0,0 +1,25 @@
# release.yml
changelog:
exclude:
labels:
- ignore-for-release
authors:
- github-actions
categories:
- title: Breaking Changes 🛠
labels:
- Semver-Major
- breaking-change
- title: Exciting New Features 🎉
labels:
- Semver-Minor
- enhancement
- added
- title: Fixes
labels:
- fix
- fixed
- title: Other Changes
labels:
- "*"

71
.github/workflows/auto-build.yml vendored Normal file
View File

@ -0,0 +1,71 @@
name: autobuildallthemods
on:
push:
branches:
- master
paths:
- 'docker-mods/**'
jobs:
push_to_ghcr_io:
runs-on: ubuntu-latest
steps:
- name: checkout
uses: actions/checkout@v2
with:
fetch-depth: 0
- name: get changed files
id: getfile
run: |
echo "::set-output name=files::$(git diff-tree --no-commit-id --name-only -r ${{ github.sha }} docker-mods/| xargs)"
- name: Login to GitHub Container Registry
uses: docker/login-action@v1
with:
registry: ghcr.io
username: ${{ github.repository_owner }}
password: ${{ secrets.GH_PAT }}
- name: find correct directory then build&push
run: |
for i in ${{ steps.getfile.outputs.files }}
do
directory="$( echo $i | cut -d'/' -f2 -s )"
if [ -z "$directory" ]; then
continue # Skip root dir
elif [ "$i" == *.md ]; then
continue # Skip markdown files
elif [ "$i" == *.yml ]; then
continue # Skip YAML files
fi
docker build docker-mods/$directory --tag ghcr.io/gilbn/theme.park:$directory
docker push ghcr.io/gilbn/theme.park:$directory
done
push_to_dockerhub:
runs-on: ubuntu-latest
steps:
- name: checkout
uses: actions/checkout@v2
with:
fetch-depth: 0
- name: get changed files
id: getfile
run: |
echo "::set-output name=files::$(git diff-tree --no-commit-id --name-only -r ${{ github.sha }} docker-mods/| xargs)"
- name: Login to Docker Hub
uses: docker/login-action@v1
with:
username: ${{ secrets.DH_USER }}
password: ${{ secrets.DOCKERHUB_TOKEN }}
- name: find correct directory then build&push
run: |
for i in ${{ steps.getfile.outputs.files }}
do
directory="$( echo $i | cut -d'/' -f2 -s )"
if [ -z "$directory" ]; then
continue # Skip root dir
elif [ "$i" == *.md ]; then
continue # Skip markdown files
elif [ "$i" == *.yml ]; then
continue # Skip YAML files
fi
docker build docker-mods/$directory --tag gilbn/theme.park:$directory
docker push gilbn/theme.park:$directory
done

148
.github/workflows/docker-build.yml vendored Normal file
View File

@ -0,0 +1,148 @@
name: docker build
on:
release:
types:
- released
workflow_dispatch:
inputs:
branch:
description: 'Select branch'
required: true
type: choice
options:
- master
- develop
- testing
tag:
description: 'Add a tag'
push:
branches:
- develop
- testing
paths-ignore:
- '.github/**'
jobs:
build-and-push-it-to-the-limit:
runs-on: ubuntu-latest
strategy:
matrix:
architecture: [linux-arm-v7,linux-arm64,linux-amd64]
steps:
- name: checkout
uses: actions/checkout@v2
with:
fetch-depth: 0
- name: Prepare
id: prep
run: |
ARCHITECTURE=${{ matrix.architecture }}
echo ::set-output name=created::$(date -u +'%Y-%m-%dT%H:%M:%SZ')
echo ::set-output name=title::${GITHUB_REPOSITORY,,}:${{ github.ref_name }}
echo ::set-output name=revision::${GITHUB_SHA}
echo ::set-output name=source::${GITHUB_SERVER_URL}/${GITHUB_REPOSITORY,,}/tree/${{ github.ref_name }}
echo ::set-output name=vendor::${{ github.repository_owner }}
echo ::set-output name=url::${GITHUB_SERVER_URL}/${GITHUB_REPOSITORY,,}/blob/master/README.md
echo ::set-output name=VERSION::${{ github.event.release.tag_name }}
echo ::set-output name=platform::${ARCHITECTURE//-/\/}
echo ::set-output name=cache::${GITHUB_REPOSITORY,,}:${{ github.ref_name }}-cache-${{ matrix.architecture }}
echo ::set-output name=tag::${GITHUB_REPOSITORY,,}:${{ github.ref_name }}-${GITHUB_SHA:0:7}-${GITHUB_RUN_NUMBER}-${{ matrix.architecture }}
echo ::set-output name=release::${{ github.event.release.target_commitish }}
- name: Set up QEMU
uses: docker/setup-qemu-action@v1
- name: Set up Docker Buildx
id: buildx
uses: docker/setup-buildx-action@v1
- name: Login to GitHub Container Registry
uses: docker/login-action@v1
with:
registry: ghcr.io
username: ${{ github.repository_owner }}
password: ${{ secrets.GH_PAT }}
- name: Login to Docker Hub
uses: docker/login-action@v1
with:
username: ${{ secrets.DH_USER }}
password: ${{ secrets.DOCKERHUB_TOKEN }}
- name: build&push
uses: docker/build-push-action@v2
with:
push: ${{ github.event_name != 'pull_request' }}
platforms: ${{ steps.prep.outputs.platform }}
file: ./${{ matrix.architecture }}.Dockerfile
cache-from: docker.io/${{ steps.prep.outputs.cache }}
cache-to: docker.io/${{ steps.prep.outputs.cache }}
tags: |
docker.io/${{ steps.prep.outputs.tag }}
ghcr.io/${{ steps.prep.outputs.tag }}
labels: |
org.opencontainers.image.created=${{ steps.prep.outputs.created }}
org.opencontainers.image.title=${{ steps.prep.outputs.title }}
org.opencontainers.image.revision=${{ steps.prep.outputs.revision }}
org.opencontainers.image.source=${{ steps.prep.outputs.source }}
org.opencontainers.image.vendor=${{ steps.prep.outputs.vendor }}
org.opencontainers.image.url=${{ steps.prep.outputs.url }}
org.opencontainers.image.version=${{ steps.prep.outputs.VERSION }}
build-args: |
TP_RELEASE=${{ steps.prep.outputs.VERSION }}
BUILD_DATE=${{ steps.date_time.outputs.created }}
BUILD_ARCHITECTURE=${{ matrix.architecture }}
publish:
runs-on: ubuntu-latest
strategy:
matrix:
registry: [docker.io, ghcr.io]
needs: [build-and-push-it-to-the-limit]
steps:
- name: Checkout
uses: actions/checkout@v2
- name: Login to DockerHub
if: matrix.registry == 'docker.io'
uses: docker/login-action@v1
with:
registry: docker.io
username: ${{ secrets.DH_USER }}
password: ${{ secrets.DOCKERHUB_TOKEN }}
- name: Login to GitHub Container Registry
if: matrix.registry == 'ghcr.io'
uses: docker/login-action@v1
with:
registry: ghcr.io
username: ${{ github.repository_owner }}
password: ${{ secrets.GH_PAT }}
- name: Create manifests
env:
DOCKER_CLI_EXPERIMENTAL: enabled
run: |
IMAGE=${{ matrix.registry }}/${GITHUB_REPOSITORY,,}
TAG=${{ github.ref_name }}
SOURCE=${IMAGE}:${TAG}-${GITHUB_SHA:0:7}-${GITHUB_RUN_NUMBER}
VERSION=${{ steps.prep.outputs.VERSION }}
[[ -f linux-amd64.Dockerfile ]] && AMD64=${SOURCE}-linux-amd64
[[ -f linux-arm64.Dockerfile ]] && ARM64=${SOURCE}-linux-arm64
[[ -f linux-arm-v7.Dockerfile ]] && ARMV7=${SOURCE}-linux-arm-v7
docker manifest create ${IMAGE}:${TAG} ${AMD64} ${ARM64} ${ARMV7}
docker manifest push ${IMAGE}:${TAG}
docker manifest create ${IMAGE}:${TAG}-${GITHUB_SHA:0:7} ${AMD64} ${ARM64} ${ARMV7}
docker manifest push ${IMAGE}:${TAG}-${GITHUB_SHA:0:7}
- name: Latest manifest
if: ${{ github.event.release.target_commitish == 'master' }}
env:
DOCKER_CLI_EXPERIMENTAL: enabled
run: |
IMAGE=${{ matrix.registry }}/${GITHUB_REPOSITORY,,}
TAG=${{ github.ref_name }}
SOURCE=${IMAGE}:${TAG}-${GITHUB_SHA:0:7}-${GITHUB_RUN_NUMBER}
[[ -f linux-amd64.Dockerfile ]] && AMD64=${SOURCE}-linux-amd64
[[ -f linux-arm64.Dockerfile ]] && ARM64=${SOURCE}-linux-arm64
[[ -f linux-arm-v7.Dockerfile ]] && ARMV7=${SOURCE}-linux-arm-v7
docker manifest create ${IMAGE}:latest ${AMD64} ${ARM64} ${ARMV7}
docker manifest push ${IMAGE}:latest

88
.github/workflows/minify-and-deploy.yml vendored Normal file
View File

@ -0,0 +1,88 @@
name: Minify CSS and deploy to live branch
on:
push:
branches:
- master
- develop
- testing
paths-ignore:
- 'docker-mods/**'
- '.vscode/**'
- '.github/**'
workflow_dispatch:
inputs:
branch:
description: 'Select branch'
required: true
type: choice
options:
- master
- develop
- testing
jobs:
deploy:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
with:
fetch-depth: 0
- name: Wrong domain check
run: |
echo "$(git diff-tree --no-commit-id --name-only -r ${{ github.sha }})"
if git grep -q -E ${{ secrets.DOMAIN }} -- *.css; then
echo "Game over man!"
exit 1
fi
- name: Set up Python ${{ matrix.python-version }}
uses: actions/setup-python@v2
- name: Run themes.py
run: |
python themes.py
- name: Minify CSS
if: ${{ github.ref == 'refs/heads/master' }}
run: |
sudo npm install -g minify@7.2.2
sudo apt-get update
sudo apt-get -y install moreutils
minify_file(){
directory=$1
basename=$(basename $directory);
extension="${basename##*.}"
output="${directory%/*}/"
filename="${basename%.*}"
output_path="${output}${filename}.${extension}"
minify ${directory} | sponge ${output_path}
echo "Minified ${directory} > ${output_path}"
}
find ./css -type f -iname *base.css | while read fname
do
if [[ "$fname" != *"min."* ]]; then
minify_file $fname
fi
done
- name: Deploy
uses: peaceiris/actions-gh-pages@v3
if: ${{ github.ref == 'refs/heads/master' || github.event.inputs.branch == 'master' }}
with:
publish_dir: ./
publish_branch: live
github_token: ${{ secrets.GITHUB_TOKEN }}
exclude_assets: ''
- name: Deploy Develop
uses: peaceiris/actions-gh-pages@v3
if: ${{ github.ref == 'refs/heads/develop' || github.event.inputs.branch == 'develop' }}
with:
publish_dir: ./
publish_branch: live_develop
github_token: ${{ secrets.GITHUB_TOKEN }}
exclude_assets: ''
- name: Deploy Testing
uses: peaceiris/actions-gh-pages@v3
if: ${{ github.ref == 'refs/heads/testing' || github.event.inputs.branch == 'testing' }}
with:
publish_dir: ./
publish_branch: live_testing
github_token: ${{ secrets.GITHUB_TOKEN }}
exclude_assets: ''

1
.gitignore vendored Normal file
View File

@ -0,0 +1 @@
.vscode/*

1
.nojekyll Normal file
View File

@ -0,0 +1 @@

1
CNAME Normal file
View File

@ -0,0 +1 @@
theme-park.dev

128
CODE_OF_CONDUCT.md Normal file
View File

@ -0,0 +1,128 @@
# Contributor Covenant Code of Conduct
## Our Pledge
We as members, contributors, and leaders pledge to make participation in our
community a harassment-free experience for everyone, regardless of age, body
size, visible or invisible disability, ethnicity, sex characteristics, gender
identity and expression, level of experience, education, socio-economic status,
nationality, personal appearance, race, religion, or sexual identity
and orientation.
We pledge to act and interact in ways that contribute to an open, welcoming,
diverse, inclusive, and healthy community.
## Our Standards
Examples of behavior that contributes to a positive environment for our
community include:
* Demonstrating empathy and kindness toward other people
* Being respectful of differing opinions, viewpoints, and experiences
* Giving and gracefully accepting constructive feedback
* Accepting responsibility and apologizing to those affected by our mistakes,
and learning from the experience
* Focusing on what is best not just for us as individuals, but for the
overall community
Examples of unacceptable behavior include:
* The use of sexualized language or imagery, and sexual attention or
advances of any kind
* Trolling, insulting or derogatory comments, and personal or political attacks
* Public or private harassment
* Publishing others' private information, such as a physical or email
address, without their explicit permission
* Other conduct which could reasonably be considered inappropriate in a
professional setting
## Enforcement Responsibilities
Community leaders are responsible for clarifying and enforcing our standards of
acceptable behavior and will take appropriate and fair corrective action in
response to any behavior that they deem inappropriate, threatening, offensive,
or harmful.
Community leaders have the right and responsibility to remove, edit, or reject
comments, commits, code, wiki edits, issues, and other contributions that are
not aligned to this Code of Conduct, and will communicate reasons for moderation
decisions when appropriate.
## Scope
This Code of Conduct applies within all community spaces, and also applies when
an individual is officially representing the community in public spaces.
Examples of representing our community include using an official e-mail address,
posting via an official social media account, or acting as an appointed
representative at an online or offline event.
## Enforcement
Instances of abusive, harassing, or otherwise unacceptable behavior may be
reported to the community leaders responsible for enforcement at
contact@theme-park.dev.
All complaints will be reviewed and investigated promptly and fairly.
All community leaders are obligated to respect the privacy and security of the
reporter of any incident.
## Enforcement Guidelines
Community leaders will follow these Community Impact Guidelines in determining
the consequences for any action they deem in violation of this Code of Conduct:
### 1. Correction
**Community Impact**: Use of inappropriate language or other behavior deemed
unprofessional or unwelcome in the community.
**Consequence**: A private, written warning from community leaders, providing
clarity around the nature of the violation and an explanation of why the
behavior was inappropriate. A public apology may be requested.
### 2. Warning
**Community Impact**: A violation through a single incident or series
of actions.
**Consequence**: A warning with consequences for continued behavior. No
interaction with the people involved, including unsolicited interaction with
those enforcing the Code of Conduct, for a specified period of time. This
includes avoiding interactions in community spaces as well as external channels
like social media. Violating these terms may lead to a temporary or
permanent ban.
### 3. Temporary Ban
**Community Impact**: A serious violation of community standards, including
sustained inappropriate behavior.
**Consequence**: A temporary ban from any sort of interaction or public
communication with the community for a specified period of time. No public or
private interaction with the people involved, including unsolicited interaction
with those enforcing the Code of Conduct, is allowed during this period.
Violating these terms may lead to a permanent ban.
### 4. Permanent Ban
**Community Impact**: Demonstrating a pattern of violation of community
standards, including sustained inappropriate behavior, harassment of an
individual, or aggression toward or disparagement of classes of individuals.
**Consequence**: A permanent ban from any sort of public interaction within
the community.
## Attribution
This Code of Conduct is adapted from the [Contributor Covenant][homepage],
version 2.0, available at
https://www.contributor-covenant.org/version/2/0/code_of_conduct.html.
Community Impact Guidelines were inspired by [Mozilla's code of conduct
enforcement ladder](https://github.com/mozilla/diversity).
[homepage]: https://www.contributor-covenant.org
For answers to common questions about this code of conduct, see the FAQ at
https://www.contributor-covenant.org/faq. Translations are available at
https://www.contributor-covenant.org/translations.

22
LICENSE Normal file
View File

@ -0,0 +1,22 @@
MIT License
Copyright (c) 2019 GilbN
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

298
README.md Normal file
View File

@ -0,0 +1,298 @@
<img src="banners/tp_banner.png"/>
[![Docs](https://img.shields.io/static/v1.svg?color=009688&labelColor=555555&logoColor=ffffff&style=for-the-badge&label=theme-park.dev&message=Docs)](https://docs.theme-park.dev "Documentation for all the themes in this repository.")
[![Discord](https://img.shields.io/discord/591352397830553601.svg?color=009688&labelColor=555555&logoColor=ffffff&style=for-the-badge&label=Discord&logo=discord)](https://discord.gg/HM5uUKU "Discord for theme installation support")
[![GitHub Stars](https://img.shields.io/github/stars/gilbn/theme.park.svg?color=009688&labelColor=555555&logoColor=ffffff&style=for-the-badge&logo=github)](https://github.com/GilbN/theme.park)
[![Support](https://img.shields.io/static/v1.svg?color=009688&labelColor=555555&logoColor=ffffff&style=for-the-badge&label=&message=sponsor&logo=data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABN0lEQVQ4T2NkoBAwIuv/HxDggMT/wLhhwwUQ/39AgAEDA4MATI5xw4YDcDaaAf+R+AcZN2wAG/g/IACkwR7JALjFYAbU5v0k+sYR5BLG/wEBCQwMDAUMDAz6DM3NDAxz5zIwPHhAjFkXGRgYJoAMaGBgYKgH6wgPZ2DYt4+B4fVrYgwAqWlENYBYbQwMDO8+sjH8+cvUSbYB6w9Kv/vwlW0aWYE4Z5MCAwfrf7fYnxN3wwwAxTEorvHGBMjZBy+Ivvv6jSXi20+OU+kMnR/RExIoQEGxIo8eHM/fcDA8fc114/J9/jVJv/prsSYkaJqYwMDAEIBsCMjme894bl6+w7s76e/EXGTDUVwAk0CJWgYGBliAIduM0wVIhoCS8X7kAMMWy1hdAPUKOGCXbJdnhQUYSQYQm6YAtdh8zhSGm1AAAAAASUVORK5CYII=)](https://github.com/sponsors/GilbN "Donate!")
[![GitHub](https://img.shields.io/github/license/gilbn/theme.park.svg?color=009688&labelColor=555555&logoColor=ffffff&style=for-the-badge)](https://github.com/gilbN/theme.park/blob/master/LICENSE)
[![GitHub Package Repository](https://img.shields.io/static/v1.svg?color=009688&labelColor=555555&logoColor=ffffff&style=for-the-badge&label=theme-park.dev&message=Packages&logo=github)](https://github.com/users/GilbN/packages/container/package/theme.park)
[![Docker Pulls](https://img.shields.io/docker/pulls/gilbn/theme.park.svg?color=009688&labelColor=555555&logoColor=ffffff&style=for-the-badge&label=pulls&logo=docker)](https://hub.docker.com/r/gilbn/theme.park)
[![Blog](https://img.shields.io/static/v1.svg?color=009688&labelColor=555555&logoColor=ffffff&style=for-the-badge&label=technicalramblings&message=Blog)](https://technicalramblings.com/ "A blog with different guides :)")
<p align="center">A collection of themes/skins for your favorite apps!</p>
<div align="center">
<a href="https://docs.theme-park.dev/theme-options/aquamarine/" rel="noopener"><img src="https://docs.theme-park.dev/theme-options/screenshots/ombi_aquamarine_small.png" alt="Screen Shot 1" width="49.15%" /></a>
<a href="https://docs.theme-park.dev/theme-options/hotpink/" rel="noopener"><img src="https://docs.theme-park.dev/theme-options/screenshots/radarr_hotpink_small.png" alt="Screen Shot 2" width="49.15%" /></a>
<a href="https://docs.theme-park.dev/theme-options/overseerr/" rel="noopener"><img src="https://docs.theme-park.dev/theme-options/screenshots/petio_overseerr_small.png" alt="Screen Shot 3" width="49.15%" /></a>
<a href="https://docs.theme-park.dev/theme-options/dracula/" rel="noopener"><img src="https://docs.theme-park.dev/theme-options/screenshots/bazarr_dracula_small.png" alt="Screen Shot 4" width="49.15%" /></a>
</div>
<h1><a href="https://docs.theme-park.dev/themes/">Themes</a></h1>
<p align="center">Click on the banners for screenshots.</p>
<a href="https://docs.theme-park.dev/theme-options/dracula"><img src="https://docs.theme-park.dev/theme-options/dracula_banner_small.png" alt="Dracula" width="49.49%"/></a>
<a href="https://docs.theme-park.dev/theme-options/overseerr"><img src="https://docs.theme-park.dev/theme-options/overseerr_banner_small.png" alt="Overseerr" width="49.49%"/></a>
<a href="https://docs.theme-park.dev/theme-options/organizr"><img src="https://docs.theme-park.dev/theme-options/organizr_banner_small.png" alt="Organizr" width="49.49%"/></a>
<a href="https://docs.theme-park.dev/theme-options/aquamarine"><img src="https://docs.theme-park.dev/theme-options/aquamarine_banner_small.png" alt="Aquamarine" width="49.49%"/></a>
<a href="https://docs.theme-park.dev/theme-options/hotline"><img src="https://docs.theme-park.dev/theme-options/hotline_banner_small.png" alt="Hotline" width="49.49%"/></a>
<a href="https://docs.theme-park.dev/theme-options/hotpink"><img src="https://docs.theme-park.dev/theme-options/hotpink_banner_small.png" alt="Hotpink" width="49.49%"/></a>
<a href="https://docs.theme-park.dev/theme-options/space-gray"><img src="https://docs.theme-park.dev/theme-options/space gray_banner_small.png" alt="Space-Gray" width="49.49%"/></a>
<a href="https://docs.theme-park.dev/theme-options/dark"><img src="https://docs.theme-park.dev/theme-options/dark_banner_small.png" alt="Dark" width="49.49%"/></a>
<a href="https://docs.theme-park.dev/theme-options/plex"><img src="https://docs.theme-park.dev/theme-options/plex_banner_small.png" alt="Plex" width="49.49%"/></a>
<a href="https://docs.theme-park.dev/theme-options/nord"><img src="https://docs.theme-park.dev/theme-options/nord_banner_small.png" alt="Nord" width="49.49%"/></a>
<h2><a href="https://docs.theme-park.dev/setup">Installation</a></h2>
<h2><a href="https://docs.theme-park.dev/themes/addons">Addons</a></h2>
<h2><a href="https://docs.theme-park.dev/community-themes/">Community Themes</a></h2>
<h2><a href="https://docs.theme-park.dev/custom/">Adding your own theme-options</a></h2>
<p align="center">Current themes in the repo</p>
<div align="center">
<table cellspacing="10" cellpadding="10">
<tbody>
<tr>
<td>
<p><a href="https://docs.theme-park.dev/themes/sonarr"><img src="https://docs.theme-park.dev/site_assets/sonarr/logo.png" alt="" width="48" height="48" /></a></p>
<p><a href="https://docs.theme-park.dev/themes/sonarr">Sonarr</a></p>
</td>
<td>
<p><a href="https://docs.theme-park.dev/themes/radarr"><img src="https://docs.theme-park.dev/site_assets/radarr/logo.png" width="48" height="48" /></a></p>
<p><a href="https://docs.theme-park.dev/themes/radarr">Radarr</a></p>
</td>
<td>
<p><a href="https://docs.theme-park.dev/themes/lidarr"><img src="https://docs.theme-park.dev/site_assets/lidarr/logo.png" width="48" height="48" /></a></p>
<p><a href="https://docs.theme-park.dev/themes/lidarr">Lidarr</a></p>
</td>
<td>
<p><a href="https://docs.theme-park.dev/themes/readarr"><img src="https://docs.theme-park.dev/site_assets/readarr/logo.png" alt="" width="48" height="48" /></a></p>
<p><a href="https://docs.theme-park.dev/themes/readarr">Readarr</a></p>
</td>
<td>
<p><a href="https://docs.theme-park.dev/themes/prowlarr"><img src="https://docs.theme-park.dev/site_assets/prowlarr/logo.png" alt="" width="48" height="48" /></a></p>
<p><a href="https://docs.theme-park.dev/themes/prowlarr">Prowlarr</a></p>
</td>
<td>
<p><a href="https://docs.theme-park.dev/themes/bazarr"><img src="https://docs.theme-park.dev/site_assets/bazarr/logo.png" alt="" width="48" height="48" /></a></p>
<p><a href="https://docs.theme-park.dev/themes/bazarr">Bazarr</a></p>
</td>
<td>
<p><a href="https://docs.theme-park.dev/themes/plex"><img src="https://docs.theme-park.dev/site_assets/plex/logo.png" alt="" width="48" height="48" /></a></p>
<p><a href="https://docs.theme-park.dev/themes/plex">Plex</a></p>
</td>
</tr>
<tr>
<td>
<p><a href="https://docs.theme-park.dev/themes/jellyfin"><img src="https://docs.theme-park.dev/site_assets/jellyfin/logo.png" alt="" width="48" height="48" /></a></p>
<p><a href="https://docs.theme-park.dev/themes/jellyfin">Jellyfin</a></p>
</td>
<td>
<p><a href="https://docs.theme-park.dev/themes/emby"><img src="https://docs.theme-park.dev/site_assets/emby/logo.png" alt="" width="48" height="48" /></a></p>
<p><a href="https://docs.theme-park.dev/themes/emby">Emby</a></p>
</td>
<td>
<p><a href="https://docs.theme-park.dev/themes/ombi"><img src="https://docs.theme-park.dev/site_assets/ombi/logo.png" alt="" width="48" height="48" /></a></p>
<p><a href="https://docs.theme-park.dev/themes/ombi">Ombi</a></p>
</td>
<td>
<p><a href="https://docs.theme-park.dev/themes/tautulli"><img src="https://docs.theme-park.dev/site_assets/tautulli/logo.png" alt="" width="48" height="45" /></a></p>
<p><a href="https://docs.theme-park.dev/themes/tautulli">Tautulli</a></p>
</td>
<td>
<p><a href="https://docs.theme-park.dev/themes/organizr"><img src="https://docs.theme-park.dev/site_assets/organizr/logo.png" alt="" width="48" height="48" /></a></p>
<p><a href="https://docs.theme-park.dev/themes/organizr">Organizr</a></p>
</td>
<td>
<p><a href="https://docs.theme-park.dev/themes/overseerr"><img src="https://docs.theme-park.dev/site_assets/overseerr/logo.png" alt="" width="48" height="48" /></a></p>
<p><a href="https://docs.theme-park.dev/themes/overseerr">Overseerr</a></p>
</td>
<td>
<p><a href="https://docs.theme-park.dev/themes/deluge"><img src="https://docs.theme-park.dev/site_assets/deluge/logo.png" alt="" width="48" height="48" /></a></p>
<p><a href="https://docs.theme-park.dev/themes/deluge">Deluge</a></p>
</td>
</tr>
<tr>
<td>
<p><a href="https://docs.theme-park.dev/themes/qbittorrent"><img src="https://docs.theme-park.dev/site_assets/qbittorrent/logo.png" alt="" width="48" height="48" /></a></p>
<p><a href="https://docs.theme-park.dev/themes/qbittorrent">qBittorrent</a></p>
</td>
<td>
<p><a href="https://docs.theme-park.dev/themes/rutorrent"><img src="https://docs.theme-park.dev/site_assets/rutorrent/logo.png" alt="" width="48" height="48" /></a></p>
<p><a href="https://docs.theme-park.dev/themes/rutorrent">ruTorrent</a></p>
</td>
<td>
<p><a href="https://docs.theme-park.dev/themes/transmission"><img src="https://docs.theme-park.dev/site_assets/transmission/logo.png" alt="" width="48" height="48" /></a></p>
<p><a href="https://docs.theme-park.dev/themes/transmission">Transmission</a></p>
</td>
<td>
<p><a href="https://docs.theme-park.dev/themes/sabnzbd"><img src="https://docs.theme-park.dev/site_assets/sabnzbd/logo.png" alt="" width="48" height="48" /></a></p>
<p><a href="https://docs.theme-park.dev/themes/sabnzbd">SABnzbd</a></p>
</td>
<td>
<p><a href="https://docs.theme-park.dev/themes/nzbget"><img src="https://docs.theme-park.dev/site_assets/nzbget/logo.png" alt="" width="48" height="48" /></a></p>
<p><a href="https://docs.theme-park.dev/themes/nzbget">NZBGet</a></p>
</td>
<td>
<p><a href="https://docs.theme-park.dev/themes/nzbhydra2"><img src="https://docs.theme-park.dev/site_assets/nzbhydra2/logo.png" alt="" width="48" height="48" /></a></p>
<p><a href="https://docs.theme-park.dev/themes/nzbhydra2">NZBHydra 2</a></p>
</td>
<td>
<p><a href="https://docs.theme-park.dev/themes/jackett"><img src="https://docs.theme-park.dev/site_assets/jackett/logo.png" alt="" width="48" height="48" /></a></p>
<p><a href="https://docs.theme-park.dev/themes/jackett">Jackett</a></p>
</td>
</tr>
<tr>
<td>
<p><a href="https://docs.theme-park.dev/themes/netdata"><img src="https://docs.theme-park.dev/site_assets/netdata/logo.png" alt="" width="48" height="48" /></a></p>
<p><a href="https://docs.theme-park.dev/themes/netdata">Netdata</a></p>
</td>
<td>
<p><a href="https://docs.theme-park.dev/themes/portainer"><img src="https://docs.theme-park.dev/site_assets/portainer/logo.png" alt="" width="48" height="48" /></a></p>
<p><a href="https://docs.theme-park.dev/themes/portainer">Portainer</a></p>
</td>
<td>
<p><a href="https://docs.theme-park.dev/themes/pihole"><img src="https://docs.theme-park.dev/site_assets/pihole/logo.png" alt="" width="48" height="48" /></a></p>
<p><a href="https://docs.theme-park.dev/themes/pihole">Pi-hole</a></p>
</td>
<td>
<p><a href="https://docs.theme-park.dev/themes/guacamole"><img src="https://docs.theme-park.dev/site_assets/guacamole/logo.png" alt="" width="48" height="48" /></a></p>
<p><a href="https://docs.theme-park.dev/themes/guacamole">Guacamole</a></p>
</td>
</td>
<td>
<p><a href="https://docs.theme-park.dev/themes/dozzle"><img src="https://docs.theme-park.dev/site_assets/dozzle/logo.png" alt="" width="48" height="48" /></a></p>
<p><a href="https://docs.theme-park.dev/themes/dozzle">Dozzle</a></p>
</td>
<td>
<p><a href="https://docs.theme-park.dev/themes/calibreweb"><img src="https://docs.theme-park.dev/site_assets/calibreweb/logo.png" alt="" width="48" height="48" /></a></p>
<p><a href="https://docs.theme-park.dev/themes/calibreweb">Calibre-web</a></p>
</td>
<td>
<p><a href="https://docs.theme-park.dev/themes/xbackbone"><img src="https://docs.theme-park.dev/site_assets/xbackbone/logo.png" alt="" width="48" height="48" /></a></p>
<p><a href="https://docs.theme-park.dev/themes/xbackbone">Xbackbone</a></p>
</td>
</tr>
<tr>
<td>
<p><a href="https://docs.theme-park.dev/themes/filebrowser"><img src="https://docs.theme-park.dev/site_assets/filebrowser/logo.png" alt="" width="48" height="48" /></a></p>
<p><a href="https://docs.theme-park.dev/themes/filebrowser">Filebrowser</a></p>
<td>
<p><a href="https://docs.theme-park.dev/themes/librespeed"><img src="https://docs.theme-park.dev/site_assets/librespeed/logo.png" alt="" width="48" height="48" /></a></p>
<p><a href="https://docs.theme-park.dev/themes/librespeed">librespeed</a></p>
</td>
<td>
<p><a href="https://docs.theme-park.dev/themes/lazylibrarian"><img src="https://docs.theme-park.dev/site_assets/lazylibrarian/logo.png" alt="" width="48" height="48" /></a></p>
<p><a href="https://docs.theme-park.dev/themes/lazylibrarian">Lazylibrarian</a></p>
</td>
<td>
<p><a href="https://docs.theme-park.dev/themes/adguard"><img src="https://docs.theme-park.dev/site_assets/adguard/logo.png" alt="" width="48" height="48" /></a></p>
<p><a href="https://docs.theme-park.dev/themes/adguard">Adguard</a></p>
</td>
<td>
<p><a href="https://docs.theme-park.dev/themes/gaps"><img src="https://docs.theme-park.dev/site_assets/gaps/logo.png" alt="" width="48" height="48" /></a></p>
<p><a href="https://docs.theme-park.dev/themes/gaps">Gaps</a></p>
</td>
<td>
<p><a href="https://docs.theme-park.dev/themes/uptime-kuma"><img src="https://docs.theme-park.dev/site_assets/uptime-kuma/logo.png" alt="" width="48" height="45" /></a></p>
<p><a href="https://docs.theme-park.dev/themes/uptime-kuma">Uptime Kuma</a></p>
</td>
<td>
<p><a href="https://docs.theme-park.dev/themes/mylar3"><img src="https://docs.theme-park.dev/site_assets/mylar3/logo.png" alt="" width="48" height="45" /></a></p>
<p><a href="https://docs.theme-park.dev/themes/mylar3">Mylar 3</a></p>
</td>
</tr>
<tr>
<td>
<p><a href="https://docs.theme-park.dev/themes/bitwarden"><img src="https://docs.theme-park.dev/site_assets/bitwarden/logo.png" alt="" width="48" height="48" /></a></p>
<p><a href="https://docs.theme-park.dev/themes/bitwarden">Bitwarden</a></p>
</td>
<td>
<p><a href="https://docs.theme-park.dev/themes/duplicacy"><img src="https://docs.theme-park.dev/site_assets/duplicacy/logo.png" alt="" width="48" height="48" /></a></p>
<p><a href="https://docs.theme-park.dev/themes/duplicacy">Duplicacy</a></p>
</td>
<td>
<p><a href="https://docs.theme-park.dev/themes/kitana"><img src="https://docs.theme-park.dev/site_assets/kitana/logo.png" alt="" width="48" height="48" /></a></p>
<p><a href="https://docs.theme-park.dev/themes/kitana">Kitana</a></p>
</td>
<td>
<p><a href="https://docs.theme-park.dev/themes/resilio-sync"><img src="https://docs.theme-park.dev/site_assets/resilio-sync/logo.png" alt="" width="48" height="48" /></a></p>
<p><a href="https://docs.theme-park.dev/themes/resilio-sync">Resilio-Sync</a></p>
</td>
<td>
<p><a href="https://docs.theme-park.dev/themes/gitea"><img src="https://docs.theme-park.dev/site_assets/gitea/logo.png" alt="" width="48" height="48" /></a></p>
<p><a href="https://docs.theme-park.dev/themes/gitea">Gitea</a></p>
</td>
<td>
<p><a href="https://docs.theme-park.dev/themes/unraid"><img src="https://docs.theme-park.dev/site_assets/unraid/logo.png" alt="" width="48" height="48" /></a></p>
<p><a href="https://docs.theme-park.dev/themes/unraid">Unraid</a></p>
</td>
<td>
<p><a href="https://docs.theme-park.dev/themes/moviematch"><img src="https://docs.theme-park.dev/site_assets/moviematch/logo.png" alt="" width="48" height="48" /></a></p>
<p><a href="https://docs.theme-park.dev/themes/moviematch">Moviematch</a></p>
</td>
</tr>
<tr>
<td>
<p><a href="https://docs.theme-park.dev/themes/petio"><img src="https://docs.theme-park.dev/site_assets/petio/logo.png" alt="" width="48" height="48" /></a></p>
<p><a href="https://docs.theme-park.dev/themes/petio">Petio</a></p>
</td>
<td>
<p><a href="https://docs.theme-park.dev/themes/flood"><img src="https://docs.theme-park.dev/site_assets/flood/logo.png" alt="" width="48" height="48" /></a></p>
<p><a href="https://docs.theme-park.dev/themes/flood">Flood</a></p>
</td>
<td>
<p><a href="https://docs.theme-park.dev/themes/vuetorrent"><img src="https://docs.theme-park.dev/site_assets/vuetorrent/logo.png" alt="" width="48" height="48" /></a></p>
<p><a href="https://docs.theme-park.dev/themes/vuetorrent">VueTorrent</a></p>
</td>
<td>
<p><a href="https://docs.theme-park.dev/themes/requestrr"><img src="https://docs.theme-park.dev/site_assets/requestrr/logo.png" alt="" width="48" height="45" /></a></p>
<p><a href="https://docs.theme-park.dev/themes/requestrr">Requestrr</a></p>
</td>
<td>
<p><a href="https://docs.theme-park.dev/themes/duplicati"><img src="https://docs.theme-park.dev/site_assets/duplicati/logo.png" alt="" width="48" height="48" /></a></p>
<p><a href="https://docs.theme-park.dev/themes/duplicati">Duplicati</a></p>
</td>
<td>
<p><a href="https://docs.theme-park.dev/themes/synclounge"><img src="https://docs.theme-park.dev/site_assets/synclounge/logo.png" alt="" width="48" height="48" /></a></p>
<p><a href="https://docs.theme-park.dev/themes/synclounge">Synclounge</a></p>
</td>
<td>
<p><a href="https://docs.theme-park.dev/themes/thelounge"><img src="https://docs.theme-park.dev/site_assets/thelounge/logo.png" alt="" width="48" height="48" /></a></p>
<p><a href="https://docs.theme-park.dev/themes/thelounge">The Lounge (Deprecated)</a></p>
</td>
</tr>
<tr>
<td>
<p><a href="https://docs.theme-park.dev/themes/grafana"><img src="https://docs.theme-park.dev/site_assets/grafana/logo.png" alt="" width="48" height="48" /></a></p>
<p><a href="https://docs.theme-park.dev/themes/grafana">Grafana (Deprecated)</a></p>
</td>
<td>
<p><a href="https://docs.theme-park.dev/themes/monitorr"><img src="https://docs.theme-park.dev/site_assets/monitorr/logo.png" alt="" width="48" height="48" /></a></p>
<p><a href="https://docs.theme-park.dev/themes/monitorr">Monitorr (Deprecated)</a></p>
</td>
<td>
<p><a href="https://docs.theme-park.dev/themes/webtools"><img src="https://docs.theme-park.dev/site_assets/webtools/logo.png" alt="" width="48" height="48" /></a></p>
<p><a href="https://docs.theme-park.dev/themes/webtools">Webtools (Deprecated)</a></p>
</td>
<td>
<p><a href="https://docs.theme-park.dev/themes/logarr"><img src="https://docs.theme-park.dev/site_assets/logarr/logo.png" alt="" width="48" height="48" /></a></p>
<p><a href="https://docs.theme-park.dev/themes/logarr">Logarr (Deprecated)</a></p>
</td>
<td>
<p><a href="https://docs.theme-park.dev/themes/plpp"><img src="https://docs.theme-park.dev/site_assets/plpp/logo.png" alt="" width="48" height="48" /></a></p>
<p><a href="https://docs.theme-park.dev/themes/plpp">PLPP (Deprecated)</a></p>
</td>
<td>
<!-- <p><a href=""><img src="" alt="" width="48" height="48" /></a></p>
<p><a href=""></a></p> -->
</td>
<td>
<!-- <p><a href=""><img src="" alt="" width="48" height="48" /></a></p>
<p><a href=""></a></p> -->
</td>
</tr>
</tbody>
</table>
</div>
<br>
<h3>Honourable mentions</h3>
<p><a href="https://github.com/Archmonger/Blackberry-Themes">Archmonger/Blackberry-Themes</a></p>

BIN
banners/tp_banner.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 354 KiB

View File

@ -0,0 +1,35 @@
/* Desktop */
@media (min-width: 752px) {
.header-icon.px-3.m-0.d-none.d-md-block img {
display: none !important;
}
.header-icon.px-3.m-0.d-none.d-md-block:before {
background-image: url("/css/addons/bazarr/bazarr-4k-logo/bazarr4k.png");
display: inline-block;
width: 32px;
height: 32px;
content:"";
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
}
/* Mobile */
@media (max-width: 767px) {
.sidebar-title.d-flex.align-items-center.d-md-none.container img {
display: none !important;
}
.sidebar-title.d-flex.align-items-center.d-md-none.container:before {
background-image: url("/css/addons/bazarr/bazarr-4k-logo/bazarr4k.png");
display: inline-block;
width: 32px;
height: 32px;
content:"";
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 24 KiB

View File

@ -0,0 +1,65 @@
:root {
--main-bg-color: #313544;
--modal-bg-color: #252833;
--modal-header-color: #252833;
--modal-footer-color: #252833;
--drop-down-menu-bg: #252833;
--button-color: #911f93;
--button-color-hover: #721873;
--button-text: #eee;
--button-text-hover: #fff;
--accent-color: 145, 31, 147;
--accent-color-hover: rgb(var(--accent-color), .8);
--link-color: #b828bb;
--link-color-hover: #911f93;
--label-text-color: #eee;
--text: #ccc;
--text-hover: #fff;
--text-muted: #999;
/*Specials*/
--arr-queue-color: #6c757d;
--side-menu-active: #252833;
--side-menu-color: #3a3f51;
--side-menu-link-color: #fff;
--scroller-hover: #606060;
--scroller: #707070;
--border-color: #606060;
--label-color: #911f93;
--label-info: #5d9cec;
--header-color: #911f93;
}
/* HEADER */
.header-container .bg-primary {
background-color: var(--header-color) !important;
}
/* SIDE MENU */
.sidebar-container {
background-color: var(--side-menu-color) !important;
color: white !important;
}
.sidebar-container .sidebar-button {
color: var(--side-menu-link-color) !important;
}
.sidebar-container .sidebar-button {
background-color: var(--side-menu-color) !important;
}
.sidebar-container .sidebar-button.sb-active, .sidebar-container .sidebar-button.sb-active:hover {
color: var(--side-menu-link-color) !important;
background-color: var(--side-menu-active) !important;
}
.sidebar-container .sidebar-button:hover {
background-color: var(--side-menu-active) !important;
color: var(--side-menu-link-color) !important;
}

View File

@ -0,0 +1,117 @@
:root {
--main-bg-color: #454545;
--modal-bg-color: #353535;
--modal-header-color: #353535;
--modal-footer-color: #353535;
--drop-down-menu-bg: #4d8069;
--button-color: #5899eb;
--button-color-hover: #4b91ea;
--button-text: #eee;
--button-text-hover: #fff;
--accent-color: 0, 166, 91;
--accent-color-hover: rgb(0, 166, 91, .8);
--link-color: rgb(0, 166, 91);
--link-color-hover: rgb(0, 166, 91, .8);
--label-text-color: #eee;
--text: #ccc;
--text-hover: #fff;
--text-muted: #999;
/*Specials*/
--arr-queue-color: #00a65b;
--side-menu-active: #252525;
--scroller-hover: #606060;
--scroller: #707070;
--border-color: #606060;
--label-color: #1d563d;
--label-info: #5d9cec;
--header-color: #00a65b;
--side-menu-color: #353535;
}
/* HEADER */
[class*="PageHeader-header-"] {
background-color: var(--header-color);
color: #fff;
}
[class*="PageToolbar-toolbar-"] {
background-color: #1d563d;
color: #e1e2e3;
}
/* SIDE MENU */
[class*="PageSidebar-sidebar-"] {
background-color: #353535;
color: #fff;
}
[class*=PageSidebarItem-link-]:focus {
color: rgb(var(--accent-color)) !important;
}
[class*=PageSidebarItem-isActiveLink-] {
color: var(--link-color) !important;
}
[class*=PageSidebarItem-isActiveParentLink-] {
background-color: var(--side-menu-active);
}
/* SCROLLER */
[class*=OverlayScroller-thumb-]:hover {
background-color: var(--scroller-hover) !important;
}
[class*="OverlayScroller-thumb-"],
[class*=Scroller-scroller-]::-webkit-scrollbar-thumb {
background-color: var(--scroller) !important;
}
/* MODALS */
[class*=ModalHeader-modalHeader-],
[class*=FieldSet-legend-] {
border-bottom: 1px solid var(--border-color);
}
[class*=ModalFooter-modalFooter-] {
border-top: 1px solid var(--border-color);
}
/* LABLES */
[class*="Label-default-"] {
border-color: var(--label-color);
background-color: var(--label-color);
color: white;
}
[class*="Label-info-"]:not([class*="PageSidebarItem-status-"] [class*="Label-info-"]) {
border-color: var(--label-info);
background-color: var(--label-info);
color: #fff;
}
/* SETTINGS */
[class*=Settings-link-] {
border-bottom: 1px solid var(--border-color);
}
/* SEARCH DROP DOWN */
[class*=ArtistSearchInput-containerOpen-] [class*=ArtistSearchInput-artistContainer-] {
border: 1px solid var(--main-bg-color);
background-color: var(--main-bg-color);
box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
color: #e1e2e3;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.4 MiB

View File

@ -0,0 +1,861 @@
/* Set the Organizr theme to either Aquamarine or Hotline */
/* Import the glass-base.css and root variables in the Custom Theme CSS box like below */
/*
@import "/css/addons/organizr/glass/organizr-base-old.css"
@import "/css/addons/organizr/glass/glass-base.css";
:root {
--main-bg-color: url(https://domain.com/your/hosted/wallpaper.jpg) center center/cover no-repeat fixed;
--mobile-bg-color: radial-gradient(circle, #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed;
--link-color: #fff;
--custom-buttons-color: radial-gradient(ellipse at center, #3F51B5 0%, #009688 100%) center center/cover no-repeat fixed;
--hompage-item-hover: radial-gradient(ellipse at center, rgba(0, 150, 136, 0.33) 0%, #b53f3f73 100%) center center/cover no-repeat fixed;
--notification-box-line: #000;
--div-background-color-10: rgba(0, 0, 0, 0.15);
--div-background-color-15: rgba(0, 0, 0, 0.25);
--div-background-color-25: rgba(0, 0, 0, 0.35);
--div-background-color-35: rgba(0, 0, 0, 0.45);
}
*/
/* Replace the variables if you have a dark background */
/* Light colors for dark backgrounds */
/*
--div-background-color-10: rgba(255, 255, 255, 0.1);
--div-background-color-15: rgba(255, 255, 255, 0.15);
--div-background-color-25: rgba(255, 255, 255, 0.25);
--div-background-color-35: rgba(255, 255, 255, 0.35);
*/
/* Dark blur colors for bright backgrounds */
/*
--div-background-color-10: rgba(0, 0, 0, 0.15);
--div-background-color-15: rgba(0, 0, 0, 0.25);
--div-background-color-25: rgba(0, 0, 0, 0.35);
--div-background-color-35: rgba(0, 0, 0, 0.45);
*/
/*Settings */
.feeds li>div i {
color: black !important;
}
.row-in i {
font-size: 24px;
color: black;
}
.profile-social-icons a {
color: #eee;
}
.btn-info.btn-outline {
color: #eee !important;
}
.btn-info.btn-outline:hover {
background: var(--div-background-color-15);
color: #fff;
}
.content-wrap {
background: var(--div-background-color-15) !important;
border-radius: 0 0 15px 15px;
}
.content-wrap section.content-current {
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
background: rgba(0, 0, 0, 0);
border-radius: 0 0 15px 15px;
}
.panel-blue .panel-heading,
.panel-info .panel-heading {
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
background: transparent;
}
.panel .table {
background: transparent !important;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
}
.sttabs nav ul {
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
border-radius: 15px 15px 0 0;
}
.sttabs nav {
background: var(--div-background-color-25);
border-radius: 15px 15px 0 0;
}
#settings-main-system-settings-anchor>.sttabs nav ul li {
border-radius: 15px;
}
.tab-content>.active {
background: transparent;
}
.bg-title {
background: var(--div-background-color-10);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
}
.white-box {
background: transparent;
}
.white-popup-block {
background: var(--div-background-color-10) !important;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
}
.user-bg {
border-top-left-radius: 15px;
border-top-right-radius: 15px;
}
#internal-Settings .nav-tabs>li.active>a,
.nav-tabs>li.active>a:hover {
padding-top: 10px;
}
/* Nav bar
.navbar-header {
background: transparent !important;
}
*/
@media (min-width: 768px) {
.navbar-static-top {
background: var(--main-bg) !important;
}
}
/* Dropdown */
.dropdown-menu {
background: var(--div-background-color-25);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
}
.open>.dropdown-menu {
display: block;
border-radius: 15px;
}
.navbar-top-links .dropdown-user {
border-radius: 15px;
}
#plexRecent .recent-filter {
background: var(--div-background-color-25) !important;
border-radius: 15px;
}
/* Side bar */
.sidebar {
background: var(--div-background-color-15) !important;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
box-shadow: none;
}
.sidebar-head {
background: transparent !important;
}
/*Calendar */
.fc-toolbar {
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
background: var(--div-background-color-15) !important;
}
.fc-view {
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
background: var(--div-background-color-15) !important;
border-bottom-right-radius: 15px;
border-bottom-left-radius: 15px;
}
.fc-popover {
background: var(--div-background-color-25);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
}
#homepageOrdercalendar .fc-toolbar {
border-top-left-radius: 15px;
border-top-right-radius: 15px;
}
.fc-row,
.fc-unthemed {
border-bottom-right-radius: 15px;
border-bottom-left-radius: 15px;
}
/* Calendar mobile*/
.fc th.fc-widget-header {
padding-left: 5px;
}
/*Error page */
.error-body {
padding-top: 15%;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
height: -webkit-fill-available;
margin-top: -10%;
}
/* notify - popup */
.iziToast.update-notify.iziToast-layout2,
.iziToast.success-notify.iziToast-layout2 {
border: none;
background: var(--div-background-color-25) !important;
border-bottom: transparent;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
}
.iziToast.warning-notify.iziToast-layout2 {
background: var(--div-background-color-25);
border: 1px solid transparent;
border-bottom: transparent;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
}
.iziToast:after {
background: transparent !important;
}
.mfp-container {
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
}
.mfp-zoom-out.mfp-ready.mfp-bg {
opacity: 1 !important;
background: var(--main-bg-color) !important;
}
.mfp-wrap {
background: var(--main-bg-color);
}
.main-email-panel .panel-body {
background: var(--div-background-color-25) !important;
border-bottom-right-radius: 15px !important;
border-bottom-left-radius: 15px !important;
}
.white-popup-block {
background: var(--div-background-color-25) !important;
}
.white-popup .panel-footer {
background: var(--div-background-color-25);
border-top: 1px solid #fff;
border-bottom-right-radius: 15px;
border-bottom-left-radius: 15px;
}
.panel>.table-responsive:last-child>.table:last-child,
.panel>.table:last-child {
border-bottom-right-radius: 15px;
border-bottom-left-radius: 15px;
}
/* Homepage downloader */
#homepageOrderdownloader {
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
background: var(--div-background-color-15);
padding: 10px;
border-radius: 15px;
}
#homepageOrderdownloader .nav-tabs>li.active>a,
.nav-tabs>li.active>a:hover {
padding-top: 14px;
}
#homepageOrderdownloader .nav-tabs>li>a {
padding-top: 14px;
}
/* Homepage card */
.nowPlayingItem>.white-box>.el-card-item {
background: var(--div-background-color-15) !important;
-webkit-box-shadow: none;
box-shadow: none;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
border-radius: 15px;
}
.active-tab-Homepage .white-popup .panel-body,
.white-popup>.col-md-6>.white-box:nth-child(2) {
background: var(--div-background-color-25) !important;
border-bottom-right-radius: 15px;
border-bottom-left-radius: 15px;
}
#plexStreams .el-element-overlay .el-card-item .el-overlay-1 img,
#plexStreams .el-element-overlay:hover .el-card-item:hover .el-overlay-1:hover img:hover {
border-top-right-radius: 15px;
border-top-left-radius: 15px;
}
.el-element-overlay .el-card-item .el-overlay-1 {
border-top-right-radius: 15px;
border-top-left-radius: 15px;
}
.el-element-overlay .el-card-item .el-overlay {
border-top-right-radius: 15px;
border-top-left-radius: 15px;
}
.white-popup .panel-heading,
.white-popup>.col-md-6>.white-box:first-child {
background: var(--div-background-color-25) !important;
border-top-right-radius: 15px;
border-top-left-radius: 15px;
}
.label-info {
background: var(--div-background-color-25);
}
#plexRecent,
#homepageOrderplexplaylist,
#homepageOrdercalendar,
#homepageOrderembyrecent,
#ombi-requests,
#homepageOrderdeluge,
#homepageOrdernzbget,
#homepageOrdertransmission,
#homepageOrderrTorrent,
#homepageOrderjdownloader,
#homepageOrdersabnzbd,
#homepageOrderqBittorrent {
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
background: var(--div-background-color-15);
margin: 5px;
border-radius: 15px;
}
.bg-info {
background-color: transparent !important;
}
/* Health checks */
.card-body {
background: var(--div-background-color-25) !important;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
}
.bg-inverse .healthPosition {
background: var(--div-background-color-25) !important;
-webkit-backdrop-filter: saturate(180%) blur(30px);
backdrop-filter: saturate(180%) blur(30px);
}
/* Unifi cards */
.unifiCards .panel-wrapper.collapse.in {
background: var(--div-background-color-15);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
border-bottom-right-radius: 15px;
border-bottom-left-radius: 15px;
}
.unifiCards .panel-heading {
background: var(--div-background-color-35) !important;
color: #fff !important;
border-color: transparent !important;
text-align: inherit !important;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
border-top-left-radius: 15px;
border-top-right-radius: 15px;
border-bottom: 0px;
}
.unifiCards .panel-warning .panel-heading,
.unifiCards .panel-success .panel-heading {
border-top-left-radius: 15px;
border-top-right-radius: 15px;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
}
#allUnifi .unifiCards .panel .panel-warning {
border-radius: 15px !important;
}
.unifiCards .ti-close:before {
content: "\f111";
font-family: FontAwesome;
font-size: 20px;
color: rgba(255, 69, 58, 1);
}
.unifiCards .ti-minus:before {
content: "\f111";
font-family: FontAwesome;
font-size: 20px;
color: rgba(255, 204, 0, 1);
}
.unifiCards .ti-plus:before {
content: "\f111";
font-family: FontAwesome;
font-size: 20px;
color: rgba(40, 205, 65, 1);
}
/* Weather boxes */
#homepageOrderWeatherAndAir .col-lg-2 .white-box,
#homepageOrderWeatherAndAir>div:nth-child(1)>div.col-lg-4.col-sm-12.col-xs-12>div,
#homepageOrderWeatherAndAir>div:nth-child(2)>div.col-lg-4.col-sm-12.col-xs-12>div {
background: var(--div-background-color-25) !important;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px)
}
/* Custom HTML */
#homepageOrdercustomhtmlTwo,
#homepageOrdercustomhtml {
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
background: var(--div-background-color-15);
border-radius: 15px;
padding-left: 10px;
padding-right: 10px;
margin-bottom: 5px;
}
/* Invite */
#invite-area .bg-org {
background: var(--div-background-color-15) !important;
border-radius: 15px;
}
#new-invite-area .white-popup .panel-body,
#new-invite-area .white-popup>.col-md-6>.white-box:nth-child(2) {
background: var(--div-background-color-15) !important;
border-bottom-right-radius: 15px;
border-bottom-left-radius: 15px;
}
.white-popup .panel-body,
.white-popup>.col-md-6>.white-box:nth-child(2) {
background: var(--div-background-color-15) !important;
border-bottom-right-radius: 15px;
border-bottom-left-radius: 15px;
-webkit-backdrop-filter: blur(10px) !important;
backdrop-filter: blur(10px) !important;
}
/* Email users */
.email-div .panel-body {
border-radius: 0px !important;
}
/* Speedtest popup */
#speedtest-area .white-popup .panel-footer {
background: var(--div-background-color-25) !important;
border-bottom-right-radius: 15px;
border-bottom-left-radius: 15px;
}
#speedtest-area .white-popup .panel-body,
#speedtest-area .white-popup>.col-md-6>.white-box:nth-child(2) {
border-bottom-right-radius: 0px !important;
border-bottom-left-radius: 0px !important;
}
/* Modal */
.modal-content,
.modal-header,
.modal-footer,
.modal-body {
background: var(--div-background-color-10) !important;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
border-color: transparent;
}
.modal-body {
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
}
.modal-header {
border-top-left-radius: 15px;
border-top-right-radius: 15px;
}
.modal-open .modal {
background: var(--main-bg-color);
}
.modal-content {
border-radius: 15px;
box-shadow: none;
}
/* loginpage sidemenu */
@media (max-width: 480px) {
#wrapper .login-register>.login-box>.white-box {
background: transparent !important;
margin-top: auto !important;
width: 100% !important;
-webkit-backdrop-filter: blur(0px) !important;
backdrop-filter: blur(0px) !important;
}
}
@media (max-width: 480px) {
.login-box.login-sidebar {
background: var(--div-background-color-15) !important;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
}
}
/* logo */
.white-box .visible-xs {
display: block !important;
}
.loginLogo {
border: 0;
margin-top: -60%;
transform: translateY(-10%);
}
@media (max-width: 480px) {
.loginLogo {
margin-top: -10% !important;
}
}
.blockUI {
opacity: 1 !important;
background-color: transparent !important;
}
.blockMsg {
background: rgba(0, 0, 0, 0.9) !important;
border: none !important;
}
.login-register>.login-box>.white-box {
background: var(--div-background-color-25) !important;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
border-radius: 15px;
-webkit-box-shadow: none;
box-shadow: none;
}
.login-register {
height: 100%;
position: fixed;
}
.slideInRight {
-webkit-animation-name: none;
animation-name: none;
}
.login-register .login-box .white-box .bg-org {
background-color: transparent !important;
}
/*2FA login button*/
.panel-wrapper .panel-body>.btn-warning,
.btn-warning.disabled {
background: var(--div-background-color-15) !important;
border: 1px solid #ffc36d00 !important;
}
/*2FA animation header*/
.panel-warning .panel-heading,
.panel-yellow .panel-heading {
color: #fff;
border-radius: 3px;
background-color: rgba(0, 0, 0, 0.3);
border-color: #00000000;
}
/*oAuth Successful*/
.panel-green .panel-heading,
.panel-success .panel-heading {
color: #53e69d;
text-align: center;
text-transform: uppercase;
border-radius: 3px;
background-color: transparent;
border-color: transparent;
}
/*Login sidebar*/
.login-box.login-sidebar,
#login-panels .panel-body,
#login-panels .panel {
background: transparent;
}
#login-panels .form-control,
#login-panels .btn {
background: rgba(255, 255, 255, 0.35);
color: white;
border-radius: 25px;
border: none;
}
/* #login-panels {
height: 44px;
}*/
#login-panles .btn-info.disabled.focus .btn-info.disabled:focus .btn-info.disabled:hover .btn-info.focus .btn-info:focus .btn-info:hover .btn:hover {
background: rgba(255, 255, 255, 0.65);
border: none;
}
/*Center login Box*/
.login-sidebar {
position: relative;
right: initial;
}
#lockScreen .white-box {
width: 400px;
height: 345px;
}
.login-sidebar .white-box {
width: 100%;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
#lockScreen .white-box {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: var(--div-background-color-25);
-webkit-box-shadow: none;
box-shadow: none;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
border-radius: 15px;
}
.form-control::placeholder {
color: white;
}
#login-username-Input,
#login-password-Input {
text-align: center;
}
.panel .panel-heading .panel-title,
label,
span,
.fa-lock:before {
color: #ffffff;
}
/* Lock screen */
#lockScreen .form-material .form-control,
.form-material .form-control:focus {
background: rgba(255, 255, 255, 0.35);
border-radius: 25px;
padding: inherit;
text-align: center;
}
#lockScreen .btn-info {
background: rgba(255, 255, 255, 0.35);
border-radius: 25px;
}
/* Extra */
.cbutton {
background-color: var(--div-background-color-25) !important;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
border-radius: 15px !important;
border: none !important;
padding: 4px !important;
}
.cbutton:hover {
background: var(--div-background-color-25) !important;
-webkit-backdrop-filter: saturate(180%) blur(30px) !important;
backdrop-filter: saturate(180%) blur(30px) !important;
opacity: 1 !important;
}
/* Debug modal */
.mdi-package-variant-closed:before {
content: "\F3D7";
color: black;
}
.mdi-receipt:before {
content: "\F449";
color: black;
}
.debugModal .modal-body {
border-bottom-left-radius: 0px !important;
border-bottom-right-radius: 0px !important;
}
.debugModal .modal-footer {
background: var(--div-background-color-10) !important;
border-bottom-left-radius: 15px !important;
border-bottom-right-radius: 15px !important;
}
#debugPreInfo .slimScrollDiv,
#debugResults .slimScrollDiv {
background: var(--div-background-color-15);
}
/* Swal popup */
.swal-overlay--show-modal .swal-modal {
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
background: var(--div-background-color-25);
border-radius: 15px;
}
.swal-title {
color: white;
}
.swal-overlay--show-modal {
background: var(--main-bg-color);
}
/* Mobile*/
@media (max-width: 480px) {
* {
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
}
#page-wrapper {
background: var(--mobile-bg-color) !important;
background-size: cover;
background-repeat: no-repeat;
width: 100%;
height: 100%;
}
#side-menu {
background: var(--mobile-bg-color) !important;
}
.navbar-header {
background: var(--div-background-color-25) !important;
}
.navbar-default,
.show-sidebar .sidebar .sidebar-head {
background: var(--mobile-bg-color) !important;
}
.dropdown-menu {
background: var(--mobile-bg-color) !important;
}
#internal-Settings {
background: var(--mobile-bg-color) !important;
}
.mfp-zoom-out.mfp-ready.mfp-bg {
opacity: 1 !important;
background: var(--mobile-bg-color) !important;
}
.mfp-wrap {
background: var(--mobile-bg-color) !important;
}
.modal-open .modal {
background: var(--mobile-bg-color) !important;
}
#page-wrapper {
background: var(--mobile-bg-color) !important;
}
#internal-Settings,
#preloader,
.preloader,
.active-tab-Settings,
.error-page {
background: var(--mobile-bg-color) !important;
}
html {
background: var(--mobile-bg-color) !important;
}
}

View File

@ -0,0 +1,192 @@
:root {
--div-background-color-10: rgba(0, 0, 0, 0.15);
--div-background-color-15: rgba(0, 0, 0, 0.25);
--div-background-color-25: rgba(0, 0, 0, 0.35);
--div-background-color-35: rgba(0, 0, 0, 0.45);
}
/* Replace the variables if you have a dark background */
/* Light colors for dark backgrounds */
/*
--div-background-color-10: rgba(255, 255, 255, 0.1);
--div-background-color-15: rgba(255, 255, 255, 0.15);
--div-background-color-25: rgba(255, 255, 255, 0.25);
--div-background-color-35: rgba(255, 255, 255, 0.35);
*/
/* Dark blur colors for bright backgrounds */
/*
--div-background-color-10: rgba(0, 0, 0, 0.15);
--div-background-color-15: rgba(0, 0, 0, 0.25);
--div-background-color-25: rgba(0, 0, 0, 0.35);
--div-background-color-35: rgba(0, 0, 0, 0.45);
*/
/* loginpage sidemenu */
@media (max-width: 480px) {
#wrapper .login-register > .login-box > .white-box {
background: transparent !important;
margin-top: auto !important;
width: 100% !important;
-webkit-backdrop-filter: blur(0px) !important;
backdrop-filter: blur(0px) !important;
}
}
@media (max-width: 480px) {
.login-box.login-sidebar {
background: var(--div-background-color-15) !important;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
}
}
/* logo */
.white-box .visible-xs {
display: block!important;
}
.loginLogo {
border: 0;
margin-top: -60%;
transform: translateY(-10%);
}
@media (max-width: 480px) {
.loginLogo {
margin-top: -10% !important;
}
}
.blockUI {
opacity: 1 !important;
background-color: transparent !important;
}
.blockMsg {
background: rgba(0, 0, 0, 0.9) !important;
border: none !important;
}
.login-register > .login-box > .white-box {
background: var(--div-background-color-25) !important;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
border-radius: 15px;
-webkit-box-shadow: none;
box-shadow: none;
}
.login-register {
height: 100%;
position: fixed;
}
.slideInRight {
-webkit-animation-name: none;
animation-name: none;
}
.login-register .login-box .white-box .bg-org {
background-color: transparent !important;
}
/*2FA login button*/
.panel-wrapper .panel-body > .btn-warning, .btn-warning.disabled {
background: var(--div-background-color-15) !important;
border: 1px solid #ffc36d00 !important;
}
/*2FA animation header*/
.panel-warning .panel-heading, .panel-yellow .panel-heading {
color: #fff;
border-radius: 3px;
background-color: rgba(0, 0, 0, 0.3);
border-color: #00000000;
}
/*oAuth Successful*/
.panel-green .panel-heading, .panel-success .panel-heading {
color: #53e69d;
text-align: center;
text-transform: uppercase;
border-radius: 3px;
background-color: transparent;
border-color: transparent;
}
/*Login sidebar*/
.login-box.login-sidebar,
#login-panels .panel-body,
#login-panels .panel {
background: transparent;
}
#login-panels .form-control , #login-panels .btn {
background: rgba(255, 255, 255, 0.35);
color: white;
border-radius: 25px;
border: none;
}
/* #login-panels {
height: 44px;
}*/
#login-panles .btn-info.disabled.focus .btn-info.disabled:focus .btn-info.disabled:hover .btn-info.focus .btn-info:focus .btn-info:hover .btn:hover {
background: rgba(255,255, 255, 0.65);
border:none;
}
/*Center login Box*/
.login-sidebar {
position: relative;
right: initial;
}
#lockScreen .white-box {
width: 400px;
height: 345px;
}
.login-sidebar .white-box {
width: 100%;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
#lockScreen .white-box {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: var(--div-background-color-25);
-webkit-box-shadow: none;
box-shadow: none;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
border-radius: 15px;
}
.form-control::placeholder {
color: white;
}
#login-username-Input, #login-password-Input {
text-align: center;
}
.panel .panel-heading .panel-title, label, span, .fa-lock:before {
color: #ffffff;
}
/* Lock screen */
#lockScreen .form-material .form-control, .form-material .form-control:focus {
background: rgba(255, 255, 255, 0.35);
border-radius: 25px;
padding: inherit;
text-align: center;
}
#lockScreen .btn-info {
background: rgba(255, 255, 255, 0.35);
border-radius: 25px;
border: 1px solid transparent;
}
#lockScreen .btn-info:hover {
border: 1px solid transparent;
}

File diff suppressed because it is too large Load Diff

View File

@ -0,0 +1,111 @@
/* 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 */
/* PLEX OVERSEERR SIDE MENU */
/* APP VARS*/
:root {
--sidebar-color: #1f2937;
--menu-item: #111827;
--menu-item-hover: #374151;
}
/* EXTRA CSS */
[class*="SourceSidebar-openSidebar-"][class*="SourceSidebar-sidebar-"],
[class*="SourceSidebar-sidebar-"] {
background: var(--sidebar-color) !important;
padding-top: 10px;
}
[class*="SourceSidebarLink-isSelected-"]:before {
background-color: transparent !important;
}
[class*="NavBar-container-"] {
background: rgb(0 0 0 / 0%) !important;
}
[class*="SourceSidebar-openSidebar-"] [class*="SourceSidebarLink-isSelected-"] {
background: var(--menu-item);
box-shadow: inset 4px 0 0 0 transparent !important;
border-radius: 5px;
margin-bottom: 5px;
}
[class*="SourceSidebarLink-isSelected-"] [class*="SourceSidebarLink-iconContainer-"],
[class*="SourceSidebarLink-isSelected-"] [class*="SourceSidebarLink-title-"] {
color: white;
}
[class*="SourceSidebar-openSidebar-"] [class*="SourceSidebarLink-button-"]:hover,
[class*="SourceSidebar-openSidebar-"] [class*="SourceSidebarLink-isActive-"] {
background: var(--menu-item-hover);
border-radius: 5px;
}
[class*="SourceSidebarLink-button-"] {
margin-bottom: 5px;
}
[class*="SourceSidebar-expandedSidebar-"][class*="SourceSidebar-sidebar-"] {
background: var(--sidebar-color) !important;
}
[class*="SourceSidebar-expandedSidebar-"][class*="SourceSidebar-sidebar-"] [class*="SourceSidebarLink-isSelected-"] {
background: var(--menu-item) !important;
}
[class*="SourceSidebarContent-expandedSidebarContent-"],
[class*="AllSourcesSidebarContent-container-"] {
padding: 10px;
}
[class*="SourceSidebar-collapsedSidebar-"][class*="SourceSidebar-sidebar-"] [class*="AllSourcesSidebarContent-container-"] {
padding: 0px;
}
[class*="SourceSidebarContent-expandedSidebarContent-"] div {
border-radius: 5px;
}
[class*="SourceSidebarContent-expandedSidebarContent-"] div:hover:not([data-qa-id="sidebarMore"] div) {
background-color: var(--menu-item-hover);
}
[class*="SourceSidebar-collapsedSidebar-"] [class*="SourceSidebar-sidebar-"] {
border-radius: 0px !important;
}
[class*="SourceSidebarContent-expandedSidebarContent-"] [class*="SourceSidebarLink-button-"][class*="SidebarLink-sidebarLink-"][class*="Link-default-"][class*="SourceSidebarLink-small-"][class*="SourceSidebarLink-isSelected-"] {
box-shadow: none !important;
border-radius: 5px;
}
[class*="SourceSidebar-collapsedSidebar-"][class*="SourceSidebar-sidebar-"] [class*="SourceSidebarItem-button-"][class*="SourceSidebarLink-button-"][class*="SidebarLink-sidebarLink-"][class*="Link-default-"][class*="SourceSidebarLink-small-"][class*="SourceSidebarItem-isSelected-"][class*="SourceSidebarLink-isSelected-"] {
box-shadow: inset 4px 0 0 0 rgb(var(--accent-color)) !important;
border-radius: 0px;
}
[class*="SourceSidebarLink-button-"][class*="SidebarLink-sidebarLink-"][class*="Link-default-"][class*="SourceSidebarLink-small-"][class*="SourceSidebarLink-isSelected-"]:hover {
box-shadow: none !important;
background: var(--menu-item-hover) !important;
}
[class*="SourceSidebar-collapsedSidebar-"][class*="SourceSidebarLink-button-"][class*="SidebarLink-sidebarLink-"][class*="Link-default-"][class*="SourceSidebarLink-small-"][class*="SourceSidebarLink-isSelected-"]:hover {
box-shadow: inset 4px 0 0 0 rgb(var(--accent-color)) !important;
}
[class*="SourceSidebarLink-sourceLink-"]:hover [class*="SourceSidebarLink-iconContainer-"],
[class*="SourceSidebarLink-sourceLink-"]:hover [class*="SourceSidebarLink-title-"] {
color: white;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 45 KiB

View File

@ -0,0 +1,8 @@
[class*="NavBar-plexLogo-"] {
background-image: url("/css/addons/plex/plex-alt-logo/SeekPng.com_your-logo-here-png_2467553.png");
background-position: 50%;
background-repeat: no-repeat;
background-size: contain;
margin: 0 10px;
width: 45px;
}

View File

@ -0,0 +1,133 @@
:root {
--main-bg-color: #454545;
--modal-bg-color: #454545;
--modal-header-color: #454545;
--modal-footer-color: #454545;
--drop-down-menu-bg: #606060;
--button-color: #5899eb;
--button-color-hover: #4b91ea;
--button-text: #eee;
--button-text-hover: #fff;
--accent-color: 230, 96, 0;
--accent-color-hover: rgb(var(--accent-color),.8);
--link-color: rgb(230, 96, 0);
--link-color-hover: rgb(230, 96, 0, .8);
--label-text-color: #eee;
--text: #ccc;
--text-hover: #fff;
--text-muted: #999;
/*Specials*/
--arr-queue-color: #5d9cec;
--side-menu-active: #333333;
--scroller-hover: #606060;
--scroller: #707070;
--border-color: #606060;
--label-color: #707070;
--label-info: #5d9cec;
--header-color: #e66000;
--side-menu-color: #595959;
--side-menu-link-color: #e66000;
}
/* HEADER */
[class*="PageHeader-header-"] {
background-color: var(--header-color);
color: #fff;
}
[class*="PageToolbar-toolbar-"] {
background-color: #707070;
color: var(--text);
}
/* SIDE MENU */
[class*="PageSidebar-sidebar-"] {
background-color: var(--side-menu-color);
color: #fff;
}
[class*=PageSidebarItem-link-]:focus {
color: rgb(var(--accent-color)) !important;
}
[class*=PageSidebarItem-isActiveLink-] {
color: var(--side-menu-link-color) !important;
}
[class*=PageSidebarItem-isActiveParentLink-] {
background-color: var(--side-menu-active);
}
/* SCROLLER */
[class*=ImportSeriesSelectSeries-results-]::-webkit-scrollbar-thumb:hover,
[class*=OverlayScroller-thumb-]:hover {
background-color: var(--scroller-hover) !important;
}
[class*="OverlayScroller-thumb-"],
[class*=Scroller-scroller-]::-webkit-scrollbar-thumb {
background-color: var(--scroller) !important;
}
/* MODALS */
[class*=ModalHeader-modalHeader-],
[class*=FieldSet-legend-] {
border-bottom: 1px solid var(--border-color);
}
[class*=ModalFooter-modalFooter-] {
border-top: 1px solid var(--border-color);
}
/* LABLES */
[class*="Label-default-"] {
border-color: var(--label-color);
background-color: var(--label-color);
color: white;
}
[class*="Label-info-"]:not([class*="PageSidebarItem-status-"] [class*="Label-info-"]) {
border-color: var(--label-info);
background-color: var(--label-info);
color: #fff;
}
[class*="Label-disabled-"][class*="Label-outline-"] {
color: #000;
}
[class*="Label-outline-"] {
background-color: #989898;
}
[class*="Label-success-"] {
color: #000;
}
/* SETTINGS */
[class*=Settings-link-] {
border-bottom: 1px solid var(--border-color);
}
/* SEARCH DROP DOWN */
[class*=IndexerSearchInput-containerOpen-] [class*=IndexerSearchInput-movieContainer-] {
border: 1px solid var(--drop-down-menu-bg);
background-color: var(--drop-down-menu-bg);
box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
color: #e1e2e3;
}
/* BUTTONS */

View File

@ -0,0 +1,96 @@
/* Desktop */
@media (min-width: 752px) {
.navbar-brand>img {
display:none !important;
}
.navbar > .container-fluid .navbar-brand:before {
background-image: url("/css/addons/radarr/radarr-4k-logo/radarr4k.png");
display: inline-block;
width: 128px;
height: 128px;
content:"";
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
}
/* Mobile */
@media (max-width: 767px) {
.navbar-brand .visible-xs img {
display: none !important;
}
.navbar-brand .visible-xs {
display: inline !important;
}
.navbar > .container-fluid .navbar-brand:before {
background-image: url("/css/addons/radarr/radarr-4k-logo/radarr4k.png");
display: inline-block;
width: 32px;
height: 32px;
content:"";
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
margin-bottom: -12px;
}
}
/* Radarr V3*/
@media (min-width: 752px) {
[class*="PageHeader-logoFull-"] {
display: none !important;
}
[class*="PageHeader-logoContainer-"]:before {
background-image: url("/css/addons/radarr/radarr-4k-logo/radarr4k-v3.png");
display: inline-block;
width: 148px;
height: 48px;
content:"";
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
}
@media (max-width: 767px) {
[class*="PageHeader-logo-"] {
display: none !important;
}
[class*="PageHeader-logoContainer-"]{
background-image: url("/css/addons/radarr/radarr-4k-logo/radarr-v3-mobile.png");
display: inline-block;
width: 32px;
height: 32px;
content:"";
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
margin-left: 20px;
margin-right: 8px;
flex: 0 0 32px;
}
}
[class*="LoadingPage-logoFull-"] {
display: none !important;
}
[class*="LoadingPage-page-"]:before {
background-image: url("/css/addons/radarr/radarr-4k-logo/radarr4k-v3.png");
display: inline-block;
width: 148px;
height: 48px;
content:"";
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
margin-top: 50px;
margin-right: auto;
margin-left: auto;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 167 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 55 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 52 KiB

View File

@ -0,0 +1,124 @@
:root {
--main-bg-color: #454545;
--modal-bg-color: #595959;
--modal-header-color: #595959;
--modal-footer-color: #595959;
--drop-down-menu-bg: #606060;
--button-color: #5899eb;
--button-color-hover: #4b91ea;
--button-text: #eee;
--button-text-hover: #fff;
--accent-color: 255, 194, 48;
--accent-color-hover: rgb(255, 194, 48, .8);
--link-color: rgb(255, 194, 48);
--link-color-hover: rgb(255, 194, 48, .8);
--label-text-color: #eee;
--text: #ccc;
--text-hover: #fff;
--text-muted: #999;
/*Specials*/
--arr-queue-color: #5d9cec;
--side-menu-active: #333333;
--scroller-hover: #606060;
--scroller: #707070;
--border-color: #606060;
--label-color: #707070;
--label-info: #5d9cec;
--header-color: #464b51;
--side-menu-color: #595959;
}
/* HEADER */
[class*="PageHeader-header-"] {
background-color: var(--header-color);
color: #fff;
}
[class*="PageToolbar-toolbar-"] {
background-color: #707070;
color: var(--text);
}
/* SIDE MENU */
[class*="PageSidebar-sidebar-"] {
background-color: var(--side-menu-color);
color: #fff;
}
[class*=PageSidebarItem-link-]:focus {
color: rgb(var(--accent-color)) !important;
}
[class*=PageSidebarItem-isActiveLink-] {
color: var(--link-color) !important;
}
[class*=PageSidebarItem-isActiveParentLink-] {
background-color: var(--side-menu-active);
}
/* SCROLLER */
[class*=ImportSeriesSelectSeries-results-]::-webkit-scrollbar-thumb:hover,
[class*=OverlayScroller-thumb-]:hover {
background-color: var(--scroller-hover) !important;
}
[class*="OverlayScroller-thumb-"],
[class*=Scroller-scroller-]::-webkit-scrollbar-thumb {
background-color: var(--scroller) !important;
}
/* MODALS */
[class*=ModalHeader-modalHeader-],
[class*=FieldSet-legend-] {
border-bottom: 1px solid var(--border-color);
}
[class*=ModalFooter-modalFooter-] {
border-top: 1px solid var(--border-color);
}
/* LABLES */
[class*="Label-default-"] {
border-color: var(--label-color);
background-color: var(--label-color);
color: white;
}
[class*="Label-info-"]:not([class*="PageSidebarItem-status-"] [class*="Label-info-"]) {
border-color: var(--label-info);
background-color: var(--label-info);
color: #fff;
}
/* SETTINGS */
[class*=Settings-link-] {
border-bottom: 1px solid var(--border-color);
}
/* SEARCH DROP DOWN */
[class*="MovieSearchInput-containerOpen-"] [class*="MovieSearchInput-movieContainer-"] {
border: 1px solid var(--drop-down-menu-bg);
background-color: var(--drop-down-menu-bg);
box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
color: #e1e2e3;
}
/* SERIES PAGE */
[class*="MovieIndexPoster-controls-"] {
background-color: var(--label-color) !important;
color: #fff !important;
}

View File

@ -0,0 +1,53 @@
@media (min-width: 752px) {
[class*="PageHeader-logo-"] {
display: none !important;
}
[class*="PageHeader-logoContainer-"]:before {
background-image: url("/css/addons/readarr/readarr-alt-logo/readarr_alt.png");
display: inline-block;
width: 34px;
height: 34px;
content:"";
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
}
@media (max-width: 767px) {
[class*="PageHeader-logo-"] {
display: none !important;
}
[class*="PageHeader-logoContainer-"]:before {
background-image: url("/css/addons/readarr/readarr-alt-logo/readarr_alt.png");
display: inline-block;
width: 34px;
height: 34px;
content:"";
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
}
[class*="LoadingPage-logoFull-"] {
display: none !important;
}
[class*="LoadingPage-page-"]:before {
background-image: url("/css/addons/readarr/readarr-alt-logo/readarr_alt.png");
display: inline-block;
width: 48px;
height: 48px;
content:"";
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
margin-top: 50px;
margin-right: auto;
margin-left: auto;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 52 KiB

View File

@ -0,0 +1,3 @@
Headphone Icon svg made by monkik from www.flaticon.com
https://www.flaticon.com/free-icon/music_2503487?term=headset&related_id=2503487

View File

@ -0,0 +1,126 @@
:root {
--main-bg-color: #4a4a4b;
--modal-bg-color: #353535;
--modal-header-color: #353535;
--modal-footer-color: #353535;
--drop-down-menu-bg: #66001a;
--button-color: #5899eb;
--button-color-hover: #4b91ea;
--button-text: #eee;
--button-text-hover: #fff;
--accent-color: 202, 48, 45;
--accent-color-hover: rgb(var(--accent-color), .8);
--link-color: rgb(93, 156, 236);
--link-color-hover: rgb(93, 156, 236, .8);
--label-text-color: #eee;
--text: #ccc;
--text-hover: #fff;
--text-muted: #999;
/*Specials*/
--arr-queue-color: #1d563d;
--side-menu-active: #252525;
--scroller-hover: #606060;
--scroller: #707070;
--border-color: #606060;
--label-color: #810020;
--label-info: #5d9cec;
--header-color: #a41726;
--side-menu-color: #353535;
--side-menu-link-color: #ca302d;
}
/* HEADER */
[class*="PageHeader-header-"] {
background-color: var(--header-color);
color: #fff;
}
[class*="PageToolbar-toolbar-"] {
background-color: #810020;
color: #e1e2e3;
}
/* SIDE MENU */
[class*="PageSidebar-sidebar-"] {
background-color: #353535;
color: #fff;
}
[class*=PageSidebarItem-link-]:focus {
color: rgb(var(--accent-color)) !important;
}
[class*=PageSidebarItem-isActiveLink-] {
color: var(--side-menu-link-color) !important;
}
[class*=PageSidebarItem-isActiveParentLink-] {
background-color: var(--side-menu-active);
}
/* SCROLLER */
[class*=ImportSeriesSelectSeries-results-]::-webkit-scrollbar-thumb:hover,
[class*=OverlayScroller-thumb-]:hover {
background-color: var(--scroller-hover) !important;
}
[class*="OverlayScroller-thumb-"],
[class*=Scroller-scroller-]::-webkit-scrollbar-thumb {
background-color: var(--scroller) !important;
}
/* MODALS */
[class*=ModalHeader-modalHeader-],
[class*=FieldSet-legend-] {
border-bottom: 1px solid var(--border-color);
}
[class*=ModalFooter-modalFooter-] {
border-top: 1px solid var(--border-color);
}
/* LABLES */
[class*="Label-default-"] {
border-color: var(--label-color);
background-color: var(--label-color);
color: white;
}
[class*="Label-info-"]:not([class*="PageSidebarItem-status-"] [class*="Label-info-"]) {
border-color: var(--label-info);
background-color: var(--label-info);
color: #fff;
}
.Label-default-xecWd {
border-color: #810020;
background-color: #810020;
}
/* SETTINGS */
[class*=Settings-link-] {
border-bottom: 1px solid var(--border-color);
}
/* SEARCH DROP DOWN */
[class*="MovieSearchInput-containerOpen-"] [class*="MovieSearchInput-movieContainer-"] {
border: 1px solid var(--drop-down-menu-bg);
background-color: var(--drop-down-menu-bg);
box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
color: #e1e2e3;
}
/* AUTHOR PAGE */
[class*="AuthorDetailsHeader-headerContent-"], [class*="BookDetailsHeader-headerContent-"] {
color: #fff;
background: #4a4a4b;
}

View File

@ -0,0 +1,53 @@
@media (min-width: 752px) {
[class*="PageHeader-logo-"] {
display: none !important;
}
[class*="PageHeader-logoContainer-"]:before {
background-image: url("/css/addons/sonarr/sonarr-4k-logo/sonarr-4k.png");
display: inline-block;
width: 32px;
height: 32px;
content:"";
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
}
@media (max-width: 767px) {
[class*="PageHeader-logo-"] {
display: none !important;
}
[class*="PageHeader-logoContainer-"]:before {
background-image: url("/css/addons/sonarr/sonarr-4k-logo/sonarr-4k.png");
display: inline-block;
width: 32px;
height: 32px;
content:"";
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
}
[class*="LoadingPage-logoFull-"] {
display: none !important;
}
[class*="LoadingPage-page-"]:before {
background-image: url("/css/addons/sonarr/sonarr-4k-logo/sonarr-4k.png");
display: inline-block;
width: 48px;
height: 48px;
content:"";
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
margin-top: 50px;
margin-right: auto;
margin-left: auto;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 45 KiB

View File

@ -0,0 +1,125 @@
:root {
--main-bg-color: #4f566f;
--modal-bg-color: #3a3f51;
--modal-header-color: #3a3f51;
--modal-footer-color: #3a3f51;
--drop-down-menu-bg: #3a3f51;
--button-color: #5899eb;
--button-color-hover: #3483e7;
--button-text: #eee;
--button-text-hover: #fff;
--accent-color: 53, 197, 244;
--accent-color-hover: rgb(33, 147, 181);
--link-color: #35c5f4;
--link-color-hover: rgb(53, 197, 244, .8);
--label-text-color: #4f566f;
--text: #ccc;
--text-hover: #fff;
--text-muted: #999;
/*Specials*/
--arr-queue-color: #35c5f4;
--side-menu-active: #252833;
--scroller-hover: #656d8c;
--scroller: #9ea4b9;
--border-color: #4f566f;
--label-color: #4f566f;
--label-info: #5d9cec;
--header-color: #2193b5;
--side-menu-color: #3a3f51;
}
/* HEADER */
[class*="PageHeader-header-"] {
background-color: var(--header-color);
color: #fff;
}
/* SIDE MENU */
[class*="PageSidebar-sidebar-"] {
background-color: var(--side-menu-color);
color: #fff;
}
[class*=PageSidebarItem-link-]:focus {
color: rgb(var(--accent-color)) !important;
}
[class*=PageSidebarItem-isActiveLink-] {
color: var(--link-color) !important;
}
[class*=PageSidebarItem-isActiveParentLink-] {
background-color: var(--side-menu-active);
}
/* SCROLLER */
[class*=ImportSeriesSelectSeries-results-]::-webkit-scrollbar-thumb:hover,
[class*=OverlayScroller-thumb-]:hover {
background-color: var(--scroller-hover) !important;
}
[class*="OverlayScroller-thumb-"],
[class*=Scroller-scroller-]::-webkit-scrollbar-thumb {
background-color: var(--scroller) !important;
}
/* MODALS */
[class*=ModalHeader-modalHeader-],
[class*=FieldSet-legend-] {
border-bottom: 1px solid var(--border-color);
}
[class*=ModalFooter-modalFooter-] {
border-top: 1px solid var(--border-color);
}
/* LABLES */
[class*=Label-default-] {
border-color: var(--label-color);
background-color: var(--label-color);
color: white;
}
[class*="Label-info-"]:not([class*="PageSidebarItem-status-"] [class*="Label-info-"]) {
border-color: var(--label-info);
background-color: var(--label-info);
color: white;
}
/* SETTINGS */
[class*=Settings-link-] {
border-bottom: 1px solid var(--border-color);
}
/* SEARCH DROP DOWN */
[class*="SeriesSearchInput-containerOpen-"] [class*="SeriesSearchInput-seriesContainer-"] {
border: 1px solid var(--drop-down-menu-bg);
background-color: var(--drop-down-menu-bg);
box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
color: #e1e2e3;
}
/* SERIES PAGE */
[class*="SeriesIndexPoster-controls-"] {
background-color: var(--label-color) !important;
color: #fff !important;
}
[class*="SeriesIndexPoster-posterContainer-"]>span>button {
background-color: transparent;
color: white !important;
}
[class*="SeriesIndexPoster-action-"]:hover,
[class*=SeriesIndexPoster-action-] .fa-search:hover {
color: #ccc !important;
}

View File

@ -0,0 +1,245 @@
@import "https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css";
@import "https://fonts.googleapis.com/css?family=Share+Tech+Mono&display=swap";
@import "https://fonts.googleapis.com/css?family=VT323";
/* Replace the variables if you have a dark background */
/* Light colors for dark backgrounds */
/*
--div-background-color-10: rgba(255, 255, 255, 0.1);
--div-background-color-15: rgba(255, 255, 255, 0.15);
--div-background-color-25: rgba(255, 255, 255, 0.25);
--div-background-color-35: rgba(255, 255, 255, 0.35);
https://www.transparenttextures.com/patterns/hexellence.png
https://www.transparenttextures.com/patterns/gplay.png
https://www.transparenttextures.com/patterns/simple-horizontal-light.png
https://www.colourlovers.com/palette/3428762/Fallout?widths=1
https://codepen.io/lbebber/pen/XJRdrV/ CRT KEY FRAMES
https://brennan.io/2017/06/14/alien-computer-card/
https://www.cssmatic.com/noise-texture
https://codepen.io/somethingformed/pen/raWJXV
radial-gradient(ellipse at center,#0f7 0,rgba(0,255,119,0) 100%) center center/cover no-repeat fixed,
*/
* {
outline: none;
}
@media only screen and (max-width: 500px) {
#login {
-webkit-backdrop-filter: blur(0px);
backdrop-filter: blur(0px);
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
height: 100%;
width: 100%;
border-radius: none !important;
}
.background-wrap,#video-bg-elem {display: none;}
#login {
-webkit-box-shadow: inset 0px 0px 0px 2px #F000 !important;
box-shadow: inset 0px 0px 0px 2px #F000 !important;
}
}
html {
background: var(--main-bg) !important;
}
body {
background: var(--main-bg) !important;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
height: 100%;
width: 100%;
overflow: hidden;
}
@media only screen and (max-width: 768px) {
#login {
min-width: 300px;
}
}
/*FOR VIDEO BACKGROUND*/
.background-wrap {
position: fixed;
z-index: -1000;
width: 100%;
height: 100%;
overflow: hidden;
top: 0;
left: 0;
}
#video-bg-elem {
position: absolute;
top: 0;
left: 0;
min-height: 100%;
min-width: 100%;
}
/*TEXT COLOR*/
#login h1,
#login h2,
#login .error {
color: var(--text-color) !important;
text-shadow: var(--text-shadow) var(--text-color);
font-size: 20px;
}
#login a {
color: var(--link-color);
text-shadow: var(--text-shadow) var(--text-color);
}
#login a:hover {
color: var(--link-color-hover);
text-shadow: var(--text-shadow) var(--text-color);
}
#login input {
color: var(--input-color);
text-shadow: 0 0 5px var(--text-color);
}
#login ::placeholder {
color: var(--input-color);
text-shadow: 0 0 5px var(--text-color);
}
#login ::-webkit-input-placeholder {
color: var(--input-color);
text-shadow: 0 0 5px var(--text-color);
}
#login ::-moz-placeholder {
color: var(--input-color);
text-shadow: 0 0 5px var(--text-color);
}
#login :-ms-input-placeholder {
color: var(--input-color);
text-shadow: 0 0 5px var(--text-color);
}
#login :-moz-placeholder {
color: var(--input-color);
text-shadow: 0 0 5px var(--text-color);
}
#login input:focus::-webkit-input-placeholder {
color: transparent !important;
text-shadow: 0 0 0px transparent;
}
#login input:focus:-moz-placeholder {
color: transparent !important;
text-shadow: 0 0 0px transparent;
}
#login input:focus::-moz-placeholder {
color: transparent !important;
text-shadow: 0 0 0px transparent;
}
#login input:focus:-ms-input-placeholder {
color: transparent !important;
text-shadow: 0 0 0px transparent;
}
/*TEXT FONT*/
#login h1,
#login h2,
#login a,
#login .button,
#login .error {
font-family: var(--text-font);
-webkit-font-smoothing: none;
line-height: 1.2;
}
/* CASE COLOR */
#login [class^='case-'],
#login [class*=' case-'] {
font-family: cases!important;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
color: var(--case-color);
text-shadow: var(--text-shadow) var(--text-color);
}
/*INPUT FORMS*/
#login [type=text],
#login [type=password] {
font-family: var(--input-font);
background-color: rgba(0, 0, 0, 0.25);
border: 2px solid transparent;
text-transform: uppercase;
border-radius: 5px;
}
#login [type=text]:active,
#login [type=text]:focus,
#login [type=password]:active,
#login [type=password]:focus {
font-family: var(--input-font);
background-color: rgba(0, 0, 0, 0.25);
border: 2px solid transparent;
text-transform: uppercase;
}
/*BUTTON*/
#login .button {
color: var(--button-text-color);
text-shadow: var(--text-shadow) var(--text-color);
background: linear-gradient(90deg, var(--button-color2) 0, var(--button-color)) 0 0 no-repeat, linear-gradient(90deg, var(--button-color2) 0, var(--button-color)) 0 100% no-repeat, linear-gradient(0deg, var(--button-color2) 0, var(--button-color2)) 0 100% no-repeat, linear-gradient(0deg, var(--button-color) 0, var(--button-color)) 100% 100% no-repeat;
background: -webkit-gradient(linear, left top, right top, from(var(--button-color2)), to(var(--button-color))) 0 0 no-repeat, -webkit-gradient(linear, left top, right top, from(var(--button-color2)), to(var(--button-color))) 0 100% no-repeat, -webkit-gradient(linear, left bottom, left top, from(var(--button-color2)), to(var(--button-color2))) 0 100% no-repeat, -webkit-gradient(linear, left bottom, left top, from(var(--button-color)), to(var(--button-color))) 100% 100% no-repeat;
background-size: 100% 2px, 100% 2px, 2px 100%, 2px 100%;
}
#login .button:hover {
color: var(--button-text-color-hover);
text-shadow: var(--text-shadow) var(--button-color-hover);
box-shadow: var(--box-shadow) var(--button-color-hover);
background-color: var(--button-color-hover);
background: -webkit-gradient(linear, left top, right top, from(var(--button-color2-hover)), to(var(--button-color-hover)));
background: linear-gradient(90deg, var(--button-color2-hover) 0, var(--button-color-hover));
}
#login {
background: var(--div-background-color-15) !important;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
padding-top: 1rem;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%) !;
-ms-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
margin: 0 !important;
text-transform: uppercase;
min-width: 300px;
}
#login .angle:after {
display: none;
}
#login .wordmark {
display: none;
}
#login .logo {
background: var(--logo);
background-size: contain;
padding: 2rem;
border-radius: 0;
margin: 0rem 1rem 0rem 1rem;
}
#login .error {
animation-name: shake;
animation-duration: .8s;
}
/*LOGIN BOX SHADOW*/
.shadow {
-webkit-box-shadow: inset 0px 0px 0px 2px var(--text-color) !important;
box-shadow: inset 0px 0px 0px 2px var(--text-color) !important;
}

View File

@ -0,0 +1,22 @@
@import url("/css/addons/unraid/login-page/alien/alien_base.css");
:root {
--main-bg: radial-gradient(ellipse at center,rgba(0, 255, 119, 0.1) 0,rgba(0,255,119,0) 100%) center center/cover no-repeat fixed,
url(/css/addons/unraid/login-page/alien/wallpaper/hallway2.jpg) center center/cover no-repeat fixed;
--logo: url(/css/addons/unraid/login-page/alien/logo/nostromogreen2.png) center no-repeat;
--text-color: #37f592;
--input-color: #37f592;
--link-color: #37f592;
--link-color-hover: #68ffff;
--case-color: #37f592;
--button-text-color: #37f592;
--button-text-color-hover: #000;
--button-color: #37f592;
--button-color2: #0C833D;
--button-color-hover: #68ffff;
--button-color2-hover: #68ffff;
--input-font: 'Share Tech Mono', monospace;
--text-font: 'Share Tech Mono', monospace; /*'VT323', 'Share Tech Mono'*/
--div-background-color-15: rgba(0, 255, 111, 0.03);
--text-shadow: 0 0 8px;
--box-shadow: 0 0 15px;
}

View File

@ -0,0 +1,22 @@
@import url("/css/addons/unraid/login-page/alien/alien_base.css");
:root {
--main-bg: radial-gradient(ellipse at center,rgba(0, 255, 119, 0.1) 0,rgba(0,255,119,0) 100%) center center/cover no-repeat fixed,
url(/css/addons/unraid/login-page/alien/wallpaper/hallway.jpg) center center/cover no-repeat fixed;
--logo: url(/css/addons/unraid/login-page/alien/logo/wings_green.png) center no-repeat;
--text-color: #37f592;
--input-color: #37f592;
--link-color: #37f592;
--link-color-hover: #68ffff;
--case-color: #37f592;
--button-text-color: #37f592;
--button-text-color-hover: #000;
--button-color: #37f592;
--button-color2: #0C833D;
--button-color-hover: #68ffff;
--button-color2-hover: #68ffff;
--input-font: 'Share Tech Mono', monospace;
--text-font: 'Share Tech Mono', monospace; /*'VT323', 'Share Tech Mono'*/
--div-background-color-15: rgba(0, 255, 111, 0.03);
--text-shadow: 0 0 8px;
--box-shadow: 0 0 15px;
}

View File

@ -0,0 +1,22 @@
@import url("/css/addons/unraid/login-page/alien/alien_base.css");
:root {
--main-bg: radial-gradient(ellipse at center,rgba(0, 255, 119, 0.1) 0,rgba(0,255,119,0) 100%) center center/cover no-repeat fixed,
url(/css/addons/unraid/login-page/alien/wallpaper/hallway2.jpg) center center/cover no-repeat fixed;
--logo: url(/css/addons/unraid/login-page/alien/logo/wings_green.png) center no-repeat;
--text-color: #37f592;
--input-color: #37f592;
--link-color: #37f592;
--link-color-hover: #68ffff;
--case-color: #37f592;
--button-text-color: #37f592;
--button-text-color-hover: #000;
--button-color: #37f592;
--button-color2: #0C833D;
--button-color-hover: #68ffff;
--button-color2-hover: #68ffff;
--input-font: 'Share Tech Mono', monospace;
--text-font: 'Share Tech Mono', monospace; /*'VT323', 'Share Tech Mono'*/
--div-background-color-15: rgba(0, 255, 111, 0.03);
--text-shadow: 0 0 8px;
--box-shadow: 0 0 15px;
}

View File

@ -0,0 +1,22 @@
@import url("/css/addons/unraid/login-page/alien/alien_base.css");
:root {
--main-bg: radial-gradient(ellipse at center,rgba(0, 255, 119, 0.1) 0,rgba(0,255,119,0) 100%) center center/cover no-repeat fixed,
url(/css/addons/unraid/login-page/alien/wallpaper/hallway3.jpg) center center/cover no-repeat fixed;
--logo: url(/css/addons/unraid/login-page/alien/logo/wings_green.png) center no-repeat;
--text-color: #37f592;
--input-color: #37f592;
--link-color: #37f592;
--link-color-hover: #68ffff;
--case-color: #37f592;
--button-text-color: #37f592;
--button-text-color-hover: #000;
--button-color: #37f592;
--button-color2: #0C833D;
--button-color-hover: #68ffff;
--button-color2-hover: #68ffff;
--input-font: 'Share Tech Mono', monospace;
--text-font: 'Share Tech Mono', monospace; /*'VT323', 'Share Tech Mono'*/
--div-background-color-15: rgba(0, 255, 111, 0.03);
--text-shadow: 0 0 8px;
--box-shadow: 0 0 15px;
}

View File

@ -0,0 +1,22 @@
@import url("/css/addons/unraid/login-page/alien/alien_base.css");
:root {
--main-bg: radial-gradient(ellipse at center,rgba(0, 255, 119, 0.1) 0,rgba(0,255,119,0) 100%) center center/cover no-repeat fixed,
url(/css/addons/unraid/login-page/alien/wallpaper/hallway4.jpg) center center/cover no-repeat fixed;
--logo: url(/css/addons/unraid/login-page/alien/logo/wings_green.png) center no-repeat;
--text-color: #37f592;
--input-color: #37f592;
--link-color: #37f592;
--link-color-hover: #68ffff;
--case-color: #37f592;
--button-text-color: #37f592;
--button-text-color-hover: #000;
--button-color: #37f592;
--button-color2: #0C833D;
--button-color-hover: #68ffff;
--button-color2-hover: #68ffff;
--input-font: 'Share Tech Mono', monospace;
--text-font: 'Share Tech Mono', monospace; /*'VT323', 'Share Tech Mono'*/
--div-background-color-15: rgba(0, 255, 111, 0.03);
--text-shadow: 0 0 8px;
--box-shadow: 0 0 15px;
}

View File

@ -0,0 +1,22 @@
@import url("/css/addons/unraid/login-page/alien/alien_base.css");
:root {
--main-bg: radial-gradient(ellipse at center,rgba(0, 255, 119, 0.1) 0,rgba(0,255,119,0) 100%) center center/cover no-repeat fixed,
url(/css/addons/unraid/login-page/alien/wallpaper/isolation.png) center center/cover no-repeat fixed;
--logo: url(/css/addons/unraid/login-page/alien/logo/wings_green.png) center no-repeat;
--text-color: #37f592;
--input-color: #37f592;
--link-color: #37f592;
--link-color-hover: #68ffff;
--case-color: #37f592;
--button-text-color: #37f592;
--button-text-color-hover: #000;
--button-color: #37f592;
--button-color2: #0C833D;
--button-color-hover: #68ffff;
--button-color2-hover: #68ffff;
--input-font: 'Share Tech Mono', monospace;
--text-font: 'Share Tech Mono', monospace; /*'VT323', 'Share Tech Mono'*/
--div-background-color-15: rgba(0, 255, 111, 0.03);
--text-shadow: 0 0 8px;
--box-shadow: 0 0 15px;
}

View File

@ -0,0 +1,21 @@
@import url("/css/addons/unraid/login-page/alien/alien_base.css");
:root {
--main-bg: transparent;
--logo: url(/css/addons/unraid/login-page/alien/logo/wings_green.png) center no-repeat;
--text-color: #37f592;
--input-color: #37f592;
--link-color: #37f592;
--link-color-hover: #68ffff;
--case-color: #37f592;
--button-text-color: #37f592;
--button-text-color-hover: #000;
--button-color: #37f592;
--button-color2: #0C833D;
--button-color-hover: #68ffff;
--button-color2-hover: #68ffff;
--input-font: 'Share Tech Mono', monospace;
--text-font: 'Share Tech Mono', monospace; /*'VT323', 'Share Tech Mono'*/
--div-background-color-15: rgba(0, 255, 111, 0.03);
--text-shadow: 0 0 8px;
--box-shadow: 0 0 15px;
}

View File

@ -0,0 +1,6 @@
// Adds a video background
let video = `
<div class="background-wrap"><video id="video-bg-elem" preload="auto" autoplay="true" loop="loop" muted="muted"> <source src="https:\/\/gilbn.github.io\/theme.park\/css\/addons\/unraid\/login-page\/alien\/video\/isolation.mp4" type="video\/mp4">Video not supported</video></div>
`
document.body.innerHTML += video

Binary file not shown.

After

Width:  |  Height:  |  Size: 102 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 127 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 32 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 24 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 41 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 366 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 682 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 364 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 607 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 243 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 356 KiB

View File

@ -0,0 +1,22 @@
@import url("/css/addons/unraid/login-page/alien/alien_base.css");
:root {
--main-bg: radial-gradient(ellipse at center,rgba(0, 255, 119, 0.1) 0,rgba(0,255,119,0) 100%) center center/cover no-repeat fixed,
url(/css/addons/unraid/login-page/alien/wallpaper/nightmare.png) center center/cover no-repeat fixed;
--logo: url(/css/addons/unraid/login-page/alien/logo/wings_red.png) center no-repeat;
--text-color: #e22828;
--input-color: #e22828;
--link-color: #e22828;
--link-color-hover: #f07777;
--case-color: #e22828;
--button-text-color: #e22828;
--button-text-color-hover: #000;
--button-color: #e22828;
--button-color2: #e22828;
--button-color-hover: #db3232;
--button-color2-hover: #db3232;
--input-font: 'Share Tech Mono', monospace;
--text-font: 'Share Tech Mono', monospace; /*'VT323', 'Share Tech Mono'*/
--div-background-color-15: rgba(0, 0, 0, 0.55);
--text-shadow: 0 0 8px;
--box-shadow: 0 0 15px;
}

View File

@ -0,0 +1,22 @@
@import url("/css/addons/unraid/login-page/alien/alien_base.css");
:root {
--main-bg: radial-gradient(ellipse at center,rgba(0, 255, 119, 0.1) 0,rgba(0,255,119,0) 100%) center center/cover no-repeat fixed,
url(/css/addons/unraid/login-page/alien/wallpaper/scanner.jpg) center center/cover no-repeat fixed;
--logo: url(/css/addons/unraid/login-page/alien/logo/nostromogreen2.png) center no-repeat;
--text-color: #37f592;
--input-color: #37f592;
--link-color: #37f592;
--link-color-hover: #68ffff;
--case-color: #37f592;
--button-text-color: #37f592;
--button-text-color-hover: #000;
--button-color: #37f592;
--button-color2: #0C833D;
--button-color-hover: #68ffff;
--button-color2-hover: #68ffff;
--input-font: 'Share Tech Mono', monospace;
--text-font: 'Share Tech Mono', monospace; /*'VT323', 'Share Tech Mono'*/
--div-background-color-15: rgba(0, 255, 111, 0.03);
--text-shadow: 0 0 8px;
--box-shadow: 0 0 15px;
}

Binary file not shown.

Binary file not shown.

After

Width:  |  Height:  |  Size: 272 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 192 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 326 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.8 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.0 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.0 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 39 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 219 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 137 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 80 KiB

View File

@ -0,0 +1,67 @@
#!/bin/bash
TYPE="retro-terminal"
THEME="green.css"
DOMAIN="theme-park.dev" #if you update the domain after the script has been run, You must disable and re enable JS or the whole theme.
ADD_JS="true"
JS="custom_text_header.js"
DISABLE_THEME="false"
echo -e "Variables set:\\n\
THEME = ${THEME}\\n\
DOMAIN = ${DOMAIN}\\n\
ADD_JS = ${ADD_JS}\\n\
JS = ${JS}\\n\
DISABLE_THEME = ${DISABLE_THEME}\\n"
# Restore login.php
if [ ${DISABLE_THEME} = "true" ]; then
echo "Restoring backup of login.php"
cp -p /usr/local/emhttp/login.php.backup /usr/local/emhttp/login.php
exit 0
fi
# Backup login page if needed.
if [ ! -f /usr/local/emhttp/login.php.backup ]; then
echo "Creating backup of login.php"
cp -p /usr/local/emhttp/login.php /usr/local/emhttp/login.php.backup
fi
# Use correct domain style
case ${DOMAIN} in
*"github.io"*)
echo "Switching to github.io URL style"
DOMAIN="${DOMAIN}\/theme.park"
;;
esac
# Adding stylesheets
if ! grep -q ${DOMAIN} /usr/local/emhttp/login.php; then
echo "Adding stylesheet"
sed -i -e "\@<style>@i\ <link rel='stylesheet' href='https://${DOMAIN}/css/addons/unraid/login-page/${TYPE}/${THEME}'>" /usr/local/emhttp/login.php
echo 'Stylesheet set to' ${THEME}
fi
# Adding/Removing javascript
if [ ${ADD_JS} = "true" ]; then
if ! grep -q ${JS} /usr/local/emhttp/login.php; then
if grep -q "<script type='text/javascript' src='https://${DOMAIN}/css/addons/unraid/login-page/" /usr/local/emhttp/login.php; then
echo "Replacing Javascript"
sed -i "/<script type='text\/javascript' src='https:\/\/${DOMAIN}\/css\/addons\/unraid\/login-page/c <script type='text/javascript' src='https://${DOMAIN}/css/addons/unraid/login-page/${TYPE}/js/${JS}'></script>" /usr/local/emhttp/login.php
else
echo "Adding javascript"
sed -i -e "\@</body>@i\ <script type='text/javascript' src='https://${DOMAIN}/css/addons/unraid/login-page/${TYPE}/js/${JS}'></script>" /usr/local/emhttp/login.php
fi
fi
else
if grep -q ${JS} /usr/local/emhttp/login.php; then
echo "Removing javascript.."
sed -i "/<script type='text\/javascript' src='https:\/\/${DOMAIN}\/css\/addons\/unraid\/login-page/d" /usr/local/emhttp/login.php
fi
fi
# Changing stylesheet
if ! grep -q ${TYPE}"/"${THEME} /usr/local/emhttp/login.php; then
echo "Changing existing custom stylesheet.."
sed -i "/<link rel='stylesheet' href='https:\/\/${DOMAIN}\/css\/addons\/unraid\/login-page/c <link rel='stylesheet' href='https://${DOMAIN}/css/addons/unraid/login-page/${TYPE}/${THEME}'>" /usr/local/emhttp/login.php
echo 'Stylesheet set to' ${THEME}
fi

View File

@ -0,0 +1,218 @@
@import "https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css";
@import "https://fonts.googleapis.com/css?family=Share+Tech+Mono&display=swap";
@import "https://fonts.googleapis.com/css?family=VT323";
:root {
--main-bg-color: url(/css/addons/unraid/login-page/fallout/wallpaper/rocky-wall.png), url(/css/addons/unraid/login-page/fallout/wallpaper/6Ua3u8.jpg) center center/cover no-repeat fixed;
--logo: url(/css/addons/unraid/login-page/fallout/logo/vault.png) center no-repeat;
--text-color: #14F074;
--input-color: #14F074;
--link-color: #14F074;
--link-color-hover: #0C833D;
--case-color: #14F074;
--button-text-color: #14F074;
--button-text-color-hover: #FFFFFF;
--button-color: #14F074;
--button-color2: #0C833D;
--input-font: 'Share Tech Mono', monospace;
--text-font: 'Share Tech Mono', monospace;
--div-background-color-15: rgba(0, 0, 0, 0.25);
/* Replace the variables if you have a dark background */
/* Light colors for dark backgrounds */
/*
--div-background-color-10: rgba(255, 255, 255, 0.1);
--div-background-color-15: rgba(255, 255, 255, 0.15);
--div-background-color-25: rgba(255, 255, 255, 0.25);
--div-background-color-35: rgba(255, 255, 255, 0.35);
https://www.transparenttextures.com/patterns/hexellence.png
https://www.transparenttextures.com/patterns/gplay.png
https://www.transparenttextures.com/patterns/simple-horizontal-light.png
https://www.colourlovers.com/palette/3428762/Fallout?widths=1
*/
}
@media (max-width: 500px) {
#login {
-webkit-backdrop-filter: blur(0px);
backdrop-filter: blur(0px);
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
height: 100%;
width: 100%;
border-radius: none !important;
}
.background-wrap,#video-bg-elem {display: none;}
}
html {
background: var(--main-bg-color) !important;
}
body {
background: var(--main-bg-color) !important;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
height: 100%;
width: 100%;
overflow: hidden;
}
@media only screen and (max-width: 768px) {
#login {
min-width: 300px;
}
}
/*FOR VIDEO BACKGROUND*/
.background-wrap {
position: fixed;
z-index: -1000;
width: 100%;
height: 100%;
overflow: hidden;
top: 0;
left: 0;
}
#video-bg-elem {
position: absolute;
top: 0;
left: 0;
min-height: 100%;
min-width: 100%;
}
/*TEXT COLOR*/
#login h1,
#login h2,
#login .error {
color: var(--text-color) !important;
}
#login a {
color: var(--link-color);
}
#login a:hover {
color: var(--link-color-hover);
}
#login input {
color: var(--input-color);
}
#login ::placeholder {
color: var(--input-color);
}
#login ::-webkit-input-placeholder {
color: var(--input-color);
}
#login ::-moz-placeholder {
color: var(--input-color);
}
#login :-ms-input-placeholder {
color: var(--input-color);
}
#login :-moz-placeholder {
color: var(--input-color);
}
#login input:focus::-webkit-input-placeholder {
color: transparent !important;
}
#login input:focus:-moz-placeholder {
color: transparent !important;
}
#login input:focus::-moz-placeholder {
color: transparent !important;
}
#login input:focus:-ms-input-placeholder {
color: transparent !important;
}
/*TEXT FONT*/
#login h1,
#login h2,
#login a,
#login .button,
#login .error {
font-family: var(--text-font);
}
/* CASE COLOR */
#login [class^='case-'],
#login [class*=' case-'] {
font-family: cases!important;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
color: var(--case-color);
}
/*INPUT FORMS*/
#login [type=text],
#login [type=password] {
font-family: var(--input-font);
background-color: rgba(0, 0, 0, 0.25);
border: 2px solid transparent;
text-transform: uppercase;
border-radius: 5px;
}
#login [type=text]:active,
#login [type=text]:focus,
#login [type=password]:active,
#login [type=password]:focus {
font-family: var(--input-font);
background-color: rgba(0, 0, 0, 0.25);
border: 2px solid transparent;
text-transform: uppercase;
}
/*BUTTON*/
#login .button {
color: var(--button-text-color);
background: linear-gradient(90deg, var(--button-color2) 0, var(--button-color)) 0 0 no-repeat, linear-gradient(90deg, var(--button-color2) 0, var(--button-color)) 0 100% no-repeat, linear-gradient(0deg, var(--button-color2) 0, var(--button-color2)) 0 100% no-repeat, linear-gradient(0deg, var(--button-color) 0, var(--button-color)) 100% 100% no-repeat;
background: -webkit-gradient(linear, left top, right top, from(var(--button-color2)), to(var(--button-color))) 0 0 no-repeat, -webkit-gradient(linear, left top, right top, from(var(--button-color2)), to(var(--button-color))) 0 100% no-repeat, -webkit-gradient(linear, left bottom, left top, from(var(--button-color2)), to(var(--button-color2))) 0 100% no-repeat, -webkit-gradient(linear, left bottom, left top, from(var(--button-color)), to(var(--button-color))) 100% 100% no-repeat;
background-size: 100% 2px, 100% 2px, 2px 100%, 2px 100%;
}
#login .button:hover {
color: var(--button-text-color-hover);
background-color: var(--button-color);
background: -webkit-gradient(linear, left top, right top, from(var(--button-color2)), to(var(--button-color)));
background: linear-gradient(90deg, var(--button-color2) 0, var(--button-color));
}
#login {
background: var(--div-background-color-15) !important;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
padding-top: 1rem;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%) !;
-ms-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
margin: 0 !important;
text-transform: uppercase;
min-width: 300px;
}
#login .angle:after {
display: none;
}
#login .wordmark {
display: none;
}
#login .logo {
background: var(--logo);
background-size: contain;
padding: 2rem;
border-radius: 0;
margin: 0rem 1rem 0rem 1rem;
}
#login .error {
animation-name: shake;
animation-duration: .8s;
}

View File

@ -0,0 +1,28 @@
@import url("/css/addons/unraid/login-page/fallout/fallout_base.css");
:root {
--main-bg-color: url(/css/addons/unraid/login-page/fallout/wallpaper/rocky-wall.png),
url(/css/addons/unraid/login-page/fallout/wallpaper/terminal.jpg) center center/cover no-repeat fixed;
--logo: url(/css/addons/unraid/login-page/fallout/logo/vault-tec_green.png) center no-repeat;
--text-color: #14F074;
--input-color: #14F074;
--link-color: #14F074;
--link-color-hover: #0C833D;
--case-color: #14F074;
--button-text-color: #14F074;
--button-text-color-hover: #FFFFFF;
--button-color: #14F074;
--button-color2: #0C833D;
--input-font: 'Share Tech Mono', monospace;
--text-font: 'Share Tech Mono', monospace;
--div-background-color-15: rgba(0, 0, 0, 0.25);
/* Replace the variables if you have a dark background */
/* Light colors for dark backgrounds */
/*
--div-background-color-15: rgba(255, 255, 255, 0.15);
https://www.transparenttextures.com/patterns/hexellence.png
https://www.transparenttextures.com/patterns/gplay.png
https://www.transparenttextures.com/patterns/simple-horizontal-light.png
https://www.colourlovers.com/palette/3428762/Fallout?widths=1
*/
}

View File

@ -0,0 +1,28 @@
@import url("/css/addons/unraid/login-page/fallout/fallout_base.css");
:root {
--main-bg-color: url(/css/addons/unraid/login-page/fallout/wallpaper/rocky-wall.png),
url(/css/addons/unraid/login-page/fallout/wallpaper/terminal2.jpg) center center/cover no-repeat fixed;
--logo: url(/css/addons/unraid/login-page/fallout/logo/vault-tec_green.png) center no-repeat;
--text-color: #14F074;
--input-color: #14F074;
--link-color: #14F074;
--link-color-hover: #0C833D;
--case-color: #14F074;
--button-text-color: #14F074;
--button-text-color-hover: #FFFFFF;
--button-color: #14F074;
--button-color2: #0C833D;
--input-font: 'Share Tech Mono', monospace;
--text-font: 'Share Tech Mono', monospace;
--div-background-color-15: rgba(0, 0, 0, 0.25);
/* Replace the variables if you have a dark background */
/* Light colors for dark backgrounds */
/*
--div-background-color-15: rgba(255, 255, 255, 0.15);
https://www.transparenttextures.com/patterns/hexellence.png
https://www.transparenttextures.com/patterns/gplay.png
https://www.transparenttextures.com/patterns/simple-horizontal-light.png
https://www.colourlovers.com/palette/3428762/Fallout?widths=1
*/
}

View File

@ -0,0 +1,195 @@
@import "https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css";
@import "https://fonts.googleapis.com/css?family=Share+Tech+Mono&display=swap";
@import "https://fonts.googleapis.com/css?family=VT323";
* {
outline: none;
}
@media (max-width: 500px) {
#login {
-webkit-backdrop-filter: blur(0px);
backdrop-filter: blur(0px);
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
height: 100%;
width: 100%;
border-radius: none !important;
}
.background-wrap,#video-bg-elem {display: none;}
}
html {
background: var(--main-bg-color) !important;
}
body {
background: var(--main-bg-color) !important;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
height: 100%;
width: 100%;
overflow: hidden;
}
@media only screen and (max-width: 768px) {
#login {
min-width: 300px;
}
}
/*FOR VIDEO BACKGROUND*/
.background-wrap {
position: fixed;
z-index: -1000;
width: 100%;
height: 100%;
overflow: hidden;
top: 0;
left: 0;
}
#video-bg-elem {
display: block;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 1;
}
/*TEXT COLOR*/
#login h1,
#login h2,
#login .error {
color: var(--text-color) !important;
}
#login a {
color: var(--link-color);
}
#login a:hover {
color: var(--link-color-hover);
}
#login input {
color: var(--input-color);
}
#login ::placeholder {
color: var(--input-color);
}
#login ::-webkit-input-placeholder {
color: var(--input-color);
}
#login ::-moz-placeholder {
color: var(--input-color);
}
#login :-ms-input-placeholder {
color: var(--input-color);
}
#login :-moz-placeholder {
color: var(--input-color);
}
#login input:focus::-webkit-input-placeholder {
color: transparent !important;
}
#login input:focus:-moz-placeholder {
color: transparent !important;
}
#login input:focus::-moz-placeholder {
color: transparent !important;
}
#login input:focus:-ms-input-placeholder {
color: transparent !important;
}
/*TEXT FONT*/
#login h1,
#login h2,
#login a,
#login .button,
#login .error {
font-family: var(--text-font);
}
/* CASE COLOR */
#login [class^='case-'],
#login [class*=' case-'] {
font-family: cases!important;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
color: var(--case-color);
}
/*INPUT FORMS*/
#login [type=text],
#login [type=password] {
font-family: var(--input-font);
background-color: rgba(0, 0, 0, 0.25);
border: 2px solid transparent;
text-transform: uppercase;
border-radius: 5px;
}
#login [type=text]:active,
#login [type=text]:focus,
#login [type=password]:active,
#login [type=password]:focus {
font-family: var(--input-font);
background-color: rgba(0, 0, 0, 0.25);
border: 2px solid transparent;
text-transform: uppercase;
}
/*BUTTON*/
#login .button {
color: var(--button-text-color);
background: linear-gradient(90deg, var(--button-color2) 0, var(--button-color)) 0 0 no-repeat, linear-gradient(90deg, var(--button-color2) 0, var(--button-color)) 0 100% no-repeat, linear-gradient(0deg, var(--button-color2) 0, var(--button-color2)) 0 100% no-repeat, linear-gradient(0deg, var(--button-color) 0, var(--button-color)) 100% 100% no-repeat;
background: -webkit-gradient(linear, left top, right top, from(var(--button-color2)), to(var(--button-color))) 0 0 no-repeat, -webkit-gradient(linear, left top, right top, from(var(--button-color2)), to(var(--button-color))) 0 100% no-repeat, -webkit-gradient(linear, left bottom, left top, from(var(--button-color2)), to(var(--button-color2))) 0 100% no-repeat, -webkit-gradient(linear, left bottom, left top, from(var(--button-color)), to(var(--button-color))) 100% 100% no-repeat;
background-size: 100% 2px, 100% 2px, 2px 100%, 2px 100%;
}
#login .button:hover {
color: var(--button-text-color-hover);
background-color: var(--button-color);
background: -webkit-gradient(linear, left top, right top, from(var(--button-color2)), to(var(--button-color)));
background: linear-gradient(90deg, var(--button-color2) 0, var(--button-color));
}
#login {
background: var(--div-background-color-15) !important;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
padding-top: 1rem;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%) !;
-ms-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
margin: 0 !important;
text-transform: uppercase;
min-width: 300px;
}
#login .angle:after {
display: none;
}
#login .wordmark {
display: none;
}
#login .logo {
background: var(--logo);
background-size: contain;
padding: 2rem;
border-radius: 0;
margin: 0rem 1rem 0rem 1rem;
}
#login .error {
animation-name: shake;
animation-duration: .8s;
}

View File

@ -0,0 +1,35 @@
@import url("/css/addons/unraid/login-page/fallout/fallout_base.css");
:root {
--main-bg-color: transparent;
--logo: url(/css/addons/unraid/login-page/fallout/logo/vault-tec_green.png) center no-repeat;
--text-color: #14F074;
--input-color: #14F074;
--link-color: #14F074;
--link-color-hover: #0C833D;
--case-color: #14F074;
--button-text-color: #14F074;
--button-text-color-hover: #FFFFFF;
--button-color: #14F074;
--button-color2: #0C833D;
--input-font: 'Share Tech Mono', monospace;
--text-font: 'Share Tech Mono', monospace;
--div-background-color-15: #0ea85118;
/* Replace the variables if you have a dark background */
/* Light colors for dark backgrounds */
/*
--div-background-color-15: rgba(255, 255, 255, 0.15);
https://www.transparenttextures.com/patterns/hexellence.png
https://www.transparenttextures.com/patterns/gplay.png
https://www.transparenttextures.com/patterns/simple-horizontal-light.png
https://www.colourlovers.com/palette/3428762/Fallout?widths=1
*/
}
@media (max-width: 500px) {
body {
background: url(/css/addons/unraid/login-page/fallout/wallpaper/terminal.jpg) center center/cover no-repeat fixed !important;
}
:root {
--div-background-color-15: transparent;
}
}

View File

@ -0,0 +1,7 @@
// Adds a video background
// Source: https://www.youtube.com/watch?v=ehvduomE0AU
let video = `
<div class="background-wrap"><video id="video-bg-elem" preload="auto" autoplay="true" loop="loop" muted="muted"> <source src="https:\/\/gilbn.github.io\/theme.park\/css\/addons\/unraid\/login-page\/fallout\/video\/please_stand_by.mp4" type="video\/mp4">Video not supported</video></div>
`
document.body.innerHTML += video

View File

@ -0,0 +1,7 @@
// Adds a video background
// Source: https://steamcommunity.com/sharedfiles/filedetails/?id=920035918
let video = `
<div class="background-wrap"><video id="video-bg-elem" preload="auto" autoplay="true" loop="loop" muted="muted"> <source src="https:\/\/gilbn.github.io\/theme.park\/css\/addons\/unraid\/login-page\/fallout\/video\/VaultTecCRTLoop.mp4" type="video\/mp4">Video not supported</video></div>
`
document.body.innerHTML += video;

View File

@ -0,0 +1,7 @@
// Adds a video background
// Source: https://www.youtube.com/watch?v=ehvduomE0AU
let video = `
<div class="background-wrap"><video id="video-bg-elem" preload="auto" autoplay="true" loop="loop" muted="muted"> <source src="https:\/\/gilbn.github.io\/theme.park\/css\/addons\/unraid\/login-page\/fallout\/video\/VaultTecCRTLoopNoScanline.mp4" type="video\/mp4">Video not supported</video></div>
`
document.body.innerHTML += video

Binary file not shown.

After

Width:  |  Height:  |  Size: 56 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 86 KiB

View File

@ -0,0 +1,27 @@
@import url("/css/addons/unraid/login-page/fallout/fallout_base.css");
:root {
--main-bg-color: url(/css/addons/unraid/login-page/fallout/wallpaper/terminal.jpg) center center/cover no-repeat fixed;
--logo: url(/css/addons/unraid/login-page/fallout/logo/vault-tec_green.png) center no-repeat;
--text-color: #14F074;
--input-color: #14F074;
--link-color: #14F074;
--link-color-hover: #0C833D;
--case-color: #14F074;
--button-text-color: #14F074;
--button-text-color-hover: #FFFFFF;
--button-color: #14F074;
--button-color2: #0C833D;
--input-font: 'Share Tech Mono', monospace;
--text-font: 'Share Tech Mono', monospace;
--div-background-color-15: rgba(0, 0, 0, 0.25);
/* Replace the variables if you have a dark background */
/* Light colors for dark backgrounds */
/*
--div-background-color-15: rgba(255, 255, 255, 0.15);
https://www.transparenttextures.com/patterns/hexellence.png
https://www.transparenttextures.com/patterns/gplay.png
https://www.transparenttextures.com/patterns/simple-horizontal-light.png
https://www.colourlovers.com/palette/3428762/Fallout?widths=1
*/
}

View File

@ -0,0 +1,27 @@
@import url("/css/addons/unraid/login-page/fallout/fallout_base.css");
:root {
--main-bg-color: url(/css/addons/unraid/login-page/fallout/wallpaper/terminal2.jpg) center center/cover no-repeat fixed;
--logo: url(/css/addons/unraid/login-page/fallout/logo/vault-tec_green.png) center no-repeat;
--text-color: #14F074;
--input-color: #14F074;
--link-color: #14F074;
--link-color-hover: #0C833D;
--case-color: #14F074;
--button-text-color: #14F074;
--button-text-color-hover: #FFFFFF;
--button-color: #14F074;
--button-color2: #0C833D;
--input-font: 'Share Tech Mono', monospace;
--text-font: 'Share Tech Mono', monospace;
--div-background-color-15: rgba(0, 0, 0, 0.25);
/* Replace the variables if you have a dark background */
/* Light colors for dark backgrounds */
/*
--div-background-color-15: rgba(255, 255, 255, 0.15);
https://www.transparenttextures.com/patterns/hexellence.png
https://www.transparenttextures.com/patterns/gplay.png
https://www.transparenttextures.com/patterns/simple-horizontal-light.png
https://www.colourlovers.com/palette/3428762/Fallout?widths=1
*/
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 100 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 424 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 MiB

View File

@ -0,0 +1,33 @@
/*_____________________AMBER_THEME______________________*/
/* --body-before:#00ff771a; /* This is the background that creates the crt lines, background uses a transparency of 10% SET TO NONE TO REMOVE CRT EFFECT */
/* --body-after: #00ff7733; /* This is the background that creates the crt lines, background uses a transparency of 20% SET TO NONE TO REMOVE CRT EFFECT */
/* --body-animation: flicker; This is the background that flickers. SET TO NONE TO REMOVE THE FLICKER ANIMATION! */
/* --custom-text-header-animation: textflicker; /* SET TO NONE TO REMOVE THE FLICKER ANIMATION! */
@import url(/css/addons/unraid/login-page/retro-terminal/retro-terminal-base.css);
:root {
--main-bg-color:black;
--body-before:#ffb52a1a;
--body-after: #ffb52a33;
--body-animation: flicker;
--logo: url(/css/addons/unraid/login-page/alien/logo/wings_yellow.png) center no-repeat;
--text-color: #ffb52a;
--input-color: #ffb52a;
--link-color: #ffb52a;
--link-color-hover: #ff6868;
--case-color: #ffb52a;
--button-text-color: #ffb52a;
--button-text-color-hover: #000;
--button-color: #ffb52a;
--button-color-hover: #ff6868;
--selection-color: #ff6868;
--custom-text-header:#ffb52a;
--custom-text-header-shadow:#ffb52a;
--custom-text-header-animation: textflicker;
--input-font: 'Share Tech Mono', monospace;
--text-font: 'Share Tech Mono', monospace;
--loginbox-background-color: transparent;
--text-shadow: 0 0 8px;
--text-shadow-color: #ffb52a;
--box-shadow: 0 0 15px;
}

View File

@ -0,0 +1,33 @@
/*_____________________BLUE_THEME______________________*/
/* --body-before:#00ff771a; /* This is the background that creates the crt lines, background uses a transparency of 10% SET TO NONE TO REMOVE CRT EFFECT */
/* --body-after: #00ff7733; /* This is the background that creates the crt lines, background uses a transparency of 20% SET TO NONE TO REMOVE CRT EFFECT */
/* --body-animation: flicker; This is the background that flickers. SET TO NONE TO REMOVE THE FLICKER ANIMATION! */
/* --custom-text-header-animation: textflicker; /* SET TO NONE TO REMOVE THE FLICKER ANIMATION! */
@import url(/css/addons/unraid/login-page/retro-terminal/retro-terminal-base.css);
:root {
--main-bg-color:black;
--body-before:#70d7f61a;
--body-after: #70d7f633;
--body-animation: flicker;
--logo: url(/css/addons/unraid/login-page/alien/logo/wings_blue.png) center no-repeat;
--text-color: #70d7f6;
--input-color: #70d7f6;
--link-color: #70d7f6;
--link-color-hover: #8f2809;
--case-color: #70d7f6;
--button-text-color: #70d7f6;
--button-text-color-hover: #000;
--button-color: #70d7f6;
--button-color-hover: #8f2809;
--selection-color: #8f2809;
--custom-text-header:#70d7f6;
--custom-text-header-shadow:#70d7f6;
--custom-text-header-animation: textflicker;
--input-font: 'Share Tech Mono', monospace;
--text-font: 'Share Tech Mono', monospace;
--loginbox-background-color: transparent;
--text-shadow: 0 0 8px;
--text-shadow-color: #70d7f6;
--box-shadow: 0 0 15px;
}

View File

@ -0,0 +1,33 @@
/*_____________________CUSTOM_THEME______________________*/
/* --body-before:#00ff771a; /* This is the background that creates the crt lines, background uses a transparency of 10% SET TO NONE TO REMOVE CRT EFFECT */
/* --body-after: #00ff7733; /* This is the background that creates the crt lines, background uses a transparency of 20% SET TO NONE TO REMOVE CRT EFFECT */
/* --body-animation: flicker; This is the background that flickers. SET TO NONE TO REMOVE THE FLICKER ANIMATION! */
/* --custom-text-header-animation: textflicker; /* SET TO NONE TO REMOVE THE FLICKER ANIMATION! */
@import url(/css/addons/unraid/login-page/retro-terminal/retro-terminal-base.css);
:root {
--main-bg-color:black;
--body-before:#70d7f61a;
--body-after: #70d7f633;
--body-animation: flicker;
--logo: url(/css/addons/unraid/login-page/alien/logo/wings_shadow.png) center no-repeat;
--text-color: #ffffff;
--input-color: #ffffff;
--link-color: #ffffff;
--link-color-hover: #8f2809;
--case-color: #ffffff;
--button-text-color: #ffffff;
--button-text-color-hover: #000;
--button-color: #ffffff;
--button-color-hover: #af0606;
--selection-color: #8f2809;
--custom-text-header:#ffffff;
--custom-text-header-shadow:#ffffff;
--custom-text-header-animation: textflicker;
--input-font: 'Share Tech Mono', monospace;
--text-font: 'Share Tech Mono', monospace;
--loginbox-background-color: transparent;
--text-shadow: 0 0 8px;
--text-shadow-color: #ffffff;
--box-shadow: 0 0 15px;
}

View File

@ -0,0 +1,33 @@
/*_____________________GREEN_THEME______________________*/
/* --body-before:#00ff771a; /* This is the background that creates the crt lines, background uses a transparency of 10% SET TO NONE TO REMOVE CRT EFFECT */
/* --body-after: #00ff7733; /* This is the background that creates the crt lines, background uses a transparency of 20% SET TO NONE TO REMOVE CRT EFFECT */
/* --body-animation: flicker; This is the background that flickers. SET TO NONE TO REMOVE THE FLICKER ANIMATION! */
/* --custom-text-header-animation: textflicker; /* SET TO NONE TO REMOVE THE FLICKER ANIMATION! */
@import url(/css/addons/unraid/login-page/retro-terminal/retro-terminal-base.css);
:root {
--main-bg-color:black;
--body-before:#00ff771a;
--body-after: #00ff7733;
--body-animation: flicker;
--logo: url(/css/addons/unraid/login-page/alien/logo/wings_green.png) center no-repeat;
--text-color: #37f592;
--input-color: #37f592;
--link-color: #37f592;
--link-color-hover: #68ffff;
--case-color: #37f592;
--button-text-color: #37f592;
--button-text-color-hover: #000;
--button-color: #37f592;
--button-color-hover: #68ffff;
--selection-color: #68ffff;
--custom-text-header:#37f592;
--custom-text-header-shadow:#37f592;
--custom-text-header-animation: textflicker;
--input-font: 'Share Tech Mono', monospace;
--text-font: 'Share Tech Mono', monospace;
--loginbox-background-color: transparent;
--text-shadow: 0 0 8px;
--text-shadow-color: #37f592;
--box-shadow: 0 0 15px;
}

View File

@ -0,0 +1,16 @@
//Custom Text Header //
// ACSII slant font
// Needs to be inside <section id="login" class="shadow">
// YOU MUST ESCAPE ANY SINGLE BACKSLASHES LIKE SO: \\
let custom_text_header = `
<div class="custom-text-header"> <pre> __ ___ __
____ ____ _____/ /__________ ____ ___ ____ / (_)___ / /__
/ __ \\/ __ \\/ ___/ __/ ___/ __ \\/ __ '__ \\/ __ \\/ / / __ \\/ //_/
/ / / / /_/ (__ ) /_/ / / /_/ / / / / / / /_/ / / / / / / ,&lt;
/_/ /_/\\____/____/\\__/_/ \\____/_/ /_/ /_/\\____/_/_/_/ /_/_/|_|
</pre> </div>
`;
document.getElementById("login").innerHTML += custom_text_header

View File

@ -0,0 +1,33 @@
/*_____________________RED_THEME______________________*/
/* --body-before:#00ff771a; /* This is the background that creates the crt lines, background uses a transparency of 10% SET TO NONE TO REMOVE CRT EFFECT */
/* --body-after: #00ff7733; /* This is the background that creates the crt lines, background uses a transparency of 20% SET TO NONE TO REMOVE CRT EFFECT */
/* --body-animation: flicker; This is the background that flickers. SET TO NONE TO REMOVE THE FLICKER ANIMATION! */
/* --custom-text-header-animation: textflicker; /* SET TO NONE TO REMOVE THE FLICKER ANIMATION! */
@import url(/css/addons/unraid/login-page/retro-terminal/retro-terminal-base.css);
:root {
--main-bg-color: black;
--body-before: #ff00001a;
--body-after: #ff000033;
--body-animation: flicker;
--logo: url(/css/addons/unraid/login-page/alien/logo/wings_red.png) center no-repeat;
--text-color: #e22828;
--input-color: #e22828;
--link-color: #e22828;
--link-color-hover: #ffffff;
--case-color: #e22828;
--button-text-color: #e22828;
--button-text-color-hover: #000;
--button-color: #e22828;
--button-color-hover: #ffffff;
--selection-color: #ffffff;
--custom-text-header: #e22828;
--custom-text-header-shadow: #e22828;
--custom-text-header-animation: textflicker;
--input-font: 'Share Tech Mono', monospace;
--text-font: 'Share Tech Mono', monospace;
--loginbox-background-color: transparent;
--text-shadow: 0 0 8px;
--text-shadow-color: #e22828;
--box-shadow: 0 0 15px;
}

View File

@ -0,0 +1,362 @@
@import "https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css";
@import "https://fonts.googleapis.com/css?family=Share+Tech+Mono&display=swap";
@import "https://fonts.googleapis.com/css?family=VT323";
/*___FONTS___*/
/* 'VT323', 'Share Tech Mono' */
/* Replace the variables if you have a dark background */
/* Light colors for dark backgrounds */
/*
--div-background-color-15: rgba(255, 255, 255, 0.15);
https://www.transparenttextures.com/patterns/hexellence.png
https://www.transparenttextures.com/patterns/gplay.png
https://www.transparenttextures.com/patterns/simple-horizontal-light.png
https://www.colourlovers.com/palette/3428762/Fallout?widths=1
https://codepen.io/meduzen/pen/zxbwRV
https://codepen.io/lbebber/pen/XJRdrV/ CRT KEY FRAMES
https://brennan.io/2017/06/14/alien-computer-card/
https://www.cssmatic.com/noise-texture
https://codepen.io/somethingformed/pen/raWJXV
============ SOURCES =============
https://github.com/brenns10/alien-console
https://github.com/Swordfish90/cool-retro-term
https://github.com/andersevenrud/retro-css-shell-demo CRT INTERLACE
https://codepen.io/lbebber/pen/XJRdrV/ CRT KEY FRAMES
https://codepen.io/patrickhlauke/pen/YaoBop TEXT FLIKER
*/
* {
outline: none;
}
@media (max-width: 500px) {
#login {
-webkit-backdrop-filter: blur(0px);
backdrop-filter: blur(0px);
position: absolute;
padding-top: 0rem !important;
top: 0;
left: 0;
bottom: 0;
right: 0;
height: 100%;
width: 100%;
border-radius: none !important;
}
.background-wrap,#video-bg-elem,.custom-text-header {display: none;}
#login {
border:none !important;
}
}
html {background: var(--main-bg-color) !important;}
body {background: var(--main-bg-color) !important;}
/* CRT SCREEN FLICKER*/
body::before {
content: "";
background: radial-gradient(ellipse at center,var(--body-before) 0,rgb(0, 0, 0) 100%) !important;
background-repeat: repeat-y !important;
background-size: 100% 4px !important;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
height: 100%;
width: 100%;
overflow: hidden;
animation: var(--body-animation) 0.01s infinite;
pointer-events: none;
}
/* CRT BACKGROUND WITH LINES*/
body::after {
content: "";
background: radial-gradient(ellipse at center,var(--body-after) 0,rgba(0, 0, 0, 0.6) 80%) center center/cover no-repeat fixed, linear-gradient(#0000 0%,#0000 0%) !important;
background-repeat: repeat-y !important;
background-size: 100% 4px !important;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
height: 100%;
width: 100%;
overflow: hidden;
pointer-events: none;
}
@keyframes flicker {0% {opacity: 0.37633;}5% {opacity: 0.70002;}10% {opacity: 0.64427;}15% {opacity: 0.35591;}20% {opacity: 0.34054;}25% {opacity: 0.54917;}30% {opacity: 0.41056;}35% {opacity: 0.67637;}40% {opacity: 0.23681;}45% {opacity: 0.64945;}50% {opacity: 0.67522;}55% {opacity: 0.56049;}60% {opacity: 0.06113;}65% {opacity: 0.95766;}70% {opacity: 0.77945;}75% {opacity: 0.33817;}80% {opacity: 0.19735;}85% {opacity: 0.84337;}90% {opacity: 0.82867;}95% {opacity: 0.65512;}100% {opacity: 0.15179;}}
@media only screen and (max-width: 768px) {
#login {
min-width: 300px;
}
}
/*FOR VIDEO BACKGROUND*/
.background-wrap {
position: fixed;
z-index: -1000;
width: 100%;
height: 100%;
overflow: hidden;
top: 0;
left: 0;
}
#video-bg-elem {
position: absolute;
top: 0;
left: 0;
min-height: 100%;
min-width: 100%;
}
/*TEXT COLOR*/
#login h1,
#login h2,
#login .error {
color: var(--text-color) !important;
text-shadow: var(--text-shadow) var(--text-shadow-color);
}
#login a {
color: var(--link-color);
text-shadow: var(--text-shadow) var(--text-shadow-color);
}
#login a:hover {
color: var(--link-color-hover);
text-shadow: var(--text-shadow) var(--text-shadow-color);
}
#login input {
color: var(--input-color);
text-shadow: 0 0 5px var(--text-shadow-color);
}
#login ::placeholder {
color: var(--input-color);
text-shadow: 0 0 5px var(--text-shadow-color);
}
#login ::-webkit-input-placeholder {
color: var(--input-color);
text-shadow: 0 0 5px var(--text-shadow-color);
}
#login ::-moz-placeholder {
color: var(--input-color);
text-shadow: 0 0 5px var(--text-shadow-color);
}
#login :-ms-input-placeholder {
color: var(--input-color);
text-shadow: 0 0 5px var(--text-shadow-color);
}
#login :-moz-placeholder {
color: var(--input-color);
text-shadow: 0 0 5px var(--text-shadow-color);
}
#login input:focus::-webkit-input-placeholder {
color: transparent !important;
text-shadow: 0 0 0px transparent;
}
#login input:focus:-moz-placeholder {
color: transparent !important;
text-shadow: 0 0 0px transparent;
}
#login input:focus::-moz-placeholder {
color: transparent !important;
text-shadow: 0 0 0px transparent;
}
#login input:focus:-ms-input-placeholder {
color: transparent !important;
text-shadow: 0 0 0px transparent;
}
/*TEXT FONT*/
#login h1,
#login h2,
#login a,
#login .button,
#login .error {
font-family: var(--text-font);
-webkit-font-smoothing: none;
line-height: 1.2;
}
h1 {
font-size: 3em;
margin: 0;
}
/* CASE COLOR */
#login [class^='case-'],
#login [class*=' case-'] {
font-family: cases!important;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
color: var(--case-color);
text-shadow: var(--text-shadow) var(--text-shadow-color);
}
/*INPUT FORMS*/
#login [type=text],
#login [type=password] {
font-family: var(--input-font);
background-color: rgba(0, 0, 0, 0.25);
border: 2px solid transparent;
text-transform: uppercase;
border-radius: 0px;
border: 3px solid var(--text-color);
color: var(--text-color);
}
#login [type=text]:active,
#login [type=text]:focus,
#login [type=password]:active,
#login [type=password]:focus {
font-family: var(--input-font);
background-color: rgba(0, 0, 0, 0.25);
text-transform: uppercase;
}
/*BUTTON*/
#login .button {
color: var(--button-text-color);
text-shadow: var(--text-shadow) var(--text-shadow-color);
background: linear-gradient(90deg, var(--button-color) 0, var(--button-color)) 0 0 no-repeat, linear-gradient(90deg, var(--button-color) 0, var(--button-color)) 0 100% no-repeat, linear-gradient(0deg, var(--button-color) 0, var(--button-color)) 0 100% no-repeat, linear-gradient(0deg, var(--button-color) 0, var(--button-color)) 100% 100% no-repeat;
background: -webkit-gradient(linear, left top, right top, from(var(--button-color)), to(var(--button-color))) 0 0 no-repeat, -webkit-gradient(linear, left top, right top, from(var(--button-color)), to(var(--button-color))) 0 100% no-repeat, -webkit-gradient(linear, left bottom, left top, from(var(--button-color)), to(var(--button-color))) 0 100% no-repeat, -webkit-gradient(linear, left bottom, left top, from(var(--button-color)), to(var(--button-color))) 100% 100% no-repeat;
background-size: 100% 2px, 100% 2px, 2px 100%, 2px 100%;
}
#login .button:hover {
color: var(--button-text-color-hover);
text-shadow: var(--text-shadow) var(--button-color-hover);
box-shadow: var(--box-shadow) var(--button-color-hover);
background-color: var(--button-color-hover);
background: -webkit-gradient(linear, left top, right top, from(var(--button-color-hover)), to(var(--button-color-hover)));
background: linear-gradient(90deg, var(--button-color-hover) 0, var(--button-color-hover));
}
/*LOGIN ID*/
#login {
background: var(--loginbox-background-color) !important;
padding-top: 1rem;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
margin: 0 !important;
text-transform: uppercase;
min-width: 300px;
border-radius: 0px !important;
border: 3px dashed var(--text-color);
}
#login .angle::after {
display:none;
}
#login .wordmark svg {
display: none;
}
#login .logo {
background: var(--logo);
background-size: contain;
padding: 2rem;
border-radius: 0;
margin: 0rem 1rem 0rem 1rem;
}
logo.angle {
-webkit-box-shadow: inset 0px 0px 0px 2px var(--text-color) !important;
box-shadow: inset 0px 0px 0px 2px var(--text-color) !important;
border-radius: 0px !important;
}
#login .error {
animation-name: shake;
animation-duration: .7s;
}
/*CUSTOM HEADER*/
.custom-text-header {
white-space: pre;
letter-spacing: 2px;
font-family: var(--text-font);
-webkit-font-smoothing: none;
font-weight: 900;
line-height: 1.5;
color: var(--custom-text-header) !important;
text-shadow: 0 0 20px var(--custom-text-header-shadow);
position: absolute;
left: 50%;
top: -15%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
animation-duration: 0.01s;
animation-name: var(--custom-text-header-animation);
animation-iteration-count: infinite;
animation-direction: alternate;
font-weight: 900;
}
.custom-text-header:after {
content: "";
position: absolute;
top: 135px;
right: -15px;
background-color: var(--custom-text-header);
vertical-align: top;
width: 20px;
height: 2px;
-webkit-animation: blink 1s step-end infinite;
animation: blink 1s step-end infinite;
}
@-webkit-keyframes blink {
0% { opacity: 1.0; }
50% { opacity: 0.0; }
100% { opacity: 1.0; }
}
@keyframes blink {
0% { opacity: 1.0; }
50% { opacity: 0.0; }
100% { opacity: 1.0; }
}
@keyframes textflicker {
from {
text-shadow: 1px 0 0 #ea36af, -2px 0 0 #75fa69;
border: 10px 0 0 #ea36af, -2px 0 0 #75fa69;
}
to {
text-shadow: 2px 0.5px 2px #ea36af, -1px -0.5px 2px #75fa69;
border: 2px 0.5px 2px #ea36af, -1px -0.5px 2px #75fa69;
}
}
::selection {
background: var(--selection-color); /* WebKit/Blink Browsers */
}
::-moz-selection {
background: var(--selection-color); /* Gecko Browsers */
}
/*
__ ___ __
____ ____ _____/ /__________ ____ ___ ____ / (_)___ / /__
/ __ \/ __ \/ ___/ __/ ___/ __ \/ __ `__ \/ __ \/ / / __ \/ //_/
/ / / / /_/ (__ ) /_/ / / /_/ / / / / / / /_/ / / / / / / ,<
/_/ /_/\____/____/\__/_/ \____/_/ /_/ /_/\____/_/_/_/ /_/_/|_|
*/
/*
<div class="custom-text-header"> <pre> __ ___ __
____ ____ _____/ /__________ ____ ___ ____ / (_)___ / /__
/ __ \/ __ \/ ___/ __/ ___/ __ \/ __ '__ \/ __ \/ / / __ \/ //_/
/ / / / /_/ (__ ) /_/ / / /_/ / / / / / / /_/ / / / / / / ,&lt;
/_/ /_/\____/____/\__/_/ \____/_/ /_/ /_/\____/_/_/_/ /_/_/|_|
</pre> </div>
*/

View File

@ -0,0 +1,33 @@
/*_____________________WHITE_THEME______________________*/
/* --body-before:#00ff771a; /* This is the background that creates the crt lines, background uses a transparency of 10% SET TO NONE TO REMOVE CRT EFFECT */
/* --body-after: #00ff7733; /* This is the background that creates the crt lines, background uses a transparency of 20% SET TO NONE TO REMOVE CRT EFFECT */
/* --body-animation: flicker; This is the background that flickers. SET TO NONE TO REMOVE THE FLICKER ANIMATION! */
/* --custom-text-header-animation: textflicker; /* SET TO NONE TO REMOVE THE FLICKER ANIMATION! */
@import url(/css/addons/unraid/login-page/retro-terminal/retro-terminal-base.css);
:root {
--main-bg-color:black;
--body-before:#70d7f61a;
--body-after: #70d7f633;
--body-animation: flicker;
--logo: url(/css/addons/unraid/login-page/alien/logo/wings_shadow.png) center no-repeat;
--text-color: #ffffff;
--input-color: #ffffff;
--link-color: #ffffff;
--link-color-hover: #af0606;
--case-color: #ffffff;
--button-text-color: #ffffff;
--button-text-color-hover: #000;
--button-color: #ffffff;
--button-color-hover: #af0606;
--selection-color: #8f2809;
--custom-text-header:#ffffff;
--custom-text-header-shadow:#ffffff;
--custom-text-header-animation: textflicker;
--input-font: 'Share Tech Mono', monospace;
--text-font: 'Share Tech Mono', monospace;
--loginbox-background-color: transparent;
--text-shadow: 0 0 8px;
--text-shadow-color: #000000;
--box-shadow: 0 0 15px;
}

Some files were not shown because too many files have changed in this diff Show More