1
0
mirror of https://github.com/gilbN/theme.park.git synced 2024-10-02 13:37:21 +02:00
This commit is contained in:
GilbN 2021-11-01 21:37:21 +00:00
commit c4fce7935c
3797 changed files with 132497 additions and 0 deletions

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.

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("https://theme-park.dev/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("https://theme-park.dev/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 "https://theme-park.dev/CSS/themes/organizr/organizr-base-old.css"
@import "https://theme-park.dev/CSS/addons/organizr/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;
}

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("https://theme-park.dev/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,119 @@
: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;
}
/* 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;
}

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("https://theme-park.dev/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("https://theme-park.dev/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("https://theme-park.dev/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("https://theme-park.dev/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("https://theme-park.dev/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("https://theme-park.dev/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("https://theme-park.dev/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("https://theme-park.dev/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("https://theme-park.dev/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("https://theme-park.dev/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("https://theme-park.dev/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("https://theme-park.dev/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(https://theme-park.dev/CSS/addons/unraid/login-page/alien/wallpaper/hallway2.jpg) center center/cover no-repeat fixed;
--logo: url(https://theme-park.dev/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("https://theme-park.dev/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(https://theme-park.dev/CSS/addons/unraid/login-page/alien/wallpaper/hallway.jpg) center center/cover no-repeat fixed;
--logo: url(https://theme-park.dev/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("https://theme-park.dev/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(https://theme-park.dev/CSS/addons/unraid/login-page/alien/wallpaper/hallway2.jpg) center center/cover no-repeat fixed;
--logo: url(https://theme-park.dev/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("https://theme-park.dev/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(https://theme-park.dev/CSS/addons/unraid/login-page/alien/wallpaper/hallway3.jpg) center center/cover no-repeat fixed;
--logo: url(https://theme-park.dev/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("https://theme-park.dev/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(https://theme-park.dev/CSS/addons/unraid/login-page/alien/wallpaper/hallway4.jpg) center center/cover no-repeat fixed;
--logo: url(https://theme-park.dev/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("https://theme-park.dev/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(https://theme-park.dev/CSS/addons/unraid/login-page/alien/wallpaper/isolation.png) center center/cover no-repeat fixed;
--logo: url(https://theme-park.dev/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("https://theme-park.dev/CSS/addons/unraid/login-page/alien/alien_base.css");
:root {
--main-bg: transparent;
--logo: url(https://theme-park.dev/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("https://theme-park.dev/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(https://theme-park.dev/CSS/addons/unraid/login-page/alien/wallpaper/nightmare.png) center center/cover no-repeat fixed;
--logo: url(https://theme-park.dev/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("https://theme-park.dev/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(https://theme-park.dev/CSS/addons/unraid/login-page/alien/wallpaper/scanner.jpg) center center/cover no-repeat fixed;
--logo: url(https://theme-park.dev/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(https://theme-park.dev/CSS/addons/unraid/login-page/fallout/wallpaper/rocky-wall.png), url(https://theme-park.dev/CSS/addons/unraid/login-page/fallout/wallpaper/6Ua3u8.jpg) center center/cover no-repeat fixed;
--logo: url(https://theme-park.dev/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("https://theme-park.dev/CSS/addons/unraid/login-page/fallout/fallout_base.css");
:root {
--main-bg-color: url(https://theme-park.dev/CSS/addons/unraid/login-page/fallout/wallpaper/rocky-wall.png),
url(https://theme-park.dev/CSS/addons/unraid/login-page/fallout/wallpaper/terminal.jpg) center center/cover no-repeat fixed;
--logo: url(https://theme-park.dev/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("https://theme-park.dev/CSS/addons/unraid/login-page/fallout/fallout_base.css");
:root {
--main-bg-color: url(https://theme-park.dev/CSS/addons/unraid/login-page/fallout/wallpaper/rocky-wall.png),
url(https://theme-park.dev/CSS/addons/unraid/login-page/fallout/wallpaper/terminal2.jpg) center center/cover no-repeat fixed;
--logo: url(https://theme-park.dev/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("https://theme-park.dev/CSS/addons/unraid/login-page/fallout/fallout_base.css");
:root {
--main-bg-color: transparent;
--logo: url(https://theme-park.dev/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(https://theme-park.dev/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("https://theme-park.dev/CSS/addons/unraid/login-page/fallout/fallout_base.css");
:root {
--main-bg-color: url(https://theme-park.dev/CSS/addons/unraid/login-page/fallout/wallpaper/terminal.jpg) center center/cover no-repeat fixed;
--logo: url(https://theme-park.dev/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("https://theme-park.dev/CSS/addons/unraid/login-page/fallout/fallout_base.css");
:root {
--main-bg-color: url(https://theme-park.dev/CSS/addons/unraid/login-page/fallout/wallpaper/terminal2.jpg) center center/cover no-repeat fixed;
--logo: url(https://theme-park.dev/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(https://theme-park.dev/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(https://theme-park.dev/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(https://theme-park.dev/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(https://theme-park.dev/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(https://theme-park.dev/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(https://theme-park.dev/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(https://theme-park.dev/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(https://theme-park.dev/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(https://theme-park.dev/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(https://theme-park.dev/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(https://theme-park.dev/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(https://theme-park.dev/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;
}

View File

@ -0,0 +1,34 @@
input::-webkit-input-placeholder {
color: var(--text) !important;
}
input:focus::-webkit-input-placeholder {
color: var(--text-hover) !important;
}
/* Firefox < 19 */
input:-moz-placeholder {
color: var(--text) !important;
}
input:focus:-moz-placeholder {
color: var(--text-hover) !important;
}
/* Firefox > 19 */
input::-moz-placeholder {
color: var(--text) !important;
}
input:focus::-moz-placeholder {
color: var(--text-hover) !important;
}
/* Internet Explorer 10 */
input:-ms-input-placeholder {
color: var(--text) !important;
}
input:focus:-ms-input-placeholder {
color: var(--text-hover) !important;
}

