deathbybandaid/theme.park
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

2022-07-09

Browse Source
This commit is contained in:
deathbybandaid 2022-07-09 16:39:46 -04:00
parent a319645dc7
commit 43b01110c2
25 changed files with 401 additions and 101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
css/addons/unraid/login-page/custom_login.sh
View File

@ -1,14 +1,17 @@
#!/bin/bash #!/bin/bash
TYPE="retro-terminal" TYPE="retro-terminal"
THEME="green.css" 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. DOMAIN="theme-park.dev" # If you update the domain after the script has been run, You must disable and re the whole theme with the DISABLE_THEME env.
SCHEME="https"
ADD_JS="true" ADD_JS="true"
JS="custom_text_header.js" JS="custom_text_header.js"
DISABLE_THEME="false" DISABLE_THEME="false"
echo -e "Variables set:\\n\ echo -e "Variables set:\\n\
TYPE = ${TYPE}\\n\
THEME = ${THEME}\\n\ THEME = ${THEME}\\n\
DOMAIN = ${DOMAIN}\\n\ DOMAIN = ${DOMAIN}\\n\
SCHEME = ${SCHEME}\\n\
ADD_JS = ${ADD_JS}\\n\ ADD_JS = ${ADD_JS}\\n\
JS = ${JS}\\n\ JS = ${JS}\\n\
DISABLE_THEME = ${DISABLE_THEME}\\n" DISABLE_THEME = ${DISABLE_THEME}\\n"
@ -48,31 +51,33 @@ esac
# Adding stylesheets # Adding stylesheets
if ! grep -q ${DOMAIN} ${LOGIN_PAGE}; then if ! grep -q ${DOMAIN} ${LOGIN_PAGE}; then
echo "Adding stylesheet" echo "Adding stylesheet"
sed -i -e "\@<style>@i\ <link rel='stylesheet' href='https://${DOMAIN}/css/addons/unraid/login-page/${TYPE}/${THEME}'>" ${LOGIN_PAGE} sed -i -e "\@<style>@i\ <link data-tp='theme' rel='stylesheet' href='${SCHEME}://${DOMAIN}/css/addons/unraid/login-page/${TYPE}/${THEME}'>" ${LOGIN_PAGE}
sed -i -e "\@<style>@i\ <link data-tp='base' rel='stylesheet' href='${SCHEME}://${DOMAIN}/css/addons/unraid/login-page/${TYPE}/${TYPE}-base.css'>" ${LOGIN_PAGE}
echo 'Stylesheet set to' ${THEME} echo 'Stylesheet set to' ${THEME}
fi fi
# Adding/Removing javascript # Adding/Removing javascript
if [ ${ADD_JS} = "true" ]; then if [ ${ADD_JS} = "true" ]; then
if ! grep -q ${JS} ${LOGIN_PAGE}; then if ! grep -q ${JS} ${LOGIN_PAGE}; then
if grep -q "<script type='text/javascript' src='https://${DOMAIN}/css/addons/unraid/login-page/" ${LOGIN_PAGE}; then if grep -q "<script type='text/javascript' src='${SCHEME}://${DOMAIN}/css/addons/unraid/login-page/" ${LOGIN_PAGE}; then
echo "Replacing Javascript" 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>" ${LOGIN_PAGE} sed -i "/<script type='text\/javascript' src='${SCHEME}:\/\/${DOMAIN}\/css\/addons\/unraid\/login-page/c <script type='text/javascript' src='${SCHEME}://${DOMAIN}/css/addons/unraid/login-page/${TYPE}/js/${JS}'></script>" ${LOGIN_PAGE}
else else
echo "Adding javascript" echo "Adding javascript"
sed -i -e "\@</body>@i\ <script type='text/javascript' src='https://${DOMAIN}/css/addons/unraid/login-page/${TYPE}/js/${JS}'></script>" ${LOGIN_PAGE} sed -i -e "\@</body>@i\ <script type='text/javascript' src='${SCHEME}://${DOMAIN}/css/addons/unraid/login-page/${TYPE}/js/${JS}'></script>" ${LOGIN_PAGE}
fi fi
fi fi
else else
if grep -q ${JS} ${LOGIN_PAGE}; then if grep -q ${JS} ${LOGIN_PAGE}; then
echo "Removing javascript.." echo "Removing javascript.."
sed -i "/<script type='text\/javascript' src='https:\/\/${DOMAIN}\/css\/addons\/unraid\/login-page/d" ${LOGIN_PAGE} sed -i "/<script type='text\/javascript' src='${SCHEME}:\/\/${DOMAIN}\/css\/addons\/unraid\/login-page/d" ${LOGIN_PAGE}
fi fi
fi fi
# Changing stylesheet # Changing stylesheet
if ! grep -q ${TYPE}"/"${THEME} ${LOGIN_PAGE}; then if ! grep -q ${TYPE}"/"${THEME} ${LOGIN_PAGE}; then
echo "Changing existing custom stylesheet.." 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}'>" ${LOGIN_PAGE} sed -i "/<link data-tp='theme' rel='stylesheet' href='${SCHEME}:\/\/${DOMAIN}\/css\/addons\/unraid\/login-page/c <link data-tp='theme' rel='stylesheet' href='${SCHEME}://${DOMAIN}/css/addons/unraid/login-page/${TYPE}/${THEME}'>" ${LOGIN_PAGE}
sed -i "/<link data-tp='base' rel='stylesheet' href='${SCHEME}:\/\/${DOMAIN}\/css\/addons\/unraid\/login-page/c <link data-tp='base' rel='stylesheet' href='${SCHEME}://${DOMAIN}/css/addons/unraid/login-page/${TYPE}/${TYPE}-base.css'>" ${LOGIN_PAGE}
echo 'Stylesheet set to' ${THEME} echo 'Stylesheet set to' ${THEME}
fi fi