View File

@ -0,0 +1,677 @@
/* 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 */
@import url("https://theme-park.dev/css/defaults/placeholders.css");
body {
background: var(--main-bg-color);
background-repeat: repeat, no-repeat;
background-attachment: fixed, fixed;
background-position: center center, center center;
background-size: auto, cover;
-webkit-background-size: auto, cover;
-moz-background-size: auto, cover;
-o-background-size: auto, cover;
color: var(--text) !important;
}
/* Scrollbar */
@media only screen and (min-width: 768px) {
html {
height: 100%;
width: 100%;
}
body {
overflow-y: auto;
height: 100%;
background: var(--main-bg-color);
background-repeat: repeat, no-repeat;
background-attachment: fixed, fixed;
background-position: center center, center center;
background-size: auto, cover;
-webkit-background-size: auto, cover;
-moz-background-size: auto, cover;
-o-background-size: auto, cover;
}
}
body *::-webkit-scrollbar-thumb {
background: hsla(0, 0%, 100%, .2);
}
body *:hover::-webkit-scrollbar-thumb {
background: hsla(0, 0%, 100%, 0.4);
}
::-webkit-scrollbar {
width: 14px;
}
::-webkit-scrollbar-thumb {
min-height: 50px;
border: 3px solid transparent;
border-radius: 8px;
background-color: hsla(0, 0%, 100%, .2);
background-clip: padding-box;
}
::-webkit-scrollbar-track {
background-color: transparent;
}
::-webkit-scrollbar-thumb:hover {
min-height: 50px;
border: 3px solid transparent;
border-radius: 8px;
background-color: hsla(0, 0%, 100%, .5);
background-clip: padding-box;
}
/* TEXT */
a {
color: var(--link-color)
}
a:hover {
color: var(--link-color-hover);
}
a:-webkit-any-link:focus {
outline: none;
}
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
color: var(--text-hover)
}
/* LOGIN PAGE */
.login .login__form .text-center .h-6 {
filter: invert(1);
}
.login__form .card {
background: rgba(0, 0, 0, 0.08);
border: 1px solid rgb(0 0 0 / 0.08);
}
.login .btn-success:hover {
background-color: var(--button-color-hover);
border-color: var(--button-color-hover);
color: var(--button-text-hover);
}
.login .btn-link {
color: var(--button-text);
}
.login .btn-link:hover {
color: var(--button-text-hover);
}
.form__message--error {
color: #F44336;
}
/* HEADER */
.header {
background: transparent;
border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}
.header-brand-img {
filter: invert(1);
}
.header .btn-outline-secondary {
color: var(--button-text);
background: var(--button-color);
border-color: var(--button-color);
}
.header .btn-outline-secondary:hover {
color: var(--button-text-hover);
background-color: var(--button-color-hover);
}
.nav-tabs .nav-link.active {
border-color: rgb(var(--accent-color));
color: rgb(var(--accent-color));
background: transparent;
}
.header .nav-tabs .nav-link.active:hover {
border-color: var(--accent-color-hover) !important;
color: var(--accent-color-hover) !important;
}
.header a:not([href]):not([tabindex]) {
color: var(--text);
text-decoration: none;
}
.header .nav-tabs {
color: var(--text);
}
.header .nav-tabs .nav-link:hover:not(.disabled) {
border-color: var(--text-hover);
color: var(--text-hover);
}
/* FOOTER */
.footer {
background: rgba(0, 0, 0, 0.08);
border-top: 1px solid rgba(255, 255, 255, 0.03);
color: var(--text);
}
.footer a:not(.btn) {
color: var(--link-color);
}
.footer a:not(.btn):hover {
color: var(--link-color-hover);
}
.footer .btn-outline-primary {
color: var(--button-color);
background-color: transparent;
background-image: none;
border-color: var(--button-color);
}
.footer .btn-outline-primary:hover {
color: var(--button-text-hover);
background-color: var(--button-color-hover);
border-color: var(--button-color-hover);
}
/* MAIN PAGE */
.header__row .mobile-menu {
background-color: transparent;
}
/* BUTTONS */
.container .btn-outline-primary {
color: var(--button-text);
background-color: var(--button-color);
background-image: none;
border-color: var(--button-color);
}
.container .btn-outline-primary:hover {
color: var(--button-text-hover);
background-color: var(--button-color-hover);
border-color: var(--button-color-hover);
}
.tooltip-container {
background: rgb(var(--accent-color));
color: var(--label-text-color);
}
.tooltip-custom__container .button-action--arrow-option:not(:disabled):hover {
cursor: pointer;
background: rgb(0 0 0 / 0.15);
overflow: hidden;
}
.toast--success {
background-color: rgba(90, 173, 99, 0.75);
}
/* CARDS*/
.card {
background-color: rgb(0 0 0 / 8%);
border: 1px solid rgba(255, 255, 255, 0.1);
color: var(--text);
}
.card-header .card-title {
color: rgb(var(--accent-color));
}
.tooltip-custom__container {
background: rgb(var(--accent-color));
color: var(--label-text-color);
}
.tooltip-custom__content-link {
color: var(--link-color);
}
.card-wrap,
.card-title-stats {
color: inherit;
}
.card-title-stats a {
text-decoration: underline;
}
.card-title-stats a:hover {
text-decoration: underline;
color: var(--accent-color-hover);
}
.card .icon--lightgray {
color: var(--text);
}
.card .logs__text {
color: var(--text);
}
.card .button__action {
background-color: transparent;
}
.card .btn-outline-danger {
color: #F44336;
background-color: transparent;
background-image: none;
border-color: #F44336;
}
.btn-outline-danger:hover {
color: #fff;
background-color: #F44336;
border-color: #F44336;
}
.btn-icon--green,
.icon--green {
color: var(--button-color);
}
/* DROPDOWNS */
.dropdown-menu {
color: var(--text);
background: var(--modal-bg-color);
background-repeat: repeat, no-repeat;
background-attachment: fixed, fixed;
background-position: center center, center center;
background-size: auto, cover;
-webkit-background-size: auto, cover;
-moz-background-size: auto, cover;
-o-background-size: auto, cover;
background-clip: padding-box;
border: 1px solid rgba(0, 40, 100, 0.12);
border-radius: 3px;
}
.dropdown-item {
color: var(--text);
}
.dropdown-item:hover,
.dropdown-item:focus {
color: var(--text-hover);
text-decoration: none;
background-color: rgb(255 255 255 / 0.08);
}
.select__menu {
background: var(--modal-bg-color) !important;
background-repeat: repeat, no-repeat;
background-attachment: fixed, fixed;
background-position: center center, center center;
background-size: auto, cover;
-webkit-background-size: auto, cover;
-moz-background-size: auto, cover;
-o-background-size: auto, cover;
box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, .5);
}
.select__option:hover {
background: rgba(255, 255, 255, .08) !important;
}
.select__option {
background: rgba(0, 0, 0, 0) !important;
border-bottom: solid rgba(255, 255, 255, .1) 1px;
}
.select__multi-value__remove {
color: black;
}
.basic-multi-select .select__control--is-focused,
.basic-multi-select .select__control--is-focused:hover {
border-color: transparent !important;
}
/* INSTALL */
.setup__container {
background-color: rgb(0 0 0 / 8%);
}
.setup__progress-wrap {
background-color: rgb(0 0 0 / 50%);
}
.setup__logo {
filter: invert(1);
}
/* SETTINGS */
.checkbox__label-subtitle,
.form__desc,
.page-subtitle,
.card-title small,
.card-subtitle {
color: var(--text-hover);
}
.dropdown-item.active,
.dropdown-item:active {
background-color: rgb(0 0 0 / 25%);
}
.service__icon {
color: #eee;
}
/* LOGS */
.logs__table {
background-color: rgb(0 0 0 / 8%);
}
.logs__text,
.logs__row .list-unstyled li,
.detailed-info,
.icon--lightgray,
.icon--gray,
.loading__text {
color: var(--text)
}
.logs__no-data {
color: var(--text);
background-color: transparent;
}
.logs__row--white {
background-color: transparent;
}
.rt-tr-group.red,
.logs__row--red,
.rt-tr-group.logs__row--red {
background-color: rgb(244 67 54 / 30%) !important;
}
.rt-tr-group.blue,
.rt-tr-group.logs__row--blue,
.logs__row--blue {
background-color: rgb(54 146 244 / 30%) !important;
}
.ReactTable .rt-noData {
background: transparent;
color: var(--text-muted);
}
.ReactTable .-pagination .-btn {
color: var(--text);
background: var(--button-color);
}
.ReactTable .-pagination .-btn:not([disabled]):hover {
background: var(--button-color-hover);
color: var(--text-hover);
}
.ReactTable .-loading,
.ReactTable .-loading>div {
background: rgba(255, 255, 255, 0.5);
}
.ReactTable .rt-thead .rt-th,
.ReactTable .rt-thead .rt-td,
.logs__cell--header__container {
color: var(--text-hover);
}
.ReactTable .rt-tbody .rt-tr-group {
border-bottom: solid 1px rgb(255 255 255 / 20%);
}
.ReactTable .rt-thead.-header {
background: rgb(0 0 0 / 25%);
}
.ReactTable .rt-thead .rt-th.-sort-asc, .ReactTable .rt-thead .rt-td.-sort-asc {
-webkit-box-shadow: inset 0 3px 0 0 rgb(var(--accent-color), 0.60);
box-shadow: inset 0 3px 0 0 rgb(var(--accent-color), 0.60);
}
.ReactTable .rt-thead .rt-th.-sort-desc, .ReactTable .rt-thead .rt-td.-sort-desc {
-webkit-box-shadow: inset 0 -3px 0 0 rgb(var(--accent-color), 0.60);
box-shadow: inset 0 -3px 0 0 rgb(var(--accent-color), 0.60);
}
.table th,
.text-wrap table th,
.table td,
.text-wrap table td {
padding: 0.75rem;
vertical-align: top;
border-top: 1px solid rgba(255, 255, 255, 0.2);
}
.loading:before {
background-color: transparent;
}
.custom-select:focus {
-webkit-box-shadow: none;
box-shadow: none;
}
/* FORMS */
.form-control {
color: var(--text);
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, .1)
}
.form-control--transparent {
color: var(--text-hover);
}
.form-control--search {
outline: none;
}
.form-control:focus {
border-color: transparent;
-webkit-box-shadow: none;
box-shadow: none;
background: rgba(255, 255, 255, 0.2);
color: var(--text-hover);
}
.form-control:disabled, .form-control[readonly] {
background-color: #555;
opacity: 1;
cursor: not-allowed;
}
.custom-select {
color: var(--text);
background: rgba(255, 255, 255, 0.1) url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAxMCA1Jz48cGF0aCBmaWxsPScjOTk5JyBkPSdNMCAwTDEwIDBMNSA1TDAgMCcvPjwvc3ZnPg==") no-repeat right 0.75rem center;
background-size: 8px 10px;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.custom-select:focus {
color: var(--text-hover);
background: #1f1f1f url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAxMCA1Jz48cGF0aCBmaWxsPScjOTk5JyBkPSdNMCAwTDEwIDBMNSA1TDAgMCcvPjwvc3ZnPg==") no-repeat right 0.75rem center;
background-size: 8px 10px;
border: 1px solid rgba(255, 255, 255, 0.2);
}
select.form-control.select:focus,
select:focus {
color: var(--text-hover);
background: #1f1f1f !important;
}
.icon--selected {
background-color: rgb(0 0 0 / 15%);
border: solid 1px transparent;
}
.tab__control,
.tab__control--active {
color: var(--text);
}
/* BUTTONS */
.btn-outline-secondary {
color: #c9c9c9;
border-color: #c9c9c9;
}
.btn-success,
.btn-success.disabled,
.btn-success:disabled {
background-color: var(--button-color);
border-color: var(--button-color);
color: var(--button-text);
}
.btn-success:hover {
color: var(--button-text-hover);
background-color: var(--button-color-hover);
border-color: var(--button-color-hover);
}
.btn-success:focus,
.btn-success.focus {
-webkit-box-shadow: none;
box-shadow: none;
}
.btn-secondary {
color: var(--button-text);
background-color: rgb(255 255 255 / 25%);
border-color: rgb(255 255 255 / 0%);
-webkit-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.05);
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.05);
}
.btn-secondary:hover {
color: var(--button-text-hover);
background-color: var(--button-color-hover);
border-color: transparent;
}
.checkbox__input:checked+.checkbox__label:before {
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMi4zIDkuMiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2UtbGluZWNhcD0icm91bmQiPjxwYXRoIGQ9Ik0xMS44IDAuNUw1LjMgOC41IDAuNSA0LjIiLz48L3N2Zz4=);
background-color: rgb(var(--accent-color));
}
.custom-radio .custom-control-input:checked~.custom-control-label::before,
.custom-radio .custom-control-input:disabled:checked~.custom-control-label::before {
background-color: rgb(var(--accent-color));
}
.custom-control-input:focus~.custom-control-label::before,
.custom-radio .custom-control-input:disabled:checked~.custom-control-label::before {
-webkit-box-shadow: 0 0 0 1px rgb(var(--accent-color)), 0 0 0 2px rgb(var(--accent-color), .25);
box-shadow: 0 0 0 1px rgb(var(--accent-color)), 0 0 0 2px rgb(var(--accent-color), .25);
}
/* MODALS */
.modal-content {
background: var(--modal-bg-color);
background-repeat: repeat, no-repeat;
background-attachment: fixed, fixed;
background-position: center center, center center;
background-size: auto, cover;
-webkit-background-size: auto, cover;
-moz-background-size: auto, cover;
-o-background-size: auto, cover;
}
.ReactModal__Overlay--after-open {
background-color: rgb(0 0 0 / 0.7) !important;
}
/* MOBILE */
@media (max-width: 767px) {
.mobile-menu {
background: #1b1b1b !important;
}
.dropdown-menu {
background: #1f1f1f !important;
}
.ReactModal__Content {
background: var(--modal-bg-color) !important;
background-repeat: repeat, no-repeat;
background-attachment: fixed, fixed;
background-position: center center, center center;
background-size: auto, cover;
-webkit-background-size: auto, cover;
-moz-background-size: auto, cover;
-o-background-size: auto, cover;
border: 1px solid transparent !important;
}
}
@media (max-width: 991px) {
.mobile-menu {
background: #1b1b1b !important;
}
.dropdown-menu {
background: #1f1f1f !important;
}
}
/* PLACEHOLDER TEXT */
::placeholder {
color: var(--text);
}
:-moz-placeholder {
color: var(--text);
}
:-ms-input-placeholder {
color: var(--text);
}
::-webkit-input-placeholder {
color: var(--text);
}

View File

@ -0,0 +1,2 @@
@import url("https://theme-park.dev/css/base/adguard/adguard-base.css?sha=d065ef2314dea7b0406f468ef38dd86459ab214f");
@import url("https://theme-park.dev/css/theme-options/aquamarine.css?sha=5cdf3f13a57669f3732b64a7573580bcaa9ac6fc");

View File

@ -0,0 +1,2 @@
@import url("https://theme-park.dev/css/base/adguard/adguard-base.css?sha=d065ef2314dea7b0406f468ef38dd86459ab214f");
@import url("https://theme-park.dev/css/community-theme-options/blackberry-abyss.css?sha=5e806cb7efad3e1ac97e985f71d7a631a1b7f02b");

View File

@ -0,0 +1,2 @@
@import url("https://theme-park.dev/css/base/adguard/adguard-base.css?sha=d065ef2314dea7b0406f468ef38dd86459ab214f");
@import url("https://theme-park.dev/css/community-theme-options/blackberry-amethyst.css?sha=bfb208569a57c23e562781bcbcc25c05779421de");

View File

@ -0,0 +1,2 @@
@import url("https://theme-park.dev/css/base/adguard/adguard-base.css?sha=d065ef2314dea7b0406f468ef38dd86459ab214f");
@import url("https://theme-park.dev/css/community-theme-options/blackberry-carol.css?sha=39e2106043161e407b4e509e8d8323121fef6950");