54
css/addons/whisparr/whisparr-darker/whisparr-darker.css Normal file
View File

@ -0,0 +1,54 @@
@import url("/theme.park/css/defaults/servarr-darker-base.css");
:root {
--main-bg-color: #202020;
--modal-bg-color: #2a2a2a;
--modal-header-color: #2a2a2a;
--modal-footer-color: #2a2a2a;
--drop-down-menu-bg: #333;
--button-color: #5899eb;
--button-color-hover: #4b91ea;
--button-text: #eee;
--button-text-hover: #fff;
--accent-color: 255, 105, 180;
--accent-color-hover: rgba(255, 105, 180, 0.8);
--link-color: #ff69b4;
--link-color-hover: rgb(255, 105, 180, .8);
--label-text-color: #333;
--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: #ff69b4;
--label-info: #5d9cec;
--header-color: #2a2a2a;
--toolbar-background: #262626;
--side-menu-color: #2a2a2a;
--side-menu-link-color: #ff69b4;
}
/* 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: var(--label-text-color) !important;
}

80
css/base/bitwarden/bitwarden-base.css
View File

@ -109,17 +109,27 @@ h6,
.h4, .h4,
.h5, .h5,
.h6, .h6,
label:not(#g_advanced > div:nth-child(13) > label):not(#g_advanced > div:nth-child(12) > div.col-sm-8 > div > label),
label:not(.form-check-label):not(.btn):not(#g_advanced > div:nth-child(13) > label),
label.bold .card-header:first-child,
html[class*="theme_"] .card-header, html[class*="theme_"] .card-header,
.modal-header { .modal-header {
color: var(--text-hover) !important; color: var(--text-hover) !important;
} }
body,b,span, p,
html.theme_light label:not(.form-check-label):not(.btn), html.theme_light label.bold {
color: var(--text);
}
/* NAVBAR */ /* NAVBAR */
.navbar { .navbar,
background: var(--transparency-dark-25) !important; .navbar .bg-dark {
background: var(--main-bg-color) !important;
background-repeat: repeat, no-repeat !important;
background-attachment: fixed, fixed !important;
background-position: center center, center center !important;
background-size: auto, cover !important;
-webkit-background-size: auto, cover !important;
-moz-background-size: auto, cover !important;
-o-background-size: auto, cover !important;
--bs-bg-opacity: 0 !important;
} }
.navbar-dark .navbar-nav .show>.nav-link, .navbar-dark .navbar-nav .show>.nav-link,
@ -299,6 +309,33 @@ select:focus {
background: var(--drop-down-menu-bg) !important; background: var(--drop-down-menu-bg) !important;
} }
.form-control:focus {
color: var(--text);
background-color: var(--transparency-dark-15);
border-color: rgb(var(--accent-color));
outline: 0;
box-shadow: 0 0 0 0.25rem rgb(var(--accent-color) / 25%);
}
.form-control {
color: var(--text-hover);
background-color: var(--transparency-dark-25);
background-clip: padding-box;
border: 1px solid var(--transparency-light-10);
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border-radius: 0.25rem;
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.form-select:focus {
border-color: var(--transparency-light-20);
color: var(--text-hover);
outline: 0;
box-shadow: 0 0 0 0.25rem rgba(0, 0, 0, 0);
}
/* DROPDOWN MENU */ /* DROPDOWN MENU */
/* html[class*="theme_"] .dropdown-menu { /* html[class*="theme_"] .dropdown-menu {
background: var(--modal-bg-color); background: var(--modal-bg-color);
@ -395,13 +432,11 @@ html[class*="theme_"] .progress {
/* BUTTONS */ /* BUTTONS */
.btn-link { .btn-link {
color: var(--button-color); color: var(--link-color);
color: var(--button-text);
} }
.btn-link:hover { .btn-link:hover {
color: var(--button-color-hover); color: var(--link-color-hover);
color: var(--button-text-hover);
transition: 0.15s; transition: 0.15s;
} }
@ -522,6 +557,18 @@ html[class*="theme_"] .badge-info {
color: var(--label-text-color); color: var(--label-text-color);
} }
[id*="b_"]{
background: var(--transparency-dark-25);
border-color: var(--transparency-light-10);
color: var(--text);
}
[id*="b_"]:hover{
background: var(--transparency-dark-35);
border-color: var(--transparency-light-10);
color: var(--text-hover);
}
/* Org */ /* Org */
html[class*="theme_"] .org-nav .nav-tabs a.active { html[class*="theme_"] .org-nav .nav-tabs a.active {
@ -594,6 +641,7 @@ html[class*="theme_"] .btn-outline-secondary i {
-webkit-background-size: auto, cover; -webkit-background-size: auto, cover;
-moz-background-size: auto, cover; -moz-background-size: auto, cover;
-o-background-size: auto, cover; -o-background-size: auto, cover;
--bs-bg-opacity: 0;
} }
.bg-light .navbar { .bg-light .navbar {
@ -607,6 +655,14 @@ html[class*="theme_"] .btn-outline-secondary i {
-o-background-size: auto, cover; -o-background-size: auto, cover;
} }
.border-bottom {
border-bottom: 1px solid var(--transparency-light-15) !important;
}
div.dataTables_wrapper div.dataTables_info {
color: var(--text);
}
/* Cards */ /* Cards */
.bg-secondary { .bg-secondary {
background: var(--transparency-light-10) !important; background: var(--transparency-light-10) !important;
@ -659,4 +715,10 @@ html[class*="theme_"] hr,
html[class*="theme_"] .dropdown-divider, html[class*="theme_"] .dropdown-divider,
html[class*="theme_"] .footer { html[class*="theme_"] .footer {
border-top: 1px solid rgb(255 255 255 / 30%); border-top: 1px solid rgb(255 255 255 / 30%);
}
thead, tbody, tfoot, tr, td, th {
border-color:var(--transparency-light-25);
border-style: solid;
border-width: 0;
} }

8
css/base/deluge/deluge-base.css
View File

@ -16,7 +16,7 @@
@import url("/theme.park/css/defaults/placeholders.css"); @import url("/theme.park/css/defaults/placeholders.css");
@import url("/theme.park/css/defaults/transparent.css"); @import url("/theme.park/css/defaults/transparent.css");
html { html,body {
background: var(--main-bg-color); background: var(--main-bg-color);
background-repeat: repeat, no-repeat; background-repeat: repeat, no-repeat;
background-attachment: fixed, fixed; background-attachment: fixed, fixed;
@ -812,11 +812,11 @@
} }
.x-btn-mc em.x-btn-arrow { .x-btn-mc em.x-btn-arrow {
//background-image: url(../images/default/button/arrow.gif); background-image: url(/theme.park/resources/deluge/arrow.png);
} }
.x-btn-mc em.x-btn-split { .x-btn-mc em.x-btn-split {
//background-image: url(../images/default/button/s-arrow.gif); background-image: url(/theme.park/resources/deluge/s-arrow.png);
} }
.x-btn-over .x-btn-mc em.x-btn-split, .x-btn-over .x-btn-mc em.x-btn-split,
@ -1798,7 +1798,7 @@
} }
.x-menu-item-checked .x-menu-group-item .x-menu-item-icon { .x-menu-item-checked .x-menu-group-item .x-menu-item-icon {
//background-image: url(../images/gray/menu/group-checked.gif); background-image: url(/theme.park/resources/deluge/group-checked.png);
} }
.x-menu-group-item .x-menu-item-icon { .x-menu-group-item .x-menu-item-icon {

15
css/base/guacamole/guacamole-base.css
View File

@ -352,6 +352,7 @@ textarea {
.user a:visited, .user a:visited,
.user-group a:visited,
.connection a:visited, .connection a:visited,
.connection-group a:visited { .connection-group a:visited {
text-decoration: none; text-decoration: none;
@ -448,6 +449,7 @@ textarea {
} }
.user a:visited, .user a:visited,
.user-group a:visited,
.connection a:visited, .connection a:visited,
.connection-group a:visited { .connection-group a:visited {
text-decoration: none; text-decoration: none;
@ -463,6 +465,7 @@ a.ng-binding:hover:not(.add-user):not(.button) {
} }
.user a, .user a,
.user-group a,
.connection a, .connection a,
.connection-group a, .connection-group a,
a.ng-binding:not(.add-user):not(.button) { a.ng-binding:not(.add-user):not(.button) {
@ -484,6 +487,18 @@ textarea {
background: #666; background: #666;
} }
img.collapse {
filter: invert(1);
}
img.expand {
filter: invert(1);
}
.icon.user-group {
filter: invert(1);
}
/* USER SETTINGS */ /* USER SETTINGS */
.page-tabs .page-list li a[href], .page-tabs .page-list li a[href],
.section-tabs li a { .section-tabs li a {

7
css/base/pihole/pihole-base.css
View File

@ -499,6 +499,11 @@
border-color: var(--button-color) !important; border-color: var(--button-color) !important;
} }
[class*=icheck-]>input:first-child:checked+input[type=hidden]+label::after,
[class*=icheck-]>input:first-child:checked+label::after {
border-color: var(--button-text);
}
/* Input */ /* Input */
input, input,
.form-control, .form-control,
@ -590,4 +595,4 @@
border-radius: 8px; border-radius: 8px;
background: var(--transparency-light-50); background: var(--transparency-light-50);
background-clip: padding-box; background-clip: padding-box;
} }

188
css/base/portainer/portainer-base.css
View File

@ -16,7 +16,7 @@
:root { :root {
--text-json-tree-branch-preview-color: var(--text); --text-json-tree-branch-preview-color: var(--text);
--text-json-tree-leaf-color: var(--text); --text-json-tree-leaf-color: var(--text);
} }
/* Scrollbar */ /* Scrollbar */
@media only screen and (min-width: 768px) { @media only screen and (min-width: 768px) {
@ -271,6 +271,19 @@ ul.sidebar .sidebar-title {
background: var(--transparency-light-10); background: var(--transparency-light-10);
} }
.table>tbody>tr>td,
.table>tbody>tr>th,
.table>tfoot>tr>td,
.table>tfoot>tr>th,
.table>thead>tr>td,
.table>thead>tr>th {
border-top: 1px solid var(--transparency-light-10);
}
.table>thead>tr>th {
border-bottom: 2px solid var(--transparency-light-10);
}
.table-hover>tbody>tr.active:hover>td, .table-hover>tbody>tr.active:hover>td,
.table-hover>tbody>tr.active:hover>th, .table-hover>tbody>tr.active:hover>th,
.table-hover>tbody>tr:hover>.active, .table-hover>tbody>tr:hover>.active,
@ -297,12 +310,27 @@ ul.sidebar .sidebar-title {
} }
.btn-primary, .btn-primary,
.btn-default { .btn-default,
button,
button h3,
button h5 {
color: var(--button-text); color: var(--button-text);
background-color: var(--button-color); background-color: var(--button-color);
border-color: var(--button-color); border-color: var(--button-color);
} }
.app-react-portainer-environments-wizard-components-Option-Option-module__feature {
--selected-item-color: var(--button-color);
border: 1px solid var(--button-color);
color: var(--button-text) !important;
}
.app-react-portainer-environments-wizard-components-Option-Option-module__feature:hover {
border: 1px var(--button-color);
-webkit-box-shadow: 0 3px 10px -2px rgba(var(--accent-color), 0.8);
box-shadow: 0 3px 10px -2px rgba(var(--accent-color), 0.8);
color: var(--button-text-hover);
}
.btn-default.active, .btn-default.active,
.btn-default:active, .btn-default:active,
.open>.dropdown-toggle.btn-default, .open>.dropdown-toggle.btn-default,
@ -398,51 +426,71 @@ fieldset[disabled] .btn-primary:hover {
} }
/* PAGINATION */ /* PAGINATION */
.pagination>.disabled>a,
.pagination>.disabled>a:focus,
.pagination>.disabled>a:hover,
.pagination>.disabled>span, .pagination>.disabled>span,
.pagination>.disabled>span:hover,
.pagination>.disabled>span:focus, .pagination>.disabled>span:focus,
.pagination>.disabled>span:hover { .pagination>.disabled>button,
.pagination>.disabled>button:hover,
.pagination>.disabled>button:focus,
.pagination>.disabled>a,
.pagination>.disabled>a:hover,
.pagination>.disabled>a:focus {
color: var(--text-muted); color: var(--text-muted);
cursor: not-allowed; background-color: var(--button-color);
background: var(--transparency-light-10); border-color: var(--button-color);
border-color: transparent; }
.pagination>li>button {
position: relative;
float: left;
padding: 6px 12px;
margin-left: -1px !important;
line-height: 1.42857143;
text-decoration: none;
border: 1px solid #ddd;
}
.pagination>li>a,
.pagination>li>button,
.pagination>li>span {
background-color: var(--button-color);
border-color: var(--button-color);
color: var(--button-text);
}
.pagination>li>a:hover,
.pagination>li>button:hover,
.pagination>li>span:hover,
.pagination>li>a:focus,
.pagination>li>button:focus,
.pagination>li>span:focus {
background-color: var(--button-color-hover);
border-color: var(--button-color-hover);
color: var(--button-text-hover);
} }
.pagination>.active>a, .pagination>.active>a,
.pagination>.active>a:focus,
.pagination>.active>a:hover,
.pagination>.active>span, .pagination>.active>span,
.pagination>.active>button,
.pagination>.active>a:hover,
.pagination>.active>span:hover,
.pagination>.active>button:hover,
.pagination>.active>a:focus,
.pagination>.active>span:focus, .pagination>.active>span:focus,
.pagination>.active>span:hover { .pagination>.active>button:focus {
z-index: 2; z-index: 3;
color: var(--button-text); color: #fff;
cursor: default; cursor: default;
background-color: var(--button-color-hover); background-color: var(--button-color-hover);
border-color: var(--button-color-hover); border-color: var(--button-color-hover);
} }
.pagination>li>a,
.pagination>li>span {
text-decoration: none;
color: var(--button-text);
background-color: var(--button-color);
border-color: var(--button-color);
}
.pagination>li>a:focus,
.pagination>li>a:hover,
.pagination>li>span:focus,
.pagination>li>span:hover {
color: var(--button-text-hover);
background-color: var(--button-color-hover);
border-color: var(--button-color-hover);
}
/* FORM CONTROL */ /* FORM CONTROL */
select:focus, select.form-control:focus { select:focus,
select.form-control:focus {
background: var(--drop-down-menu-bg) !important; background: var(--drop-down-menu-bg) !important;
} }
@ -472,7 +520,8 @@ output {
/* DROPDOWN MENU */ /* DROPDOWN MENU */
.dropdown-menu { .dropdown-menu,
.tableMenu {
background: var(--drop-down-menu-bg); background: var(--drop-down-menu-bg);
background-repeat: repeat, no-repeat; background-repeat: repeat, no-repeat;
background-attachment: fixed, fixed; background-attachment: fixed, fixed;
@ -484,6 +533,27 @@ output {
color: var(--text); color: var(--text);
} }
.tableMenu {
background-color: var(--drop-down-menu-bg) !important;
}
.tableMenu .menuContent {
border-bottom: 1px solid var(--transparency-light-15);
}
.widget .widget-body table thead th .table-filter {
color: var(--text-muted);
}
.widget .widget-body table thead th .filter-active {
color: #f0ad4e;
font-size: 12px!important;
}
.table th button.sortable {
color: var(--link-color);
}
.small-select {
background-color: var(--drop-down-menu-bg);
color: var(--text);
}
.dropdown-menu>li>a, .dropdown-menu>li>a,
.ui-select-bootstrap .ui-select-choices-row>span { .ui-select-bootstrap .ui-select-choices-row>span {
color: var(--text); color: var(--text);
@ -714,3 +784,57 @@ pre {
background: var(--transparency-dark-35) !important; background: var(--transparency-dark-35) !important;
background: var(--transparency-dark-35) !important; background: var(--transparency-dark-35) !important;
} }
/* HOME PAGE */
.app-portainer-home-EnvironmentList-EnvironmentItem-EnvironmentItem-module__wrapperButton {
background: rgba(0, 0, 0, 0.2);
color: var(--text);
}
.app-portainer-components-datatables-components-FilterSearchBar-module__searchBar {
border: 1px solid var(--transparency-light-15);
}
.app-portainer-components-form-components-ReactSelect-module__root .selector__control {
border: 1px solid var(--transparency-light-25);
background-color: var(--transparency-dark-25);
}
input,
select,
textarea {
background: var(--transparency-dark-25);
}
.selector__menu {
background-color: var(--drop-down-menu-bg) !important;
border: 1px solid var(--drop-down-menu-bg) !important;
}
.selector__option {
background-color: var(--transparency-light-05) !important;
border: 1px solid var(--transparency-light-05) !important;
}
:root[theme=dark] .app-portainer-components-form-components-ReactSelect-module__root .selector__multi-value,
:root[theme=highcontrast] .app-portainer-components-form-components-ReactSelect-module__root .selector__multi-value {
background-color: rgb(var(--accent-color));
color: var(--label-text-color);
}
:root[theme=dark] .app-portainer-components-form-components-ReactSelect-module__root .selector__multi-value__label,
:root[theme=highcontrast] .app-portainer-components-form-components-ReactSelect-module__root .selector__multi-value__label {
color: var(--label-text-color);
}
/* ACCENTS */
.label-info,
.label-primary {
background-color: rgb(var(--accent-color));
color: var(--label-text-color);
}

23
css/defaults/servarr-base.css
View File

@ -27,11 +27,11 @@ body {
} }
*::-webkit-scrollbar-thumb, *::-webkit-scrollbar-thumb,
[class*="-thumb-"] { [class*="-thumb-"]:not([class*="QualityDefinition-thumb-"]) {
background-color: var(--transparency-light-25) !important; background-color: var(--transparency-light-25) !important;
} }
*::-webkit-scrollbar-thumb:hover, *::-webkit-scrollbar-thumb:hover,
[class*="-thumb-"]:hover { [class*="-thumb-"]:hover:not([class*="QualityDefinition-thumb-"]) {
background-color: var(--transparency-light-35) !important; background-color: var(--transparency-light-35) !important;
} }
@ -398,7 +398,13 @@ a:hover {
color: var(--label-text-color); color: var(--label-text-color);
} }
[class*="PageSidebarItem-status-"][class*="Label-info-"] { [class*="QualityProfile-qualities-"] [class*="Label-info-"] {
border-color: rgb(var(--accent-color));
background-color: transparent;
color: var(--text-hover);
}
[class*="PageSidebarItem-status-"] [class*="Label-info-"] {
border-color: var(--arr-queue-color); border-color: var(--arr-queue-color);
background-color: var(--arr-queue-color); background-color: var(--arr-queue-color);
color: var(--label-text-color); color: var(--label-text-color);
@ -631,7 +637,8 @@ a:hover {
/* IMPORT */ /* IMPORT */
[class*="FieldSet-legend-"] { [class*="FieldSet-legend-"],
[class*="FieldSet-legend-"][class*="FieldSet-small-"] {
color: var(--text-hover); color: var(--text-hover);
border-bottom: 1px solid rgb(var(--accent-color)); border-bottom: 1px solid rgb(var(--accent-color));
} }
@ -813,6 +820,14 @@ a:hover {
color: var(--text); color: var(--text);
} }
[class*="QualityDefinition-qualityDefinition-"] {
border-top: 1px solid var(--transparency-light-25);
}
[class*="DelayProfile-delayProfile-"] {
border-bottom: 1px solid rgb(var(--accent-color));
}
/* INDEXSERS */ /* INDEXSERS */
[class*="Indexers-center-"] { [class*="Indexers-center-"] {
background-color: transparent; background-color: transparent;

6
css/defaults/servarr-darker-base.css
View File

@ -79,6 +79,12 @@
color: #000; color: #000;
} }
[class*="PageSidebarItem-status-"] [class*="Label-info-"] {
border-color: var(--arr-queue-color);
background-color: var(--arr-queue-color);
color: #fff;
}
/* SETTINGS */ /* SETTINGS */
[class*=Settings-link-] { [class*=Settings-link-] {

53
css/theme-options/maroon.css
View File

@ -1,30 +1,31 @@
:root { :root {
--main-bg-color: radial-gradient( circle farthest-corner at 48.4% 47.5%, rgba(76,21,51,1) 0%, rgba(34,10,37,1) 90% ) center center/cover no-repeat fixed; --main-bg-color: radial-gradient( circle farthest-corner at 48.4% 47.5%, rgba(76,21,51,1) 0%, rgba(34,10,37,1) 90% ) center center/cover no-repeat fixed;
--modal-bg-color: radial-gradient( circle farthest-corner at 48.4% 47.5%, rgba(76,21,51,1) 0%, rgba(34,10,37,1) 90% ) center center/cover no-repeat fixed;
--modal-header-color: radial-gradient( circle farthest-corner at 48.4% 47.5%, rgba(76,21,51,1) 0%, rgba(34,10,37,1) 90% ) center center/cover no-repeat fixed;
--modal-footer-color: radial-gradient( circle farthest-corner at 48.4% 47.5%, rgba(76,21,51,1) 0%, rgba(34,10,37,1) 90% ) center center/cover no-repeat fixed;
--drop-down-menu-bg: #204c80; --modal-bg-color: linear-gradient(-90deg, rgba(76,21,51,1) 0%, rgba(34,10,37,1) 90% ) center center/cover no-repeat fixed;
--modal-header-color: linear-gradient(-90deg, rgba(76,21,51,1) 0%, rgba(34,10,37,1) 90% ) center center/cover no-repeat fixed;
--button-color: #7b154d; --modal-footer-color: linear-gradient(-90deg, rgba(76,21,51,1) 0%, rgba(34,10,37,1) 90% ) center center/cover no-repeat fixed;
--button-color-hover: rgb(150, 26, 94);
--button-text: #eee;
--button-text-hover: #FFF;
--accent-color: 208, 103, 160;
--accent-color-hover: rgb(var(--accent-color),.8);
--queue-color: #6b5;
--link-color: rgb(162, 28, 101);
--link-color-hover: rgb(150, 26, 94);
--text:#dadada;
--text-hover: #fff;
--text-muted: #999;
--arr-queue-color: rgb(0, 255, 157); --drop-down-menu-bg: #220a25;
--plex-poster-unwatched: rgb(123, 21, 77);
--petio-spinner: invert(13%) sepia(77%) saturate(2418%) hue-rotate(306deg) brightness(94%) contrast(98%); /* Made with https://codepen.io/jsm91/embed/ZEEawyZ */ --button-color: #7b154d;
--gitea-color-primary-dark-4: 150, 26, 94; --button-color-hover: rgb(150, 26, 94);
--overseerr-gradient: linear-gradient(0deg, rgba(76,21,51,.9) 0%, rgb(34,10,37,.9) 100%) center center/cover no-repeat fixed; --button-text: #eee;
--button-text-hover: #FFF;
--accent-color: 162, 28, 101;
--accent-color-hover: rgb(var(--accent-color),.8);
--link-color: rgb(162, 28, 101);
--link-color-hover: rgb(194, 36, 122);
--label-text-color: #fff;
--text:#dadada;
--text-hover: #fff;
--text-muted: #999;
/*Specials*/
--arr-queue-color: #6b5; /* Servarr apps + Bazarr*/
--plex-poster-unwatched: rgb(123, 21, 77);
--petio-spinner: invert(13%) sepia(77%) saturate(2418%) hue-rotate(306deg) brightness(94%) contrast(98%); /* Made with https://codepen.io/jsm91/embed/ZEEawyZ */
--gitea-color-primary-dark-4: 150, 26, 94;
--overseerr-gradient: linear-gradient(0deg, rgba(76,21,51,.9) 0%, rgb(34,10,37,.9) 100%) center center/cover no-repeat fixed;
} }

6
css/theme-options/plex.css
View File

@ -20,7 +20,7 @@
--accent-color-hover: #ffc107; --accent-color-hover: #ffc107;
--link-color: #e5a00d; --link-color: #e5a00d;
--link-color-hover: #fff; --link-color-hover: #fff;
--label-text-color: #fff; --label-text-color: #333;
--text:#ddd; --text:#ddd;
--text-hover: #fff; --text-hover: #fff;
@ -31,5 +31,5 @@
--plex-poster-unwatched: #e5a00d; --plex-poster-unwatched: #e5a00d;
--petio-spinner: invert(0%) sepia(0%) saturate(100%) hue-rotate(0deg) brightness(100%) contrast(100%);/* Made with https://codepen.io/jsm91/embed/ZEEawyZ */ --petio-spinner: invert(0%) sepia(0%) saturate(100%) hue-rotate(0deg) brightness(100%) contrast(100%);/* Made with https://codepen.io/jsm91/embed/ZEEawyZ */
--gitea-color-primary-dark-4: 255, 193, 7; --gitea-color-primary-dark-4: 255, 193, 7;
--overseerr-gradient: url(/theme.park/resources/blur-noise.png) repeat scroll 0% 0%, radial-gradient(circle at 0% 100% , rgba(54, 66, 84, 0.55) 0% , rgba(54, 66, 84, 0.043) 70%, rgba(54, 66, 84, 0) 80%), radial-gradient(circle at 100% 100%, rgba(113, 135, 153, 0.55) 0%, rgba(113, 135, 153, 0.043) 70%, rgba(113, 135, 153, 0) 80%) center center/cover no-repeat fixed , radial-gradient(circle at 100% 0%, rgba(54, 66, 84, 0.55) 0%, rgba(54, 66, 84, 0.043) 70%, rgba(54, 66, 84, 0) 80%), radial-gradient(circle at 0% 0%, rgba(91, 114, 135, 0.55) 0%, rgba(91, 114, 135, 0.043) 70%, rgba(91, 114, 135, 0) 80%) center center/cover no-repeat fixed , rgb(0, 0, 0,.9) center center/cover no-repeat fixed; --overseerr-gradient: radial-gradient(circle farthest-side at 0% 100%, rgb(47, 47, 47) 0%, rgba(47, 47, 47, 0) 100%), radial-gradient(circle farthest-side at 100% 100%, rgb(63, 63, 63) 0%, rgba(63, 63, 63, 0) 100%), radial-gradient(circle farthest-side at 100% 0%, rgb(76, 76, 76) 0%, rgba(76, 76, 76, 0) 100%), radial-gradient(circle farthest-side at 0% 0%, rgb(58, 58, 58) 0%, rgba(58, 58, 58, 0) 100%), rgba(0, 0, 0, 0.5) center center/cover no-repeat fixed;
} }

12
docker-mods/qbittorrent/root/etc/cont-init.d/98-themepark
View File

@ -90,9 +90,9 @@ if [[ ! -d /themepark ]]; then
fi fi
sed_file(){ sed_file(){
sed -i "s/<\/body>/<link rel='stylesheet' href='${TP_SCHEME}:\/\/${TP_DOMAIN}\/css\/base\/qbittorrent\/qbittorrent-base.css'><\/body> /g" $1 sed -i "s/<\/body>/<link rel='stylesheet' href='${TP_SCHEME}:\/\/${TP_DOMAIN}\/css\/base\/qbittorrent\/qbittorrent-base.css'><\/body> /g" $1
sed -i "s/<\/body>/<link rel='stylesheet' href='${TP_SCHEME}:\/\/${TP_DOMAIN}\/css\/${THEME_TYPE}\/${TP_THEME}.css'><\/body> /g" $1 sed -i "s/<\/body>/<link rel='stylesheet' href='${TP_SCHEME}:\/\/${TP_DOMAIN}\/css\/${THEME_TYPE}\/${TP_THEME}.css'><\/body> /g" $1
printf 'Stylesheet set to %s on %s\n\n' "${TP_THEME}" "$1" printf 'Stylesheet set to %s on %s\n\n' "${TP_THEME}" "$1"
} }
# Adding stylesheets # Adding stylesheets
@ -104,10 +104,10 @@ if ! grep -q "${TP_DOMAIN}/css/base" /themepark/public/index.html; then
fi fi
if ! grep -q "${TP_DOMAIN}/css/base" /themepark/private/index.html; then if ! grep -q "${TP_DOMAIN}/css/base" /themepark/private/index.html; then
find ./themepark/private -type f -iname *.html | while read fname find /themepark/private -type f -iname *.html | while read fname
do do
sed_file $fname sed_file $fname
done done
fi fi
if ! grep -q "WebUI\\\RootFolder" "${APP_FILEPATH}"; then if ! grep -q "WebUI\\\RootFolder" "${APP_FILEPATH}"; then

2
docker-mods/swag/root/themepark-confs/themepark.subdomain.conf.sample
View File

@ -16,7 +16,7 @@ server {
location /themepark/ { location /themepark/ {
alias /config/www/themepark/; alias /config/www/themepark/;
sub_filter_types *; sub_filter_types *;
sub_filter ' url("/theme.park/css/' 'url("/themepark/css/'; sub_filter 'url("/theme.park/css/' 'url("/themepark/css/';
sub_filter_once off; sub_filter_once off;
try_files $uri $uri/ /index.html; try_files $uri $uri/ /index.html;
} }

2
docker-mods/swag/root/themepark-confs/themepark.subfolder.conf.sample
View File

@ -5,7 +5,7 @@
location /themepark/ { location /themepark/ {
alias /config/www/themepark/; alias /config/www/themepark/;
sub_filter_types *; sub_filter_types *;
sub_filter ' url("/theme.park/css/' 'url("/themepark/css/'; sub_filter 'url("/theme.park/css/' 'url("/themepark/css/';
sub_filter_once off; sub_filter_once off;
try_files $uri $uri/ /index.html; try_files $uri $uri/ /index.html;
# Don't cache # Don't cache

2
docker/root/defaults/default
View File

@ -19,7 +19,7 @@ server {
location /themepark/ { location /themepark/ {
alias /config/www/; alias /config/www/;
sub_filter_types *; sub_filter_types *;
sub_filter ' url("/theme.park/css/' 'url("/themepark/css/'; sub_filter 'url("/theme.park/css/' 'url("/themepark/css/';
sub_filter 'url(/theme.park/resources/' 'url(/themepark/resources/'; sub_filter 'url(/theme.park/resources/' 'url(/themepark/resources/';
sub_filter_once off; sub_filter_once off;
try_files $uri $uri/ /index.html; try_files $uri $uri/ /index.html;

6
index.html
View File

@ -121,9 +121,9 @@
<p class="text-white-50 mb-1">Installation methods include custom <a <p class="text-white-50 mb-1">Installation methods include custom <a
href="https://blog.linuxserver.io/2019/09/14/customizing-our-containers/">docker mods</a> href="https://blog.linuxserver.io/2019/09/14/customizing-our-containers/">docker mods</a>
for <a href="https://linuxserver.io">linuxserver.io</a> containers, </p> for <a href="https://linuxserver.io">linuxserver.io</a> containers, </p>
<p class="text-white-50 mb-5">custom scripts for select <a href="https://hotio.dev/">Hotio</a> <p class="text-white-50 mb-1">custom scripts for select <a href="https://hotio.dev/">Hotio</a> containers
containers and multiple examples of subfiltering using webservers like <a href="https://docs.theme-park.dev/setup/#nginx">Nginx</a>, <a href="https://docs.theme-park.dev/setup/#apache">Apache</a>, <a href="https://docs.theme-park.dev/setup/#caddy">Caddy</a> and <a href="https://docs.theme-park.dev/setup/#traefik">Traefik</a>!</p>
and multiple examples of subfiltering using webservers like Nginx and Apache</p> <p class="text-white-50 mb-5">There is also a <a href="https://docs.theme-park.dev/setup/#docker">Docker image</a> available for selfhosting the CSS files.</p>
<p class="text-white-50 mb-5" id="theme-count">... </p> <p class="text-white-50 mb-5" id="theme-count">... </p>
<a class="btn btn-primary btn-xl js-scroll-trigger" href="#services">Get Started!</a> <a class="btn btn-primary btn-xl js-scroll-trigger" href="#services">Get Started!</a>
</div> </div>

BIN
resources/deluge/arrow.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 129 B

BIN
resources/deluge/group-checked.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 303 B

BIN
resources/deluge/s-arrow.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 163 B

BIN
resources/landing-page/assets/img/maroon-small.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 51 KiB

BIN
resources/landing-page/assets/img/maroon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.3 MiB

BIN
resources/landing-page/assets/img/plex-small.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 65 KiB

After

Width:  |  Height:  |  Size: 26 KiB

BIN
resources/landing-page/assets/img/plex.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.9 MiB

After

Width:  |  Height:  |  Size: 1.1 MiB

17
resources/landing-page/css/custom.css
View File

@ -289,7 +289,7 @@ header.masthead {
background: rgba(0, 0, 0, 0.2); background: rgba(0, 0, 0, 0.2);
color: rgba(255, 255, 255, 0.7); color: rgba(255, 255, 255, 0.7);
border-radius: 5px; border-radius: 5px;
max-width: 120px; max-width: 130px;
min-width: 130px; min-width: 130px;
} }
@ -360,7 +360,7 @@ p {
} }
#portfolio [class*="container-"] .portfolio-box .portfolio-box-caption.plex-hover { #portfolio [class*="container-"] .portfolio-box .portfolio-box-caption.plex-hover {
background: url(/theme.park/resources/blur-noise.png) repeat scroll 0% 0%, radial-gradient(circle at 0% 100%, rgba(54, 66, 84, 0.55) 0%, rgba(54, 66, 84, 0.043) 70%, rgba(54, 66, 84, 0) 80%), radial-gradient(circle at 100% 100%, rgba(113, 135, 153, 0.55) 0%, rgba(113, 135, 153, 0.043) 70%, rgba(113, 135, 153, 0) 80%), radial-gradient(circle at 100% 0%, rgba(54, 66, 84, 0.55) 0%, rgba(54, 66, 84, 0.043) 70%, rgba(54, 66, 84, 0) 80%), radial-gradient(circle at 0% 0%, rgba(91, 114, 135, 0.55) 0%, rgba(91, 114, 135, 0.043) 70%, rgba(91, 114, 135, 0) 80%), rgb(0, 0, 0); background: radial-gradient(circle farthest-side at 0% 100%, rgb(47, 47, 47) 0%, rgba(47, 47, 47, 0) 100%), radial-gradient(circle farthest-side at 100% 100%, rgb(63, 63, 63) 0%, rgba(63, 63, 63, 0) 100%), radial-gradient(circle farthest-side at 100% 0%, rgb(76, 76, 76) 0%, rgba(76, 76, 76, 0) 100%), radial-gradient(circle farthest-side at 0% 0%, rgb(58, 58, 58) 0%, rgba(58, 58, 58, 0) 100%), rgba(0, 0, 0, 0.5) center center/cover no-repeat fixed;
} }
#portfolio [class*="container-"] .portfolio-box .portfolio-box-caption.dracula-hover { #portfolio [class*="container-"] .portfolio-box .portfolio-box-caption.dracula-hover {
@ -379,6 +379,10 @@ p {
background: #2E3440; background: #2E3440;
} }
#portfolio [class*="container-"] .portfolio-box .portfolio-box-caption.maroon-hover {
background: linear-gradient(0deg, rgba(76,21,51,.9) 0%, rgb(34,10,37,.9) 100%) center center/cover no-repeat fixed;;
}
@keyframes fadein { @keyframes fadein {
from { from {
@ -434,4 +438,13 @@ body {
/* Safari and Chrome */ /* Safari and Chrome */
-o-animation: fadein 2s; -o-animation: fadein 2s;
/* Opera */ /* Opera */
}
@media only screen and (min-width: 200px) and (max-width: 767px) {
.app-container {
min-width: 120px;
}
#services, #themes {
padding: 0rem 0 3rem 0;
}
} }

2
resources/landing-page/js/scripts.js
View File

@ -111,7 +111,7 @@ function createApps(apps,themeOptions) {
<a class="portfolio-box" href="resources/landing-page/assets/img/${sortedThemes[option].toLowerCase()}.png"> <a class="portfolio-box" href="resources/landing-page/assets/img/${sortedThemes[option].toLowerCase()}.png">
<img class="img-fluid" src="resources/landing-page/assets/img/${sortedThemes[option].toLowerCase()}-small.jpg" alt="..." /> <img class="img-fluid" src="resources/landing-page/assets/img/${sortedThemes[option].toLowerCase()}-small.jpg" alt="..." />
<div class="portfolio-box-caption p-3 ${sortedThemes[option].toLowerCase()}-hover"> <div class="portfolio-box-caption p-3 ${sortedThemes[option].toLowerCase()}-hover">
<div class="project-category text-white-50">Theme</div> <div class="project-category text-light">Theme</div>
<div class="project-name">${sortedThemes[option][0].toUpperCase() + sortedThemes[option].slice(1)}</div> <div class="project-name">${sortedThemes[option][0].toUpperCase() + sortedThemes[option].slice(1)}</div>
</div> </div>
</a> </a>