View File

@ -0,0 +1,2 @@
@import url("https://theme-park.dev/css/base/adguard/adguard-base.css?sha=d065ef2314dea7b0406f468ef38dd86459ab214f");
@import url("https://theme-park.dev/css/community-theme-options/blackberry-dreamscape.css?sha=0ad15b8d2215b7528e27f3bd65f1cb0c42453be0");

View File

@ -0,0 +1,2 @@
@import url("https://theme-park.dev/css/base/adguard/adguard-base.css?sha=d065ef2314dea7b0406f468ef38dd86459ab214f");
@import url("https://theme-park.dev/css/community-theme-options/blackberry-flamingo.css?sha=4ddeb117541753969da70820d8205aef771e37b4");

View File

@ -0,0 +1,2 @@
@import url("https://theme-park.dev/css/base/adguard/adguard-base.css?sha=d065ef2314dea7b0406f468ef38dd86459ab214f");
@import url("https://theme-park.dev/css/community-theme-options/blackberry-hearth.css?sha=979626f867e9a9a91664f2b6da66d478040dc8fb");

View File

@ -0,0 +1,2 @@
@import url("https://theme-park.dev/css/base/adguard/adguard-base.css?sha=d065ef2314dea7b0406f468ef38dd86459ab214f");
@import url("https://theme-park.dev/css/community-theme-options/blackberry-martian.css?sha=f6fcaa104ff119d049fb72cebe2e6e620db1aa04");

View File

@ -0,0 +1,2 @@
@import url("https://theme-park.dev/css/base/adguard/adguard-base.css?sha=d065ef2314dea7b0406f468ef38dd86459ab214f");
@import url("https://theme-park.dev/css/community-theme-options/blackberry-pumpkin.css?sha=0ba03cc3999c36f3ef7c0eae7f381cdcbdfd7f33");

View File

@ -0,0 +1,2 @@
@import url("https://theme-park.dev/css/base/adguard/adguard-base.css?sha=d065ef2314dea7b0406f468ef38dd86459ab214f");
@import url("https://theme-park.dev/css/community-theme-options/blackberry-royal.css?sha=4bb56762e9469e831edf005100b9bd04849ad55c");

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